/* =========================================================================
   QS Affiliate — refinement formulir pendaftaran & tombol primer
   Dimuat HANYA pada endpoint Akun Saya -> Program Affiliate.
   Seluruh selector di-scope ke .qs-aff-account.

   Kontras (WCAG 2.1, teks putih di atas latar tombol):
     normal   #15803D -> 5.02:1  (AA lulus untuk teks normal)
     hover    #166534 -> 7.13:1
     active   #14532D -> 9.11:1
     disabled #4F7A5C -> 4.92:1
   Cincin fokus #0A2540 di atas latar putih halaman -> 14.75:1.
   ========================================================================= */

.qs-aff-account {
	--qs-aff-hijau: #15803D;
	--qs-aff-hijau-hover: #166534;
	--qs-aff-hijau-active: #14532D;
	--qs-aff-hijau-disabled: #4F7A5C;
	--qs-aff-ring: var(--qs-ink, #0A2540);
	--qs-aff-err: #B91C1C;
}

/* ---------------------------------------------------------------- Tombol --
   components.css memberi .qs-aff-account .slicewp-button-primary latar biru
   (--qs-accent). Berkas ini dimuat setelahnya dan memakai spesifisitas yang
   lebih tinggi agar seluruh keadaan konsisten hijau QS Services. */

.qs-aff-account form .slicewp-button-primary,
.qs-aff-account .slicewp-button-primary {
	background: var(--qs-aff-hijau);
	border: 0;
	border-radius: 10px !important;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	min-height: 48px;
	padding: 12px 24px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.qs-aff-account form .slicewp-button-primary:hover,
.qs-aff-account .slicewp-button-primary:hover {
	background: var(--qs-aff-hijau-hover);
	color: #fff;
}

.qs-aff-account form .slicewp-button-primary:focus-visible,
.qs-aff-account .slicewp-button-primary:focus-visible {
	background: var(--qs-aff-hijau-hover);
	color: #fff;
	outline: 3px solid var(--qs-aff-ring);
	outline-offset: 3px;
}

/* Fallback untuk peramban tanpa :focus-visible. */
.qs-aff-account .slicewp-button-primary:focus:not(:focus-visible) {
	outline: 3px solid var(--qs-aff-ring);
	outline-offset: 3px;
}

.qs-aff-account form .slicewp-button-primary:active,
.qs-aff-account .slicewp-button-primary:active {
	background: var(--qs-aff-hijau-active);
	color: #fff;
}

.qs-aff-account form .slicewp-button-primary:disabled,
.qs-aff-account .slicewp-button-primary[aria-disabled="true"] {
	background: var(--qs-aff-hijau-disabled);
	color: #fff;
	cursor: not-allowed;
}

/* Fokus terlihat untuk seluruh kontrol formulir. */
.qs-aff-account input:focus-visible,
.qs-aff-account select:focus-visible,
.qs-aff-account textarea:focus-visible,
.qs-aff-account a:focus-visible {
	outline: 3px solid var(--qs-aff-ring);
	outline-offset: 2px;
}

/* ------------------------------------------------- Kelompok kanal promosi */

.qs-aff-chgroup {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	margin: 4px 0 0;
	padding: 0;
	border: 0;
}

@media (min-width: 700px) {
	.qs-aff-chgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qs-aff-chgroup__item--wide { grid-column: 1 / -1; }
}

.qs-aff-chgroup__item { min-width: 0; }

.qs-aff-chgroup__item label {
	display: block;
	margin-bottom: 5px;
	color: var(--qs-text, #0A2540);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.qs-aff-chgroup__item input {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
}

.qs-aff-chgroup__hint {
	display: block;
	margin-top: 4px;
	color: var(--qs-text-muted, #64748B);
	font-size: 12.5px;
	line-height: 1.5;
}

/* Galat: warna + ikon teks, tidak hanya warna (WCAG 1.4.1). */
.qs-aff-account .slicewp-field-error-message {
	color: var(--qs-aff-err);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.55;
}

.qs-aff-account .slicewp-field-error-message p { margin: 6px 0 0; }

.qs-aff-account .slicewp-field-error-message p::before {
	content: "\26A0\FE0E  ";
}

.qs-aff-account .slicewp-field-has-error input,
.qs-aff-account .slicewp-field-has-error select {
	border-color: var(--qs-aff-err);
}

/* ------------------------------------------------------- Pemilih bank -- */

.qs-aff-bank__search {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	margin-bottom: 8px;
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
}

.qs-aff-bank__count {
	display: block;
	margin: 4px 0 0;
	color: var(--qs-text-muted, #64748B);
	font-size: 12.5px;
}

/* Penyembunyian kondisional.
   `[hidden]` kalah dari deklarasi display milik pengarang (mis. display:grid),
   jadi kelas ini dipakai bersamaan dengan atribut hidden. */
.qs-aff-account .qs-aff-cond-hide,
.qs-aff-account .qs-aff-cond-hide[hidden] {
	display: none !important;
}

/* Grup rekening dibaca sebagai satu blok. */
.qs-aff-account .slicewp-field-wrapper[data-type="qs_channels"] .slicewp-field-description,
.qs-aff-account .slicewp-field-wrapper[data-type="heading"] .slicewp-field-description {
	color: var(--qs-text-secondary, #475569);
	font-size: 13.5px;
	line-height: 1.6;
}

/* =========================================================================
   REFINEMENT SELURUH TAMPILAN — 2026-08-01
   Menyelaraskan seluruh area affiliate SliceWP (tab, kartu KPI, grafik,
   tabel, filter, pagination, formulir, notifikasi, empty state) dengan
   design system QS Services. Semua selector tetap di-scope ke
   .qs-aff-account; berkas ini dimuat paling akhir sehingga menang kaskade
   atas style-front-end.css milik SliceWP dan components.css tema.
   ========================================================================= */

/* ------------------------------------------------ Tipografi dasar area -- */

.qs-aff-account { font-size: 15px; line-height: 1.6; }

.qs-aff-account__head { margin-bottom: 4px; }

/* ------------------------------------------------------- Navigasi tab --
   Sebelumnya: tautan mewarisi 18px/51,56px dan pada layar sempit menjadi
   deretan ikon tanpa label. Sekarang: 14,5px, target klik >= 44px, label
   selalu terlihat, dan pada <=720px berubah menjadi kisi "chip" 2 kolom. */

.qs-aff-account #slicewp-affiliate-account-nav-tab {
	overflow: visible;
	border-bottom: 1px solid var(--qs-border, #E2E8F0);
}

.qs-aff-account .slicewp-nav-tab-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 3px;
	margin: 18px 0 0 0 !important;
	white-space: normal;
}

.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-bottom: -1px;
	padding: 10px 9px;
	border-bottom: 2px solid transparent;
	border-radius: 8px 8px 0 0;
	color: var(--qs-text-secondary, #475569);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a svg,
.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a .dashicons {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
}

/* Label tab tidak pernah disembunyikan (style-front-end.css menyembunyikannya
   pada <=720px sehingga hanya ikon yang tersisa). */
.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a span:last-of-type {
	display: inline;
}

.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a:hover {
	background: var(--qs-bg-muted, #F1F5F9);
	border-bottom-color: transparent;
	color: var(--qs-ink, #0A2540);
}

.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a:focus-visible {
	outline: 3px solid var(--qs-aff-ring);
	outline-offset: -3px;
}

.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a:active {
	background: #E2E8F0;
	color: var(--qs-ink, #0A2540);
}

.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active a {
	border-bottom-color: var(--qs-aff-acc, #2563EB);
	box-shadow: none;
	color: var(--qs-aff-acc, #2563EB);
}

@media (max-width: 720px) {
	.qs-aff-account #slicewp-affiliate-account-nav-tab { border-bottom: 0; }

	.qs-aff-account .slicewp-nav-tab-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a {
		justify-content: flex-start;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 0;
		padding: 10px 12px;
		border: 1px solid var(--qs-border, #E2E8F0);
		border-radius: 10px;
		background: #fff;
		font-size: 13.5px;
	}

	.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a:hover {
		border-color: #CBD5E1;
	}

	.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active a {
		background: #EFF6FF;
		border-color: var(--qs-aff-acc, #2563EB);
		color: var(--qs-aff-acc, #2563EB);
	}
}

@media (max-width: 374px) {
	.qs-aff-account .slicewp-nav-tab-wrapper .slicewp-nav-tab a {
		font-size: 12.5px;
		gap: 6px;
		padding: 9px 10px;
	}
}

.qs-aff-account .slicewp-tab { margin-top: 22px; }

/* --------------------------------------------------- Kartu KPI ringkasan */

.qs-aff-account .slicewp-card-affiliate-dashboard .slicewp-card-inner {
	gap: 4px;
	padding: 14px 18px 16px;
}

.qs-aff-account .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-card-title {
	color: var(--qs-text-secondary, #475569);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
}

.qs-aff-account .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-value {
	color: var(--qs-ink, #0A2540);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.qs-aff-account .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-direction {
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 6px;
}

.qs-aff-account .slicewp-card-affiliate-dashboard .slicewp-card-footer {
	padding: 10px 18px;
	font-size: 13px;
}

.qs-aff-account .slicewp-card-affiliate-dashboard .slicewp-card-footer a { font-weight: 600; }

/* "Ketentuan program" hanya berisi dua kartu; kisi 4 kolom bawaan membuat
   kartu sempit dan nilainya terpotong-baris. */
.qs-aff-account .slicewp-grid-affiliate-dashboard-program-details {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Nilai "Ketentuan program" (tarif komisi dibaca dari setelan SliceWP yang
   berlaku — tidak pernah ditulis mati di sini). */
.qs-aff-account [class^="slicewp-commission-rate-tag"],
.qs-aff-account [class*=" slicewp-commission-rate-tag"] {
	color: var(--qs-ink, #0A2540);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.4;
}

/* ------------------------------------------------------- Judul seksi -- */

.qs-aff-account .slicewp-section-heading {
	margin: 26px 0 10px;
	color: var(--qs-ink, #0A2540);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
}

/* ------------------------------------------------------------- Grafik --
   SliceWP memaksa tinggi kanvas 325px (total kartu ±431px). Chart.js
   diinisialisasi dengan maintainAspectRatio:false sehingga tinggi CSS
   dipatuhi tanpa distorsi, baik saat kosong maupun berisi data. */

.qs-aff-account .slicewp-chart { height: 272px !important; }

@media (max-width: 640px) {
	.qs-aff-account .slicewp-chart { height: 232px !important; }
}

.qs-aff-account .slicewp-chart-before { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.qs-aff-account .slicewp-chart-legend ul li {
	color: var(--qs-text-secondary, #475569);
	font-size: 13.5px;
}

.qs-aff-account .slicewp-chart-time-unit-selector {
	border-color: var(--qs-border, #E2E8F0);
	border-radius: 8px;
	font-size: 14px;
	min-height: 40px;
	padding: 6px 10px;
}

/* Keadaan kosong grafik: kanvas disembunyikan, diganti pesan ringkas.
   Kelas dikelola qs-affiliate.js dari data-datasets kanvas (ikut berubah
   saat filter tanggal AJAX memuat data baru). */
.qs-aff-chart-empty { display: none; }

.qs-aff-chart-card--empty .slicewp-chart { display: none !important; }
.qs-aff-chart-card--empty .slicewp-chart-before { display: none; }

.qs-aff-chart-card--empty .qs-aff-chart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 216px;
	padding: 24px 20px;
	border: 1px dashed #CBD5E1;
	border-radius: 12px;
	background: var(--qs-bg-muted, #F8FAFC);
	text-align: center;
}

.qs-aff-chart-empty__icon {
	width: 34px;
	height: 34px;
	margin-bottom: 2px;
	color: #94A3B8;
}

.qs-aff-chart-empty__title {
	color: var(--qs-ink, #0A2540);
	font-size: 15px;
	font-weight: 700;
}

.qs-aff-chart-empty__text {
	margin: 0;
	max-width: 46ch;
	color: var(--qs-text-muted, #64748B);
	font-size: 13.5px;
	line-height: 1.6;
}

/* ------------------------------------------------ Filter & pemilih data */

.qs-aff-account .slicewp-affiliate-dashboard-filters { margin-bottom: 16px; }

.qs-aff-account .slicewp-date-picker-input {
	border-color: var(--qs-border, #E2E8F0);
	border-radius: 10px;
	color: var(--qs-text-secondary, #475569);
	font-size: 14px;
	min-height: 44px;
}

.qs-aff-account .slicewp-date-picker-modal { border-radius: 12px; }

.qs-aff-account .slicewp-list-table-filters button[type="submit"] { min-height: 44px; }

.qs-aff-account .slicewp-list-table-per-page-selector select {
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: 10px;
	font-size: 14px;
}

.qs-aff-account .slicewp-list-table-per-page-selector form { font-size: 13.5px; color: var(--qs-text-secondary, #475569); }

/* --------------------------------------------------------------- Tabel -- */

.qs-aff-account .slicewp-list-table-wrapper {
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: 12px;
	box-shadow: none;
}

.qs-aff-account table.slicewp-list-table { box-shadow: none; border-radius: 0; }

.qs-aff-account table.slicewp-list-table th {
	background: var(--qs-bg-muted, #F8FAFC) !important;
	border-bottom: 1px solid var(--qs-border, #E2E8F0) !important;
	border-right: 0 !important;
	color: var(--qs-text-secondary, #475569);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 10px 14px;
	text-transform: uppercase;
}

.qs-aff-account table.slicewp-list-table td {
	border-top: 1px solid #EEF2F7 !important;
	border-right: 0 !important;
	font-size: 14px;
	overflow-wrap: anywhere;
	padding: 12px 14px;
	word-break: normal;
}

.qs-aff-account table.slicewp-list-table tbody tr:hover > td { background: #F8FAFC !important; }

/* Baris "Belum ada ..." pada tabel kosong. */
.qs-aff-account table.slicewp-list-table td[colspan] {
	background: transparent !important;
	color: var(--qs-text-muted, #64748B);
	padding: 26px 14px;
	text-align: center;
}

.qs-aff-account table.slicewp-list-table tbody tr:hover > td[colspan] { background: transparent !important; }

.qs-aff-account .slicewp-status-pill {
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	padding: 5px 12px;
}

/* ---------------------------------------------------------- Pagination -- */

.qs-aff-account .slicewp-page-numbers-wrapper { gap: 6px; margin-top: 1rem; }

.qs-aff-account .slicewp-page-numbers-wrapper .page-numbers,
.qs-aff-account .slicewp-pagination-links .slicewp-pagination-link {
	background: #fff;
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: 10px;
	color: var(--qs-text-secondary, #475569);
	font-size: 14px;
	height: 44px;
	width: 44px;
	line-height: 1;
}

.qs-aff-account .slicewp-page-numbers-wrapper a.page-numbers:hover,
.qs-aff-account .slicewp-pagination-links a.slicewp-pagination-link:hover {
	background: var(--qs-bg-muted, #F1F5F9);
	color: var(--qs-ink, #0A2540);
}

.qs-aff-account .slicewp-page-numbers-wrapper .page-numbers.current {
	background: #EFF6FF;
	border-color: var(--qs-aff-acc, #2563EB);
	color: var(--qs-aff-acc, #2563EB);
	font-weight: 700;
}

.qs-aff-account .slicewp-pagination-links span.slicewp-pagination-link { opacity: .45; }

/* ------------------------------------------------------------ Formulir -- */

.qs-aff-account .slicewp-field-wrapper { margin-bottom: 18px; }

.qs-aff-account .slicewp-field-label-wrapper { margin-bottom: 5px; }

.qs-aff-account .slicewp-field-label-wrapper label,
.qs-aff-account .slicewp-field-label-wrapper .slicewp-field-label-text {
	color: var(--qs-ink, #0A2540);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}

/* Judul kelompok formulir (kolom "heading" SliceWP: h3 dst.). */
.qs-aff-account .slicewp-field-wrapper h2,
.qs-aff-account .slicewp-field-wrapper h3,
.qs-aff-account .slicewp-field-wrapper h4 {
	margin: 26px 0 4px;
	color: var(--qs-ink, #0A2540);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.35;
}

.qs-aff-account .slicewp-field-description,
.qs-aff-account .slicewp-field-description * {
	color: var(--qs-text-muted, #64748B);
	font-size: 13.5px;
	line-height: 1.6;
}

.qs-aff-account input[type="text"],
.qs-aff-account input[type="email"],
.qs-aff-account input[type="url"],
.qs-aff-account input[type="password"],
.qs-aff-account input[type="search"],
.qs-aff-account textarea,
.qs-aff-account select {
	background: #fff;
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: 10px;
	color: var(--qs-ink, #0A2540);
	font-family: inherit;
	font-size: 15px;
	padding: 10px 12px;
	transition: border-color .15s ease;
}

.qs-aff-account input[type="text"]:hover,
.qs-aff-account input[type="email"]:hover,
.qs-aff-account input[type="url"]:hover,
.qs-aff-account input[type="password"]:hover,
.qs-aff-account input[type="search"]:hover,
.qs-aff-account textarea:hover,
.qs-aff-account select:hover {
	border-color: #CBD5E1;
}

.qs-aff-account ::placeholder { color: #94A3B8; }

/* Kotak salin link referral. */
.qs-aff-account .slicewp-input-copy { font-size: 14px; }

/* --------------------------------------------------------- Notifikasi -- */

.qs-aff-account .slicewp-user-notice {
	border-radius: 12px;
	border-width: 1px;
	font-size: 15px;
	line-height: 1.6;
	margin: 4px 0 18px;
	padding: 14px 16px;
}

/* ------------------------------------------- Catatan privasi kontekstual --
   Dirender qs-affiliate-integration.php hanya di dalam panel tab
   Pembayaran dan Profil & Rekening. */

.qs-aff-privacy-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 16px;
	padding: 11px 14px;
	border: 1px solid var(--qs-border, #E2E8F0);
	border-radius: 10px;
	background: var(--qs-bg-muted, #F8FAFC);
	color: var(--qs-text-secondary, #475569);
	font-size: 13.5px;
	line-height: 1.6;
}

.qs-aff-privacy-note::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -------------------------------------------------- Empty state lainnya -- */

/* Materi Promosi kosong: satu-satunya <p> di panel tab. */
.qs-aff-account .slicewp-tab[data-slicewp-tab="creatives"] > p:only-child {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 140px;
	padding: 24px 20px;
	border: 1px dashed #CBD5E1;
	border-radius: 12px;
	background: var(--qs-bg-muted, #F8FAFC);
	color: var(--qs-text-muted, #64748B);
	font-size: 14px;
	text-align: center;
}

/* ------------------------------------------------------ Overlay kode QR -- */

.qs-aff-account ~ .slicewp-global-overlay .slicewp-global-overlay-inner,
.slicewp-global-overlay .slicewp-global-overlay-inner { border-radius: 16px; }

/* --------------------------------------------------------------- Legal -- */

.qs-aff-account__legal { margin-top: 20px; }