/*! avloon-affiliates portal — scoped under .avaff; light store look, Tajawal, mobile-first (SPEC §12.11). Owner: portal. */
.avaff {
	--avaff-ink: #0b1220;
	--avaff-muted: #6b7280;
	--avaff-line: #e6e8ee;
	--avaff-soft: #f6f7fa;
	--avaff-card: #fff;
	--avaff-ok: #0f9d58;
	--avaff-ok-bg: #e7f6ee;
	--avaff-due: #0b1220;
	--avaff-due-bg: #eef0f5;
	--avaff-wait: #b26b00;
	--avaff-wait-bg: #fff4e2;
	--avaff-bad: #c62828;
	--avaff-bad-bg: #fdecec;
	--avaff-radius: 20px;
	--avaff-shadow: 0 6px 24px rgba(11, 18, 32, .06);
	box-sizing: border-box;
	container: avaff / inline-size; /* layout follows the width the theme gives the portal, not the screen */
	direction: rtl;
	text-align: right;
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 0 24px;
	color: var(--avaff-ink);
	font-family: Tajawal, var(--primary-ff, "Helvetica Neue"), Tahoma, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}
.avaff *, .avaff *::before, .avaff *::after { box-sizing: inherit; }
.avaff h2, .avaff h3, .avaff p, .avaff ul, .avaff dl, .avaff dd, .avaff form, .avaff fieldset, .avaff table { margin: 0; padding: 0; }
.avaff ul { list-style: none; }
.avaff a { color: var(--avaff-ink); }
.avaff bdi { unicode-bidi: isolate; direction: ltr; font-family: inherit; }
.avaff .avaff-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.avaff .avaff-muted { color: var(--avaff-muted); font-size: 14px; }
.avaff .avaff-strong { font-weight: 700; }
.avaff .avaff-break { word-break: break-word; }

/* Preview banner */
.avaff .avaff-preview-banner {
	display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
	margin-bottom: 14px; padding: 12px 16px; border-radius: 14px;
	background: var(--avaff-wait-bg); color: #6b4100; font-size: 14px;
	border: 1px solid #f3d9a8;
}

/* Header */
.avaff .avaff-head {
	display: grid; grid-template-columns: 1fr auto; gap: 12px 16px;
	padding: 20px; margin-bottom: 14px;
	background: var(--avaff-card); border: 1px solid var(--avaff-line);
	border-radius: var(--avaff-radius); box-shadow: var(--avaff-shadow);
}
.avaff .avaff-eyebrow { color: var(--avaff-muted); font-size: 13px; }
.avaff .avaff-title { font-size: 24px; line-height: 1.3; font-weight: 800; color: var(--avaff-ink); }
.avaff .avaff-greet { color: var(--avaff-muted); font-size: 14px; }
.avaff .avaff-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.avaff .avaff-meta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.avaff .avaff-meta__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; background: var(--avaff-soft); border-radius: 14px; padding: 8px 12px; min-width: 0; }
.avaff .avaff-meta__item dd { min-width: 0; }
.avaff .avaff-meta__item--wide { grid-column: 1 / -1; }
.avaff .avaff-meta dt { color: var(--avaff-muted); font-size: 12px; }
.avaff .avaff-meta dd { font-weight: 700; font-size: 15px; }
.avaff .avaff-meta dd small { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.avaff .avaff-meta__item--wide dd { flex: 1 1 100%; }
/* Account details fold away on phones (portal.js closes the box under 600 px) so the balance is on the first screen. */
.avaff .avaff-meta-box { grid-column: 1 / -1; }
.avaff .avaff-meta-sum { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--avaff-ink); }
.avaff .avaff-meta-sum::-webkit-details-marker { display: none; }
.avaff .avaff-meta-sum::after { content: '▾'; font-size: 12px; transition: transform .2s; }
.avaff .avaff-meta-box[open] > .avaff-meta-sum::after { transform: rotate(180deg); }
.avaff .avaff-src { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 4px; min-width: 0; }
.avaff .avaff-wc-notices { margin-bottom: 14px; }
.avaff .avaff-wc-notices ul { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--avaff-bad-bg); border: 1px solid #f5c6c6; color: #8e1b1b; list-style: none; font-size: 15px; }

/* Pills */
.avaff .avaff-pill {
	display: inline-block; padding: 2px 12px; border-radius: 999px;
	font-size: 13px; font-weight: 700; line-height: 1.8; white-space: nowrap;
	background: var(--avaff-due-bg); color: var(--avaff-due);
}
.avaff .avaff-pill--ok { background: var(--avaff-ok-bg); color: var(--avaff-ok); }
.avaff .avaff-pill--wait { background: var(--avaff-wait-bg); color: var(--avaff-wait); }
.avaff .avaff-pill--bad { background: var(--avaff-bad-bg); color: var(--avaff-bad); }

/* Tabs */
.avaff .avaff-tabs {
	display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
	padding: 6px; margin-bottom: 14px; background: var(--avaff-card);
	border: 1px solid var(--avaff-line); border-radius: 26px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px); mask-image: linear-gradient(to right, transparent 0, #000 28px);
}
.avaff .avaff-tabs::-webkit-scrollbar { display: none; }
.avaff .avaff-tab {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	padding: 0 18px; border-radius: 999px; text-decoration: none;
	color: var(--avaff-ink); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.avaff .avaff-tab:hover, .avaff .avaff-tab:focus-visible { background: var(--avaff-soft); }
.avaff .avaff-tab.is-active { background: var(--avaff-ink); color: #fff; }

/* Notices */
.avaff .avaff-notice {
	margin-bottom: 14px; padding: 12px 16px; border-radius: 14px; font-size: 15px;
	border: 1px solid var(--avaff-line); background: var(--avaff-soft);
}
.avaff .avaff-notice--success { background: var(--avaff-ok-bg); border-color: #bfe6cf; color: #0a6b3c; }
.avaff .avaff-notice--error { background: var(--avaff-bad-bg); border-color: #f5c6c6; color: #8e1b1b; }

/* Cards */
.avaff .avaff-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.avaff .avaff-card {
	display: flex; flex-direction: column; gap: 2px; min-width: 0;
	padding: 14px; background: var(--avaff-card); border: 1px solid var(--avaff-line);
	border-radius: var(--avaff-radius); box-shadow: var(--avaff-shadow);
}
.avaff .avaff-card__label { color: var(--avaff-muted); font-size: 13px; }
.avaff .avaff-card__value { font-size: 18px; font-weight: 800; line-height: 1.4; }
.avaff .avaff-card__hint { color: var(--avaff-muted); font-size: 12px; }
.avaff .avaff-card--unpaid { grid-column: 1 / -1; background: var(--avaff-ink); border-color: var(--avaff-ink); color: #fff; }
.avaff .avaff-card--unpaid .avaff-card__label, .avaff .avaff-card--unpaid .avaff-card__hint { color: rgba(255, 255, 255, .75); }
.avaff .avaff-card--unpaid .avaff-card__value { font-size: 26px; }

/* Panels */
.avaff .avaff-panel {
	padding: 18px; margin-bottom: 14px; background: var(--avaff-card);
	border: 1px solid var(--avaff-line); border-radius: var(--avaff-radius); box-shadow: var(--avaff-shadow);
}
.avaff .avaff-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.avaff .avaff-panel__title { font-size: 18px; font-weight: 800; line-height: 1.4; margin-bottom: 4px; color: var(--avaff-ink); }
.avaff .avaff-panel > .avaff-muted { margin-bottom: 12px; }
.avaff .avaff-count { font-weight: 700; margin-bottom: 10px; }

/* Buttons + inputs */
.avaff .avaff-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; padding: 0 20px; border: 1px solid var(--avaff-ink); border-radius: 999px;
	background: var(--avaff-ink); color: #fff; font: inherit; font-weight: 700; font-size: 15px;
	line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
	-webkit-appearance: none; appearance: none; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.avaff .avaff-btn:hover, .avaff .avaff-btn:focus-visible { background: #24304a; border-color: #24304a; color: #fff; }
.avaff .avaff-btn[disabled] { opacity: .45; cursor: not-allowed; }
.avaff .avaff-btn--ghost { background: transparent; color: var(--avaff-ink); }
.avaff .avaff-btn--ghost:hover, .avaff .avaff-btn--ghost:focus-visible { background: var(--avaff-soft); color: var(--avaff-ink); border-color: var(--avaff-ink); }
.avaff .avaff-btn--danger { background: transparent; color: var(--avaff-bad); border-color: var(--avaff-bad); }
.avaff .avaff-btn--danger:hover, .avaff .avaff-btn--danger:focus-visible { background: var(--avaff-bad-bg); color: var(--avaff-bad); border-color: var(--avaff-bad); }
.avaff .avaff-btn--sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.avaff .avaff-btn--block { width: 100%; }
.avaff .avaff-btn.is-done { background: var(--avaff-ok); border-color: var(--avaff-ok); color: #fff; }
.avaff .avaff-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.avaff .avaff-input {
	display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 10px 14px;
	border: 1px solid var(--avaff-line); border-radius: 14px; background: #fff; color: var(--avaff-ink);
	font: inherit; font-size: 16px; line-height: 1.5; box-shadow: none; text-align: right;
}
.avaff textarea.avaff-input { min-height: 96px; resize: vertical; }
.avaff .avaff-input--ltr { direction: ltr; text-align: left; }
.avaff .avaff-input:focus { outline: 2px solid var(--avaff-ink); outline-offset: 1px; border-color: var(--avaff-ink); }
.avaff .avaff-input[readonly] { background: var(--avaff-soft); }
.avaff .avaff-copyrow { display: flex; gap: 8px; align-items: stretch; }
.avaff .avaff-copyrow .avaff-input { flex: 1 1 auto; }
.avaff .avaff-copyrow .avaff-btn { flex: 0 0 auto; }

/* Forms */
.avaff .avaff-forms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.avaff .avaff-form-card {
	padding: 20px; background: var(--avaff-card); border: 1px solid var(--avaff-line);
	border-radius: var(--avaff-radius); box-shadow: var(--avaff-shadow); min-width: 0;
}
.avaff .avaff-form-card__title { font-size: 20px; font-weight: 800; line-height: 1.4; margin-bottom: 6px; color: var(--avaff-ink); }
.avaff .avaff-lead { font-size: 15px; margin-bottom: 6px; }
.avaff .avaff-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.avaff .avaff-field { display: flex; flex-direction: column; gap: 6px; }
.avaff .avaff-label { display: block; font-weight: 700; font-size: 14px; }
.avaff .avaff-req { color: var(--avaff-bad); }
.avaff .avaff-fieldset { border: 0; display: flex; flex-direction: column; gap: 4px; }
.avaff .avaff-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }
.avaff .avaff-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--avaff-ink); }
.avaff .avaff-field.is-invalid .avaff-input, .avaff .avaff-field.is-invalid .avaff-check { border-color: var(--avaff-bad); }
.avaff .avaff-field.is-invalid .avaff-input { box-shadow: 0 0 0 1px var(--avaff-bad); }
.avaff .avaff-field-error { color: var(--avaff-bad); font-size: 13px; }
/* Honeypot: clipped in place — never pushed off-screen (an off-screen offset makes RTL pages scroll sideways). */
.avaff .avaff-hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.avaff .avaff-form--slug { margin-top: 12px; }
.avaff .avaff-inline-form { display: inline; margin: 0; }

/* Generator / links */
.avaff .avaff-generator { display: flex; flex-direction: column; gap: 8px; }
.avaff .avaff-linklist, .avaff .avaff-slugs, .avaff .avaff-coupons { display: flex; flex-direction: column; gap: 8px; }
.avaff .avaff-linklist__item, .avaff .avaff-slugs__item, .avaff .avaff-coupon {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	padding: 8px 12px; background: var(--avaff-soft); border-radius: 14px; min-width: 0;
}
.avaff .avaff-linklist__item bdi { flex: 1 1 200px; min-width: 0; font-size: 14px; word-break: break-all; }
.avaff .avaff-slugs__name { flex: 1 1 120px; font-weight: 700; }
.avaff .avaff-coupon__code { flex: 1 1 100px; font-weight: 800; font-size: 17px; letter-spacing: .5px; }
.avaff .avaff-coupon__discount { color: var(--avaff-muted); font-size: 14px; }

/* Tables → stacked cards on phones (mobile-first) */
.avaff .avaff-table { width: 100%; border-collapse: collapse; border: 0; font-size: 15px; }
.avaff .avaff-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.avaff .avaff-table tbody, .avaff .avaff-table tr, .avaff .avaff-table td { display: block; border: 0; background: none; }
.avaff .avaff-table > tbody > tr:not(.avaff-details-row), .avaff .avaff-table .avaff-rowgroup {
	padding: 10px 12px; margin-bottom: 10px; background: var(--avaff-soft); border-radius: 14px;
}
.avaff .avaff-table .avaff-rowgroup > tr { padding: 0; margin: 0; background: none; border-radius: 0; }
.avaff .avaff-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; text-align: left; min-width: 0; }
.avaff .avaff-table td::before { content: attr(data-label); color: var(--avaff-muted); font-size: 13px; font-weight: 400; text-align: right; flex: 0 0 auto; }
.avaff .avaff-table td:not([data-label])::before { content: none; }
.avaff .avaff-table td.avaff-actions { justify-content: flex-start; }
.avaff .avaff-table .avaff-details-row td { display: block; padding: 4px 0 0; text-align: right; }
.avaff .avaff-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; list-style: none; font-weight: 700; font-size: 14px; color: var(--avaff-ink); }
.avaff .avaff-details summary::-webkit-details-marker { display: none; }
.avaff .avaff-details summary::after { content: '▾'; font-size: 12px; transition: transform .2s; }
.avaff .avaff-details[open] > summary::after { transform: rotate(180deg); }
.avaff .avaff-items { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.avaff .avaff-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 8px 10px; background: #fff; border-radius: 12px; border: 1px solid var(--avaff-line); }
.avaff .avaff-item__name { flex: 1 1 100%; font-weight: 700; font-size: 14px; }
.avaff .avaff-item__meta { color: var(--avaff-muted); font-size: 13px; }
.avaff .avaff-item__commission { font-weight: 800; font-size: 14px; }

/* States, empty, pager */
.avaff .avaff-state {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 24px 20px; background: var(--avaff-card); border: 1px solid var(--avaff-line);
	border-radius: var(--avaff-radius); box-shadow: var(--avaff-shadow);
}
.avaff .avaff-state__title { font-size: 22px; font-weight: 800; line-height: 1.4; color: var(--avaff-ink); }
.avaff .avaff-empty { padding: 18px; text-align: center; color: var(--avaff-muted); background: var(--avaff-soft); border-radius: 14px; }
.avaff .avaff-empty .avaff-btn { margin-top: 10px; }
.avaff .avaff-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -4px 0 14px; }
.avaff .avaff-pager__label { color: var(--avaff-muted); font-size: 14px; text-align: center; }
.avaff .avaff-pager__gap { min-width: 1px; }

@container avaff (max-width: 360px) {
	.avaff .avaff-head { grid-template-columns: 1fr; }
	.avaff .avaff-head__side { flex-direction: row; justify-content: space-between; align-items: center; }
	.avaff .avaff-copyrow { flex-wrap: wrap; }
	.avaff .avaff-copyrow .avaff-btn { width: 100%; }
}

@container avaff (min-width: 600px) {
	.avaff .avaff-meta-sum { display: none; }
	.avaff .avaff-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.avaff .avaff-meta__item--wide { grid-column: span 2; }
	.avaff .avaff-meta__item { display: block; padding: 10px 12px; }
	.avaff .avaff-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.avaff .avaff-card--unpaid { grid-column: auto; }
	.avaff .avaff-card__value { font-size: 20px; }
	.avaff .avaff-forms--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

	.avaff .avaff-table thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; display: table-header-group; }
	.avaff .avaff-table tbody { display: table-row-group; }
	.avaff .avaff-table tr { display: table-row; }
	.avaff .avaff-table th, .avaff .avaff-table td { display: table-cell; padding: 12px 10px; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--avaff-line); }
	.avaff .avaff-table th { color: var(--avaff-muted); font-size: 13px; font-weight: 700; background: none; white-space: nowrap; }
	.avaff .avaff-table td::before { content: none; }
	.avaff .avaff-table td.avaff-num { white-space: nowrap; }
	.avaff .avaff-table > tbody > tr:not(.avaff-details-row), .avaff .avaff-table .avaff-rowgroup { padding: 0; margin: 0; background: none; border-radius: 0; }
	.avaff .avaff-table .avaff-rowgroup > tr:first-child > td { border-bottom: 0; }
	.avaff .avaff-table .avaff-rowgroup > tr:only-child > td { border-bottom: 1px solid var(--avaff-line); }
	.avaff .avaff-table .avaff-details-row td { display: table-cell; padding: 0 10px 10px; }
}

@container avaff (min-width: 880px) {
	.avaff .avaff-tabs { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
	.avaff .avaff-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.avaff .avaff-head { padding: 24px 28px; }
}