/* Bee Spectrum Sponsored — frontend form */

.bsp-sponsor {
	margin: 16px 0 24px;
	font-family: inherit;
}

/* Trigger — fill PRIMARY (#a5804f) — tema --pls-primary-color */
.bsp-sponsor__trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 0 18px !important;
	height: 46px !important;
	min-width: 200px;
	background: var(--pls-primary-color, #a5804f) !important;
	color: #fff !important;
	border: 1px solid var(--pls-primary-color, #a5804f) !important;
	border-radius: var(--pls-border-radius, 8px) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	text-transform: none !important;
	white-space: nowrap;
	box-shadow: none !important;
	/* Girişsiz ziyaretçide bu tetikleyici <a> olarak basılıyor (üyelik kapısı);
	   temanın bağlantı alt çizgisi butonu bozmasın. */
	text-decoration: none !important;
}

/* ── ÜYELİK KAPISI (girişsiz ziyaretçi) ──────────────────────────────
   Form panelinin dar bir varyantı; yeni bir bileşen değil, aynı kutunun
   içinde yalnız başlık + açıklama + iki eylem var. */
.bsp-sponsor__panel--kapi .bsp-sponsor__form {
	max-width: 440px;
	text-align: center;
}
.bsp-sponsor__panel--kapi .bsp-sponsor__actions {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
/* ⚠️ Ortak buton kuralında `flex: 1 1 0` var; satır yönünde genişliği paylaştırmak
   için doğru, ama kapı panelinde yön `column` olduğu için aynı kural YÜKSEKLİĞİ
   paylaştırıp butonları eziyordu (ölçüldü: 52px yerine ~20px kalıyorlardı).
   Burada eksen dikey → boyut içerikten gelmeli. */
.bsp-sponsor__panel--kapi .bsp-sponsor__actions > * {
	flex: 0 0 auto !important;
	width: 100%;
}

/* Birincil eylem temanın `button alt` sınıfını taşıyor; buradaki tek iş onu
   bağlantı olarak doğru hizalamak (alt çizgi + satır içi hizalama). Ölçü, renk
   ve tipografi TEMADAN gelir — kopyalanmaz. */
.bsp-sponsor__panel--kapi a.bsp-sponsor__kapi-birincil {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	text-align: center;
	/* Tema bu butona `capitalize` uyguluyordu → "Üye Ol Veya Giriş Yap".
	   Cümle düzeni tercih edildi (Osman): metin yazıldığı gibi kalmalı. */
	text-transform: none !important;
}

/* İkincil eylem temanın ana buton RİTMİNE hizalanır (yükseklik + pill kenar),
   rengine değil: birincil dolu kalır, bu outline. Değerler uydurulmadı, canlı
   sayfadan `.single_add_to_cart_button` üzerinden ölçüldü (52px · 0 24px · 999px). */
.bsp-sponsor__panel--kapi .bsp-sponsor__cancel {
	height: 52px !important;
	padding: 0 24px !important;
	border-radius: 999px !important;
}
.bsp-sponsor__trigger .bsp-icon {
	flex: 0 0 auto;
	stroke: currentColor;
	transition: transform 0.18s ease;
}
.bsp-sponsor__trigger:hover,
.bsp-sponsor__trigger:focus,
.bsp-sponsor__trigger[aria-expanded="true"] {
	background: var(--pls-secondary-color, #181818) !important;
	color: #fff !important;
	border-color: var(--pls-secondary-color, #181818) !important;
}
.bsp-sponsor__trigger:hover .bsp-icon { transform: scale(1.08) translateY(-1px); }

/* Modal panel (was inline) — fixed overlay + backdrop + centered card */
.bsp-sponsor__panel {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483646 !important; /* int32 max - 1 — parent transformed ancestor'da bile üstte */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	max-width: none !important;
	width: 100% !important;
	height: 100% !important;
}
.bsp-sponsor__panel[hidden] { display: none !important; }
.bsp-sponsor__backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.6) !important;
	cursor: pointer;
}
.bsp-sponsor__panel > .bsp-sponsor__form {
	position: relative !important;
	background: #fff !important;
	border-radius: 8px !important;
	max-width: 560px;
	width: 100%;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 32px 28px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
	z-index: 2147483647 !important;
}
.bsp-sponsor__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	color: #666;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	z-index: 2;
}
/* CSS-only X — font-bağımsız tam merkezli (v0.4 fix) */
.bsp-sponsor__close::before,
.bsp-sponsor__close::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 1.8px;
	background: currentColor;
	border-radius: 2px;
	top: 50%;
	left: 50%;
	transition: background 0.18s ease;
}
.bsp-sponsor__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.bsp-sponsor__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.bsp-sponsor__close:hover {
	background: var(--pls-primary-color, #a5804f);
	border-color: var(--pls-primary-color, #a5804f);
	color: #fff;
	/* Eski: transform: rotate(90deg) — kaldırıldı, X sabit kalır */
}

.bsp-sponsor__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: #222;
}
.bsp-sponsor__intro {
	margin: 0 0 18px;
	font-size: 14px;
	color: #555;
}

.bsp-sponsor__row {
	margin-bottom: 14px;
}
.bsp-sponsor__row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	min-width: 0;
}
.bsp-sponsor__row--two > .bsp-sponsor__field {
	min-width: 0;
}

.bsp-sponsor__field {
	display: block;
}
.bsp-sponsor__field > span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: #333;
}
.bsp-sponsor__field em {
	color: #c33;
	font-style: normal;
	margin-left: 2px;
}
.bsp-sponsor__field input,
.bsp-sponsor__field select,
.bsp-sponsor__field textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #c9c1b3;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
}
/*
 * SELECT ayrıca ele alınır (Tur 67, Osman'ın ekran görüntüsü: "Talep Edenin
 * Unvanı" kutusu yanındaki metin alanından dar ve farklı yükseklikteydi).
 *
 * Sebep: kural yalnız `input, textarea` diyordu; `select` hiç kapsanmıyordu ve
 * tarayıcının native widget'ıyla çiziliyordu — genişliği içeriğine göre,
 * yüksekliği ve yazı tipi işletim sistemine göre değişiyordu.
 *
 * `appearance:none` ZORUNLU: native açılır kutu, sayfanın kendi renklerini yok
 * sayıp platform çizimini basar (koyu temada zorla beyaz zemin dahil) ve
 * `getComputedStyle` bunu GÖSTERMEZ — hesaplanan değer doğru görünürken ekran
 * farklı olur. Ok ikonu bu yüzden kendi SVG'imizle basılıyor.
 */
.bsp-sponsor__field select {
	min-height: 44px; /* input[type=date] ile aynı — iki kutu yan yana hizalı dursun */
	padding-right: 38px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: #222;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}
/* Metin kutuları da aynı yüksekliğe sabitlenir; yoksa yan yana duran
   "Adı-Soyadı" ve "Unvanı" alanları birkaç piksel kayık görünüyordu. */
.bsp-sponsor__field input[type="text"],
.bsp-sponsor__field input[type="tel"],
.bsp-sponsor__field input[type="email"] {
	min-height: 44px;
}
/* "Seçiniz…" yer tutucusu, gerçek bir seçimle aynı koyulukta görünmemeli. */
.bsp-sponsor__field select:invalid,
.bsp-sponsor__field select option[value=""] {
	color: #8a8a8a;
}
.bsp-sponsor__field input[type="date"] {
	min-height: 44px;
	padding-right: 38px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
	color-scheme: light;
}
.bsp-sponsor__field input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	width: 38px;
	height: 100%;
	padding: 0;
	margin: 0;
}
.bsp-sponsor__field {
	position: relative;
}
.bsp-sponsor__field input:focus,
.bsp-sponsor__field select:focus,
.bsp-sponsor__field textarea:focus {
	outline: none;
	border-color: #c5a572;
	box-shadow: 0 0 0 3px rgba(197,165,114,.18);
}

.bsp-sponsor__consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	color: #555;
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
}
.bsp-sponsor__consent input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	margin: 1px 0 0 !important;
	border: 1.5px solid #c5c5c5;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
	flex-shrink: 0;
	overflow: visible !important;
	vertical-align: middle;
	top: 0 !important;
	line-height: 1 !important;
}
/* Modave tema input[type="checkbox"]::before icon-font ile native check çiziyor — bastır.
   Aksi halde bizim :checked::after üzerine üst üste binip "duplicate tick" görüntüsü oluşturur. */
.bsp-sponsor__consent input[type="checkbox"]::before {
	display: none !important;
	content: none !important;
}
.bsp-sponsor__consent input[type="checkbox"]:hover {
	border-color: var(--pls-primary-color, #a5804f);
}
.bsp-sponsor__consent input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(165, 128, 79, 0.2);
}
.bsp-sponsor__consent input[type="checkbox"]:checked {
	background: var(--pls-primary-color, #a5804f);
	border-color: var(--pls-primary-color, #a5804f);
}
.bsp-sponsor__consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bsp-sponsor__actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
	align-items: stretch;
}

/* ==========================================================================
   Tek-tip modal alt butonları — Sponsored + Bridal ortak.
   Tema buton patterni: 8px radius, 46px height, tema-uyumlu hover (#181818 ⇄ #a5804f).
   Eşit full-width yan yana: flex: 1 1 0.
   ========================================================================== */
.bsp-sponsor__cancel,
.bsp-sponsor__submit,
.bsbr-form__submit,
.bsbr-form__cancel {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 0 18px !important;
	height: 46px !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	border-radius: var(--pls-border-radius, 8px) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
	text-transform: none !important;
	white-space: nowrap;
	box-shadow: none !important;
}

/* PRIMARY (Talebi Gönder, Randevu Talebimi Gönder) — siyah fill, hover #a5804f (tema invert) */
.bsp-sponsor__submit,
.bsbr-form__submit {
	background: var(--pls-secondary-color, #181818) !important;
	color: #fff !important;
	border: 1px solid var(--pls-secondary-color, #181818) !important;
}
.bsp-sponsor__submit:hover,
.bsp-sponsor__submit:focus,
.bsbr-form__submit:hover,
.bsbr-form__submit:focus {
	background: var(--pls-primary-color, #a5804f) !important;
	border-color: var(--pls-primary-color, #a5804f) !important;
	color: #fff !important;
}
.bsp-sponsor__submit[disabled],
.bsbr-form__submit[disabled] {
	opacity: 0.55 !important;
	cursor: progress !important;
}

/* SECONDARY / GHOST (Vazgeç) — outline gri, hover'da fill siyah (invert) */
.bsp-sponsor__cancel,
.bsbr-form__cancel {
	background: transparent !important;
	color: var(--pls-mute-color, #6a6a6a) !important;
	border: 1px solid var(--pls-border-color, #d8d2c4) !important;
}
.bsp-sponsor__cancel:hover,
.bsp-sponsor__cancel:focus,
.bsbr-form__cancel:hover,
.bsbr-form__cancel:focus {
	background: var(--pls-secondary-color, #181818) !important;
	color: #fff !important;
	border-color: var(--pls-secondary-color, #181818) !important;
}

.bsp-sponsor__feedback {
	margin-top: 14px;
	padding: 0;
	font-size: 14px;
}
.bsp-sponsor__feedback.is-success {
	padding: 12px 14px;
	background: #e8f7eb;
	border-left: 3px solid #46b450;
	color: #1f5b2e;
	border-radius: 3px;
}
.bsp-sponsor__feedback.is-error {
	padding: 12px 14px;
	background: #fdecea;
	border-left: 3px solid #c33;
	color: #6e1313;
	border-radius: 3px;
}

@media (max-width: 900px) {
	.bsp-sponsor__row--two { grid-template-columns: 1fr; gap: 10px; }
	.bsp-sponsor__panel { padding: 16px 14px; max-width: 100%; }
	.bsp-sponsor__title { font-size: 16px; }
	.bsp-sponsor__intro { font-size: 13px; }
	.bsp-sponsor__field > span { font-size: 12px; line-height: 1.3; }
	/* Mobile: yan yana stretch korunur (flex: 1 1 0); padding biraz daralır. */
	.bsp-sponsor__actions { gap: 8px; }
	.bsp-sponsor__cancel, .bsp-sponsor__submit { padding: 0 12px !important; font-size: 13px !important; }
	.bsp-sponsor__trigger { width: 100%; justify-content: center; padding: 12px 16px; }
}

@media (max-width: 480px) {
	.bsp-sponsor__panel { padding: 14px 12px; }
	/* iOS zoom önlemi: 16px altındaki yazı tipi, alana dokunulduğunda sayfayı
	   otomatik büyütür. `select` de dahil edilmeli — dışarıda kalırsa yalnız o
	   alana dokununca sayfa zıplar ve kullanıcı sebebini anlamaz. */
	.bsp-sponsor__field input,
	.bsp-sponsor__field select,
	.bsp-sponsor__field textarea { font-size: 16px; padding: 10px; }
	.bsp-sponsor__field select { padding-right: 38px; } /* ok ikonu metnin üstüne binmesin */
}

/* ============================================================
 * Modal Success State (v0.4.4, 2026-05-08)
 * Form submit başarılı → form gizlenir, ortada animasyonlu ✓ + mesaj.
 * 5 sn sonra otomatik kapanır.
 *
 * v0.4.4 fix: Self-contained card. Sponsored panel `background: transparent`
 * olduğu için success box panel'e eklendiğinde arkaplansız kalıyordu. Şimdi
 * kendi bg/shadow/radius'u var, panel'e bağımsız okunabilir.
 * ============================================================ */
.bsp-sponsor__success {
	text-align: center;
	padding: 2.5rem 1.5rem 2rem;
	background: #fff !important;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	max-width: 460px;
	margin: auto;
	animation: bsp-success-fadein 0.4s ease-out;
	position: relative;
	z-index: 2;
}
.bsp-sponsor__success-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: #e6f5ec;
	color: #2c8f4a;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: bsp-success-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bsp-sponsor__success-title {
	margin: 0 0 0.5rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--pls-secondary-color, #181818);
	line-height: 1.3;
}
.bsp-sponsor__success-msg {
	margin: 0 auto 1.25rem;
	max-width: 380px;
	color: #555;
	font-size: 0.95rem;
	line-height: 1.5;
}
.bsp-sponsor__success-close-hint {
	display: block;
	color: #888;
	font-size: 0.82rem;
	font-style: italic;
}
@keyframes bsp-success-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes bsp-success-pop {
	0%   { transform: scale(0); opacity: 0; }
	60%  { transform: scale(1.12); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}