/* =========================================
   RESET & VARIABLES
   ========================================= */
   * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

   /* --- CUSTOM SCROLLBAR (Global) --- */

/* --- CUSTOM SCROLLBAR (Global) --- */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #6a9eb5 #0f172a;
}

/* Existing Atmosphere Font */
@font-face {
    font-family: 'Atmosphere';
    src: url('../fonts/Atmosphere-Regular.eot');
    src: url('../fonts/Atmosphere-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Atmosphere-Regular.woff2') format('woff2'), 
         url('../fonts/Atmosphere-Regular.woff') format('woff'), 
         url('../fonts/Atmosphere-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Gotham Light */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham Light/Gotham Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Gotham Regular (Book) */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham Regular/Gotham Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Gotham Medium */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham Medium/Gotham Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Gotham Bold */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham Bold/Gotham Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Gotham Black */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham Black/Gotham Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Usage */
body {
    font-family: 'Atmosphere';
    font-weight: 400;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;  /* Width of vertical scrollbar */
    height: 10px; /* Height of horizontal scrollbar */
}

/* The Background (Track) */
::-webkit-scrollbar-track {
    background: #0f172a; /* Your App's Dark Background */
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* The Moving Part (Thumb) */
::-webkit-scrollbar-thumb {
    background-color: #6a9eb5; /* The Muted Blue from your buttons */
    border-radius: 5px;        /* Soft rounded edges */
    border: 2px solid #0f172a; /* Creates a small padding effect */
}

/* Hover State */
::-webkit-scrollbar-thumb:hover {
    background-color: #2dd4bf; /* Bright Teal on interaction */
}

   :root {
       --brand-navy: #1f3a4e;
       --brand-teal: #6d9cb3;
       --brand-teal-dark: #588296;
       --text-white: #ffffff;
       --font-serif: 'Cinzel', serif;
       --font-script: 'Kaushan Script';
       --font-sans: 'Open Sans', sans-serif;
   }
   
   body, html {
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%;
    font-family: var(--font-sans);
    background-color: transparent; /* CHANGED: Was #000. Transparent lets bg show through. */
    color: var(--text-white);
}
   
   /* =========================================
      BACKGROUNDS
      ========================================= */
/* Core Background Layer */
.site-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out; /* Smooth fade when switching */
}

/* Class added when a path is active */
.bg-active {
    filter: brightness(0.9); /* Slightly darken to keep text readable */
}

/* Default state (e.g., Age Gate) */
.bg-default {
    background-color: #0f172a; /* Fallback solid color */
}
   .bg-pacific { background-image: url('../assets/bg.png'); } /* Mountains */
   .bg-atlantic { background-image: url('../assets/bg.png'); } /* Lighthouse */
   
   #app-wrapper {
    position: relative; /* ADDED: Establishes stacking context */
    z-index: 2;         /* ADDED: Puts content strictly above the background */
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
}
   .app-content { flex: 1; position: relative; width: 100%; }
   
   /* =========================================
      TYPOGRAPHY
      ========================================= */
   .brand-logo-text {
       font-family: var(--font-serif);
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: 26px;
       margin: 0;
       text-shadow: 0 2px 4px rgba(0,0,0,0.5);
   }
   .brand-logo-text.small { font-size: 20px; }
   
   .brand-script-text {
       font-family: var(--font-script);
       font-size: 32px;
       margin: 5px 0 0 0;
       font-weight: 400;
       transform: rotate(-3deg);
       text-shadow: 0 2px 4px rgba(0,0,0,0.5);
   }
   .brand-script-text.large { font-size: 42px; margin-bottom: 10px; }
   .brand-script-text.white-shadow { text-shadow: 0 0 10px rgba(255,255,255,0.4); }
   
   /* The "ENTER TO WIN" Typography */
   .big-impact-text {
       font-family: var(--font-sans);
       font-weight: 800;
       font-size: 32px;
       line-height: 0.9;
       text-transform: uppercase;
       margin: 20px 0;
       text-shadow: 0 2px 10px rgba(0,0,0,0.5);
   }
   .huge-win { font-size: 60px; display: block; }
   .big-impact-text.small-ver { font-size: 24px; margin: 10px 0; }
   .big-impact-text.small-ver .huge-win { font-size: 48px; }
   
   /* =========================================
      COMPONENTS: MODALS & FORMS
      ========================================= */
   .center-layout {
       display: flex; flex-direction: column;
       align-items: center; justify-content: center;
       min-height: 100vh;
   }
   

   .modal-card {
       background-color: #1e4c6d;
       width: 100%; max-width: 340px;
       border-radius: 12px;
       padding: 21px 25px;
       text-align: center;
       box-shadow: 0 15px 35px rgba(0,0,0,0.6);
       border: 1px solid rgba(255,255,255,0.1);
   }
   
   .card-title {
       font-family: 'Arial';
       font-size: 19px; margin: 0 0 10px 0;
       letter-spacing: 1px;
   }
   .card-sub {
       font-size: 10px; font-weight: 700;
       text-transform: uppercase; margin-bottom: 20px;
       line-height: 1.5; opacity: 0.9;
   }
   
   /* Inputs */
   .input-label {
       display: block; text-align: left;
       font-size: 9px; font-weight: 800;
       margin-bottom: 4px; margin-top: 10px;
       text-transform: uppercase;
   }
   
   .input-teal {
       background-color: var(--brand-teal);
       border: none; border-radius: 4px;
       color: white; font-family: var(--font-sans);
       font-weight: 700; text-align: center;
       padding: 12px 0; font-size: 14px;
       outline: none;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
   }
   .input-teal::placeholder { color: rgba(255,255,255,0.7); }
   .input-teal.small { width: 30%; }
   .input-teal.wide { width: 100%; text-align: left; padding-left: 15px; }
   
   .date-row { display: flex; justify-content: space-between; margin-bottom: 15px; }
   .select-wrapper { position: relative; }
   
   /* Buttons */
   .btn-solid {
       width: 100%; background-color: var(--brand-teal);
       color: white; border: none; padding: 15px;
       font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
       border-radius: 4px; cursor: pointer; margin-top: 15px;
       box-shadow: 0 4px 10px rgba(0,0,0,0.3);
       transition: transform 0.1s;
   }
   .btn-solid:active { transform: scale(0.98); }
   .btn-wide { margin: 5px auto; display: block; }
   .btn-link {
       background: none; border: 1px solid rgba(255,255,255,0.3);
       color: white; padding: 8px 20px; border-radius: 20px;
       font-size: 10px; font-weight: bold; margin-top: 15px;
       cursor: pointer;
   }
   
   .terms-check { font-size: 8px; margin-top: 15px; line-height: 1.4; }
   .error-msg { color: #ff8e8e; font-size: 12px; margin: 5px 0; font-weight: bold; min-height: 18px;}
   
   /* =========================================
      PAGES
      ========================================= */
   .page { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
   .hidden { display: none !important; }
   
   /* Video */
   .video-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 50; }
   .video-wrapper video { width: 100%; height: 100%; object-fit: cover; }
   .skip-btn { position: absolute; bottom: 30px; right: 20px; z-index: 51; background: transparent; border: 1px solid white; color: white; padding: 5px 15px; border-radius: 20px; }
   
   /* Split Choice */
   .no-padding { padding: 0 !important; }
   .split-container {  
    height: 100vh;  
    width: 100vw;  /* Changed to vw to ensure full width */
    position: fixed; /* Changed to fixed to stay pinned to the viewport edges */
    top: 0;
    left: 0;
    overflow: hidden;  
    z-index: 1;
    padding-top: 4.32em;
}
   .split-half {
       position: absolute; width: 100%; height: 50%;
       background-size: cover; background-position: center;
       display: flex; align-items: center; justify-content: center;
       cursor: pointer;
   }
/* Update these specific classes to use the single bg and correct positioning */
.top-pacific { 
    top: 0; 
    background-image: url('../assets/bg.png'); 
    background-position: top center; 
    align-items: flex-end; 
    padding-bottom: 60px; 
}

.bottom-atlantic { 
    bottom: 0; 
    background-image: url('../assets/bg.png'); 
    background-position: bottom center; 
    align-items: flex-start; 
    padding-top: 60px; 
}
   .split-half::before {
       content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
       background: rgba(0,0,0,0.2); transition: background 0.3s;
   }
   .split-half:hover::before { background: rgba(0,0,0,0); }
   
   .ocean-label { z-index: 5; text-align: center; position: relative; }
   .ocean-script { font-family: var(--font-script); font-size: 48px; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
   
   .arrow-up { width: 20px; height: 20px; border-top: 2px solid white; border-left: 2px solid white; transform: rotate(45deg); margin: 0 auto; }
   .arrow-down { width: 20px; height: 20px; border-bottom: 2px solid white; border-right: 2px solid white; transform: rotate(45deg); margin: 0 auto; }
   
   .center-logo-cluster {
       position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
       z-index: 10; text-align: center; pointer-events: none;
   }
   .deco-line { width: 100px; height: 1px; background: white; margin: 5px auto; opacity: 0.8; }
   
   /* Landing Page ("Enter Here") */
   .landing-layout {
       display: flex; flex-direction: column; text-align: center;
       min-height: 100vh; padding-bottom: 80px;
   }
   .landing-header { padding-top: 40px; }
   .landing-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
   .landing-desc { font-size: 14px; line-height: 1.6; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
   
   /* =========================================
      FOOTER
      ========================================= */
   .app-footer {
       background-color: #1e4c6d;
       padding: 20px; text-align: center;
       display: flex; flex-direction: column; gap: 10px;
       align-items: center; border-top: 1px solid rgba(255,255,255,0.1);
   }
   .social-icons { display: flex; gap: 15px; }
   .icon-box {
       width: 30px; height: 30px; background: white; color: var(--brand-navy);
       display: flex; align-items: center; justify-content: center;
       font-weight: bold; border-radius: 4px; cursor: pointer;
   }
   .footer-legal { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-top: 5px; }
   
   :root {
    --hud-bg: rgba(15, 23, 42, 0.95); /* Slightly darker for better contrast */
    --hud-border: rgba(255, 255, 255, 0.15);
    --text-muted: #64748b;
    --text-bright: #ffffff;
    --accent: #38bdf8;
    --danger: #f43f5e;
}

#admin-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 54px;
    background: var(--hud-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hud-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px; /* Standard padding */
    z-index: 99999;
    font-family: system-ui, -apple-system, sans-serif;
    transition: all 0.3s ease;
}

/* --- SECTIONS --- */
.toolbar-section { 
    display: flex; 
    align-items: center; 
    height: 100%; 
    gap: 12px; 
}

/* Center Section: The critical part for fitting content */
.toolbar-section.center { 
    flex: 1; 
    justify-content: center; 
    padding: 0 10px;
    /* We keep overflow auto as a safety net, but aim to fit everything */
    overflow-x: auto; 
    scrollbar-width: none; 
    mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
}
.toolbar-section.center::-webkit-scrollbar { display: none; }

/* --- ICONS --- */
.admin-brand { display: flex; align-items: center; color: var(--danger); flex-shrink: 0; }
.lab-icon { width: 20px; height: 20px; }

/* --- DROPDOWN GROUPS --- */
.control-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 80px; /* Default desktop width */
    transition: all 0.2s ease;
}

.control-group label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: -2px;
    white-space: nowrap;
}

/* The Magic Select Styling */
.select-wrapper { position: relative; }
.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--text-bright);
    font-size: 13px;
    font-weight: 600;
    padding: 2px 14px 2px 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    width: 100%;
    /* Custom Arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2364748b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 8px auto;
}
.select-wrapper select option { background: #0f172a; color: white; }

.divider {
    width: 1px;
    height: 24px;
    background: var(--hud-border);
    margin: 0 8px;
    flex-shrink: 0;
}

/* --- BUTTONS --- */
.magic-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #334155;
    border: 1px solid var(--hud-border);
    color: var(--text-bright);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s;
    white-space: nowrap;
}
.magic-btn:hover { background: #475569; border-color: #94a3b8; }
.magic-btn svg { width: 14px; height: 14px; color: var(--accent); }

.close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    margin-left: 4px;
    flex-shrink: 0;
}
.close-btn:hover { color: var(--danger); }
.close-btn svg { width: 18px; height: 18px; }

/* --- STATES --- */
.disabled-state { opacity: 0.3; pointer-events: none; filter: grayscale(1); }
.desktop-text { display: inline-block; }

/* ------------------------------------------------ */
/* --- MOBILE OPTIMIZATION (< 500px) --- */
/* ------------------------------------------------ */

@media (max-width: 500px) {
    #admin-toolbar {
        padding: 0 8px; /* Reduce container padding */
        height: 50px; /* Slightly tighter height */
    }

    /* 1. Hide the "Page", "Path", "View" Labels to save space */
    .control-group label {
        display: none;
    }

    /* 2. Allow groups to shrink and share space equally */
    .control-group {
        min-width: auto; /* Remove fixed width constraint */
        flex: 1; /* Distribute space */
        align-items: center; /* Center align text */
    }

    /* 3. Adjust Select box alignment since labels are gone */
    .select-wrapper select {
        font-size: 12px; /* Slightly smaller text */
        text-align: center; /* Center text in the open space */
        background-position: right 0px center; /* Keep arrow tight */
        padding-right: 12px;
    }

    /* 4. Tighter Spacing */
    .toolbar-section { gap: 6px; }
    .toolbar-section.center { padding: 0 4px; }
    .divider { margin: 0 4px; height: 18px; }

    /* 5. Icon Adjustments */
    .desktop-text { display: none; } /* Hide "Auto Fill" text */
    .magic-btn { padding: 8px; } /* Square button for icon */
    .lab-icon { width: 18px; height: 18px; }
}
   /* Split Choice Page - Using single bg.png */
.split-page {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: none; /* Ensure no global background interferes */
}

.half-section {
    position: absolute;
    width: 100%;
    height: 50%;
    background-image: url('../assets/bg.png');  
    /* This ensures the image is sized based on the FULL screen height, not the 50% box */
    background-size: 100vw 100vh; 
    background-repeat: no-repeat;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: filter 0.3s ease;
    z-index: 1;
}

/* TOP HALF: Show only the top part of bg.png */
.top-half {
    top: 0;
    background-position: top center; /* Aligns to the mountain section */
    justify-content: flex-end;
    padding-bottom: 80px;
}

/* BOTTOM HALF: Show only the bottom part of bg.png */
.bottom-half {
    bottom: 0;
    background-position: bottom center; /* Aligns to the lighthouse section */
    justify-content: flex-start;
    padding-top: 80px;
}

.half-section:hover {
    filter: brightness(1.1);
}

/* Ensure the center logo cluster stays on top */
.center-logo-cluster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    pointer-events: none;
}

/* Update the brush font for the Ocean Names */
.ocean-script {
    font-size: 64px; /* Increased size per request */
    margin: 0;
    line-height: 1;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    letter-spacing: 2px;
}

/* Fix alignment: Labels need to be centered in their respective flex halves */
.ocean-label {
    z-index: 5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between text and arrow */
    margin: 0 auto;
}

/* SVG Arrow Styling */
.arrow-icon {
    width: 40px;
    height: 40px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Correct the padding to push content towards the center */
.top-pacific { 
    background-position: top center; 
    align-items: flex-end; 
}

.bottom-atlantic { 
    background-position: bottom center; 
    align-items: flex-start; 
    padding-top: 100px; /* Adjust to sit perfectly below the logo glow */
}

#province {
    /* 1. Box Model & Layout */
    width: 100%;
    height: 50px;
    padding: 0 15px;
    box-sizing: border-box;
    text-align: center;

    /* 2. Visual Style (The Solid Block Look) */
    background-color: #6a9eb5; /* Muted Blue-Grey */
    color: #ffffff;
    border: none;
    border-radius: 4px;

    /* 3. Typography */
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    
    /* 4. Reset Native Browser Styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;

    /* 5. Custom Arrow (Encoded SVG) */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
}

/* Ensure the dropdown list itself is readable on all browsers */
#province option {
    background-color: #1e2f3d; /* Dark Navy */
    color: #ffffff;
}

/* --- LANDING PAGE LAYOUT --- */
.landing-layout {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center;
    min-height: 100vh;      /* Takes full screen height */
    padding: 0 20px;        /* Side padding only */
    box-sizing: border-box;
}

.landing-content {
    width: 100%;
    max-width: 360px;       /* Restrict width for mobile feel */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* This handles the "weird spacing" by controlling flow explicitly */
    gap: 0; 
}

/* --- HERO IMAGE --- */
.landing-hero-image {
    width: 100%;
    height: auto;
    display: block;
    /* KEY FIX: Pulls the content below it UP to close the gap */
    margin-bottom: -25px; 
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* --- TEXT --- */
.landing-desc {
    color: #ffffff;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    /* Tight margins to sit between Image and Buttons */
    margin: 10px 0 25px 0; 
    padding: 0 10px;
}

/* --- BUTTON GROUP --- */
.landing-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px; /* Close gap between the two buttons */
}

/* --- BUTTON STYLING --- */
.btn-solid.btn-wide {
    width: 100%;
    background-color: #6a9eb5; /* Teal Blue */
    color: white;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.btn-solid.btn-wide:hover {
    background-color: #7abcc9;
    transform: translateY(-2px);
}

/* --- FORM PAGE LAYOUT --- */
#page-form .center-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-top: 40px; /* Space for the header image */
}

/* --- HEADER IMAGE --- */
.form-header-img img {
    width: 100%;
    max-width: 280px; /* Kept smaller so form is priority */
    /* margin-bottom: 20px; */
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* --- FORM CONTAINER (The Blue Card) --- */
.form-container {
    background-color: #1e4c6d; /* Your requested background color */
    padding: 30px 25px;        /* Internal spacing */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;               
    margin-top: 10px;
}

/* Ensure the banner sits nicely inside the padding */
.announcement-banner {
    background-color: #6a9eb5; /* Lighter Teal */
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 5px; /* Spacing before instructions */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.banner-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.banner-date {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* --- INSTRUCTIONS --- */
.form-instruction {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* --- INPUT GROUPS --- */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.input-group label {
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: 2px; /* Slight indent to align with text in box */
}

/* Using your existing .input-teal class, just ensuring width */
.input-teal.wide {
    width: 100%;
    text-align: left; /* Ensure text starts at left */
    padding-left: 15px;
}

/* --- FOOTER ELEMENTS --- */
.terms-text {
    text-align: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Secondary Button (Terms) */
.btn-secondary {
    margin-top: 10px; /* Space between Submit and Terms */
    opacity: 0.9;
    font-size: 12px; /* Slightly smaller than Submit */
}

/* --- HEADER IMAGES --- */
.logo-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Space between the two logos */
    margin-bottom: 20px; /* Push the card down */
}

/* Main "Two Oceans" Logo */
.brand-main-logo {
    width: 200px; /* Adjust width to preference */
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Script "Choose Your Ocean" Logo */
.brand-script-logo {
    width: 260px; /* Slightly wider than the main logo looks best */
    height: auto;
    display: block;
    margin-top: -5px; /* Pull it up slightly closer if needed */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* --- TERMS MODAL OVERLAY --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align top for better scroll on mobile */
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto; /* Allows modal itself to scroll if taller than screen */
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* --- MAIN CONTAINER --- */
.terms-container {
    background: #0f172a;
    width: 100%;
    max-width: 600px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Keeps it within viewport */
    margin-top: 20px;
}

/* --- HEADER --- */
.terms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: #1e293b;
    border-radius: 12px 12px 0 0;
}

.terms-header h2 {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
}

.btn-close-modal {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 5px;
}
.btn-close-modal svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
.btn-close-modal:hover { color: #f43f5e; }

/* --- TABLE OF CONTENTS (Sticky) --- */
.terms-toc {
    display: flex;
    gap: 10px;
    padding: 15px 20px; /* Increased padding for better visibility */
    overflow-x: auto; /* Horizontal scroll */
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
    
    /* Scrollbar styling for this section specifically */
    scrollbar-width: thin; 
    scrollbar-color: #6a9eb5 #0f172a;
    
    /* Ensure it doesn't get crushed */
    flex-shrink: 0; 
    min-height: 50px; /* Force height so buttons aren't cut off */
    align-items: center;
}

/* Chrome/Safari Scrollbar for TOC */
.terms-toc::-webkit-scrollbar { 
    height: 4px; /* Thin scrollbar at bottom */
}
.terms-toc::-webkit-scrollbar-track { background: #0f172a; }
.terms-toc::-webkit-scrollbar-thumb { background: #6a9eb5; border-radius: 4px; }

/* The Pill Buttons */
.terms-toc a {
    color: #ffffff; /* Brighter text for visibility */
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 16px; /* Larger hit area */
    background: rgba(106, 158, 181, 0.2); /* Lighter background for contrast */
    border: 1px solid #6a9eb5; /* Teal border to make it pop */
    border-radius: 20px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.terms-toc a:hover { 
    background: #6a9eb5; 
    color: #fff; 
    box-shadow: 0 0 10px rgba(106, 158, 181, 0.4); /* Glow effect */
}
/* --- CONTENT AREA --- */
.terms-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    color: #cbd5e1;
    font-family: sans-serif;
    font-size: 13px;
    line-height: 1.6;
    scroll-behavior: smooth;
}

.terms-title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}
.terms-title span { display: block; font-size: 14px; color: #6a9eb5; margin-top: 5px; text-transform: uppercase; letter-spacing: 1px; }

.terms-section { margin-bottom: 30px; scroll-margin-top: 100px; /* Offset for sticky header */ }
.terms-section h3 { color: #fff; font-size: 15px; margin-bottom: 10px; border-left: 3px solid #6a9eb5; padding-left: 10px; }
.terms-section ul, .terms-section ol { padding-left: 20px; margin-bottom: 10px; }
.terms-section li { margin-bottom: 8px; }

/* Prize Box Highlight */
.prize-box {
    background: rgba(106, 158, 181, 0.1);
    border: 1px solid #6a9eb5;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}
.prize-value { color: #6a9eb5; font-weight: 800; margin-top: 10px; text-transform: uppercase; }

/* --- FOOTER --- */
.terms-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: #1e293b;
    border-radius: 0 0 12px 12px;
}


.app-footer {
    background-color: #1e3a4d; /* Navy footer matching design */
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-brand-img {
    width: 200px; /* Explicit width for logo.png */
    height: auto;
    display: block;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.icon-box {
    display: flex;
    width: 44px; /* Container size */
    height: 44px;
    background: white; /* White square background as seen in design */
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    color: #1e3a4d; /* Icon color matches footer bg */
    transition: transform 0.2s;
}

.icon-box svg {
    width: 28px; /* Force SVG visibility */
    height: 28px;
    display: block;
}

.footer-legal {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* New Changes */
.ocean-script{
    font-family: 'Atmosphere';
    font-weight: 400 !important; /* Forces the browser to stop faking boldness */
    -webkit-font-smoothing: antialiased; /* Sharpens the textured edges */
    -moz-osx-font-smoothing: grayscale;
    font-size: 76px;
}

.btn-solid.btn-wide, .btn-secondary{
    background: #69a1a7;
}

.app-footer{
    background: #1e4c6d;
}

.input-teal.wide{
    background: #69a1a7;
}

.announcement-banner{
    background: #69a1a7;
    position: relative;
    top: -3em;
    margin-bottom: -3em;
}

.btn-solid{
    background: #6299a1;
}

.input-teal.small, #province{
    background: #6299a1;
}

.form-instruction{
    letter-spacing: 2px;
}

/* Ensure the hidden class works for your JS toggle */
.hidden {
    display: none !important;
  }
  
  /* Modal wrapper behavior */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  /* The parent container is now a flex column */
  .terms-container {
    background-color: rgba(28, 69, 99, 0.95);
    color: #ffffff;
    font-family: 'Open Sans', 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    width: 100%;
    max-width: 350px; 
    max-height: 80vh; 
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column; /* Stacks scroll area and footer */
    overflow: hidden; /* Keeps the rounded corners intact */
  }
  
  /* Inner area that handles the scrolling */
  .terms-scroll-area {
    padding: 30px 25px 15px 25px;
    overflow-y: auto;
    flex: 1; /* Takes up all available height above the footer */
  }
  
  /* Typography elements */
  .terms-title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
  }
  
  .terms-scroll-area p, .terms-section {
    margin-bottom: 15px;
  }
  
  .terms-scroll-area ul, 
  .terms-scroll-area ol {
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 20px;
  }
  
  .terms-scroll-area li {
    margin-bottom: 4px;
  }
  
  .terms-scroll-area ul ul {
    margin-top: 4px;
  }
  
  /* Fixed Footer & Button styling matching your image */
  .terms-footer {
    padding: 15px 25px 25px 25px;
    background-color: transparent;
    flex-shrink: 0; /* Prevents the footer from squishing */
  }
  
  .btn-back {
    background-color: #1765c0; /* Blue matching your screenshot */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    width: 100%;
    font-family: 'Open Sans', 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .btn-back:hover {
    background-color: #12519c; /* Slightly darker on hover */
  }
  
  /* Custom scrollbar applied only to the scrollable area */
  .terms-scroll-area::-webkit-scrollbar {
    width: 6px;
  }
  .terms-scroll-area::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }
  .terms-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
  }

  .drink-repson{
    letter-spacing: 2px;
    margin-bottom: -.5em;
    font-size: 14px;
  }

  .split-half {
    position: absolute; 
    width: 100%; 
    height: 50%;
    
    /* 1. Stop the repeating */
    background-repeat: no-repeat; 
    
    /* 2. Force the background to base its size on the full viewport 
       so the top and bottom halves align perfectly as one image */
    background-size: 100vw 100vh; 
    
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    transition: filter 0.3s ease;
}

/* New changes March, 2026 */
.brand-script-logo{
    width: 350px;
}

.brand-main-logo{
    width: 250px;
}

.brand-script-text {
    font-family: 'Atmosphere';
    max-width: 250px;
    margin: 0 auto;
    font-size: 65px;
    color: white; 
    zoom: 1;
    line-height: 56px;
    /* Stacked shadows: 1 sharp dark edge, 1 deep soft blur */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 
                 0px 0px 15px rgba(0, 0, 0, 0.7) !important;
}

.ocean-script-pacific {
    margin-top: -0.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 
                 0px 0px 12px rgba(0, 0, 0, 0.6) !important;
}

.ocean-script-atlantic {
    margin-bottom: 1em;
    /* Pure black with high spread to contrast the lower sky */
    text-shadow: 2px 2px 4px rgb(0, 0, 0), 
                 0px 0px 12px rgba(0, 0, 0, 0.8) !important;
}


.logo-center-m{
    margin-top: -4em;

}


.sub-heading-choose{
    font-family: 'Gotham', sans-serif;
    font-weight: 500; /* This will trigger Gotham Black */
    font-size: 28px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.577), 
                 0px 0px 6px rgba(0, 0, 0, 0.098) !important;
}

.center-logo-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}


.announce-winners-text{
    font-size: 14px;
}

.banner-date, .landing-desc, .terms-text{
    font-family: 'Gotham';
}

.announce-date-text{
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 2px;
}

.form-instruction{
    font-family: 'Gotham';
    font-weight: 300;
    margin-top: -1px;
    
}

.input-teal{
    font-family: 'Gotham';
    color: #ffffff !important;
    margin-top: 5px;
}

.terms-text{
    font-weight: 300;
    font-size: 11px;
    font-family: 'Gotham';
    line-height: 13px;
}

.submit-btn-style{
    height: 80px;
    font-size: 20px;
    font-family: 'Gotham';
    font-weight: 500;
}

#terms-modal p, .terms-section, .terms-title{
    font-family: 'Gotham';
    font-weight: 300;
}

.terms-title{
    font-weight: 500;
}

.card-sub{
    font-family: 'Gotham';
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
}

.date-row input{
    font-size: 20px;
}

.select-wrapper #province{
    font-size: 20px;
}

.select-wrapper #province{
    font-size: 18px;
    font-weight: 300;
}

.enter-home-btn{
    font-size: 18px;
    font-weight: 300;
}

.arrow-down-rotated{
    transform: rotate(180deg);
}

.ocean-script-atlantic-container{
    margin-top: -6em;
}

.ocean-script-pacific-container{
    margin-top: 4em;
}

@media only screen and (max-width: 380px){
    .ocean-script-atlantic-container{
        margin-top: -4em;
    }
    
    .ocean-script-pacific-container{
        margin-top: 2em;
    }
}

@media only screen and (min-width: 385px) and (max-width: 390px) {
    .ocean-script-atlantic-container {
        margin-top: -8em;
    }
    
    .ocean-script-pacific-container {
        margin-top: 7em;
    }
}

@media only screen and (min-width: 420px) and (max-width: 440px) {
    .ocean-script-atlantic-container {
        margin-top: -11em;
    }
    
    .ocean-script-pacific-container {
        margin-top: 10em;
    }
}

/* --- AUDIO TOGGLE STYLES --- */
.audio-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999; /* Keeps it above everything */
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.audio-toggle img {
    width: 35px; /* Adjust size as needed */
    height: auto;
    transition: all 0.3s ease;
}

/* Creative "OFF" state using CSS */
.audio-toggle.muted::after {
    content: '';
    position: absolute;
    width: 110%;
    height: 3px;
    background-color: #ef4444; /* Red slash */
    transform: rotate(-45deg);
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.audio-toggle.muted img {
    opacity: 0.6;
    filter: grayscale(100%);
}

/* --- MOBILE AUDIO ICON ADJUSTMENTS --- */
@media only screen and (max-width: 768px) {
    .audio-toggle {
        top: 15px;
        right: 15px;
        padding: 4px;
    }

    .audio-toggle img {
        width: 28px; /* Scales down slightly so it doesn't dominate the corner */
    }

    /* Adjust the custom slash so it stays perfectly aligned on the smaller icon */
    .audio-toggle.muted::after {
        height: 2px; /* Thinner slash for a smaller icon */
    }
}

/* If you want to target that very specific iPhone width again */
@media only screen and (max-width: 390px) {
    .audio-toggle {
        top: 12px;
        right: 12px;
    }
    
    .audio-toggle img {
        width: 24px; /* Even smaller for very narrow screens */
    }
}

/* --- DYNAMIC BACKGROUND VIDEO --- */
#bg-video-element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ensures the video fills the screen without stretching */
    z-index: -1; /* Keeps it behind all your text and forms */
    pointer-events: none; /* Prevents users from accidentally clicking the video */
    transition: opacity 0.5s ease;
}

#bg-video-element.hidden {
    display: none;
    opacity: 0;
}

.enter-here-large{
    margin-top: 3.5em;
    height: 66px;
    width: 260px !important;
    font-size: 17px !important;
    font-family: 'Gotham';
}

.terms-landing-btn{
    height: 40px;
    line-height: 12px;
    width: 260px !important;
    font-family: 'Gotham';
    font-weight: 300;
    margin-top: 0em;
}

.getawaytitle{
    padding: 0;
    margin-bottom: -1em;
    margin-top: -0.2em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    font-size: 28px;

}

#landing-dynamic-text{
    margin-top: -1em;
    font-size: 18px;
    margin-bottom: 2.5em;
}

.thanksLargerLogo{
    zoom: 1.2;
}

.getAwayThanks{
    margin-bottom: 1em;
    margin-top: -1em;
    font-size: 27px;
}

.form-instruction{
    margin-bottom: -.2em;
}

.back-btn-thanks{
    height: 65px;
    font-size: 20px;
    font-weight: 400;
    width: 220px;
    margin: 0 auto;
}
#admin-toolbar{
    display: none !important;
}