/* =========================================================================
   QS Clip Campaign — gaya endpoint "Akun Saya → Clip Campaign".
   Seluruh selector di-scope ke .qs-clip agar tidak menyentuh halaman lain.
   Memakai design token QS Services (tokens.css); tidak ada warna baru.
   Mobile-first, tanpa horizontal overflow pada 320px ke atas.
   ========================================================================= */

.qs-clip {
	--qs-clip-ink: var(--qs-ink, #0A2540);
	--qs-clip-acc: var(--qs-accent, #2563EB);
	--qs-clip-brd: var(--qs-border, #E2E8F0);
	--qs-clip-mut: var(--qs-text-secondary, #475569);
	--qs-clip-sub: var(--qs-bg-subtle, #F8FAFC);
	--qs-clip-hijau: #15803D;
	--qs-clip-hijau-hover: #166534;
	--qs-clip-hijau-active: #14532D;
	--qs-clip-hijau-disabled: #4F7A5C;
	--qs-clip-ring: var(--qs-ink, #0A2540);
	color: var(--qs-clip-ink);
}

.qs-clip, .qs-clip * { max-width: 100%; box-sizing: border-box; min-width: 0; }
.qs-clip img, .qs-clip svg { max-width: 100%; height: auto; }

/* ---- Notice ---- */
.qs-clip-note { border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; border: 1px solid var(--qs-clip-brd); }
.qs-clip-note p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.qs-clip-note--success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.qs-clip-note--error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.qs-clip-note--info { background: var(--qs-clip-sub); color: var(--qs-clip-mut); }
.qs-clip-note:focus { outline: 2px solid var(--qs-clip-acc); outline-offset: 2px; }

/* ---- Kepala ---- */
.qs-clip-head { margin: 0 0 20px; }
.qs-clip-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qs-clip-head__note { margin: 10px 0 0; color: var(--qs-clip-mut); font-size: 14px; line-height: 1.65; }

/* ---- Badge status ---- */
.qs-clip-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
.qs-clip-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.qs-clip-badge--new { background: var(--qs-bg-muted, #F1F5F9); color: var(--qs-text-secondary, #475569); }
.qs-clip-badge--pending { background: #FEF3C7; color: #92400E; }
.qs-clip-badge--revision { background: #FFEDD5; color: #9A3412; }
.qs-clip-badge--approved { background: #DCFCE7; color: #15803D; }
.qs-clip-badge--rejected { background: #FEE2E2; color: #B91C1C; }

/* ---- Kartu ---- */
.qs-clip-card { border: 1px solid var(--qs-clip-brd); border-radius: 14px; background: #fff; padding: 18px 16px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(10, 37, 64, .05); }
.qs-clip-card__title { margin: 0 0 8px; font-family: var(--qs-font-heading, inherit); font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--qs-clip-ink); }
.qs-clip-card__lead { margin: 0 0 14px; color: var(--qs-clip-mut); font-size: 14.5px; line-height: 1.65; }
.qs-clip-card--stat { background: var(--qs-clip-sub); }
.qs-clip-stat { margin: 0 0 8px; font-family: var(--qs-font-heading, inherit); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--qs-clip-ink); }

/* ---- Label simulasi (wajib tampil di setiap angka reward) ---- */
.qs-clip-sim { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #FEF3C7; color: #92400E; font-size: 13px; line-height: 1.55; font-weight: 600; }

/* ---- Empty state ---- */
.qs-clip-empty { margin: 0; padding: 18px 14px; border: 1px dashed var(--qs-clip-brd); border-radius: 12px; background: var(--qs-clip-sub); color: var(--qs-clip-mut); font-size: 14.5px; line-height: 1.6; text-align: center; }

/* ---- Daftar kampanye ---- */
.qs-clip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qs-clip-item { border: 1px solid var(--qs-clip-brd); border-radius: 12px; padding: 14px; display: grid; gap: 12px; }
.qs-clip-item__title { margin: 0 0 4px; font-size: 16px; line-height: 1.35; font-weight: 600; }
.qs-clip-item__sum { margin: 0 0 8px; color: var(--qs-clip-mut); font-size: 14px; line-height: 1.6; }
.qs-clip-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--qs-clip-mut); font-size: 13.5px; line-height: 1.55; }
.qs-clip-meta--grid { grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.qs-clip-meta--grid li { display: grid; gap: 2px; }
.qs-clip-meta--grid strong { color: var(--qs-clip-ink); font-size: 13px; font-weight: 600; }

/* ---- Tombol ----
   CTA primer memakai hijau QS Services yang sama dengan Program Affiliate
   (qs-affiliate.css) agar tombol utama seluruh area Akun Saya konsisten.
   Kontras teks putih di atas latar tombol (WCAG 2.1):
     normal   #15803D -> 5.02:1   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-clip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.qs-clip-btn--primary { background: var(--qs-clip-hijau); border-color: var(--qs-clip-hijau); color: #fff; min-height: 48px; padding: 12px 24px; font-weight: 700; transition: background-color .15s ease, border-color .15s ease; }
.qs-clip-btn--primary:hover, .qs-clip-btn--primary:focus { background: var(--qs-clip-hijau-hover); border-color: var(--qs-clip-hijau-hover); color: #fff; }
.qs-clip-btn--primary:active { background: var(--qs-clip-hijau-active); border-color: var(--qs-clip-hijau-active); color: #fff; }
.qs-clip-btn--primary:disabled, .qs-clip-btn--primary[aria-disabled="true"] { background: var(--qs-clip-hijau-disabled); border-color: var(--qs-clip-hijau-disabled); color: #fff; cursor: not-allowed; }
.qs-clip-btn--ghost { background: #fff; border-color: var(--qs-clip-brd); color: var(--qs-clip-ink); }
.qs-clip-btn:focus-visible { outline: 2px solid var(--qs-clip-acc); outline-offset: 2px; }
.qs-clip-btn--primary:focus-visible { outline: 3px solid var(--qs-clip-ring); outline-offset: 3px; }
/* shop.css memberi `.woocommerce-MyAccount-content a { color: #2563eb }`
   (spesifisitas 0-1-1) sehingga varian <a> dari tombol ini kehilangan teks
   putihnya dan menjadi biru di atas latar hijau. Dikunci dengan 0-2-1. */
.qs-clip a.qs-clip-btn--primary,
.qs-clip a.qs-clip-btn--primary:hover,
.qs-clip a.qs-clip-btn--primary:focus,
.qs-clip a.qs-clip-btn--primary:active,
.qs-clip a.qs-clip-btn--primary:visited { color: #fff; }
.qs-clip a.qs-clip-btn--ghost,
.qs-clip a.qs-clip-btn--ghost:hover,
.qs-clip a.qs-clip-btn--ghost:visited { color: var(--qs-clip-ink); }
/* Fallback untuk peramban tanpa :focus-visible. */
.qs-clip-btn--primary:focus:not(:focus-visible) { outline: 3px solid var(--qs-clip-ring); outline-offset: 3px; }

.qs-clip-back { margin: 0 0 14px; font-size: 14px; }
.qs-clip-back a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 2px; color: var(--qs-clip-acc); text-decoration: none; }
.qs-clip-back a:hover { text-decoration: underline; }

/* ---- Form ---- */
.qs-clip-form { margin: 0; }
.qs-clip-field { display: grid; gap: 6px; margin: 0 0 16px; }
.qs-clip-field label { font-size: 14px; font-weight: 600; color: var(--qs-clip-ink); }
.qs-clip-req { color: var(--qs-error, #DC2626); }
.qs-clip-field input[type="text"],
.qs-clip-field input[type="url"],
.qs-clip-field select,
.qs-clip-field textarea {
	width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px;
	padding: 10px 12px; border: 1px solid var(--qs-border-strong, #CBD5E1); border-radius: 10px;
	font-size: 15px; line-height: 1.5; font-family: inherit; color: var(--qs-clip-ink); background: #fff;
}
.qs-clip-field textarea { min-height: 88px; resize: vertical; }
.qs-clip-field input:focus, .qs-clip-field select:focus, .qs-clip-field textarea:focus { outline: 2px solid var(--qs-clip-acc); outline-offset: 1px; border-color: var(--qs-clip-acc); }
.qs-clip-field input:invalid:not(:placeholder-shown) { border-color: var(--qs-error, #DC2626); }
.qs-clip-hint { color: var(--qs-text-muted, #64748B); font-size: 13px; line-height: 1.55; }
.qs-clip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.qs-clip-form--inline { padding: 12px; background: var(--qs-clip-sub); border-radius: 10px; }

/* ---- Definition list ---- */
.qs-clip-dl { margin: 0; display: grid; gap: 10px; }
.qs-clip-dl > div { display: grid; gap: 2px; }
.qs-clip-dl dt { font-size: 13px; font-weight: 600; color: var(--qs-clip-mut); }
.qs-clip-dl dd { margin: 0; font-size: 14.5px; line-height: 1.5; word-break: break-word; }

/* ---- Prose brief ---- */
.qs-clip-prose { font-size: 14.5px; line-height: 1.7; color: var(--qs-clip-mut); word-break: break-word; }

/* ---- Aset ---- */
.qs-clip-assets { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
/* Target sentuh >= 44px: tautan aset berdiri sendiri, bukan tautan di dalam kalimat. */
.qs-clip-assets a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--qs-clip-brd); border-radius: 10px; color: var(--qs-clip-acc); font-size: 14px; line-height: 1.45; word-break: break-all; text-decoration: none; }
.qs-clip-assets a:hover { background: var(--qs-clip-sub); }
.qs-clip-assets a:focus-visible { outline: 2px solid var(--qs-clip-acc); outline-offset: 2px; }

/* ---- Tabel riwayat ---- */
.qs-clip-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qs-clip-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.qs-clip-table th, .qs-clip-table td { padding: 10px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--qs-clip-brd); }
.qs-clip-table thead th { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--qs-clip-mut); }
.qs-clip-url { display: block; margin-top: 3px; color: var(--qs-text-muted, #64748B); font-size: 12.5px; word-break: break-all; }
.qs-clip-revnote, .qs-clip-views { display: block; margin-top: 5px; color: var(--qs-clip-mut); font-size: 12.5px; line-height: 1.5; }
.qs-clip-revrow td { background: var(--qs-clip-sub); }

/* ---- Mobile: tabel jadi kartu, tidak ada scroll horizontal ---- */
@media (max-width: 600px) {
	.qs-clip-table, .qs-clip-table tbody, .qs-clip-table tr, .qs-clip-table td { display: block; width: 100%; }
	.qs-clip-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.qs-clip-table tr { border: 1px solid var(--qs-clip-brd); border-radius: 12px; padding: 10px; margin: 0 0 10px; }
	.qs-clip-table td { border-bottom: 0; padding: 5px 0; }
	.qs-clip-table td::before { content: attr(data-th); display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--qs-clip-mut); margin-bottom: 2px; }
	.qs-clip-revrow td::before { content: none; }
	.qs-clip-stat { font-size: 26px; }
}

@media (min-width: 601px) {
	.qs-clip-card { padding: 22px 20px; }
	.qs-clip-item { grid-template-columns: 1fr auto; align-items: center; }
	.qs-clip-meta--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.qs-clip-meta--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
   REFINEMENT SELURUH TAMPILAN — 2026-08-01
   Menyelaraskan endpoint Clip Campaign dengan design system QS Services
   yang dipakai Program Affiliate (blok "REFINEMENT SELURUH TAMPILAN" di
   qs-affiliate.css): tipografi dasar 15px, judul seksi 18px/700, tabel
   berbingkai radius 12 dengan kepala kolom berlatar, kartu KPI dengan
   label kecil + nilai 26px, kotak simulasi bernada lembut, formulir dan
   empty state dengan token yang sama. Semua selector tetap di-scope
   .qs-clip; berkas ini dimuat setelah shop.css sehingga menang kaskade.
   ========================================================================= */

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

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

.qs-clip-head__note { font-size: 13.5px; }

/* --------------------------------------------------------------- Kartu -- */

.qs-clip-card { border-radius: 12px; }

.qs-clip-card__title {
	font-weight: 700;
	letter-spacing: -.01em;
}

/* --------------------------------------------- Kartu KPI total reward --
   Pola kartu KPI Program Affiliate: label kecil warna sekunder di atas,
   nilai 26px tebal warna ink di bawah. Elemen judul tetap <h3> agar
   struktur heading halaman tidak berubah. */

.qs-clip-card--stat { background: #fff; }

.qs-clip-card__title--kpi {
	margin: 0 0 4px;
	color: var(--qs-clip-mut);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
}

.qs-clip-stat {
	margin: 0;
	font-size: 26px;
	letter-spacing: -.02em;
	line-height: 1.25;
}

/* ------------------------------------------------ Kotak label simulasi --
   Tetap jelas (nada amber + ikon info) tetapi tidak lagi sebentuk blok
   tebal yang bersaing dengan isi utama. */

.qs-clip-sim {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 11px 14px;
	border: 1px solid #FDE68A;
	border-radius: 10px;
	background: #FFFBEB;
	color: #92400E;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

.qs-clip-sim strong { font-weight: 700; }

.qs-clip-sim::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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3Cline x1='12' y1='12' x2='12' y2='16'/%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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3Cline x1='12' y1='12' x2='12' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

.qs-clip-note { padding: 14px 16px; }
.qs-clip-note p { font-size: 15px; }

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

.qs-clip-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	padding: 24px 20px;
	border-color: #CBD5E1;
	background: var(--qs-bg-muted, #F8FAFC);
	font-size: 14px;
}

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

.qs-clip-badge { font-size: 12.5px; padding: 5px 12px; }

/* ------------------------------------------------------ Daftar kampanye -- */

.qs-clip-item { border-radius: 12px; }
.qs-clip-item__title { font-weight: 700; letter-spacing: -.01em; }
.qs-clip-meta { font-size: 13.5px; }

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

.qs-clip-field label { font-size: 14.5px; }
.qs-clip-hint { font-size: 13.5px; }

.qs-clip-field input[type="text"],
.qs-clip-field input[type="url"],
.qs-clip-field select,
.qs-clip-field textarea {
	border-color: var(--qs-clip-brd);
	transition: border-color .15s ease;
}

.qs-clip-field input[type="text"]:hover,
.qs-clip-field input[type="url"]:hover,
.qs-clip-field select:hover,
.qs-clip-field textarea:hover { border-color: #CBD5E1; }

.qs-clip-field input:focus,
.qs-clip-field select:focus,
.qs-clip-field textarea:focus { border-color: var(--qs-clip-acc); }

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

/* Tombol sekunder: beri umpan balik hover yang sepadan dengan tombol
   primer (perubahan warna bingkai + latar lembut). */
.qs-clip-btn--ghost { transition: background-color .15s ease, border-color .15s ease; }
.qs-clip-btn--ghost:hover { background: var(--qs-clip-sub); border-color: #CBD5E1; }

/* ---------------------------------------------------------------- Tabel --
   Bingkai + kepala kolom berlatar hanya pada layout tabel (>=601px);
   di bawahnya baris sudah berubah menjadi kartu tersendiri. */

@media (min-width: 601px) {
	.qs-clip-tablewrap {
		border: 1px solid var(--qs-clip-brd);
		border-radius: 12px;
	}

	.qs-clip-table thead th {
		background: var(--qs-bg-muted, #F8FAFC);
		border-bottom: 1px solid var(--qs-clip-brd);
		letter-spacing: .04em;
		padding: 10px 14px;
	}

	.qs-clip-table td {
		border-bottom: 1px solid #EEF2F7;
		overflow-wrap: anywhere;
		padding: 12px 14px;
	}

	.qs-clip-table tbody tr:last-child > td { border-bottom: 0; }

	.qs-clip-table tbody tr:hover > td { background: var(--qs-bg-muted, #F8FAFC); }

	.qs-clip-table tbody tr.qs-clip-revrow:hover > td,
	.qs-clip-revrow td { background: var(--qs-clip-sub); }
}

/* Definition list: samakan dengan deskripsi field affiliate. */
.qs-clip-dl dt { font-size: 13.5px; }
.qs-clip-dl dd { font-size: 14.5px; }

/* -------------------------------------------- Pengunci kaskade shop.css --
   shop.css menata elemen di dalam .woocommerce-MyAccount-content dengan
   selector berkualifikasi elemen (h3, p, label — spesifisitas 0-1-1) yang
   mengalahkan kelas tunggal .qs-clip-* (0-1-0), termasuk lewat pewarisan
   yang terputus (warna p ditulis langsung sehingga warna dari kartu/notice
   tidak lagi diwariskan). Prefiks .qs-clip (0-2-0) mengunci nilai token. */

.qs-clip .qs-clip-card__title {
	margin: 0 0 8px;
	color: var(--qs-clip-ink);
	font-size: 18px;
}

.qs-clip .qs-clip-card__title--kpi {
	margin: 0 0 4px;
	color: var(--qs-clip-mut);
	font-size: 14px;
}

.qs-clip .qs-clip-stat { margin: 0; color: var(--qs-clip-ink); }

.qs-clip .qs-clip-card__lead,
.qs-clip .qs-clip-item__sum,
.qs-clip .qs-clip-head__note,
.qs-clip .qs-clip-empty { color: var(--qs-clip-mut); }

.qs-clip .qs-clip-card__lead { margin: 0 0 14px; }
.qs-clip .qs-clip-item__sum { margin: 0 0 8px; }
.qs-clip .qs-clip-head__note { margin: 10px 0 0; }
.qs-clip .qs-clip-empty { margin: 0; }

.qs-clip .qs-clip-sim { margin: 12px 0 0; color: #92400E; }

.qs-clip .qs-clip-note p { margin: 0; }
.qs-clip .qs-clip-note--success p { color: #065F46; }
.qs-clip .qs-clip-note--error p { color: #991B1B; }
.qs-clip .qs-clip-note--info p { color: var(--qs-clip-mut); }

.qs-clip .qs-clip-field { margin: 0 0 16px; }
.qs-clip .qs-clip-field label {
	color: var(--qs-clip-ink);
	font-size: 14.5px;
}

.qs-clip .qs-clip-actions { margin: 0; }

.qs-clip .qs-clip-dl dt { color: var(--qs-clip-mut); }
.qs-clip .qs-clip-dl dd { margin: 0; color: var(--qs-clip-ink); }

.qs-clip .qs-clip-prose { color: var(--qs-clip-mut); }

.qs-clip .qs-clip-back { margin: 0 0 14px; }

/* Fokus & galat field harus tetap terlihat: shop.css memadamkan cincin fokus
   semua input toko (body.qs-shopctx …:focus { outline:none } — 0-2-2) dan
   menata border input akun dengan
   .woocommerce-MyAccount-content form input:not([type=checkbox]):not([type=radio])
   (0-3-2), sehingga rule dasar komponen (0-2-1 / 0-3-1) kalah dan field
   kehilangan indikator fokus serta border galat :invalid. Prefiks di bawah
   menaikkan spesifisitas tanpa !important. */
.qs-clip .qs-clip-field input:focus,
.qs-clip .qs-clip-field select:focus,
.qs-clip .qs-clip-field textarea:focus {
	outline: 2px solid var(--qs-clip-acc);
	outline-offset: 1px;
}

.qs-clip .qs-clip-form .qs-clip-field input:focus,
.qs-clip .qs-clip-form .qs-clip-field select:focus,
.qs-clip .qs-clip-form .qs-clip-field textarea:focus {
	border-color: var(--qs-clip-acc);
}

/* :user-invalid, bukan :invalid — field wajib yang belum tersentuh tidak
   boleh langsung merah; merah hanya setelah pengguna berinteraksi. */
.qs-clip .qs-clip-form .qs-clip-field input:user-invalid {
	border-color: var(--qs-error, #DC2626);
}

/* Consent Syarat Program Clip Campaign (remediasi 2026-08-03). */
.qs-clip-field--consent { margin-top: 4px; }
.qs-clip-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; min-height: 44px; cursor: pointer; }
.qs-clip-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.qs-clip-terms-link { margin: 18px 0 0; font-size: 14px; }