/* =================================================================
   IUNOS CUSTOM DESIGN SYSTEM & PSYCHOLOGICAL UI
   File: assets/css/main.css
   Version: 3.1 - Animated Background
   ================================================================= */

/* --- 1. Design System & Global Styles --- */
:root {
    /* Color Palette: Trust, Intimacy, and Elegance */
    --iunos-deep-space: #191923;
    --iunos-warm-gray: #4A4A52;
    --iunos-light-gray: #838383;
    --iunos-soft-plum: #522B47;
    --iunos-rose-gold: #B9929F;
    --iunos-ivory: #F4F4F8;

    /* Typography */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Lora', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--iunos-ivory);
    font-size: 1.1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* --- NEW: Animated Gradient Background --- */
    background: linear-gradient(225deg, var(--iunos-deep-space), #2a2a3a, var(--iunos-soft-plum), var(--iunos-deep-space));
    background-size: 400% 400%;
    animation: gradient-flow 25s ease infinite;
}


/* --- Inter (for Headings) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900; /* Defines the full range of weights available */
  font-display: swap;
  /* Path to the main Inter variable font file */
  src: url('/assets/fonts/Inter/Inter-VariableFont_opsz,wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  /* Path to the italic Inter variable font file */
  src: url('/assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
}


/* --- Lora (for Body Text) --- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700; /* Defines the full range of weights available */
  font-display: swap;
  /* Path to the main Lora variable font file */
  src: url('/assets/fonts/Lora/Lora-VariableFont_wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  /* Path to the italic Lora variable font file */
  src: url('/assets/fonts/Lora/Lora-Italic-VariableFont_wght.woff2') format('woff2');
}

.logo img {
  height: 46px;
  width: auto;
}

/* --- NEW: Global Gradient Animation --- */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-disclaimer {
    margin-top: 20px;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--iunos-light-gray);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
}


/* --- 2. Layout & Typography --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 120px 0; background-color: transparent; /* Sections are now transparent to show body gradient */ }
.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.8rem;
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
}
.section-subtitle {
    font-size: 1.2rem;
    color: var(--iunos-rose-gold);
    max-width: 750px;
    margin: 0 auto 80px auto;
    font-family: var(--font-body);
    text-align: center;
    opacity: 0.9;
}
p { margin-bottom: 1rem; }
h1, h2, h3, h4 { font-family: var(--font-heading); }

/* --- 3. Custom Button --- */
.btn-primary {
    background-color: transparent;
    border: 2px solid var(--iunos-rose-gold);
    color: var(--iunos-rose-gold);
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    display: inline-block;
}
.btn-primary:hover {
    background-color: var(--iunos-rose-gold);
    color: var(--iunos-deep-space);
    box-shadow: 0 5px 20px rgba(185, 146, 159, 0.25);
    transform: translateY(-4px);
}

/* --- 4. Header & Navigation --- */
#main-header {
    position: fixed; width: 100%; top: 0; left: 0; z-index: 1000;
    padding: 20px 0;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
#main-header.scrolled {
    background-color: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#main-header nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.75rem; font-weight: 700; text-decoration: none; color: var(--iunos-ivory); }
.nav-links a { margin-left: 35px; text-decoration: none; font-weight: 500; font-family: var(--font-heading); color: var(--iunos-ivory); transition: color 0.3s ease; }
.nav-links a:hover { color: var(--iunos-rose-gold); }
.mobile-menu-toggle { background: none; border: none; cursor: pointer; color: var(--iunos-ivory); }
.mobile-menu-toggle .material-icons { font-size: 2rem; }
/* --- SCROLL FIX: Updated Mobile Menu Overlay --- */
.mobile-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--iunos-deep-space);
    z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
    pointer-events: none; /* Make it unclickable when hidden */
    opacity: 0; /* Hide it visually */
}
.mobile-menu-overlay.active {
    transform: translateY(0);
    pointer-events: auto; /* Make it clickable when active */
    opacity: 1; /* Show it visually */
}
.mobile-menu-overlay .close-btn { position: absolute; top: 20px; right: 20px; }
.mobile-nav-links { display: flex; flex-direction: column; text-align: center; }
.mobile-nav-links a { color: var(--iunos-ivory); font-size: 2rem; font-weight: 700; text-decoration: none; margin-bottom: 30px; }

/* --- 5. Section Specific Styles --- */

/* Hero Section - Now transparent to show body gradient */
.hero-section-custom {
    height: 100vh;
    display: flex; align-items: center; text-align: center;
    position: relative;
}
.hero-section-custom h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }

/* --- Hero Trust Badges --- */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
    margin-top: 2.5rem;
}
.badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    color: var(--iunos-rose-gold);
    font-size: 1rem;
    opacity: 0.9;
}

/* Features Section - Adding subtle overlay for readability */
#features,
#pricing,
#cta {
    background-color: rgba(25, 25, 35, 0.3); /* Soft overlay */
    border-radius: 20px;
    margin: 0 24px; /* Give it some space */
}
#features .row { margin-bottom: 4rem; }
#features .material-symbols-outlined { font-size: 3rem; color: var(--iunos-rose-gold); }

/* How It Works Section */
#how-it-works { background-color: transparent; }
.timeline { position: relative; }
.timeline-item { position: relative; padding-left: 5rem; padding-bottom: 3rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: ''; position: absolute; left: 31px; top: 0;
    width: 2px; height: 100%;
    background-color: var(--iunos-warm-gray);
}
.timeline-icon {
    position: absolute; left: 0; top: 0; width: 64px; height: 64px;
    border: 2px solid var(--iunos-warm-gray); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--iunos-deep-space); font-size: 1.5rem; color: var(--iunos-rose-gold);
}

/* FAQ Section */
.custom-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--iunos-warm-gray); }
.custom-faq .accordion-button { font-size: 1.2rem; color: var(--iunos-ivory); background: transparent; padding: 1.5rem 0; }
.custom-faq .accordion-button:not(.collapsed) { color: var(--iunos-rose-gold); box-shadow: none; }
.custom-faq .accordion-button:focus { box-shadow: none; }
.custom-faq .accordion-body { padding: 0 0 1.5rem 0; color: rgba(244, 244, 248, 0.8);}
.custom-faq .accordion-button::after {
    content: '+'; font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 600;
    background-image: none; transform: rotate(0); transition: transform 0.3s ease; color: var(--iunos-rose-gold);
}
.custom-faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }

/* CTA Section */
#cta { padding: 120px 0; }

/* --- 6. Footer --- */
.site-footer {
    background-color: #14141C;
    padding: 80px 0;
    border-top: 1px solid var(--iunos-warm-gray);
    color: var(--iunos-ivory);
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.footer-column .footer-logo { margin-bottom: 15px; display: inline-block; }
.footer-column p { color: var(--iunos-rose-gold); opacity: 0.7; max-width: 250px; }
.footer-column h4 { font-size: 1.1rem; color: #fff; margin-bottom: 20px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { text-decoration: none; color: var(--iunos-ivory); transition: color 0.3s ease; }
.footer-links a:hover { color: var(--iunos-rose-gold); }
.footer-bottom { text-align: center; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--iunos-warm-gray); font-size: 0.9rem; color: var(--iunos-warm-gray); }

/* --- 7. Responsive Design --- */
@media (max-width: 992px) {
    .nav-links { display: none; }
}
/* In main.css */

@media (min-width: 993px) {
    .mobile-menu-toggle { display: none; }
    .mobile-menu-overlay { display: none !important; } /* <-- ADD THIS LINE */
}
@media (max-width: 768px) {
    section { padding: 80px 0; }
    .section-title { font-size: 2.2rem; }
    #features { margin: 0 16px; }
    #features .row { text-align: center; }
    #features .row .col-md-10 { text-align: center !important; }
}


/* --- 6. Page Specific Styles: Token Login --- */
.token-login-section { display: flex; align-items: center; justify-content: center; min-height: 80vh; text-align: center; padding-top: 80px; }
.token-login-box { max-width: 550px; width: 100%; padding: 40px; background-color: rgba(25, 25, 35, 0.3); border-radius: 20px; border: 1px solid var(--iunos-warm-gray); }
.token-login-box h1 { font-family: var(--font-heading); font-weight: 700; font-size: 2.5rem; color: #fff; margin-bottom: 1rem; }
.token-login-box p { color: var(--iunos-rose-gold); font-size: 1.1rem; margin-bottom: 2.5rem; }
.token-input { width: 100%; padding: 15px 20px; font-size: 1.2rem; font-family: var(--font-heading); background-color: var(--iunos-deep-space); border: 2px solid var(--iunos-warm-gray); border-radius: 50px; color: var(--iunos-ivory); text-align: center; letter-spacing: 2px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.token-input:focus { outline: none; border-color: var(--iunos-rose-gold); box-shadow: 0 0 15px rgba(185, 146, 159, 0.25); }
.token-input::placeholder { color: var(--iunos-warm-gray); letter-spacing: normal; }


/* --- Page Specific Styles: 404 Error Page (Revised for Centering & Spacing) --- */
.error-section {
    min-height: 100vh;
    display: flex; /* Use flexbox to enable vertical centering */
    align-items: center;
    padding-top: 120px; /* Added to create space from the header */
}

/* Target the container specifically for centering and text alignment */
.error-section .container {
    width: 100%;
    max-width: 550px; /* Optional: Constrain the width for a cleaner look */
    margin: 0 auto; /* This now centers the container perfectly */
    text-align: center;
}

.error-section .error-icon {
    margin-bottom: 2rem;
    color: var(--iunos-warm-gray);
    opacity: 0.5;
}

.error-section .error-code {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 700;
    color: var(--iunos-rose-gold);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(185, 146, 159, 0.3), 0 0 30px rgba(185, 146, 159, 0.2);
    animation: glow 4s ease-in-out infinite;
}

.error-section h2 {
    font-size: 1.8rem;
    color: var(--iunos-rose-gold); /* Changed color for better harmony */
    margin-bottom: 1rem;
}

.error-section p {
    font-size: 1.2rem;
    max-width: 500px;
    margin: 0 auto 3rem auto; /* Use auto horizontal margins here too */
    color: rgba(244, 244, 248, 0.8);
}

@keyframes glow {
    0%, 100% {
        opacity: 0.8;
        text-shadow: 0 0 15px rgba(185, 146, 159, 0.3), 0 0 30px rgba(185, 146, 159, 0.2);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 25px rgba(185, 146, 159, 0.5), 0 0 50px rgba(185, 146, 159, 0.4);
    }
}

/* =================================================================
   TOKEN PAGE V2 STYLES (FINAL)
   ================================================================= */

/* --- Visual Hierarchy: Brighter Background Focus --- */
body.token-page-active {
    background: radial-gradient(circle at center, #2a2a3a, var(--iunos-deep-space) 70%), 
                linear-gradient(225deg, var(--iunos-deep-space), #2a2a3a, var(--iunos-soft-plum), var(--iunos-deep-space));
    background-size: 100% 100%, 400% 400%;
    animation: gradient-flow 25s ease infinite;
}

/* --- Main Token Entry Section --- */
.token-entry-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    padding-top: 170px; /* Increased for more breathing room */
}
.token-entry-wrapper {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.token-entry-wrapper h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 1rem;
}

/* --- New Token Input and Feedback Styles --- */
.token-entry-wrapper .token-input-field {
    background-color: var(--iunos-ivory);
    color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-warm-gray);
    border-radius: 50px;
    font-weight: 500;
    letter-spacing: 1px;
    width: 100%;
    padding: 15px 20px;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    text-align: center;
    transition: all 0.3s ease;
}
.token-input-field::placeholder {
    color: var(--iunos-warm-gray);
    opacity: 0.8;
}
.token-input-field:focus {
    outline: none;
    border-color: var(--iunos-rose-gold);
    box-shadow: 0 0 15px rgba(185, 146, 159, 0.35);
}

/* --- Inline Feedback Styling --- */
.feedback-line {
    min-height: 24px;
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}
.feedback-line.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.feedback-line.valid {
    color: #2ecc71; /* Green for valid */
}
.feedback-line.invalid {
    color: #e74c3c; /* Red for invalid */
}
.feedback-line.validating {
    color: var(--iunos-rose-gold); /* Neutral color for checking */
}
.feedback-line .spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* --- Hidden Button & Fade-in Animation --- */
.cta-button.token-action-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.4s ease;
    width: 100%;
}
.cta-button.token-action-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Reassurance Icons --- */
.reassurance-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem; /* Added space */
    color: var(--iunos-rose-gold);
    opacity: 0.9;
}
.reassurance-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-family: var(--font-heading);
}
.reassurance-item svg {
    opacity: 0.8;
}

/* --- Redesigned FAQ Accordion --- */
.faq-v2 {
    margin-top: 100px;
    text-align: left;
}
.faq-v2 h2 {
    text-align: center;
    color: var(--iunos-ivory);
    margin-bottom: 2rem;
}
.faq-v2 .accordion-item {
    background-color: rgba(25, 25, 35, 0.3);
    border: 1px solid var(--iunos-warm-gray);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.faq-v2 .accordion-button {
    font-size: 1.1rem;
    font-weight: 600;
}
.faq-v2 .accordion-button::after {
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B9929F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
    transition: transform 0.3s ease;
}
.faq-v2 .accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
}
.faq-v2 .accordion-body {
    font-size: 1rem;
}

/* --- General Typography Fix --- */
strong, b {
    font-family: var(--font-heading);
    font-weight: 600;
}
/* --- Token Input Group Enhancements --- */
.input-group-token {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group-token .token-input-field {
    /* Add padding to prevent text from overlapping with the new icons */
    padding-right: 85px; 
    padding-left: 85px;
}

/* Style for the "eye" icon to show/hide the token */
.toggle-visibility {
    position: absolute;
    right: 20px;
    color: var(--iunos-warm-gray);
    cursor: pointer;
    transition: color 0.3s ease;
    user-select: none; /* Prevents text selection on double click */
}
.toggle-visibility:hover {
    color: var(--iunos-rose-gold);
}

/* Style for the "Paste" button */
.paste-btn {
    position: absolute;
    left: 15px;
    background-color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-rose-gold);
    color: var(--iunos-rose-gold);
    padding: 5px 10px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.paste-btn:hover {
    background-color: var(--iunos-rose-gold);
    color: var(--iunos-deep-space);
}
/* --- Privacy Banner Styles (Corrected) --- */
#privacy-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #212529;
    color: #f8f9fa;
    padding: 15px 25px;
    display: flex;
    /* FIX FOR DESKTOP: Explicitly set the direction to horizontal */
    flex-direction: row;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    justify-content: space-between;
    align-items: center;
    z-index: 1050;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    font-size: 14px;
    line-height: 1.5;
    transition: transform 0.4s ease-in-out;
}

#privacy-banner.hidden {
    transform: translateY(100%);
}

#privacy-banner p {
    margin: 0;
    padding-right: 20px;
}

#privacy-banner button {
    white-space: nowrap;
    margin: 0 5px;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    min-width: 130px;
    background-color: transparent;
    border: 1px solid #C9BEDC;
    color: #C9BEDC;
}

#privacy-banner button:hover {
    background-color: #C9BEDC;
    color: #212529;
}

@media (max-width: 768px) {
    #privacy-banner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: 20px;
    }

    #privacy-banner p {
        flex-basis: 100%;
        padding-right: 0;
        margin-bottom: 15px;
    }
}

/* =================================================================
   TOKEN PAGE V3 STYLES (MATCH INVITATION)
   ================================================================= */


#match-modal-step-2 .consent-container {
    display: none;
}

#match-invitation-prompt {
    display: none; 
    margin-top: 2rem;
    padding: 25px;
    background-color: rgba(185, 146, 159, 0.1); 
    border: 1px solid var(--iunos-rose-gold);
    border-radius: 15px;
    animation: fadeIn 0.5s ease-in-out;
}

#match-invitation-prompt h3 {
    font-family: var(--font-heading);
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#match-invitation-prompt p {
    color: var(--iunos-rose-gold);
    margin-bottom: 1.5rem;
}

.match-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Styling for the two main buttons in the prompt --- */
.btn-match-action {
    width: 100%;
    padding: 12px 20px;
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

#match-new-user-btn {
    background-color: var(--iunos-rose-gold);
    color: var(--iunos-deep-space);
    border: 2px solid var(--iunos-rose-gold);
}
#match-new-user-btn:hover {
    background-color: transparent;
    color: var(--iunos-rose-gold);
}
#match-existing-user-btn {
    background-color: transparent;
    color: var(--iunos-ivory);
    border: 2px solid var(--iunos-warm-gray);
}
#match-existing-user-btn:hover {
    background-color: var(--iunos-warm-gray);
    color: var(--iunos-ivory);
}

/* --- Container for the "existing user" input field --- */
#existing-user-input-container {
    display: none; /* Hidden by default */
    margin-top: 1.5rem;
    animation: fadeIn 0.5s ease-in-out;
}

#existing-user-input-container p {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--iunos-light-gray);
}

/* --- General Fade-in Animation --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/*
==============================================
NEW: Gradient Slider for Questionnaire
==============================================
*/
.slider-gradient {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(90deg, #e0e0e0 0%, #ff8fab 100%); /* Light Grey to Pink */
  outline: none;
  opacity: 0.9;
  transition: opacity .2s;
  cursor: pointer;
}

.slider-gradient:hover {
  opacity: 1;
}

/* === Thumb Styling (the circle handle) === */

/* Webkit (Chrome, Safari, Opera, Edge) */
.slider-gradient::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f8f9fa; /* A light, clean color */
  border: 2px solid #ff8fab; /* Pink border */
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  margin-top: -8px; 
}

/* Firefox */
.slider-gradient::-moz-range-thumb {
  width: 20px; 
  height: 20px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 2px solid #ff8fab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  cursor: pointer;
}


.questionnaire-entry-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 15px 40px 15px; 
    box-sizing: border-box;
}

/* =================================================================
   Page Specific Styles: Legal Pages (Terms, Privacy)
   ================================================================= */
.legal-content-section {
    padding-top: 140px; /* Extra space for the fixed header */
    padding-bottom: 120px;
}

.legal-box {
    background-color: rgba(25, 25, 35, 0.45); /* Semi-transparent overlay for readability */
    border: 1px solid var(--iunos-warm-gray);
    border-radius: 20px;
    padding: 40px 50px;
    max-width: 900px; /* Constrain width for optimal line length */
    margin: 0 auto;
}

.legal-box h1 {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: #fff;
    text-align: center;
    margin-bottom: 1.5rem; /* Increased spacing from 0.5rem */
}

.legal-box .last-updated {
    display: block;
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    color: var(--iunos-light-gray);
    margin-bottom: 3rem; /* Space between date and content */
}

/* Styles for the actual terms content loaded via PHP */
.legal-text-wrapper h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--iunos-rose-gold);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--iunos-warm-gray);
}

.legal-text-wrapper p,
.legal-text-wrapper li {
    color: var(--iunos-ivory);
    opacity: 0.9;
    line-height: 1.8; /* More spacing for readability */
}

.legal-text-wrapper ul {
    list-style-position: outside;
    padding-left: 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.legal-text-wrapper li {
    margin-bottom: 0.75rem;
}

.legal-text-wrapper a {
    color: var(--iunos-rose-gold);
    text-decoration: none;
    border-bottom: 1px dotted var(--iunos-rose-gold);
    transition: color 0.3s ease;
}

.legal-text-wrapper a:hover {
    color: var(--iunos-ivory);
}


/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .legal-box {
        padding: 30px 25px;
    }
    .legal-box h1 {
        font-size: 2.2rem;
    }
    .legal-text-wrapper h2 {
        font-size: 1.5rem;
    }
}

/* =================================================================
   Endorsement Section (Social Proof)
   ================================================================= */

.endorsement-section {
    padding: 120px 0;
    background-color: rgba(25, 25, 35, 0.3); /* Soft overlay */
    border-radius: 20px;
    margin: 60px 24px;
}

/* --- Carousel Styles --- */
.endorsement-carousel {
    width: 100%;
    padding: 20px 0 50px 0; /* Extra padding for pagination */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make cards equal height */
    height: auto; /* Allow cards to determine height */
}

.endorsement-card {
    background-color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-warm-gray);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Ensure card fills the slide height */
}

.endorsement-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.card-stars {
    margin-bottom: 1.5rem;
    color: #FFC107; /* Gold color for stars */
}
.card-stars .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--iunos-warm-gray);
}
.card-stars .material-symbols-outlined.filled {
    color: #FFC107;
    font-variation-settings: 'FILL' 1;
}

.card-comment {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--iunos-ivory);
    font-size: 1.1rem;
    line-height: 1.7;
    flex-grow: 1; /* Allow comment to take up available space */
    margin-bottom: 1.5rem;
}

.card-product-patch {
    background-color: var(--iunos-rose-gold);
    color: var(--iunos-deep-space);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
    margin: 0 auto;
}

/* "Add Experience" Card */
.add-experience-card {
    background-color: transparent;
    border: 2px dashed var(--iunos-warm-gray);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* Ensure a decent size */
}

.add-experience-card .material-symbols-outlined {
    font-size: 3rem;
    color: var(--iunos-rose-gold);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.add-experience-card h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.add-experience-card p {
    color: var(--iunos-light-gray);
    font-size: 1rem;
}

.add-experience-card:hover .material-symbols-outlined {
    transform: scale(1.1);
}

/* Swiper Navigation & Pagination */
.swiper-button-next,
.swiper-button-prev {
    color: var(--iunos-rose-gold);
    transition: color 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #fff;
}

.swiper-pagination-bullet {
    background: var(--iunos-warm-gray);
}
.swiper-pagination-bullet-active {
    background: var(--iunos-rose-gold);
}


/* =================================================================
   Endorsement Modal Styles
   ================================================================= */
.modal-content {
    background-color: #2a2a3a; /* Darker than body */
    border: 1px solid var(--iunos-warm-gray);
    border-radius: 15px;
    color: var(--iunos-ivory);
}
.modal-header {
    border-bottom: 1px solid var(--iunos-warm-gray);
}
.modal-header .btn-close {
    background-color: #fff;
    filter: invert(1);
}
.modal-title {
    font-family: var(--font-heading);
    font-weight: 600;
}
.modal-body .form-control {
    background-color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-warm-gray);
    color: #fff;
    border-radius: 12px; /* Set a standard, modern radius */
    padding: 12px 20px;
}
/* Specific pill shape for the key input only */
#endorsement-key-input.form-control {
    border-radius: 50px;
    padding: 12px 20px;
}
.modal-body .form-control:focus {
    box-shadow: 0 0 10px rgba(185, 146, 159, 0.3);
    border-color: var(--iunos-rose-gold);
}

/* Star Rating Input */
.star-rating-input {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.star-rating-input .star {
    cursor: pointer;
    padding: 5px;
}
.star-rating-input .star .material-symbols-outlined {
    font-size: 2.5rem;
    color: var(--iunos-warm-gray);
    transition: color 0.2s, transform 0.2s;
}
.star-rating-input .star:hover .material-symbols-outlined,
.star-rating-input .star.selected .material-symbols-outlined {
    color: #FFC107;
    transform: scale(1.1);
}

/* Feedback Line (for validation messages) */
.feedback-line {
    min-height: 24px;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.9rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}


/* Thank you step */
.success-icon {
    font-size: 4rem;
    color: #2ecc71;
    margin-bottom: 1rem;
}

/* Fix for low-contrast placeholder text in the modal */
.modal-body .form-control::placeholder {
    color: var(--iunos-light-gray);
    opacity: 1;
}



/* --- Endorsement Section & Cards (Consolidated Fixes) --- */

/* Equal height fix for slides */
.endorsement-carousel .swiper-slide {
  height: auto;
  display: flex;
}

/* This targets the card within the slide (.endorsement-card or .add-experience-card) */
.endorsement-carousel .swiper-slide > div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.endorsement-carousel .add-experience-card {
    justify-content: center;
}

.card-product-tag {
    font-weight: 700;
    font-size: 0.8rem;
    color: #c0c0d0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 15px;
}

.endorsement-card .card-comment {
    flex-grow: 1;
}

.endorsement-card .card-footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center;   /* Centers items horizontally in the column */
    justify-content: center;
}

.card-verified-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
    color: #2ecc71;
}
.card-product-patch {
    display: none;
}

.price-line {
    display: flex;
    align-items: baseline; /* Aligns the bottom of the price and text */
    justify-content: center;
    gap: 0.5rem; /* Space between price and note */
}

.vat-note {
    font-size: 0.8rem;
    color: #6c757d; /* A subtle grey color */
    font-weight: normal;
}

/* Ensure the main price doesn't have extra margins a-conflicting */
.price-line .price {
    margin-bottom: 0;
}

/* =================================================================
   NEW: MATCH INVITATION MODAL STYLES
   ================================================================= */

.match-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Create the dimmed background effect */
    background: rgba(25, 25, 35, 0.6); /* --iunos-deep-space at 60% opacity */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;

    /* Hidden by default */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.match-modal-overlay.show {
    visibility: visible;
    opacity: 1;
}

.match-modal-content {
    position: relative;
    background-color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-warm-gray);
    border-radius: 15px;
    padding: 2.5rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    
    /* Animation for modal pop-in */
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.match-modal-overlay.show .match-modal-content {
    transform: scale(1);
    opacity: 1;
}

.match-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    color: var(--iunos-light-gray);
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}
.match-modal-close:hover {
    color: var(--iunos-ivory);
}

.match-modal-step {
    animation: fadeIn 0.4s ease-in-out; /* Use existing fadeIn animation */
}

.match-modal-content h3 {
    font-family: var(--font-heading);
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.match-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Use a shared class for modal button layout.
  The existing ID styles from main.css will handle the colors:
  #match-new-user-btn (primary fill)
  #match-existing-user-btn (secondary outline)
*/
.btn-match-action {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
}

.match-modal-back-btn {
    background: none;
    border: none;
    color: var(--iunos-light-gray);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.3s ease;

    /* --- Centering Rules --- */
    display: block;
    margin: 1.5rem auto 0 auto; /* Top margin, auto for left/right, no bottom margin */
    padding: 5px 10px; /* Add some padding for a better click area */
}

.match-modal-back-btn:hover {
    color: var(--iunos-rose-gold);
}

/* Ensure the input fields inside the modal look correct and use pill style */
.match-modal-step #existing-user-token-input {
    width: 100%; /* ADDED: Make input full-width to match button */
    text-align: center;
    margin-bottom: 10px;
    height: 55px;
    border-radius: 30px; 
    padding: 0 25px; 
    font-size: 1.1rem;
}

.match-modal-step #submit-match-tokens-btn {
    width: 100%;
}

.nav-links a.btn-primary:hover {
    color: var(--iunos-deep-space); 
}

/* --- UX/UI Fixes for Match Modal --- */

/* 1. Add space above the consent box */
.consent-container {
    margin-top: 1.5rem; 
}

/* 2. Style the consent text to be smaller and less prominent */
.consent-label {
    font-size: 0.9rem;
    color: var(--iunos-light-gray);
    opacity: 0.9;
}

/* 3. Style for disabled buttons to make them look "grayed out" */
.btn-match-action:disabled {
    background-color: var(--iunos-warm-gray);
    border-color: var(--iunos-warm-gray);
    color: var(--iunos-light-gray);
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none; 
}

#match-existing-user-btn:disabled:hover {
    background-color: var(--iunos-warm-gray);
    color: var(--iunos-light-gray);
}

#match-modal-step-1 .consent-container {
    display: flex; 
    align-items: flex-start; 
    text-align: left; 
    gap: 0.75rem;
}

#match-modal-step-1 .consent-checkbox {
    flex-shrink: 0; 
    margin-top: 0.25em;
}



/* =================================================================
   NEW: Image Rotator for How-It-Works Section
   ================================================================= */
.image-rotator {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--iunos-warm-gray);
    background-color: var(--iunos-deep-space);
}

.image-rotator img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

.image-rotator img.active {
    opacity: 1;
}

.endorsement-disclaimer {
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--iunos-light-gray);
    text-align: left; 
    opacity: 0.8;
    margin-top: 1.5rem;   
    margin-bottom: 1.5rem; 
    line-height: 1.5;
}

#char-count {
    display: block; 
    text-align: right;
    font-size: 0.85rem;
    color: var(--iunos-ivory); /* CHANGED: Switched to a high-contrast color */
    opacity: 1; /* CHANGED: Removed transparency for max visibility */
    margin-top: 0.5rem; 
    padding-right: 0.25rem; 
}

.modal-body .star-rating-input {
    margin-bottom: 1.5rem;
}

.modal-body #endorsement-comment {
    min-height: 120px;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* --- Endorsement Modal Consent Checkbox --- */
.endorsement-consent-container .form-check {
    display: flex;
    align-items: flex-start; /* Aligns checkbox with the start of the text block */
    text-align: left;
}

.endorsement-consent-container .form-check-input {
    margin-top: 0.25rem; /* Better vertical alignment */
    margin-right: 0.75rem;
    height: 1.25em; /* Make checkbox slightly larger */
    width: 1.25em;
}

.endorsement-consent-label {
    font-size: 0.9rem;
    color: var(--iunos-light-gray);
    opacity: 0.9;
    line-height: 1.5;
}

#submit-endorsement-btn:disabled {
    background-color: var(--iunos-warm-gray);
    border-color: var(--iunos-warm-gray);
    color: var(--iunos-light-gray);
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- Endorsement Card Disclaimer --- */
.card-disclaimer {
    font-size: 0.8rem;
    color: var(--iunos-light-gray);
    font-style: italic;
    line-height: 1.4;
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 0 10px;
}

.vat-notice {
    font-size: 0.8rem;
    color: var(--iunos-light-gray); 
    margin-top: -5px;
    font-weight: normal;
}

/* =================================================================
   STYLES: Payment Modal
   ================================================================= */

/* The semi-transparent backdrop */
.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* FIX: Align to top to prevent content from being cut off */
  background-color: rgba(10, 10, 20, 0.7);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  padding: 2rem 0; 
  margin: auto;
}

/* The modal content window */
.payment-modal-content {
  position: relative;
  background-color: #2a2b38;
  padding: 0; /* Remove padding to allow columns to go to the edge */
  border-radius: 12px;
  border: 1px solid #4a4a5e;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 900px; /* Wider modal for two columns */
}

/* =================================================================
   STYLES: Payment Modal Price Summary
   ================================================================= */

#modal-price-summary {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--iunos-warm-gray);
}

.summary-total-label {
  font-family: var(--font-heading);
  color: var(--iunos-light-gray);
  font-size: 1rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-total-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--iunos-rose-gold);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.summary-vat-notice {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--iunos-light-gray);
  margin-bottom: 0;
}

/* The 'X' close button */
.payment-modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.payment-modal-close-btn:hover {
  color: #fff;
}

/* --- Form Layout & Spacing --- */

/* This sets up the form for easy centering of the button */
#modal-payment-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* This adds space between the main elements like Address and Payment */
}

/* Checkbox container and label styles */
.checkbox-container {
  display: grid; /* Use Grid instead of Flexbox */
  grid-template-columns: auto 1fr; /* 1st column for checkbox, 2nd for text */
  align-items: start; /* Aligns items to the top of the row */
  gap: 0.75rem; /* The space between the checkbox and the label */
}

.checkbox-container input[type="checkbox"] {
  margin-top: 0.2rem;
  min-width: 16px;
  min-height: 16px;
  cursor: pointer;
}

.checkbox-container label {
  font-size: 0.85rem;
  color: var(--iunos-light-gray); /* Using your theme color */
  line-height: 1.5;
  cursor: pointer;
}

.checkbox-container label a {
  color: var(--iunos-ivory); /* Using your theme color */
  text-decoration: none;
  border-bottom: 1px dotted var(--iunos-ivory);
}

.checkbox-container + .checkbox-container {
    margin-top: 0.75rem; /* Sets a small gap to group checkboxes together. */
}

/* The main submit button */
#modal-submit-button {
  align-self: center;
  min-width: 280px;
  width: auto;
  margin-top: 2.5rem; /* ADDED: This creates the larger space you wanted. */
}

#modal-submit-button:disabled {
  background-color: #555;
  border-color: #555;
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Utility & Loader Styles --- */

/* Prevents background scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* The loading animation container (UPDATED) */
#modal-loader {
  /* This ensures perfect centering within the overlay */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* These properties center the logo *inside* the loader div */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-loader-logo {
  max-width: 100px;
  animation: pulse-logo 1.5s ease-in-out infinite alternate;
}

@keyframes pulse-logo {
  from {
    transform: scale(1);
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(185, 146, 159, 0.4));
  }
  to {
    transform: scale(1.03);
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(185, 146, 159, 0.7));
  }
}

/* Add this new class to your CSS file */
.modal-form-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 1.5rem; /* REMOVED to enable custom spacing */
  margin-top: 2rem;
}


.product-context {
    display: none;
}

/* NEW: Specific, high-contrast style for the endorsement character counter */
#endorsement-char-counter {
    display: block;
    text-align: right;
    font-family: var(--font-heading); 
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--iunos-light-gray); 
    opacity: 0.9;
    margin-top: 0.75rem;
    padding-right: 0.25rem;
}

.star-rating-input {
    -webkit-user-select: none;
    user-select: none;        
}


.endorsement-consent-container {
    margin-top: 0.5rem;  
    margin-bottom: 2rem;  
}

/* =================================================================
   STYLES: Questionnaire Disclaimer Box
   ================================================================= */
.disclaimer-container {
    /* RECOMMENDED: A light, semi-transparent ivory for better contrast */
    background-color: rgba(244, 244, 248, 0.4);
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 550px;
    margin: 3rem auto;
}

.disclaimer-checkbox-wrapper {
    display: flex;
    align-items: flex-start; 
    text-align: left;
}

/* Adds space between the two disclaimer checkboxes */
.disclaimer-checkbox-wrapper + .disclaimer-checkbox-wrapper {
    margin-top: 0.75rem; /* Adjust this value for more or less space */
}


.disclaimer-checkbox-wrapper input[type="checkbox"] {
    flex-shrink: 0; 
    margin-top: 0.25em; 
    margin-right: 0.85rem;
    height: 1.3em; 
}
.disclaimer-checkbox-wrapper label {
    font-size: 0.95rem; 
    color: var(--iunos-light-gray);
    line-height: 1.6;
}

.disclaimer-checkbox-wrapper label a {
    color: var(--iunos-soft-plum);
    text-decoration: underline;
}

/*
 * Thank You Page Section
 * Mimics the structure of the .error-section for consistency.
 */
.thank-you-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 24px;
    min-height: 70vh; /* Ensures it takes up significant screen space */
}

/*
 * Icon Styling
 * Apply your brand color here.
 */
.thank-you-icon svg {
    margin-bottom: 24px;
    /* --- IMPORTANT --- */
    /* Replace #8B5CF6 with your actual brand color */
    color: var(--iunos-rose-gold);
}

/*
 * Text and Button Styling
 * Uses the same hierarchy as the 404 page for headings, paragraphs, and buttons.
 */
.thank-you-section h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.thank-you-section p {
    font-size: 1.125rem;
    color: #6c757d; /* A slightly softer text color for the subheader */
    max-width: 600px; /* Prevents the text from becoming too wide on large screens */
    margin-bottom: 1.5rem;
    /* Add these two lines to center the text block */
    margin-left: auto;
    margin-right: auto;
}

/* =================================================================
   STYLES: Two-Column Payment Modal
   ================================================================= */

/* --- Grid Layout --- */
.payment-modal-grid {
    display: grid;
    grid-template-columns: 4fr 5fr; /* Adjust ratio as needed */
    gap: 3rem;
}

.payment-modal-content {
    max-width: 900px; /* Wider modal for two columns */
    padding: 0; /* Remove padding to allow columns to go to the edge */
}

.payment-summary-column {
    background-color: #1a1a24; /* Slightly different background */
    padding: 2.5rem;
    border-right: 1px solid var(--iunos-warm-gray);
    border-radius: 12px 0 0 12px;
}

.payment-form-column {
    padding: 2.5rem;
    position: relative;
}

/* --- Left Column: Summary --- */
.product-info {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--iunos-warm-gray);
}

.product-info h3 {
    font-family: var(--font-heading);
    color: var(--iunos-ivory);
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.product-info p {
    font-family: var(--font-body);
    color: var(--iunos-light-gray);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.price-details {
    margin-top: 1.5rem;
    font-family: var(--font-heading);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--iunos-light-gray);
}

.price-row.subtotal-row {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    /* border-top is removed to prevent double lines */
}

.price-row span:last-child {
    font-weight: 500;
    color: var(--iunos-ivory);
}

#original-price-row span:last-child {
    text-decoration: line-through;
    color: var(--iunos-light-gray);
}
#discount-row span:last-child {
    color: #2ecc71; /* Green for discount */
}

.price-row.total-row {
    margin-top: 1.5rem;
    padding-top: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}
.price-row.total-row span {
    color: var(--iunos-ivory);
}

#summary-tax-percentage {
    color: var(--iunos-light-gray);
    font-size: 0.85rem;
}


/* --- Responsive Adjustments --- */
@media (max-width: 820px) {
    .payment-modal-grid {
        grid-template-columns: 1fr;
    }
    .payment-summary-column {
        border-right: none;
        border-bottom: 1px solid var(--iunos-warm-gray);
        border-radius: 12px 12px 0 0;
    }
    .payment-form-column {
         border-radius: 0 0 12px 12px;
    }
    .payment-modal-content {
        max-width: 500px; /* Revert to smaller max-width */
    }
}

/* --- Right Column: Form Elements --- */
.payment-form-column .form-row {
    margin-bottom: 24px;
}

/* NEW: Branded style for custom input fields in the modal */
.payment-modal-input {
    width: 100%;
    background-color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-warm-gray);
    color: var(--iunos-rose-gold);
    padding: 1rem 1rem;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Floating Label Group for Custom Inputs --- */
.floating-label-group {
    position: relative;
}

.floating-label-group label {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--iunos-light-gray);
    position: absolute;
    pointer-events: none;
    left: 1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5rem; /* Matches line-height */
    transition: all 0.2s ease-out;
}

/* The "float" state */
.floating-label-group .payment-modal-input:focus ~ label,
.floating-label-group .payment-modal-input:not(:placeholder-shown) ~ label {
    transform: translateY(-1.1rem) scale(0.85);
    transform-origin: left top;
}

/* Adjust label color when input is focused for better visibility */
.floating-label-group .payment-modal-input:focus ~ label {
    color: var(--iunos-rose-gold);
}

/* =================================================================
   Cookie Banner Buttons (Equal Weight for Compliance)
   ================================================================= */

/* This targets the container for the buttons */
#privacy-banner .banner-buttons {
    display: flex;
    gap: 15px; /* Adjust the space between buttons */
    flex-shrink: 0; /* Prevents buttons from shrinking on small screens */
}

/* This single, unified class makes all buttons and links look the same */
.cookie-banner-btn {
    /* Reset and Unify Appearance */
    background-color: transparent;
    border: 2px solid var(--iunos-warm-gray); /* Use a neutral border color */
    color: var(--iunos-ivory); /* Use a standard text color */
    
    /* Typography and Sizing */
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    
    /* Smooth hover effect */
    transition: all 0.3s ease;
}

/* Hover effect for all buttons */
.cookie-banner-btn:hover {
    background-color: var(--iunos-ivory);
    color: var(--iunos-deep-space);
    border-color: var(--iunos-ivory);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #privacy-banner .banner-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* =================================================================
   STYLES: Stripe Legal Footer & Modal
   ================================================================= */

/* --- Footer below the Pay button --- */
.stripe-legal-footer {
    text-align: center;
    margin-top: 1.5rem; /* REDUCED: This creates the smaller space you wanted. */
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--iunos-light-gray);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.7;
}

/* NEW: Style for the Stripe logo */
.stripe-legal-footer img {
    height: 18px; /* REDUCED: Logo is slightly smaller */
    width: auto;
    filter: grayscale(1) brightness(1.5); /* Make it monochrome to fit the design */
}

.stripe-legal-link {
    background: none;
    border: none;
    color: var(--iunos-light-gray);
    cursor: pointer;
    padding: 0;
    text-decoration: none; /* CHANGED: Underline removed */
    font-size: inherit;
    font-family: inherit;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* ADDED: Underline appears on hover for better usability */
.stripe-legal-link:hover {
    text-decoration: underline;
}
.stripe-legal-link:hover {
    color: var(--iunos-ivory);
}

/* --- Legal Modal (sits on top) --- */
.stripe-legal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 20, 0.85); /* Darker overlay */
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Must be higher than payment modal's z-index */
}

.stripe-legal-modal-content {
    background-color: #2a2b38;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #4a4a5e;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.6);
    width: 90%;
    max-width: 550px;
    position: relative;
    color: var(--iunos-ivory);
}

.stripe-legal-modal-content h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-align: center;
}

.stripe-legal-modal-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--iunos-light-gray);
    text-align: center; /* Center the text */
}

.stripe-legal-modal-content a {
    color: var(--iunos-rose-gold);
    text-decoration: none;
    border-bottom: 1px dotted var(--iunos-rose-gold);
}
.stripe-legal-modal-content a:hover {
    color: var(--iunos-ivory);
}

.stripe-legal-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
}
.stripe-legal-modal-close:hover {
    color: #fff;
}


/* --- Payment Modal Error Message Styling --- */
#modal-payment-message {
    color: #ffffff;
    background-color: #581d1d; /* A dark red background for errors */
    border: 1px solid #c53030;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    display: none; /* Hidden by default */
}

/* Make it visible only when it has content */
#modal-payment-message:not(:empty) {
    display: block;
}

/* --- Material Design Toast Notification --- */
#payment-toast {
    visibility: hidden; /* Hidden by default */
    min-width: 280px;
    background-color: #333; /* Dark, neutral background */
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 1080; /* Higher than Bootstrap modal backdrop */
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s, visibility 0.5s;
}

/* Style for when the toast is active/visible */
#payment-toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* Animate upwards */
}

/* Optional: A different style for errors (not red) */
#payment-toast.error {
    background-color: #2d3748; /* A calm, dark blue-gray for errors */
}

#modal-submit-button .spinner.hidden {
    display: none;
}

/* Optional: Add a little space between spinner and text when it's visible */
#modal-submit-button .spinner {
    margin-right: 8px;
}

.legal-text-container a {
    color: var(--iunos-ivory);
    text-decoration: none;
    border-bottom: 1px dotted var(--iunos-rose-gold);
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.legal-text-container a:hover {
    color: var(--iunos-rose-gold);
    border-bottom-color: var(--iunos-ivory);
}

.popular-badge {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}



/* --- Link on Token Page that opens the modal --- */
.recovery-link-container {
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}
.recovery-link-container a {
    color: var(--iunos-light-gray);
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px dotted var(--iunos-light-gray);
    transition: all 0.3s ease;
}
.recovery-link-container a:hover {
    color: var(--iunos-rose-gold);
    border-bottom-color: var(--iunos-rose-gold);
}


/* =================================================================
    RECOVERY MODAL STYLES
    - Leverages existing .match-modal styles for consistency.
================================================================= */

.match-modal-step {
    display: none;
}

.match-modal-step.active {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
}

#recovery-modal-overlay {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#recovery-modal-overlay.show {
    visibility: visible;
    opacity: 1;
}

.recovery-link-container {
    text-align: center;
    margin-top: 1rem;
}
.recovery-link-container a {
    color: var(--iunos-light-gray);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}
.recovery-link-container a:hover {
    color: var(--iunos-rose-gold);
}

.match-modal-content p {
    font-size: 1rem;
    color: var(--iunos-rose-gold);
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
    font-family: var(--font-body);
    text-align: center;
    opacity: 0.9;
}

/* --------------------------------------------------
 * UPDATED BUTTON STYLES FOR CONSISTENCY
 * This block ensures all buttons look and behave the same 
 * as the primary/secondary buttons in the invitation modal.
 * -------------------------------------------------- */
.btn-match-action {
    width: 100%;
    padding: 12px 20px;
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: 50px; /* Pill shape for all main actions */
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

/* PRIMARY Button Style (New User/Submit Action) */
.btn-match-action.btn-primary {
    background-color: var(--iunos-rose-gold);
    color: var(--iunos-deep-space);
    border: 2px solid var(--iunos-rose-gold);
}
.btn-match-action.btn-primary:hover {
    background-color: transparent;
    color: var(--iunos-rose-gold);
}

/* SECONDARY Button Style (Existing User/Back Action) */
.btn-match-action.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--iunos-warm-gray);
    color: var(--iunos-ivory);
}
.btn-match-action.btn-secondary:hover {
    background-color: var(--iunos-warm-gray);
    color: var(--iunos-ivory);
}

/* --------------------------------------------------
 * FORM CONTROL & TOKEN INPUT (PILL SHAPE CONFIRMED)
 * -------------------------------------------------- */
.match-modal-content .form-control {
    background-color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-warm-gray);
    color: var(--iunos-ivory);
    border-radius: 12px;
    padding: 12px 20px;
    font-family: var(--font-body);
    font-size: 1rem;
    width: 100%;
    transition: all 0.3s ease;
}

.match-modal-content .form-control:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(185, 146, 159, 0.3);
    border-color: var(--iunos-rose-gold);
}

.match-modal-content .form-control::placeholder {
    color: var(--iunos-light-gray);
    opacity: 1;
}

.match-modal-content select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B9929F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* Specific Pill shape for the token input field */
#modal-guest-match-token-input.form-control {
    border-radius: 50px;
    text-align: center;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--iunos-warm-gray);
    border-top-color: var(--iunos-rose-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#recovery-step-3-success h3.success {
    color: #2ecc71;
}

#recovery-modal-feedback.feedback-line {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    min-height: 1.2rem;
}

/* NOTE: This .recovery-token-container is for displaying the recovered token, 
   not the input field, but its styles are consistent with the theme. */
.recovery-token-container {
    position: relative;
    background-color: var(--iunos-deep-space);
    border: 1px solid var(--iunos-warm-gray);
    color: var(--iunos-ivory);
    border-radius: 12px;
    padding: 12px 20px;
    margin: 20px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    word-break: break-all;
    font-family: monospace;
    font-size: 0.9rem;
    text-align: center;
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
}

.recovery-token-container:hover {
    border-color: var(--iunos-rose-gold);
}

.recovery-token-container .copy-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--iunos-rose-gold);
    color: var(--iunos-ivory);
    padding: 8px 16px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.recovery-token-container.copied #recovery-success-token {
    opacity: 0;
    visibility: hidden;
}

.recovery-token-container.copied .copy-feedback {
    opacity: 1;
    visibility: visible;
}

.match-modal-content input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(75%) sepia(8%) saturate(1478%) hue-rotate(298deg) brightness(88%) contrast(85%);
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.match-modal-content input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


/* Hide default arrows in WebKit browsers (Chrome, Safari, Edge, etc.) */
.match-modal-content input[type=number]::-webkit-outer-spin-button,
.match-modal-content input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

/* Hide default arrows in Firefox and apply your custom style */
.match-modal-content input[type=number] {
    -moz-appearance: textfield; 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%234A4A52'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 20px 20px;
}



/* --- Token Download Icon (For Recovery Modal, mirrors Splash Screen) --- */
/* (This block was already fine, just moving it for better flow) */
.token-download-icon {
    text-decoration: none;
    color: var(--iunos-rose-gold); 
    margin-top: 10px; 
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.token-download-icon:hover {
    opacity: 1;
}


/* =================================================================
   FINAL UNIFIED MODAL STYLES (MATCH & RECOVERY)
   ================================================================= */

/* 1. UNIFIED TOKEN INPUT: Full-width, correct height, pill-shaped, and proper spacing */
#match-modal-step-2 .token-input-field,
#recovery-step-2-guest-token .token-input-field {
    width: 100%;
    height: 50px; /* Sets explicit height to match buttons */
    padding: 12px 20px;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 1.5rem; /* Space between input and buttons */
    border: 1px solid var(--iunos-warm-gray); /* Ensures consistent border */
}

/* 2. UNIFIED BUTTON CONTAINER: Defines spacing for all button groups */
.match-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* This is the smaller space between buttons */
}

/* --- Style for the primary button on the recovery start screen --- */
#modal-select-purchaser-btn {
    background-color: var(--iunos-rose-gold);
    color: var(--iunos-deep-space);
    border: 2px solid var(--iunos-rose-gold);
}

#modal-select-purchaser-btn:hover {
    background-color: transparent;
    color: var(--iunos-rose-gold);
}

/* --- Style for empty/unselected modal form fields (Corrected) --- */

/* For the dropdown */
.match-modal-content select.form-control {
    color: var(--iunos-light-gray);
}
.match-modal-content select.form-control:focus {
    color: var(--iunos-ivory);
}

/* For the date input */
/* This makes the "tt.mm.jjjj" text gray when empty */
.match-modal-content input[type="date"].form-control:invalid {
    color: var(--iunos-light-gray);
}
/* This makes the actual date text white once selected */
.match-modal-content input[type="date"].form-control:valid {
    color: var(--iunos-ivory);
}

/* =================================================================
   STYLES: De-emphasized FAQ for Token & Aligned Pages
   ================================================================= */

/* Target the main heading of this specific FAQ section */
.faq-section-aligned .section-title {
    /* Reduce prominence from the main page headline */
    font-size: 1.75rem; /* Smaller than the default 2.8rem */
    color: var(--iunos-rose-gold); /* Softer, on-brand color instead of bright white */
    font-weight: 600;
    margin-bottom: 2.5rem;
}

/* Target the accordion buttons (the questions) within this section */
.faq-section-aligned .custom-faq .accordion-button {
    color: var(--iunos-ivory); /* Keep questions readable */
    font-size: 1.1rem; /* Slightly smaller than default */
    font-weight: 500; /* Less bold */
}

/* Keep the hover/active state color for interactivity */
.faq-section-aligned .custom-faq .accordion-button:not(.collapsed) {
    color: var(--iunos-rose-gold);
}

/* Target the accordion body (the answer text) */
.faq-section-aligned .custom-faq .accordion-body {
    color: var(--iunos-light-gray); /* Use light gray for less contrast */
    font-size: 1rem;
    line-height: 1.6;
}

/* Ensure the border is consistent with the de-emphasized look */
.faq-section-aligned .custom-faq .accordion-item {
    border-bottom: 1px solid var(--iunos-warm-gray);
}

.token-entry-wrapper #token-form {
    margin-top: 70px; /* Adjust this value as needed. Default was ~20-25px. */
}


/* =================================================================
   Refactored Inline Styles for Token Page
   ================================================================= */

/* --- Main Layout & FAQ Spacing --- */

/* Sets the max-width for the main token entry area */
/* NOTE: Your stylesheet already sets this to 480px. This rule preserves the 800px from the old inline style. You may want to delete this rule if you prefer the 480px width. */
.token-entry-section .token-entry-wrapper {
    max-width: 800px;
}

/* Creates space between the token form and the FAQ section */
.faq-section-aligned {
    padding-top: 100px;
}

/* Sets the max-width for the FAQ content area */
.faq-section-aligned .container {
    max-width: 800px;
}


/* --- Match & Recovery Modal Styles --- */

/* Styles the secondary "Existing User" button */
#match-existing-user-btn {
    background-color: transparent;
    border: 2px solid var(--iunos-warm-gray);
    color: var(--iunos-ivory);
}

/* Centers the text in the token input field */
#existing-user-token-input {
    text-align: center;
}

/* Styles the submit button in the match modal */
#submit-match-tokens-btn {
    margin-top: 15px;
    width: 100%;
}

/* Centers the spinner in the recovery "waiting" step */
#recovery-step-2-guest-waiting .spinner {
    margin: 2rem auto;
}