/* Perdele Müşteri Paneli - Hesabım sayfası marka uyumlu görünüm
 *
 * Sitenin kendi marka renklerinden ve fontlarından türetildi (tahmin değil,
 * canlı siteden okundu): birincil renk #E0D0BB (ör. "Sepete Ekle" butonu ve
 * fiyat rengiyle aynı), başlık/buton fontu Comfortaa, gövde metni Lato.
 * Sadece renk/tipografi/köşe yuvarlaklığı gibi görsel katmanı değiştirir;
 * WooCommerce'in kendi form/sayfa yapısına dokunmaz.
 */

:root {
	--perdele-primary: #e0d0bb;
	--perdele-primary-text: #ffffff;
	--perdele-primary-dark: #c9b699;
	--perdele-radius: 5px;
	--perdele-heading-font: 'Comfortaa', Arial, Helvetica, sans-serif;
}

/* Hesabım sayfası başlıkları */
.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .entry-title {
	font-family: var( --perdele-heading-font );
}

/* Sol menü (Panom / Siparişlerim / Hesap Bilgilerim vb.) */
.woocommerce-MyAccount-navigation ul {
	border-radius: var( --perdele-radius );
	overflow: hidden;
}

.woocommerce-MyAccount-navigation-link a {
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover {
	/* Woodmart temasının kendi ".wd-builder-off ... li.is-active > a" kuralı
	 * bizimkinden daha yüksek özgüllükte (specificity), bu yüzden burada
	 * !important gerekiyor. */
	background-color: var( --perdele-primary ) !important;
	color: var( --perdele-primary-text ) !important;
}

/* Butonlar (WooCommerce'in kendi butonları + bizim eklentimizin butonları) */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-Button,
#perdele-verify-submit,
.perdele-reorder-button {
	background-color: var( --perdele-primary ) !important;
	color: var( --perdele-primary-text ) !important;
	border-radius: var( --perdele-radius ) !important;
	border: none !important;
	font-family: var( --perdele-heading-font );
	transition: background-color 0.15s ease;
}

.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-Button:hover,
#perdele-verify-submit:hover,
.perdele-reorder-button:hover {
	background-color: var( --perdele-primary-dark ) !important;
	color: var( --perdele-primary-text ) !important;
}

/* Form alanları (kayıt, giriş, hesap bilgileri, adresler) */
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select,
#perdele-verify-code {
	border-radius: var( --perdele-radius );
	transition: border-color 0.15s ease;
}

.woocommerce-account form .form-row input.input-text:focus,
.woocommerce-account form .form-row textarea:focus,
.woocommerce-account form .form-row select:focus,
#perdele-verify-code:focus {
	border-color: var( --perdele-primary );
	outline: none;
	box-shadow: 0 0 0 2px rgba( 224, 208, 187, 0.35 );
}

/* Sipariş tablosu */
.woocommerce-account .woocommerce-orders-table thead th,
.woocommerce-account .shop_table thead th {
	font-family: var( --perdele-heading-font );
	background-color: rgba( 224, 208, 187, 0.25 );
}

/* Bizim doğrulama modalımızı da aynı palete taşı (kayıt akışı Hesabım
 * sayfasında çalıştığı için burada; "Tekrar Sipariş Ver" bildirimi ürün
 * sayfasında göründüğü için o renk assets/reorder.css içinde). */
.perdele-modal-content h3 {
	font-family: var( --perdele-heading-font );
}

/* v1.4.0: Sipariş durumu adım çubuğu (sipariş detayı sayfası). Pazaryeri
 * panellerinden (Trendyol/N11) esinlenilen bir PATTERN - renkler yine
 * sitenin kendi --perdele-primary değişkeninden geliyor, yeni bir marka
 * rengi eklenmedi; nötr tonlar (gri) sadece "henüz ulaşılmamış adım" içindir. */
.perdele-status-stepper {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	gap: 4px;
}

.perdele-status-step {
	flex: 1 1 0;
	min-width: 90px;
	text-align: center;
	position: relative;
	padding-top: 22px;
	font-size: 12px;
	color: #888;
}

.perdele-status-step::before {
	content: '';
	position: absolute;
	top: 8px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: #e2e2e2;
	z-index: 0;
}

.perdele-status-step:first-child::before {
	display: none;
}

.perdele-status-dot {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #e2e2e2;
	border: 2px solid #e2e2e2;
	margin: 0 auto 6px;
	position: relative;
	z-index: 1;
}

.perdele-status-step--done .perdele-status-dot,
.perdele-status-step--current .perdele-status-dot {
	background: var( --perdele-primary );
	border-color: var( --perdele-primary );
}

.perdele-status-step--done::before {
	background: var( --perdele-primary );
}

.perdele-status-step--current .perdele-status-label {
	color: #3c3c3c;
	font-weight: 600;
}

.perdele-status-step--done .perdele-status-label {
	color: #3c3c3c;
}

@media ( max-width: 480px ) {
	.perdele-status-step {
		font-size: 11px;
	}
}

/* v1.7.0: Facebook ile açılan hesaplarda telefon alanı boş kaldığı için
 * gösterilen hatırlatma kutusu. Yeni bir marka rengi eklenmedi - sitenin
 * kendi --perdele-primary renginin açık tonu (arka plan) ve koyu tonu
 * (yazı/çerçeve) kullanıldı, aynen diğer bilgi kutularında olduğu gibi. */
.perdele-phone-reminder {
	background: rgba( 224, 208, 187, 0.25 );
	border: 1px solid var( --perdele-primary );
	border-radius: var( --perdele-radius );
	padding: 10px 14px;
	margin-bottom: 18px;
	color: #5c4a2a;
	font-size: 14px;
}

/* v1.11.0: WooCommerce'in kendi "Hesap Bilgilerim" formunda, Ad/Soyad'ın
 * hemen altında bir de "Görünen Ad" (Display name) metin kutusu bulunur -
 * ilk dolduruluşunda WordPress bunu otomatik üretilen kullanıcı adından
 * türetir, yani müşteri kendi profilinde "kullanıcı adı"na benzeyen bir
 * değer görebiliyordu. Artık görünen ad HER ZAMAN Ad/Soyad'tan otomatik
 * hesaplanıyor (bkz. save_edit_account_fields()/sync_display_name()), bu
 * alanın kendisi de gereksiz olduğu için tamamen gizleniyor. */
.woocommerce-EditAccountForm #account_display_name,
.woocommerce-EditAccountForm label[for="account_display_name"] {
	display: none !important;
}

/* Modern tarayıcılarda bütün form satırını (açıklama metniyle birlikte)
 * gizler; :has() desteklemeyen eski bir tarayıcıda yukarıdaki kural zaten
 * alanın kendisini gizlediği için görsel bir bozulma olmaz. */
.woocommerce-EditAccountForm p.form-row:has(#account_display_name) {
	display: none !important;
}

/* v1.10.0: "Hesap Bilgilerim" sekmesindeki "Bağlı Giriş Yöntemleri" kutusu -
 * hangi yöntemlerle (E-posta/Şifre, Google, Facebook) bu hesaba giriş
 * yapılabildiğini gösterir, bağlı olmayanlar için (zaten giriş yapılmışken,
 * en güvenli bağlam olduğu için doğrulama kodu istemeden) bağlama imkânı
 * sunar - bkz. render_linked_accounts_section(). */
.perdele-linked-accounts {
	border: 1px solid #e2e2e2;
	border-radius: var( --perdele-radius );
	padding: 14px 18px 18px;
	margin: 24px 0;
}

.perdele-linked-accounts legend {
	font-family: var( --perdele-heading-font );
	font-weight: 600;
	padding: 0 8px;
}

.perdele-linked-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.perdele-linked-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.perdele-linked-list li:last-child {
	border-bottom: none;
}

.perdele-linked-label {
	min-width: 110px;
	font-weight: 600;
	color: #3c3c3c;
}

.perdele-linked-badge {
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.perdele-linked-badge.perdele-linked-active {
	background: rgba( 224, 208, 187, 0.4 );
	color: #5c4a2a;
}

.perdele-linked-badge.perdele-linked-inactive {
	background: #f1f1f1;
	color: #888;
}

/* Bu liste satırı içindeki Google butonu, giriş/kayıt formundakinden farklı
 * olarak küçük/satır-içi görünmeli - ayraç ("veya") ve geniş boşluklar
 * burada anlamsız, bu yüzden geçersiz kılınıyor (bkz. assets/
 * google-signin.css'teki .perdele-google-fallback). */
.perdele-linked-list .perdele-linked-connect-btn.perdele-google-fallback {
	margin: 0;
	padding: 0;
}

.perdele-linked-list .perdele-linked-connect-btn .perdele-google-fallback-btn {
	max-width: 240px;
	margin: 0;
	justify-content: flex-start;
}

/* Facebook ayarlanmadıysa assets/google-signin.css'teki "VEYA" ayracı
 * (::before/::after) burada da tetiklenebilir - bu küçük satır-içi
 * bağlama bağlamında anlamsız, tamamen kapatılıyor. */
.perdele-linked-list .perdele-linked-connect-btn.perdele-google-fallback::before,
.perdele-linked-list .perdele-linked-connect-btn.perdele-google-fallback::after {
	content: none;
	display: none;
}

.perdele-linked-connect-fb {
	font-size: 13px !important;
	padding: 6px 14px !important;
}

.perdele-linked-ok {
	color: #2e7d32;
	font-weight: 600;
	margin: 0;
}