/* CANAMEK theme: dealer program (1.6), My Account › dealer (/my-account/dealer/).
 * Loaded on that endpoint only (inc/canamek-dealer-front.php), after ck-core.css (tokens, .field/.input/.select/.btn)
 * and, signed out, after ck-account.css (the sign-in card's frame and glass card, reused by the application card).
 *   1. the application form (template-parts/account/dealer-form.php), card and tab
 *   2. signed out: the application card (dealer-apply.php) and the sign-in card's "Apply" line
 *   3. signed in: the tab (template-parts/account/dealer.php) in the account area's own look (style.css: white cards,
 *      1px hairlines, mono labels) - decision, under review, the Dealer panel, orders, requests
 * Phone first where it matters: one column, 44px targets from 320px up.
 * The signed-in tab sits in the account content column (351-600px wide from 901px up, the sidebar beside it), so its
 * layout follows the column's width (@container ck-dp), not the window's; paddings and type sizes follow the window. */

/* ---- 1. the form ---------------------------------------------------------------------- */
.ck-dpf{display:flex;flex-direction:column}
.ck-dpf__panel{display:flex;flex-direction:column;gap:14px}
.ck-dpf .ck-dpf__title{margin:0;font:600 32px/1.1 var(--f-d);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ck-dpf .ck-dpf__title:focus{outline:none}
.ck-dpf .ck-dpf__title:focus-visible{outline:2px solid var(--red-deep);outline-offset:4px;border-radius:2px}
.ck-dpf__lede{font:500 15px/1.55 var(--f-b);color:var(--ink-soft)}
.ck-dpf__form{display:flex;flex-direction:column;gap:18px;margin:10px 0 0}
.ck-dpf__req{font:500 13px/1.4 var(--f-b);color:var(--ink-soft)}
.ck-dpf .field__err .ic{flex:none}
.ck-dpf .ck-recaptcha--gap,.ck-dpf .ck-rc-field{margin:0}
.ck-dpf .btn--split .ic{transition:transform var(--t-hover) var(--ease)}
.ck-dpf .btn--split:hover .ic{transform:translateX(3px)}
/* the sticky header never covers a field or the summary the focus moves to */
.ck-dpf__sum,.ck-dpf .field,.ck-dpf__panel{scroll-margin-top:120px}
.ck-dpf__fine{display:flex;align-items:flex-start;gap:8px;font:500 13px/1.5 var(--f-b);color:var(--ink-soft)}
.ck-dpf__fine .ic{flex:none;margin-top:2px}
.ck-dpf .field__opt{font-weight:500;color:var(--ink-muted)}
.ck-dpf .field__opt[hidden]{display:none}

/* error summary (role=alert; focused by the script after a refused send) */
.ck-dpf__sum{padding:14px 16px;border-radius:var(--r-m);background:var(--err-bg);box-shadow:inset 0 0 0 1.5px var(--red-deep)}
.ck-dpf__sum:focus{outline:0}
.ck-dpf__sum:focus-visible{outline:0}
.ck-dpf .ck-dpf__sumh{display:flex;align-items:center;gap:10px;margin:0;font:700 16px/1.3 var(--f-b);letter-spacing:0;color:var(--ink)}
.ck-dpf__sumh .ic{flex:none;color:var(--red-deep)}
.ck-dpf__sum ul{list-style:none;margin:6px 0 0 30px;padding:0}
.ck-dpf__sum li{margin:0;font:500 15px/1.5 var(--f-b);color:var(--ink)}
.ck-dpf__sum li:not(:has(a)){padding:6px 0}
.ck-dpf .ck-dpf__sum a{display:inline-flex;align-items:center;min-height:44px;font:700 15px/1.35 var(--f-b);color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.ck-dpf .ck-dpf__sum a:hover{color:var(--ink)}

/* success */
.ck-dpf__doneic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:rgba(27,127,76,.08);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(27,127,76,.3)}
.ck-dpf__acts{margin-top:6px}
.ck-dpf__panel.is-enter{animation:ck-dp-in var(--t-enter) var(--ease) both}
@keyframes ck-dp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- 2. signed out: the application card --------------------------------------------- */
.ck-dpa[data-ck-dpa]{display:flex;flex-direction:column;align-items:stretch}
.ck-dpa__switch,.ck-acct[data-ck-acct] .ck-acct__switch{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;font:500 15px/1.5 var(--f-b);color:var(--ink-soft)}
.ck-dpa__switch{margin-top:24px;padding-top:12px;border-top:1px solid var(--hair-2)}
.ck-acct[data-ck-acct] .ck-acct__switch{justify-content:center;margin-top:16px}
.ck-dpa__switch a,.ck-acct[data-ck-acct] .ck-acct__switch a{display:inline-flex;align-items:center;min-height:44px}

/* ---- 3. signed in: the tab --------------------------------------------------------------- */
.ck-dp{display:flex;flex-direction:column;gap:32px;min-width:0;container-type:inline-size;container-name:ck-dp}
.ck-dp-card{background:var(--white);border:1px solid var(--line);padding:32px;min-width:0;overflow-wrap:anywhere}
.ck-dp-formcard{max-width:760px;container-type:inline-size}
.ck-dp-formcard .ck-dpf .ck-dpf__title{font-size:30px}
/* two columns where the CARD is wide enough (about 690px and up), name / phone, email / country, state / city;
   one column in the narrow account column of a laptop or tablet */
@container (min-width:620px){
  .ck-dp-formcard .ck-dpf__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;align-items:start}
  .ck-dp-formcard .ck-dpf__form>*{grid-column:1/-1}
  .ck-dp-formcard .ck-dpf__form>.field[data-ck-dp-field]{grid-column:auto}
}
.ck-dp .ck-dp-h{margin:0;font:600 28px/1.15 var(--f-d);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ck-dp .ck-dp-h:focus{outline:none}
.ck-dp .ck-dp-h--sec{font-size:24px}
.ck-dp-p{font:500 15px/1.6 var(--f-b);color:var(--ink-soft);max-width:62ch}
.ck-dp-decision,.ck-dp-pending{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ck-dp-acts{margin-top:4px}

/* status chips (account style: mono caps), AA on their tints */
.ck-dp-chip{display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:0 10px;font:600 11px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  background:var(--bg-warm);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}
.ck-dp-chip::before{content:"";width:7px;height:7px;flex:none;background:currentColor}
.ck-dp-chip--pending{background:var(--warn-bg);color:var(--warn-ink);box-shadow:inset 0 0 0 1px rgba(107,78,0,.25)}
.ck-dp-chip--approved{background:rgba(27,127,76,.1);color:var(--ok-ink);box-shadow:inset 0 0 0 1px rgba(20,96,58,.25)}
.ck-dp-chip--rejected,.ck-dp-chip--revoked{background:var(--err-bg);color:var(--red-deep);box-shadow:inset 0 0 0 1px rgba(197,21,27,.28)}

/* the administrator's note */
.ck-dp-note{align-self:stretch;padding:14px 16px;background:var(--bg-warm);box-shadow:inset 3px 0 0 var(--red-deep)}
.ck-dp-note__k{font:600 11px/1.4 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ck-dp-note__v{margin-top:6px;font:500 15px/1.55 var(--f-b);color:var(--ink);white-space:pre-line}

/* "thanks" after sending, and the details sent */
.ck-dp-banner{align-self:stretch;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:rgba(27,127,76,.08);
  box-shadow:inset 3px 0 0 var(--ok);font:500 14px/1.5 var(--f-b);color:var(--ink)}
.ck-dp-banner .ic{flex:none;margin-top:2px;color:var(--ok)}
.ck-dp-banner b{font-weight:700}
.ck-dp-banner .ck-dp-banner__t{display:block}   /* the title, then the text: two sentences, two lines */
.ck-dp-dl{align-self:stretch;display:flex;flex-direction:column;margin:6px 0 0;border-top:1px solid var(--line)}
.ck-dp-dl>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.ck-dp-dl dt{font:500 11px/1.6 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.ck-dp-dl dd{margin:0;font:500 15px/1.5 var(--f-b);color:var(--ink);overflow-wrap:anywhere}

/* the Dealer panel (dark, like the referral earnings card) */
.ck-dp-hero{display:flex;flex-direction:column;gap:28px;padding:36px;background:var(--ink);color:var(--white)}
.ck-dp-hero__head{display:flex;flex-direction:column;gap:12px;min-width:0}
.ck-dp-hero__eye{display:flex;align-items:center;gap:12px;font:500 12px/1.4 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:#bdbdbd}
.ck-dp-hero__eye::before{content:"";width:8px;height:8px;flex:none;background:var(--red-accent)}
.ck-dp .ck-dp-hero__title{display:flex;align-items:center;gap:12px;margin:0;font:600 36px/1.05 var(--f-d);letter-spacing:-.02em;color:var(--white)}
.ck-dp-hero__title .ic{flex:none;color:var(--red-accent)}
.ck-dp-hero__text{font:500 14px/1.6 var(--f-b);color:#c8c8c8;max-width:46ch}
.ck-dp-stats{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.6fr);gap:20px 24px;margin:0}
.ck-dp-stat{min-width:0;padding-top:12px;border-top:1px solid var(--ink-soft)}
.ck-dp-stat dt{font:500 11px/1.4 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#bdbdbd}
.ck-dp-stat dd{margin:6px 0 0;font:600 17px/1.35 var(--f-d);color:var(--white);overflow-wrap:anywhere}
.ck-dp-stat--discount dd{font-size:40px;line-height:1;color:var(--red-accent);white-space:nowrap}   /* large text on --ink: 4.2:1; "12.5%" never breaks */
.ck-dp-stat--discount .ck-dp-stat__text{font-size:17px;line-height:1.35;color:var(--white);white-space:normal}   /* a dealer at 0%: what applies instead */

/* sections: orders, requests */
.ck-dp-sec{display:flex;flex-direction:column;gap:16px;min-width:0}
.ck-dp-sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.ck-dp .ck-dp-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 14px/1 var(--f-b);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ck-dp .ck-dp-more:hover{color:var(--red-deep)}
.ck-dp-empty{padding:20px 24px;background:var(--white);border:1px solid var(--line);font:500 15px/1.5 var(--f-b);color:var(--ink-soft)}
.ck-dp .ck-dp-empty__a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ck-dp .ck-dp-empty__a:hover{color:var(--red-deep)}
.ck-dp-otable,.ck-dp-rlist{background:var(--white);border:1px solid var(--line)}
.ck-dp-olist,.ck-dp-rlist{list-style:none;margin:0;padding:0}
/* the heading row and each order row are separate grids: every track has a fixed floor and an fr share (never
   auto, which follows the content), so a heading always sits over its column; the floors fit "#11137",
   "November 14, 2026", "PENDING PAYMENT" and "$120,450" (584px in all; stacked below 600px, see the end) */
.ck-dp-ohead,.ck-dp-orow{display:grid;grid-template-columns:minmax(64px,.7fr) minmax(136px,1.1fr) minmax(128px,1fr) minmax(84px,.9fr) 76px;gap:12px;align-items:center;padding:10px 24px}
.ck-dp-ohead{padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line);
  font:500 11px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.ck-dp-orow{min-height:56px;border-top:1px solid var(--line);font:500 14px/1.4 var(--f-b);color:var(--ink)}
.ck-dp-orow__no{font-weight:700}
.ck-dp-orow__date{font:500 13px/1.4 var(--f-m);color:var(--ink-soft)}
.ck-dp-orow__st{min-width:0}
.ck-dp-orow .ck-order-status{text-transform:uppercase;max-width:100%}   /* a longer (translated) status wraps inside its cell */
.ck-dp-orow .ck-order-status--transit{background:var(--red-deep)}   /* white on --red is 4.0:1; on --red-deep 5.6:1 */
.ck-dp-orow__total{font:700 16px/1.2 var(--f-d)}
.ck-dp-orow__total .amount{font:inherit}
.ck-dp .ck-dp-orow__view{justify-self:end;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;font:700 14px/1 var(--f-b);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ck-dp .ck-dp-orow__view:hover{color:var(--red-deep)}
.ck-dp-rrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 20px;align-items:center;min-height:56px;padding:12px 24px;border-top:1px solid var(--line)}
.ck-dp-rrow:first-child,.ck-dp-orow:first-child{border-top:0}
.ck-dp-rrow__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ck-dp-rrow__kind{font:700 14px/1.35 var(--f-b);color:var(--ink)}
.ck-dp-rrow__detail{font:500 14px/1.45 var(--f-b);color:var(--ink-soft);overflow-wrap:anywhere}
.ck-dp-rrow__date{font:500 13px/1.4 var(--f-m);color:var(--ink-soft);white-space:nowrap}

/* the column's width: the stats in two rows below 900px, the orders and requests stacked below 600px
   (the five order columns need 584px), the paddings of a phone below 520px */
@container ck-dp (max-width:900px){
  .ck-dp-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ck-dp-stat--region{grid-column:1/-1}
}
@container ck-dp (max-width:600px){
  .ck-dp-ohead{display:none}
  .ck-dp-orow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"no total" "date st" "view view";gap:6px 12px;padding:14px 20px}
  .ck-dp-orow__no{grid-area:no}
  .ck-dp-orow__total{grid-area:total;justify-self:end}
  .ck-dp-orow__date{grid-area:date}
  .ck-dp-orow__st{grid-area:st;justify-self:end}
  .ck-dp .ck-dp-orow__view{grid-area:view;justify-self:start}
  .ck-dp-rrow{grid-template-columns:minmax(0,1fr) auto;padding:14px 20px}
  .ck-dp-rrow__main{grid-column:1/-1}
}
@container ck-dp (max-width:520px){
  .ck-dp-card{padding:24px 20px}
  .ck-dp-hero{padding:28px 20px;gap:24px}
  .ck-dp-empty{padding:16px 20px}
}
@media (max-width:640px){
  .ck-dp{gap:24px}
  .ck-dp .ck-dp-h{font-size:24px}
  .ck-dp .ck-dp-h--sec{font-size:22px}
  .ck-dpf .ck-dpf__title,.ck-dp-formcard .ck-dpf .ck-dpf__title{font-size:26px}
  .ck-dp-dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ck-dp .ck-dp-hero__title{font-size:28px}
  .ck-dp-stat--discount dd{font-size:34px}
}
@container ck-dp (max-width:360px){
  .ck-dp-card{padding:20px 16px}
  .ck-dp-hero{padding:24px 16px}
  .ck-dp-orow,.ck-dp-rrow{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .ck-dpf__panel.is-enter{animation:none}
  .ck-dpf .btn--split:hover .ic{transform:none}
}