/* =================================================================
   BECOME A RETAILER PARTNER — layered on styles.css
   ================================================================= */

.partner-hero {
  background: var(--bg);
  padding-top: calc(var(--nav-h) + clamp(28px,4vw,44px));
  padding-bottom: clamp(36px,5vw,52px);
  text-align: center;
}
.partner-hero .breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 24px;
}
.partner-hero .breadcrumb a { color: var(--text-muted); transition: color var(--t); }
.partner-hero .breadcrumb a:hover { color: var(--red); }
.partner-hero .breadcrumb .sep { opacity: .5; }

.partner-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px 8px 14px; margin-bottom: 22px;
  border-radius: var(--r-pill);
  background: var(--gold-dim); color: color-mix(in srgb, var(--gold) 65%, #3a2405);
  font-family: "Montserrat",sans-serif; font-size: var(--fs-sm); font-weight: 700;
}
.partner-eyebrow svg { width: 15px; height: 15px; flex: none; }

.partner-title {
  font-family: "Montserrat","Karla",sans-serif;
  font-size: clamp(2.1rem,4.6vw,3.2rem); font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text); margin: 0 0 18px;
  max-width: 32ch; margin-inline: auto;
}
.partner-sub {
  font-size: var(--fs-lg); color: var(--text-muted); line-height: 1.78;
  max-width: 58ch; margin: 0 auto;
}

/* Stepper — stays on one line; scrolls horizontally only if truly cramped */
.partner-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px,1.4vw,16px); flex-wrap: nowrap;
  max-width: var(--maxw); margin: 36px auto 0; padding-inline: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ps-step { display: flex; align-items: center; gap: 10px; }
.ps-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Montserrat",sans-serif; font-size: var(--fs-sm); font-weight: 700;
  background: var(--border-lift); color: var(--text-muted);
  transition: background var(--t), color var(--t);
}
.ps-step.active .ps-num { background: var(--red); color: #fff; }
.ps-step.done .ps-num { background: var(--ok); color: #fff; }
.ps-label {
  font-family: "Montserrat",sans-serif; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .02em; color: var(--text-muted); white-space: nowrap;
}
.ps-step.active .ps-label { color: var(--red); }
.ps-step.done .ps-label { color: var(--ok); }
.ps-rule { width: clamp(24px,4vw,56px); height: 1px; background: var(--border-lift); flex: none; }

/* Two-column layout — wider than the site's default container so the
   sidebar and form both get more breathing room */
.partner-section { background: var(--bg-soft); }
.partner-container { max-width: 1360px; }
/* MORE OF THE ROOM GOES TO THE FORM, AND THE SIDEBAR STOPS LEAVING A HOLE.

   Two things were wrong with the old .72fr / 1.28fr split. The form — the
   thing the page exists for — got 773px of a 1264px row while a column of
   marketing copy took 435. And that copy runs out after four blocks, so for
   most of the scroll the left third of the page was empty cream beside a form
   that had been squeezed to make room for it.

   The ratio shifts toward the form, and the sidebar sticks: it stays beside
   whichever part of the form you are filling in instead of scrolling away and
   leaving its column behind. `align-items: start` was already here, which is
   what makes a sticky child possible — a stretched grid item is as tall as the
   row and has nothing to stick within. */
.partner-layout {
  display: grid; grid-template-columns: .62fr 1.38fr;
  gap: clamp(32px,4vw,56px); align-items: start;
}
.partner-aside {
  position: sticky;
  /* Clear of the fixed navbar, with a little air. */
  top: calc(var(--nav-h) + 20px);
  /* If the copy ever grows taller than the window it scrolls on its own rather
     than pinning its own bottom off-screen where nobody can read it. */
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Sidebar */
.partner-sidebar-head {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); margin: 0 0 6px;
}
.partner-sidebar-head::after {
  content: ""; display: block; width: 24px; height: 2px; margin-top: 8px;
  background: var(--gold); border-radius: 2px;
}
.partner-benefit { display: flex; gap: 16px; margin-top: 26px; }
.pb-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--red); box-shadow: var(--shadow-sm);
}
.pb-icon svg { width: 19px; height: 19px; }
.partner-benefit b { display: block; font-size: var(--fs-lg); color: var(--text); margin-bottom: 5px; }
.partner-benefit p { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.68; margin: 0; }

.partner-callout {
  margin-top: 32px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.partner-callout-head {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 10px;
}
.partner-callout-head svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.partner-callout p { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.75; margin: 0; }
.partner-callout a { color: var(--red); font-weight: 700; }

/* Form card */
.partner-form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  padding: clamp(30px,4.5vw,46px);
}
/* h3/h4 default to the site's serif display font — override to the
   plain sans body font so form chrome stays easy to scan */
.partner-form-title {
  font-family: "Montserrat","Karla",sans-serif;
  font-size: var(--fs-3xl); font-weight: 700; color: var(--text); margin: 0 0 10px;
}
.partner-form-sub { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.65; margin: 0 0 30px; }

/* ONE RHYTHM, AND IT IS THE CHECKOUT'S.
   ------------------------------------
   The form had four different vertical gaps doing the same job: 20px below a
   field, 18px inside a .pf-row (which BECAME 38px the moment the row stacked
   on a phone, because each half kept its own 20px as well), 4px below the
   address fieldset, and 30+22px above a group heading. Nothing was wrong
   individually; together they read as untidy, which is exactly the complaint.

   The checkout is the reference form, and its rhythm is: one gap under every
   field, and a section separated by a hairline with equal space either side
   (.co-section — 24px above the rule, 24px below, 12px under the heading).
   That is what is used here. The field gap stays 20px rather than dropping to
   the checkout's 16, because this card's fields are deliberately larger
   (.auth-input is 15px of padding against the checkout's 11) and 16px under a
   bigger field is a tighter rhythm, not the same one.

   ROW GAP ZERO, column gap 18. The halves of a .pf-row already carry the
   field gap themselves; a row-gap on top of it is what made the stacked
   layout double up. */
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* The credentials block is a SECTION, and the rule belongs to the section, not
   to its heading.

   It used to hang off .pf-group-label with :first-of-type deciding whether to
   draw it — and :first-of-type counts siblings of the same element type within
   the same parent, so once this h4 was wrapped in #pf-credentials it became the
   first h4 of its own div and matched, which switched the separator OFF. The
   form has had no line between the business details and the credentials since.
   Putting it on the wrapper cannot go wrong that way: the wrapper is hidden
   whole for a signed-in applicant (.hide is display:none), so the rule goes
   with it and nothing is left floating above the first thing on the form. */
#pf-credentials {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border);
}
.pf-group-label {
  font-family: "Montserrat","Karla",sans-serif;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); margin: 0 0 12px;
}

/* A field filled in from the customer's saved profile (decision I9).

   shop.css already carries this for the checkout, scoped to `.control`. The
   partner form's inputs are `.auth-input`, so the rule did not reach them —
   same marker, same meaning, second selector. A value that appears without
   being typed has to be distinguishable from one that was, or a wrong saved
   address gets submitted unnoticed. A hint, never a lock: the field stays
   editable and the marker goes the moment it is touched. */
.auth-input.is-prefilled {
  border-color: var(--gold);
  background-image: linear-gradient(0deg, var(--gold-dim), var(--gold-dim));
}
.auth-input.is-prefilled:focus { background-image: none; }

/* Names the account the application will be attached to. Shown only when there
   is a session, because it is the disclosure that api/b2b/apply.php takes the
   email from that session and not from the field above. */
.pf-account-note {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; margin: 0 0 26px;
  border: 1px solid var(--gold-line); border-radius: var(--r-md);
  background: var(--gold-dim);
  font-size: var(--fs-base); line-height: 1.55; color: var(--text);
}
.pf-account-note .pf-account-ic { flex: none; width: 18px; height: 18px; color: var(--gold); margin-top: 2px; }
.pf-account-note .pf-account-ic svg { width: 18px; height: 18px; display: block; }
.pf-account-note strong { font-weight: 700; }

/* Larger, more legible fields than the compact auth-modal defaults,
   with colored labels so each field is easy to pick out at a glance */
.partner-form-card .auth-field { margin-bottom: 20px; }
.partner-form-card .auth-field label {
  font-size: var(--fs-sm); font-weight: 700; color: var(--red);
  margin-bottom: 9px;
}
.partner-form-card .auth-input { font-size: var(--fs-lg); padding: 15px 14px 15px 44px; }
.partner-form-card select.auth-input { padding-right: 38px; }
.partner-form-card .auth-input-icon { width: 18px; height: 18px; }
.partner-form-card .field-error { font-size: var(--fs-base); }

/* The business address sits on the same rhythm as everything else.

   The fieldset carried margin: 0 0 4px, so the block below it started 4px
   after the picker's own last field instead of the form's one gap — and the
   <legend> was styled as a THIRD kind of label: .74rem, --text, uppercase with
   wide tracking, beside .78rem red field labels. It is not a field label, it
   is the heading of a group of them, which is exactly what the checkout's
   .co-subtitle is, so it is given those metrics. The picker's own fields are
   .auth-field and already carry the card's label style and the 20px gap. */
.partner-form-card .auth-addr { margin: 0; }
.partner-form-card .auth-addr-legend {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; text-transform: none;
  color: var(--text); margin-bottom: 10px;
}

/* One field height. EbSelect draws its own trigger over the native <select>,
   and the trigger's size comes from the shared component: 10px of padding and
   .92rem against this card's 15px and 1.02rem. Business Type sat 39px tall
   beside a 51px BIR TIN field in the same row — the single most visible thing
   about the form's spacing.

   The selector needs .ebs in it. EbSelect injects its own stylesheet from
   JavaScript, so its rules land AFTER this file; `.ebs--field .ebs-trigger` and
   `.partner-form-card .ebs-trigger` have the same specificity and the later one
   wins. One more class puts this ahead of it, for every variant. */
.partner-form-card .ebs .ebs-trigger {
  font-size: var(--fs-lg);
  min-height: 0;
  padding: 15px 38px 15px 14px;
}
/* …except the address picker's, which sit in an icon well like every other
   field on this card. This file loads after styles.css, so the shared
   .addr-picker--auth rule there would lose the tie on specificity and the pin
   would go back over the text. Restated here, one class deeper. */
.partner-form-card .addr-picker--auth .ebs .ebs-trigger { padding-left: 44px; }

/* Confirmation panel — mirrors the batch-traceability "verified" result card */
.partner-confirm {
  text-align: center; padding: clamp(20px,3vw,30px) 0;
  animation: pageIn .4s var(--ease) both;
}
.partner-confirm-icon {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(24,169,87,.12); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.partner-confirm-icon svg { width: 28px; height: 28px; }
.partner-confirm h3 { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin: 0 0 10px; }
.partner-confirm p { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.7; max-width: 46ch; margin: 0 auto 24px; }

@media (max-width: 860px) {
  .partner-layout { grid-template-columns: 1fr; }
  .pf-row { grid-template-columns: 1fr; }
  .ps-label { display: none; }
  /* ONE COLUMN, SO NOTHING STICKS. In two columns the sidebar sticks beside
     the form; stacked, "beside" no longer exists and the same rule would pin
     four blocks of marketing copy across the top of the screen while someone
     tried to fill the form in underneath it. It also has to give its height
     back — a max-height of one viewport with overflow:auto turns into a second
     scrollbar inside the page. */
  .partner-aside {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}