/* ============================================================================
 *  redesign-modern.css
 *  Site-wide "trendy and modern" enhancement layer. Loaded LAST so it tops the
 *  cascade. Additive only — doesn't replace component theme rules, polishes
 *  on top of them. Targets the same legacy classes (no markup changes needed),
 *  so every desktop page gets the upgrade.
 *
 *  Layers added by this file:
 *    A. Global rhythm — smoother scroll, refined selection, custom scrollbars
 *    B. Header polish — sticky behaviour, glass-morphism backdrop on scroll
 *    C. Cards & sections — depth, gradients, hover micro-motion
 *    D. Buttons — refined hover/active/focus, subtle gradient sheen
 *    E. Forms — floating-label style hover, focus glow
 *    F. Sections — generous rhythm, accent dividers
 *    G. Page sections — entrance reveals (paired with redesign-modern.js)
 *    H. Empty states & loading skeletons
 *    I. Accessibility — focus rings, reduced motion
 * ========================================================================= */

/* =============================================================
 * A. Global rhythm
 * ============================================================= */
html { scroll-behavior: smooth; }
::selection { background: rgba(212, 166, 75, 0.32); color: var(--rd-ink); }
::-moz-selection { background: rgba(212, 166, 75, 0.32); color: var(--rd-ink); }

/* Custom scrollbar — site-wide */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--rd-cream-2) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--rd-cream-2);
    border: 2px solid var(--rd-cream);
    border-radius: 999px;
    transition: background 0.2s var(--rd-easing);
}
*::-webkit-scrollbar-thumb:hover { background: var(--rd-green); }
body::-webkit-scrollbar-thumb { background: var(--rd-cream-2); }

/* Smooth font rendering site-wide */
body, html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =============================================================
 * B. Header polish — glass effect when scrolled (via .header-scrolled class
 *    added by redesign-modern.js on window scroll > 20px).
 * ============================================================= */
.header {
    transition: background 0.3s var(--rd-easing),
                box-shadow 0.3s var(--rd-easing),
                backdrop-filter 0.3s var(--rd-easing);
    position: sticky;
    top: 0;
    z-index: 500;
}
.header-scrolled .header,
.rd-scrolled .header {
    background: rgba(250, 246, 236, 0.85) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 4px 20px rgba(20, 40, 30, 0.06);
    border-bottom-color: transparent;
}
.header-scrolled .rd-utility-strip,
.rd-scrolled .rd-utility-strip {
    height: 0;
    overflow: hidden;
    border: 0;
}

/* Sub-nav stays sticky just below header */
.rd-subnav, nav.rd-subnav.menuListBox {
    position: sticky;
    top: 76px;
    z-index: 400;
    background: rgba(250, 246, 236, 0.92) !important;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* =============================================================
 * C. Cards & sections — depth, accent, gradient overlays
 * ============================================================= */
.commonGridSection,
section.commonGridSection {
    padding: 0px 0;
    position: relative;
}
/* Soft cream-to-white gradient strip between alternating sections */
.commonGridSection:nth-of-type(2n) {
    background: linear-gradient(180deg, var(--rd-cream) 0%, var(--rd-cream-3) 100%) !important;
}

.globalBox, .commonBox, .userdetail-cover, .faqMain {
    background: linear-gradient(180deg, #fff 0%, var(--rd-cream-3) 240%) !important;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-lg);
    transition: transform 0.25s var(--rd-easing),
                box-shadow 0.25s var(--rd-easing),
                border-color 0.25s var(--rd-easing);
    position: relative;
    overflow: hidden;
}
.globalBox::before, .commonBox::before, .faqMain::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--rd-green), var(--rd-gold), var(--rd-orange));
    opacity: 0;
    transition: opacity 0.3s var(--rd-easing);
}
.globalBox:hover, .commonBox:hover, .faqMain:hover {
    box-shadow: 0 14px 30px rgba(20, 40, 30, 0.10);
    border-color: rgba(31, 61, 46, 0.18);
}
.globalBox:hover::before, .commonBox:hover::before, .faqMain:hover::before {
    opacity: 1;
}

/* Product card — already heavily themed; add a gold sweep on hover */
.product-slider-box.active,
.product-slider .slideItem .product-slider-box {
    position: relative;
    isolation: isolate;
}
.product-slider-box.active::before,
.product-slider .slideItem .product-slider-box::before {
    content: ""; position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(212, 166, 75, 0.16) 50%,
        transparent 70%);
    transform: skewX(-18deg);
    pointer-events: none; z-index: 1;
    transition: left 0.85s var(--rd-easing);
}
.product-slider-box.active:hover::before,
.product-slider .slideItem:hover .product-slider-box::before {
    left: 160%;
}
/* No decorative sweep on the flash-sale / .active card */
.product-slider-box.active::before,
.product-slider .slideItem .product-slider-box.active::before,
.product-slider-box.active:hover::before,
.product-slider .slideItem:hover .product-slider-box.active::before {
    content: none !important;
    display: none !important;
}

/* =============================================================
 * D. Buttons — micro-motion + active state
 * ============================================================= */
.btn, .btn-pink, .btn-primary, .btn-dark-green, .btn-grey, .btn-blue {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn::after,
.btn-pink::after,
.btn-primary::after,
.btn-dark-green::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.16), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s var(--rd-easing);
    pointer-events: none;
    z-index: -1;
}
.btn:hover::after,
.btn-pink:hover::after,
.btn-primary:hover::after,
.btn-dark-green:hover::after {
    transform: translateX(100%);
}
.btn:active, .btn-pink:active, .btn-primary:active, .btn-dark-green:active {
    transform: translateY(0) scale(0.98);
}

/* =============================================================
 * E. Forms — focus glow + hover lift
 * ============================================================= */
.form-control,
input[type="text"]:not(.rd-search-input):not(.qty):not([class*="search-qty"]),
input[type="email"], input[type="password"], input[type="tel"],
input[type="number"]:not(.qty):not([class*="search-qty"]),
input[type="search"]:not(.rd-search-input), input[type="url"],
textarea, select {
    transition: border-color 0.2s var(--rd-easing),
                box-shadow 0.2s var(--rd-easing),
                background 0.2s var(--rd-easing);
}
.form-control:hover, textarea:hover, select:hover,
input[type="text"]:not(.rd-search-input):hover,
input[type="email"]:hover, input[type="password"]:hover, input[type="tel"]:hover {
    border-color: rgba(31, 61, 46, 0.35);
    background: #fff;
}
.form-group { position: relative; }
.form-group label {
    transition: color 0.2s var(--rd-easing);
}
.form-group:focus-within label { color: var(--rd-green); }

/* =============================================================
 * F. Section headers — accent + better rhythm
 * ============================================================= */
.rd-section-head { padding-top: 12px; }
.commonGridSection h1, .commonGridSection h2, .commonGridSection h3 {
    position: relative;
    padding-bottom: 8px;
}

/* Common section header partial (legacy) — restyle */
.commonGridSection > .container1440 > div[style*="font-size: 32px"] {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--rd-ink) !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.01em !important;
    font-family: var(--rd-sans) !important;
    text-align: left !important;
}
.commonGridSection > .container1440 > div[style*="font-size: 18px"] {
    font-size: 13px !important;
    color: var(--rd-orange-2) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    text-align: left !important;
    margin-bottom: 20px !important;
}

/* =============================================================
 * G. Entrance reveals — paired with redesign-modern.js which
 *    adds the .rd-in-view class when an element scrolls into view.
 * ============================================================= */
.rd-reveal,
.commonGridSection > .container1440,
.globalBox, .commonBox, .faqMain,
.rd-section-head, .rd-hero, .rd-deals, .rd-originals,
.rd-blog-card, .rd-trust-card, .rd-cat-card, .rd-subcat-card {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--rd-easing),
                transform 0.7s var(--rd-easing);
}
.rd-reveal--init,
.rd-modern-js .commonGridSection > .container1440:not(.rd-in-view),
.rd-modern-js .globalBox:not(.rd-in-view),
.rd-modern-js .commonBox:not(.rd-in-view),
.rd-modern-js .faqMain:not(.rd-in-view) {
    opacity: 0;
    transform: translateY(16px);
}
.rd-modern-js .rd-in-view {
    opacity: 1;
    transform: none;
}

/* =============================================================
 * H. Empty states & loading skeletons
 * ============================================================= */
.empty-state, .no-data {
    background: #fff;
    border: 1px dashed var(--rd-border);
    border-radius: var(--rd-radius-lg);
    padding: 56px 24px;
    margin: 16px auto;
    max-width: 600px;
}
.empty-state h3, .no-data h3 {
    color: var(--rd-ink);
    font-size: 22px;
    margin-bottom: 6px;
    font-weight: 600;
}
.empty-state p, .no-data p {
    color: var(--rd-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 380px;
}

/* Skeleton placeholder utility (apply .rd-skeleton to a div) */
@keyframes rd-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================================
 * I. Modal entrance polish
 * ============================================================= */
.modal.show .modal-dialog,
.modal.fade.show .modal-dialog {
    animation: rd-modal-pop 0.32s var(--rd-easing) both;
}
@keyframes rd-modal-pop {
    0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-backdrop.show {
    background: rgba(20, 40, 30, 0.55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* =============================================================
 * J. Floating "Back to top" button + sticky CTA helpers
 * ============================================================= */
.rd-back-to-top {
    position: fixed;
    right: 24px; bottom: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--rd-green);
    color: var(--rd-text-inv);
    border: none;
    box-shadow: 0 10px 24px rgba(31, 61, 46, 0.32);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s var(--rd-easing),
                transform 0.3s var(--rd-easing),
                background 0.2s var(--rd-easing);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.rd-back-to-top--show {
    opacity: 1;
    transform: translateY(0);
}
.rd-back-to-top:hover {
    background: var(--rd-green-2);
    transform: translateY(-2px);
}

/* =============================================================
 * K. Page-level micro-polish
 * ============================================================= */
/* Add gentle dividers between consecutive .borderFlex rows in profile/cart */
.userdetail-cover .borderFlex { padding: 18px 0; }

/* Hover lift on table rows site-wide */
.table tbody tr {
    transition: background 0.18s var(--rd-easing);
    cursor: pointer;
}

/* Tighter line-height for buttons site-wide */
.btn, button { line-height: 1.2; }

/* Soft hover lift on .commonBox, .globalBox */
.globalBox, .commonBox, .userdetail-cover { will-change: transform; }

/* Hero-style "splash" sections — applied via .rd-splash class on any section */

/* =============================================================
 * L. Misc trendy bits
 * ============================================================= */
/* Pill tag — for chips, filters */

/* Section dividers with decorative accent */

/* Highlight phrase used in headlines */

/* =============================================================
 * M. Accessibility — focus rings + reduced motion
 * ============================================================= */
*:focus-visible {
    outline: 2px solid var(--rd-green);
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible,
button:focus-visible {
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .rd-modern-js .rd-in-view,
    .rd-modern-js .commonGridSection > .container1440:not(.rd-in-view) {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =============================================================
 * N. Footer polish — already styled in redesign-header.css; just
 *    add a subtle gradient sheen at top and rounded corners up
 * ============================================================= */
.rd-footer {
    position: relative;
    border-top-left-radius: var(--rd-radius-lg);
    border-top-right-radius: var(--rd-radius-lg);
    overflow: hidden;
}
.rd-footer::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--rd-orange), var(--rd-gold), var(--rd-green));
}

/* =============================================================
 * O. Cart preview / dropdown polish
 * ============================================================= */
.dropdown-menu {
    animation: rd-dropdown-in 0.22s var(--rd-easing) both;
}
@keyframes rd-dropdown-in {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}