/* ======================================================================
   HAZLNUT MODAL THEME SYSTEM
   Rule: modal background X -> border + hard-offset shadow = accent Y
   -----------------------------------------------------------------------
   Palette pairs (cream-background modals -> forest green accent):
   Cream    (#ede6dc)  -> Forest  (#0f3a2e)  [default - all app modals]
   Maroon   (#561023)  -> Cream   (#ede6dc)
   Forest   (#0f3a2e)  -> Coral   (#e45558)
   Blue     (#bed9ed)  -> Forest  (#0f3a2e)
   Coral    (#e45558)  -> Cream   (#ede6dc)
   Magenta  (#e163c3)  -> Forest  (#0f3a2e)
   ====================================================================== */

/* ======================================================================
   SECTION 0 - ZERO BORDER-RADIUS EVERYWHERE
   No rounded corners anywhere on the site
   ====================================================================== */

*,
*::before,
*::after {
    border-radius: 0px !important;
}

/* Inputs, selects, textareas - sharp 0px edges
   NOTE: checkbox/radio are excluded - appearance:none erases their entire
   native rendering (no box, no tick), making them invisible everywhere.
   They get an explicit square brand box below instead. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button {
    border-radius: 0px !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Square brand checkbox / radio - white fill, maroon hairline, coral when on */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0 2px 0 0;
    display: inline-block;
    vertical-align: middle;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    border: 1.5px solid rgba(86, 16, 35, 0.45);
    cursor: pointer;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
input[type="checkbox"]:indeterminate {
    background-color: #e45558;
    border-color: #e45558;
}

input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' stroke='%23ede6dc' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}

input[type="checkbox"]:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' stroke='%23ede6dc' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}

input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='3.5' y='3.5' width='5' height='5' fill='%23ede6dc'/%3E%3C/svg%3E");
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid #e45558;
    outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Restore select chevron via background image */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f3a2e' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ======================================================================
   SECTION 1 - GLOBAL MODAL OVERLAY & RESPONSIVE SYSTEM
   ====================================================================== */

/* Prevent background scrolling when any modal is open */
body.hzl-modal-open,
html.hzl-modal-open {
    overflow: hidden !important;
    touch-action: none;
    overscroll-behavior: contain;
}

/* Shared Top Multicolor Horizontal Strip - Disabled globally */
.hzl-modal-top-strip,
.create-wishlist-color-bar,
.modal-top-bar,
.modal-header-strip {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
}

/* Shared Drag Handle Bar for Mobile Bottom Sheets */
.hzl-sheet-handle {
    display: none;
}

@media (max-width: 768px) {
    .hzl-sheet-handle {
        display: none;
        width: 38px;
        height: 4px;
        background: color-mix(in srgb, var(--maroon, #561023) 30%, transparent);
        border-radius: 2px;
        margin: 10px auto 6px auto;
        flex-shrink: 0;
    }
}

.figma-modal-overlay:not(#contributionModal):not(#demoContributionModal),
.login-modal-overlay,
.gateway-overlay,
.login-prompt-popup,
.product-detail-modal-overlay,
.delete-wishlist-confirmation-modal,
.welcome-popup-modal,
#supportModal,
#feedbackModal,
#confirmationModal,
.modal-overlay {
    background: transparent !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.modal:not(#contributionModal):not(#demoContributionModal) {
    background: transparent !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ======================================================================
   SECTION 2 - DESKTOP MODALS (min-width: 769px)
   Cream background -> Coral Hard Offset Shadow (6px 6px 0px #e45558) + Maroon Border
   ====================================================================== */

@media (min-width: 769px) {

    .figma-modal-container:not(.contribution-modal-two-column),
    .login-modal,
    .cash-fund-sheet,
    .gateway-sheet,
    .login-prompt-content,
    .create-wishlist-modal-popup,
    .delete-wishlist-confirmation-popup,
    .support-modal__panel,
    .welcome-popup-content,
    #confirmationModal .confirmation-modal-content {
        position: relative !important;
        overflow: hidden !important;
        background: var(--cream, #ede6dc) !important;
        border: 0px !important;
        border-radius: 0px !important;
        box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
        transform: translate3d(0, 14px, 0) scale(0.96);
        opacity: 0;
        will-change: transform, opacity;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .login-modal-overlay.active .login-modal,
    .figma-modal-overlay.active .figma-modal-container,
    .figma-modal-overlay.active .cash-fund-sheet,
    .gateway-overlay.active .gateway-sheet,
    .login-prompt-popup.active .login-prompt-content,
    .login-prompt-popup[style*="display: flex"] .login-prompt-content,
    .login-prompt-popup[style*="display: block"] .login-prompt-content,
    .create-wishlist-modal.show .create-wishlist-modal-popup,
    .create-wishlist-modal[style*="display: flex"] .create-wishlist-modal-popup,
    .create-wishlist-modal[style*="display: block"] .create-wishlist-modal-popup,
    .delete-wishlist-confirmation-modal.show .delete-wishlist-confirmation-popup,
    #supportModal.show .support-modal__panel,
    .welcome-popup-modal.show .welcome-popup-content,
    #confirmationModal.show .confirmation-modal-content {
        transform: translate3d(0, 0, 0) scale(1) !important;
        opacity: 1 !important;
    }
}

/* Close button - sharp, maroon-bordered — applies to all brand modals */
.figma-modal-container:not(.contribution-modal-two-column) .figma-modal-close,
.delete-wishlist-confirmation-popup .figma-modal-close,
#confirmationModal .figma-modal-close {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0px !important;
    border-radius: 0px !important;
    /* box-shadow: 2px 2px 0 0 #3f0c1a; */
    color: #3f0c1a;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 30;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.figma-modal-container:not(.contribution-modal-two-column) .figma-modal-close:hover,
.delete-wishlist-confirmation-popup .figma-modal-close:hover,
#confirmationModal .figma-modal-close:hover {
    border: 0px !important;
    background: transparent !important;
    color: var(--coral, #e45558) !important;
    transform: scale(1.15) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Title */
.figma-modal-container:not(.contribution-modal-two-column) .figma-modal-title {
    font-family: 'Nanum Myeongjo', Georgia, serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--maroon, #561023);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

/* ======================================================================
   SECTION 3 - PRODUCT DETAIL MODAL
   Cream background -> Deep Maroon accent (#3f0c1a)
   ====================================================================== */

.product-detail-modal-container {
    background: var(--cream, #ede6dc) !important;
    border: none !important;
    border-radius: 0px !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
}

.product-detail-modal-container .hzl-modal-top-strip {
    display: none !important;
}

.product-detail-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0px !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    color: var(--cream, #ede6dc) !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, color 0.15s ease !important;
    z-index: 50;
}

.product-detail-modal-container.is-page-wishlist .product-detail-modal-close,
.product-detail-modal-container.is-page-success .product-detail-modal-close {
    color: var(--maroon, #561023) !important;
}

.product-detail-modal-close:hover {
    border: 0px !important;
    background: transparent !important;
    color: var(--coral, #e45558) !important;
    transform: scale(1.15) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ======================================================================
   SECTION 5 - MOBILE BOTTOM SHEETS (max-width: 768px)
   Add Gift, Edit Gift, Add Cash Fund, Login
   ====================================================================== */

@media (max-width: 768px) {

    .login-modal-overlay {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 500000 !important;
        background: transparent !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .product-detail-modal-overlay,
    .figma-modal-overlay:not(#contributionModal):not(#demoContributionModal),
    .gateway-overlay,
    .login-prompt-popup,
    .create-wishlist-modal,
    .delete-wishlist-confirmation-modal,
    #confirmationModal {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 100000 !important;
        background: transparent !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .login-modal-overlay.active,
    .product-detail-modal-overlay.active,
    .figma-modal-overlay.active:not(#contributionModal):not(#demoContributionModal),
    .gateway-overlay.active,
    .login-prompt-popup.active,
    .login-prompt-popup[style*="display: flex"],
    .login-prompt-popup[style*="display: block"],
    .create-wishlist-modal.show,
    .create-wishlist-modal[style*="display: flex"],
    .create-wishlist-modal[style*="display: block"],
    .delete-wishlist-confirmation-modal.show,
    #confirmationModal.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .login-modal,
    .figma-modal-container:not(.contribution-modal-two-column):not(#figmaModal .product-sheet),
    .gateway-sheet,
    .login-prompt-content,
    .create-wishlist-modal-popup,
    .delete-wishlist-confirmation-popup,
    #confirmationModal .confirmation-modal-content,
    .support-modal__panel,
    .welcome-popup-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        height: fit-content !important;
        /* max-height: min(88vh, 88dvh) !important; */
        border-radius: 0px !important;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border: 0px !important;
        border-bottom: 0px !important;
        background: var(--cream, #ede6dc) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3) !important;
        margin: 0 !important;
        /* padding-bottom: max(38px, calc(env(safe-area-inset-bottom) + 24px)) !important; */
        overflow-y: auto !important;
        transform: translate3d(0, 100%, 0);
        will-change: transform, opacity;
        transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }

    .product-detail-modal-container {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .product-detail-modal-close {
        display: none !important;
    }

    .product-detail-modal-container .hzl-sheet-handle {
        display: block !important;
        width: 38px;
        height: 4px;
        background: color-mix(in srgb, var(--maroon, #561023) 35%, transparent);
        border-radius: 2px !important;
        margin: 0 auto 16px auto;
        flex-shrink: 0;
    }

    .login-modal-overlay.active .login-modal,
    .product-detail-modal-overlay.active .product-detail-modal-container,
    .figma-modal-overlay.active .figma-modal-container,
    .figma-modal-overlay.active .cash-fund-sheet,
    .gateway-overlay.active .gateway-sheet,
    .login-prompt-popup.active .login-prompt-content,
    .login-prompt-popup[style*="display: flex"] .login-prompt-content,
    .login-prompt-popup[style*="display: block"] .login-prompt-content,
    .create-wishlist-modal.show .create-wishlist-modal-popup,
    .create-wishlist-modal[style*="display: flex"] .create-wishlist-modal-popup,
    .create-wishlist-modal[style*="display: block"] .create-wishlist-modal-popup,
    .delete-wishlist-confirmation-modal.show .delete-wishlist-confirmation-popup,
    #confirmationModal.show .confirmation-modal-content,
    #supportModal.show .support-modal__panel {
        transform: translate3d(0, 0, 0);
    }
}

/* ======================================================================
   SECTION 6 - TUTORIAL / HOW-IT-WORKS MODAL
   Always on maroon host-home bg -> deep maroon shadow
   ====================================================================== */

.tutorial-modal .modal-content {
    background: var(--cream, #ede6dc);
    border: 0px !important;
    border-radius: 0px !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
}

/* ======================================================================
   SECTION 7 - HOST HOW-IT-WORKS ONBOARDING CARD
   ====================================================================== */

.hiw-host-card {
    background: var(--cream, #ede6dc);
    border: 0px !important;
    border-radius: 0px !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
}

/* ======================================================================
   SECTION 8 - GENERIC .modal-content (style.css legacy)
   Cream background -> Deep Maroon accent (#3f0c1a)
   ====================================================================== */

.modal-content {
    background: var(--cream, #ede6dc);
    border: 0px !important;
    border-radius: 0px !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
}

/* Modal close button - universal */
.modal-close {
    background: #ffffff;
    border: 1.5px solid #3f0c1a !important;
    border-radius: 0px !important;
    box-shadow: 2px 2px 0 0 #3f0c1a;
    color: #3f0c1a;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
    border: 0px !important;
    background: transparent !important;
    color: var(--coral, #e45558) !important;
    transform: scale(1.15) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ======================================================================
   SECTION 9 - DELETE / CONFIRM DIALOG MODALS (wishlist)
   ====================================================================== */

.delete-wishlist-confirmation-popup,
.create-wishlist-modal-popup,
.welcome-popup-content {
    background-color: var(--cream, #ede6dc);
    border: 0px !important;
    border-radius: 0px !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
    font-family: 'Nanum Myeongjo', Georgia, serif;
}

.delete-wishlist-confirmation-popup h3,
.create-wishlist-modal-popup h3,
.welcome-popup-content h2 {
    color: var(--maroon, #561023);
    font-family: 'Nanum Myeongjo', Georgia, serif;
}

/* ======================================================================
   SECTION 10 - INPUTS & SELECTS inside modals - forest theme
   ====================================================================== */

.figma-modal-container:not(.contribution-modal-two-column) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.figma-modal-container:not(.contribution-modal-two-column) select,
.figma-modal-container:not(.contribution-modal-two-column) textarea,
.delete-wishlist-confirmation-popup input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.delete-wishlist-confirmation-popup select,
.create-wishlist-modal-popup input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.create-wishlist-modal-popup select,
.create-wishlist-modal-popup textarea,
.login-modal input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.login-modal select,
.login-prompt-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.login-prompt-content select,
.gateway-sheet input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.gateway-sheet select,
.gateway-sheet textarea,
.support-modal__panel input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.support-modal__panel select,
.support-modal__panel textarea,
.modal-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.modal-content select,
.modal-content textarea,
.modal input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
    border: 1.5px solid rgba(15, 58, 46, 0.25) !important;
    border-radius: 0px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    font-family: 'Nanum Myeongjo', Georgia, serif;
    color: var(--forest, #0f3a2e);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.figma-modal-container:not(.contribution-modal-two-column) input:focus,
.figma-modal-container:not(.contribution-modal-two-column) select:focus,
.figma-modal-container:not(.contribution-modal-two-column) textarea:focus,
.delete-wishlist-confirmation-popup input:focus,
.delete-wishlist-confirmation-popup select:focus,
.create-wishlist-modal-popup input:focus,
.create-wishlist-modal-popup select:focus,
.login-modal input:focus,
.login-modal select:focus,
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    border-color: var(--forest, #0f3a2e) !important;
    box-shadow: 0 0 0 2px rgba(15, 58, 46, 0.12) !important;
    outline: none;
}

/* ======================================================================
   SECTION 11 - DROPDOWN / SELECT - global sharp styling
   ====================================================================== */

select {
    border: 1.5px solid rgba(15, 58, 46, 0.25);
    border-radius: 0px !important;
    background-color: var(--cream, #ede6dc);
    font-family: 'Nanum Myeongjo', Georgia, serif;
    color: var(--forest, #0f3a2e);
    padding: 8px 32px 8px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

select:hover {
    border-color: var(--forest, #0f3a2e);
}

select:focus {
    outline: none;
    border-color: var(--forest, #0f3a2e);
    box-shadow: 0 0 0 2px rgba(15, 58, 46, 0.12);
}

/* ======================================================================
   SECTION 13 - UNIVERSAL RED/CORAL EYEBROWS (NO LINES)
   ====================================================================== */

/* Red/Coral Tiny Capital Eyebrow - matches 2nd image design */
.gateway-eyebrow,
.create-wishlist-eyebrow,
.figma-modal-eyebrow,
.product-sheet__eyebrow,
.cash-fund-eyebrow,
.login-prompt-eyebrow,
.support-modal__eyebrow {
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--coral, #e45558) !important;
    margin: 0 0 6px 0 !important;
    padding-top: 8px !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    display: block !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

/* Ensure NO horizontal line under or after eyebrow text */
.create-wishlist-header,
.product-sheet__intro,
.figma-modal-intro,
.product-sheet__header {
    border-bottom: none !important;
}

.gateway-eyebrow::after,
.create-wishlist-eyebrow::after,
.figma-modal-eyebrow::after,
.product-sheet__eyebrow::after,
.cash-fund-eyebrow::after,
.login-prompt-eyebrow::after,
.support-modal__eyebrow::after,
.create-wishlist-header hr,
.create-wishlist-header::after,
.product-sheet__intro::after,
.figma-modal-intro::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* ======================================================================
   SECTION 14 - HAZLNUT BRAND THEMED CALENDAR PICKER
   Theme: Warm Cream Background, Maroon Headers/Text, Coral Hover & Selected Date
   Compact style, positioned above input, zero shadows
   ====================================================================== */
.create-wishlist-date-placeholder {
    position: relative;
    width: 100%;
}

.create-wishlist-date-placeholder input[type="text"],
.create-wishlist-date-placeholder input[type="date"] {
    width: 100%;
    cursor: pointer;
    background: #ffffff !important;
    color: var(--hzl-maroon, #561023) !important;
    font-family: 'DM Sans', sans-serif !important;
    border: 2px solid rgba(86, 16, 35, 0.26) !important;
    border-radius: 0px !important;
    padding-right: 48px !important;
    accent-color: var(--coral, #e45558);
    color-scheme: light;
}

.create-wishlist-date-placeholder input::placeholder {
    color: #74716e !important;
    opacity: 1;
}

.create-wishlist-date-placeholder i.fa-calendar {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--hzl-maroon, #561023);
    font-size: 1.05rem;
    pointer-events: none;
    transition: color 150ms ease;
}

.create-wishlist-date-placeholder:hover i.fa-calendar {
    color: var(--coral, #e45558);
}

/* Compact Calendar Popover Container - Positioned UPWARDS above input with NO SHADOW */
.hzl-calendar-popover {
    display: none;
    position: absolute;
    top: auto !important;
    bottom: calc(100% + 4px) !important;
    left: 0;
    z-index: 1200;
    width: 250px;
    max-width: 100%;
    background-color: #FAF7F2;
    border: 2px solid var(--hzl-maroon, #561023);
    border-radius: 0px !important;
    box-shadow: none !important;
    padding: 10px;
    box-sizing: border-box;
    font-family: var(--font-mono, 'DM Mono', monospace);
    user-select: none;
    animation: hzlCalFadeIn 120ms ease-out forwards;
}

@keyframes hzlCalFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hzl-calendar-popover.show {
    display: block !important;
}

/* Compact Calendar Header */
.hzl-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1.5px solid rgba(86, 16, 35, 0.16);
}

.hzl-calendar-month-year {
    font-family: 'DM Serif Display', 'DM Sans', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hzl-maroon, #561023);
    letter-spacing: 0.02em;
}

.hzl-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 1.5px solid var(--hzl-maroon, #561023);
    border-radius: 0px !important;
    color: var(--hzl-maroon, #561023);
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 120ms ease;
}

.hzl-calendar-nav:hover {
    background-color: var(--coral, #e45558) !important;
    border-color: var(--hzl-maroon, #561023) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

.hzl-calendar-nav:active {
    transform: none !important;
    box-shadow: none !important;
}

/* Compact Weekday Labels */
.hzl-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    text-align: center;
}

.hzl-calendar-weekdays span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--hzl-maroon, #561023);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 0;
}

/* Compact Days Grid */
.hzl-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}

.hzl-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    background: #ffffff;
    border: 1px solid rgba(86, 16, 35, 0.18);
    border-radius: 0px !important;
    color: var(--hzl-maroon, #561023);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: var(--font-mono, monospace);
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
}

/* Day Out-of-Month or Past (Disabled) */
.hzl-calendar-day.disabled {
    background: transparent;
    border-color: transparent;
    color: #c4b8b2;
    cursor: default;
    pointer-events: none;
}

.hzl-calendar-day.disabled.past-disabled {
    text-decoration: line-through;
    opacity: 0.75;
    cursor: not-allowed;
}

/* Day Hover State - CORAL HOVER COLOR (NO SHADOW) */
.hzl-calendar-day:not(.disabled):hover {
    background-color: var(--coral, #e45558) !important;
    border-color: var(--hzl-maroon, #561023) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    transform: none !important;
    box-shadow: none !important;
    z-index: 2;
}

/* Today's Date Indicator */
.hzl-calendar-day.today:not(.selected) {
    border: 1.5px solid var(--coral, #e45558) !important;
    font-weight: 700;
}

/* Selected Date Box State - CORAL SELECT DATE BOX COLOR (NO SHADOW) */
.hzl-calendar-day.selected {
    background-color: var(--coral, #e45558) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1.5px solid var(--hzl-maroon, #561023) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 3;
}

/* Compact Footer Actions */
.hzl-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1.5px solid rgba(86, 16, 35, 0.16);
}

.hzl-calendar-footer-btn {
    background: transparent;
    border: none;
    color: var(--coral, #e45558);
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 2px 6px;
    box-shadow: none !important;
    transition: background-color 120ms ease, color 120ms ease;
    border-radius: 0px !important;
}

.hzl-calendar-footer-btn:hover {
    background-color: rgba(228, 85, 88, 0.12);
    color: var(--hzl-maroon, #561023);
    text-decoration: underline;
}

/* ======================================================================
   UNIVERSAL MODAL PLATFORM-WIDE SYSTEM
   1. NO top multicolor bars or color strips anywhere
   2. NO borders on any modal anywhere (border: 0px !important)
   3. CONSISTENT X buttons matching login modal (transparent, 0px border, scale 1.15 on hover)
   ====================================================================== */

/* 1. Remove Topbars & Multicolor Strips Everywhere */
.hzl-modal-top-strip,
.create-wishlist-color-bar,
.modal-top-bar,
.modal-header-strip,
.top-strip,
.color-bar,
.modal-topbar,
.modal-color-bar,
.modal-strip {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. Remove Borders and Apply Consistent Box Shadow ONLY to Outer Modal Containers Platform-Wide */
.modal,
.modal-content,
.modal-dialog,
.modal-container,
.figma-modal-container:not(.contribution-modal-two-column),
.product-detail-modal-container,
.login-modal,
.cash-fund-sheet,
.gateway-sheet,
.login-prompt-content,
.create-wishlist-modal-popup,
.delete-wishlist-confirmation-popup,
.support-modal__panel,
.welcome-popup-content,
.confirmation-modal-content,
.tutorial-modal .modal-content,
.view-contribution-modal .modal-content,
.hiw-host-card,
.curator-modal-box,
.pemod-content,
.pemod-box,
.notes-modal-content,
.wishlist-modal-content,
.feedback-modal-content,
.raw-modal {
    border: 0px !important;
    border-top: 0px !important;
    border-bottom: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    outline: none !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
}

/* 3. Consistent Close (X) Buttons Platform-Wide */
.figma-modal-close,
.create-wishlist-close,
.hiw-host-close,
.hiw-guest-close,
.product-detail-modal-close,
.support-modal__close,
.modal-close,
.login-prompt-close,
.tutorial-close,
.pemod-close,
.notes-modal-close,
.login-modal-close,
.welcome-popup-close,
div[role="dialog"]:not(.bottom-menu-options-panel) button[aria-label*="Close"]:not(.manage-circle-button):not(.manage-hero__close),
div[role="dialog"]:not(.bottom-menu-options-panel) button[aria-label*="close"]:not(.manage-circle-button):not(.manage-hero__close),
div[role="dialog"]:not(.bottom-menu-options-panel) button.close,
.modal button.close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0px !important;
    border-radius: 0px !important;
    color: var(--cream)) !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: transform 0.15s ease, color 0.15s ease, opacity 0.15s ease !important;
    z-index: 50 !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.product-detail-modal-container.is-page-details .product-detail-modal-close,
.product-detail-modal-container:not(.is-page-wishlist):not(.is-page-success) .product-detail-modal-close {
    color: #ede6dc !important;
}

.figma-modal-close:hover,
.create-wishlist-close:hover,
.hiw-host-close:hover,
.hiw-guest-close:hover,
.product-detail-modal-close:hover,
.support-modal__close:hover,
.modal-close:hover,
.login-prompt-close:hover,
.tutorial-close:hover,
.pemod-close:hover,
.notes-modal-close:hover,
.login-modal-close:hover,
.welcome-popup-close:hover,
div[role="dialog"] button[aria-label*="Close"]:hover,
div[role="dialog"] button[aria-label*="close"]:hover,
div[role="dialog"] button.close:hover,
.modal button.close:hover,
.figma-modal-close:focus-visible,
.create-wishlist-close:focus-visible,
.hiw-host-close:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--coral, #e45558) !important;
    border: 0px !important;
    transform: scale(1.15) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 4. Hide Scrollbars Platform-Wide Across All Modals & Sheets */
.modal,
.modal-content,
.modal-body,
.modal-dialog,
.figma-modal-container,
.product-detail-modal-container,
.product-sheet__body,
.product-sheet,
.login-modal,
.cash-fund-sheet,
.gateway-sheet,
.login-prompt-content,
.create-wishlist-modal-popup,
.delete-wishlist-confirmation-popup,
.support-modal__panel,
.welcome-popup-content,
.confirmation-modal-content,
.tutorial-modal .modal-content,
.view-contribution-modal .modal-content,
.hiw-host-card,
.curator-modal-box {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.figma-modal-container::-webkit-scrollbar,
.product-detail-modal-container::-webkit-scrollbar,
.product-sheet__body::-webkit-scrollbar,
.product-sheet::-webkit-scrollbar,
.login-modal::-webkit-scrollbar,
.cash-fund-sheet::-webkit-scrollbar,
.gateway-sheet::-webkit-scrollbar,
.login-prompt-content::-webkit-scrollbar,
.create-wishlist-modal-popup::-webkit-scrollbar,
.delete-wishlist-confirmation-popup::-webkit-scrollbar,
.support-modal__panel::-webkit-scrollbar,
.welcome-popup-content::-webkit-scrollbar,
.confirmation-modal-content::-webkit-scrollbar,
.tutorial-modal .modal-content::-webkit-scrollbar,
.view-contribution-modal .modal-content::-webkit-scrollbar,
.hiw-host-card::-webkit-scrollbar,
.curator-modal-box::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}