/**
 * iTiles — stiluri comune pentru paginile de autentificare
 * (intra in cont, ai uitat parola, resetare parola).
 *
 * Fisier separat, nu clase Tailwind: clasele noi nu sunt compilate fara
 * `npm run build`, iar aici avem nevoie de reguli care se schimba des.
 */

/* ---------------------------------------------------------------- container */

/* Cardul se centreaza pe verticala in spatiul ramas sub header, ca sa nu mai
   pluteasca peste un gol mare. `--page-header-height` e setat de header.phtml. */
.itiles-auth {
    width: 100%;
    max-width: 55rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
}

/* Centrare verticala doar pe paginile de sine statatoare (login / parola uitata /
   creare cont). In zona „Contul meu" cardul sta langa navigatie, deci nu se centreaza. */
.itiles-auth--center {
    justify-content: center;
    min-height: calc(100vh - var(--page-header-height, 4rem) - 9rem);
}

.itiles-auth--narrow { max-width: 30rem; }

.itiles-auth--form { max-width: 40rem; margin: 0; padding-left: 0; padding-right: 0; }

@media (max-width: 639px) {
    .itiles-auth { padding: 1rem .75rem 2rem; }
    .itiles-auth--center { min-height: 0; }
}

.itiles-auth-card {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -28px rgba(16, 24, 40, .35);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 860px) {
    .itiles-auth-card--split { grid-template-columns: 1.05fr .95fr; }
}

.itiles-auth-pane { padding: 2rem; }

@media (max-width: 639px) {
    .itiles-auth-pane { padding: 1.5rem 1.25rem; }
}

/* ------------------------------------------------------------------- antet */

.itiles-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.02em;
    margin: 0;
}

.itiles-auth-sub {
    font-size: .875rem;
    line-height: 1.45;
    color: #8b929c;
    margin: .375rem 0 1.75rem;
}

/* ------------------------------------------------------------------ campuri */

.itiles-auth-field { margin-bottom: 1.125rem; }

.itiles-auth-labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
}

.itiles-auth-label { font-size: .8125rem; font-weight: 600; color: #374151; }

.itiles-auth-forgot { font-size: .8125rem; font-weight: 500; color: #6b7280; text-decoration: none; }
.itiles-auth-forgot:hover { color: #111827; text-decoration: underline; }

.itiles-auth-control { position: relative; }

.itiles-auth input.form-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .625rem;
    padding: .7rem .875rem;
    font-size: .9375rem;
    color: #111827;
    background: #fff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.itiles-auth input.form-input::placeholder { color: #9ca3af; }

.itiles-auth input.form-input:focus {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
}

.itiles-auth-control--pass input.form-input { padding-right: 2.75rem; }

.itiles-auth-eye {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #9aa1ab;
    cursor: pointer;
    border-radius: .375rem;
}

.itiles-auth-eye:hover { color: #4b5563; }

.itiles-auth-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: #4b5563;
    margin-bottom: 1.125rem;
}

/* ------------------------------------------------------------------ actiuni */

.itiles-auth-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1f2937;
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    border: 0;
    border-radius: .625rem;
    padding: .8rem 1.25rem;
    cursor: pointer;
    transition: background-color .15s ease;
    margin-top: .375rem;
}

.itiles-auth-submit:hover { background: #111827; }
.itiles-auth-submit:disabled { opacity: .6; cursor: not-allowed; }

.itiles-auth-backrow { margin-top: 1rem; text-align: center; }

.itiles-auth-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
}

.itiles-auth-back:hover { color: #111827; }

.itiles-auth-or {
    display: flex;
    align-items: center;
    gap: .875rem;
    font-size: .75rem;
    color: #a6acb5;
    margin: 1.5rem 0 1rem;
}

.itiles-auth-or::before,
.itiles-auth-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #eceef1;
}

.itiles-auth-socials { display: grid; grid-template-columns: 1fr; gap: .625rem; }

@media (min-width: 420px) {
    .itiles-auth-socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.itiles-auth-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid #dfe3e8;
    background: #fff;
    border-radius: .625rem;
    padding: .65rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: #2f3742;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.itiles-auth-social:hover { background: #f6f7f9; border-color: #cfd5dc; }

.itiles-auth-error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: 1rem;
    background: #fdeceb;
    border: 1px solid #f7cdc9;
    border-radius: .625rem;
    padding: .7rem .875rem;
    font-size: .875rem;
    color: #b42318;
}

/* --------------------------------------------------- panoul „Nu ai cont?" */

.itiles-auth-aside {
    padding: 2rem;
    background: #f7f8f9;
    border-top: 1px solid #eceef1;
    /* coloana flex, ca CTA-ul sa se ancoreze jos si cele doua coloane sa se
       termine la aceeasi inaltime */
    display: flex;
    flex-direction: column;
}

@media (min-width: 860px) {
    .itiles-auth-aside { border-top: 0; border-left: 1px solid #eceef1; }
}

@media (max-width: 639px) {
    .itiles-auth-aside { padding: 1.25rem; }
}

.itiles-auth-aside-title { font-size: 1.125rem; font-weight: 700; color: #111827; margin: 0 0 1.125rem; }

.itiles-auth-benefits { list-style: none; margin: 0; padding: 0; }

.itiles-auth-benefits li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.45;
    color: #3f4750;
    margin-bottom: .875rem;
}

.itiles-auth-benefits svg { flex: 0 0 auto; color: #16a34a; margin-top: .15rem; }

.itiles-auth-asidefoot { margin-top: auto; padding-top: 1.75rem; }

.itiles-auth-create {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd5dc;
    background: #fff;
    border-radius: .625rem;
    padding: .8rem 1.25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.itiles-auth-create:hover { border-color: #9aa1ab; background: #fbfcfc; }

.itiles-auth-note { font-size: .8125rem; color: #9aa1ab; text-align: center; margin: .75rem 0 0; }

/* varianta compacta de mobil */
.itiles-auth-aside--compact { display: none; }
.itiles-auth-aside--compact p { font-size: .875rem; color: #6b7280; margin: .375rem 0 .75rem; line-height: 1.45; }
.itiles-auth-aside--compact a { font-size: .875rem; font-weight: 600; color: #111827; text-decoration: underline; }

@media (max-width: 859px) {
    .itiles-auth-aside--full { display: none; }
    .itiles-auth-aside--compact { display: block; }
}

/* nota legala reCAPTCHA */
.itiles-auth-legal { margin-top: 1.25rem; font-size: .75rem; line-height: 1.4; color: #a6acb5; }
.itiles-auth-legal a { color: #6b7280; text-decoration: underline; }

/* --------------------------------------------------------- creare cont */

.itiles-auth-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }

@media (min-width: 420px) {
    .itiles-auth-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Campurile randate de widget-urile native (Nume, DOB, TVA...) trebuie sa arate
   ca ale noastre — ele vin cu markup `.field > .label + .control`. */
.itiles-auth .field { margin-bottom: 1.125rem; }
.itiles-auth .field .label { display: block; font-size: .8125rem; font-weight: 600; color: #374151; margin-bottom: .4rem; }
.itiles-auth .field .label span { font-weight: 600; }
.itiles-auth .field select.form-select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .625rem;
    padding: .7rem .875rem;
    font-size: .9375rem;
    color: #111827;
    background-color: #fff;
}

/* bara de putere a parolei — barele in stanga, eticheta in dreapta, pe acelasi rand.
   Containerul nativ e PRIMUL in DOM (selectorul `~` are nevoie de asta), iar
   `row-reverse` il muta vizual la dreapta. */
.itiles-auth-strength {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
    min-height: 1rem;
}

.itiles-auth-strength-bars { display: flex; gap: .3rem; flex: 1 1 auto; }

.itiles-auth-strength-bars span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: #e7eaee;
    transition: background-color .2s ease;
}

#password-strength-meter-container {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    flex: 0 1 auto;
    font-size: .75rem;
    color: #9aa1ab;
    text-align: right;
}

#password-strength-meter-label { font-weight: 600; }

.itiles-auth-strength-hint { color: #a6acb5; }

/* Culorile segmentelor, dupa clasa pe care JS-ul nativ o pune pe container. */
#password-strength-meter-container.password-weak ~ .itiles-auth-strength-bars span:nth-child(1) { background: #ef4444; }

#password-strength-meter-container.password-medium ~ .itiles-auth-strength-bars span:nth-child(-n+2) { background: #f59e0b; }

#password-strength-meter-container.password-strong ~ .itiles-auth-strength-bars span:nth-child(-n+3),
#password-strength-meter-container.password-very-strong ~ .itiles-auth-strength-bars span { background: #16a34a; }

#password-strength-meter-container.password-weak { color: #b42318; }
#password-strength-meter-container.password-medium { color: #a06a08; }
#password-strength-meter-container.password-strong,
#password-strength-meter-container.password-very-strong { color: #10794a; }

/* checkbox newsletter */
.itiles-auth-check {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 1.125rem 0;
}

.itiles-auth-check input[type="checkbox"] {
    margin-top: .15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: .3rem;
    border: 1px solid #d1d5db;
    accent-color: #111827;
    flex: 0 0 auto;
}

.itiles-auth-check label { font-size: .8125rem; line-height: 1.4; color: #4b5563; cursor: pointer; margin: 0; }

.itiles-auth-foot { font-size: .875rem; color: #6b7280; text-align: center; margin: 1rem 0 0; }
.itiles-auth-foot a { font-weight: 600; color: #111827; text-decoration: underline; }

/* ------------------------------------------------- formulare din zona de cont */

.itiles-auth-sep { border: 0; border-top: 1px solid #f0f2f4; margin: 1.5rem 0; }

/* rand-comutator: „Schimbă emailul" / „Schimbă parola" */
.itiles-auth-toggle {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .875rem;
    border: 1px solid #eceef1;
    border-radius: .625rem;
    margin-bottom: .625rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.itiles-auth-toggle:hover { border-color: #dfe3e8; background: #fbfcfc; }

.itiles-auth-toggle input[type="checkbox"] {
    margin-top: .175rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: .3rem;
    border: 1px solid #d1d5db;
    accent-color: #111827;
    flex: 0 0 auto;
}

.itiles-auth-toggle label { display: block; cursor: pointer; margin: 0; min-width: 0; }

.itiles-auth-toggle-title {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #2f3742;
    line-height: 1.3;
}

.itiles-auth-toggle-note {
    display: block;
    font-size: .75rem;
    color: #9aa1ab;
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* bara de actiuni: link inapoi la stanga, buton la dreapta */
.itiles-auth-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.itiles-auth-submit--inline { width: auto; margin-top: 0; }

@media (max-width: 479px) {
    .itiles-auth-actions { flex-direction: column-reverse; align-items: stretch; }
    .itiles-auth-submit--inline { width: 100%; }
    .itiles-auth-actions .itiles-auth-back { justify-content: center; }
}