/* KahunaCart Affiliates: the Affiliate tab in the customer's account and the
   public program page.

   Like every add-on stylesheet, this paints nothing of its own. Every colour,
   radius and font reads a --kc-* token from the base plugin's stylesheet,
   which resolves a site's --kahunacart-* override, then the theme's design
   tokens, then a neutral. A theme that colours KahunaCart colours this tab
   for nothing, and with the base plugin's `builtin_css` switched off this
   file is not loaded either.

   Every rule is scoped to .kahunacart-affiliates, with :where() on the outer
   selector wherever it is not load-bearing, so a theme's own plain class
   selector wins on its own weight. */

.kahunacart-affiliates {
    display: grid;
    gap: 1.25rem;
    margin-block: 0.5rem 1.5rem;
}
.kahunacart-affiliates :where(h2) {
    margin: 0 0 0.6rem;
    font-size: 1.1em;
}
.kahunacart-affiliates :where(p) {
    margin-block: 0 0.5rem;
}

.kahunacart-affiliates-muted {
    color: var(--kc-muted);
    font-size: 0.92em;
}
.kahunacart-affiliates-label {
    margin: 0.75rem 0 0.35rem;
    color: var(--kc-subtle);
    font-size: 0.82em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── the tab's own navigation ───────────────────────────────────────────────
   A row of pills under the account navigation. Wraps on a phone rather than
   scrolling sideways, because seven short words fit in two rows and a hidden
   overflow hides the page a partner is looking for. */

.kahunacart-affiliates-nav :where(ul) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kahunacart-affiliates-nav :where(li) {
    margin: 0;
    padding: 0;
}
.kahunacart-affiliates-nav :where(a) {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--kc-border);
    border-radius: 999px;
    color: inherit;
    font-size: 0.92em;
    text-decoration: none;
    transition: border-color var(--kc-dur) var(--kc-ease), background var(--kc-dur) var(--kc-ease);
}
.kahunacart-affiliates-nav :where(a:hover) {
    border-color: var(--kc-border-strong);
}
.kahunacart-affiliates-nav :where(a[aria-current="page"]) {
    border-color: var(--kc-fg);
    background: var(--kc-fg);
    color: var(--kc-bg);
    font-weight: 500;
}

/* ── cards and notices ────────────────────────────────────────────────────── */

.kahunacart-affiliates-card,
.kahunacart-affiliates-notice {
    padding: 1rem 1.15rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-affiliates-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A line about the partner's standing (paused, closed, a tax form to fill
   in). Tinted, never alarming: none of these is an error. */
.kahunacart-affiliates-status {
    margin: 0;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-surface-2);
}
.kahunacart-affiliates-status--paused,
.kahunacart-affiliates-status--warn {
    border-color: color-mix(in srgb, var(--kc-warning) 45%, transparent);
    background: color-mix(in srgb, var(--kc-warning) 9%, transparent);
}

/* ── money ──────────────────────────────────────────────────────────────────
   Four figures, biggest first: what can be paid now. Two columns on a phone,
   four from a tablet up. */

.kahunacart-affiliates-money-currency {
    margin-block-end: 0.4rem;
    color: var(--kc-subtle);
    font-size: 0.85em;
    letter-spacing: 0.06em;
}
.kahunacart-affiliates-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}
@media (min-width: 720px) {
    .kahunacart-affiliates-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.kahunacart-affiliates-stat {
    padding: 0.85rem 1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-affiliates-stat :where(dt) {
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kahunacart-affiliates-stat :where(dd) {
    margin: 0.2rem 0 0;
    font-size: 1.35em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kahunacart-affiliates-stat :where(dd.kahunacart-affiliates-stat-note) {
    margin-block-start: 0.25rem;
    color: var(--kc-muted);
    font-size: 0.82em;
    font-weight: 400;
}
.kahunacart-affiliates-stat--balance {
    border-color: color-mix(in srgb, var(--kc-success) 45%, var(--kc-border));
}
.kahunacart-affiliates-traffic,
.kahunacart-affiliates-next :where(p) {
    margin: 0;
}
.kahunacart-affiliates-next {
    display: grid;
    gap: 0.6rem;
}

/* ── copy fields ────────────────────────────────────────────────────────────
   The value fills the row and the button sits beside it; on a narrow phone
   the button drops under the value instead of squeezing a link into a few
   characters. */

.kahunacart-affiliates-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-block: 0.25rem 0.5rem;
}
.kahunacart-affiliates-copy-value {
    flex: 1 1 16rem;
    min-inline-size: 0;
    font-family: var(--kc-mono);
    font-size: 0.9em;
}
.kahunacart-affiliates-copy:has(textarea) {
    align-items: flex-start;
}
.kahunacart-affiliates-copy :where(textarea) {
    resize: vertical;
}
.kahunacart-affiliates-code {
    padding: 0.15rem 0.5rem;
    border: 1px dashed var(--kc-border-strong);
    border-radius: var(--kc-radius);
    font-family: var(--kc-mono);
    font-size: 1.05em;
    letter-spacing: 0.04em;
}
.kahunacart-affiliates-coupon-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}
.kahunacart-affiliates-coupon--off {
    opacity: 0.7;
}

/* ── forms ──────────────────────────────────────────────────────────────── */

.kahunacart-affiliates-form {
    display: grid;
    gap: 0.9rem;
    max-inline-size: 40rem;
}
.kahunacart-affiliates-field {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    border: 0;
}
.kahunacart-affiliates-field > :where(span, legend) {
    font-weight: 500;
}
.kahunacart-affiliates-field > :where(legend) {
    padding: 0;
}
.kahunacart-affiliates-field :where(small) {
    color: var(--kc-muted);
}
.kahunacart-affiliates-field :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    inline-size: 100%;
}
/* A theme's fieldset frame is for a form of its own; here a fieldset is
   only a group of radios with a legend, and reads as one field. */
.kahunacart-affiliates fieldset.kahunacart-affiliates-field {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
/* The box, then its words. The words are one span in the templates: as loose
   text and a link they would be separate flex items, and the full stop after
   "program terms" would wrap away from it. */
.kahunacart-affiliates :where(.kahunacart-checkbox) {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.kahunacart-affiliates :where(.kahunacart-checkbox) > :where(span) {
    flex: 1 1 auto;
    min-inline-size: 0;
}
.kahunacart-affiliates-choices {
    gap: 0.4rem;
}
.kahunacart-affiliates-choices > :where(legend) {
    margin-block-end: 0.3rem;
    padding: 0;
}
.kahunacart-affiliates-address {
    gap: 0.6rem;
}
.kahunacart-affiliates-address > :where(label) {
    display: grid;
    gap: 0.25rem;
}
.kahunacart-affiliates-treaty > :where(summary) {
    cursor: pointer;
    font-weight: 500;
}
.kahunacart-affiliates-treaty[open] {
    gap: 0.6rem;
}
.kahunacart-affiliates-treaty > :where(label) {
    display: grid;
    gap: 0.25rem;
}
.kahunacart-affiliates-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kahunacart-affiliates-inline > :where(input) {
    flex: 1 1 16rem;
    inline-size: auto;
}
.kahunacart-affiliates-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0.25rem 0 0;
}
.kahunacart-affiliates .kahunacart-affiliates-primary {
    background: var(--kc-accent-strong);
    border-color: transparent;
    color: var(--kc-on-accent-strong);
    font-weight: 600;
}
.kahunacart-affiliates .kahunacart-affiliates-primary:hover {
    background: color-mix(in srgb, var(--kc-accent-strong) 85%, var(--kc-fg));
    border-color: transparent;
}
.kahunacart-affiliates-error {
    color: var(--kc-danger);
    font-size: 0.9em;
}
.kahunacart-affiliates :where([aria-invalid="true"]) {
    border-color: var(--kc-danger);
}
.kahunacart-affiliates :where([hidden]) {
    display: none !important;
}

/* ── terms list ─────────────────────────────────────────────────────────── */

.kahunacart-affiliates .kahunacart-affiliates-terms {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}
.kahunacart-affiliates .kahunacart-affiliates-terms > li {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.75rem;
}
@media (max-width: 30rem) {
    .kahunacart-affiliates .kahunacart-affiliates-terms > li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }
}

/* ── lists of money ─────────────────────────────────────────────────────────
   The account's own order table, reused, inside a box that scrolls on its
   own on a narrow phone rather than pushing the page sideways. */

.kahunacart-affiliates-table-wrap {
    overflow-x: auto;
}
.kahunacart-affiliates-num,
.kahunacart-affiliates-table .kahunacart-affiliates-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kahunacart-affiliates-pill--approved,
.kahunacart-affiliates-pill--paid {
    border-color: color-mix(in srgb, var(--kc-success) 45%, transparent);
    background: color-mix(in srgb, var(--kc-success) 9%, transparent);
}
.kahunacart-affiliates-pill--pending,
.kahunacart-affiliates-pill--unclaimed {
    border-color: color-mix(in srgb, var(--kc-warning) 45%, transparent);
    background: color-mix(in srgb, var(--kc-warning) 9%, transparent);
}
.kahunacart-affiliates-pill--rejected,
.kahunacart-affiliates-pill--reversed,
.kahunacart-affiliates-pill--failed,
.kahunacart-affiliates-pill--returned {
    border-color: color-mix(in srgb, var(--kc-danger) 45%, transparent);
    background: color-mix(in srgb, var(--kc-danger) 9%, transparent);
}
.kahunacart-affiliates-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

/* ── facts (the tax form on file) ───────────────────────────────────────── */

.kahunacart-affiliates-facts {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
}
.kahunacart-affiliates-facts > :where(div) {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.75rem;
}
.kahunacart-affiliates-facts :where(dt) {
    color: var(--kc-muted);
}
.kahunacart-affiliates-facts :where(dd) {
    margin: 0;
}
@media (max-width: 480px) {
    .kahunacart-affiliates-facts > :where(div) {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* ── creatives ──────────────────────────────────────────────────────────── */

.kahunacart-affiliates-creative-preview :where(img) {
    display: block;
    max-inline-size: 100%;
    height: auto;
    border-radius: var(--kc-radius);
}

/* ── the public program page ────────────────────────────────────────────── */

.kahunacart-affiliates-program {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-affiliates-program .kahunacart-affiliates-terms {
    margin: 0;
}

/* ── The public application form ({base}/affiliate/apply) ── */

.kahunacart-affiliates-public {
    display: grid;
    gap: 1.25rem;
    max-inline-size: 42rem;
    margin-inline: auto;
}
.kahunacart-affiliates-public :where(h1) {
    margin-block: 0 0.5rem;
}
/* Who is applying, on the signed-in form. */
.kahunacart-affiliates-applicant {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    margin: 0;
}
/* The honeypot: out of sight and out of the way, but still in the form for a
   script to fill in. Not display: none, which some scripts know to skip. */
.kahunacart-affiliates-trap {
    position: absolute;
    inset-inline-start: -10000px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

/* ── codes ──────────────────────────────────────────────────────────────── */

.kahunacart-affiliates-code-input {
    font-family: var(--kc-mono, ui-monospace, monospace);
}
.kahunacart-affiliates-field .kahunacart-affiliates-code-status:empty {
    display: none;
}
.kahunacart-affiliates-field .kahunacart-affiliates-code-status.is-free {
    color: var(--kc-success);
}
.kahunacart-affiliates-field .kahunacart-affiliates-code-status.is-taken {
    color: var(--kc-danger);
}
.kahunacart-affiliates-code > :where(p) {
    margin: 0 0 0.5rem;
}
.kahunacart-affiliates-change-code > :where(summary) {
    cursor: pointer;
    font-weight: 500;
}
.kahunacart-affiliates-change-code[open] > :where(summary) {
    margin-block-end: 0.75rem;
}