/* Login page — light theme overrides (matches signup layout, light theme) */

body.theme-light {
    position: relative;
    background: linear-gradient(160deg, #f0f4ff 0%, #e8eef9 50%, #e0e7ff 100%);
    color: #1e293b;
    overflow-x: hidden;
}

/* Background gradient balls — 6 on desktop with motion, 1 blue on mobile */

@keyframes ball-float-1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3%, 2%); }
}
@keyframes ball-float-2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-2%, -3%); }
}
@keyframes ball-float-3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-2%, 2%); }
}
@keyframes ball-float-4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2%, -2%); }
}
@keyframes ball-float-5 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-3%, 1%); }
}
@keyframes ball-float-6 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2%, 3%); }
}

/* Ball 1 — blue (top, kept on mobile) */
body.theme-light::before {
    content: '';
    position: fixed;
    width: min(95vw, 620px);
    height: min(95vw, 620px);
    top: -25%;
    left: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.55) 0%, rgba(59, 130, 246, 0.25) 40%, transparent 70%);
    filter: blur(32px);
    pointer-events: none;
    z-index: 0;
}

/* Ball 2 — purple */
body.theme-light::after {
    content: '';
    position: fixed;
    width: min(90vw, 560px);
    height: min(90vw, 560px);
    top: 35%;
    right: -25%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, rgba(139, 92, 246, 0.22) 40%, transparent 70%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}

body.theme-light .pricing {
    position: relative;
    z-index: 1;
}

/* Ball 3 — green */
body.theme-light .pricing::before {
    content: '';
    position: fixed;
    width: min(85vw, 520px);
    height: min(85vw, 520px);
    bottom: -20%;
    left: 25%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.45) 0%, rgba(34, 197, 94, 0.18) 40%, transparent 70%);
    filter: blur(38px);
    pointer-events: none;
    z-index: 0;
}

/* Ball 4 — red */
body.theme-light .pricing::after {
    content: '';
    position: fixed;
    width: min(88vw, 540px);
    height: min(88vw, 540px);
    top: 55%;
    left: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, rgba(220, 38, 38, 0.2) 40%, transparent 70%);
    filter: blur(35px);
    pointer-events: none;
    z-index: 0;
}

/* Ball 5 — amber */
body.theme-light .pricing-main::before {
    content: '';
    position: fixed;
    width: min(82vw, 500px);
    height: min(82vw, 500px);
    top: 10%;
    right: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, rgba(217, 119, 6, 0.18) 40%, transparent 70%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}

/* Ball 6 — teal */
body.theme-light .pricing-main::after {
    content: '';
    position: fixed;
    width: min(78vw, 480px);
    height: min(78vw, 480px);
    bottom: 15%;
    right: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.45) 0%, rgba(13, 148, 136, 0.2) 40%, transparent 70%);
    filter: blur(34px);
    pointer-events: none;
    z-index: 0;
}

/* Desktop: slight motion on all balls */
@media (min-width: 769px) {
    body.theme-light::before { animation: ball-float-1 12s ease-in-out infinite; }
    body.theme-light::after { animation: ball-float-2 14s ease-in-out infinite; }
    body.theme-light .pricing::before { animation: ball-float-3 11s ease-in-out infinite; }
    body.theme-light .pricing::after { animation: ball-float-4 13s ease-in-out infinite; }
    body.theme-light .pricing-main::before { animation: ball-float-5 15s ease-in-out infinite; }
    body.theme-light .pricing-main::after { animation: ball-float-6 10s ease-in-out infinite; }
}

/* Mobile: 2 balls on top, side by side — one bigger, one smaller */
/* Mobile: buttons on top, then logo centered */
@media (max-width: 768px) {
    body.theme-light .pricing::before,
    body.theme-light .pricing::after,
    body.theme-light .pricing-main::before,
    body.theme-light .pricing-main::after {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    /* Bigger ball — blue, left */
    body.theme-light::before {
        width: min(85vw, 340px);
        height: min(85vw, 340px);
        top: -28%;
        left: -15%;
    }
    /* Smaller ball — purple, right, side by side */
    body.theme-light::after {
        opacity: 1;
        visibility: visible;
        width: min(55vw, 220px);
        height: min(55vw, 220px);
        top: -18%;
        right: -12%;
        left: auto;
    }

    /* Header: stacked on mobile — same placement as signup */
    body.theme-light .pricing-header {
        flex-direction: column;
        padding: 1.25rem 1rem 0;
    }
}

/* Header brand wrap — flex container so "by Adamate" can wrap to own pill */
body.theme-light .pricing-brand-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    border: none;
    outline: none;
}
body.theme-light .pricing-brand-wrap:hover,
body.theme-light .pricing-brand-wrap:focus,
body.theme-light .pricing-brand-wrap:visited {
    text-decoration: none;
    border: none;
    outline: none;
}
body.theme-light .pricing-brand-wrap:hover {
    opacity: 0.95;
}

/* Each pill segment (MessageHub, by Adamate) */
body.theme-light .pricing-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
}

body.theme-light .pricing-brand-wrap:hover .pricing-brand-pill {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.theme-light .pricing-brand-text,
body.theme-light .pricing-brand-by {
    color: #0f172a;
}

body.theme-light .pricing-brand-wrap:hover .pricing-brand-text,
body.theme-light .pricing-brand-wrap:hover .pricing-brand-by {
    color: #020617;
}

/* Force logo to black on light background */
body.theme-light .pricing-brand-adamate-logo {
    filter: brightness(0);
    opacity: 1;
}

/* Header auth links — light, readable text */
body.theme-light .pricing-dashboard {
    color: #fff;
    background: #0f172a;
    border: 1px solid #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

body.theme-light .pricing-dashboard:hover {
    color: #fff;
    background: #020617;
    border-color: #020617;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Hero — dark text on light */
body.theme-light .pricing-hero h1 {
    background: linear-gradient(180deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-light .pricing-hero p {
    color: #64748b;
}

/* Auth card — light surface */
body.theme-light .auth-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

body.theme-light .auth-card:hover {
    border-color: rgba(100, 116, 139, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* Auth error — light red */
body.theme-light .auth-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

/* Auth inputs — light */
body.theme-light .auth-section input,
body.theme-light .auth-card .auth-input {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #1e293b;
}

body.theme-light .auth-section input::placeholder {
    color: #94a3b8;
}

body.theme-light .auth-section input:hover {
    border-color: #94a3b8;
    background: #fff;
}

body.theme-light .auth-section input:focus {
    border-color: rgba(54, 130, 222, 0.6);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(54, 130, 222, 0.12);
}

/* Primary button — keep brand blue */
body.theme-light .auth-card .btn-primary,
body.theme-light .auth-card .auth-submit.btn-primary {
    background: #3682de;
    color: #fff;
    box-shadow: 0 2px 8px rgba(54, 130, 222, 0.25);
}

body.theme-light .auth-card .btn-primary:hover,
body.theme-light .auth-card .auth-submit.btn-primary:hover {
    background: #2b6fc7;
    box-shadow: 0 4px 12px rgba(54, 130, 222, 0.35);
}

/* Divider */
body.theme-light .auth-step-divider {
    color: #64748b;
}

/* Google button — light: visible shine animation, preserve icon colors */
body.theme-light .btn-google {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Shine animation visible on white background (no color conflict with icon) */
body.theme-light .btn-google::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

body.theme-light .btn-google:hover::before {
    left: 100%;
}

body.theme-light .btn-google:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Keep Google icon brand colors (don’t inherit button text color) */
body.theme-light .btn-google .auth-google-icon {
    flex-shrink: 0;
}

/* Auth switch links */
body.theme-light .auth-switch {
    border-top-color: rgba(148, 163, 184, 0.35);
    color: #64748b;
}

body.theme-light .auth-switch a {
    color: #3682de;
}

body.theme-light .auth-switch a:hover {
    color: #2563eb;
}