@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: #032C59;
        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;
}

@media screen and (max-width: 767px) {
    .user-dropdown-container {
        display: none;
    }
}

.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-name {
    margin-bottom: 8px;
    padding-inline: 4px;
    font-family: Sora, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #101A14;
}

.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: #F5F6F8;
            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. */
#loader-wrapper.slimout-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FBFBF7;
}

.slimout-loader__animation {
    position: relative;
    width: 72px;
    height: 72px;
}

.slimout-loader__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background-color: #032C59;
    opacity: 0.25;
    animation: slimout-loader-pulse 1.2s linear infinite;
}

.slimout-loader__dot--1 { transform: rotate(0deg) translate(30px) rotate(0deg); animation-delay: 0s; }
.slimout-loader__dot--2 { transform: rotate(45deg) translate(30px) rotate(-45deg); animation-delay: 0.15s; }
.slimout-loader__dot--3 { transform: rotate(90deg) translate(30px) rotate(-90deg); animation-delay: 0.3s; }
.slimout-loader__dot--4 { transform: rotate(135deg) translate(30px) rotate(-135deg); animation-delay: 0.45s; }
.slimout-loader__dot--5 { transform: rotate(180deg) translate(30px) rotate(-180deg); animation-delay: 0.6s; }
.slimout-loader__dot--6 { transform: rotate(225deg) translate(30px) rotate(-225deg); animation-delay: 0.75s; }
.slimout-loader__dot--7 { transform: rotate(270deg) translate(30px) rotate(-270deg); animation-delay: 0.9s; }
.slimout-loader__dot--8 { transform: rotate(315deg) translate(30px) rotate(-315deg); animation-delay: 1.05s; }

@keyframes slimout-loader-pulse {
    0%, 100% { opacity: 0.25; transform-origin: center; }
    50% { opacity: 1; }
}

.slimout-loader__mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
}

.slimout-loader .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .slimout-loader__dot {
        animation: none;
        opacity: 0.7;
    }
}
/* 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;
}