/* ============================================================
   auth.css — Login / Register / Forgot Password
   Folosește variabile CSS din home.css când sunt disponibile,
   cu fallback pe culorile dark admin.
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.auth-page-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--nav-h, 68px) + 1.5rem) 1rem 2rem;
    min-height: 100vh;
    background: var(--c-bg, #161a1e);
}

/* ── Card ─────────────────────────────────────────────────── */
.auth-card {
    width: 100%;
    max-width: 550px;
    background: var(--c-bg2, #1d2328);
    border: 1px solid var(--c-border, #3f3f46);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.14);
    overflow: hidden;
}

.auth-card-wide { max-width: 700px; }

/* ── Card Header ──────────────────────────────────────────── */
.auth-card-header {
    padding: 1.75rem 2rem 1.5rem;
    background: var(--c-bg3, #272d33);
    border-bottom: 1px solid var(--c-border, #3f3f46);
    text-align: center;
}

.auth-card-header h2 {
    margin: 0 0 .35rem;
    color: var(--c-text, #d9d1d1);
    font-size: 1.6rem;
    font-weight: 700;
}

.auth-card-header p {
    margin: 0;
    color: var(--c-text2, #94a3b8);
    font-size: .9rem;
}

/* ── Card Body ────────────────────────────────────────────── */
.auth-card-body { padding: 1.75rem 2rem; }

/* ── Alerts ───────────────────────────────────────────────── */
.auth-alert {
    padding: .875rem 1.25rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.auth-alert-error {
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(185,28,28,.1));
    border: 1px solid rgba(239,68,68,.35);
    border-left: 4px solid #ef4444;
    color: #fca5a5;
}

.auth-alert-success {
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(5,150,105,.1));
    border: 1px solid rgba(16,185,129,.35);
    border-left: 4px solid #10b981;
    color: #6ee7b7;
}

/* ── Form groups ──────────────────────────────────────────── */
.auth-form-group { margin-bottom: 1.1rem; }

.auth-form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-text2, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .4rem;
}

.auth-form-group input[type="text"],
.auth-form-group input[type="email"],
.auth-form-group input[type="password"],
.auth-form-group input[type="tel"],
.auth-form-group textarea,
.auth-form-group select {
    width: 100%;
    background: var(--c-bg, #27272a);
    border: 2px solid var(--c-border, #3f3f46);
    border-radius: 8px;
    padding: .7rem 1rem;
    color: var(--c-text, #f3f4f6);
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .2s, background .2s, box-shadow .2s;
    outline: none;
    box-sizing: border-box;
}

.auth-form-group textarea { resize: vertical; }

.auth-form-group input:focus,
.auth-form-group textarea:focus,
.auth-form-group select:focus {
    border-color: var(--c-blue, #3498db);
    background: var(--c-bg2, #18181b);
    box-shadow: 0 0 0 3px rgba(52,152,219,.15);
}

.auth-form-group input::placeholder,
.auth-form-group textarea::placeholder { color: var(--c-text3, #52525b); }

.auth-form-group select option {
    background: var(--c-bg2, #1d2328);
    color: var(--c-text, #f3f4f6);
}

.auth-form-group small {
    display: block;
    font-size: .75rem;
    color: var(--c-text3, #64748b);
    margin-top: .3rem;
}

/* ── Password field cu eye toggle ─────────────────────────── */
.auth-pwd-wrap { position: relative; display: flex; align-items: center; }
.auth-pwd-wrap input { padding-right: 3rem !important; }

.auth-pwd-eye {
    position: absolute; right: .75rem;
    background: none; border: none; cursor: pointer;
    color: var(--c-text2, #94a3b8);
    font-size: 1rem; padding: .25rem; line-height: 1;
    transition: color .2s;
}
.auth-pwd-eye:hover { color: var(--c-text, #cbd5e0); }

/* ── Password strength bar ────────────────────────────────── */
.auth-pwd-strength {
    height: 4px; border-radius: 2px; margin-top: .4rem;
    background: var(--c-border, #3f3f46); overflow: hidden;
}
.auth-pwd-strength-bar {
    height: 100%; border-radius: 2px; width: 0;
    transition: width .3s, background .3s;
}

/* ── reCAPTCHA ────────────────────────────────────────────── */
.auth-recaptcha { display: flex; justify-content: center; margin: 1.25rem 0; }

/* ── Submit button ────────────────────────────────────────── */
.auth-submit {
    width: 100%; padding: .8rem 1.5rem;
    background: linear-gradient(135deg, var(--c-blue, #3498db), var(--c-blue2, #2980b9));
    color: #fff; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: filter .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    font-family: inherit;
}
.auth-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52,152,219,.3);
}
.auth-submit:active { transform: translateY(0); }

.auth-submit--free {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 4px rgba(34,197,94,.25);
}
.auth-submit--free:hover { box-shadow: 0 4px 12px rgba(34,197,94,.35); }

/* ── Card Footer ──────────────────────────────────────────── */
.auth-card-footer {
    padding: 1rem 2rem 1.25rem;
    text-align: center;
    border-top: 1px solid var(--c-border, #3f3f46);
    background: var(--c-bg3, #272d33);
    font-size: .875rem;
    color: var(--c-text2, #94a3b8);
}
.auth-card-footer a { color: var(--c-blue, #3498db); text-decoration: none; transition: color .2s; }
.auth-card-footer a:hover { color: #5dade2; text-decoration: underline; }

/* ── Section title ────────────────────────────────────────── */
.auth-section-title {
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--c-blue, #3498db);
    margin: 1.5rem 0 .75rem;
    display: flex; align-items: center; gap: .5rem;
}
.auth-section-title::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, rgba(52,152,219,.4), transparent);
}

/* ── Form rows ────────────────────────────────────────────── */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0; }
.auth-row.single { grid-template-columns: 1fr; }

/* ── Type selector ────────────────────────────────────────── */
.auth-type-selector {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1.5rem 2rem 0;
}

.auth-type-btn {
    position: relative;
    border: 2px solid var(--c-border, #3f3f46);
    border-radius: 10px; padding: 1.25rem 1rem; text-align: center;
    cursor: pointer; background: var(--c-bg3, #27272a);
    transition: border-color .2s, background .2s;
}
.auth-type-btn input { position: absolute; opacity: 0; pointer-events: none; }

.auth-type-icon  { font-size: 2rem; display: block; margin-bottom: .5rem; }
.auth-type-label { font-weight: 700; font-size: .95rem; color: var(--c-text, #d9d1d1); display: block; }
.auth-type-desc  { font-size: .78rem; color: var(--c-text2, #94a3b8); margin-top: .25rem; display: block; }

.auth-type-btn:hover { border-color: var(--c-blue, #3498db); background: rgba(52,152,219,.06); }
.auth-type-btn.active { border-color: var(--c-blue, #3498db); background: rgba(52,152,219,.1); }
.auth-type-btn.active .auth-type-label { color: var(--c-blue, #5dade2); }

/* ── Services checkboxes ──────────────────────────────────── */
.auth-services-grid { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }

.auth-service-check {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem;
    border: 2px solid var(--c-border, #3f3f46);
    border-radius: 8px; cursor: pointer; font-size: .85rem;
    color: var(--c-text, #d9d1d1);
    background: var(--c-bg3, #27272a);
    transition: border-color .2s, background .2s;
}
.auth-service-check input { width: 15px; height: 15px; accent-color: var(--c-blue, #3498db); cursor: pointer; }
.auth-service-check:has(input:checked) { border-color: var(--c-blue, #3498db); background: rgba(52,152,219,.1); }

/* ── Google Maps container ────────────────────────────────── */
.auth-map-container {
    margin-top: .75rem;
    border: 2px solid var(--c-border, #3f3f46);
    border-radius: 10px; overflow: hidden; display: none;
}
.auth-map-container #map { height: 280px; width: 100%; }

.auth-map-coords {
    display: flex; gap: .75rem; padding: .75rem;
    background: var(--c-bg2, rgba(0,0,0,.3));
    font-size: .8rem; color: var(--c-text2, #94a3b8);
    border-top: 1px solid var(--c-border, #3f3f46);
}
.auth-map-coords span { display: flex; align-items: center; gap: .3rem; }
.auth-map-coords strong { color: #10b981; }

/* ── Notice box ───────────────────────────────────────────── */
.auth-notice {
    padding: .75rem 1rem;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 8px; font-size: .82rem;
    color: #797979; line-height: 1.6; margin-top: 1rem;
}

/* ── Done state ───────────────────────────────────────────── */
.auth-done { padding: 3rem 2rem; text-align: center; }
.auth-done-icon { font-size: 4rem; margin-bottom: 1rem; }
.auth-done h2 { font-size: 1.4rem; margin: 0 0 .75rem; color: var(--c-text, #d9d1d1); }
.auth-done p { color: var(--c-text2, #94a3b8); line-height: 1.7; margin: 0; }

.auth-done-steps {
    margin-top: 1.5rem; padding: 1rem 1.25rem;
    background: rgba(52,152,219,.08);
    border: 1px solid rgba(52,152,219,.25);
    border-radius: 10px; font-size: .88rem;
    color: var(--c-text2, #5dade2); text-align: left; line-height: 1.9;
}

.auth-done-link {
    display: inline-block; margin-top: 1.5rem; padding: .65rem 1.5rem;
    background: var(--c-blue, rgba(52,152,219,.1));
    border: 1px solid rgba(52,152,219,.35);
    border-radius: 8px; color: #fff; text-decoration: none;
    font-size: .9rem; font-weight: 600; transition: filter .2s;
}
.auth-done-link:hover { filter: brightness(1.1); }

/* ── OAuth ────────────────────────────────────────────────── */
.oauth-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.25rem 0; color: var(--c-text3, #8a9bb5); font-size: .82rem;
}
.oauth-divider::before,
.oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border, rgba(255,255,255,.1)); }

.oauth-btns { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .5rem; }

.oauth-btn {
    display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem;
    border-radius: 10px; border: 1px solid var(--c-border, rgba(255,255,255,.13));
    background: var(--c-bg3, rgba(255,255,255,.04));
    color: var(--c-text, #e2e8f0); font-size: .9rem; font-weight: 500;
    text-decoration: none; transition: background .18s, border-color .18s; cursor: pointer;
}
.oauth-btn:hover { background: var(--c-bg4, rgba(255,255,255,.09)); border-color: var(--c-border2, rgba(255,255,255,.25)); }
.oauth-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.oauth-btn span { flex: 1; text-align: center; }

/* ── Custom Select (pentru selecturi cu steaguri emoji) ───── */
.auth-form-group .custom-select-wrapper { position: relative; width: 100%; }
.auth-form-group .custom-select-wrapper .select-display {
    width: 100%; box-sizing: border-box;
    background: var(--c-bg, #27272a); border: 2px solid var(--c-border, #3f3f46);
    border-radius: 8px; padding: .7rem 2.2rem .7rem 1rem;
    color: var(--c-text, #f3f4f6); font-size: .95rem; cursor: pointer;
    outline: none; transition: border-color .2s, background .2s;
    font-family: 'FlagEmoji', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.auth-form-group .custom-select-wrapper .select-display:focus,
.auth-form-group .custom-select-wrapper.open .select-display {
    border-color: var(--c-blue, #3498db);
    background: var(--c-bg2, #18181b);
}
.auth-form-group .custom-select-wrapper .select-arrow {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    color: var(--c-text3, #71717a); font-size: .7rem; pointer-events: none;
    transition: transform .25s; z-index: 1;
}
.auth-form-group .custom-select-wrapper.open .select-arrow { transform: translateY(-50%) rotate(180deg); }
.auth-form-group .select-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--c-bg2, #1d2328); border: 1px solid var(--c-border, #3f3f46);
    border-radius: 8px; max-height: 260px; display: flex; flex-direction: column;
    z-index: 9999; opacity: 0; visibility: hidden;
    transform: translateY(-8px); transition: all .2s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.auth-form-group .custom-select-wrapper.open .select-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.auth-form-group .options-list { overflow-y: auto; flex: 1; padding: .35rem; }
.auth-form-group .option-item {
    padding: .5rem .65rem; color: var(--c-text, #f3f4f6); cursor: pointer;
    border-radius: 6px; display: flex; align-items: center; gap: .5rem;
    font-size: .875rem; transition: background .15s;
}
.auth-form-group .option-item:hover  { background: var(--c-bg3, #272d33); }
.auth-form-group .option-item.selected { background: rgba(52,152,219,.15); }
.auth-form-group .option-item.hidden { display: none; }
.auth-form-group .option-icon {
    font-size: 1rem; width: 1.4rem; min-width: 1.4rem; text-align: center;
    font-family: 'FlagEmoji', "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}
.auth-form-group .no-results { padding: 1rem; text-align: center; color: var(--c-text3, #71717a); font-size: .8rem; }

/* ── Google Maps autocomplete ─────────────────────────────── */
.pac-container { z-index: 9999 !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 540px) {
    .auth-row { grid-template-columns: 1fr; }
    .auth-type-selector { gap: .5rem; padding: 1rem 1rem 0; }
    .auth-services-grid { gap: .5rem; }
}

@media (max-width: 480px) {
    .auth-page-wrap { padding-top: calc(var(--nav-h, 68px) + 0.75rem); }
    .auth-card { border-radius: 10px; }
    .auth-card-header { padding: 1.25rem 1.25rem 1rem; }
    .auth-card-header h2 { font-size: 1.35rem; }
    .auth-card-body { padding: 1.25rem; }
    .auth-card-footer { padding: .875rem 1.25rem 1rem; }
    .auth-recaptcha { transform: scale(.92); transform-origin: center; }
    .auth-type-selector { grid-template-columns: 1fr 1fr; }
}