/* Restyle halaman My Account customer (/my-account-2/) -- lihat
   includes/my-account-custom.php buat konteks lengkap. Self-contained (nggak
   gantung ke assets/dashboard.css, yang cuma dimuat di halaman dashboard
   seller) -- token warna brand diulang di sini, pola sama kayak
   cek-pesanan.css. Warna aksen biru (#1c78c9) sama persis .zsd-btn-primary
   di dashboard.css (redesign 2026-08-08) -- BUKAN hijau lama #0F6E56 yang
   masih nempel di checkout-custom.css (belum diupdate, di luar scope round
   ini). Mobile-first dari awal (bukan ditambahin belakangan) -- pelajaran
   dari dashboard.css yang sebelumnya nggak punya @media sama sekali. */

:root {
	--zsd-akun-biru: #1c78c9;
	--zsd-akun-biru-hover: #15609f;
	--zsd-akun-gelap: #1c1c1a;
	--zsd-akun-muted: #6b7280;
	--zsd-akun-bg: #f4f6f9;
	--zsd-akun-border: #e7eaf0;
	--zsd-akun-radius-card: 14px;
	--zsd-akun-radius-btn: 10px;
	--zsd-akun-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* =====================================================================
 * Wrapper umum -- dibungkus lewat JS (my-account.js) di sekitar konten
 * WooCommerce asli (.woocommerce), supaya card+spacing konsisten tanpa
 * perlu override template.
 * ===================================================================== */

.woocommerce-account .woocommerce {
	/* PENTING: ada CSS lain (WooCommerce Blocks, base style buat halaman Cart/Checkout)
	   yang nge-set class ".woocommerce" jadi "display: flex; flex-direction: row" secara
	   umum -- kepakai juga di sini walau nggak relevan sama halaman akun sama sekali.
	   Efeknya: nav (.woocommerce-MyAccount-navigation) & konten
	   (.woocommerce-MyAccount-content) jadi flex item SEJAJAR (bukan ditumpuk atas-bawah
	   kayak seharusnya), dan kartu Login/Register (#customer_login) nggak melebar penuh
	   (flex item defaultnya nggak stretch ke lebar penuh) -- ini PERSIS penyebab bug
	   "kanan kiri kosong" & nav+konten tabrakan yang dilaporkan Ferdian 2026-08-16, DICEK
	   LANGSUNG lewat Claude in Chrome (getComputedStyle di halaman live), bukan tebakan.
	   !important sengaja dipakai di sini -- pola override defensif yang sama kayak
	   priority 9999 di gettext filter checkout-custom.php, buat pastikan menang lawan
	   CSS lain yang urutan load-nya nggak bisa dikontrol dari sini. */
	display: block !important;
	max-width: 880px;
	margin: 40px auto;
	padding: 0 16px;
}

/* =====================================================================
 * Login / Register (logged-out) -- tab switcher gantiin 2 kolom default
 * ===================================================================== */

.woocommerce-account #customer_login.u-columns {
	background: #fff;
	border-radius: var(--zsd-akun-radius-card);
	box-shadow: var(--zsd-akun-shadow);
	overflow: hidden;
	display: block;
}

.zsd-akun-tabs {
	display: flex;
	border-bottom: 1px solid var(--zsd-akun-border);
}

.zsd-akun-tab {
	flex: 1;
	text-align: center;
	padding: 16px 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--zsd-akun-muted);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.zsd-akun-tab:hover {
	color: var(--zsd-akun-gelap);
}

.zsd-akun-tab.zsd-akun-tab-aktif {
	color: var(--zsd-akun-biru);
	border-bottom-color: var(--zsd-akun-biru);
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	/* max-width juga di-reset paksa, bukan cuma width -- WooCommerce/tema nge-set
	   ".u-column1"/".u-column2" max-width:50% (asumsi lama 2 kolom berdampingan), yang
	   MENANG lawan width:100% biasa (max-width selalu menang kalau lebih kecil dari
	   width). Ketauan dicek langsung getComputedStyle di halaman live -- kartu form
	   cuma selebar ~50% padahal width udah 100%, gara-gara ini. */
	width: 100%;
	max-width: 100%;
	float: none;
	padding: 28px 26px 32px;
	display: none;
	box-sizing: border-box;
}

.woocommerce-account #customer_login .u-column1.zsd-akun-panel-aktif,
.woocommerce-account #customer_login .u-column2.zsd-akun-panel-aktif {
	display: block;
}

/* Transisi fade+geser pas ganti tab Masuk/Daftar -- sebelumnya cuma toggle display
   instan (nggak kerasa "hidup"), Ferdian minta disamain rasanya kayak /partner-login.
   BUKAN morph View Transitions kayak preview-toko di /partner-login (itu tetap scope
   terpisah, lihat catatan di includes/my-account-custom.php) -- ini murni fade
   sederhana buat konten tab, cukup buat "kerasa ada transisi" tanpa kompleksitas
   split-panel. Class ditambah/dilepas lewat my-account.js. */
.woocommerce-account #customer_login .u-column1.zsd-akun-panel-masuk,
.woocommerce-account #customer_login .u-column2.zsd-akun-panel-masuk {
	opacity: 0;
	transform: translateY(6px);
}

.woocommerce-account #customer_login .u-column1.zsd-akun-panel-tampil,
.woocommerce-account #customer_login .u-column2.zsd-akun-panel-tampil {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-account #customer_login .u-column1,
	.woocommerce-account #customer_login .u-column2 {
		transition: none !important;
		transform: none !important;
	}
}

/* Fallback kalau JS nggak jalan (tab bar nggak ke-render) -- tampilin dua-duanya
   ditumpuk, jangan sampai form-nya malah nggak kelihatan sama sekali. */
.woocommerce-account #customer_login:not(.zsd-akun-js-aktif) .u-column1,
.woocommerce-account #customer_login:not(.zsd-akun-js-aktif) .u-column2 {
	display: block;
}

.woocommerce-account #customer_login h2 {
	font-size: 19px;
	font-weight: 700;
	color: var(--zsd-akun-gelap);
	margin: 0 0 18px;
}

/* Judul asli disembunyikan pas tab bar sudah jalan (JS nambah class ini) --
   nama tab di atas sudah cukup, judul H2 di dalam panel jadi berlebihan. */
.zsd-akun-js-aktif #customer_login h2 {
	display: none;
}

/* =====================================================================
 * Form styling -- login, register, edit account, addresses, reset password
 * ===================================================================== */

.woocommerce-account form .form-row {
	margin: 0 0 16px;
}

.woocommerce-account form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--zsd-akun-gelap);
	margin-bottom: 6px;
}

.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="password"],
.woocommerce-account form select,
.woocommerce-account form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid #d8d6cd;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}

.woocommerce-account form .input-text:focus,
.woocommerce-account form input[type="text"]:focus,
.woocommerce-account form input[type="email"]:focus,
.woocommerce-account form input[type="tel"]:focus,
.woocommerce-account form input[type="password"]:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
	outline: none;
	border-color: var(--zsd-akun-biru);
	box-shadow: 0 0 0 1px var(--zsd-akun-biru);
}

.woocommerce-account form .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--zsd-akun-muted);
	font-weight: 500;
	margin: 0;
}

.woocommerce-account form button[type="submit"],
.woocommerce-account form input[type="submit"],
.woocommerce-account .woocommerce-Button {
	width: 100%;
	background: var(--zsd-akun-biru);
	color: #fff;
	border: none;
	border-radius: var(--zsd-akun-radius-btn);
	padding: 12px 20px;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.woocommerce-account form button[type="submit"]:hover,
.woocommerce-account form input[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover {
	background: var(--zsd-akun-biru-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(28, 120, 201, 0.3);
}

.woocommerce-account .woocommerce-LostPassword,
.woocommerce-account .woocommerce-privacy-policy-text a,
.woocommerce-account form a {
	color: var(--zsd-akun-biru);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-LostPassword {
	margin-top: 12px;
	font-size: 13px;
}

.woocommerce-account .woocommerce-privacy-policy-text {
	font-size: 12px;
	color: var(--zsd-akun-muted);
	line-height: 1.5;
	margin: 14px 0;
}

/* =====================================================================
 * My Account logged-in -- nav jadi tab horizontal underline (pola sama
 * kayak tab status di dashboard seller), konten jadi kartu putih
 * ===================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
	/* width/max-width di-reset paksa -- tema nge-set nav ini max-width:20% (asumsi lama
	   layout sidebar-kiri 20% + konten 80% berdampingan, gaya WooCommerce classic), yang
	   bikin nav kepepet jadi kolom sempit begitu #zsd-fix di atas ngebalikin parent-nya
	   ke block. Nav ini sekarang harus selebar penuh SENDIRI di baris atas, konten
	   (.woocommerce-MyAccount-content) di baris terpisah di bawahnya. */
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--zsd-akun-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0;
	padding: 0;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 10px 14px;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zsd-akun-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--zsd-akun-gelap);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--zsd-akun-biru);
	border-bottom-color: var(--zsd-akun-biru);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #b3261e;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	background: #fff;
	border-radius: var(--zsd-akun-radius-card);
	box-shadow: var(--zsd-akun-shadow);
	padding: 28px 26px;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	color: var(--zsd-akun-muted);
	font-size: 13.5px;
}

.woocommerce-account table.my_account_orders,
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.woocommerce-account table.my_account_orders th,
.woocommerce-account table.shop_table th {
	text-align: left;
	padding: 10px 8px;
	color: var(--zsd-akun-muted);
	font-weight: 600;
	border-bottom: 1px solid var(--zsd-akun-border);
}

.woocommerce-account table.my_account_orders td,
.woocommerce-account table.shop_table td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--zsd-akun-border);
	color: var(--zsd-akun-gelap);
}

.woocommerce-account .woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
}

.woocommerce-account .woocommerce-Address {
	flex: 1 1 260px;
	border: 1px solid var(--zsd-akun-border);
	border-radius: 12px;
	padding: 18px 18px 20px;
}

.woocommerce-account .woocommerce-Address-title h3 {
	font-size: 15px;
	margin: 0 0 4px;
}

.woocommerce-account .woocommerce-Address-title .edit {
	color: var(--zsd-akun-biru);
	font-weight: 600;
	font-size: 13px;
}

/* =====================================================================
 * Responsive -- mobile-first, layar kecil dulu yang dites/dipikirkan
 * ===================================================================== */

@media (max-width: 640px) {
	.woocommerce-account .woocommerce {
		margin: 20px auto;
	}

	.woocommerce-account #customer_login .u-column1,
	.woocommerce-account #customer_login .u-column2 {
		padding: 22px 18px 26px;
	}

	.zsd-akun-tab {
		padding: 14px 6px;
		font-size: 13.5px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 20px 16px;
	}

	.woocommerce-account table.my_account_orders,
	.woocommerce-account table.shop_table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.woocommerce-account .woocommerce-Addresses {
		flex-direction: column;
	}
}