/* ==========================================================================
   Token Theme - authentication pages (Shop Login)
   Requires token-theme.css
   ========================================================================== */

.tk-auth {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ---------- Colours: Ne-Organics website theme (light, green #76bf59 / #3fa53b / #0c2e03) ----------
   Only colours are overridden here; the gold coin stays as the token mark. */

.tk-body.tk-auth {
    --tk-bg: #f4f8f1;
    --tk-bg-2: #eef5ea;
    --tk-surface: rgba(63, 165, 59, .06);
    --tk-surface-2: rgba(63, 165, 59, .1);
    --tk-border: rgba(12, 46, 3, .1);
    --tk-border-strong: #d6e2d1;
    --tk-text: #212121;
    --tk-text-2: #4a5568;
    --tk-muted: #6b7280;
    --tk-green-main: #3fa53b;
    --tk-green-light: #76bf59;
    --tk-green-dark: #0c2e03;
    --tk-green-link: #2f8f2b;
    --tk-danger: #d32f2f;
    color-scheme: light;
}

    .tk-body.tk-auth a {
        color: var(--tk-green-link);
    }

    .tk-auth .tk-backdrop {
        background: radial-gradient(55% 45% at 12% 18%, rgba(118, 191, 89, .28), transparent 62%),
                    radial-gradient(45% 45% at 88% 82%, rgba(63, 165, 59, .18), transparent 62%),
                    linear-gradient(180deg, #f7faf5 0%, #eaf3e5 100%);
    }

        .tk-auth .tk-backdrop::after {
            background-image: linear-gradient(rgba(12, 46, 3, .05) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(12, 46, 3, .05) 1px, transparent 1px);
        }

    .tk-auth .tk-back {
        background: #fff;
        border-color: var(--tk-border-strong);
        color: var(--tk-green-dark) !important;
        box-shadow: 0 2px 10px rgba(12, 46, 3, .08);
    }

        .tk-auth .tk-back:hover {
            border-color: var(--tk-green-main);
        }

    .tk-auth .tk-brand b,
    .tk-auth .tk-auth-card h2 {
        color: var(--tk-green-dark);
    }

    .tk-auth .tk-brand b {
        color: var(--tk-green-main);
    }

    .tk-auth .tk-gradient-text {
        background: linear-gradient(135deg, #76bf59 0%, #3fa53b 55%, #1d7a1a 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .tk-auth .tk-orbit {
        border-color: rgba(63, 165, 59, .4);
    }

    .tk-auth .tk-features li {
        background: rgba(255, 255, 255, .75);
        border-color: var(--tk-border-strong);
    }

    .tk-auth .tk-features svg {
        background: rgba(63, 165, 59, .12);
        color: var(--tk-green-main);
    }

    /* login card */
    .tk-auth .tk-auth-card {
        background: #fff;
        border-color: rgba(12, 46, 3, .08);
        box-shadow: 0 20px 50px rgba(12, 46, 3, .14);
    }

    .tk-auth .tk-badge {
        border-color: rgba(63, 165, 59, .4);
        background: rgba(63, 165, 59, .1);
        color: var(--tk-green-link);
    }

    .tk-auth .tk-input input {
        background: #fafcf9;
        color: var(--tk-text);
    }

        .tk-auth .tk-input input:focus {
            border-color: var(--tk-green-main);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(63, 165, 59, .15);
        }

        .tk-auth .tk-input input:-webkit-autofill {
            -webkit-text-fill-color: var(--tk-text);
            -webkit-box-shadow: 0 0 0 100px #f3f9f0 inset;
            caret-color: var(--tk-text);
        }

    .tk-auth .tk-input:focus-within > svg {
        color: var(--tk-green-main);
    }

    .tk-auth .tk-icon-btn:hover {
        color: var(--tk-green-link);
        background: rgba(63, 165, 59, .08);
    }

    .tk-auth .tk-btn-gold,
    .tk-body.tk-auth a.tk-btn-gold {
        background: linear-gradient(135deg, #76bf59 0%, #3fa53b 55%, #2a8a2a 100%);
        color: #fff;
        box-shadow: 0 10px 26px rgba(63, 165, 59, .32);
    }

        .tk-auth .tk-btn-gold:hover {
            box-shadow: 0 14px 32px rgba(63, 165, 59, .4);
        }

        .tk-auth .tk-btn:focus-visible,
        .tk-auth .tk-icon-btn:focus-visible {
            outline-color: var(--tk-green-main);
        }

        .tk-auth .tk-btn-gold .tk-spinner {
            border-color: rgba(255, 255, 255, .4);
            border-top-color: #fff;
        }

    .tk-auth .validation-summary-errors {
        border-color: rgba(211, 47, 47, .3);
        background: #fdecea;
        color: #b3261e;
    }

    .tk-auth .tk-auth-foot {
        border-top-color: var(--tk-border);
    }

/* floating coins drawn by token-auth.js */
#tkCoins {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tk-back {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--tk-border);
    background: rgba(255, 255, 255, .05);
    color: var(--tk-text) !important;
    font-size: 14px;
    font-weight: 600;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color .2s;
}

    .tk-back:hover {
        border-color: rgba(247, 181, 0, .5);
        text-decoration: none !important;
    }

    .tk-back svg {
        width: 16px;
        height: 16px;
    }

.tk-auth-wrap {
    position: relative;
    z-index: 1;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 56px;
    align-items: center;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 88px 24px 48px;
}

/* ---------- Hero ---------- */

.tk-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
}

    .tk-brand img {
        width: 40px;
        height: 40px;
    }

    .tk-brand b {
        color: var(--tk-gold);
    }

.tk-hero-coin {
    position: relative;
    width: 210px;
    height: 210px;
    margin: 44px 0 34px 26px;
    perspective: 800px;
}

    .tk-hero-coin::before {
        content: "";
        position: absolute;
        inset: -34px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(247, 181, 0, .32), transparent 65%);
        filter: blur(12px);
    }

    .tk-hero-coin img {
        position: relative;
        width: 100%;
        height: 100%;
        animation: tk-float 6s ease-in-out infinite;
        filter: drop-shadow(0 24px 40px rgba(247, 181, 0, .25));
    }

.tk-orbit {
    position: absolute;
    inset: -26px;
    border: 1px dashed rgba(247, 181, 0, .3);
    border-radius: 50%;
    animation: tk-spin 30s linear infinite;
}

    .tk-orbit::after {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 12px;
        height: 12px;
        margin-left: -6px;
        border-radius: 50%;
        background: var(--tk-green);
        box-shadow: 0 0 14px var(--tk-green);
    }

.tk-auth-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
}

.tk-auth-hero p {
    max-width: 460px;
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tk-text-2);
}

.tk-features {
    display: grid;
    gap: 12px;
    max-width: 420px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tk-features li {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
        border: 1px solid var(--tk-border);
        border-radius: 14px;
        background: var(--tk-surface);
        font-size: 14px;
        font-weight: 600;
    }

    .tk-features svg {
        flex: none;
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 10px;
        background: rgba(247, 181, 0, .12);
        color: var(--tk-gold);
    }

/* ---------- Login card ---------- */

.tk-auth-card {
    padding: 40px 36px;
}

    .tk-auth-card h2 {
        margin: 18px 0 6px;
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

.tk-auth-sub {
    margin: 0 0 28px;
    font-size: 14px;
    color: var(--tk-text-2);
}

.tk-row-end {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 22px;
    font-size: 14px;
    font-weight: 600;
}

.tk-auth-foot {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tk-border);
    text-align: center;
    font-size: 14px;
    color: var(--tk-text-2);
}

    .tk-auth-foot a {
        font-weight: 700;
    }

/* ---------- Responsive ---------- */

/* short laptop screens: keep the hero inside the first screen */
@media (min-width: 901px) and (max-height: 860px) {
    .tk-auth-wrap {
        padding-top: 72px;
        padding-bottom: 32px;
    }

    .tk-hero-coin {
        width: 150px;
        height: 150px;
        margin: 34px 0 26px 22px;
    }

    .tk-orbit {
        inset: -20px;
    }

    .tk-features li {
        padding: 9px 14px;
    }
}

@media (max-width: 900px) {
    .tk-auth-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-top: 80px;
    }

    .tk-auth-hero {
        text-align: center;
    }

        .tk-auth-hero p {
            margin-left: auto;
            margin-right: auto;
        }

    .tk-hero-coin {
        width: 120px;
        height: 120px;
        margin: 28px auto 24px;
    }

    .tk-orbit {
        inset: -16px;
    }

    .tk-features {
        display: none;
    }
}

@media (max-width: 480px) {
    .tk-auth-wrap {
        padding: 76px 16px 32px;
    }

    .tk-auth-card {
        padding: 28px 20px;
    }

        .tk-auth-card h2 {
            font-size: 26px;
        }
}