/*
 * KK Membership — front-end styles.
 *
 * Self-contained and theme-friendly: inherits the theme's font, stays out of the way of
 * page layout, and is easy to rebrand. To match VLGA's colours, override the variables on
 * the page (or in the theme), e.g.:
 *   .kk-login-form, .kk-signup-form, .kk-cancel-form, .kk-dashboard { --kk-accent: #00529b; }
 */
:root,
.kk-login-form,
.kk-signup-form,
.kk-cancel-form,
.kk-dashboard {
    --kk-accent: #1f6feb;
    --kk-accent-hover: #1858c4;
    --kk-accent-ink: #ffffff;
    --kk-ink: #1f2933;
    --kk-muted: #6b7280;
    --kk-line: #e3e8ef;
    --kk-surface: #ffffff;
    --kk-surface-alt: #f7f9fc;
    --kk-radius: 10px;
    --kk-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
}

/* ----------------------------------------------------------------- card shell */

.kk-login-form,
.kk-signup-form,
.kk-cancel-form,
.kk-dashboard {
    box-sizing: border-box;
    max-width: 460px;
    margin: 0 0 1.25rem;
    padding: 1.5rem 1.5rem 1.6rem;
    background: var(--kk-surface);
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    color: var(--kk-ink);
    line-height: 1.5;
}
.kk-dashboard { max-width: 640px; }

/* form/card heading */
.kk-form-title {
    margin: 0 0 1.15rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kk-ink);
}

.kk-login-form *,
.kk-signup-form *,
.kk-cancel-form *,
.kk-dashboard * { box-sizing: border-box; }

/* ----------------------------------------------------------------- fields */

.kk-login-form p,
.kk-signup-form p,
.kk-cancel-form p { margin: 0 0 1rem; }

.kk-login-form label,
.kk-signup-form label,
.kk-cancel-form label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--kk-ink);
}

.kk-login-form input,
.kk-signup-form input,
.kk-signup-form select,
.kk-cancel-form input {
    width: 100%;
    max-width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    color: var(--kk-ink);
    background: var(--kk-surface);
    border: 1px solid var(--kk-line);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kk-login-form input:focus,
.kk-signup-form input:focus,
.kk-signup-form select:focus,
.kk-cancel-form input:focus {
    outline: none;
    border-color: var(--kk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kk-accent) 22%, transparent);
}

/* one-time code: roomy + spaced for readability */
.kk-login-form #kk_code {
    letter-spacing: .35em;
    font-size: 1.15rem;
    text-align: center;
}

/* ----------------------------------------------------------------- buttons */

.kk-login-form button,
.kk-signup-form button,
.kk-cancel-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--kk-accent-ink);
    background: var(--kk-accent);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
.kk-login-form button:hover,
.kk-signup-form button:hover,
.kk-cancel-form button[type="submit"]:hover { background: var(--kk-accent-hover); }
.kk-login-form button:active,
.kk-signup-form button:active,
.kk-cancel-form button[type="submit"]:active { transform: translateY(1px); }

/* secondary inline link (e.g. "Use a different email") */
.kk-login-form a {
    display: inline-block;
    margin-left: .85rem;
    font-size: .9rem;
    color: var(--kk-muted);
}
.kk-login-form a:hover { color: var(--kk-accent); }

/* the cancellation action should read as low-key / cautionary, not a primary CTA */
.kk-cancel-form button[type="submit"] {
    background: transparent;
    color: #b42318;
    border-color: #f3c2bd;
}
.kk-cancel-form button[type="submit"]:hover { background: #fff4f3; }

/* ----------------------------------------------------------------- notices */

.kk-notice {
    max-width: 460px;
    padding: .75rem 1rem;
    margin: 0 0 1rem;
    border-radius: 8px;
    font-size: .92rem;
}
.kk-notice-success { background: #e7f6ec; color: #14532d; border: 1px solid #b7dfc2; }
.kk-notice-error { background: #fdecea; color: #7a271a; border: 1px solid #f3c2bd; }

/* ----------------------------------------------------------------- dashboard */

.kk-dashboard h3 { margin: 0 0 1rem; font-size: 1.25rem; }
.kk-dashboard h4 { margin: 1.5rem 0 .6rem; font-size: 1rem; color: var(--kk-ink); }

.kk-dashboard-table,
.kk-invoices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .94rem;
}
.kk-dashboard-table th,
.kk-dashboard-table td,
.kk-invoices-table th,
.kk-invoices-table td {
    text-align: left;
    padding: .6rem .25rem;
    border-bottom: 1px solid var(--kk-line);
    vertical-align: top;
}
.kk-dashboard-table th { width: 42%; color: var(--kk-muted); font-weight: 600; }
.kk-invoices-table thead th { color: var(--kk-muted); font-weight: 600; border-bottom-width: 2px; }
.kk-invoices-table tbody tr:hover { background: var(--kk-surface-alt); }

/* status pills */
.kk-status {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.kk-status-active { background: #e7f6ec; color: #14532d; }
.kk-status-grace,
.kk-status-pending,
.kk-status-pending_payment { background: #fff4e5; color: #7a4f01; }
.kk-status-expired,
.kk-status-cancelled,
.kk-status-rejected { background: #fdecea; color: #7a271a; }

/* sub-accounts */
.kk-sub-accounts { list-style: none; margin: 0; padding: 0; }
.kk-sub-accounts li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .25rem;
    border-bottom: 1px solid var(--kk-line);
    font-size: .94rem;
}
.kk-sub-accounts em { color: var(--kk-muted); font-style: normal; }
.kk-link-btn {
    margin-left: auto;
    padding: 0;
    font: inherit;
    font-size: .88rem;
    color: #b42318;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}
.kk-link-btn:hover { color: #7a271a; }

/* verify-step alternate actions: resend code + use a different email */
.kk-login-alt {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-sizing: border-box;
    max-width: 460px;
    margin: -0.5rem 0 1.25rem;
    padding: 0 1.5rem;
}
.kk-login-alt .kk-login-resend { margin: 0; }
.kk-login-alt .kk-link-btn { margin-left: 0; color: #1f6feb; }
.kk-login-alt .kk-link-btn:hover { color: #1858c4; }
.kk-login-alt a {
    font-size: .88rem;
    color: #6b7280;
    text-decoration: underline;
}
.kk-login-alt a:hover { color: #1f6feb; }

.kk-dashboard > p:last-child { margin: 1.25rem 0 0; }
.kk-dashboard > p:last-child a { font-size: .92rem; color: var(--kk-muted); }
.kk-dashboard > p:last-child a:hover { color: var(--kk-accent); }

/* ----------------------------------------------------------------- gated content */

.kk-restricted {
    max-width: 460px;
    padding: 1.5rem;
    background: var(--kk-surface-alt);
    border: 1px dashed var(--kk-line);
    border-radius: var(--kk-radius);
    text-align: center;
    color: var(--kk-muted);
}

/* ----------------------------------------------------------------- responsive */

@media (max-width: 520px) {
    .kk-login-form,
    .kk-signup-form,
    .kk-cancel-form,
    .kk-dashboard { padding: 1.15rem; }
    .kk-dashboard-table th { width: auto; }
}