/* Terms and Privacy Policy Modals Styling */

/* Terms and Privacy Content Styling */
.terms-content,
.privacy-content {
    line-height: 1.7;
    color: var(--text-primary);
}

.terms-content h2,
.privacy-content h2 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.terms-content h4,
.privacy-content h4 {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.terms-content h5,
.privacy-content h5 {
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.terms-content p,
.privacy-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

.terms-content ul,
.privacy-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.terms-content li,
.privacy-content li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.terms-content strong,
.privacy-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Modal Body Styling */
#termsModalBody,
#privacyModalBody {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Scrollbar Styling for Modal Body */
#termsModalBody::-webkit-scrollbar,
#privacyModalBody::-webkit-scrollbar {
    width: 8px;
}

#termsModalBody::-webkit-scrollbar-track,
#privacyModalBody::-webkit-scrollbar-track {
    background: var(--background-secondary);
    border-radius: 4px;
}

#termsModalBody::-webkit-scrollbar-thumb,
#privacyModalBody::-webkit-scrollbar-thumb {
    background: var(--border-color-strong);
    border-radius: 4px;
}

#termsModalBody::-webkit-scrollbar-thumb:hover,
#privacyModalBody::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Sticky Footer Styling */
#termsModal .modal-footer,
#privacyModal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1050;
    background: var(--surface-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* Smooth Transitions for Modal Stacking */
#cartModal,
#guestRegistrationModal,
#termsModal,
#privacyModal {
    transition: z-index 0.3s ease, opacity 0.3s ease, transform 0.3s ease !important;
    will-change: z-index, opacity, transform;
}

.modal-backdrop {
    transition: z-index 0.3s ease, opacity 0.3s ease !important;
    will-change: z-index, opacity;
}

/* Nested Modal Z-Index - Dynamic based on which modal is active */
/* 
 * Z-Index Hierarchy (REQUIREMENT 1-6):
 * - API Loading Modal: 1070 (highest - always on top during API calls) [REQUIREMENT 1]
 * - Payment Progress Modal: 1065 (payment status) [REQUIREMENT 7]
 * - Login/Forgot Password Modals: 1060 (authentication) [REQUIREMENT 5]
 * - Terms/Privacy Modals: 1055 (on top of guest form) [REQUIREMENT 6]
 * - Guest Registration Modal: 1050 (checkout form) [REQUIREMENT 4]
 * - Cart Modal: 1045 (shopping cart) [REQUIREMENT 3]
 */

/* Cart Modal - Default z-index (shown first in flow) */
/* CRITICAL: Modal must establish stacking context to be above backdrop */
#cartModal {
    z-index: 1045 !important; /* Lower than guest registration when guest is active */
    position: fixed !important; /* Bootstrap modals are fixed - ensure it's set */
}

#cartModal.show {
    z-index: 1045 !important; /* Modal must be above its backdrop (1035) */
    position: fixed !important; /* Ensure fixed positioning for stacking context */
    display: block !important; /* Ensure modal is visible */
}

/* CRITICAL: Cart modal backdrop must be BELOW the modal */
/* Backdrop is a sibling of modal, not a child, so z-index comparison is direct */
.modal-backdrop[data-modal-id="cartModal"] {
    z-index: 1035 !important; /* Below cart modal (1045) - CRITICAL: Must be lower */
    transition: opacity 0.3s ease, z-index 0.3s ease !important;
    position: fixed !important; /* Ensure fixed positioning */
}

/* CRITICAL: Ensure cart modal dialog and content are above backdrop */
#cartModal.show .modal-dialog {
    position: relative !important;
    z-index: 1 !important; /* Relative to modal container (1045) */
}

#cartModal.show .modal-content {
    position: relative !important;
    z-index: 2 !important; /* Above dialog */
}

/* Guest Registration Modal - Higher z-index when active */
#guestRegistrationModal {
    z-index: 1050 !important; /* Higher than cart when guest form is active */
    transition: z-index 0.3s ease, opacity 0.3s ease, transform 0.3s ease !important;
}

#guestRegistrationModal.show {
    z-index: 1050 !important;
}

#guestRegistrationModal .modal-backdrop {
    z-index: 1040 !important;
    transition: opacity 0.3s ease, z-index 0.3s ease !important;
}

/* When cart modal is closed and guest registration is active, raise it */
body.modal-open:not(:has(#cartModal.show)) #guestRegistrationModal.show {
    z-index: 1050 !important;
}

body.modal-open:not(:has(#cartModal.show)) #guestRegistrationModal.show + .modal-backdrop,
body.modal-open:not(:has(#cartModal.show)) .modal-backdrop:has(+ #guestRegistrationModal.show) {
    z-index: 1040 !important;
}

/* Payment Progress Modal - Above guest form but below API loading */
#paymentProgressModal {
    z-index: 1065 !important; /* Higher than guest registration (1050) but lower than API loading (1070) */
    transition: z-index 0.3s ease, opacity 0.3s ease, transform 0.3s ease !important;
}

#paymentProgressModal.show {
    z-index: 1065 !important;
}

#paymentProgressModal .modal-backdrop {
    z-index: 1064 !important;
}

/* CRITICAL: Make ALL backdrops non-blocking for cart buttons */
/* Cart buttons should always be clickable, even when any modal is open */
/* Exception: API loading backdrop should still block (it's intentional) */
.modal-backdrop:not([data-api-loading-backdrop]) {
    pointer-events: none !important; /* Allow clicks to pass through to cart buttons */
}

/* CRITICAL: Remove blur effect from backdrops that are non-blocking */
/* The blur creates visual interference even though clicks pass through */
.modal-backdrop:not([data-api-loading-backdrop]):not([data-modal-id="cartModal"]) {
    backdrop-filter: none !important; /* Remove blur to prevent visual interference */
    -webkit-backdrop-filter: none !important;
}

/* CRITICAL: When cart modal is open, reduce opacity and remove blur of other backdrops */
/* This prevents visual blur/interference with cart buttons */
body.modal-open #cartModal.show ~ .modal-backdrop:not([data-api-loading-backdrop]):not([data-modal-id="cartModal"]),
body.modal-open .modal-backdrop:not([data-api-loading-backdrop]):not([data-modal-id="cartModal"]) {
    opacity: 0.15 !important; /* Very low opacity so cart buttons are clearly visible */
    backdrop-filter: none !important; /* Remove blur completely */
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important; /* Still allow clicks through */
}

/* Cart modal's own backdrop can have normal blur */
.modal-backdrop[data-modal-id="cartModal"] {
    backdrop-filter: blur(4px) !important; /* Cart backdrop can have blur */
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0.5 !important; /* Normal backdrop opacity for cart */
}

/* But restore pointer events for modal content areas */
.modal.show {
    pointer-events: auto !important;
}

.modal.show .modal-content {
    pointer-events: auto !important;
}

/* CRITICAL: Payment progress modal should still be interactive */
#paymentProgressModal.show {
    pointer-events: auto !important;
}

#paymentProgressModal .modal-content {
    pointer-events: auto !important;
}

/* CRITICAL: Ensure cart buttons are always above backdrops and clickable */
/* These buttons must be above ALL backdrops (highest z-index) */
[data-bs-target="#cartModal"],
[data-bs-toggle="modal"][data-bs-target="#cartModal"],
#openCartModalBtn,
#cartStickySummary button[data-bs-target="#cartModal"],
#cartStickySummary [data-bs-toggle="modal"][data-bs-target="#cartModal"],
.cart-sticky-summary button[data-bs-target="#cartModal"],
.cart-sticky-summary [data-bs-toggle="modal"][data-bs-target="#cartModal"] {
    position: relative !important;
    z-index: 1080 !important; /* Above ALL modals (1070) and backdrops (1069) */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure sticky cart summary is always clickable */
/* CRITICAL: Keep position: fixed to maintain right-side positioning */
#cartStickySummary {
    position: fixed !important; /* Keep fixed positioning for right-side placement */
    z-index: 1015 !important; /* Above regular content, below modals but buttons are higher */
    pointer-events: auto !important;
    /* Don't override right/left positioning - let original CSS handle it */
}

/* CRITICAL: All buttons in sticky summary should be clickable */
#cartStickySummary button {
    position: relative !important;
    z-index: 1080 !important; /* Buttons are always on top (above all modals) */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* CRITICAL: Ensure cart buttons inside sticky summary are clickable */
#cartStickySummary [data-bs-target="#cartModal"],
#cartStickySummary [data-bs-toggle="modal"][data-bs-target="#cartModal"],
#cartStickySummary #openCartModalBtn {
    position: relative !important;
    z-index: 1080 !important; /* Above ALL modals and backdrops */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Login/Forgot Password Modals - Above guest form but below payment progress */
#guestLoginModal,
#forgotPasswordModal {
    z-index: 1060 !important; /* Higher than guest registration (1050) but lower than payment progress (1065) */
    transition: z-index 0.3s ease, opacity 0.3s ease, transform 0.3s ease !important;
}

#guestLoginModal.show,
#forgotPasswordModal.show {
    z-index: 1060 !important;
}

#guestLoginModal .modal-backdrop,
#forgotPasswordModal .modal-backdrop {
    z-index: 1059 !important;
}

/* Terms/Privacy Modals (Top Layer) - Appear ON TOP of guest registration */
/* BUT: Lower than API Loading Modal (1070), Payment Progress (1065), and Login (1060) */
#termsModal,
#privacyModal {
    z-index: 1055 !important; /* Higher than guest registration (1050) but lower than login (1060) */
    transition: z-index 0.3s ease, opacity 0.3s ease, transform 0.3s ease !important;
    animation: modalSlideIn 0.3s ease-out;
}

#termsModal.show,
#privacyModal.show {
    z-index: 1055 !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Terms/Privacy Modal Backdrop - Should be above guest modal but below terms/privacy modal */
/* When nested, the last backdrop is for terms/privacy modal */
/* BUT: Must check for API loading backdrop which has highest z-index (1069) */
body.modal-open .modal-backdrop:not([data-api-loading-backdrop]):first-of-type {
    z-index: 1040 !important;
    opacity: 0.5 !important; /* Guest modal backdrop - more opaque */
    transition: opacity 0.3s ease, z-index 0.3s ease !important;
}

body.modal-open .modal-backdrop:not([data-api-loading-backdrop]):last-of-type {
    z-index: 1054 !important; /* Terms/privacy modal backdrop - below modal (1055) but above guest (1040) */
    opacity: 0.3 !important; /* Less opaque so guest modal is visible */
    transition: opacity 0.3s ease, z-index 0.3s ease !important;
    animation: backdropFadeIn 0.3s ease-out;
}

/* API Loading Modal - Always on top */
#apiLoadingModal {
    z-index: 1070 !important; /* Highest priority */
}

#apiLoadingModal.show {
    z-index: 1070 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* API Loading Modal Backdrop - Highest priority */
body.modal-open .modal-backdrop[data-api-loading-backdrop] {
    z-index: 1069 !important; /* Below API loading modal (1070) but above everything else */
    transition: opacity 0.3s ease, z-index 0.3s ease !important;
    position: fixed !important;
}

@keyframes backdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.3;
    }
}

/* Ensure guest registration modal stays visible when nested modal (terms/privacy) is open */
/* But NOT when cart modal is open - cart should be on top */
/* CRITICAL: Only show if it has explicit permission (explicitShow flag) */
body.modal-open:not(:has(#cartModal.show)) #guestRegistrationModal.show[data-explicit-show="true"] {
    z-index: 1050 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Hide guest modal if it doesn't have explicit permission */
/* BUT: Allow it to show if a nested modal (terms/privacy) is open */
/* OR if keepOpenAfterLogin flag is set (user just logged in) */
body.modal-open #guestRegistrationModal.show:not([data-explicit-show="true"]):not([data-keep-open-after-login="true"]):not(:has(+ #termsModal.show)):not(:has(+ #privacyModal.show)) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* CRITICAL: Always show guest modal if keepOpenAfterLogin is set (user just logged in) */
body.modal-open #guestRegistrationModal.show[data-keep-open-after-login="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1050 !important;
    pointer-events: auto !important;
}

/* CRITICAL: Always show guest modal when nested modal is open (even without explicit flag) */
/* Guest modal should be visible BEHIND terms/privacy modals so user can continue */
body.modal-open:has(#termsModal.show) #guestRegistrationModal,
body.modal-open:has(#privacyModal.show) #guestRegistrationModal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1050 !important; /* Behind terms/privacy (1060) */
    pointer-events: auto !important;
}

/* Ensure guest modal content is accessible when nested modal is open */
body.modal-open:has(#termsModal.show) #guestRegistrationModal .modal-content,
body.modal-open:has(#privacyModal.show) #guestRegistrationModal .modal-content {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* When cart is open, guest registration should be lower */
body.modal-open:has(#cartModal.show) #guestRegistrationModal {
    z-index: 1040 !important; /* Lower than cart (1045) */
}

/* When multiple modals are open, ensure proper stacking */
/* Cart modal - shown first in flow */
body.modal-open #cartModal.show {
    z-index: 1045 !important; /* Cart modal z-index */
    transition: z-index 0.3s ease !important;
}

body.modal-open #cartModal.show + .modal-backdrop:not([data-api-loading-backdrop]),
body.modal-open .modal-backdrop:not([data-api-loading-backdrop]):has(+ #cartModal.show) {
    z-index: 1035 !important; /* Cart backdrop - below modal */
    transition: z-index 0.3s ease, opacity 0.3s ease !important;
}

/* Guest registration modal - lower when cart is open, higher when cart is closed */
body.modal-open #guestRegistrationModal.show {
    /* Default: lower z-index (cart takes priority) */
    z-index: 1030 !important;
    transition: z-index 0.3s ease, opacity 0.3s ease !important;
}

/* When cart is NOT open, guest registration should be on top */
body.modal-open:not(:has(#cartModal.show)) #guestRegistrationModal.show {
    z-index: 1050 !important;
}

body.modal-open:not(:has(#cartModal.show)) #guestRegistrationModal.show + .modal-backdrop,
body.modal-open:not(:has(#cartModal.show)) .modal-backdrop:has(+ #guestRegistrationModal.show) {
    z-index: 1040 !important;
}

body.modal-open #termsModal.show,
body.modal-open #privacyModal.show {
    z-index: 1060 !important;
    transition: z-index 0.3s ease, opacity 0.3s ease !important;
}

/* Smooth modal content transitions */
.modal.show .modal-content {
    animation: modalContentSlideIn 0.3s ease-out;
}

@keyframes modalContentSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Smooth backdrop fade */
.modal-backdrop.show {
    animation: backdropFadeInSmooth 0.3s ease-out;
}

@keyframes backdropFadeInSmooth {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Sticky Header Styling */
#termsModal .modal-header,
#privacyModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 1061; /* Higher than modal itself */
    background: var(--surface-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Agree Button States */
#termsAgreeBtn:disabled,
#privacyAgreeBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#termsAgreeBtn.btn-success,
#privacyAgreeBtn.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

#termsAgreeBtn.btn-success:hover,
#privacyAgreeBtn.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Alert Styling in Content */
.terms-content .alert,
.privacy-content .alert {
    margin-top: 2rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.terms-content .alert-info,
.privacy-content .alert-info {
    border-left-color: var(--info-color);
    background-color: var(--info-light);
}

.terms-content .alert-danger,
.privacy-content .alert-danger {
    border-left-color: var(--error-color);
    background-color: var(--error-light);
}

/* Section Spacing */
.terms-content section,
.privacy-content section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color-light);
}

.terms-content section:last-child,
.privacy-content section:last-child {
    border-bottom: none;
}

/* Link Styling in Content */
.terms-content a,
.privacy-content a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.terms-content a:hover,
.privacy-content a:hover {
    border-bottom-color: var(--primary-color);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #termsModalBody,
    #privacyModalBody {
        max-height: 50vh;
        padding: 1rem;
    }

    .terms-content h2,
    .privacy-content h2 {
        font-size: 1.5rem;
    }

    .terms-content h4,
    .privacy-content h4 {
        font-size: 1rem;
    }

    .terms-content,
    .privacy-content {
        font-size: 0.9rem;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .terms-content,
[data-theme="dark"] .privacy-content {
    color: var(--text-primary);
}

[data-theme="dark"] #termsModalBody,
[data-theme="dark"] #privacyModalBody {
    background-color: var(--surface-color);
}

[data-theme="dark"] #termsModalBody::-webkit-scrollbar-track,
[data-theme="dark"] #privacyModalBody::-webkit-scrollbar-track {
    background: var(--background-secondary);
}

[data-theme="dark"] #termsModalBody::-webkit-scrollbar-thumb,
[data-theme="dark"] #privacyModalBody::-webkit-scrollbar-thumb {
    background: var(--border-color-strong);
}