/* FILE_VERSION = 1.0.0
 * VOGO Login Form Style - formularul de conectare din magazin (form.vogo-login-form, din login-shortcode.php),
 * in panoul lateral „Conectare” si pe pagina /login/. Aceleasi valori ca pagina wp-login.php (vogo-login-style.css):
 * campuri de 48px, eticheta pe conturul de sus, iconite outline albastre #0F6CBD, colturi 5px, fara Facebook.
 * Codul formularului pune stiluri inline pe randul de jos (flex: 1, min-width): aici se suprascriu cu !important.
 */

/* =========================================================================
 * SECTIUNI:
 *   1. Variabile locale
 *   2. Campurile si etichetele pe contur
 *   3. Tine-ma minte si linkurile
 *   4. Randul de jos: reCAPTCHA, butonul de autentificare, Google, unul sub altul
 *   5. Butonul Google (Nextend), fara Facebook
 *   6. Intrebarea „Nu ai inca un cont?”
 * ========================================================================= */

/* 1. Variabile locale, numai pe acest formular si pe panoul lui */
form.vogo-login-form,
.login-form-side {
    --vlf-blue: #0F6CBD;
    --vlf-blue-dark: #0b5394;
    --vlf-blue-soft: rgba(15, 108, 189, 0.14);
    --vlf-surface: #ffffff;
    --vlf-surface-hover: #f5f9fd;
    --vlf-border: #d5dbe3;
    --vlf-border-hover: #a9b6c4;
    --vlf-divider: #e6eaf0;
    --vlf-text: #1c2b3a;
    --vlf-muted: #5f6b7a;
    --vlf-radius: 5px;
}

/* 2. Campurile: inaltime egala, iconita outline in stanga, eticheta pe conturul de sus */
form.vogo-login-form .floating-group .form-row {
    position: relative;
    margin: 0 0 22px;
    padding: 0;
}

form.vogo-login-form .floating-group input#username,
form.vogo-login-form .floating-group input#password {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--vlf-text);
    border: 1px solid var(--vlf-border);
    border-radius: var(--vlf-radius);
    padding: 0 14px 0 44px;
    background-color: var(--vlf-surface);
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px 20px;
    box-shadow: none;
}

form.vogo-login-form .floating-group input#username {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

form.vogo-login-form .floating-group input#password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6CBD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

form.vogo-login-form .floating-group input#username:hover,
form.vogo-login-form .floating-group input#password:hover {
    border-color: var(--vlf-border-hover);
}

form.vogo-login-form .floating-group input#username:focus,
form.vogo-login-form .floating-group input#password:focus {
    border-color: var(--vlf-blue);
    box-shadow: 0 0 0 3px var(--vlf-blue-soft);
    outline: none;
}

/* Eticheta sta pe conturul de sus al campului; fundalul alb acopera linia sub text */
form.vogo-login-form .floating-group label[for="username"],
form.vogo-login-form .floating-group label[for="password"] {
    position: absolute !important;
    top: -8px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 3;
    display: block;
    margin: 0 !important;
    padding: 0 6px !important;
    background: var(--vlf-surface) !important;
    border-radius: var(--vlf-radius);
    color: var(--vlf-blue) !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 16px !important;
    white-space: nowrap;
    pointer-events: none;
}

/* 3. Tine-ma minte la stanga, linkurile la dreapta; pe latime mica linkurile trec pe randul urmator */
form.vogo-login-form > p.form-row:not(.woocommerce-form-row) {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px 16px;
    margin: 0 0 18px;
    padding: 0;
}

form.vogo-login-form .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--vlf-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

form.vogo-login-form .woocommerce-form-login__rememberme input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--vlf-blue);
}

form.vogo-login-form .woocommerce-links {
    font-size: 14px;
    color: var(--vlf-muted);
    white-space: nowrap;
}

form.vogo-login-form .woocommerce-links a {
    color: var(--vlf-blue);
    font-weight: 600;
    text-decoration: none;
}

form.vogo-login-form .woocommerce-links a:hover {
    text-decoration: underline;
}

/* 4. Randul de jos: elementele unul sub altul, pe toata latimea; reCAPTCHA se micsoreaza cand nu incape (304px) */
form.vogo-login-form .custom-login-footer {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 0 !important;
    container-type: inline-size;
}

form.vogo-login-form .custom-login-footer > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 100%;
}

form.vogo-login-form .custom-login-footer .g-recaptcha {
    height: 78px;
    transform-origin: left top;
}

@container (max-width: 303px) {
    form.vogo-login-form .custom-login-footer .g-recaptcha {
        transform: scale(0.85);
        height: 66px;
    }
}

@container (max-width: 258px) {
    form.vogo-login-form .custom-login-footer .g-recaptcha {
        transform: scale(0.78);
        height: 61px;
    }
}

form.vogo-login-form .woocommerce-form-login__submit {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    border: 0 !important;
    border-radius: var(--vlf-radius) !important;
    background: var(--vlf-blue) !important;
    color: #ffffff !important;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

form.vogo-login-form .woocommerce-form-login__submit:hover,
form.vogo-login-form .woocommerce-form-login__submit:focus {
    background: var(--vlf-blue-dark) !important;
    box-shadow: 0 0 0 3px var(--vlf-blue-soft);
}

/* 5. Butonul Google: cat campurile, alb cu contur, iconita albastra la 14px, textul centrat */
form.vogo-login-form .nsl-container {
    margin: 0;
    padding: 0;
}

/* Nextend pune lista pe inline-grid, cu o regula mai puternica: aici o intindem pe toata latimea */
form.vogo-login-form .nsl-container .nsl-container-buttons {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    padding: 0;
}

/* Facebook nu se mai ofera la autentificare (la fel ca pe wp-login.php) */
form.vogo-login-form .nsl-container .nsl-container-buttons a[data-provider="facebook"] {
    display: none !important;
}

form.vogo-login-form .nsl-container .nsl-container-buttons a {
    display: block;
    width: 100%;
    max-width: none !important;
    flex: 0 0 auto;
    margin: 0;
    text-decoration: none;
}

form.vogo-login-form .nsl-container .nsl-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 48px;
    box-sizing: border-box;
    background-color: var(--vlf-surface) !important;
    border: 1px solid var(--vlf-border);
    border-radius: var(--vlf-radius);
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

form.vogo-login-form .nsl-container .nsl-button:hover {
    border-color: var(--vlf-blue);
    background-color: var(--vlf-surface-hover) !important;
}

form.vogo-login-form .nsl-container .nsl-button-svg-container {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

form.vogo-login-form .nsl-container .nsl-button-svg-container svg {
    width: 20px;
    height: 20px;
}

/* Iconita marcii in acelasi albastru ca restul iconitelor VOGO */
form.vogo-login-form .nsl-container .nsl-button-svg-container svg path {
    fill: var(--vlf-blue);
}

form.vogo-login-form .nsl-container .nsl-button-label-container {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    color: var(--vlf-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

form.vogo-login-form .nsl-container .nsl-button-google .nsl-button-label-container::after {
    content: "Continu\0103  cu Google";
}

/* 6. „Nu ai inca un cont?”: separat de formular printr-o linie, butonul cu contur albastru, cat campurile */
.login-form-side .create-account-question {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--vlf-divider);
    text-align: center;
}

.login-form-side .create-account-question p {
    margin: 0 0 10px;
    color: var(--vlf-muted);
    font-size: 14px;
}

.login-form-side .create-account-question .create-account-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid var(--vlf-blue) !important;
    border-radius: var(--vlf-radius) !important;
    background: var(--vlf-surface) !important;
    color: var(--vlf-blue) !important;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}

.login-form-side .create-account-question .create-account-button:hover {
    background: var(--vlf-surface-hover) !important;
}