/*
 * Styling for Source/common/contact-form.js — the client-rendered contact/adres form component
 * (mountContactForm). Every selector here targets a class prefixed "caf-" (ContactAddressForm —
 * the name of the retired server control this component replaced) that belongs exclusively to
 * this file; none of them are Bootstrap utilities or generic names borrowed from a host page's
 * framework. This is what makes the component safe to embed on pages running different,
 * incompatible design systems (member_invoice_address.aspx's old-panel "modern" theme,
 * CreateOrder.aspx's Bootstrap 5 "atak-panel" theme, member_default_informations.aspx's own
 * standalone inline theme) without ever fighting a host page's CSS for a class name, and without
 * depending on any host page's stylesheet being present at all (see Styles/shared/order-payment.css
 * for the same pattern).
 *
 * A hand-maintained extraction (not a compile output) of the visual language originally used by
 * member_invoice_address.aspx's own "modern" address modal (old-panel/pages/_membership.scss,
 * .modal-body .input-group-modern / .type-card rules) and membership-ui.js's two-section phone
 * widget (membership_informations.aspx's inline <style> block).
 */

/* ── Form yerleşimi: iki sütun, dar alanda tek sütun ───────────────────────────
   Kırılım noktası VIEWPORT'a değil, formun İÇİNDE bulunduğu kabın genişliğine bağlıdır — bu
   bileşen hem geniş bir sayfa gövdesinde (membership_informations.aspx) hem de dar bir modal
   panelinde (Basket.aspx'in contact modalı, sağdaki düzenleme paneli) aynı anda yaşayabildiği
   için @media (max-width: …) yanlış sonuç verirdi: geniş ekrandaki dar bir panel yine iki sütuna
   zorlanırdı. Container query de kullanılmıyor (bileşenin desteklemesi gereken tarayıcı tabanı
   için fazla yeni); onun yerine sütun genişliğinin kendisi yüzde bazlı tanımlanıyor:

     calc((100% - 20px) / 2)  → bir sütunun "iki sütun sığdığındaki" genişliği (20px gap düşülmüş).
     max(240px, …)            → sütun bunun altına inemez; ineceği an iki iz artık sığmaz ve
                                auto-fit tek sütuna düşer (kap < ~500px → tek sütun).
     min(100%, …)             → kabın kendisi 240px'den darsa taşmayı önler.

   Yüzde tabanlı olduğu için kap ne kadar genişlerse genişlesin ÜÇÜNCÜ bir sütun asla oluşmaz.
   Grid tercih edilmesinin nedeni: satırda tek kalan alan (ör. gizli alanlar yüzünden tek kalan
   Fax/ZipCode) kendi sütununda kalır; flex-grow ile form ortasında tam satıra yayılırdı.

   Kural yalnızca DOĞRUDAN çocuklara uygulanır; alan grubunun içindeki kutular (.caf-type-cards,
   .caf-phone-group, .caf-country-picker) kendi düzenlerini korur. */
.caf-form {
    --caf-gap: 20px;
    --caf-col-min: 240px;
    /* Bileşenin açılır listeleri (ülke seçici + telefon ülke kodu) için TEK katman değeri — bkz.
       aşağıdaki iki z-index kuralı. Aynı anda yalnızca biri açık olabildiği için (ülke seçicinin
       document-level outside-click handler'ı diğerine tıklandığında kapatır, bkz.
       contact-form.js/initCountrySelect) ikisinin aynı değeri paylaşması yeterlidir. Değer, host
       sayfanın kendi katmanlarını da aşacak kadar yüksek tutuldu (ör. membership_informations.aspx'te
       .language-selector z-index:100, .info-item z-index:50); bileşen her zaman bir modal ya da
       sayfa gövdesi yığılma bağlamının İÇİNDE yaşadığı için bu değer dışarı taşmaz. */
    --caf-dropdown-z: 1000;
    /* Her iki açılır listede (ülke seçici + telefon ülke kodu) aynı anda görünecek satır sayısı ve
       tek satırın yüksekliği. Liste yüksekliği bu ikisinin ÇARPIMI olarak hesaplanır, satır
       yüksekliği de ayrıca sabitlenir (bkz. .caf-country-option / .iti__country) — aksi halde
       "5 satır" host sayfanın font-size/line-height'ına göre kayardı ve bu bileşen kasıtlı olarak
       birbirinden farklı tasarım sistemlerine sahip sayfalarda çalışıyor (bkz. dosya başı yorum).
       34px = 8px + 8px dikey padding + 18px satır kutusu. */
    --caf-option-h: 34px;
    --caf-visible-options: 5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--caf-col-min), calc((100% - var(--caf-gap)) / 2))), 1fr));
    gap: var(--caf-gap);
    align-items: start;
}

/* Grid item'ın varsayılan min-width:auto'su, içerik (ör. uzun ülke adı) sütundan genişse taşmaya
   yol açar — ülke tetikleyicisinin ellipsis'i ancak bu sıfırlandığında devreye girer. */
.caf-form > .caf-field-group {
    min-width: 0;
}

/* Tek başına bir satırı hak eden alanlar: hesap türü kartları (yan yana iki kart), çok satırlı
   adres kutusu ve "varsayılan yap" anahtarı — bkz. contact-form.js/buildFieldGroup. */
.caf-form > .caf-field-group--full {
    grid-column: 1 / -1;
}

/* ── Account type cards (radio group) ─────────────────────────────────────── */
.caf-type-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.caf-type-card {
    flex: 1;
    min-width: 160px;
    margin: 0;
    cursor: pointer;
    position: relative;
}

.caf-type-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.caf-type-card .caf-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eef2ff;
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
}

.caf-type-card .caf-icon-box {
    width: 42px;
    height: 42px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.caf-type-card .caf-icon-box i {
    font-size: 16px;
    color: #94a3b8;
}

.caf-type-card .caf-type-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.caf-type-card .caf-type-subtext {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
}

.caf-type-card .caf-check-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #312e81;
    font-size: 14px;
    opacity: 0;
    transition: all 0.2s ease;
}

.caf-type-card:hover .caf-card-content {
    border-color: #cbd5e1;
}

/* Declared after :hover so the checked state always wins the cascade regardless of pointer position. */
.caf-type-card input:checked + .caf-card-content {
    background: #eef2ff;
    border-color: #312e81;
    box-shadow: 0 4px 12px rgba(49, 46, 129, 0.1);
}

.caf-type-card input:checked + .caf-card-content .caf-icon-box {
    background: #312e81;
}

.caf-type-card input:checked + .caf-card-content .caf-icon-box i {
    color: #fff;
}

.caf-type-card input:checked + .caf-card-content .caf-check-icon {
    opacity: 1;
}

/* ── Field groups ──────────────────────────────────────────────────────────── */
.caf-field-group {
    margin-bottom: 0;
}

.caf-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.caf-input-wrapper {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.caf-input-wrapper:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.caf-input-wrapper input,
.caf-input-wrapper select,
.caf-input-wrapper textarea {
    border: none;
    background: transparent !important;
    width: 100%;
    min-height: 46px;
    color: #1e293b;
    font-size: 15px;
    font-weight: 500;
    outline: none;
}

/* Değiştirilemeyen alanlar (ör. üyelik e-postası) — okunabilir kalır ama düzenlenemeyeceği görsel
   olarak belli olur; readonly bir input yine de odaklanabildiği için :focus-within halkası burada
   kasıtlı olarak bastırılıyor. Yukarıdaki temel input/select/textarea kuralından SONRA gelmeli ki
   aynı özgüllükteki color değeri (#94a3b8) kaskadta kazansın. */
.caf-input-wrapper--readonly {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.caf-input-wrapper--readonly:focus-within {
    border-color: #e2e8f0;
    box-shadow: none;
}

.caf-input-wrapper--readonly input {
    color: #94a3b8;
    cursor: not-allowed;
}

/* Formun TAMAMI salt-okunur (bkz. contact-form.js setReadOnly) — kayıtlı/az önce eklenen bir kişi
   burada düzenlenemez, yalnızca başka bir handle seçilebilir ya da yeni kişi eklenebilir (bkz.
   ContactPicker.js). pointer-events:none, .caf-country-trigger/.caf-phone-cc-input gibi native
   olmayan (readonly/disabled kabul etmeyen) özel bileşenleri de kapsar. */
.caf-form--readonly {
    pointer-events: none;
}

.caf-form--readonly .caf-input-wrapper,
.caf-form--readonly .caf-phone-group,
.caf-form--readonly .caf-country-picker {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.caf-form--readonly input,
.caf-form--readonly select,
.caf-form--readonly textarea,
.caf-form--readonly .caf-country-trigger-text {
    color: #94a3b8;
    cursor: not-allowed;
}

.caf-input-wrapper input::placeholder,
.caf-input-wrapper textarea::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.caf-input-wrapper textarea {
    padding: 12px 0;
    resize: vertical;
    min-height: 70px;
}

/* ── Server-side alan hataları (BaseCIntercept → ResponseModel.AdditionalData) ───────────── */
.caf-field-error .caf-input-wrapper,
.caf-field-error .caf-phone-group,
.caf-field-error .caf-country-trigger {
    border-color: #e11d48;
}

/* Mesaj etiketin hemen ALTINDA, girdinin ÜSTÜNDE durur (bkz. contact-form.js applyServerErrors) —
   kullanıcı alanın adını okurken hatayı da aynı anda görür, gözünü aşağı kaydırması gerekmez. */
.caf-field-error-message {
    margin-top: -2px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #e11d48;
}

/* ── Default / IsDefault switch ───────────────────────────────────────────── */
.caf-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.caf-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.caf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.caf-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.2s;
}

.caf-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.caf-switch input:checked + .caf-switch-slider {
    background-color: #6366f1;
}

.caf-switch input:checked + .caf-switch-slider::before {
    transform: translateX(18px);
}

.caf-switch-label-text {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

/* ── Two-section phone widget (country code + number) ─────────────────────── */
.caf-phone-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 46px;
    width: 100%;
}

.caf-phone-group:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.caf-phone-cc-section {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    border-radius: 9px 0 0 9px;
}

/* Fixed width so the cc section stays compact — see membership-ui.js's original for why
   display:flex must NOT be used on the .iti wrapper itself. */
.caf-phone-cc-section .iti {
    width: 110px !important;
    flex-shrink: 0;
    background: transparent;
}

.caf-phone-cc-section .iti__selected-country {
    padding: 0 4px 0 6px;
    border-radius: 9px 0 0 9px;
}

.caf-phone-cc-section .iti__selected-country:hover {
    background: rgba(0, 0, 0, 0.05);
}

.caf-phone-cc-section .iti__selected-dial-code {
    display: none;
}

.caf-phone-cc-section .iti__dropdown-content {
    width: auto;
    min-width: 280px;
}

/* intl-tel-input'un inline listesi eklentide yalnızca z-index:2 ile gelir
   (.iti--inline-dropdown .iti__dropdown-content) — ülke seçicinin listesinin altında kalıyordu.
   Seçici özgüllüğü (0,3,0) eklentininkinden (0,2,0) bilerek yüksek: böylece bu dosyanın host
   sayfada eklentinin CSS'inden önce mi sonra mı yüklendiğine bağımlı değil. */
.caf-phone-group .caf-phone-cc-section .iti__dropdown-content {
    z-index: var(--caf-dropdown-z, 1000);
}

/* Telefon ülke kodu listesi de ülke seçiciyle AYNI satır sayısını gösterir. Eklentinin kendi
   değeri (.iti--inline-dropdown .iti__country-list → max-height:185px) sabit bir piksel değeridir
   ve satır yüksekliği host sayfanın tipografisinden geldiği için kaç satıra denk düştüğü sayfadan
   sayfaya değişiyordu. Kural yalnızca INLINE moda uygulanır: küçük ekranlarda eklenti tam ekran
   moduna (.iti--fullscreen-popup) geçer, listeyi body'ye taşır ve orada 5 satırlık bir sınır
   anlamsız olurdu — ayrıca oradaki liste .caf-form'un dışında kalacağı için değişkenleri de
   miras alamazdı. */
.caf-phone-cc-section .iti--inline-dropdown .iti__country-list {
    box-sizing: content-box;
    max-height: calc(var(--caf-option-h, 34px) * var(--caf-visible-options, 5));
}

.caf-phone-cc-section .iti--inline-dropdown .iti__country {
    box-sizing: border-box;
    min-height: var(--caf-option-h, 34px);
    line-height: 18px;
}

.caf-phone-cc-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 110px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    padding: 0 8px 0 0;
    letter-spacing: 0.5px;
}

.caf-phone-cc-input:focus {
    color: #6366f1;
}

.caf-phone-sep {
    width: 1px;
    background: #e2e8f0;
    flex-shrink: 0;
    align-self: stretch;
}

.caf-phone-number-section {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.caf-phone-number-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%;
    padding: 10px 12px !important;
    font-size: 15px;
    color: #1e293b;
    margin: 0 !important;
    border-radius: 0 9px 9px 0;
}

/* ── Ülke seçici (jQuery/Select2'den bağımsız — bkz. contact-form.js'teki initCountrySelect) ──
   Bayrak sprite'ı intl-tel-input'un CSS'inden (.iti__flag.iti__xx) gelir; bu yüzden bu komponenti
   kullanan her sayfa aynı vendored intl-tel-input build'ini de yüklemek zorunda. ─────────────── */
.caf-country-picker {
    position: relative;
}

/* Gerçek değer kaynağı — display:none DEĞİL, çünkü "rendered olmayan" elemanlar native constraint
   validation'dan (checkValidity/reportValidity) muaf tutulabiliyor. Bunun yerine görsel olarak
   1x1px'e sıkıştırılıyor (standart "visually hidden" tekniği). */
.caf-country-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.caf-country-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 14px;
    min-height: 46px;
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.caf-country-trigger:focus,
.caf-country-trigger:focus-visible {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.caf-country-trigger--placeholder .caf-country-trigger-text {
    color: #94a3b8;
    font-weight: 400;
}

.caf-country-trigger-flag {
    flex-shrink: 0;
}

.caf-country-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caf-country-trigger-caret {
    flex-shrink: 0;
    font-size: 12px;
    color: #94a3b8;
}

.caf-country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--caf-dropdown-z, 1000);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 10px;
    display: flex;
    flex-direction: column;
    /* Yükseklik sınırı artık listenin KENDİSİNDE (bkz. .caf-country-list max-height). Buradaki
       eski max-height:280px kaldırıldı: flex kabına konan bir sınır, arama kutusu host sayfanın
       tipografisiyle büyüdüğünde listeyi 5 satırın altına sıkıştırabiliyordu. */
}

.caf-country-dropdown--hidden {
    display: none;
}

.caf-country-search {
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    margin-bottom: 8px;
    outline: none;
}

.caf-country-search:focus {
    border-color: #6366f1;
}

/* content-box: max-height yalnızca içerik alanını sınırlasın — böylece 5 satırın yüksekliği
   listenin kendi kenarlık/padding'inden ve host sayfanın olası global box-sizing kuralından
   etkilenmez. */
.caf-country-list {
    box-sizing: content-box;
    max-height: calc(var(--caf-option-h, 34px) * var(--caf-visible-options, 5));
    overflow-y: auto;
}

.caf-country-option {
    /* box-sizing + min-height + line-height birlikte satır yüksekliğini --caf-option-h'ye sabitler;
       liste yüksekliği hesabı buna dayanır (bkz. .caf-form'daki değişkenler). */
    box-sizing: border-box;
    min-height: var(--caf-option-h, 34px);
    line-height: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 14px;
    color: #1e293b;
    text-align: left;
    cursor: pointer;
}

.caf-country-option:hover {
    background: #f4f3ff;
}

.caf-country-option--active {
    background: #eef2ff;
    font-weight: 600;
}

/* Ok tuşlarıyla gezinirken vurgulanan satır — seçili olan (--active) ile aynı anda da geçerli
   olabileceğinden ayrı bir arka plan yerine halka (box-shadow) kullanılır. */
.caf-country-option--highlighted {
    box-shadow: inset 0 0 0 2px #6366f1;
    background: #f4f3ff;
}

.caf-country-empty {
    padding: 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}