@import url('./assets/vendors/swiper/package/swiper-bundle.min.css');
@import url('./assets/vendors/aos/aos.css');
@import url('./assets/vendors/bootstrap-datetimepicker/bootstrap-datetimepicker.css');
/*@import url('./assets/icons/style.css');
@import url('./assets/css/style.css');*/

/* ── Dropzone drag-active state ──────────────────────────────────────────────
   Applied by initDropzone() JS when a file is dragged over the upload zone.
   Mirrors the SCSS in _document-upload.scss; kept here so it works without
   an SCSS re-compile.
   ──────────────────────────────────────────────────────────────────────── */
.dropzone--drag-active .dropzone__area {
    border-color: #5607c5 !important;
    background-color: #e6d4ff !important;
    transform: scale(1.01);
    box-shadow: 0 0 0 4px rgba(86, 7, 197, 0.18);
    transition: all 0.2s ease;
}

/*body {
    padding-top: 7rem;
}*/

/* App Logo */
main.page .app-pane-admin-border:first-child {
    margin-top: 150px;
}

.app-logo .img-fluid {
    max-height: 90px;
    padding: 0 5px 0 5px;
}

.table > :not(caption) > * > * {
    box-shadow: none;
}

.table .form-control {
    background-color: #ffffff !important;
    border-width: 0.5px !important;
    border-bottom-color: #ccc !important;
}

.table .form-select {
    background-color: #ffffff !important;
    border-width: 0.5px !important;
    border-bottom-color: #ccc !important;
}

.table .btn-primary {
    background-color: var(--bs-primary);
}

.table .btn-secondary {
    background-color: var(--bs-secondary);
}

.alert-dismissible .btn-close {
    z-index: 1;
}

.controls {
    z-index: 2000;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 10px;
}

.app-menu .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    white-space: nowrap;
}

    .app-menu .nav-item a {
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        padding-left: 1rem;
    }

        .app-menu .nav-item a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .app-menu .nav-item a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

.app-menu .nav-link .oi {
    width: 1.5rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
    margin: .5rem;
}

div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu {
    color: #000000;
}

.dropdown-menu span {
    mix-blend-mode: difference;
}

@media (max-width: 767.98px) {

    .app-menu {
        width: 100%;
    }

    .navbar {
        position: fixed;
        top: 60px;
        width: 100%;
    }

    .controls {
        height: 60px;
        top: 15px;
        position: fixed;
        top: 0px;
        width: 100%;
        background-color: rgb(0, 0, 0);
    }

    .controls-group {
        float: right;
        margin-right: 25px;
    }

    .content {
        position: relative;
        top: 60px;
    }
}

.offcanvas {
    height: 100vh !important;
}


.assessment__question-viewport {
    min-height: clamp(340px, 56vh, 680px);
    scroll-margin-top: 96px; /* adjust for sticky header */
}

    .assessment__question-viewport textarea {
        max-height: 280px;
        overflow-y: auto;
        resize: vertical;
    }


/* ── Sticky page layout — footer always pinned below the content ───────────
   Modules render asynchronously after the Theme paints (header/footer come
   from the Theme; main.page's content comes from the Module's own DB/API
   call). While a slow Module is still loading, main.page can be empty or
   near-empty for a while. Without an explicit layout, header/main/footer
   just stack in normal flow: an empty main lets the footer ride up under
   the header, and a short document leaves a blank gap below the footer.
   The anti-FOUC overlay below is meant to mask that gap, but its "DOM has
   been quiet" heuristic can lift early on a Module that renders a static
   skeleton and then just waits on a slow request (e.g. Order Detail).
   Making the wrapper a min-height:100vh flex column with main.page as the
   flexible row keeps the footer anchored at the bottom of the viewport (or
   the bottom of the content once it's taller than the viewport) regardless
   of how long a Module takes to load — independent of any loader timing.
   ──────────────────────────────────────────────────────────────────────── */
#epiqScriptsContent {
    display: flex;
    min-height: 100vh; /* fallback for browsers without dvh support */
    flex-direction: column;
}

/* Mobile browsers (iOS/Android) size 100vh against the *largest possible*
   viewport (address bar hidden), not what's actually on screen when the
   page first loads. That leaves the wrapper shorter than the real visible
   screen on a phone, so the footer can still land right under the header
   there even with the min-height:100vh rule above. 100dvh tracks the
   viewport that's actually visible right now, on every device. */
@supports (min-height: 100dvh) {
    #epiqScriptsContent {
        min-height: 100dvh;
    }
}

main.page {
    flex: 1 0 auto;
}

.site-header,
.site-footer {
    flex-shrink: 0;
}
/* ── Header (new design) — extras not covered by the generated style.css ───
   Dynamic pieces (dynamic page menu dropdown, logged-in account menu, real
   cart module) still need a few hand-written rules to match the new header.
   ──────────────────────────────────────────────────────────────────────── */
main.page .app-pane-admin-border:first-child {
    margin-top: 0;
}


.header-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .header-nav-item .dropdown-menu.user-menu-list__alt {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        z-index: 10;
        display: none;
        min-width: 190px;
        margin: 0;
        list-style: none;
        border-radius: var(--radius-2xl, 1rem);
        background-color: #FBFBF7;
        box-shadow: 0 24px 48px -20px rgba(16, 26, 20, 0.35);
        padding: 8px;
    }

    .header-nav-item:hover .dropdown-menu.user-menu-list__alt {
        display: block;
    }

        .header-nav-item .dropdown-menu.user-menu-list__alt li a {
            display: block;
            border-radius: 11px;
            padding: 10px 13px;
            font-size: 0.875rem;
            color: #3A463C;
            white-space: nowrap;
        }

            .header-nav-item .dropdown-menu.user-menu-list__alt li a:hover,
            .header-nav-item .dropdown-menu.user-menu-list__alt li a.active {
                background-color: #EFF2DC;
                color: #101A14;
            }

/* Real cart module (Thrivewellrx.Module.CartBadge) restyled to match .header-cart */
.header-cart-pane {
    display: flex;
    align-items: center;
}

    .header-cart-pane .cart-icon,
    .header-cart-pane .header-icon.cart-icon {
        position: relative;
        display: flex;
        height: 38px;
        width: 38px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        color: #101A14;
        transition: color 0.15s ease;
    }

        .header-cart-pane .cart-icon:hover {
            color: #7E9021;
        }

    .header-cart-pane .cart__badge {
        position: absolute;
        top: 2px;
        right: 1px;
        display: flex;
        height: 16px;
        min-width: 16px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background-color: #A8C22F;
        padding-inline: 4px;
        font-family: Sora, sans-serif;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
    }

/* Logged-in account dropdown, styled to match .header-treatments-panel */
.user-dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
}

.header-account-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 20;
    display: none;
    min-width: 220px;
    border-radius: var(--radius-2xl, 1rem);
    background-color: #FBFBF7;
    box-shadow: 0 34px 70px -28px rgba(16, 26, 20, 0.4);
    padding: 16px;
}

    .header-account-menu.show {
        display: block;
    }

.header-account-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .header-account-list li a,
    .header-account-list li button.header-account-logout {
        display: block;
        width: 100%;
        text-align: left;
        border: 0;
        background: none;
        border-radius: 11px;
        padding: 10px 12px;
        font-size: 0.875rem;
        color: #3A463C;
        cursor: pointer;
    }

        .header-account-list li a:hover,
        .header-account-list li button.header-account-logout:hover {
            background-color: #EFF2DC;
            color: #101A14;
        }

/* Mobile drawer "Logout" row — real Login/Logout control (form + button)
   dressed up to look like the other icon rows in .mobile-drawer-menu. */
.mobile-drawer-menu-text form.app-form-inline {
    display: block;
    width: 100%;
}

.mobile-drawer-menu-logout-btn {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 15.5px;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.mobile-drawer-menu-link.text-\[\#8a4526\] .mobile-drawer-menu-icon {
    color: #8a4526;
}

/* Quiz step-loading flash (main.js): .quiz-viewport centers its flex children via
   justify-content: center, which only works correctly with one visible child. Blazor has
   already swapped in the next step's markup by the time the loader shows, so main.js hides
   that step for the flash's duration by adding this class — keeping the loader as the sole
   flex item, centered on its own instead of paired off to one side. */
.quiz-step-pending-reveal {
    display: none !important;
}

/* ── Anti-FOUC page loader (loader.js) ──────────────────────────────────────
   Full-viewport overlay that hides the gap between the Theme (header/footer)
   painting immediately and the page's Modules finishing their async render.
   loader.js toggles display/opacity/pointer-events inline; everything else
   (position, size, colors, dot animation) lives here. Kept out of style.css
   because that file is regenerated from the design source. */
/* ── HoneyMeds loader (#loader-wrapper, driven by loader.js) ─────────────────
   The design's page-loader spinner and label (style.css .page-loader-*) on an
   opaque version of the site's dark green, so the half-rendered page never
   shows through. loader.js fades it with inline opacity / display. */
#loader-wrapper.hm-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(216, 239, 121, 0.10) 0%, rgba(216, 239, 121, 0) 55%),
        linear-gradient(160deg, #1a4a2e 0%, #0d2b19 55%, #08190f 100%);
}

    /* .page-loader-group only drops into place under .page-loader.is-open; here it's always settled. */
    #loader-wrapper.hm-loader .page-loader-group {
        translate: none;
    }
/* -- Searchable state/country select box (Order checkout - Country, Shipping State,
   Billing State all share these rules). Kept here instead of style.css because that
   file is regenerated from the design source and would drop this block. */
/* Commented out: these light colors override the HoneyMeds design (style.css) dropdown colors.
    .state-select {
        position: relative;
        min-width: 0px;
    }

    .state-select-trigger {
        display: flex;
        width: 100%;
        cursor: text;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--spacing) * 2);
        border-radius: var(--radius-xl);
        border-style: var(--tw-border-style);
        border-width: 1.5px;
        border-color: #DDE1D2;
        background-color: #F8FAF4;
        padding-block: calc(var(--spacing) * 4);
        padding-right: calc(var(--spacing) * 4.25);
        padding-left: calc(var(--spacing) * 4.25);
        text-align: left;
        font-family: DM Sans, system-ui, sans-serif;
        font-size: 15.5px;
        color: #8B9483;
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 200ms;
        transition-duration: 200ms;
    }

        .state-select-trigger:hover {
            border-color: #CBD1C0;
        }

    .state-select.is-open .state-select-trigger {
        border-color: #BBCC46;
        background-color: var(--color-white);
    }

    .state-select-search-input {
        min-width: 0px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        --tw-border-style: none;
        border-style: none;
        background-color: transparent;
        padding: 0px;
        font-family: DM Sans, system-ui, sans-serif;
        font-size: 15.5px;
        color: #101A14;
        --tw-outline-style: none;
        outline-style: none;
    }

        .state-select-search-input::-moz-placeholder {
            color: #8B9483;
        }

        .state-select-search-input::placeholder {
            color: #8B9483;
        }

    .state-select-clear {
        display: flex;
        flex-shrink: 0;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        color: #8B9483;
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 150ms;
        transition-duration: 150ms;
    }

        .state-select-clear:hover {
            color: #101A14;
        }

    .state-select-chevron {
        display: flex;
        flex-shrink: 0;
        color: #8B9483;
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 200ms;
        transition-duration: 200ms;
    }

    .state-select.is-open .state-select-chevron {
        rotate: calc(180deg * -1);
        color: #101A14;
    }

    .state-select-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0px;
        left: 0px;
        z-index: 20;
        overflow: hidden;
        border-radius: var(--radius-xl);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: #E4E7DA;
        background-color: var(--color-white);
        --tw-shadow: 0 12px 28px var(--tw-shadow-color, rgba(16,26,20,0.12));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .state-select-options {
        margin: 0px;
        max-height: 240px;
        list-style-type: none;
        overflow-y: auto;
        padding-block: calc(var(--spacing) * 1.5);
        padding-left: 0px;
    }

    .state-select-option {
        cursor: pointer;
        padding-inline: calc(var(--spacing) * 4.25);
        padding-block: calc(var(--spacing) * 2.25);
        font-size: 14.5px;
        color: #3A463C;
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 150ms;
        transition-duration: 150ms;
    }

        .state-select-option:hover, .state-select-option.is-active {
            background-color: #EFF2DC;
            color: #101A14;
        }

        .state-select-option.is-selected {
            --tw-font-weight: var(--font-weight-medium);
            font-weight: var(--font-weight-medium);
            color: #7E9021;
        }

        .state-select-option[hidden] {
            display: none;
        }

    .state-select-empty {
        padding-inline: calc(var(--spacing) * 4.25);
        padding-block: calc(var(--spacing) * 3);
        font-size: 14px;
        color: #98A292;
    }
*/

/* Never show Blazor/Oqtane reconnect UI */
#components-reconnect-modal,
#blazor-error-ui,
blazor-reconnect-dialog,
.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected {
    display: none !important;
    visibility: hidden !important;
}

/* ── HoneyMeds header: Oqtane pieces inside the Astro header ────────────────
   Hand-written companions to style.css for markup Oqtane has to render
   differently from Header.astro. */

/* "..." pane holding the Cart Badge module. Oqtane puts an empty anchor before
   each module, so the pane gets its own flex box instead of adding an extra
   .header-actions gap. */
.header-cart-slot {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

/* Logout is Oqtane's POST form + <button> instead of the design's <a>, so the
   design's `.user-dropdown ul li:last-child a` look is repeated for the button. */
.user-dropdown ul li .user-dropdown-logout {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border: 0;
    border-radius: 11px;
    background: none;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font: inherit;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    text-align: start;
    color: #FF9B8A;
    cursor: pointer;
}

    .user-dropdown ul li .user-dropdown-logout svg {
        flex-shrink: 0;
    }

    .user-dropdown ul li .user-dropdown-logout:hover {
        background: rgba(255, 122, 107, 0.14);
    }

/* Same for the mobile drawer's Logout row: only the browser's button defaults are
   reset. Kept in the design's layer with zero specificity (:where) so the design's
   own .mobile-drawer-menu-row rules (padding, colours, row divider, hover tint)
   still apply exactly as they do to the <a> rows. */
@layer components {
    :where(button.mobile-drawer-menu-row) {
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font: inherit;
        text-align: start;
        cursor: pointer;
    }
}

/* The logout form sits between the rows, which hides the row divider from
   `.mobile-drawer-menu-row + .mobile-drawer-menu-row`. */
.mobile-drawer-menu-row + form > .mobile-drawer-menu-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Oqtane control panel (in .header-actions) ──────────────────────────────
   Its off-canvas panel is position:fixed inside the header. Two things in the
   header would break it while it's open, so both are lifted for that time:
   - the scrolled header pill's backdrop-filter makes the pill the panel's
     containing block (the panel would open inside the pill, not the viewport);
   - the fixed header (z-index 210) is a stacking context, so Bootstrap's
     backdrop (z-index 1040, appended to <body>) would cover the panel. */
.header:has(.offcanvas.show, .offcanvas.showing, .offcanvas.hiding, .app-admin-modal .modal.show) {
    z-index: 1050;
}

    .header:has(.offcanvas.show, .offcanvas.showing, .offcanvas.hiding, .app-admin-modal .modal.show) .header-pill {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

.header .offcanvas {
    color: #212529;
}

/* ── Home "For Him" carousel: keep whole cards inside the pinned 100vh frame ──
   The design's layout (heading + rail + dots) is a 100vh flex column, and the
   rail has overflow:hidden, so on viewports shorter than ~880px the rail is
   squeezed and cuts the cards off under the product name (the Astro build does
   the same). Capping the pill artwork's box to the room that's left keeps the
   name, formula and price visible; tall screens are unaffected. ~600px is the
   rest of the column: layout padding, heading, gaps, dots and the card's own
   padding and text. Up to 860px tall the design's own short-screen layout
   (16:9 pill crop, tighter heading) takes over, so this stops above it. */
@media (min-width: 1001px) and (min-height: 861px) and (max-height: 1100px) {
    .hm-products-rail {
        flex-shrink: 0;
    }

    .hm-product-card-media {
        max-height: max(120px, calc(100vh - 600px));
    }
}

/* ── "Real results" section background ─────────────────────────────────────
   Same S3 image as style.css (kept here so an older style.css still gets it).
   .hs-bg-mirror is the same gradient, flipped. */
.hs-bg-attached,
.hs-bg-mirror {
    background-image: url("https://wellnesplusrx-s3.s3.us-east-1.amazonaws.com/slimout/sugarsparksrx/Home_page/Real+Result+BG.webp");
}