/* css/auth.css — Direction B (dark) chrome + form recipes for auth/register.php
   and auth/login.php only.

   Task 072 (_docs/releases/v1.0/sprint-v1.0.5/tasks/072-register-login-shared-tokens-form-ux.md).
   Loaded via $extraStyles, AFTER css/design-tokens.css (needs its --bg/--surface/
   --border/--ink/--a1/--a2/--danger-*, --success-* tokens) and (register.php only)
   AFTER css/landing.css (needs its .hscroll-track/.hscroll-item carousel atom).

   Defines its own .form-group/.form-label/.form-control/.btn/.btn-primary/.alert
   vocabulary — same STRUCTURE as admin-template.css's same-named classes
   (admin-template.css:929-956 form fields, :1109-1139 buttons, :743-774 alerts),
   dark VALUES instead of the light admin theme. Safe because the auth pages
   (register.php, login.php) never load admin-template.css (that file has never
   been used on a public page — see UI_COMPONENT_LIBRARY.md §2.5/§3 known-drift),
   so the two definitions never cascade together. */

/* ============================================================
   Page chrome
   ============================================================ */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 20px;
    box-sizing: border-box;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 40px;
    box-sizing: border-box;
}

/* register.php's form (5 fields + plan picker) needs more room than login.php's
   2-field card — same chrome, wider cap. */
.auth-card.auth-card-wide {
    max-width: 520px;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-logo img {
    width: 64px;
    height: 64px;
}

.auth-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ink);
    margin: 10px 0 10px 0;
}

.auth-subtitle {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--ink-soft);
}

.auth-footer a {
    color: var(--a1);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 0.9rem;
}

.auth-links a {
    color: var(--a1);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* ============================================================
   Form basics (canonical .form-group/.form-label/.form-control
   vocabulary, dark values — see file header)
   ============================================================ */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--bg-alt);
    color: var(--ink);
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-control::placeholder {
    color: var(--ink-faint);
}

.form-control:focus {
    outline: none;
    border-color: var(--a1);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.form-checkbox input {
    width: 18px;
    height: 18px;
}

.form-checkbox label {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

/* ============================================================
   Recipe §2.4.1 — input with leading icon
   ============================================================ */
.form-control-icon-wrap {
    position: relative;
}

.form-control-icon-wrap .form-control {
    padding-left: 40px;
}

.form-control-icon-wrap .form-control-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    pointer-events: none;
    display: flex;
}

/* ============================================================
   Recipe §2.4.2 — password visibility toggle
   ============================================================ */
.form-control-icon-wrap .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--ink-faint);
    display: flex;
    border-radius: 6px;
}

.form-control-icon-wrap .password-toggle:hover,
.form-control-icon-wrap .password-toggle:focus-visible {
    color: var(--a1);
}

.form-control-icon-wrap .password-toggle:focus-visible {
    outline: 2px solid var(--a1);
    outline-offset: 2px;
}

.form-control-icon-wrap.has-toggle .form-control {
    padding-right: 40px;
}

/* ============================================================
   Recipe §2.4.3 — field-level validation error
   ============================================================ */
.form-control.is-invalid {
    border-color: var(--danger-ink);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--danger-bg);
}

.form-error {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--danger-ink);
    font-size: 0.85rem;
    margin-top: 6px;
}

/* ============================================================
   Button
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-primary {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--a1), var(--a2));
    color: var(--bg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-primary:active {
    transform: translateY(0);
}

/* ============================================================
   Alert
   ============================================================ */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger-ink);
    border: 1px solid var(--danger-ink);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-ink);
    border: 1px solid var(--success-ink);
}

/* ============================================================
   Free-trial badge (register.php)
   ============================================================ */
.free-trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--success-bg);
    color: var(--success-ink);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: help;
    position: relative;
    margin-left: 8px;
}

.free-trial-tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-alt);
    color: var(--ink);
    border: 1px solid var(--border);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: var(--shadow-card);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.free-trial-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-alt);
}

.free-trial-badge:hover .free-trial-tooltip,
.free-trial-badge.active .free-trial-tooltip {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 767px) {
    .free-trial-tooltip {
        white-space: normal;
        max-width: 200px;
        font-size: 0.8rem;
    }
}

/* ============================================================
   Plan picker — reuses .hscroll-track/.hscroll-item (css/landing.css,
   task 059) on a new .plan-card shape. register.php only.
   ============================================================ */
.plan-card {
    display: block;
    padding: 15px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--bg-alt);
}

.plan-card:hover {
    border-color: var(--a1);
}

.plan-card.selected {
    border-color: var(--a1);
    background: var(--accent-soft);
}

.plan-card input[type="radio"] {
    margin-right: 8px;
}

.plan-card-name {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 5px;
}

.plan-card-price {
    color: var(--a1);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.plan-card-meta {
    font-size: 0.8rem;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================================
   Google Sign-In (task 072/074) — .btn-google + .auth-divider
   ============================================================ */

/* Deliberate exception to the --ink/--surface token palette: Google's brand
   guidelines require a white pill with their exact 4-color "G" mark and a
   specific ink color for the label — not a themeable brand color. Noted here
   per UI_COMPONENT_LIBRARY.md §1 rather than silently deviating. */
.btn-google {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}

.btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.btn-google:focus-visible {
    outline: 2px solid var(--a1);
    outline-offset: 2px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ============================================================
   Phone soft-gate (task 074, auth/google/complete-profile.php)
   ============================================================ */
.phone-gate-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-soft);
    color: var(--a1);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.btn-skip {
    display: inline-flex;
    color: var(--warning-ink);
    background: var(--warning-bg);
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-skip:hover {
    text-decoration: underline;
}

/* 2026-08-14, owner: "layout trang register chỗ này dùng scroll quá xấu".
   The plan picker used the .hscroll-track carousel atom, which is the right
   shape for the landing/pricing sections it was built for (wide viewport-sized
   rows) and the wrong one here: .auth-card is a fixed 420-520px column, so the
   atom produced a stub scrollbar showing roughly 1.7 of 3 cards, with the
   choice the user came to make hidden off the right edge.

   Now a plain stacked list -- 3 plans, one per row, all visible at once, no
   scrolling. Each card lays its own name/price/meta out as a compact 2-line
   row instead of the carousel's tall 4-line block, so showing all three costs
   less height than scrolling through two did.

   Scoped to .plan-picker: the .hscroll-track/.hscroll-item atom itself is
   untouched and still carries the landing and pricing carousels. */
.plan-picker.hscroll-track {
    display: grid;
    /* minmax(0, …), not plain 1fr: `1fr` is minmax(auto, 1fr), and `auto`
       floors the column at the card's min-content width -- which is wider than
       the auth card on a phone, so the picker overflowed its own container
       (295px column inside a 253px box). minmax(0, …) lets it shrink and the
       card wrap instead. */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
}

.plan-picker.hscroll-track .plan-card.hscroll-item {
    /* Undo the carousel item's flex sizing. */
    flex: none;
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px;
}

.plan-picker .plan-card input[type="radio"] {
    grid-row: 1 / span 2;
    margin-right: 0;
}

.plan-picker .plan-card-name {
    margin-bottom: 0;
}

.plan-picker .plan-card-price {
    margin-bottom: 0;
    justify-self: end;
    font-size: 1rem;
    white-space: nowrap;
}

/* Second line, spanning the two text columns so it sits under both. */
.plan-picker .plan-card-meta {
    grid-column: 2 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* The hint read "Vuốt sang ngang để xem thêm gói →". There is nothing to swipe
   now, and an instruction that describes behaviour the page no longer has is
   worse than no instruction (sprint rule: never state what isn't true). */
.plan-picker + .hscroll-hint {
    display: none;
}

.plan-card.selected {
    /* The underline came along with the carousel styling and made the selected
       card look like a link. The border and accent fill already say "selected". */
    text-decoration: none;
}

/* Narrow phones: name, price and meta stack under the radio instead of trying
   to share one row. "1.000.000 VNĐ / tháng" alone is ~173px, so a single row
   cannot hold name + price inside a 253px card. */
@media (max-width: 480px) {
    .plan-picker.hscroll-track .plan-card.hscroll-item {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .plan-picker .plan-card input[type="radio"] {
        grid-row: 1 / span 3;
        margin-top: 2px;
    }

    .plan-picker .plan-card-price {
        grid-column: 2;
        justify-self: start;
    }

    .plan-picker .plan-card-meta {
        grid-column: 2;
    }
}