@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Outfit', sans-serif;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0A0F14; }
::-webkit-scrollbar-thumb { background: #111C29; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #06B6D4; }

/* Modal Animation */
.modal-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.modal-content-active {
    transform: scale(1) !important;
}

/* Modal Backdrops */
#purchaseModal,
#loginModal,
#signupModal,
#contactModal,
#logoutModal,
#profileModal,
#subscriptionModal,
#verificationModal,
#reminderModal {
    backdrop-filter: blur(16px) !important;
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Modal Containers */
#purchaseModalContent,
#loginModalContent,
#signupModalContent,
#contactModalContent,
#logoutModalContent,
#profileModalContent,
#subModalContent,
#verificationModalContent,
#modalContent {
    background: linear-gradient(135deg, rgba(17, 28, 41, 0.97), rgba(10, 15, 20, 0.99)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(6, 182, 212, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    position: relative;
    overflow: hidden;
}

/* Animated Gradient Border on Key Modals */
#purchaseModalContent::before,
#loginModalContent::before,
#signupModalContent::before,
#contactModalContent::before,
#subModalContent::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #06B6D4, #0D9488, #06B6D4);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.3;
    animation: borderGlow 3s ease-in-out infinite;
    filter: blur(20px);
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.15; }
    50%       { opacity: 0.5; }
}

/* Modal Headings Glow */
#purchaseModalContent h3,
#loginModalContent h3,
#signupModalContent h3,
#contactModalContent h3,
#logoutModalContent h3,
#profileModalContent h3,
#subModalContent h3,
#verificationModalContent h3,
#modalContent h3 {
    text-shadow: 0 0 30px rgba(6, 182, 212, 0.25);
}

/* Input Fields */
#loginEmail,
#loginPassword,
#regBusinessName,
#regName,
#regPhone,
#regEmail,
#regPassword,
#contactName,
#contactEmail,
#contactMessage,
#subName,
#subEmail,
#subPhone,
#verifyCodeInput,
#reminderInput {
    background: rgba(10, 15, 20, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease !important;
}

#loginEmail:focus,
#loginPassword:focus,
#regBusinessName:focus,
#regName:focus,
#regPhone:focus,
#regEmail:focus,
#regPassword:focus,
#contactName:focus,
#contactEmail:focus,
#contactMessage:focus,
#subName:focus,
#subEmail:focus,
#subPhone:focus,
#verifyCodeInput:focus,
#reminderInput:focus {
    border: 1px solid rgba(6, 182, 212, 0.5) !important;
    box-shadow:
        0 0 0 3px rgba(6, 182, 212, 0.1),
        inset 0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(6, 182, 212, 0.15) !important;
    background: rgba(10, 15, 20, 0.8) !important;
}

/* Button Shimmer Effect */
#performLogin,
#performRegister,
#sendContactBtn,
#performVerify,
#confirmPurchaseBtn,
#saveReminder {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#performLogin::before,
#performRegister::before,
#sendContactBtn::before,
#performVerify::before,
#confirmPurchaseBtn::before,
#saveReminder::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#performLogin:hover::before,
#performRegister:hover::before,
#sendContactBtn:hover::before,
#performVerify:hover::before,
#confirmPurchaseBtn:hover::before,
#saveReminder:hover::before {
    width: 300px;
    height: 300px;
}

/* Close Buttons */
#closePurchaseModal,
#closeLoginModal,
#closeSignupModal,
#closeContactModal,
#closeLogoutModal,
#closeProfileModal,
#closeVerifyModal,
#closeModal {
    transition: all 0.3s ease;
}

#closePurchaseModal:hover,
#closeLoginModal:hover,
#closeSignupModal:hover,
#closeContactModal:hover,
#closeLogoutModal:hover,
#closeProfileModal:hover,
#closeVerifyModal:hover,
#closeModal:hover {
    color: #06B6D4 !important;
    transform: scale(1.1);
}

/* Payment Method Selection */
.payment-method-btn.selected-method {
    border-color: #06B6D4 !important;
    background: rgba(6, 182, 212, 0.08) !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
}

.payment-method-btn.selected-method i.fa-chevron-right {
    color: #06B6D4 !important;
    transform: translateX(4px);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    pointer-events: all;
    background: linear-gradient(135deg, rgba(17, 28, 41, 0.95), rgba(10, 15, 20, 0.98));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 320px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 100%;
    background: #06B6D4;
}

.toast-success::before { background: #10B981; }
.toast-error::before   { background: #EF4444; }
.toast-warning::before { background: #F59E0B; }
.toast-info::before    { background: #06B6D4; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.toast.removing {
    animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

/* Mobile Menu Transition */
#mobileMenu {
    transition: all 0.2s ease;
}

/* Section fade-in on scroll (progressive enhancement) */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── ADA: Skip Link ── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: #06B6D4;
    color: #0A0F14;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ── ADA: Focus Visible ── */
:focus-visible {
    outline: 2px solid #06B6D4;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Urgency Banner ── */
#urgencyBanner {
    background: linear-gradient(90deg, #0D9488, #06B6D4, #0D9488);
    background-size: 200% auto;
    animation: shimmerBg 4s linear infinite;
}
@keyframes shimmerBg {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ── Typed Cursor ── */
.typed-cursor {
    display: inline-block;
    width: 3px;
    background: #06B6D4;
    margin-left: 3px;
    border-radius: 2px;
    animation: cursorBlink 0.75s step-end infinite;
    vertical-align: middle;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Hero Showcase Float ── */
.hero-float { animation: heroFloat 6s ease-in-out infinite; }
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

/* ── Dot Grid Texture ── */
.dot-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* ── Browser Mockup ── */
.browser-mockup { background: #080D12; }
.browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(17,28,41,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.browser-dot  { width: 10px; height: 10px; border-radius: 50%; }
.browser-url  {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}
.browser-body { padding: 10px; }

/* ── WhatsApp Floating Button ── */
.whatsapp-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    border-radius: 50px;
    padding: 13px 20px 13px 16px;
    box-shadow: 0 8px 32px rgba(37,211,102,0.45);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.whatsapp-fab:hover {
    transform: scale(1.06) translateY(-3px);
    box-shadow: 0 14px 44px rgba(37,211,102,0.55);
}
.whatsapp-fab-label { white-space: nowrap; }
@media (max-width: 640px) {
    .whatsapp-fab { padding: 15px; border-radius: 50%; }
    .whatsapp-fab-label { display: none; }
}

/* ─────────────────────────────────────────────
   MOBILE POLISH (≤768px)
   The site is built with Tailwind md: breakpoints; this layer
   fixes the things that still look oversized/overflowing on phones.
   ───────────────────────────────────────────── */

/* Never allow sideways scrolling (decorative blur circles overflow otherwise) */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 768px) {
    /* Shrink the desktop-sized headings so they fit a phone */
    .text-7xl { font-size: 2.5rem !important;  line-height: 1.1 !important; }
    .text-6xl { font-size: 2.25rem !important; line-height: 1.1 !important; }
    .text-5xl { font-size: 2rem !important;    line-height: 1.15 !important; }
    .text-4xl { font-size: 1.65rem !important; line-height: 1.2 !important; }
    .text-3xl { font-size: 1.5rem !important;  line-height: 1.2 !important; }
    .text-2xl { font-size: 1.3rem !important; }
    .text-xl  { font-size: 1.05rem !important; line-height: 1.5 !important; }

    /* Tighten the big vertical section spacing so there's less dead scroll */
    .pt-32 { padding-top: 6rem !important; }
    .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    .py-20 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
    .mt-20 { margin-top: 3rem !important; }
    .mb-16 { margin-bottom: 2.5rem !important; }

    /* Keep side gutters comfortable */
    .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

    /* Hero stat row: let it wrap instead of squishing on tiny screens */
    .stats-section { flex-wrap: wrap; gap: 1.5rem 2rem !important; }

    /* Toast can't be wider than the screen */
    .toast { min-width: 0 !important; max-width: calc(100vw - 32px); }
}

/* ── Mobile nav menu (hamburger dropdown) ── */
#mobileMenu:not(.hidden) {
    animation: mobileMenuDrop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mobileMenuDrop {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 0.25rem;
    font-weight: 500;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
    border-radius: 8px;
}
.mobile-nav-link i {
    width: 1.35rem;
    text-align: center;
    color: #06B6D4;
    font-size: 0.95rem;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
    color: #06B6D4;
    padding-left: 0.7rem;
    background: rgba(6, 182, 212, 0.07);
}
/* Bigger, easier-to-tap hamburger button */
#mobileMenuBtn { -webkit-tap-highlight-color: transparent; }
#mobileMenuIcon { transition: transform 0.2s ease; }

/* ── ADA Accessibility Widget ── */
#adaWidget {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 1000;
}
#adaToggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #06B6D4;
    color: #0A0F14;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(6,182,212,0.45);
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    align-items: center;
    justify-content: center;
}
#adaToggle:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(6,182,212,0.55); }
#adaPanel {
    position: absolute;
    bottom: 62px;
    left: 0;
    width: 270px;
    background: linear-gradient(135deg, rgba(17,28,41,0.98), rgba(10,15,20,0.99));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 60px rgba(6,182,212,0.06);
    overflow: hidden;
    animation: adaSlideUp 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes adaSlideUp {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.ada-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ada-header h3 { font-size: 14px; font-weight: 700; color: #06B6D4; margin: 0; }
.ada-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.2s;
}
.ada-close-btn:hover { color: #fff; }
.ada-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ada-group-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.ada-font-row { display: flex; gap: 6px; }
.ada-font-btn {
    flex: 1;
    padding: 8px 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
}
.ada-font-btn:hover { background: rgba(6,182,212,0.15); border-color: rgba(6,182,212,0.4); color: #06B6D4; }
.ada-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 11px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: 'Outfit', sans-serif;
}
.ada-toggle-btn:hover { background: rgba(6,182,212,0.1); border-color: rgba(6,182,212,0.3); color: #fff; }
.ada-toggle-btn.active { background: rgba(6,182,212,0.15); border-color: #06B6D4; color: #06B6D4; }
.ada-toggle-btn .ada-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    margin-left: auto;
    flex-shrink: 0;
    transition: all 0.2s;
}
.ada-toggle-btn.active .ada-dot { background: #06B6D4; border-color: #06B6D4; }
.ada-reset-btn {
    width: 100%;
    padding: 9px;
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.03em;
}
.ada-reset-btn:hover { color: #fff; border-color: rgba(255,255,255,0.25); }

/* ADA Mode Effects */
/* IMPORTANT: a CSS `filter` on <body>/<html> re-anchors every position:fixed
   child (WhatsApp button, ADA panel, navbar) to that element instead of the
   viewport — which makes them appear to vanish. So we apply the filters to each
   top-level content block instead, and explicitly skip the two floating control
   widgets so they always stay pinned and clickable. Using CSS variables lets
   contrast + grayscale stack instead of overwriting each other. */
html { --ada-gray: ; --ada-contrast: ; }
html.ada-grayscale { --ada-gray: grayscale(1); }
html.ada-contrast  { --ada-contrast: contrast(1.55) brightness(1.2) saturate(1.3); }
html.ada-grayscale body > *:not(#adaWidget):not(.whatsapp-fab):not(script):not(style),
html.ada-contrast  body > *:not(#adaWidget):not(.whatsapp-fab):not(script):not(style) {
    filter: var(--ada-gray) var(--ada-contrast);
}
html.ada-links a         { text-decoration: underline !important; outline: 1px dashed rgba(6,182,212,0.6); outline-offset: 2px; }
html.ada-no-anims *,
html.ada-no-anims *::before,
html.ada-no-anims *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
html.ada-large-text      { font-size: 115% !important; }

/* ── Stagger delays for cards ── */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* ── Mobile language mini-buttons ── */
.lang-mini {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9999px;
    padding: 0.4rem 0.7rem;
    transition: all 0.2s ease;
}
.lang-mini:hover { color: #06B6D4; border-color: rgba(6,182,212,0.4); background: rgba(6,182,212,0.1); }

/* ── FAQ accordion (pure CSS <details>) ── */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item[open] { border-color: rgba(6, 182, 212, 0.35); }