/* Food Butik Forms — frontend
 * -----------------------------------------------------------------------------
 * TEMA/EKLENTİ İZOLASYONU
 * Bütün kurallar `.fbf-form-wrap .fbf-form …` altında kapsanır. Bu, seçici
 * özgüllüğünü ~(0,4,1) seviyesine çıkarır ve temaların/eklentilerin tipik
 * `input`, `.woocommerce input`, `body input` gibi (0,1,1)–(0,2,1) kurallarını
 * güvenle yener. Ayrıca form kontrolleri `all: revert` ile sıfırlanarak temanın
 * miras bıraktığı font/gölge/dönüşüm gibi artıklar nötrlenir.
 *
 * ÖNEMLİ: Taban stiller BİLEREK `!important` KULLANMAZ; böylece form-başına
 * Özel CSS alanı (sarmalayıcı `#fbf-form-{ID}` = ID özgüllüğü) tabanı ezebilir.
 * Yani: taban > tema, özel CSS > taban.
 * ---------------------------------------------------------------------------- */

.fbf-form-wrap {
    --fbf-gap: 18px;
    --fbf-radius: 10px;
    --fbf-accent: #2563eb;
    --fbf-text: #1f2937;
    --fbf-error: #d63638;
    --fbf-border: #cfd4da;
    --fbf-input-bg: #fff;
    --fbf-font: inherit;
    max-width: 100%;
    text-align: left;
    line-height: 1.5;
}

/* Kutu modeli — temaların content-box/border-box karışıklığını sabitle */
.fbf-form-wrap,
.fbf-form-wrap *,
.fbf-form-wrap *::before,
.fbf-form-wrap *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * 1) İZOLASYON SIFIRLAMASI — kontrolleri temadan arındır
 *    (0,3,1): aşağıdaki açık stiller (0,4,1) bunu ve temayı yener.
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-field input,
.fbf-form-wrap .fbf-form .fbf-field select,
.fbf-form-wrap .fbf-form .fbf-field textarea,
.fbf-form-wrap .fbf-form .fbf-actions button {
    all: revert;
}

/* ---------------------------------------------------------------------------
 * 2) DÜZEN
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form { margin: 0; padding: 0; border: none; background: none; }
.fbf-form-wrap .fbf-form .fbf-fields { display: flex; flex-wrap: wrap; gap: var(--fbf-gap); margin: 0; padding: 0; }
.fbf-form-wrap .fbf-form .fbf-field { flex: 1 1 100%; margin: 0; padding: 0; min-width: 0; border: none; background: none; }
.fbf-form-wrap .fbf-form .fbf-field.fbf-w-half { flex: 1 1 calc(50% - var(--fbf-gap)); }
.fbf-form-wrap .fbf-form .fbf-field.fbf-w-third { flex: 1 1 calc(33.333% - var(--fbf-gap)); }

/* ---------------------------------------------------------------------------
 * 3) ETİKETLER
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-field .fbf-label {
    display: block; font-family: var(--fbf-font); font-weight: 600; font-size: 15px;
    line-height: 1.3; margin: 0 0 6px; padding: 0; color: inherit; text-transform: none; letter-spacing: normal;
}
.fbf-form-wrap .fbf-form .fbf-field .fbf-req { color: var(--fbf-error); }

/* Yalnızca ekran okuyucu için (zorunluluk bildirimi vb.) */
.fbf-form-wrap .fbf-sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 4) METİN GİRDİLERİ / SELECT / TEXTAREA  (0,4,1 — temayı yener)
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-field input[type="text"],
.fbf-form-wrap .fbf-form .fbf-field input[type="email"],
.fbf-form-wrap .fbf-form .fbf-field input[type="tel"],
.fbf-form-wrap .fbf-form .fbf-field input[type="url"],
.fbf-form-wrap .fbf-form .fbf-field input[type="number"],
.fbf-form-wrap .fbf-form .fbf-field input[type="date"],
.fbf-form-wrap .fbf-form .fbf-field input[type="time"],
.fbf-form-wrap .fbf-form .fbf-field input[type="password"],
.fbf-form-wrap .fbf-form .fbf-field input[type="search"],
.fbf-form-wrap .fbf-form .fbf-field input[type="file"],
.fbf-form-wrap .fbf-form .fbf-field select,
.fbf-form-wrap .fbf-form .fbf-field textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 11px 13px;
    font-family: var(--fbf-font);
    font-size: 16px;               /* iOS'ta odakta zoom'u engeller */
    font-weight: 400;
    line-height: 1.4;
    color: var(--fbf-text);
    background-color: var(--fbf-input-bg);
    background-image: none;
    border: 1px solid var(--fbf-border);
    border-radius: var(--fbf-radius);
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
/* Select oku için native görünümü koru (appearance:none arka planla) */
.fbf-form-wrap .fbf-form .fbf-field select {
    -webkit-appearance: auto;
    appearance: auto;
    padding-right: 34px;
}
.fbf-form-wrap .fbf-form .fbf-field input[type="file"] { padding: 9px 13px; line-height: 1.4; }

/* Telefon (intl-tel-input): sarmalayıcı alanı doldursun.
   Sol boşluğu (bayrak için) iti JS ile inline ayarlar → dokunmuyoruz. */
.fbf-form-wrap .fbf-form .fbf-field .iti { display: block; width: 100%; }
.fbf-form-wrap .fbf-form .fbf-field .iti input[type="tel"] { width: 100%; }
/* iti açılır listesine eklediğimiz arama kutusu */
.iti__country-list .fbf-iti-search-wrap { position: sticky; top: 0; padding: 6px; background: #fff; border-bottom: 1px solid #eee; z-index: 1; }
.iti__country-list .fbf-iti-search { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; }

.fbf-form-wrap .fbf-form .fbf-field textarea { resize: vertical; min-height: 120px; }

.fbf-form-wrap .fbf-form .fbf-field input::placeholder,
.fbf-form-wrap .fbf-form .fbf-field textarea::placeholder { color: #9aa1a9; opacity: 1; }

.fbf-form-wrap .fbf-form .fbf-field input[type="text"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="email"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="tel"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="url"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="number"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="date"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="time"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="password"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="search"]:focus,
.fbf-form-wrap .fbf-form .fbf-field input[type="file"]:focus,
.fbf-form-wrap .fbf-form .fbf-field select:focus,
.fbf-form-wrap .fbf-form .fbf-field textarea:focus {
    border-color: var(--fbf-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    outline: none;
}

/* ---------------------------------------------------------------------------
 * 5) SEÇİM GRUPLARI (radio / checkbox / onay)
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-field .fbf-choices { border: none; margin: 0; padding: 0; min-width: 0; }
.fbf-form-wrap .fbf-form .fbf-field .fbf-choices legend {
    display: block; float: none; width: auto; font-family: var(--fbf-font); font-weight: 600;
    font-size: 15px; margin: 0 0 8px; padding: 0; color: inherit; border: none;
}
.fbf-form-wrap .fbf-form .fbf-field .fbf-choice {
    display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px; padding: 0;
    cursor: pointer; font-family: var(--fbf-font); font-weight: 400; font-size: 15px;
    line-height: 1.4; color: inherit; text-transform: none;
}
.fbf-form-wrap .fbf-form .fbf-field .fbf-choice:last-child { margin-bottom: 0; }
.fbf-form-wrap .fbf-form .fbf-field .fbf-choice input[type="checkbox"],
.fbf-form-wrap .fbf-form .fbf-field .fbf-choice input[type="radio"] {
    width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex-shrink: 0;
    accent-color: var(--fbf-accent); box-shadow: none;
}
.fbf-form-wrap .fbf-form .fbf-field .fbf-choice span { flex: 1; min-width: 0; }
.fbf-form-wrap .fbf-form .fbf-field .fbf-acceptance a { color: var(--fbf-accent); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * 6) YARDIM / BAŞLIK / HTML
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-field .fbf-help { display: block; margin: 5px 0 0; font-size: 13px; line-height: 1.4; opacity: .7; color: inherit; }
.fbf-form-wrap .fbf-form .fbf-field .fbf-heading { margin: 8px 0 2px; padding: 0; color: inherit; line-height: 1.3; }
.fbf-form-wrap .fbf-form .fbf-field .fbf-html { line-height: 1.6; color: inherit; }

/* ---------------------------------------------------------------------------
 * 7) HATA DURUMU
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-field.has-error input,
.fbf-form-wrap .fbf-form .fbf-field.has-error select,
.fbf-form-wrap .fbf-form .fbf-field.has-error textarea {
    border-color: var(--fbf-error);
    box-shadow: 0 0 0 3px rgba(214, 54, 56, .12);
}
.fbf-form-wrap .fbf-form .fbf-field .fbf-field-error { display: block; margin: 5px 0 0; color: var(--fbf-error); font-size: 13px; line-height: 1.4; }
.fbf-form-wrap .fbf-form .fbf-field .fbf-field-error:empty { display: none; }

/* ---------------------------------------------------------------------------
 * 8) TURNSTILE
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-turnstile-wrap { margin: 4px 0; }
.fbf-form-wrap .fbf-turnstile-missing { padding: 10px 14px; background: #fcf9e8; border: 1px solid #f0e6a6; border-radius: 8px; font-size: 13px; color: #7a6a1a; }

/* ---------------------------------------------------------------------------
 * 9) GÖNDER BUTONU  (0,4,0 — tema button/.button kurallarını yener)
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-actions { margin: 18px 0 0; padding: 0; }
.fbf-form-wrap .fbf-form .fbf-actions .fbf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 13px 30px;
    font-family: var(--fbf-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    text-shadow: none;
    color: #fff;
    background: var(--fbf-accent);
    border: none;
    border-radius: var(--fbf-radius);
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter .15s, transform .05s;
}
.fbf-form-wrap .fbf-form .fbf-actions .fbf-submit:hover { filter: brightness(1.07); color: #fff; }
.fbf-form-wrap .fbf-form .fbf-actions .fbf-submit:active { transform: translateY(1px); }
.fbf-form-wrap .fbf-form .fbf-actions .fbf-submit:disabled { opacity: .6; cursor: default; }

/* ---------------------------------------------------------------------------
 * 10) MESAJLAR
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-message { margin: 16px 0 0; padding: 0; border-radius: 8px; font-size: 15px; line-height: 1.5; }
.fbf-form-wrap .fbf-form .fbf-message:empty { display: none; }
.fbf-form-wrap .fbf-form .fbf-message-success { padding: 14px 18px; background: #edf7ed; border: 1px solid #b7dfb9; color: #1e4620; }
.fbf-form-wrap .fbf-form .fbf-message-error { padding: 14px 18px; background: #fcebea; border: 1px solid #f1b9b7; color: #7a1c1c; }

/* ---------------------------------------------------------------------------
 * 11) HONEYPOT — güvenlik gereği daima gizli (kullanıcı ezmemeli → !important)
 * ------------------------------------------------------------------------- */
.fbf-form-wrap .fbf-form .fbf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Yönetici uyarısı */
.fbf-notice { padding: 10px 14px; background: #fcf9e8; border: 1px solid #f0e6a6; border-radius: 8px; font-size: 13px; }

/* ---------------------------------------------------------------------------
 * 12) RESPONSIVE
 * ------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .fbf-form-wrap .fbf-form .fbf-field.fbf-w-half,
    .fbf-form-wrap .fbf-form .fbf-field.fbf-w-third { flex: 1 1 100%; }
    .fbf-form-wrap .fbf-form .fbf-actions .fbf-submit { width: 100%; }
}
