/**
 * Pasta La Vista — "Hesabım" (My Account) — VIP / premium tasarım
 * -------------------------------------------------------------
 * WooCommerce'in kendi My Account şablon/shortcode çıktısını (nav + tab
 * içerikleri) hiçbir PHP şablonu override edilmeden, sadece CSS ile
 * markaya uygun, "VIP" hissi veren bir görünüme dönüştürür. Üstteki
 * profil başlığı (avatar + isim + rozet) functions.php > pv_render_account_header()
 * tarafından the_content filtresiyle eklenir.
 */

/* ==================== Profil Başlığı ==================== */
.pv-account-header {
	position: relative;
	background: linear-gradient(135deg, var(--pv-dark) 0%, #3a281c 55%, var(--pv-red-deep) 100%);
	border-radius: var(--pv-radius-lg);
	overflow: hidden;
	margin: var(--pv-space-sm) auto var(--pv-space-md);
	max-width: var(--pv-container-max);
}

.pv-account-header-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 15%, rgba(245, 169, 1, 0.35) 0, transparent 42%),
		radial-gradient(circle at 92% 85%, rgba(225, 9, 29, 0.28) 0, transparent 48%);
	pointer-events: none;
}

.pv-account-header-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--pv-space-md);
	padding: var(--pv-space-lg) var(--pv-space-md);
}

.pv-account-avatar-wrap {
	position: relative;
	flex: 0 0 auto;
}

.pv-account-avatar-circle {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--pv-gold), var(--pv-gold-deep));
	border: 3px solid rgba(255, 255, 255, 0.85);
	box-shadow: var(--pv-shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pv-account-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pv-account-avatar-placeholder {
	font-family: var(--pv-font-display);
	font-weight: 700;
	font-size: 2rem;
	color: var(--pv-white);
}

.pv-account-avatar-edit {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--pv-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	box-shadow: var(--pv-shadow-md);
	cursor: pointer;
	border: 2px solid var(--pv-gold);
	transition: transform 0.15s ease;
}

.pv-account-avatar-edit:hover {
	transform: scale(1.08);
}

.pv-account-avatar-edit.is-uploading {
	opacity: 0.6;
	pointer-events: none;
}

.pv-account-avatar-msg {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin: 6px 0 0;
	font-size: var(--pv-text-xs);
	font-weight: 700;
	white-space: nowrap;
	color: var(--pv-gold-tint);
}

.pv-account-avatar-msg.is-error {
	color: #ffb4ac;
}

.pv-account-identity {
	min-width: 0;
	flex: 1 1 auto;
}

.pv-account-vip-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--pv-text-xs);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--pv-radius-pill);
	background: linear-gradient(135deg, var(--pv-gold), var(--pv-gold-deep));
	color: var(--pv-dark);
	margin-bottom: 8px;
	box-shadow: var(--pv-shadow-sm);
}

/*
 * NOT: .pv-account-header sarmalayici div'i global ".pv-scope" sinifini da
 * tasiyor; pv-base.css'teki ".pv-scope h1/h2/h3" ve ".pv-scope p" kurallari
 * eleman+sinif ozgulluguyle (0,1,1) tek-sinif secicileri (0,1,0) her zaman
 * yener — yukleme sirasi onemli degil. Bu yuzden burada rengi ".pv-account-header"
 * ile birlikte iki sinifli secici olarak veriyoruz ki ozgulluk kesin kazansin
 * (isim/telefon koyu renkte kaybolup okunmuyordu).
 */
.pv-account-header .pv-account-name {
	font-family: var(--pv-font-display);
	font-weight: 600;
	font-size: var(--pv-text-2xl);
	color: var(--pv-white);
	margin: 0 0 4px;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.pv-account-header .pv-account-meta {
	font-family: var(--pv-font-body);
	font-size: var(--pv-text-sm);
	color: rgba(255, 253, 249, 0.92);
	margin: 0;
}

@media (max-width: 480px) {
	.pv-account-header-inner {
		padding: var(--pv-space-md) var(--pv-space-sm);
		gap: var(--pv-space-sm);
	}
	.pv-account-avatar-circle {
		width: 68px;
		height: 68px;
	}
	.pv-account-header .pv-account-name {
		font-size: var(--pv-text-xl);
	}
}

/* ==================== Sekmeler: yapışkan (sticky), pill tasarım ====================
 * "Alt menüler arasında gezinirken her seferinde en başa dönüyor" şikayeti
 * için: sekme çubuğunu ekranın en üstünde sabit tutarak, hangi alt sayfada
 * olunursa olunsun diğer sekmeye geçmek için yukarı kaydırmaya gerek
 * bırakmıyoruz — aynı prensip menü sayfasındaki kategori sekmelerinde de
 * kullanıldı (bkz. pv-restaurant-header.css).
 */
/*
 * WooCommerce'in kendi varsayilan CSS'i (woocommerce.css) navigasyonu
 * "float: left; width: 30%" ile dar bir kenar cubugu olarak dizer,
 * icerigi de "float: right; width: 68%" yapar. Bunu once sifirlamazsak
 * asagidaki yatay pill-sekme tasarimi bu dar sutuna sikisip kare kare
 * kirilir. Once tam genislik/blok akisina donduruyoruz.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-MyAccount-navigation {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--pv-cream);
	border-bottom: 1px solid var(--pv-border);
	padding: 10px var(--pv-space-sm);
	margin: 0 0 var(--pv-space-md);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: var(--pv-container-max);
	margin-inline: auto;
}

.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
	display: none;
}

.woocommerce-MyAccount-navigation li {
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--pv-radius-pill);
	background: var(--pv-white);
	color: var(--pv-dark-soft);
	font-family: var(--pv-font-body);
	font-weight: 700;
	font-size: var(--pv-text-sm);
	text-decoration: none;
	border: 1px solid var(--pv-border);
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.woocommerce-MyAccount-navigation li a::before {
	font-size: 1rem;
	line-height: 1;
}

.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "👤"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "🧾"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "📍"; }
.woocommerce-MyAccount-navigation-link--puanlarim a::before { content: "⭐"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "🚪"; }

.woocommerce-MyAccount-navigation li.is-active a {
	background: linear-gradient(135deg, var(--pv-red), var(--pv-red-deep));
	color: var(--pv-white) !important;
	border-color: transparent;
	box-shadow: var(--pv-shadow-sm);
	transform: translateY(-1px);
}

/* ==================== Genel içerik alanı ==================== */
.woocommerce-MyAccount-content {
	max-width: var(--pv-container-max);
	margin: 0 auto;
	padding: 0 var(--pv-space-sm) var(--pv-space-xl);
}

.woocommerce-MyAccount-content > p:first-child,
.woocommerce-MyAccount-content .woocommerce-notices-wrapper,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--pv-font-display);
	color: var(--pv-dark);
}

.woocommerce-MyAccount-content mark {
	background: none;
	color: var(--pv-red-deep);
	font-weight: 700;
}

/* ==================== Sipariş listesi ==================== */
table.woocommerce-orders-table,
table.woocommerce-MyAccount-orders {
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-md);
	overflow: hidden;
	background: var(--pv-white);
	box-shadow: var(--pv-shadow-sm);
}

table.woocommerce-orders-table thead th {
	background: var(--pv-cream);
	font-family: var(--pv-font-body);
	font-weight: 800;
	color: var(--pv-dark);
	text-transform: none;
}

table.woocommerce-orders-table tbody tr {
	transition: background-color 0.15s ease;
}

table.woocommerce-orders-table tbody tr:hover {
	background: var(--pv-cream);
}

.woocommerce-orders-table__cell-order-status mark {
	font-weight: 800;
}

/* Ürün küçük görselleri (class-account-hub.php > render_order_items_thumbnails) */
.pv-order-thumbs {
	display: flex;
	align-items: center;
}

.pv-order-thumb {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--pv-white);
	box-shadow: var(--pv-shadow-sm);
	background: var(--pv-cream);
	margin-left: -10px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pv-order-thumb:first-child {
	margin-left: 0;
}

.pv-order-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pv-order-thumb-more {
	font-family: var(--pv-font-mono);
	font-weight: 700;
	font-size: var(--pv-text-xs);
	color: var(--pv-dark-soft);
	background: var(--pv-border);
}

/* "Tekrar sipariş ver" — dikkat çekici, ısrarcı renk */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-orders .button {
	border-radius: var(--pv-radius-pill) !important;
	font-family: var(--pv-font-body) !important;
	font-weight: 700 !important;
	font-size: var(--pv-text-xs) !important;
	padding: 8px 14px !important;
	margin: 2px !important;
	border: 1px solid var(--pv-border) !important;
	background: var(--pv-white) !important;
	color: var(--pv-dark-soft) !important;
	box-shadow: none !important;
}

.woocommerce-orders-table__cell-order-actions .button.again,
.woocommerce-MyAccount-orders .button.again {
	background: linear-gradient(135deg, var(--pv-gold), var(--pv-red)) !important;
	color: var(--pv-white) !important;
	border: none !important;
	box-shadow: var(--pv-shadow-md) !important;
	position: relative;
	animation: pv-order-again-pulse 2.4s ease-in-out infinite;
}

.woocommerce-orders-table__cell-order-actions .button.again:hover,
.woocommerce-MyAccount-orders .button.again:hover {
	transform: translateY(-1px) scale(1.03);
	animation-play-state: paused;
}

@keyframes pv-order-again-pulse {
	0%, 100% { box-shadow: var(--pv-shadow-md); }
	50% { box-shadow: 0 0 0 6px rgba(225, 9, 29, 0.12); }
}

/* Mobilde tablo yerine kart görünümü (Storefront zaten data-title basıyor) */
@media (max-width: 600px) {
	table.woocommerce-orders-table thead {
		display: none;
	}
	table.woocommerce-orders-table tbody tr {
		display: block;
		padding: var(--pv-space-sm);
		border-bottom: 1px solid var(--pv-border);
	}
	table.woocommerce-orders-table tbody tr td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px 0;
		border: none !important;
		text-align: right;
	}
	table.woocommerce-orders-table tbody tr td::before {
		content: attr(data-title);
		font-weight: 700;
		color: var(--pv-dark-soft);
		text-align: left;
	}
	table.woocommerce-orders-table tbody tr td.woocommerce-orders-table__cell-order-items {
		justify-content: flex-end;
	}
}

/* ==================== Adreslerim ==================== */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--pv-space-sm);
}

.woocommerce-Address {
	background: var(--pv-white);
	border: 1px solid var(--pv-border);
	border-left: 4px solid var(--pv-gold);
	border-radius: var(--pv-radius-md);
	padding: var(--pv-space-md);
	box-shadow: var(--pv-shadow-sm);
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.woocommerce-Address-title h3 {
	font-family: var(--pv-font-display);
	font-size: var(--pv-text-lg);
	margin: 0;
}

.woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--pv-font-body);
	font-weight: 700;
	font-size: var(--pv-text-xs);
	color: var(--pv-white) !important;
	background: var(--pv-red);
	padding: 6px 12px;
	border-radius: var(--pv-radius-pill);
	text-decoration: none !important;
}

.woocommerce-Address-title .edit:hover {
	background: var(--pv-red-deep);
}

.woocommerce-Address address {
	font-style: normal;
	color: var(--pv-dark-soft);
	line-height: 1.7;
}

/* ==================== Profilim (edit-account formu) ==================== */
.woocommerce-EditAccountForm,
form.edit-account {
	background: var(--pv-white);
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-lg);
	padding: var(--pv-space-md);
	box-shadow: var(--pv-shadow-sm);
	max-width: 640px;
}

.woocommerce-EditAccountForm legend,
form.edit-account fieldset legend {
	font-family: var(--pv-font-display);
	font-weight: 700;
	font-size: var(--pv-text-lg);
	color: var(--pv-dark);
	padding-top: var(--pv-space-sm);
}

.woocommerce-EditAccountForm .form-row label,
form.edit-account .form-row label {
	font-family: var(--pv-font-body);
	font-weight: 700;
	font-size: var(--pv-text-sm);
	color: var(--pv-dark-soft);
}

.woocommerce-EditAccountForm input.input-text,
.woocommerce-EditAccountForm select,
form.edit-account input.input-text,
form.edit-account select {
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-sm);
	padding: 11px 12px;
	background: var(--pv-cream);
	font-family: var(--pv-font-body);
	width: 100%;
}

.woocommerce-EditAccountForm input.input-text:focus,
form.edit-account input.input-text:focus {
	border-color: var(--pv-red);
	outline: none;
	background: var(--pv-white);
}

.woocommerce-EditAccountForm button[type="submit"],
form.edit-account button[type="submit"] {
	background: var(--pv-red) !important;
	color: var(--pv-white) !important;
	border: none !important;
	border-radius: var(--pv-radius-pill) !important;
	font-family: var(--pv-font-body) !important;
	font-weight: 800 !important;
	padding: 14px 28px !important;
	box-shadow: var(--pv-shadow-md);
}

.woocommerce-EditAccountForm button[type="submit"]:hover,
form.edit-account button[type="submit"]:hover {
	background: var(--pv-red-deep) !important;
}

@media (max-width: 480px) {
	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
	.woocommerce-EditAccountForm,
	form.edit-account {
		padding: var(--pv-space-sm);
	}
}