/**
 * Storefront — Account widget.
 *
 * Desain sesuai spec/widget/account/account-widget-spec.md +
 * account-widget-concept.html. Selector di-scope ke .stfr-account,
 * class di-prefix `stfr-account`. Token & pola sama dengan widget
 * Cart/Checkout supaya konsisten lintas widget.
 */

.stfr-account {
	--stfr-primary: #2D5A4D;
	--stfr-primary-dark: #1D3B32;
	--stfr-primary-light: #3E7A68;
	--stfr-accent: #D4B038;
	--stfr-accent-dark: #A9872B;
	--stfr-accent-light: #E6C665;
	--stfr-n900: #1A1F1D;
	--stfr-n700: #4A5550;
	--stfr-n500: #8A9490;
	--stfr-n300: #D8DEDB;
	--stfr-n100: #F4F6F5;
	--stfr-white: #FFFFFF;
	--stfr-cream: #F7F6F0;
	--stfr-sage: #EAF0EC;
	--stfr-danger: #C0392B;
	--stfr-danger-light: #FBE9E7;
	--stfr-display: 'Gilda Display', Georgia, 'Times New Roman', serif;
	--stfr-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--stfr-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

	font-family: var(--stfr-body);
	color: var(--stfr-n900);
	line-height: 1.5;
	background: var(--stfr-cream);
	-webkit-font-smoothing: antialiased;
}

.stfr-account *,
.stfr-account *::before,
.stfr-account *::after {
	box-sizing: border-box;
}

.stfr-account [hidden] {
	display: none !important;
}
/* ^ Beberapa komponen (mis. `.stfr-account__address-view`,
   `.stfr-account__form-grid`, `.stfr-account__empty-row`) di-declare
   `display:flex`/`display:grid` tanpa syarat di class-nya sendiri, lalu
   ditoggle pakai atribut HTML `hidden`. Masalahnya: `[hidden]{display:none}`
   itu cuma aturan default UA stylesheet — CSS SEBARANG dari kita (author
   stylesheet) SELALU menang lawan UA stylesheet berdasarkan ORIGIN,
   terlepas dari specificity. Jadi `.stfr-account__address-view{display:
   flex}` (author CSS) otomatis meng-override `[hidden]` bawaan browser,
   walau elemen itu masih punya atribut `hidden` — komponen jadi tetap
   kelihatan padahal seharusnya tersembunyi (bug nyata: form alamat & view
   alamat tampil BERSAMAAN). Fix: paksa `[hidden]` selalu menang lewat
   `!important` di sini, satu kali untuk semua elemen dalam widget. */

.stfr-account :where(h1, h2, h3, h4) {
	font-family: var(--stfr-display);
	font-weight: 400;
	margin: 0;
}

.stfr-account :where(p) {
	margin: 0;
}

.stfr-account :where(button) {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	border: none;
	background: none;
	padding: 0;
}

.stfr-account :where(a) {
	text-decoration: none;
}

.stfr-account a,
.stfr-account a:hover,
.stfr-account a:focus,
.stfr-account a:visited,
.stfr-account button,
.stfr-account button:hover,
.stfr-account button:focus {
	color: inherit !important;
}
/* ^ Sama alasannya dengan reset border tabel: Elementor (dan beberapa
   tema) punya warna global "Secondary"/link-hover yang sering di-set pink/
   magenta, dipasang lewat rule yang cukup spesifik (kadang bahkan
   `!important` sendiri di beberapa versi kit Elementor) — sehingga warna
   teks tombol/link kita bisa ke-override jadi pink tanpa diminta, PALING
   kentara di state `:hover`. `color:inherit !important` di sini memaksa
   SEMUA link/button dalam widget mewarisi warna dari parent terdekat
   (biasanya sudah class komponen spesifik seperti `.stfr-account__btn-
   primary` dengan `color` sendiri) — lalu tiap komponen yang MEMANG butuh
   warna berbeda (mis. tombol primary putih, tombol danger merah, nav aktif
   hijau) di-!important-kan juga di bawah supaya menang lawan reset ini. */

.stfr-account table,
.stfr-account tr,
.stfr-account th,
.stfr-account td {
	border: none !important;
	border-collapse: collapse;
	text-align: left;
	padding: 0;
	margin: 0;
	font-weight: 400;
}
/* ^ TIDAK pakai :where() di sini (beda dari reset h2/p/button/a/label di
   atas) — :where() dipakai untuk mengalahkan CSS KOMPONEN SENDIRI di dalam
   widget ini (spesifisitasnya sengaja dibikin 0 supaya class turunan yang
   menang). Tabel butuh sebaliknya: harus MENGALAHKAN CSS TEMA situs
   (banyak tema WP kasih `table, td, th{border:1px solid...}` bawaan by
   default) yang punya spesifisitas sendiri — kalau di-:where()-kan
   spesifisitas kita jadi 0 dan PASTI kalah dari rule tema manapun.
   `!important` dipakai sengaja karena kita tidak bisa menebak spesifisitas
   tema apa pun yang dipasang situs ini. Revisi: shorthand `border` (semua
   sisi, termasuk bottom) sekarang di-`!important`-kan SEKALIGUS — versi
   sebelumnya cuma memaksa left/right/top supaya border-bottom KOMPONEN
   (mis. `.stfr-account__kv-table tr{border-bottom:...}`, tanpa
   `!important`) tetap bisa menang lewat cascade biasa. Ternyata itu masih
   bocor di live: kalau tema ATAU Elementor punya rule border-bottom sendiri
   yang JUGA `!important` (atau spesifisitas sangat tinggi), rule komponen
   kita yang tanpa `!important` tetap kalah. Solusinya: SEMUA rule
   border-bottom komponen (`kv-table`, `act-table`, `__table`,
   `modal-table`, dst.) sekarang JUGA diberi `!important` — jadi di antara
   sesama deklarasi `!important`, yang menang murni soal spesifisitas
   selector (rule komponen selalu lebih spesifik dari reset generik di
   sini), bukan lagi soal penting/tidak-penting. */

.stfr-account.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* ---- Shell: sidebar + main ---- */

.stfr-account {
	min-height: 100dvh;
}

.stfr-account__shell {
	display: flex;
	min-height: 100dvh;
}

.stfr-account__sidebar {
	width: 264px;
	flex-shrink: 0;
	background: var(--stfr-white);
	border-right: 1px solid var(--stfr-n300);
	padding: 28px 20px;
	display: flex;
	flex-direction: column;
	position: fixed;
	left: 0;
	top: 0;
	height: 100dvh;
	overflow-y: auto;
	z-index: 20;
	transition: transform .25s ease;
}
/* ^ `position:fixed` (bukan `sticky`) — di situs live, `position:sticky`
   ternyata tidak nempel (kemungkinan ada ancestor container dari
   tema/Elementor yang punya `overflow` selain `visible` di antara sidebar
   dan viewport, yang mematahkan sticky positioning tanpa kita bisa kontrol
   dari CSS widget ini). `fixed` relatif ke viewport langsung, jadi pasti
   nempel di kiri layar terlepas dari struktur ancestor apa pun. Karena
   `fixed` keluar dari alur dokumen, `.stfr-account__main` diberi
   `margin-left` senilai lebar sidebar supaya kontennya tidak ketiban (lihat
   di bawah) — nilainya disamakan lagi di tiap breakpoint (tablet/mobile). */

.stfr-account__nav {
	flex: 1;
	min-height: 0;
}
/* ^ letak definisi asli `.stfr-account__nav` (display/flex-direction/gap)
   ada di bawah — properti `flex:1` ditambahkan di sini SEBELUM definisi
   itu supaya gampang ditemukan sebagai satu-kesatuan alasan dengan komentar
   ini: tanpa `flex:1`, `<nav>` cuma setinggi kontennya sendiri, dan
   `margin-top:auto` pada tombol Logout (lihat `.stfr-account__logout`)
   tidak punya ruang kosong untuk didorong — makanya logout nempel di
   bawah item nav terakhir, bukan di dasar sidebar. */

.stfr-account__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 8px 24px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--stfr-n100);
}

.stfr-account__brand .logo {
	font-family: var(--stfr-display);
	font-size: 22px;
	color: var(--stfr-primary);
}

.stfr-account__brand .dot {
	color: var(--stfr-accent);
}

.stfr-account__user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px 20px;
	margin-bottom: 8px;
}

.stfr-account__user .avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--stfr-primary-light), var(--stfr-primary));
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stfr-white);
	font-size: 13px;
	font-weight: 600;
}

.stfr-account__user .info b {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
}

.stfr-account__user .info span {
	display: block;
	font-size: 11.5px;
	color: var(--stfr-n500);
}

.stfr-account__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stfr-account .stfr-account__nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: var(--stfr-n700) !important;
	transition: all .15s ease;
}

.stfr-account__nav-item .ic {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	opacity: .75;
}

.stfr-account .stfr-account__nav-item:hover {
	background: var(--stfr-n100);
	color: var(--stfr-n900) !important;
}

.stfr-account .stfr-account__nav-item.is-active {
	background: var(--stfr-sage);
	color: var(--stfr-primary) !important;
	font-weight: 600;
}

.stfr-account__nav-item.is-active .ic {
	opacity: 1;
}

.stfr-account__nav-sep {
	height: 1px;
	background: var(--stfr-n100);
	margin: 14px 4px;
}

.stfr-account .stfr-account__nav-item.stfr-account__logout {
	color: var(--stfr-danger) !important;
	margin-top: auto;
}

.stfr-account .stfr-account__nav-item.stfr-account__logout:hover {
	background: var(--stfr-danger-light);
	color: var(--stfr-danger) !important;
}

/* ---- Main ---- */

.stfr-account__main {
	flex: 1;
	padding: 36px 44px;
	max-width: 1180px;
	min-width: 0;
	margin-left: 264px;
}

.stfr-account__page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;
	flex-wrap: wrap;
	gap: 14px;
}

.stfr-account__page-head h1 {
	font-size: 30px;
	color: var(--stfr-n900);
}

.stfr-account__page-head .sub {
	font-size: 14px;
	color: var(--stfr-n700);
	margin-top: 6px;
}

.stfr-account .stfr-account__back-link {
	font-size: 12.5px;
	color: var(--stfr-n500) !important;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
}

.stfr-account .stfr-account__back-link:hover {
	color: var(--stfr-n900) !important;
}

.stfr-account__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 9px;
	transition: all .15s ease;
}

.stfr-account .stfr-account__btn-primary,
.stfr-account .stfr-account__btn-primary:hover {
	background: var(--stfr-primary);
	color: var(--stfr-white) !important;
}

.stfr-account .stfr-account__btn-primary:hover {
	background: var(--stfr-primary-dark);
}

.stfr-account .stfr-account__btn-ghost,
.stfr-account .stfr-account__btn-ghost:hover {
	background: var(--stfr-white);
	color: var(--stfr-n700) !important;
	border: 1px solid var(--stfr-n300);
}

.stfr-account .stfr-account__btn-ghost:hover {
	border-color: var(--stfr-n500);
}

.stfr-account .stfr-account__btn-danger-ghost,
.stfr-account .stfr-account__btn-danger-ghost:hover {
	background: var(--stfr-white);
	color: var(--stfr-danger) !important;
	border: 1px solid #F3CFC9;
}

.stfr-account .stfr-account__btn-danger-ghost:hover {
	background: var(--stfr-danger-light);
}
/* ^ Pola "`.stfr-account .selector:hover`" (ancestor combinator ganda) di
   sini SENGAJA menaikkan spesifisitas rule `:hover` kita, karena kasus
   nyata ditemukan di live: hover tombol ghost/secondary bisa masih ke-
   override jadi warna aksen tema/Elementor (mis. pink) walau sudah pakai
   `!important` — indikasi rule tema di live punya spesifisitas SANGAT
   tinggi (rantai banyak class) dan importance yang sama, sehingga di
   antara sesama `!important` yang menang murni spesifisitas selector.
   Menambah `.stfr-account` sebagai ancestor combinator (bukan cuma prefix
   kosmetik) menaikkan specificity rule kita tanpa mengubah arti selector
   (elemen tetap sama, `.stfr-account` selalu jadi leluhurnya). */

.stfr-account__btn-sm {
	padding: 7px 13px;
	font-size: 12.5px;
	border-radius: 7px;
}

.stfr-account__btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* ---- Views (JS show/hide, tanpa reload) ---- */

.stfr-account__view {
	display: none;
}

.stfr-account__view.is-active {
	display: block;
}

/* ---- Notices ---- */

.stfr-account__notices:empty {
	display: none;
}

.stfr-account__notices {
	margin: 0 0 16px;
}

.stfr-account__notices .stfr-account__notice {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 8px;
}

.stfr-account__notice.is-error {
	background: var(--stfr-danger-light);
	color: var(--stfr-danger);
}

.stfr-account__notice.is-success {
	background: var(--stfr-sage);
	color: var(--stfr-primary);
}

/* ---- Dashboard: stat cards ---- */

.stfr-account__stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

.stfr-account__stat-card {
	background: var(--stfr-white);
	border: 1px solid var(--stfr-n300);
	border-radius: 14px;
	padding: 20px 22px;
}

.stfr-account__stat-card .lbl {
	font-size: 12.5px;
	color: var(--stfr-n500);
	font-weight: 500;
}

.stfr-account__stat-card .val {
	font-family: var(--stfr-display);
	font-size: 30px;
	color: var(--stfr-n900);
	margin-top: 6px;
}

.stfr-account__stat-card .val .unit {
	font-family: var(--stfr-body);
	font-size: 13px;
	color: var(--stfr-n500);
	font-weight: 400;
}

.stfr-account__stat-card.is-accent {
	background: linear-gradient(150deg, var(--stfr-primary), var(--stfr-primary-dark));
	border: none;
}

.stfr-account__stat-card.is-accent .lbl {
	color: rgba(255, 255, 255, .7);
}

.stfr-account__stat-card.is-accent .val {
	color: var(--stfr-white);
}

.stfr-account__stat-card.is-accent .val .unit {
	color: rgba(255, 255, 255, .6);
}

/* ---- Panel ---- */

.stfr-account__panel {
	background: var(--stfr-white);
	border: 1px solid var(--stfr-n300);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 20px;
}

.stfr-account__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid var(--stfr-n100);
	gap: 12px;
	flex-wrap: wrap;
}

.stfr-account__panel-head h3 {
	font-family: var(--stfr-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--stfr-n900);
}

.stfr-account__panel-head a {
	font-size: 12.5px;
	color: var(--stfr-primary) !important;
	font-weight: 600;
}

.stfr-account .stfr-account__panel-head a:hover {
	color: var(--stfr-primary-dark) !important;
}

.stfr-account__panel-body {
	padding: 6px 0;
}

/* ---- Row item (dashboard) ---- */

.stfr-account__row-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 22px;
	border-bottom: 1px solid var(--stfr-n100);
}

.stfr-account__row-item:last-child {
	border-bottom: none;
}

.stfr-account__ric-ic {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--stfr-sage);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--stfr-primary);
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
}

.stfr-account__ric-main {
	flex: 1;
	min-width: 0;
}

.stfr-account__ric-main b {
	font-size: 13.5px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stfr-account__ric-main span {
	display: block;
	font-size: 12px;
	color: var(--stfr-n500);
	font-family: var(--stfr-mono);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stfr-account__ric-end {
	text-align: right;
	flex-shrink: 0;
}

.stfr-account__ric-end .amt {
	font-size: 13.5px;
	font-weight: 600;
}

.stfr-account__ric-end .date {
	font-size: 11.5px;
	color: var(--stfr-n500);
}

.stfr-account__empty-row {
	padding: 22px;
	font-size: 13px;
	color: var(--stfr-n500);
	text-align: center;
}

/* ---- Badge status ---- */

.stfr-account__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 100px;
	white-space: nowrap;
}

.stfr-account__badge::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex-shrink: 0;
}

.stfr-account__badge.is-ok {
	background: #E4F3EA;
	color: #227A4E;
}

.stfr-account__badge.is-ok::before {
	background: #227A4E;
}

.stfr-account__badge.is-warn {
	background: #FCF2DE;
	color: #A9762A;
}

.stfr-account__badge.is-warn::before {
	background: #A9762A;
}

.stfr-account__badge.is-na {
	background: var(--stfr-n100);
	color: var(--stfr-n500);
}

.stfr-account__badge.is-na::before {
	background: var(--stfr-n500);
}

/* ---- License list ---- */

.stfr-account__license-group {
	margin-bottom: 16px;
}

.stfr-account__license-card {
	background: var(--stfr-white);
	border: 1px solid var(--stfr-n300);
	border-radius: 14px;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.stfr-account__lc-tier {
	width: 48px;
	height: 48px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--stfr-display);
	font-size: 16px;
	color: var(--stfr-white);
	flex-shrink: 0;
}

.stfr-account__lc-tier.tier-a {
	background: linear-gradient(150deg, var(--stfr-accent), var(--stfr-accent-dark));
}

.stfr-account__lc-tier.tier-b {
	background: linear-gradient(150deg, var(--stfr-primary-light), var(--stfr-primary));
}

.stfr-account__lc-tier.tier-c {
	background: linear-gradient(150deg, #7C9A90, #5E7A70);
}

.stfr-account__lc-tier.tier-d {
	background: linear-gradient(150deg, #B9B4A7, #94907F);
}

.stfr-account__lc-main {
	flex: 1;
	min-width: 220px;
}

.stfr-account__lc-main .name {
	font-size: 15px;
	font-weight: 600;
}

.stfr-account__lc-main .name .sku {
	color: var(--stfr-n500);
	font-weight: 500;
}

.stfr-account__lc-main .key {
	font-family: var(--stfr-mono);
	font-size: 12px;
	color: var(--stfr-n500);
	margin-top: 4px;
}

.stfr-account__lc-meta {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}

.stfr-account__lc-meta .m-item .m-lbl {
	font-size: 11px;
	color: var(--stfr-n500);
	text-transform: uppercase;
	letter-spacing: .4px;
}

.stfr-account__lc-meta .m-item .m-val {
	font-size: 13.5px;
	font-weight: 600;
	margin-top: 2px;
}

.stfr-account__lc-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ---- License detail ---- */

.stfr-account__detail-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 20px;
	align-items: start;
}

.stfr-account__detail-grid > * {
	min-width: 0;
}

.stfr-account__kv-table {
	width: 100%;
}

.stfr-account__kv-table tr {
	border-bottom: 1px solid var(--stfr-n100) !important;
}

.stfr-account__kv-table tr:last-child {
	border-bottom: none !important;
}

.stfr-account__kv-table td {
	padding: 14px 22px;
	font-size: 13.5px;
	vertical-align: middle;
}

.stfr-account__kv-table td:first-child {
	width: 150px;
	color: var(--stfr-n500);
	font-weight: 500;
}

.stfr-account__kv-table td:last-child {
	color: var(--stfr-n900);
	font-weight: 500;
	word-break: break-word;
}

.stfr-account__kv-table .mono {
	font-family: var(--stfr-mono);
	font-size: 12.5px;
	word-break: break-all;
}

.stfr-account__key-copy-row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	max-width: 100%;
}

.stfr-account .stfr-account__copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 7px;
	border: 1px solid var(--stfr-n300);
	color: var(--stfr-n500) !important;
	flex-shrink: 0;
	transition: all .15s ease;
}

.stfr-account__copy-btn svg {
	width: 13px;
	height: 13px;
}

.stfr-account .stfr-account__copy-btn:hover,
.stfr-account .stfr-account__copy-btn.is-copied {
	border-color: var(--stfr-primary);
	color: var(--stfr-primary) !important;
	background: var(--stfr-sage);
}

.stfr-account__copy-label {
	display: none;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.stfr-account__copy-btn.is-copied {
	width: auto;
	padding: 0 10px;
}

.stfr-account__copy-btn.is-copied .stfr-account__copy-icon {
	display: none;
}

.stfr-account__copy-btn.is-copied .stfr-account__copy-label {
	display: inline;
}

.stfr-account__act-table {
	width: 100%;
}

.stfr-account__act-table thead th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--stfr-n500);
	padding: 11px 22px;
	border-bottom: 1px solid var(--stfr-n100) !important;
	font-weight: 600;
}

.stfr-account__act-table tbody td {
	padding: 12px 22px;
	font-size: 13px;
	border-bottom: 1px solid var(--stfr-n100) !important;
}

.stfr-account__act-table tbody tr:last-child td {
	border-bottom: none !important;
}

.stfr-account__act-table .mono-sm {
	font-family: var(--stfr-mono);
	font-size: 12px;
	color: var(--stfr-n700);
}

.stfr-account__side-card {
	background: var(--stfr-white);
	border: 1px solid var(--stfr-n300);
	border-radius: 14px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.stfr-account__side-card h4 {
	font-family: var(--stfr-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--stfr-n500);
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom: 14px;
}

.stfr-account__usage-num {
	font-family: var(--stfr-display);
	font-size: 26px;
}

.stfr-account__usage-num .unit {
	font-family: var(--stfr-body);
	font-size: 13px;
	color: var(--stfr-n500);
	font-weight: 400;
}

.stfr-account__usage-bar {
	height: 8px;
	border-radius: 100px;
	background: var(--stfr-n100);
	overflow: hidden;
	margin-top: 8px;
}

.stfr-account__usage-bar .fill {
	height: 100%;
	background: var(--stfr-primary);
	border-radius: 100px;
}

.stfr-account__usage-lbl {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--stfr-n700);
	margin-top: 8px;
}

.stfr-account__side-card .stfr-account__btn {
	width: 100%;
	justify-content: center;
	margin-top: 10px;
}

/* ---- Orders / Downloads table ---- */

.stfr-account__table {
	width: 100%;
	white-space: nowrap;
}
/* ^ `white-space:nowrap` di sini + `.stfr-account__panel{overflow-x:auto}`
   pas mobile (lihat blok responsive) — tanpa ini, kolom tabel (Orders,
   Downloads) memaksa teks tiap sel wrap jadi banyak baris di layar sempit
   (kolom saling berebut ruang 100% lebar container); dengan nowrap, tabel
   mempertahankan lebar alaminya dan meluber ke samping, baru di-scroll
   horizontal lewat panel pembungkusnya — jauh lebih rapi daripada tiap sel
   pecah jadi 3-4 baris. */

.stfr-account__table thead th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--stfr-n500);
	padding: 13px 22px;
	border-bottom: 1px solid var(--stfr-n100) !important;
	font-weight: 600;
}

.stfr-account__table tbody td {
	padding: 14px 22px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--stfr-n100) !important;
	vertical-align: middle;
}

.stfr-account__table tbody tr:last-child td {
	border-bottom: none !important;
}

.stfr-account__table .ord-id {
	color: var(--stfr-primary);
	font-weight: 600;
}

.stfr-account__table .ord-total {
	font-weight: 600;
}

.stfr-account__table .ord-sub {
	color: var(--stfr-n500);
	font-weight: 400;
}

/* ---- Placeholder view ---- */

.stfr-account__placeholder {
	background: var(--stfr-white);
	border: 1px dashed var(--stfr-n300);
	border-radius: 14px;
	padding: 50px 30px;
	text-align: center;
	color: var(--stfr-n500);
	font-size: 13.5px;
}

/* ---- Order detail modal ---- */

.stfr-account__modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(26, 31, 29, .55);
	z-index: 100;
	align-items: center;
	justify-content: center;
	padding: 24px;
	backdrop-filter: blur(2px);
}

.stfr-account__modal-overlay.is-open {
	display: flex;
}

.stfr-account__modal-box {
	background: var(--stfr-white);
	border-radius: 18px;
	width: 100%;
	max-width: 620px;
	max-height: 88vh;
	overflow-y: auto;
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .35);
}

.stfr-account__modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 26px;
	border-bottom: 1px solid var(--stfr-n100);
	position: sticky;
	top: 0;
	background: var(--stfr-white);
	border-radius: 18px 18px 0 0;
}

.stfr-account__modal-head h2 {
	font-size: 22px;
}

.stfr-account .stfr-account__modal-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stfr-n500) !important;
	transition: all .15s ease;
	flex-shrink: 0;
}

.stfr-account .stfr-account__modal-close:hover {
	background: var(--stfr-n100);
	color: var(--stfr-n900) !important;
}

.stfr-account__modal-body {
	padding: 24px 26px 28px;
}

.stfr-account__modal-status-line {
	font-size: 13.5px;
	color: var(--stfr-n700);
	margin-bottom: 20px;
}

.stfr-account__modal-status-line b {
	color: var(--stfr-n900);
}

.stfr-account__modal-section-title {
	font-family: var(--stfr-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--stfr-n500);
	text-transform: uppercase;
	letter-spacing: .4px;
	margin: 22px 0 10px;
}

.stfr-account__modal-section-title:first-of-type {
	margin-top: 0;
}

.stfr-account__modal-table {
	width: 100%;
	border: 1px solid var(--stfr-n300);
	border-radius: 10px;
	overflow: hidden;
}

.stfr-account__modal-table td {
	padding: 12px 16px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--stfr-n100) !important;
}

.stfr-account__modal-table tr:last-child td {
	border-bottom: none !important;
}

.stfr-account__modal-table td:first-child {
	color: var(--stfr-n700);
}

.stfr-account__modal-table td:last-child {
	text-align: right;
	font-weight: 500;
}

.stfr-account__modal-table tr.is-strong td {
	font-weight: 700;
}

.stfr-account__modal-license-box {
	border: 1px solid var(--stfr-n300);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}

.stfr-account__modal-license-box:last-child {
	margin-bottom: 0;
}

.stfr-account__modal-license-box .mlb-head {
	padding: 12px 16px;
	font-size: 13.5px;
	font-weight: 600;
	background: var(--stfr-n100);
}

.stfr-account__modal-license-box .mlb-body {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	gap: 12px;
	flex-wrap: wrap;
}

.stfr-account__modal-license-box .mlb-key {
	font-family: var(--stfr-mono);
	font-size: 12px;
	color: var(--stfr-n700);
}

.stfr-account__modal-license-box .mlb-valid {
	font-size: 12.5px;
	color: var(--stfr-n500);
}

.stfr-account__modal-license-box .mlb-valid b {
	color: var(--stfr-n900);
}

.stfr-account__modal-address {
	border: 1px solid var(--stfr-n300);
	border-radius: 10px;
	padding: 16px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--stfr-n700);
}

.stfr-account__modal-address b {
	color: var(--stfr-n900);
	display: block;
	margin-bottom: 2px;
}

/* ---- Mobile drawer: topbar + hamburger ---- */

.stfr-account__mobile-topbar .logo {
	font-weight: 600;
}

/* ---- Form umum (Addresses, Account Details) ---- */

.stfr-account__hint {
	font-size: 12.5px;
	color: var(--stfr-n500);
}

.stfr-account__note {
	font-size: 12.5px;
	color: var(--stfr-n500);
	margin-top: 14px;
}

.stfr-account__form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 16px;
	padding: 20px 22px;
}

.stfr-account__field-row {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	position: relative;
}

.stfr-account__field-row--full {
	grid-column: 1 / -1;
}

.stfr-account__field-row label {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--stfr-n700);
}
/* ^ Gap label→input sebelumnya 7px terasa jauh lebih lebar dari itu di
   layar — penyebabnya `<label>` warisan `line-height:1.5` dari root
   `.stfr-account` (tidak pernah di-reset eksplisit di sini), yang nambah
   ruang "leading" ekstra di atas/bawah teks label selain gap flex-nya
   sendiri. `line-height:1.2` di label memangkas leading itu; gap flex-nya
   juga diperkecil ke 4px supaya total jaraknya pas rapat seperti diminta.
   Gap `.stfr-account__form-grid` (antar field-row, bukan label→input)
   juga diperketat dari `18px 20px` ke `14px 16px`. */

.stfr-account__field-row input {
	width: 100%;
	border: 1px solid var(--stfr-n300);
	border-radius: 10px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--stfr-n900);
	background: var(--stfr-white);
	transition: border-color .15s;
}

.stfr-account__field-row input:focus {
	outline: none;
	border-color: var(--stfr-primary);
}

.stfr-account__field-row input::placeholder {
	color: var(--stfr-n500);
}
/* ^ Sebelumnya `color:var(--stfr-n300)` — itu tone PALING terang di skala
   warna widget ini, jadi placeholder di form (Email, Nama Depan, dst)
   kelihatan nyaris tak terbaca ("terlalu samar"). Naik ke `n500` (abu
   medium, dipakai juga untuk teks sekunder lain di widget ini) — cukup
   beda dari warna teks asli (n900) supaya tetap kebaca sebagai
   placeholder, tapi tidak sampai nyaris hilang. */

.stfr-account__pass-bullet::placeholder {
	letter-spacing: 3px;
}
/* ^ HANYA 3 field ganti-password di Account Details (current/new/confirm)
   yang dikasih class `.stfr-account__pass-bullet` dari PHP — placeholder-
   nya literal titik-titik (••••••••) sebagai penanda visual "field
   password", makanya butuh jarak antar-titik biar bentuknya jelas sebagai
   bullet symbol. Field password LAIN (Masuk, Daftar) placeholder-nya teks
   instruksi biasa ("Masukkan kata sandi", "Min. 8 karakter...") — kalau
   selector-nya `input[type="password"]::placeholder` generik (versi
   sebelumnya), teks instruksi itu ikut kena letter-spacing dan jadi
   renggang tidak wajar. Scoping ke class spesifik ini menghindari itu. */

.stfr-account__form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 16px 0 0;
}

.stfr-account__form-actions--page {
	padding: 0;
	margin-top: 4px;
}

.stfr-account .stfr-account__lost-pass-link {
	align-self: flex-start;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--stfr-primary) !important;
	background: none !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-top: 2px;
}

.stfr-account .stfr-account__lost-pass-link:hover {
	color: var(--stfr-primary-dark) !important;
	background: none !important;
}
/* ^ `padding:0` — tombol ini pakai reset dasar `:where(button)` yang
   TIDAK menghapus padding bawaan browser (default UA stylesheet kasih
   button padding kecil), jadi perlu di-nol-kan eksplisit di sini.
   `background:none!important` di base DAN `:hover` — beberapa tema/
   Elementor punya style hover generik `button:hover{background:...}`
   (kadang warna aksen/pink) yang bisa nempel di tombol teks polos begini
   kalau tidak di-reset eksplisit. */

.stfr-account__pass-input-wrap {
	position: relative;
	display: block;
}

.stfr-account__pass-checklist {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 4px 14px;
	margin: 8px 0 0;
	padding-left: 14px;
}
/* ^ `padding-left:14px` — disamakan dengan `padding` kiri input
   (`.stfr-account__field-row input{padding:11px 14px}`) supaya checklist
   sejajar visual dengan teks di dalam field, bukan mulai dari tepi kiri
   kontainer. `margin:0` — spacing atas/bawah dikontrol lewat `gap` pada
   `.stfr-account__field-row` (parent flex column) saja, tidak dobel
   dengan margin sendiri. `justify-content:flex-start` memaksa rata kiri
   eksplisit (defaultnya memang sudah kiri, tapi ditulis eksplisit supaya
   jelas ini disengaja, bukan kebetulan). */

.stfr-account__pass-checklist li {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--stfr-n500);
	transition: color .15s;
}

.stfr-account__pass-checklist li svg {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1.5px solid var(--stfr-n300);
	color: transparent;
	flex-shrink: 0;
	transition: all .15s;
	padding: 1px;
	box-sizing: border-box;
}

.stfr-account__pass-checklist li.is-valid {
	color: var(--stfr-primary);
}

.stfr-account__pass-checklist li.is-valid svg {
	border-color: var(--stfr-primary);
	background: var(--stfr-primary);
	color: var(--stfr-white);
}
/* ^ Indikator syarat kata sandi di form Daftar — checklist "8 karakter" /
   "1 huruf kapital" / "1 angka" jadi abu-abu + lingkaran kosong secara
   default, berubah hijau + centang begitu syarat itu terpenuhi (dicek
   live via JS tiap user mengetik, lihat account-widget.js). Validasi
   server (`ajax_register()`) memakai aturan yang SAMA persis supaya tidak
   ada kondisi "kelihatan sudah centang semua tapi ditolak server". */

.stfr-account__pass-input-wrap input {
	padding-right: 40px !important;
}

.stfr-account .stfr-account__pass-eye {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 6px;
	color: var(--stfr-n500) !important;
	background: none !important;
}

.stfr-account .stfr-account__pass-eye:hover {
	background: var(--stfr-n100) !important;
	color: var(--stfr-n700) !important;
}

.stfr-account__pass-eye svg {
	width: 17px;
	height: 17px;
}

.stfr-account__lost-pass-notice {
	font-size: 12px;
	margin-top: 4px;
}

.stfr-account__lost-pass-notice.is-error {
	color: var(--stfr-danger);
}

.stfr-account__lost-pass-notice.is-success {
	color: var(--stfr-primary);
}

/* ---- Addresses view ---- */

.stfr-account__address-view {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	flex-wrap: wrap;
}

.stfr-account__address-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
	color: var(--stfr-n700);
}

.stfr-account__address-text b {
	color: var(--stfr-n900);
	font-size: 14px;
}

.stfr-account__empty-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

/* ---- Belum login: form Masuk & Daftar inline ----
   Palet dipakai SENGAJA sama dengan design token widget ini (--stfr-primary
   dst, hijau) — bukan warna oranye dari desain acuan yang dilampirkan;
   acuan itu cuma dipakai untuk POLA layout (kartu tengah, badge+brand,
   judul besar, label+link sejajar, divider "atau", switch link di bawah). */

.stfr-account__auth-wrap {
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.stfr-account__auth-card {
	width: 100%;
	max-width: 440px;
	background: var(--stfr-white);
	border: 1px solid var(--stfr-n300);
	border-radius: 18px;
	padding: 32px 30px;
	box-shadow: 0 24px 60px -24px rgba(26, 31, 29, .18);
}

.stfr-account__auth-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
}

.stfr-account__auth-badge {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--stfr-primary);
	color: var(--stfr-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.stfr-account__auth-brand-text {
	font-size: 15px;
	font-weight: 700;
	color: var(--stfr-n900);
}

.stfr-account__auth-logo {
	display: block;
	max-height: 40px;
	width: auto;
	max-width: 220px;
	height: auto;
}
/* ^ Logo situs asli (attachment image) bisa punya rasio/ukuran berapa pun
   — dibatasi max-height biar konsisten dengan tinggi badge+teks fallback
   (34px + line-height-nya), width menyesuaikan otomatis (auto) supaya
   tidak gepeng/melar. */

.stfr-account__auth-view {
	display: none;
}

.stfr-account__auth-view.is-active {
	display: block;
}

.stfr-account__auth-title {
	font-size: 26px;
	margin-bottom: 22px;
}

.stfr-account__auth-view .stfr-account__field-row {
	margin-bottom: 16px;
}

.stfr-account__auth-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.stfr-account__auth-label-row label {
	margin: 0;
}

.stfr-account__auth-submit {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

.stfr-account__auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 18px;
	font-size: 12px;
	color: var(--stfr-n500);
}

.stfr-account__auth-divider::before,
.stfr-account__auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--stfr-n300);
}

.stfr-account__auth-switch {
	text-align: center;
	font-size: 13.5px;
	color: var(--stfr-n700);
}

.stfr-account .stfr-account__auth-switch-link {
	font-weight: 700;
	color: var(--stfr-primary) !important;
	background: none !important;
}

.stfr-account .stfr-account__auth-switch-link:hover {
	color: var(--stfr-primary-dark) !important;
	background: none !important;
}

.stfr-account__auth-terms {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12.5px;
	color: var(--stfr-n700);
	line-height: 1.5;
	margin-bottom: 20px;
}

.stfr-account__auth-terms input {
	margin-top: 3px;
	accent-color: var(--stfr-primary);
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.stfr-account__auth-terms a {
	color: var(--stfr-primary) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 480px) {
	.stfr-account__auth-card {
		padding: 26px 20px;
	}
}

/* ---- Responsive ---- */

/* ---- Tablet: sidebar tetap vertikal (fixed), kolom konten dirampingkan ---- */
@media (max-width: 1100px) and (min-width: 901px) {
	.stfr-account__sidebar {
		width: 220px;
	}

	.stfr-account__main {
		padding: 32px 28px;
		margin-left: 220px;
	}

	.stfr-account__stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stfr-account__detail-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Mobile: sidebar jadi drawer off-canvas (toggle via hamburger) ---- */

.stfr-account__mobile-topbar {
	display: none;
}

.stfr-account__sidebar-overlay {
	display: none;
}

@media (max-width: 900px) {
	.stfr-account__shell {
		flex-direction: column;
		min-height: auto;
	}

	.stfr-account__mobile-topbar {
		display: flex;
		align-items: center;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 15;
		background: var(--stfr-white);
		border-bottom: 1px solid var(--stfr-n300);
		padding: 14px 20px;
		margin: -24px -20px 20px;
	}
	/* ^ `.stfr-account__main` punya `padding:24px 20px` di breakpoint ini
	   (lihat rule-nya di bawah) — topbar sebagai anak pertama `<main>`
	   ikut ke-indent sama besar, jadi tidak benar-benar nempel ke tepi
	   device. Margin negatif di sini menetralkan padding parent PERSIS di
	   tiga sisi (atas/kiri/kanan) supaya topbar full-bleed edge-to-edge,
	   padding sendiri (14px 20px) tetap menjaga jarak visual kontennya.
	   Margin-bottom positif (20px) memberi jarak ke konten halaman di
	   bawahnya. */

	.stfr-account__mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 8px;
		flex-shrink: 0;
	}

	.stfr-account__mobile-toggle:hover {
		background: var(--stfr-n100);
	}

	.stfr-account__mobile-toggle svg {
		width: 20px;
		height: 20px;
	}

	.stfr-account__mobile-topbar .logo {
		font-family: var(--stfr-display);
		font-size: 18px;
		color: var(--stfr-primary);
	}

	.stfr-account__sidebar {
		width: 280px;
		transform: translateX(-100%);
		z-index: 30;
	}

	.stfr-account__sidebar.is-open {
		transform: translateX(0);
	}
	/* ^ posisinya tetap `fixed` (warisan dari rule dasar, tidak di-reset di
	   sini) — di mobile jadi drawer off-canvas: digeser keluar layar lewat
	   `translateX(-100%)`, digeser masuk lewat class `.is-open` saat tombol
	   hamburger (`.stfr-account__mobile-toggle`) diklik. Brand & info user
	   TETAP tampil di drawer (beda dari versi bar-horizontal sebelumnya)
	   karena sekarang ruang vertikalnya cukup. */

	.stfr-account__sidebar-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(26, 31, 29, .45);
		z-index: 25;
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
	}

	.stfr-account__sidebar-overlay.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.stfr-account__nav-item.stfr-account__logout {
		margin-top: auto;
	}

	.stfr-account__main {
		padding: 24px 20px;
		margin-left: 0;
	}

	.stfr-account__stat-grid {
		grid-template-columns: 1fr;
	}

	.stfr-account__detail-grid {
		grid-template-columns: 1fr;
	}

	.stfr-account__detail-col {
		display: contents;
	}

	.stfr-account__act-panel {
		order: 99;
	}
	/* ^ `.stfr-account__detail-col{display:contents}` melepas dua div
	   pembungkus kolom grid supaya keempat block (License Details, Riwayat
	   Aktivasi, Kuota Aktivasi, Pesanan Terkait) jadi grid item langsung —
	   dengan itu `order` bisa dipakai utk paksa Riwayat Aktivasi pindah ke
	   paling bawah di mode mobile, tanpa ubah urutan DOM/desktop. */

	.stfr-account__lc-meta {
		gap: 16px;
	}

	.stfr-account__act-table,
	.stfr-account__table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
	}
	/* ^ tabel (Orders, Riwayat Aktivasi, dst.) bisa lebih lebar dari layar
	   kecil — tabelnya sendiri yang scroll horizontal (bukan seluruh
	   `.stfr-account__panel`), supaya `.stfr-account__panel-head` di
	   atasnya tetap diam/statis, tidak ikut ter-scroll. */
}

/* ---- Mobile kecil ---- */
@media (max-width: 480px) {
	.stfr-account__page-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.stfr-account__license-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.stfr-account__lc-actions {
		width: 100%;
	}

	.stfr-account__lc-actions .stfr-account__btn {
		flex: 1;
		justify-content: center;
	}

	.stfr-account__modal-box {
		max-width: 100%;
		margin: 0 12px;
	}

	.stfr-account__form-grid {
		grid-template-columns: 1fr;
	}

	.stfr-account__address-view {
		flex-direction: column;
		align-items: stretch;
	}
}