/**
 * KS Fields — the shared form language: field grid, inputs, labels, select2 skin.
 *
 * Split out of ks-checkout.css (10 Ağu 2026) because THREE surfaces speak it and
 * only one of them is the checkout page:
 *   · the checkout form itself (form.checkout.ks-vm-co),
 *   · the address-book add/edit popup (shell carries .ks-vm-co),
 *   · the site-wide delivery-location popup (product + cart pages).
 * Everything derives from ks-tokens.css and mirrors the login popup's field /
 * label language (ks-auth.css). The `.ks-vm-co` scope is what a surface opts
 * into — carry that class on the shell and the fields look like the checkout's,
 * by construction rather than by copied values. `body` prefix lifts specificity
 * over Botiga's input rules, exactly like ks-auth.css does.
 *
 * 🚨 Edit field/label/select2 LOOKS here, not in ks-checkout.css — that file
 * still owns the checkout's validated/invalid state rules, which are later in
 * the cascade on purpose.
 *
 * @package KS_Variation_Manager
 */

/* ═══════════════ Field grid — 2-col rows inside a section ═══════════════ */

/* ks-col-* spans come from KS_VM_Checkout::field_layout(). WC's address-i18n
   JS re-orders rows inside the *-fields__field-wrapper on country change;
   grid order follows DOM order, so that keeps working untouched. */
.ks-vm-co .ks-vm-co-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 14px;
	row-gap: 14px;
}

.ks-vm-co .ks-vm-co-fields > .form-row {
	margin: 0;
	grid-column: 1 / -1; /* default: full width */
}

.ks-vm-co .ks-vm-co-fields > .ks-col-6 {
	grid-column: auto / span 1;
}

@media (max-width: 575px) {
	.ks-vm-co .ks-vm-co-fields > .ks-col-6 {
		grid-column: 1 / -1;
	}
}

/* WC prints form-rows as <p> with theme margins — neutralise inside sections
   that don't use the grid wrapper (create-account row etc.). */
.ks-vm-co .form-row {
	padding: 0;
}

/* ═══════════════ Fields — the popup input look (.ks-field) ═══════════════ */

body .ks-vm-co .input-text,
body .ks-vm-co select,
body .ks-vm-co textarea {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: var(--ks-field-pad-y) var(--ks-field-pad-x);
	border: var(--ks-field-border-width) solid var(--ks-field-border-color);
	border-radius: var(--ks-field-radius);
	background: var(--ks-field-bg);
	color: var(--ks-ink, #1a1a1a);
	/* Typography spelled out from the tokens rather than left to the browser:
	   the select2 rules below have to reproduce it on a <span>, and only a
	   named value can be reproduced. */
	font-family: var(--ks-field-font-family);
	font-size: var(--ks-field-font-size); /* ≥16px so iOS doesn't zoom on focus */
	font-weight: var(--ks-field-font-weight);
	line-height: var(--ks-field-line-height);
	letter-spacing: var(--ks-field-letter-spacing);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .ks-vm-co .input-text:focus,
body .ks-vm-co select:focus,
body .ks-vm-co textarea:focus {
	border-color: var(--ks-field-focus-border);
	box-shadow: 0 0 0 3px var(--ks-field-focus-ring);
	outline: none;
}

body .ks-vm-co .input-text::placeholder,
body .ks-vm-co textarea::placeholder {
	color: #9a9a9a;
}

/* A later theme rule pins border-width back to 1px (colour/radius survive,
   the width loses) — re-pin the token value, mirroring the button rules. */
body .ks-vm-co .input-text,
body .ks-vm-co select,
body .ks-vm-co textarea,
body .ks-vm-co .select2-container--default .select2-selection--single {
	border-width: var(--ks-field-border-width) !important;
}

/* Field labels — popup label language. Checkbox/radio labels excluded: they
   stay inline next to their control. */
body .ks-vm-co .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 3px;
	font-size: 14px;
	font-weight: 600;
	/* Sabit, mirasa bırakılmaz: kart-ismi satırı payment kutusunda 1.55
	   miras alıp etiket→input mesafesini gözle DARALTIYORDU (kutu-arası 3px
	   her yerde aynıydı ama satır kutusu farklıydı — v2.218'deki ders).
	   1.85 = fatura alanlarının zaten ölçülen değeri (14px → 25.9px). */
	line-height: 1.85;
	color: var(--ks-ink, #1a1a1a);
}

/* Label→input gap = the popup's exactly (3px, from the label margin alone). */
body .ks-vm-co .form-row {
	row-gap: 0;
}

/* ── select2 (country / city dropdowns) — skin the RENDERED control; the
      native <select> underneath is select2-hidden-accessible.

      Typography is the whole point of the *-font-* tokens below: select2 swaps
      the <select> for a <span>, and a <span> inherits the page's brand font
      (Plus Jakarta Sans, 500, +0.3px tracking) instead of the stack the browser
      hands a form control. Ülke / Şehir therefore read heavier and wider than
      the Ad / Soyad boxes flanking them. Repeating the field tokens on the
      control, the open panel, its options AND its search box puts every one of
      them on exactly the input's type. ── */
body .ks-vm-co .select2-container--default .select2-selection--single {
	padding: 0 !important;
	height: auto !important;
	min-height: 0;
	display: flex;
	align-items: center;
	border: var(--ks-field-border-width) solid var(--ks-field-border-color);
	border-radius: var(--ks-field-radius);
	background: var(--ks-field-bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .ks-vm-co .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: var(--ks-field-pad-y) calc(var(--ks-field-pad-x) + 14px) var(--ks-field-pad-y) var(--ks-field-pad-x);
	font-family: var(--ks-field-font-family);
	font-size: var(--ks-field-font-size);
	font-weight: var(--ks-field-font-weight);
	line-height: var(--ks-field-line-height);
	letter-spacing: var(--ks-field-letter-spacing);
	color: var(--ks-ink, #1a1a1a);
}

/* The placeholder ("Lütfen seçiniz") is the same span in a muted colour — it
   must read like a real input's placeholder, not like a lighter brand label. */
body .ks-vm-co .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #9a9a9a;
}

/* Stretch the arrow box over the full control and flex-centre the triangle
   (themes pin it with a fixed top tuned to their own control height). */
body .ks-vm-co .select2-container--default .select2-selection--single .select2-selection__arrow {
	position: absolute;
	top: 0 !important;
	right: 10px;
	width: 20px;
	height: 100% !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

body .ks-vm-co .select2-container--default .select2-selection--single .select2-selection__arrow b {
	position: static;
	/* Flex centring left the caret's box 2px high; centred margins split in
	   half, so 4px top margin = the measured 2px correction. Verified 0. */
	margin: 4px 0 0;
	border-color: var(--ks-muted, #6a6a6a) transparent transparent transparent;
}

body .ks-vm-co .select2-container--focus .select2-selection--single,
body .ks-vm-co .select2-container--open .select2-selection--single {
	border-color: var(--ks-field-focus-border);
	box-shadow: 0 0 0 3px var(--ks-field-focus-ring);
}

/* The open dropdown panel is appended OUTSIDE the form (to <body> on the
   checkout, to its own overlay in the delivery popup) — hence the three scopes
   on every panel rule below (+ .ks-lf-dd = KS Dil ve Konum popup'ı, 27 Eyl 2026): the checkout page, the ACCOUNT page (sipariş
   listesinin durum/tarih listeleri + adres defteri popup'ının ülke/şehir
   listeleri — 24 Ağu 2026'ya kadar hesap sayfasında panel ÇIPLAK çiziliyordu,
   kimse fark etmemişti), and the popup overlay.

   🚨 Both scopes carry a `body` prefix on purpose. select2.css's own
   `.select2-container--open .select2-dropdown--below` (0,2,0) strips the
   panel's top border and radius — it assumes the panel is glued to the
   control — and it loads AFTER this file, so an equal-specificity selector
   loses the tie. The element prefix takes it to (0,2,1) and the KS skin wins
   (measured: without it the popup panel rendered square and borderless while
   the checkout's, already prefixed, was correct). overflow:hidden clips the option list to the
   rounded corners; outline:none kills a stray 1px outline the theme draws
   around the panel. */
body.woocommerce-checkout .select2-dropdown,
body.ks-vm-account-page .select2-dropdown,
body .ks-lf-dd .select2-dropdown,
body .ks-vm-dl-overlay .select2-dropdown,
body .ks-vm-pn-ov .select2-dropdown {
	border: var(--ks-field-border-width) solid var(--ks-field-border-color);
	border-radius: var(--ks-field-radius);
	overflow: hidden;
	outline: none;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	/* The list is a continuation of the closed control — same type, so the
	   chosen option looks identical before and after the panel closes. */
	font-family: var(--ks-field-font-family);
	font-size: var(--ks-field-font-size);
	font-weight: var(--ks-field-font-weight);
	line-height: var(--ks-field-line-height);
	letter-spacing: var(--ks-field-letter-spacing);
	color: var(--ks-ink, #1a1a1a);
}

/* select2 lands the panel ON the control it belongs to — measured 4px over the
   bottom border, which read as the list sitting on top of the field. Let it
   float clear instead, by the same distance in both directions (the --above
   variant starts flush, so its nudge is the negative of the overlap). */
body.woocommerce-checkout .select2-dropdown--below,
body.ks-vm-account-page .select2-dropdown--below,
body .ks-lf-dd .select2-dropdown--below,
body .ks-vm-dl-overlay .select2-dropdown--below,
body .ks-vm-pn-ov .select2-dropdown--below {
	margin-top: 10px;
}

body.woocommerce-checkout .select2-dropdown--above,
body.ks-vm-account-page .select2-dropdown--above,
body .ks-lf-dd .select2-dropdown--above,
body .ks-vm-dl-overlay .select2-dropdown--above,
body .ks-vm-pn-ov .select2-dropdown--above {
	margin-top: -6px;
}

/* The search box is a utility inside the panel, not one of the form's fields —
   it keeps the field type (16px, so iOS doesn't zoom the page on focus) but
   sits on a tighter box: 64px of chrome was heavier than the control that
   opened it. */
body.woocommerce-checkout .select2-search--dropdown,
body.ks-vm-account-page .select2-search--dropdown,
body .ks-lf-dd .select2-search--dropdown,
body .ks-vm-dl-overlay .select2-search--dropdown {
	padding: 8px;
}

/* The search input lives OUTSIDE the form scope — KS field skin, with the
   theme's min-height pins released. Same type as the fields it sits above; only
   its padding is tighter, since it's a control inside a control. */
body.woocommerce-checkout .select2-search--dropdown .select2-search__field,
body.ks-vm-account-page .select2-search--dropdown .select2-search__field,
body .ks-lf-dd .select2-search--dropdown .select2-search__field,
body .ks-vm-dl-overlay .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 7px 10px;
	border: var(--ks-field-border-width) solid var(--ks-field-border-color) !important;
	border-radius: calc(var(--ks-field-radius) - 2px);
	font-family: var(--ks-field-font-family);
	font-size: var(--ks-field-font-size);
	font-weight: var(--ks-field-font-weight);
	line-height: var(--ks-field-line-height);
	letter-spacing: var(--ks-field-letter-spacing);
	color: var(--ks-ink, #1a1a1a);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus,
body.ks-vm-account-page .select2-search--dropdown .select2-search__field:focus,
body .ks-lf-dd .select2-search--dropdown .select2-search__field:focus,
body .ks-vm-dl-overlay .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--ks-field-focus-border) !important;
	box-shadow: 0 0 0 3px var(--ks-field-focus-ring);
}

body.woocommerce-checkout .select2-results__option,
body.ks-vm-account-page .select2-results__option,
body .ks-lf-dd .select2-results__option,
body .ks-vm-dl-overlay .select2-results__option {
	padding: 10px 14px;
}

body.woocommerce-checkout .select2-results__option[aria-selected="true"],
body.ks-vm-account-page .select2-results__option[aria-selected="true"],
body .ks-lf-dd .select2-results__option[aria-selected="true"],
body .ks-vm-dl-overlay .select2-results__option[aria-selected="true"] {
	background: #f2f2f2;
}

body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.ks-vm-account-page .select2-container--default .select2-results__option--highlighted[aria-selected],
body .ks-lf-dd .select2-container--default .select2-results__option--highlighted[aria-selected],
body .ks-vm-dl-overlay .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--ks-accent, #da6900);
	color: #fff;
}

/* ═══════════════ Popup sayfa kilidi ═══════════════

   Sayfa kilidi: yalnız overflow:hidden YETMİYORDU (10 Ağu). İki sebeple —
   (a) tarayıcı kırpılan sayfada scroll'u geri sarıp arka planı zıplatıyor,
   kullanıcı popup'ı kapatınca yerini kaybediyordu; (b) window.scrollY sıfır
   kalmadığı için selectWoo'nun menü matematiği (parentOffset.top'u düşürmeyen
   hata — address-book.js'teki nota bak) menüleri scrollY kadar aşağı
   indiriyordu. position:fixed + JS'ten negatif `top` sayfayı OLDUĞU YERDE
   dondurur ve scrollY'yi 0'a çeker.

   İki popup da aynı kilidi kullanır: adres defteri (-ab-) ve teslimat
   konumu (-dl-). */
body.ks-vm-ab-lock,
body.ks-vm-dl-lock {
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

/* ═══════════════ Toggle card — TEK KAYNAK (v2.353.0) ═══════════════
   "Bir onay kutusu + yanında cümle" deseninin TAMAMI. Bugün dört yüzey
   konuşuyor ve hepsi birebir aynı görünür:
     · checkout: şirket-adına, farklı adrese gönder, kartımı sakla, onay satırı
     · hesabım:  iletişim izinleri (e-posta / SMS)
   Kabuğa `.ks-vm-co-toggle` bas, kendi CSS'ini YAZMA. Checkout'un
   doğrulama/hata halleri (woocommerce-invalid çerçevesi, legal-busy spinner'ı)
   BİLEREK ks-checkout.css'te kaldı — onlar alan dili değil, akış durumu. */
.ks-vm-co .ks-vm-co-toggle {
	padding: 14px 12px;
	background: #f6f6f6;
	border-radius: var(--ks-field-radius);
	border: 1px solid var(--ks-field-border-color);
}

/* Metin = alan etiketiyle birebir aynı dil (14px/600/ink).
   🚨 `body` öneki ŞART: Botiga'nın `.woocommerce form .form-row label`
   kuralı düz sınıf seçicisini yeniyor ve etiketi `display:block`a düşürüyor —
   o zaman flex `gap` çalışmaz, kutu ile cümle yapışır (hesabım sayfasının
   izin kutularında ölçüldü). Bu dosyanın zaten kullandığı özgüllük idiomu. */
body .ks-vm-co .ks-vm-co-toggle label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--ks-ink, #1a1a1a);
	line-height: 1.3;
	/* Üst üste tıklamada etiket metni seçiliyordu — bu bir kontrol, kopya değil. */
	-webkit-user-select: none;
	user-select: none;
}

/* Çizili kutu ile metin arası: kutu span'in sol kenarına mutlak oturuyor,
   görünen boşluk = padding-left eksi 20px → 26px = 6px ritim. Kutuyu tema
   çizmiyorsa (span yoksa) bu kural hiç uygulanmaz, native kutu kalır. */
.ks-vm-co .ks-vm-co-toggle label span {
	padding-left: 26px;
}

.ks-vm-co .ks-vm-co-toggle span::before,
.ks-vm-co .ks-vm-co-toggle span::after {
	top: 50%;
}