/**
 * Solestra Rental — Kayıt Formu & Giriş Formu
 * Modal (.solestra-auth-form) ile bütünlüklü tasarım.
 */

/* ═══════════════════════════════════════════════════════════
   KAYIT & GİRİŞ FORMU — Modal'daki .solestra-auth-form stilini
   .woocommerce-form-register ve .woocommerce-form-login'e uygula
   ═══════════════════════════════════════════════════════════ */

.woocommerce-form-register,
.woocommerce-form-login {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: "Muli", sans-serif;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}

/* Register sayfası sadece — ortala, 480px'e sınırla */
.solestra-register-wrap .woocommerce-form-register {
    max-width: 480px;
    margin: 0 auto;
}

/* Form row'ları gap sayesinde ayrılır — ekstra margin sıfırlandı */
.woocommerce-form-register .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register p,
.woocommerce-form-login p {
    width: 100%;
}

/* Etiketleri gizle — modal'daki gibi sadece placeholder kullan */
.woocommerce-form-register label:not(.solestra-kvkk-row):not([for*="password-toggle"]),
.woocommerce-form-login label:not(.woocommerce-form__label-for-checkbox):not(.solestra-kvkk-row) {
    display: none !important;
}

/* Tüm input'ları modal stiline uydur */
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="tel"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"] {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    font-family: "Muli", sans-serif !important;
    font-size: 13px !important;
    color: #000 !important;
    background: #fafafa !important;
    transition: border-color 0.2s, background-color 0.2s !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    line-height: 1.4 !important;
    margin: 0px!important;
    height: auto !important;
}

.woocommerce-form-register input:focus,
.woocommerce-form-login input:focus {
    border-color: #000 !important;
    background: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   intl-tel-input v25 CSS Uyumu
   ───────────────────────────────────────────────────────────
   v25'te class yapısı değişti:
     • iti--separate-dial-code → KALDIRILDI
     • iti__flag-container     → iti__country-container
     • iti--show-flags, iti--allow-dropdown aktif class'lar
     • iti__tel-input           → input'un kendisi
   Kütüphane input'a inline style="padding-left: 77px" setliyor;
   !important ile override ediyoruz (inline style'dan güçlü).
   ═══════════════════════════════════════════════════════════ */

.woocommerce-form-register .iti,
.solestra-phone-wrap .iti {
    width: 100%;
    display: block !important;
}

/* Country container (bayrak + dropdown ok'u) — sabit genişlik */
.woocommerce-form-register .iti .iti__country-container,
.solestra-phone-wrap .iti .iti__country-container,
.iti .iti__country-container {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    box-sizing: border-box !important;
}

/* Tel input — padding-left 96px (88 container + 8 boşluk)
   Kütüphanenin JS ile atadığı inline padding'i !important ile eziyoruz. */
.woocommerce-form-register .iti input.iti__tel-input,
.solestra-phone-wrap .iti input.iti__tel-input,
.iti input.iti__tel-input,
.iti input[type="tel"] {
    padding-left: 96px !important;
    box-sizing: border-box !important;
}

/* Dial code (+90) — country container içinde, görünür kalmalı */
.iti__selected-dial-code,
.iti .iti__selected-dial-code {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    font-family: "Muli", sans-serif !important;
    color: #000 !important;
}

/* Eski v<25 class'ları (geriye dönük uyum) — varsa da düzgün render olsun */
.woocommerce-form-register .iti--separate-dial-code .iti__selected-flag,
.solestra-phone-wrap .iti--separate-dial-code .iti__selected-flag,
.iti--separate-dial-code .iti__selected-flag {
    width: 88px !important;
    min-width: 88px !important;
    padding: 0 8px 0 12px !important;
    box-sizing: border-box !important;
}

.woocommerce-form-register .iti--separate-dial-code input[type="tel"],
.solestra-phone-wrap .iti--separate-dial-code input[type="tel"],
.iti--separate-dial-code input[type="tel"] {
    padding-left: 96px !important;
}

/* ─── Mobile — iOS zoom engeli + override garanti ──────── */
@media (max-width: 768px) {
    .solestra-phone-wrap .iti input.iti__tel-input,
    .woocommerce-form-register .iti input.iti__tel-input,
    .iti input.iti__tel-input,
    .iti input[type="tel"] {
        padding-left: 96px !important;
        font-size: 16px !important; /* iOS Safari 16px altında input'a zoom yapar */
    }
    .solestra-phone-wrap .iti .iti__country-container,
    .woocommerce-form-register .iti .iti__country-container,
    .iti .iti__country-container {
        width: 88px !important;
        min-width: 88px !important;
    }
}

.woocommerce-form-register input::placeholder,
.woocommerce-form-login input::placeholder {
    color: #aaa !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
}

/* Submit butonu — modal'daki gibi siyah, uppercase */
.woocommerce-form-register__submit,
.woocommerce-form-login__submit,
.woocommerce-form-register .button[type="submit"],
.woocommerce-form-login .button[type="submit"] {
    width: 100% !important;
    padding: 16px !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: "Muli", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background-color 0.2s ease-out !important;
    margin-top: 4px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.woocommerce-form-register__submit:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register .button[type="submit"]:hover,
.woocommerce-form-login .button[type="submit"]:hover {
    background: #2e2e2e !important;
    color: #fff !important;
}

/* Form başlıkları — uppercase, tracking */
.woocommerce-form-register + h2,
.solestra-register-wrap h2,
.woocommerce-account .entry-header .entry-title,
h2.woocommerce-column__title {
    font-family: "Muli", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin: 0 0 24px !important;
    text-align: center;
}

/* Hata kutusu — modal'daki gibi */
.woocommerce-form-register + ul.woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-error,
ul.woocommerce-error {
    background: #fff5f5 !important;
    color: #c00 !important;
    border: 1px solid #fdd !important;
    border-radius: 0 !important;
    list-style: none !important;
    padding: 12px 16px !important;
    margin: 0 0 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
    text-align: center;
    box-shadow: none !important;
}

.woocommerce-form-register + ul.woocommerce-error li,
ul.woocommerce-error li {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* "Beni hatırla" checkbox + şifremi unuttum ilişkilendirmesi */
.woocommerce-form-login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6a6a6a;
    letter-spacing: 0.02em;
    margin: 4px 0 0;
}

.woocommerce-form-login .lost_password {
    text-align: right;
    margin-top: 8px !important;
    font-size: 12px;
}

.woocommerce-form-login .lost_password a {
    color: #6a6a6a;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.woocommerce-form-login .lost_password a:hover {
    color: #000;
}

/* "Required" asterisk'i sadelleştir */
.woocommerce-form-register .required,
.woocommerce-form-login .required {
    display: none !important;
}

/* ─── Ad + Soyad Yan Yana ──────────────────────────────── */

.solestra-register-name-row {
    display: flex;
    gap: 12px;
    margin: 0 !important;
}

.solestra-register-name-row .form-row {
    flex: 1;
    width: auto !important;
}

@media (max-width: 520px) {
    .solestra-register-name-row {
        flex-direction: column;
        gap: 14px;
    }
}

/* ─── Telefon — intl-tel-input uyumu ────────────────────── */

.solestra-phone-wrap .iti {
    width: 100%;
}

.solestra-phone-wrap .iti input[type="tel"].input-text {
    width: 100%;
    direction: ltr;
}

.woocommerce-form-register input[type="tel"].input-text {
    direction: ltr;
}

/* ─── Giriş Linki ──────────────────────────────────────── */

.solestra-register-login-link {
    text-align: center;
    margin-top: 24px !important;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 13px;
    color: #888;
}

.solestra-register-login-link a {
    color: #000;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #000;
    transition: opacity 0.2s ease-out;
}

.solestra-register-login-link a:hover {
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   Şifre Göster/Gizle Butonu (WooCommerce .show-password-input)
   Trousseau tema WooCommerce varsayılan CSS'ini devre dışı bıraktığı
   için bu stiller burada tanımlanır.
   ═══════════════════════════════════════════════════════════ */

/* ─── Şifre alanı wrapper ─────────────────────────────────── */

.woocommerce form .password-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.woocommerce form .password-input input[type="password"],
.woocommerce form .password-input input[type="text"] {
    padding-right: 2.5rem;
}

/* Edge tarayıcı native "reveal" butonunu gizle */
.woocommerce form .password-input input::-ms-reveal {
    display: none;
}

/* ─── Göster/Gizle Butonu ─────────────────────────────────── */

.woocommerce form .show-password-input {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    color: #000;
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0.7em;
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    opacity: 0.4;
    transition: opacity 0.2s ease-out;
    z-index: 1;
}

.woocommerce form .show-password-input:hover {
    opacity: 0.8;
}

.woocommerce form .show-password-input:focus {
    outline: none;
    opacity: 0.8;
}

/* Göz ikonu (kapalı — şifre gizli) */
.woocommerce form .show-password-input::before {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');
    content: '';
    display: block;
    height: 22px;
    width: 22px;
}

/* Göz ikonu (açık — şifre görünür) */
.woocommerce form .show-password-input.display-password::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
}

.woocommerce form .show-password-input.display-password {
    opacity: 0.7;
}

/* ─── Honeypot (Gizli) ─────────────────────────────────── */

.solestra-hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* ─── Bildirim (Giriş yapılmış / Kayıt kapalı) ─────────── */

.solestra-register-notice {
    text-align: center;
    padding: 40px 24px;
}

.solestra-register-notice p {
    margin: 0 0 20px;
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

/* ─── My-Account Kayıt Yönlendirme ─────────────────────── */

.solestra-register-prompt {
    text-align: center;
    margin-top: 132px;
    padding-top: 0;
    width: 100%;
    clear: both;
}

.solestra-register-prompt-divider {
    position: relative;
    margin-bottom: 24px;
}

.solestra-register-prompt-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.solestra-register-prompt-divider span {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.solestra-register-prompt-text {
    margin: 0 0 16px;
    font-size: 14px;
    color: #666;
}

.solestra-register-prompt-btn {
    display: inline-block !important;
    width: 100%;
    padding: 16px !important;
    text-align: center;
    box-sizing: border-box;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: "Muli", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease-out !important;
}

.solestra-register-prompt-btn:hover {
    background: #2e2e2e !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   Hoşgeldin Modal (Kayıt / Giriş Sonrası)
   ═══════════════════════════════════════════════════════════ */

.solestra-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: background 0.4s ease;
    pointer-events: none;
}

.solestra-welcome-overlay--visible {
    background: rgba(0, 0, 0, 0.65);
    pointer-events: auto;
}

.solestra-welcome-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    text-align: center;
    padding: 48px 36px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.solestra-welcome-overlay--visible .solestra-welcome-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ─── İkon ──────────────────────────────────────────────── */

.solestra-welcome-icon {
    width: 64px;
    height: 64px;
    background: #000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: solestra-welcome-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes solestra-welcome-pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ─── Başlık ────────────────────────────────────────────── */

.solestra-welcome-modal h3 {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    margin: 0 0 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ─── Mesaj ─────────────────────────────────────────────── */

.solestra-welcome-message {
    font-size: 14px;
    color: #444;
    margin: 0 0 8px;
    line-height: 1.6;
}

.solestra-welcome-message strong {
    color: #000;
}

/* ─── Geri Sayım ────────────────────────────────────────── */

.solestra-welcome-countdown {
    font-size: 12px;
    color: #999;
    margin: 0 0 28px;
    letter-spacing: 0.05em;
}

.solestra-welcome-countdown span {
    font-weight: 700;
    color: #000;
}

/* ─── Buton ─────────────────────────────────────────────── */

.solestra-welcome-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
}

.solestra-welcome-btn:hover {
    background-color: #2e2e2e;
    color: #fff;
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 680px) {
    .solestra-register-name-row {
        flex-direction: column;
    }

    .solestra-register-name-row .form-row {
        width: 100% !important;
    }

    .solestra-welcome-modal {
        max-width: 100%;
        padding: 36px 24px 32px;
    }

    .solestra-welcome-icon {
        width: 52px;
        height: 52px;
    }

    .solestra-welcome-btn {
        width: 100%;
        padding: 16px 32px;
    }
}


.kayitol h2{
    padding-bottom: 20px;
}
/* ═══════════════════════════════════════════════════════════
   SOLESTRA — WhatsApp Telefon Doğrulama (2. Aşama)
   ═══════════════════════════════════════════════════════════ */

.solestra-verify-step {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 0;
}

.solestra-verify-step h2 {
    font-size: 22px;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.solestra-verify-info {
    color: #555;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.55;
}

.solestra-verify-info strong {
    color: #000;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.solestra-verify-messages {
    margin-bottom: 16px;
}

.solestra-verify-messages:empty {
    display: none;
}

#solestra-verify-code {
    letter-spacing: 0.8em;
    font-size: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: 14px 18px !important;
}

.solestra-verify-resend-wrap {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin: 18px 0 10px;
}

.solestra-verify-resend-text {
    color: #999;
}

#solestra-verify-resend {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
}

.solestra-verify-resend-timer {
    color: #999;
    font-variant-numeric: tabular-nums;
}

.solestra-verify-back {
    text-align: center;
    margin-top: 8px;
}

.solestra-verify-back a {
    color: #999;
    font-size: 12px;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.solestra-verify-back a:hover {
    color: #000;
}