/*
 * National Day campaign overlay for the homepage (design:
 * Metronic Theme/Twelve New desgin/twelf-store-national-day).
 *
 * Tokens live on body (see twelve-ui.css). This file only applies when
 * body[data-festive="national"] is set from SiteTheme::isNationalDay() (site-wide switch).
 */

@keyframes ndGlow {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.12); }
}

@keyframes ndFallPage {
    0% { transform: translateY(-6vh) rotate(0deg); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 0.8; }
    100% { transform: translateY(106vh) rotate(420deg); opacity: 0; }
}

@keyframes ndSpark {
    0%, 100% { transform: scale(0) rotate(0); opacity: 0; }
    45% { transform: scale(1) rotate(20deg); opacity: 1; }
    60% { transform: scale(0.8) rotate(30deg); opacity: 0.8; }
}

@keyframes ndDrift {
    0% { transform: translate(0, 0) rotate(-8deg); }
    50% { transform: translate(14px, -18px) rotate(6deg); }
    100% { transform: translate(0, 0) rotate(-8deg); }
}

@keyframes ndFloat {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-5px) rotate(4deg); }
}

body[data-festive="national"] {
    --tw-brand: #0f8a48;
    --tw-brand-2: #2fb56c;
    --tw-brand-rgb: 15, 138, 72;
    --tw-brand-soft: #ddf3e5;
    --tw-tp: #b8860b;
}

body.darkMode[data-festive="national"],
html.darkMode body:not(.lightMode)[data-festive="national"] {
    --tw-brand: #22a65b;
    --tw-brand-2: #3fcc7c;
    --tw-brand-rgb: 34, 166, 91;
    --tw-brand-soft: #0f2c1b;
    --tw-bg: #0b100d;
    --tw-surface: #121a15;
    --tw-surface2: #18231c;
    --tw-head: #0f1712;
    --tw-line: #1f2e25;
    --tw-chip: #1b2921;
}

/*
 * Login/OTP modal head (.tw-auth__head in twelve-ui.css) is a fixed dark
 * gradient hand-tuned around the pink brand color, not built from --tw-brand
 * like the rest of that file — so it stayed pink under National Day while
 * every other themed surface switched to green. Swapped to an analogous
 * dark-green gradient here, same structure and luminance as the original.
 */
body[data-festive="national"] .tw-auth__head {
    background: linear-gradient(135deg, #141417, #14261c 55%, #0d3d22);
}

.nd-home-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    overflow: hidden;
}

.nd-home-overlay__glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--tw-brand-rgb), 0.28), transparent 68%);
    animation: ndGlow 7s ease-in-out infinite;
}

.nd-home-overlay__glow--tr {
    top: -160px;
    inset-inline-end: -160px;
    width: 520px;
    height: 520px;
}

.nd-home-overlay__glow--bl {
    bottom: -200px;
    inset-inline-start: -140px;
    width: 560px;
    height: 560px;
    animation-duration: 9s;
    animation-delay: 2s;
}

.nd-home-overlay__piece {
    position: absolute;
    top: 0;
    opacity: 0;
    animation: ndFallPage var(--nd-dur, 12s) linear var(--nd-delay, 0s) infinite;
}

.nd-home-overlay__spark {
    position: absolute;
    color: var(--tw-brand);
    opacity: 0.55;
    animation: ndSpark 4s ease-in-out var(--nd-delay, 0s) infinite;
}

.nd-home-overlay__year {
    position: absolute;
    font-size: 64px;
    font-weight: 800;
    color: var(--tw-brand);
    opacity: 0.07;
    direction: ltr;
    letter-spacing: -0.05em;
    animation: ndDrift 11s ease-in-out infinite;
    pointer-events: none;
}

.nd-home-overlay__year--bl {
    font-size: 48px;
    animation-duration: 13s;
    animation-delay: 4s;
    animation-direction: reverse;
}

/*
 * Legacy storefront buttons and tabs (style.rtl.min.css / custom.min.css).
 * Those stylesheets load before this one, but every selector below repeats
 * the original selector with the extra body[data-festive] attribute, which
 * always wins on specificity regardless of load order — so nothing in the
 * legacy files needs to be touched (they're generated/minified, not hand-
 * maintained here).
 */

/* var(--primary) already drives most legacy buttons/badges/links — this one
   override follows the active brand color everywhere that variable is used. */
body[data-festive="national"] {
    --primary: var(--tw-brand);
    --primary-rgb: var(--tw-brand-rgb);
}

/* Buttons and toggles still hardcoded to the pink hex (custom.min.css). */
body[data-festive="national"] .form-check-input:checked {
    background-color: var(--tw-brand);
    border-color: var(--tw-brand);
}

body[data-festive="national"] .btn-check:focus + .btn,
body[data-festive="national"] .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--tw-brand-rgb), 0.2);
}

body[data-festive="national"] .btn-submit {
    background-color: var(--tw-brand);
}

body[data-festive="national"] .form-check-input:focus {
    border-color: var(--tw-brand);
}

body[data-festive="national"] .marketer-form .marketer-type .marketer-type-select {
    background-color: var(--tw-brand);
}

/* Buttons and tabs still hardcoded to the pink hex (style.rtl.min.css). */
body[data-festive="national"] .show-partner-coupons .header .btns .btn {
    background-color: var(--tw-brand);
}

body[data-festive="national"] .show-partner-coupons .pagination-con .pagination .page-item .page-link,
body[data-festive="national"] .show-partner-coupons .pagination-con .pagination .page-item .page-link:hover {
    color: var(--tw-brand);
}

body[data-festive="national"] .show-partner-coupons .pagination-con .pagination .page-item.active .page-link {
    background-color: var(--tw-brand);
    border: 1px solid var(--tw-brand);
}

body[data-festive="national"] .voucher-container .select-voucher .btns .cart-btn.added-to-cart {
    color: var(--tw-brand);
}

body[data-festive="national"] .voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link.active {
    color: var(--tw-brand);
}

body[data-festive="national"] .voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link.active svg path {
    fill: var(--tw-brand);
}

body[data-festive="national"] .voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box button {
    background-color: var(--tw-brand);
}

body[data-festive="national"] .settings-container .notification .boxes .box button {
    background-color: var(--tw-brand);
}

body[data-festive="national"] .settings-container .rewards .rewards-field .fld-con .fld button.sub-btn {
    color: var(--tw-brand);
}

body[data-festive="national"] .settings-container .rewards .requests-history .requests-history-header .button {
    background-color: var(--tw-brand);
}

body[data-festive="national"] .settings-container .rank .top-users .top-users-header .button {
    background-color: var(--tw-brand);
}

body[data-festive="national"] .settings-container .not-found a {
    background-color: var(--tw-brand);
    border: 1px solid var(--tw-brand);
}

body[data-festive="national"] .success-page .right .btns a.cta,
body[data-festive="national"] .success-page .last-details .second a.cta,
body[data-festive="national"] .error-page .btns a.cta {
    background-color: var(--tw-brand);
    border: 1px solid var(--tw-brand);
}

body[data-festive="national"] .tabs-main-con .tabs .per-tab.active {
    background-color: var(--tw-brand);
}

/* Account aside: commission-marketer highlight box (custom.min.css) is brand-pink by
   default; these overrides give it the same specificity boost the rest of this file
   uses (body[data-festive] prefix) so it follows the active brand color instead. */
body[data-festive="national"] .settings-container .settings-nav .box.commission-marketer-nav {
    background: linear-gradient(135deg, rgba(var(--tw-brand-rgb), 0.1) 0%, rgba(var(--tw-brand-rgb), 0.18) 100%);
    border: 1px solid rgba(var(--tw-brand-rgb), 0.28);
    box-shadow: 0 1px 0 rgba(var(--tw-brand-rgb), 0.06);
}

body[data-festive="national"] .settings-container .settings-nav .box.commission-marketer-nav span {
    color: var(--tw-brand);
}

body[data-festive="national"] .settings-container .settings-nav .box.commission-marketer-nav svg:not(.rank-icon):not(.nav-icon) path {
    fill: var(--tw-brand);
}

body[data-festive="national"] .settings-container .settings-nav .box.commission-marketer-nav:hover {
    background: linear-gradient(135deg, rgba(var(--tw-brand-rgb), 0.14) 0%, rgba(var(--tw-brand-rgb), 0.24) 100%);
    border-color: rgba(var(--tw-brand-rgb), 0.4);
}

body[data-festive="national"] .settings-container .settings-nav .box.commission-marketer-nav.active {
    background: linear-gradient(135deg, rgba(var(--tw-brand-rgb), 0.18) 0%, rgba(var(--tw-brand-rgb), 0.3) 100%);
    border-color: var(--tw-brand);
}

.tw-brand__nd {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--tw-brand), var(--tw-brand-2));
    border-radius: 99px;
    padding: 3px 8px;
    box-shadow: 0 3px 10px rgba(var(--tw-brand-rgb), 0.35);
    white-space: nowrap;
    animation: ndFloat 3.6s ease-in-out infinite;
}

@media (max-width: 575.98px) {
    .nd-home-overlay__year {
        font-size: 40px;
    }

    .nd-home-overlay__year--bl {
        font-size: 32px;
    }
}