/* ==========================================================================
   Barari Gold — the bullion listing
   FE-09 · catbar, weight chips, paginator
   --------------------------------------------------------------------------
   Design source: _handoff/barari-gold-website.html — `.catbar`, `.wchips` and
   `.chip` at :100-105, and the screen they sit in at :298-316.

   Markup: resources/themes/default/web-views/products/view.blade.php.
   Served verbatim from public/assets/barari/. No build step. Pushed onto the
   `barari_css` stack, which renders after the shared Barari block, so a rule
   here wins a specificity tie against the layer it extends — FE-06's note.

   The grid and the cards inside it are card.css (.barari-cardgrid), not this
   file: the card and the hairline between cards are one design object and
   every surface shares them. This file is only what wraps that grid.

   RTL — the FE-38 convention at the head of barari.css: logical properties
   throughout. Nothing here needs a [dir="rtl"] pair. The catbar and the chip
   row are flex, which mirrors itself; every inset is padding-inline or
   padding-block; there is no gradient, no transform and no x-offset shadow.
   The one thing that would need a pair is letter-spacing, which breaks Arabic
   because it is a joined script — so no rule in this file sets it. Figures are
   isolated in <bdi> in the markup: the count reads "11 bars" and a bare number
   at the start of an Arabic run is the neutral-character reordering trap FE-25
   hit on the maintenance phone number.
   ========================================================================== */

.barari-listing {
  background:var(--barari-surface);
  color:var(--barari-ink);
  font-family:var(--barari-font-body);
}

/* --------------------------------------------------------------------------
   Catbar — the title and the count
   -------------------------------------------------------------------------- */

.barari-catbar {
  max-width:calc(var(--barari-measure) + 2 * var(--barari-gutter));
  margin-inline:auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--barari-space-5);
  padding-block:var(--barari-space-7) 0;
  padding-inline:var(--barari-gutter);
}

.barari-catbar__title {
  margin:0;
  font-family:var(--barari-font-display);
  font-size:var(--barari-text-section);
  font-weight:400;
  line-height:var(--barari-leading-tight);
}

.barari-catbar__count {
  margin:0;
  font-size:var(--barari-text-meta);
  color:var(--barari-ink-52);
}

/* --------------------------------------------------------------------------
   Weight chips — the only control on this screen
   -------------------------------------------------------------------------- */

.barari-wchips {
  max-width:calc(var(--barari-measure) + 2 * var(--barari-gutter));
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding-block:18px var(--barari-space-6);
  padding-inline:var(--barari-gutter);
}

.barari-chip {
  display:inline-block;
  border:1px solid var(--barari-rule);
  border-radius:2px;
  background:transparent;
  padding-block:8px;
  padding-inline:15px;
  font-family:var(--barari-font-body);
  font-size:var(--barari-text-meta);
  line-height:1.15;
  color:var(--barari-brown);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

.barari-chip:hover {
  border-color:var(--barari-brown);
  color:var(--barari-brown);
  text-decoration:none;
}

.barari-chip:focus-visible {
  outline:2px solid var(--barari-gold);
  outline-offset:2px;
}

/* The selected weight. aria-current carries the state rather than a class:
   the chips are links, one of which is the page the reader is on, and that is
   exactly what aria-current means. listing.js moves the attribute, so the
   styling and the accessibility name can never drift apart. */
.barari-chip[aria-current] {
  background:var(--barari-brown);
  border-color:var(--barari-brown);
  color:var(--barari-ivory);
}

@media (prefers-reduced-motion:reduce) {
  .barari-chip { transition:none; }
}

/* --------------------------------------------------------------------------
   Hidden cards, and the message that replaces them
   --------------------------------------------------------------------------
   .barari-card sets display:flex, which beats the user agent's [hidden] rule
   on specificity, so a card hidden by listing.js needs this to actually go. */

.barari-card[hidden] { display:none; }

/* Same reason one level up: .barari-cardgrid sets display:grid, so the whole
   grid needs this to disappear when a weight matches nothing on the page —
   otherwise its border and hairline background stay behind as an empty band. */
.barari-cardgrid[hidden] { display:none; }

/* On the listing the grid sits on the shared measure like the catbar and the
   chips above it; the card itself stays full-bleed inside its cell. */
.barari-listing .barari-cardgrid {
  max-width:var(--barari-measure);
  margin-inline:auto;
}

.barari-listing__none {
  max-width:calc(var(--barari-measure) + 2 * var(--barari-gutter));
  margin-inline:auto;
  margin:0;
  border-block-start:1px solid var(--barari-rule);
  padding-block:var(--barari-space-10);
  padding-inline:var(--barari-gutter);
  text-align:center;
  font-size:var(--barari-text-body);
  color:var(--barari-ink-60);
}

.barari-listing__none[hidden] { display:none; }

/* --------------------------------------------------------------------------
   Paginator
   --------------------------------------------------------------------------
   Laravel emits Bootstrap 4 pagination markup here — AppServiceProvider:98
   calls Paginator::useBootstrap() — and FE-02 removed the Bootstrap that used
   to style it. These rules dress that markup directly rather than replacing
   the paginator view, which is a vendor file.

   Its chevrons are punctuation, so the bidi algorithm mirrors them in Arabic
   on its own; nothing here needs to flip them. */

.barari-pager {
  max-width:calc(var(--barari-measure) + 2 * var(--barari-gutter));
  margin-inline:auto;
  display:flex;
  justify-content:center;
  padding-block:var(--barari-space-7);
  padding-inline:var(--barari-gutter);
}

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

.barari-pager .page-link {
  display:block;
  border:1px solid var(--barari-rule);
  border-radius:2px;
  padding-block:8px;
  padding-inline:13px;
  font-size:var(--barari-text-meta);
  line-height:1.15;
  color:var(--barari-brown);
  text-decoration:none;
}

.barari-pager .page-link:hover { border-color:var(--barari-brown); }

.barari-pager .page-link:focus-visible {
  outline:2px solid var(--barari-gold);
  outline-offset:2px;
}

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

.barari-pager .page-item.disabled .page-link {
  color:var(--barari-ink-52);
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

@media (max-width:760px) {
  .barari-catbar {
    padding-block:var(--barari-space-6) 0;
    padding-inline:var(--barari-space-6);
  }

  .barari-catbar__title { font-size:26px; }

  .barari-wchips {
    padding-block:var(--barari-space-4) var(--barari-space-5);
    padding-inline:var(--barari-space-6);
  }

  .barari-listing__none {
    padding-block:var(--barari-space-9);
    padding-inline:var(--barari-space-6);
  }

  .barari-pager {
    padding-block:var(--barari-space-6);
    padding-inline:var(--barari-space-6);
  }
}