/* ==========================================================================
   Barari Gold — the account area: order history and order detail (FE-23)
   --------------------------------------------------------------------------
   Not in the design deck. Built from the mockup's vocabulary so the account
   reads as the same shop: the nav strip takes .chip (:104-105 — 12.5px, a
   hairline border, brown-on-ivory flipping to ivory-on-brown when current),
   status takes .vchip (:43-44 — a dotted pill on a tinted wash), the fact
   rows take .spec (:125-128) and the totals take .calc (:129-135), the same
   bordered box the product page and the basket already price in. FE-24 and
   the later account screens extend this sheet rather than starting one.

   Pushed on `barari_css`, not `css_or_js` — FE-06: css_or_js renders above
   the shared Barari block and loses every specificity tie.

   RTL — FE-38's convention: logical properties throughout. The [dir="rtl"]
   pairs at the end cover only the closed list: the eyebrow's letter-spacing
   (a joined script cannot track) and the row chevron's glyph flip.

   MONEY — nothing here computes. Every figure is a decimal string from
   webCurrencyConverter(); this sheet aligns them with .barari-num columns.
   ========================================================================== */

.barari-account {
  max-width: var(--barari-measure);
  margin-inline: auto;
  padding-inline: var(--barari-space-5);
  padding-block: var(--barari-space-7) var(--barari-space-10);
}

/* -- Shared account header: eyebrow, title, nav strip ---------------------- */

.barari-account__eyebrow {
  font-size: var(--barari-text-fine);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--barari-ink-52);
  margin-block-end: var(--barari-space-2);
}

.barari-account__title {
  font-family: var(--barari-font-display);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 400;
  line-height: var(--barari-leading-tight);
  color: var(--barari-ink);
  margin-block-end: var(--barari-space-5);
}

.barari-account__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--barari-space-2);
  margin-block-end: var(--barari-space-7);
  padding-block-end: var(--barari-space-5);
  border-block-end: 1px solid var(--barari-rule);
}

.barari-account__nav-link {
  font-size: var(--barari-text-meta);
  padding-block: 8px;
  padding-inline: 15px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  color: var(--barari-ink);
  text-decoration: none;
  transition: background var(--barari-duration) var(--barari-ease);
}

.barari-account__nav-link:hover { background: var(--barari-wash); color: var(--barari-ink); }

.barari-account__nav-link[aria-current="page"] {
  background: var(--barari-brown);
  border-color: var(--barari-brown);
  color: var(--barari-ivory);
}

/* Signing out ends the visit rather than opening a section, so it is text
   instead of a chip, pushed to the end of the row (or of its last line once
   the row wraps). */
.barari-account__signout {
  margin-inline-start: auto;
  align-self: center;
  font-size: var(--barari-text-meta);
  padding-block: 8px;
  padding-inline: 4px;
  color: var(--barari-ink-70);
  text-decoration: underline;
  text-decoration-color: var(--barari-rule);
  text-underline-offset: 3px;
  transition: color var(--barari-duration) var(--barari-ease);
}

.barari-account__signout:hover { color: var(--barari-ink); text-decoration-color: currentColor; }

/* A name for a screen reader and none on screen (basket.css's pattern). */
.barari-account__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -- Page head row: count and sort ----------------------------------------- */

.barari-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--barari-space-4);
  flex-wrap: wrap;
  margin-block-end: var(--barari-space-5);
}

.barari-account__count { font-size: var(--barari-text-ui); color: var(--barari-ink-60); }

.barari-account__sort {
  font-family: var(--barari-font-body);
  font-size: var(--barari-text-meta);
  color: var(--barari-ink);
  background: transparent;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  padding-block: 8px;
  padding-inline: 12px;
}

/* -- Status pill (vchip) ---------------------------------------------------- */

.barari-order-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--barari-radius-pill);
  padding-block: 4px;
  padding-inline: 11px;
  font-size: var(--barari-text-fine);
  white-space: nowrap;
}

.barari-order-chip::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}

.barari-order-chip--good { background: var(--barari-cedar-wash); color: var(--barari-cedar); }
.barari-order-chip--hold { background: var(--barari-gold-wash); color: var(--barari-caution); }
.barari-order-chip--bad  { background: rgba(74, 36, 24, .10); color: var(--barari-alarm); }

/* -- Order history ledger --------------------------------------------------- */

.barari-orders { border-block-start: 1px solid var(--barari-rule); }

.barari-orders__row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.4fr) auto auto;
  align-items: center;
  gap: var(--barari-space-4);
  padding-block: var(--barari-space-4);
  padding-inline: var(--barari-space-2);
  border-block-end: 1px solid var(--barari-rule);
  color: var(--barari-ink);
  text-decoration: none;
  transition: background var(--barari-duration) var(--barari-ease);
}

.barari-orders__row:hover { background: var(--barari-wash); color: var(--barari-ink); }

.barari-orders__number { font-weight: 600; font-size: var(--barari-text-body); }

.barari-orders__flags {
  display: inline-flex;
  gap: var(--barari-space-2);
  margin-inline-start: var(--barari-space-2);
  vertical-align: middle;
}

.barari-orders__meta {
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--barari-space-2);
  align-items: baseline;
}

.barari-orders__meta-sep { color: var(--barari-ink-52); }

.barari-orders__total { font-weight: 600; font-size: var(--barari-text-body); text-align: end; }

.barari-orders__go { color: var(--barari-ink-52); font-size: var(--barari-text-ui); }
.barari-orders__go::after { content: "\2192"; }

.barari-orders__due {
  grid-column: 1 / -1;
  font-size: var(--barari-text-meta);
  color: var(--barari-caution);
}

@media (max-width: 700px) {
  .barari-orders__row { grid-template-columns: 1fr auto; }
  .barari-orders__meta { grid-column: 1 / -1; }
  .barari-orders__go { display: none; }
}

/* -- Pagination (Laravel default markup, restyled) -------------------------- */

.barari-account .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--barari-space-1);
  list-style: none;
  padding: 0;
  margin-block: var(--barari-space-6) 0;
}

.barari-account .page-link {
  display: inline-block;
  min-inline-size: 34px;
  text-align: center;
  padding-block: 7px;
  padding-inline: 10px;
  font-size: var(--barari-text-meta);
  color: var(--barari-ink);
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  text-decoration: none;
}

.barari-account .page-item.active .page-link {
  background: var(--barari-brown);
  border-color: var(--barari-brown);
  color: var(--barari-ivory);
}

.barari-account .page-item.disabled .page-link { opacity: .4; pointer-events: none; }

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

.barari-account__empty {
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-card);
  padding-block: var(--barari-space-9);
  padding-inline: var(--barari-space-5);
  text-align: center;
}

.barari-account__empty-lead {
  font-family: var(--barari-font-display);
  font-size: var(--barari-text-section);
  font-weight: 400;
  margin-block-end: var(--barari-space-3);
}

.barari-account__empty-note {
  font-size: var(--barari-text-ui);
  color: var(--barari-ink-60);
  margin-block-end: var(--barari-space-6);
}

/* -- Order detail: head ------------------------------------------------------ */

.barari-order__back {
  display: inline-block;
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  text-decoration: none;
  margin-block-end: var(--barari-space-4);
}

.barari-order__back:hover { color: var(--barari-ink); }
.barari-order__back::before { content: "\2190"; margin-inline-end: 6px; }

.barari-order__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--barari-space-4);
  flex-wrap: wrap;
  margin-block-end: var(--barari-space-2);
}

.barari-order__ident {
  display: flex;
  align-items: center;
  gap: var(--barari-space-3);
  flex-wrap: wrap;
}

.barari-order__placed {
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  margin-block-end: var(--barari-space-6);
}

.barari-order__actions { display: flex; gap: var(--barari-space-2); flex-wrap: wrap; }

.barari-order__actions .barari-btn { padding-block: 9px; padding-inline: 16px; }

.barari-btn--alarm {
  background: transparent;
  color: var(--barari-alarm);
  border: 1px solid rgba(74, 36, 24, .35);
}

/* -- Detail layout: main column + calc aside -------------------------------- */

.barari-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--barari-space-6);
  align-items: start;
}

@media (max-width: 960px) {
  .barari-order { grid-template-columns: 1fr; }
}

.barari-order__panel {
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-card);
  padding-block: var(--barari-space-5);
  padding-inline: var(--barari-space-5);
  margin-block-end: var(--barari-space-5);
  background: var(--barari-surface);
}

.barari-order__panel-title {
  font-size: var(--barari-text-fine);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--barari-ink-52);
  margin-block-end: var(--barari-space-4);
}

/* The detail head reuses the page-title face at row scale. */
.barari-order__number { margin: 0; }

/* A quieter ghost button for per-line actions. */
.barari-btn--line-action { padding-block: 6px; padding-inline: 12px; }

/* -- Timeline ---------------------------------------------------------------- */

.barari-order__timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-block: var(--barari-space-2);
  list-style: none;
  padding: 0;
}

.barari-order__timeline::before {
  content: "";
  position: absolute;
  inset-inline: 14px;
  inset-block-start: 13px;
  block-size: 1px;
  background: var(--barari-rule);
}

.barari-order__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--barari-space-2);
  inline-size: 20%;
  text-align: center;
}

.barari-order__step-dot {
  inline-size: 27px;
  block-size: 27px;
  border-radius: 50%;
  border: 1px solid var(--barari-rule);
  background: var(--barari-surface);
  display: grid;
  place-items: center;
  font-size: var(--barari-text-fine);
  color: var(--barari-ink-52);
  position: relative;
  z-index: 1;
}

.barari-order__step--done .barari-order__step-dot {
  background: var(--barari-cedar);
  border-color: var(--barari-cedar);
  color: var(--barari-ivory);
}

.barari-order__step--now .barari-order__step-dot {
  background: var(--barari-gradient-gold);
  border-color: var(--barari-bronze);
  color: #231409;
}

.barari-order__step-label { font-size: var(--barari-text-fine); color: var(--barari-ink-60); }
.barari-order__step--now .barari-order__step-label { color: var(--barari-ink); font-weight: 600; }

@media (max-width: 640px) {
  .barari-order__step-label { display: none; }
  .barari-order__step--now .barari-order__step-label { display: block; }
}

.barari-order__halt {
  font-size: var(--barari-text-ui);
  color: var(--barari-alarm);
  background: rgba(74, 36, 24, .07);
  border-radius: var(--barari-radius);
  padding-block: var(--barari-space-3);
  padding-inline: var(--barari-space-4);
}

/* -- Fact rows (spec) -------------------------------------------------------- */

.barari-order__spec { inline-size: 100%; border-collapse: collapse; font-size: var(--barari-text-ui); }

.barari-order__spec td {
  padding-block: 10px;
  border-block-end: 1px solid var(--barari-rule);
  vertical-align: top;
}

.barari-order__spec tr:last-child td { border-block-end: 0; }
.barari-order__spec td:first-child { color: var(--barari-ink-52); inline-size: 44%; padding-inline-end: var(--barari-space-3); }
.barari-order__spec td:last-child { text-align: end; font-weight: 500; overflow-wrap: anywhere; }

.barari-order__addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--barari-space-5);
}

.barari-order__address-name { font-weight: 600; font-size: var(--barari-text-ui); margin-block-end: var(--barari-space-1); }
.barari-order__address-body { font-size: var(--barari-text-ui); color: var(--barari-ink-70); line-height: var(--barari-leading-body); }

/* Keep a phone number LTR in either direction: the bidi algorithm otherwise
   moves the leading + (FE-25's trap). Pin the whole element. */
.barari-order__phone { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* -- Item lines --------------------------------------------------------------- */

.barari-order__line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--barari-space-4);
  padding-block: var(--barari-space-4);
  border-block-end: 1px solid var(--barari-rule);
  align-items: center;
}

.barari-order__line:last-child { border-block-end: 0; }

.barari-order__line-img {
  inline-size: 64px;
  block-size: 64px;
  object-fit: cover;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius);
  background: var(--barari-surface-sunken);
}

.barari-order__line-name {
  font-size: var(--barari-text-body);
  font-weight: 600;
  color: var(--barari-ink);
  text-decoration: none;
}

.barari-order__line-name:hover { color: var(--barari-bronze); }

.barari-order__line-attrs {
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  margin-block-start: 2px;
}

.barari-order__line-attrs .barari-order__attr-sep { margin-inline: 6px; color: var(--barari-ink-52); }

.barari-order__line-rate {
  font-size: var(--barari-text-fine);
  color: var(--barari-ink-52);
  margin-block-start: 4px;
}

.barari-order__line-figures { text-align: end; }
.barari-order__line-qty { font-size: var(--barari-text-meta); color: var(--barari-ink-60); }
.barari-order__line-total { font-size: var(--barari-text-body); font-weight: 600; }

.barari-order__line-links {
  grid-column: 2 / -1;
  display: flex;
  gap: var(--barari-space-4);
  font-size: var(--barari-text-meta);
}

.barari-order__line-links a { color: var(--barari-bronze); text-decoration: underline; }

/* -- Totals (calc) ------------------------------------------------------------ */

.barari-order__calc {
  border: 1px solid var(--barari-brown);
  border-radius: 3px;
  background: var(--barari-surface);
  position: sticky;
  inset-block-start: var(--barari-space-5);
}

.barari-order__calc-head {
  background: var(--barari-brown);
  color: var(--barari-ivory);
  padding-block: 11px;
  padding-inline: 18px;
  font-size: var(--barari-text-meta);
  display: flex;
  justify-content: space-between;
  gap: var(--barari-space-3);
}

.barari-order__calc-body { padding-block: var(--barari-space-4); padding-inline: 18px; margin: 0; }

.barari-order__calc-row {
  display: flex;
  justify-content: space-between;
  gap: var(--barari-space-4);
  font-size: var(--barari-text-ui);
  padding-block: 7px;
  color: var(--barari-ink-70);
}

.barari-order__calc-row dt { font-weight: 400; }
.barari-order__calc-row dd { margin: 0; font-weight: 500; color: var(--barari-ink); }

.barari-order__calc-row--total {
  border-block-start: 1px solid var(--barari-rule);
  margin-block-start: var(--barari-space-2);
  padding-block-start: var(--barari-space-3);
  font-size: var(--barari-text-body);
}

.barari-order__calc-row--total dd { font-weight: 700; }

.barari-order__calc-note {
  font-size: var(--barari-text-fine);
  color: var(--barari-ink-52);
  margin-block-start: var(--barari-space-3);
  line-height: var(--barari-leading-body);
}

/* -- Success modal (restyle of the checkout hand-off) ------------------------- */

.barari-account-modal .modal-content {
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-card);
  background: var(--barari-surface);
  font-family: var(--barari-font-body);
}

.barari-account-modal__body { padding: var(--barari-space-7); text-align: center; }

.barari-account-modal__title {
  font-family: var(--barari-font-display);
  font-size: var(--barari-text-section);
  font-weight: 400;
  margin-block-end: var(--barari-space-3);
}

.barari-account-modal__note {
  font-size: var(--barari-text-ui);
  color: var(--barari-ink-70);
  margin-block-end: var(--barari-space-6);
  line-height: var(--barari-leading-body);
}

/* -- Auth: the account's front door (FE-24) -----------------------------------
   Sign-in, registration, the password-reset chain and the OTP screens all
   share this block. Same vocabulary as the rest of the account: eyebrow and
   display title from the shared header classes, the mockup's .field
   (:157-159) as .barari-field, its .two grid (:160) as .barari-auth__two.
   The JS contract is 6valley's and is untouched: form ids, .password-toggle
   (theme.js:154 queries .form-control inside it), .otp-field/.otp-value,
   #inputChecked gating #sign-up, .default-captcha-container. Styling hangs
   on barari-* classes added beside those hooks, never instead of them.    */

.barari-auth { max-width: 620px; }

.barari-auth--wide { max-width: 900px; }

.barari-auth__sub {
  font-size: var(--barari-text-ui);
  color: var(--barari-ink-60);
  line-height: var(--barari-leading-body);
  max-width: 52ch;
  margin-block: calc(-1 * var(--barari-space-3)) var(--barari-space-6);
}

/* The padding is named so a zone inside the panel (.barari-auth__newcomer)
   can run edge to edge at every width. */
.barari-auth__panel {
  --barari-auth-pad-block: var(--barari-space-7);
  --barari-auth-pad-inline: var(--barari-space-7);
  background: var(--barari-surface-field);
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-card);
  padding-block: var(--barari-auth-pad-block);
  padding-inline: var(--barari-auth-pad-inline);
}

@media (max-width: 575px) {
  .barari-auth__panel {
    --barari-auth-pad-block: var(--barari-space-5);
    --barari-auth-pad-inline: var(--barari-space-4);
  }
}

/* The mockup's why-line: one quiet sentence of reasoning under a heading. */
.barari-auth__why {
  font-size: var(--barari-text-ui);
  line-height: 1.75;
  color: var(--barari-ink-60);
  max-width: 58ch;
  margin-block-end: var(--barari-space-6);
}

/* -- Fields (mockup .field) -- */

.barari-field { margin-block-end: var(--barari-space-4); }

.barari-field > label,
.barari-field__label {
  display: block;
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  margin-block-end: 5px;
}

.barari-field input,
.barari-field select {
  width: 100%;
  font-family: var(--barari-font-body);
  font-size: var(--barari-text-ui);
  padding-block: 11px;
  padding-inline: 13px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
}

.barari-field input::placeholder { color: var(--barari-ink-52); }

.barari-field input:focus,
.barari-field select:focus {
  outline: none;
  border-color: var(--barari-bronze);
  box-shadow: 0 0 0 3px var(--barari-gold-wash);
}

.barari-field .invalid-feedback {
  display: none;
  font-size: var(--barari-text-fine);
  color: var(--barari-alarm);
  margin-block-start: 4px;
}

.barari-field:has(:user-invalid) .invalid-feedback { display: block; }

.barari-field__hint {
  display: block;
  font-size: var(--barari-text-fine);
  color: var(--barari-ink-52);
  margin-block-start: 4px;
}

.barari-auth__two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 11px;
}

@media (max-width: 575px) {
  .barari-auth__two { grid-template-columns: 1fr; }
}

/* The show-password control. password-toggle.js flips the input's type from
   the checkbox inside .password-toggle-btn; this places it, gives it a real
   hit area and shows its state. The checkbox itself is invisible, so its
   keyboard focus is drawn on the label around it. */
.barari-field .password-toggle { position: relative; }

.barari-field .password-toggle input { padding-inline-end: 48px; }

.barari-field .password-toggle-btn {
  position: absolute;
  inset-inline-end: 5px;
  inset-block: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 36px;
  padding-inline: 8px;
  margin: 0;
  border-radius: var(--barari-radius-sharp);
  cursor: pointer;
  color: var(--barari-ink-52);
  font-size: 17px;
  transition: background var(--barari-duration) var(--barari-ease), color var(--barari-duration) var(--barari-ease);
}

.barari-field .password-toggle-btn:hover { background: var(--barari-wash); color: var(--barari-ink); }

.barari-field .password-toggle-btn:has(input:checked) { color: var(--barari-bronze); }

.barari-field .password-toggle-btn:has(input:focus-visible) {
  outline: 2px solid var(--barari-bronze);
  outline-offset: 0;
  color: var(--barari-ink);
}

.barari-field .password-toggle-btn input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* -- Row under the sign-in fields: remember me, forgot link -- */

.barari-auth__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--barari-space-2) var(--barari-space-4);
  margin-block-end: var(--barari-space-5);
  font-size: var(--barari-text-meta);
}

.barari-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--barari-ink-70);
  cursor: pointer;
  margin: 0;
  font-size: var(--barari-text-meta);
  line-height: var(--barari-leading-body);
}

.barari-check input[type="checkbox"] {
  inline-size: 15px;
  block-size: 15px;
  flex: 0 0 auto;
  accent-color: var(--barari-bronze);
  margin: 0;
}

.barari-auth__link { color: var(--barari-bronze); text-decoration: underline; }
.barari-auth__link:hover { color: var(--barari-ink); }

/* -- Submit: full-width gold -- */

.barari-auth .barari-btn--submit { display: block; inline-size: 100%; }

/* -- Divider and the social column -- */

.barari-auth__or {
  display: flex;
  align-items: center;
  gap: var(--barari-space-3);
  font-size: var(--barari-text-fine);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--barari-ink-52);
  margin-block: var(--barari-space-6);
}

.barari-auth__or::before,
.barari-auth__or::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--barari-rule);
}

.barari-auth__social { display: grid; gap: var(--barari-space-2); }

.barari-auth__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 11px;
  padding-inline: 16px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
  font-size: var(--barari-text-ui);
  text-decoration: none;
  transition: background var(--barari-duration) var(--barari-ease);
}

.barari-auth__social-btn:hover { background: var(--barari-wash); color: var(--barari-ink); }

.barari-auth__social-btn img { inline-size: 18px; block-size: 18px; object-fit: contain; }

/* -- Foot line: the switch between sign-in and registration -- */

.barari-auth__foot {
  text-align: center;
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  margin-block-start: var(--barari-space-6);
}

/* -- Sign-in: the way in for someone without an account --
   The panel's second zone: returning customers above the rule, new ones in
   the sunken band below it, with the same ghost button the account pages use
   for a secondary action. It runs to the panel's edges through the panel's
   own padding variables. */

.barari-auth__newcomer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--barari-space-3) var(--barari-space-5);
  margin-block: var(--barari-space-7) calc(-1 * var(--barari-auth-pad-block));
  margin-inline: calc(-1 * var(--barari-auth-pad-inline));
  padding-block: var(--barari-space-5);
  padding-inline: var(--barari-auth-pad-inline);
  background: var(--barari-surface-sunken);
  border-block-start: 1px solid var(--barari-rule);
  border-end-start-radius: calc(var(--barari-radius-card) - 1px);
  border-end-end-radius: calc(var(--barari-radius-card) - 1px);
}

.barari-auth__newcomer-title {
  font-size: var(--barari-text-ui);
  font-weight: 500;
  color: var(--barari-ink);
  margin: 0;
}

.barari-auth__newcomer-note {
  font-size: var(--barari-text-meta);
  line-height: var(--barari-leading-body);
  color: var(--barari-ink-60);
  max-width: 44ch;
  margin: 2px 0 0;
}

.barari-auth__newcomer-btn {
  flex: none;
  padding-block: 11px;
  padding-inline: 20px;
  background: var(--barari-surface-field);
  transition: border-color var(--barari-duration) var(--barari-ease);
}

.barari-auth__newcomer-btn:hover { border-color: var(--barari-bronze); color: var(--barari-ink); }

@media (max-width: 575px) {
  .barari-auth__newcomer { flex-direction: column; align-items: stretch; }
  .barari-auth__newcomer-btn { inline-size: 100%; }
}

/* -- Recover password: the three quiet numbered steps -- */

.barari-auth__steps {
  list-style: none;
  margin-block: 0 var(--barari-space-6);
  padding: 0;
  font-size: var(--barari-text-ui);
  color: var(--barari-ink-70);
  counter-reset: barari-auth-step;
}

.barari-auth__steps li {
  counter-increment: barari-auth-step;
  padding-block: 7px;
  border-block-end: 1px solid var(--barari-rule);
  display: flex;
  gap: var(--barari-space-3);
  line-height: var(--barari-leading-body);
}

.barari-auth__steps li:last-child { border-block-end: 0; }

.barari-auth__steps li::before {
  content: counter(barari-auth-step);
  font-size: var(--barari-text-fine);
  color: var(--barari-bronze);
  font-weight: 600;
  min-inline-size: 14px;
  padding-block-start: 3px;
}

/* -- OTP screens -- */

.barari-otp {
  display: flex;
  gap: var(--barari-space-2);
  justify-content: center;
  margin-block: var(--barari-space-5);
}

.barari-otp .otp-field {
  inline-size: 46px;
  block-size: 54px;
  text-align: center;
  font-family: var(--barari-font-body);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
  padding: 0;
}

.barari-otp .otp-field:focus { outline: none; border-color: var(--barari-bronze); }

@media (max-width: 400px) {
  .barari-otp { gap: 6px; }
  .barari-otp .otp-field { inline-size: 40px; block-size: 48px; font-size: 18px; }
}

.barari-auth__sent {
  text-align: center;
  font-size: var(--barari-text-ui);
  color: var(--barari-ink-70);
  line-height: var(--barari-leading-body);
  max-width: 40ch;
  margin-inline: auto;
}

.barari-auth__timer {
  text-align: center;
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  margin-block-start: var(--barari-space-3);
}

.barari-auth__timer .verifyCounter { font-variant-numeric: tabular-nums; color: var(--barari-ink); font-weight: 600; }

.barari-auth__resend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--barari-space-2);
  margin-block-start: var(--barari-space-4);
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
}

.barari-auth__resend {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--barari-text-meta);
  color: var(--barari-bronze);
  text-decoration: underline;
  cursor: pointer;
}

.barari-auth__resend:hover { color: var(--barari-ink); }

/* Verification landed: the cedar tick and a hand back to sign-in. */
.barari-auth__done { text-align: center; padding-block: var(--barari-space-5); }

.barari-auth__done-mark {
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  background: var(--barari-cedar-wash);
  color: var(--barari-cedar);
  font-size: 24px;
  line-height: 52px;
  margin-inline: auto;
  margin-block-end: var(--barari-space-4);
}

.barari-auth__done-title {
  font-family: var(--barari-font-display);
  font-size: var(--barari-text-section);
  font-weight: 400;
  margin-block-end: var(--barari-space-2);
}

.barari-auth__done-note { font-size: var(--barari-text-ui); color: var(--barari-ink-60); margin-block-end: var(--barari-space-5); }

/* -- Third-party widgets inside the panel -- */

/* intl-tel-input wraps the phone input; without this the input shrinks. */
.barari-auth .iti { inline-size: 100%; }

/* The default (non-Google) captcha paints an image + an input into this
   container (sign-up and the password reset; sign-in has none). The vendor
   sheet (google-recaptcha-init.css) also borders the container, fixes it at
   50px and caps it at 500px, so the input's own border used to sit inside a
   second one that stopped short of the panel. The container is stripped back
   to a plain wrapper here and the input carries the only border, with the
   image set inside its end like the eye on a password field. */
.barari-auth .default-captcha-container {
  border: 0;
  border-radius: 0;
  block-size: auto;
  max-width: none;
  overflow: visible;
  margin-block: 0 var(--barari-space-4);
  margin-inline: 0;
}

.barari-auth .default-captcha-container input {
  width: 100%;
  block-size: auto;
  font-family: var(--barari-font-body);
  font-size: var(--barari-text-ui);
  padding-block: 11px;
  padding-inline: 13px 156px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
}

.barari-auth .default-captcha-container input:focus {
  outline: none;
  border-color: var(--barari-bronze);
  box-shadow: 0 0 0 3px var(--barari-gold-wash);
}

.barari-auth .default-captcha-container .captcha-image-container {
  inset-block: 5px;
  inset-inline-end: 5px;
  block-size: auto;
  background: var(--barari-surface-sunken);
  border-radius: var(--barari-radius-sharp);
}

.barari-auth .default-captcha-container .captcha-image-container img {
  block-size: 100%;
  border-inline-end-color: var(--barari-rule);
}

.barari-auth .default-captcha-container .refresh-icon { min-block-size: 0; block-size: 100%; }

.barari-auth .default-captcha-container .refresh-icon path { fill: var(--barari-ink-70); }

/* -- Profile (GET /user-account) ----------------------------------------------
   The order detail's arrangement turned to a form: the fields in the main
   column, who the account belongs to and the way out of it in the 360px
   aside. Panels are .barari-order__panel, fields are .barari-field in the
   auth pages' .barari-auth__two grid and the contact states are the order
   status pill — only the arrangement and the photo are new here.

   The form itself is the grid, because the photo input has to stay inside
   #profile_form for form-advance-validation.js to see it. Source order is
   identity, fields, delete — the order a phone shows them in; the areas
   move the fields to the leading column once there is room for two.       */

.barari-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "main identity"
    "main danger";
  column-gap: var(--barari-space-6);
  align-items: start;
}

.barari-profile__identity { grid-area: identity; }
.barari-profile__main { grid-area: main; }
.barari-profile__danger { grid-area: danger; }

@media (max-width: 960px) {
  .barari-profile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "identity"
      "main"
      "danger";
  }
}

.barari-profile__identity {
  display: flex;
  align-items: center;
  gap: var(--barari-space-4);
}

.barari-profile__photo {
  flex: 0 0 auto;
  inline-size: 72px;
  block-size: 72px;
  object-fit: cover;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius);
  background: var(--barari-surface-sunken);
}

.barari-profile__who { min-inline-size: 0; }

.barari-profile__name {
  font-size: var(--barari-text-body);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.barari-profile__contact {
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  overflow-wrap: anywhere;
}

/* The label is the control: the file input inside it is clipped, not hidden,
   so the ring has to be drawn on the label when the input takes focus. */
.barari-profile__photo-change {
  position: relative;
  display: inline-block;
  margin-block-start: var(--barari-space-2);
  font-size: var(--barari-text-meta);
  cursor: pointer;
}

.barari-profile__photo-change:focus-within {
  outline: 2px solid var(--barari-bronze);
  outline-offset: 3px;
}

.barari-profile__note {
  font-size: var(--barari-text-ui);
  color: var(--barari-ink-60);
  line-height: var(--barari-leading-body);
  max-width: 58ch;
  margin-block-end: var(--barari-space-4);
}

/* Tighter than on an order row, so a label that carries a pill is no taller
   than the one beside it and the two inputs in the row stay level. */
.barari-profile .barari-field .barari-order-chip {
  margin-inline-start: var(--barari-space-2);
  padding-block: 2px;
  line-height: 1.2;
  vertical-align: middle;
}

/* A verified phone is shown but cannot be edited. */
.barari-profile .barari-field input:disabled {
  background: var(--barari-surface-sunken);
  color: var(--barari-ink-60);
  cursor: not-allowed;
}

/* intl-tel-input wraps the phone input; without this the input shrinks. */
.barari-profile .iti { inline-size: 100%; }

/* custom.js:421 writes the password-match verdict into #message with an
   inline colour — red, green or black. Map those onto the house palette;
   !important is the only way past an inline style. */
.barari-profile__match[style*="red"] { color: var(--barari-alarm) !important; }
.barari-profile__match[style*="green"] { color: var(--barari-cedar) !important; }
.barari-profile__match[style*="black"] { color: var(--barari-ink-60) !important; }

.barari-profile__actions {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--barari-space-5);
}

.barari-profile__danger .barari-btn { padding-block: 9px; padding-inline: 16px; }

@media (max-width: 575px) {
  .barari-profile__actions .barari-btn { inline-size: 100%; }
}

/* -- Fields the auth pages never needed ----------------------------------------
   .barari-field styles input and select; the address and ticket forms add a
   textarea, which takes the same box. The one-of-a-few choices (address
   type, shipping or billing) are radios wearing the nav strip's chip: a
   hairline box that turns brown when it is the one. The radio stays in the
   label, clipped over its chip, so the keyboard and the form both still
   have it.                                                                 */

.barari-field textarea {
  display: block;
  width: 100%;
  font-family: var(--barari-font-body);
  font-size: var(--barari-text-ui);
  line-height: var(--barari-leading-body);
  padding-block: 11px;
  padding-inline: 13px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
  resize: vertical;
  min-block-size: 74px;
}

.barari-field textarea::placeholder { color: var(--barari-ink-52); }

.barari-field textarea:focus {
  outline: none;
  border-color: var(--barari-bronze);
}

.barari-choice {
  border: 0;
  min-inline-size: 0;
  margin-block-end: var(--barari-space-4);
}

.barari-choice legend {
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  margin-block-end: 5px;
}

.barari-choice__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--barari-space-2);
}

.barari-choice__opt {
  position: relative;
  cursor: pointer;
}

.barari-choice__opt input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.barari-choice__opt span {
  display: block;
  font-size: var(--barari-text-ui);
  padding-block: 11px;
  padding-inline: 16px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
  transition: background var(--barari-duration) var(--barari-ease);
}

.barari-choice__opt:hover span { background: var(--barari-wash); }

.barari-choice__opt input:checked + span {
  background: var(--barari-brown);
  border-color: var(--barari-brown);
  color: var(--barari-ivory);
}

.barari-choice__opt input:focus-visible + span {
  outline: 2px solid var(--barari-bronze);
  outline-offset: 3px;
}

/* -- Address book (GET /account-address, /account-address-edit/{id}) ----------
   One panel per saved address, then the form. Both pages draw the form
   from partials/_address-form: fields in the leading column and, when the
   shop has a Maps key, the map filling the column beside them.             */

.barari-addresses__add { padding-block: 9px; padding-inline: 16px; }

.barari-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--barari-space-5);
  margin-block-end: var(--barari-space-7);
}

.barari-addresses__card {
  display: flex;
  flex-direction: column;
  margin-block-end: 0;
}

.barari-addresses__sep { color: var(--barari-ink-52); margin-inline: 4px; }

/* The actions sit on the panel's floor however long the address above is. */
.barari-addresses__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--barari-space-2);
  margin-block-start: auto;
  padding-block-start: var(--barari-space-4);
}

.barari-addresses__empty { margin-block-end: var(--barari-space-7); }
.barari-addresses__empty .barari-account__empty-note { margin-block-end: 0; }

/* A little air above the panel when the head button jumps to it. */
.barari-address-form { scroll-margin-block-start: var(--barari-space-6); }

.barari-address-form__body--map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
  gap: var(--barari-space-6);
}

@media (max-width: 960px) {
  .barari-address-form__body--map { grid-template-columns: minmax(0, 1fr); }
}

.barari-address-form__map {
  display: flex;
  flex-direction: column;
  gap: var(--barari-space-2);
  min-block-size: 280px;
  margin-block-end: var(--barari-space-4);
  border: 1px solid transparent;
  border-radius: var(--barari-radius);
}

.barari-address-form__map .location-search-input-field {
  inline-size: 100%;
  font-family: var(--barari-font-body);
  font-size: var(--barari-text-ui);
  padding-block: 11px;
  padding-inline: 13px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
}

.barari-address-form__map #location_map_canvas {
  flex: 1;
  min-block-size: 220px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius);
  background: var(--barari-surface-sunken);
}

/* The map script flags an address outside the delivery countries with
   6valley's class names from the deleted cascade; keep the contract. */
.barari-address-form .map-area-alert-danger { border-color: var(--barari-alarm); }
.barari-address-form .map-address-alert { color: var(--barari-caution); }
.barari-address-form .opacity-0 { opacity: 0; }
.barari-address-form .opacity-100 { opacity: 1; }

/* intl-tel-input wraps the phone input; without this the input shrinks. */
.barari-address-form .iti { inline-size: 100%; }

.barari-address-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--barari-space-3);
  flex-wrap: wrap;
}

@media (max-width: 575px) {
  .barari-address-form__actions .barari-btn { flex: 1 1 auto; }
}

/* -- Support (GET /account-tickets, /support-ticket/{id}) ----------------------
   The list is the order ledger with one difference: a row holds a link and
   a delete button, so the link is stretched over the row from the subject
   and the button is lifted above it. The ticket page is the order detail's
   frame around a thread — the customer's messages on the trailing side in
   brown, the shop's on the leading side on the sunken ground.              */

.barari-tickets__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--barari-space-4);
  padding-block: var(--barari-space-4);
  padding-inline: var(--barari-space-2);
  border-block-end: 1px solid var(--barari-rule);
  transition: background var(--barari-duration) var(--barari-ease);
}

.barari-tickets__row:hover { background: var(--barari-wash); }

.barari-tickets__subject {
  font-size: var(--barari-text-body);
  font-weight: 600;
  color: var(--barari-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.barari-tickets__subject::after {
  content: "";
  position: absolute;
  inset: 0;
}

.barari-tickets__what .barari-orders__meta { margin-block-start: var(--barari-space-1); }

.barari-tickets__delete {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding-block: 4px;
  padding-inline: 6px;
  font-size: var(--barari-text-meta);
  color: var(--barari-alarm);
  text-decoration: underline;
  cursor: pointer;
}

.barari-tickets__delete:hover { color: var(--barari-ink); }

.barari-tickets__empty-note { margin-block-end: 0; }

.barari-tickets__submit { display: block; inline-size: 100%; margin-block-start: var(--barari-space-5); }

/* Attachments. account-ticket.blade.js and ticket-view.js write the chosen
   images into .filearray as .upload_img_box thumbnails, each with an
   .img-clear button; the sizes came from the deleted theme CSS. */
.barari-attach .barari-field__label { margin-block-end: var(--barari-space-2); }

.barari-attach__row,
.barari-attach .filearray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--barari-space-2);
}

/* Neither holder may cost a gap while it has nothing to show: the first is
   empty until an image is chosen, the second only ever holds the hidden
   image[n] inputs, which post from an undisplayed box all the same. */
.barari-attach .filearray:empty,
.barari-attach .selected-files-container,
.barari-attach #selected-files-container { display: none; }

.barari-attach .upload_img_box {
  position: relative;
  inline-size: 64px;
  block-size: 64px;
}

.barari-attach .upload_img_box img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius);
  background: var(--barari-surface-sunken);
}

.barari-attach .img-clear {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  inline-size: 20px;
  block-size: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--barari-brown);
  color: var(--barari-ivory);
  font-size: 11px;
  cursor: pointer;
}

.barari-attach__add {
  position: relative;
  display: inline-block;
  font-size: var(--barari-text-meta);
  padding-block: 8px;
  padding-inline: 14px;
  border: 1px dashed var(--barari-ink-52);
  border-radius: var(--barari-radius-sharp);
  color: var(--barari-ink);
  cursor: pointer;
}

.barari-attach__add:hover { background: var(--barari-wash); }

.barari-attach__add:focus-within {
  outline: 2px solid var(--barari-bronze);
  outline-offset: 3px;
}

.barari-thread {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--barari-space-5);
}

.barari-thread__msg {
  align-self: flex-start;
  max-inline-size: min(78%, 62ch);
}

.barari-thread__msg--mine { align-self: flex-end; }

.barari-thread__who {
  font-size: var(--barari-text-fine);
  color: var(--barari-ink-52);
  margin-block-end: var(--barari-space-1);
}

.barari-thread__msg--mine .barari-thread__who { text-align: end; }

.barari-thread__text {
  font-size: var(--barari-text-ui);
  line-height: var(--barari-leading-body);
  padding-block: var(--barari-space-3);
  padding-inline: var(--barari-space-4);
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-card);
  background: var(--barari-surface-sunken);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.barari-thread__msg--mine .barari-thread__text {
  background: var(--barari-brown);
  border-color: var(--barari-brown);
  color: var(--barari-ivory);
}

.barari-thread__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--barari-space-2);
  margin-block-start: var(--barari-space-2);
}

.barari-thread__msg--mine .barari-thread__files { justify-content: flex-end; }

.barari-thread__files img {
  inline-size: 72px;
  block-size: 72px;
  object-fit: cover;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius);
  background: var(--barari-surface-sunken);
}

.barari-thread__send {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--barari-space-4);
}

@media (max-width: 575px) {
  .barari-thread__msg { max-inline-size: 92%; }
  .barari-thread__send .barari-btn { inline-size: 100%; }
}

/* -- RTL pairs: the closed list only ------------------------------------------ */

[dir="rtl"] .barari-account__eyebrow,
[dir="rtl"] .barari-order__panel-title { letter-spacing: 0; }

[dir="rtl"] .barari-orders__go::after { content: "\2190"; }
[dir="rtl"] .barari-order__back::before { content: "\2192"; }

[dir="rtl"] .barari-auth__or { letter-spacing: 0; }