/* ========================================== */
/* HIDE DEFAULT BROWSER SCROLLBAR */
/* ========================================== */

/* 1. For Chrome, Safari, and newer versions of Edge */
html::-webkit-scrollbar {
    display: none;
}

/* 2. For Firefox and IE/Legacy Edge */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    overflow-y: scroll; /* Ensures scrolling still works */
}

body {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */
}



body {
  /* Standard property */
  user-select: none;
  
  /* Vendor prefixes for broader compatibility */
  -webkit-user-select: none; /* Safari, Chrome, Opera, Edge */
  -ms-user-select: none;     /* IE 10+ */
  -moz-user-select: none;    /* Firefox */
  -khtml-user-select: none;  /* Konqueror */

  /* Additional mobile/touch interactions */
  -webkit-touch-callout: none; /* iOS Safari context menu */
}

/* ─── NAVBAR ──============================================================================ */
        .navbar {
            background: rgba(253, 253, 252, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-subtle);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .brand-logo-slot {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1.2rem;
            box-shadow: 0 4px 10px rgba(40, 151, 201, 0.2);
            flex-shrink: 0;
        }

        .brand-name {
            font-size: 1.4rem;
            color: var(--ink-dark);
            letter-spacing: 0.02em;
            margin-left: 0.5rem;
        }

        .nav-link {
            font-size: 1rem;
            color: var(--ink-light) !important;
            padding: 0.5rem 1rem !important;
            transition: color 0.3s ease;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--brand-blue) !important;
        }

        .nav-cta-link {
            color: var(--brand-blue) !important;
            border: 1px solid var(--brand-blue) !important;
            border-radius: 4px;
            margin-left: 0.5rem;
            transition: all 0.3s ease !important;
            display: inline-block;
        }

        .nav-cta-link:hover {
            background: var(--brand-blue) !important;
            color: #ffffff !important;
        }

/* ─── NAVBAR ──============================================================================ */

/* ─── CORE VARIABLES ─── */
        :root {
            /* Brand Colors */
            --brand-blue: #2897C9;
            --brand-teal: #1DA8C9;
            --brand-mint: #06D7B8;

            /* Editorial Palette */
            --ink-dark: #111111;
            --ink-medium: #333333;
            --ink-light: #666666;
            --surface-bg: #fdfdfc;
            --surface-card: #ffffff;
            --border-subtle: #00a4b6;
            /*#00a4b6
              #fdfdfc*/

            /* Gradients */
            --brand-gradient: linear-gradient(135deg, var(--brand-blue), var(--brand-teal));
        }

/* ─── GLOBAL TYPOGRAPHY ENFORCEMENT & MOBILE OVERFLOW FIX ─── */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html,
        body {
            scroll-behavior: smooth;
            width: 100%;
            max-width: 100%;
            overflow-x: clip;
            /* Strictly prevents horizontal scroll gap */
            position: relative;
            /* user-select:none */
        }

/* STRICT rule: Times New Roman, No Bold */
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        a,
        span,
        div,
        input,
        textarea,
        button {
            font-family: 'Times New Roman', Times, serif !important;
            font-weight: 400 !important;
        }

        body {
            background-color: var(--surface-bg);
            color: var(--ink-dark);
            font-size: 16px;
            line-height: 1.75;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

/* ─── SECTION TYPOGRAPHY HELPERS ─── */
        .section-label {
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--brand-blue);
            display: block;
            margin-bottom: 0.75rem;
        }

        .section-heading {
            font-size: clamp(2rem, 4vw, 3rem);
            color: var(--ink-dark);
            letter-spacing: -0.02em;
            line-height: 1.15;
            margin-bottom: 1.25rem;
        }

        .section-body {
            font-size: 1.05rem;
            color: var(--ink-medium);
            line-height: 1.8;
        }

        .thin-divider {
            border: none;
            border-top: 1px solid var(--border-subtle);
            margin: 0;
            opacity: 1;
        }

        .section-spacing {
            padding: 5rem 0;
            /* Creates a standard top and bottom gap */
        }

/* ─── BUTTONS ─── */
        .btn-custom {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            padding: 0.7rem 1.8rem;
            border-radius: 4px;
            letter-spacing: 0.02em;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
        }

        .btn-outline-ink {
            color: var(--ink-dark);
            border: 1px solid var(--ink-dark);
            background: transparent;
        }

        .btn-outline-ink:hover {
            background: var(--ink-dark);
            color: var(--surface-card);
        }

        .btn-brand {
            color: #ffffff !important;
            background: var(--brand-blue);
            border: 1px solid var(--brand-blue);
        }

        .btn-brand:hover {
            background: var(--brand-teal);
            border-color: var(--brand-teal);
            box-shadow: 0 8px 20px rgba(40, 151, 201, 0.25);
            transform: translateY(-2px);
        }

        .btn-mint {
            color: var(--ink-dark) !important;
            background: var(--brand-mint);
            border: 1px solid var(--brand-mint);
        }

        .btn-mint:hover {
            background: #ffffff;
            color: var(--brand-mint) !important;
            border-color: #ffffff;
            transform: translateY(-2px);
        }

/* ─── CARD STYLES ─── */
.g-border-card {
    background-color: var(--surface-card);
    border: 1px solid var(--border-subtle); /* This applies your custom blue line */
    border-radius: 8px; /* Smooth, modern rounded corners */
    transition: all 0.3s ease; /* Makes hover effects smooth */
}

/* Optional Pro-Tip: Add a subtle hover effect so the cards feel interactive */
.g-border-card:hover {
    box-shadow: 0 8px 24px rgba(0, 164, 182, 0.12); /* Soft blue shadow */
    transform: translateY(-3px); /* Floats up slightly */
}

/* ─── CARD ICON STYLES ─── */
.icon-box {
    width: 60px; /* Slightly larger than form icons for prominence */
    height: 60px;
    border: 1px solid var(--border-subtle); /* The specific blue line */
    border-radius: 8px; /* Matching the card corners */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem; /* Icon size inside the box */
    color: var(--brand-blue); /* Sets default blue for the icon itself */
    background-color: #ffffff; /* Ensure contrast */
    margin-bottom: 1.5rem; /* Creates separation before the heading */
    transition: all 0.3s ease; /* For smooth transitions */
}

/* ─── CONTACT SECTION ─── */
        .info-icon {
            width: 45px;
            height: 45px;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            color: var(--brand-blue);
            background: var(--surface-bg);
            flex-shrink: 0;
        }

        .finput {
            font-size: 1rem;
            color: var(--ink-dark);
            background: var(--surface-bg);
            border: 1px solid var(--border-subtle);
            border-radius: 4px;
            padding: 0.8rem 1rem;
            width: 100%;
            transition: all 0.3s ease;
        }

        .finput:focus {
            border-color: var(--brand-blue);
            background: #ffffff;
            outline: none;
            box-shadow: 0 0 0 4px rgba(40, 151, 201, 0.1);
        }

        /* ─── FOOTER ─── */
        footer {
            background: var(--surface-bg);
            border-top: 1px solid var(--border-subtle);
            padding: 5rem 0 2rem;
        }

        /* ─── REVEAL ANIMATIONS ─── */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal.visible {
            opacity: 1;
            transform: none;
        }

        #contact {
                padding: 4rem 0;
            }


/* ─── ASSISTED READING ANIMATION STYLES ─── */
.reading-word {
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 4px;
    padding: 0 2px;
}

.reading-word.highlighted {
    background-color: var(--brand-blue);
    color: #ffffff !important; 
}




/* ══════════════════════════════════════════════════ */
        /* ─── RESPONSIVE ADJUSTMENTS (THE MOBILE FIXES) ─── */
        /* ══════════════════════════════════════════════════ */

        @media (max-width: 991px) {
            #hero {
                padding: 4rem 0 3rem;
                text-align: center;
            }

            
            #contact {
                padding: 4rem 0;
            }


            .hero-actions {
                justify-content: center;
            }

            .navbar-collapse {
                background: var(--surface-card);
                padding: 1rem;
                border-radius: 8px;
                margin-top: 0.5rem;
                border: 1px solid var(--border-subtle);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            }

            .nav-cta-link {
                margin-left: 0;
                margin-top: 0.5rem;
                text-align: center;
            }
        }

        @media (max-width: 576px) {
            .hero-actions {
                flex-direction: column;
                width: 100%;
            }

            .hero-actions .btn-custom {
                width: 100%;
            }

            .section-heading {
                font-size: 2.2rem;
            }

            #contact {
                padding: 4rem 0;
            }

            
        }
        
        
        
        
        
        
        
/* =========================================================
   CODEAYAN WOOCOMMERCE — DEFINITIVE FIX
   Fixes: Login, Dashboard, Checkout — all mobile wall issues
========================================================= */

/* ── STEP 1: KILL WOOCOMMERCE'S OWN FLOAT LAYOUT ──
   woocommerce-layout.css uses floats + negative margins.
   We neutralize all of that first before applying ours.   */

.woocommerce .col2-set,
.woocommerce #customer_login,
.woocommerce-page .col2-set,
.woocommerce-page #customer_login {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2,
.u-column1.col-1,
.u-column2.col-2 {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── STEP 2: THE MAIN WRAPPER ──
   THIS is the line that fixes the wall-touching on mobile.
   The .container from Bootstrap gives ~12px. We add more.  */

.woocommerce {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 1060px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;   /* ← THE KEY LINE. Prevents wall sticking. */
    box-sizing: border-box !important;
    clear: both !important;
}

/* ── STEP 3: LOGGED IN DASHBOARD — side-by-side layout ── */

.logged-in .woocommerce {
    flex-direction: row !important;
    align-items: flex-start !important;
}

/* =========================================================
   A. LOGIN & REGISTER PAGE
========================================================= */

#customer_login {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.u-column1.col-1,
.u-column2.col-2 {
    flex: 1 1 300px !important;
    max-width: 480px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 2.5rem 2rem !important;
    box-shadow: 0 6px 24px rgba(0, 164, 182, 0.07) !important;
}

.u-column1.col-1 h2,
.u-column2.col-2 h2 {
    font-size: 1.5rem !important;
    color: var(--ink-dark) !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Labels */
.woocommerce form .form-row label {
    display: block !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ink-medium) !important;
    margin-bottom: 0.4rem !important;
}

/* Inputs */
.woocommerce form .form-row input.input-text {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1rem !important;
    font-size: 1rem !important;
    background: #f8fafb !important;
    border: 1px solid #d5e0e4 !important;
    border-radius: 7px !important;
    color: var(--ink-dark) !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
}

.woocommerce form .form-row input.input-text:focus {
    background: #ffffff !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(40, 151, 201, 0.13) !important;
    outline: none !important;
}

/* Form row spacing */
.woocommerce form .form-row {
    margin-bottom: 1.2rem !important;
    padding: 0 !important;
}

/* Lost password */
.woocommerce-LostPassword {
    margin-top: 1rem !important;
    text-align: center !important;
}

.woocommerce-LostPassword a {
    color: var(--brand-blue) !important;
    font-size: 0.9rem !important;
    text-decoration: underline !important;
}

/* Privacy policy */
.woocommerce-privacy-policy-text p {
    font-size: 0.83rem !important;
    color: var(--ink-light) !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
}

/* All WooCommerce buttons */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input[type="submit"].button,
.woocommerce #place_order {
    display: block !important;
    width: 100% !important;
    padding: 0.9rem 1.5rem !important;
    background: var(--brand-mint) !important;
    color: var(--ink-dark) !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    margin-top: 0.75rem !important;
    box-sizing: border-box !important;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input[type="submit"].button:hover,
.woocommerce #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(6, 215, 184, 0.3) !important;
}

/* =========================================================
   B. MY ACCOUNT DASHBOARD (LOGGED IN)
========================================================= */

.woocommerce-MyAccount-navigation {
    flex: 0 0 230px !important;
    width: 230px !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 24px rgba(0, 164, 182, 0.07) !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.95rem !important;
    color: var(--ink-medium) !important;
    border-left: 3px solid transparent !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: #f5fefe !important;
    color: var(--brand-blue) !important;
    border-left-color: var(--brand-blue) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(6, 215, 184, 0.07) !important;
    border-left-color: var(--brand-mint) !important;
    color: var(--brand-mint) !important;
}

.woocommerce-MyAccount-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 2.5rem !important;
    box-shadow: 0 6px 24px rgba(0, 164, 182, 0.07) !important;
    box-sizing: border-box !important;
}

.woocommerce-MyAccount-content p {
    line-height: 1.85 !important;
    margin-bottom: 1rem !important;
    color: var(--ink-medium) !important;
}

.woocommerce-MyAccount-content a {
    color: var(--brand-blue) !important;
    text-decoration: underline !important;
}

.woocommerce-MyAccount-content strong {
    color: var(--ink-dark) !important;
}

/* =========================================================
   C. CHECKOUT PAGE
========================================================= */

.woocommerce-checkout.woocommerce-page .woocommerce {
    flex-direction: column !important;
}

.woocommerce form.checkout,
.woocommerce form.woocommerce-checkout {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Checkout billing/shipping columns */
.woocommerce .col2-set {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
    flex: 1 1 300px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Order review box */
#order_review,
#order_review_heading {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 2rem !important;
}

#order_review {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* Checkout table */
.woocommerce table.shop_table {
    width: 100% !important;
    box-sizing: border-box !important;
    border-collapse: collapse !important;
}

/* =========================================================
   D. RESPONSIVE — MOBILE FIXES (THE WALL FIX)
========================================================= */

@media (max-width: 767px) {

    /* The wrapper padding is the primary wall fix */
    .woocommerce {
        padding: 0 0.75rem !important;
        gap: 1.5rem !important;
    }

    /* Dashboard stacks vertically */
    .logged-in .woocommerce {
        flex-direction: column !important;
    }

    /* Login / Register stacks vertically */
    #customer_login {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .u-column1.col-1,
    .u-column2.col-2 {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        padding: 1.75rem 1.25rem !important;
    }

    .u-column1.col-1 h2,
    .u-column2.col-2 h2 {
        font-size: 1.3rem !important;
    }

    /* Dashboard sidebar full width */
    .woocommerce-MyAccount-navigation {
        flex: none !important;
        width: 100% !important;
    }

    .woocommerce-MyAccount-content {
        padding: 1.5rem 1.25rem !important;
    }

    /* Checkout columns stack */
    .woocommerce .col2-set {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    #order_review {
        padding: 1.5rem 1.25rem !important;
    }

    /* Prevent table overflow on mobile */
    .woocommerce table.shop_table {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 400px) {
    .woocommerce {
        padding: 0 0.5rem !important;
    }

    .u-column1.col-1,
    .u-column2.col-2,
    .woocommerce-MyAccount-content {
        padding: 1.25rem 1rem !important;
    }
}

/* ========================================== */
/* BACK TO TOP FLOATING BUTTON */
/* ========================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: var(--surface-bg);
    color: var(--brand-blue);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Class added via Javascript when scrolling */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover State - Pops to Brand Mint */
.back-to-top:hover {
    background-color: var(--brand-mint);
    color: var(--ink-dark);
    border-color: var(--brand-mint);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(6, 215, 184, 0.25);
}

/* ── Dark Mode Support ── */
body.dark-mode .back-to-top {
    background-color: #1e1e1e;
    border-color: rgba(255,255,255,0.1);
    color: #a0a0a0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
body.dark-mode .back-to-top:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
    border-color: var(--brand-blue);
}










/* --- CODEAYAN FLYING BIRD EASTER EGG (GLITCH-FREE) --- */
.ca-flying-bird {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    animation-duration: 4s; /* Speed control: lower = faster */
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Direction 1: Left to Right */
.bird-left-to-right {
    animation-name: flyLeftToRight;
}

/* Explicitly mapping the left property so it never vanishes */
@keyframes flyLeftToRight {
    0%   { left: -100px; transform: translateY(0); }
    25%  { left: 25vw;   transform: translateY(-20px); }
    50%  { left: 50vw;   transform: translateY(10px); }
    75%  { left: 75vw;   transform: translateY(-15px); }
    100% { left: 110vw;  transform: translateY(0); }
}

/* Direction 2: Right to Left */
.bird-right-to-left {
    animation-name: flyRightToLeft;
}

/* Flip the image horizontally */
.bird-right-to-left img {
    transform: scaleX(-1);
}

/* Explicitly mapping the right property so it never vanishes */
@keyframes flyRightToLeft {
    0%   { right: -100px; transform: translateY(0); }
    25%  { right: 25vw;   transform: translateY(-20px); }
    50%  { right: 50vw;   transform: translateY(10px); }
    75%  { right: 75vw;   transform: translateY(-15px); }
    100% { right: 110vw;  transform: translateY(0); }
}