/* ==========================================================================
   Barari Gold — layout shell
   FE-04 · the site header and the site footer
   --------------------------------------------------------------------------
   Design source: _handoff/barari-gold-website.html, the `.nav` rule at the
   top of its style block and the six screens that use it. The deck has no
   footer on any screen, so the footer here is built from the same tokens
   rather than copied from a design.

   Served verbatim from public/assets/barari/. No build step. Linked in
   layouts/front-end/app.blade.php after barari.css (tokens) and base.css
   (document base).

   RTL — follows the FE-38 convention set out at the head of barari.css:
   logical properties throughout, and a paired [dir="rtl"] rule only for the
   closed list of things logical properties cannot express. Two such pairs
   appear here: the language toggle's font, marked where it appears, and the
   footer heading's tracking, at the foot of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.barari-header {
  position:relative;
  z-index:30;
  background:var(--barari-brown);
  color:var(--barari-ink-on-dark);
  font-family:var(--barari-font-body);
}

.barari-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--barari-space-6);
  padding-block:var(--barari-space-5);
  padding-inline:var(--barari-gutter);
  max-width:var(--barari-measure);
  margin-inline:auto;
}

.barari-nav__brand {
  display:block;
  flex:none;
  line-height:0;
}

.barari-nav__brand img {
  height:24px;
  width:auto;
  display:block;
}

/* Links ------------------------------------------------------------------- */

.barari-nav__links {
  display:flex;
  align-items:center;
  gap:var(--barari-space-7);
  font-size:var(--barari-text-ui);
  min-width:0;
}

.barari-nav__link {
  color:var(--barari-ink-on-dark-72);
  text-decoration:none;
  white-space:nowrap;
  padding-block-end:3px;
  transition:color var(--barari-duration) var(--barari-ease);
}

.barari-nav__link:hover,
.barari-nav__link:focus-visible {
  color:var(--barari-ink-on-dark);
}

/* The underline is a y-offset inset shadow, so it is direction-neutral and
   needs no [dir="rtl"] counterpart. */
.barari-nav__link.is-active {
  color:var(--barari-ink-on-dark);
  box-shadow:inset 0 -1px 0 var(--barari-gold);
}

/* Right-hand cluster ------------------------------------------------------ */

.barari-nav__actions {
  display:flex;
  align-items:center;
  gap:var(--barari-space-4);
  font-size:var(--barari-text-meta);
  color:var(--barari-ink-on-dark-72);
  flex:none;
}

.barari-nav__action {
  color:inherit;
  text-decoration:none;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:color var(--barari-duration) var(--barari-ease);
}

.barari-nav__action:hover,
.barari-nav__action:focus-visible {
  color:var(--barari-ink-on-dark);
}

.barari-nav__lang {
  font-family:var(--barari-arabic);
}

[dir="rtl"] .barari-nav__lang {
  font-family:var(--barari-sans);
}

.barari-nav__account {
  display:inline-flex;
  align-items:center;
  gap:var(--barari-space-2);
}

/* Cart pill --------------------------------------------------------------- */

.barari-nav__cart {
  display:inline-flex;
  align-items:center;
  gap:var(--barari-space-2);
  background:rgba(241,241,237,.1);
  border:1px solid rgba(241,241,237,.22);
  border-radius:var(--barari-radius-pill);
  padding-block:6px;
  padding-inline:14px;
  color:var(--barari-ink-on-dark);
  text-decoration:none;
  font-size:var(--barari-text-meta);
  white-space:nowrap;
  transition:background var(--barari-duration) var(--barari-ease);
}

.barari-nav__cart:hover,
.barari-nav__cart:focus-visible {
  background:rgba(241,241,237,.18);
  color:var(--barari-ink-on-dark);
}

.barari-nav__cart-sep {
  color:var(--barari-ink-on-dark-50);
}

/* Verification chip — markup is FE-17; the rule lives here because it sits
   inside the nav cluster and shares its metrics. */
.barari-nav__chip {
  display:inline-flex;
  align-items:center;
  gap:var(--barari-space-2);
  background:var(--barari-glacier-wash);
  color:var(--barari-glacier);
  border-radius:var(--barari-radius-pill);
  padding-block:5px;
  padding-inline:12px;
  font-size:var(--barari-text-fine);
}

.barari-nav__chip--warn {
  background:var(--barari-gold-wash);
  color:#E3B98D;
}

.barari-nav__chip-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex:none;
}

/* Pending wears neither the glacier (it is not an approval) nor the warn
   amber (nothing is being asked of the customer) — a quiet ivory wash
   that reads as "in hand". The dot inherits the muted colour with it. */
.barari-nav__chip--pending {
  background:rgba(241,241,237,.12);
  color:var(--barari-ink-on-dark-50);
}

/* The chip is a link to the verification page. Hover keeps the state
   colour — a ring, not a colour change, so warn never stops looking
   like warn. Symmetric, so no RTL pair is needed. */
a.barari-nav__chip {
  text-decoration:none;
}

a.barari-nav__chip:hover,
a.barari-nav__chip:focus-visible {
  box-shadow:inset 0 0 0 1px currentColor;
}

/* Narrow viewports --------------------------------------------------------
   The design deck has no mobile screen, so nothing is invented here: the bar
   keeps its structure and the link row scrolls rather than collapsing behind
   a toggle. No JavaScript, no Bootstrap collapse. */

@media (max-width:900px) {
  .barari-nav {
    flex-wrap:wrap;
    gap:var(--barari-space-3);
    padding-inline:var(--barari-space-5);
    padding-block:var(--barari-space-4);
  }

  .barari-nav__links {
    order:3;
    width:100%;
    gap:var(--barari-space-5);
    overflow-x:auto;
    scrollbar-width:none;
    padding-block-start:var(--barari-space-1);
  }

  .barari-nav__links::-webkit-scrollbar {
    display:none;
  }

  .barari-nav__actions {
    gap:var(--barari-space-3);
    margin-inline-start:auto;
  }
}

/* --------------------------------------------------------------------------
   Footer
   No design source. Built from the same tokens as the header so the two
   bookend the page.
   -------------------------------------------------------------------------- */

.barari-footer {
  background:var(--barari-brown);
  color:var(--barari-ink-on-dark-72);
  font-family:var(--barari-font-body);
  font-size:var(--barari-text-meta);
  margin-block-start:auto;
}

.barari-footer__in {
  max-width:var(--barari-measure);
  margin-inline:auto;
  padding-block:var(--barari-space-9) var(--barari-space-6);
  padding-inline:var(--barari-gutter);
}

.barari-footer__brand {
  display:block;
  line-height:0;
  margin-block-end:var(--barari-space-8);
}

.barari-footer__brand img {
  height:26px;
  width:auto;
  display:block;
}

.barari-footer__cols {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--barari-space-8);
  align-items:start;
}

.barari-footer__col h2 {
  font-family:var(--barari-font-body);
  font-size:var(--barari-text-fine);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--barari-ink-on-dark);
  margin-block-end:var(--barari-space-4);
}

.barari-footer__list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--barari-space-3);
}

.barari-footer__link {
  color:var(--barari-ink-on-dark-72);
  text-decoration:none;
  transition:color var(--barari-duration) var(--barari-ease);
}

.barari-footer__link:hover,
.barari-footer__link:focus-visible {
  color:var(--barari-ink-on-dark);
}

.barari-footer__contact {
  display:grid;
  gap:var(--barari-space-3);
  font-style:normal;
  line-height:var(--barari-leading-body);
}

.barari-footer__rule {
  border:0;
  border-block-start:1px solid var(--barari-rule-dark);
  margin-block:var(--barari-space-8) var(--barari-space-5);
}

.barari-footer__legal {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--barari-space-3);
  font-size:var(--barari-text-fine);
  color:var(--barari-ink-on-dark-50);
}

@media (max-width:900px) {
  .barari-footer__in {
    padding-inline:var(--barari-space-5);
    padding-block:var(--barari-space-8) var(--barari-space-5);
  }

  .barari-footer__cols {
    gap:var(--barari-space-6);
  }
}

/* --------------------------------------------------------------------------
   Page frame
   The shell is a column so a short page still pushes the footer to the
   bottom. base.css sets the document background; this only arranges it.
   -------------------------------------------------------------------------- */

.barari-shell {
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.barari-shell > main {
  flex:1 0 auto;
}

/* --------------------------------------------------------------------------
   Floating WhatsApp widget
   Kept because an admin enables it in business settings — it is configured
   behaviour, not decoration, so FE-04 did not delete it with the rest of the
   6valley chrome. Its original styling came from theme.css, which FE-02
   removed, so it needs enough of its own to sit correctly.
   -------------------------------------------------------------------------- */

.barari-floating {
  position:fixed;
  inset-block-end:24px;
  inset-inline-end:24px;
  z-index:40;
}

.barari-floating__btn a {
  display:block;
  line-height:0;
}

.barari-floating__btn img {
  width:46px;
  height:46px;
  display:block;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(12,6,2,.28);
}

.barari-floating:empty,
.barari-floating__btn:empty {
  display:none;
}

/* --------------------------------------------------------------------------
   Push-notification toasts (_alert-message.blade.php)
   --------------------------------------------------------------------------
   The shell ships this markup on every page as an EMPTY skeleton: the
   firebase restock handler (custom.js:2662 productRestockStockLimitStatus)
   fills .title/.message/.image and adds `active` to the .alert, then a
   timeout or the close button removes it. The old theme CSS collapsed the
   skeleton (custom.css:1444-1467); FE-02 removed that sheet, which left a
   bare "Click to view" strip at the top of every page. Same contract,
   logical properties, house skin.
   -------------------------------------------------------------------------- */

.alert--container {
  position:fixed;
  inset-inline-end:20px;
  inset-block-start:80px;
  z-index:9999;
  width:80vw;
  max-width:330px;
}

.alert--container:not(.active) {
  opacity:0;
  visibility:hidden;
}

.alert--container .alert:not(.active) { display:none; }

/* The toast itself, for when a push does land. */
.alert--container .alert {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-block-end:10px;
  padding:14px;
  background:var(--barari-surface-field);
  border:1px solid var(--barari-rule);
  border-radius:var(--barari-radius-card);
  box-shadow:0 6px 18px rgba(12,6,2,.28);
  font-family:var(--barari-font-body);
  font-size:var(--barari-text-ui);
  color:var(--barari-ink);
}

.alert--container .alert .title { font-size:var(--barari-text-ui); font-weight:600; margin:0 0 2px; }
.alert--container .alert .message { font-size:var(--barari-text-meta); color:var(--barari-ink-70); }

.alert--container .alert .product-link {
  font-size:var(--barari-text-meta);
  color:var(--barari-bronze);
  text-decoration:underline;
}

.alert--container .alert .close {
  background:none;
  border:0;
  padding:0;
  font-size:16px;
  line-height:1;
  color:var(--barari-ink-52);
  cursor:pointer;
}

/* --------------------------------------------------------------------------
   RTL — the paired rule this file needs
   --------------------------------------------------------------------------
   Everything positional above is a logical property and flips on its own.
   Tracking does not: Arabic is a joined script, so letter-spacing breaks the
   connecting strokes and a tracked column heading reads as isolated letters.
   Same pair, same reason, as error.css:227 and rate.css.
   -------------------------------------------------------------------------- */

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