/*
 * Fiyobra brand layer — retones the Toner/Bootstrap theme to the brand
 * guidelines (documents/brand-guidelines.html): Jost typeface, a single rose
 * accent (#e11d48), near-black surfaces, and a neutral gray scale.
 * Loaded AFTER the theme CSS so these tokens/overrides win.
 */

:root {
  /* Brand tokens */
  --fi-rose: #e11d48;
  --fi-rose-hover: #be123c;
  --fi-rose-active: #9f1239;
  --fi-rose-light: #fb7185;
  --fi-dark: #111111;
  --fi-heading: #1a1a1a;
  --fi-text: #555555;
  /* Contrast (roadmap Phase 9, WCAG 1.4.3). These two were #888888 (3.54:1)
   * and #aaaaaa (2.32:1) on white — both below the 4.5:1 minimum for body
   * text, and --fi-muted was carrying every field label in the admin panel.
   * Darkened to the lightest greys that clear 4.5:1 on white AND on the
   * #f4f5f9 admin canvas, so the visual hierarchy survives the fix. */
  --fi-sub: #6b6b6b;      /* 5.30:1 on #ffffff, 5.02:1 on #f4f5f9 */
  --fi-muted: #767676;    /* 4.54:1 on #ffffff, 4.30:1 on #f4f5f9 — see below */
  --fi-border: #e8e8e8;
  --fi-off: #fafafa;

  /* Bootstrap primary → rose */
  --bs-primary: #e11d48;
  --bs-primary-rgb: 225, 29, 72;
  --bs-primary-text-emphasis: #9f1239;
  --bs-primary-bg-subtle: #fde4e9;
  --bs-primary-border-subtle: #f9c9d3;

  /* Info → neutral (brand uses one accent only, no blue) */
  --bs-info: #555555;
  --bs-info-rgb: 85, 85, 85;
  --bs-info-text-emphasis: #1a1a1a;
  --bs-info-bg-subtle: #f0f0f0;
  --bs-info-border-subtle: #e2e2e2;

  /* Links */
  --bs-link-color: #e11d48;
  --bs-link-color-rgb: 225, 29, 72;
  --bs-link-hover-color: #9f1239;
  --bs-link-hover-color-rgb: 159, 18, 57;

  /* Typography + base colours */
  --bs-body-font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-weight: 300;
  --bs-body-color: #555555;
  --bs-body-color-rgb: 85, 85, 85;
  --bs-emphasis-color: #1a1a1a;
  --bs-heading-color: #1a1a1a;

  /* The Toner Bootstrap build is compiled with the `tb` variable prefix, so
   * every token above must also exist as --tb-* or the theme keeps its stock
   * blue for buttons, badges, links and text utilities. */
  --tb-primary: #e11d48;
  --tb-primary-rgb: 225, 29, 72;
  --tb-primary-text-emphasis: #9f1239;
  --tb-primary-bg-subtle: #fde4e9;
  --tb-primary-border-subtle: #f9c9d3;

  --tb-info: #555555;
  --tb-info-rgb: 85, 85, 85;
  --tb-info-text-emphasis: #1a1a1a;
  --tb-info-bg-subtle: #f0f0f0;
  --tb-info-border-subtle: #e2e2e2;

  --tb-link-color: #e11d48;
  --tb-link-color-rgb: 225, 29, 72;
  --tb-link-hover-color: #9f1239;
  --tb-link-hover-color-rgb: 159, 18, 57;

  --tb-body-font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tb-body-font-weight: 300;
  --tb-body-color: #555555;
  --tb-body-color-rgb: 85, 85, 85;
  --tb-emphasis-color: #1a1a1a;
  --tb-emphasis-color-rgb: 26, 26, 26;
  --tb-heading-color: #1a1a1a;
}

body {
  font-family: var(--bs-body-font-family);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-body-font-family);
  font-weight: 700;
  color: var(--fi-heading);
  letter-spacing: -0.01em;
}

/* Don't force dark headings inside light-on-dark sections (brand hero, etc.) */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}

/* Filled primary buttons (--tb- is the live prefix; --bs- kept for safety) */
.btn-primary {
  --bs-btn-bg: var(--fi-rose);
  --bs-btn-border-color: var(--fi-rose);
  --bs-btn-hover-bg: var(--fi-rose-hover);
  --bs-btn-hover-border-color: var(--fi-rose-hover);
  --bs-btn-active-bg: var(--fi-rose-active);
  --bs-btn-active-border-color: var(--fi-rose-active);
  --bs-btn-disabled-bg: var(--fi-rose);
  --bs-btn-disabled-border-color: var(--fi-rose);
  --tb-btn-bg: var(--fi-rose);
  --tb-btn-border-color: var(--fi-rose);
  --tb-btn-hover-bg: var(--fi-rose-hover);
  --tb-btn-hover-border-color: var(--fi-rose-hover);
  --tb-btn-active-bg: var(--fi-rose-active);
  --tb-btn-active-border-color: var(--fi-rose-active);
  --tb-btn-disabled-bg: var(--fi-rose);
  --tb-btn-disabled-border-color: var(--fi-rose);
  --tb-btn-focus-shadow-rgb: 225, 29, 72;
}

.btn-outline-primary {
  --bs-btn-color: var(--fi-rose);
  --bs-btn-border-color: var(--fi-rose);
  --bs-btn-hover-bg: var(--fi-rose);
  --bs-btn-hover-border-color: var(--fi-rose);
  --bs-btn-active-bg: var(--fi-rose);
  --bs-btn-active-border-color: var(--fi-rose);
  --tb-btn-color: var(--fi-rose);
  --tb-btn-border-color: var(--fi-rose);
  --tb-btn-hover-bg: var(--fi-rose);
  --tb-btn-hover-border-color: var(--fi-rose);
  --tb-btn-active-bg: var(--fi-rose);
  --tb-btn-active-border-color: var(--fi-rose);
  --tb-btn-focus-shadow-rgb: 225, 29, 72;
}

/* Dark buttons match the near-black brand surface */
.btn-dark {
  --bs-btn-bg: var(--fi-dark);
  --bs-btn-border-color: var(--fi-dark);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;
  --tb-btn-bg: var(--fi-dark);
  --tb-btn-border-color: var(--fi-dark);
  --tb-btn-hover-bg: #000;
  --tb-btn-hover-border-color: #000;
  --tb-btn-active-bg: #000;
}

/* CTA treatment — brand buttons read as confident, tracked labels */
.btn {
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Form focus + checks in rose */
.form-control:focus,
.form-select:focus {
  border-color: var(--fi-rose-light);
  box-shadow: 0 0 0 0.2rem rgba(225, 29, 72, 0.2);
}
.form-check-input:checked {
  background-color: var(--fi-rose);
  border-color: var(--fi-rose);
}
.form-check-input:focus {
  border-color: var(--fi-rose-light);
  box-shadow: 0 0 0 0.2rem rgba(225, 29, 72, 0.2);
}

/* Pagination + list-group active state */
.page-link { color: var(--fi-rose); }
.page-item.active .page-link {
  background-color: var(--fi-rose);
  border-color: var(--fi-rose);
}
.list-group-item.active {
  background-color: var(--fi-rose);
  border-color: var(--fi-rose);
}

/* Mobile nav hamburger — the theme's default icon embeds
   var(--tb-emphasis-color-rgb) inside its SVG data URI, but SVGs loaded as
   background images can't read page CSS variables, so the strokes never paint.
   Pin a concrete near-black stroke instead. */
.navbar-toggler-icon {
  --tb-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826, 26, 26, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Eyebrow-style small caps used across the UI */
.text-uppercase.small,
.navbar .nav-link.text-uppercase {
  letter-spacing: 0.12em;
}

/* ────────────────────────────────────────────────────────────
 * Admin panel — Trinta-style layout carrying the Fiyobra brand
 * (reference: theme/derign). Light sidebar, airy canvas, soft
 * rounded cards, rose accents.
 * ──────────────────────────────────────────────────────────── */
.fi-admin { background: #f4f5f9; min-height: 100vh; }

.fi-admin-sidebar {
  width: 264px;
  background: #ffffff;
  border-right: 1px solid var(--fi-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}
.fi-admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--fi-border);
}
.fi-admin-section {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fi-text);
  padding: 22px 24px 8px;
  /* A real heading since roadmap Phase 9 — the sidebar used to be one flat
   * list of nine links because these captions were plain divs. */
  margin: 0;
}
.fi-admin-nav { padding: 0 12px 24px; }
.fi-admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--fi-text);
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.fi-admin-nav-link i { font-size: 1.05rem; }
.fi-admin-nav-link:hover { background: #fdeef1; color: var(--fi-rose); }
.fi-admin-nav-link.active {
  background: var(--fi-rose);
  color: #fff;
  box-shadow: 0 8px 18px rgba(225, 29, 72, 0.28);
}

.fi-admin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fi-admin-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--fi-border);
  padding: 12px 28px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fi-admin-content { padding: 28px; }

.fi-admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f4f5f9;
  border: 1px solid var(--fi-border);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 0.8rem;
  color: var(--fi-text);
  white-space: nowrap;
}
.fi-admin-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fi-rose);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

/* Tiny uppercase field label used on admin detail cards */
.fi-eyebrow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Not --fi-muted: these labels sit on white cards inside the #f4f5f9 admin
   * canvas and are 10px, so they get the darker of the two greys. */
  color: var(--fi-text);
  margin-bottom: 2px;
}

/* Soft rounded cards */
.fi-card {
  background: #ffffff;
  border: 1px solid var(--fi-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
  /* .card-header/.card-body padding reads these vars, which Bootstrap only
   * defines on .card — without them fi-card children collapse to 0 padding. */
  --tb-card-spacer-y: 1.2rem;
  --tb-card-spacer-x: 1.2rem;
  --tb-card-cap-padding-y: 1rem;
  --tb-card-cap-padding-x: 1.2rem;
  --tb-card-cap-bg: transparent;
  --tb-card-cap-color: inherit;
  --tb-card-color: inherit;
  --tb-card-border-width: 1px;
  --tb-card-border-color: var(--fi-border);
}
.fi-card-hover { transition: box-shadow 0.18s ease, transform 0.18s ease; }
.fi-card-hover:hover {
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.10);
  transform: translateY(-2px);
}
/* Round the top of headers/tables sitting flush inside a card */
.fi-card > .card-header:first-child {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom: 1px solid var(--fi-border);
}
.fi-card > .table-responsive:first-child,
.fi-card > .table-responsive { border-radius: 16px; overflow: hidden; }

/* Dashboard stat tile icon badge */
.fi-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.fi-stat-icon.rose { background: #fde4e9; color: var(--fi-rose); }
.fi-stat-icon.dark { background: #ececf1; color: var(--fi-heading); }

/* Brand/seller card logo tile */
.fi-seller-logo {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  object-fit: cover;
  background: #f4f5f9;
}

/* Backdrop behind the admin drawer (hidden until a drawer opens on mobile) */
.fi-admin-backdrop { display: none; }

@media (max-width: 991.98px) {
  /* Sidebar becomes an off-canvas drawer that slides in from the left */
  .fi-admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(16, 24, 40, 0.18);
  }
  .fi-admin-sidebar.open { transform: translateX(0); }
  .fi-admin-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(16, 24, 40, 0.45);
  }
  /* Tighter chrome on small screens */
  .fi-admin-topbar { padding: 12px 16px; }
  .fi-admin-content { padding: 20px 16px; }
}

/* ────────────────────────────────────────────────────────────
 * Storefront patterns ported from the NovaShop reference:
 * generous corner radii, a prominent pill search, product cards
 * with discount badges, a gradient hero carousel, and a circular
 * category rail — all retoned to the single rose accent.
 * ──────────────────────────────────────────────────────────── */

/* Softer, more generous radii across cards and buttons */
.card {
  border-radius: 18px;
  border-color: var(--fi-border);
}
.card-img-top,
.card > img:first-child {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.btn { border-radius: 12px; }
.btn-lg { border-radius: 14px; }
.badge { border-radius: 8px; }

/* ── Site header search ─────────────────────────────────────── */
.fi-search {
  position: relative;
  max-width: 560px;
  width: 100%;
}
.fi-search .fi-search-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--fi-sub);
  font-size: 1.15rem;
  pointer-events: none;
}
.fi-search input {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px 0 48px;
  background: #f4f5f7;
  color: var(--fi-heading);
  font-size: 0.95rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.fi-search input::placeholder { color: var(--fi-sub); } /* 5.02:1 on #f4f5f7 */
.fi-search input:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.35);
}

/* ── Product card ───────────────────────────────────────────── */
.fi-product-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.fi-product-card:hover {
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.12);
  transform: translateY(-3px);
}
.fi-product-media {
  position: relative;
  overflow: hidden;
}
.fi-product-media img { transition: transform 0.35s ease; }
.fi-product-card:hover .fi-product-media img { transform: scale(1.05); }
.fi-discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--fi-rose);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 8px;
}

/* ── Hero carousel ──────────────────────────────────────────── */
.fi-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 380px;
  color: #fff;
  background: linear-gradient(120deg, #9f1239 0%, #e11d48 55%, #fb7185 100%);
  box-shadow: 0 24px 60px rgba(159, 18, 57, 0.28);
}
.fi-hero::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.fi-hero::before {
  content: '';
  position: absolute;
  right: 120px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.fi-hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 3vw, 3.5rem);
}
.fi-hero-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fi-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; }
.fi-hero .fi-hero-sub { color: rgba(255, 255, 255, 0.9); max-width: 460px; }
.fi-hero-figure {
  position: relative;
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.92);
}
.fi-hero-dots {
  position: absolute;
  bottom: 22px;
  left: clamp(2rem, 3vw, 3.5rem);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.fi-hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.fi-hero-dot.active { width: 26px; background: #fff; }
.fi-hero .btn-light { color: var(--fi-rose); font-weight: 600; }

/* ── Category rail ──────────────────────────────────────────── */
.fi-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fi-heading);
}
.fi-cat-circle {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--fi-heading);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.fi-cat:hover .fi-cat-circle {
  background: #fde4e9;
  color: var(--fi-rose);
  transform: translateY(-2px);
}
.fi-cat-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--fi-text);
}
.fi-cat:hover .fi-cat-label { color: var(--fi-rose); }

/* Keep the carousel dots clear of the content on small screens */
@media (max-width: 575.98px) {
  .fi-hero { min-height: 300px; }
  .fi-hero-inner { padding-bottom: 3.25rem; }
}

/* ── Legal documents (roadmap Phase 8) ───────────────────────────────────
   The privacy policy, terms, and cookie policy are rendered from markdown,
   so the HTML arrives without Bootstrap's utility classes on it. These rules
   give that plain markup the same rhythm as the rest of the site rather than
   sprinkling classes into documents a lawyer has to review. */
.fi-legal {
  color: var(--fi-text);
  line-height: 1.75;
  max-width: 46rem;
}
.fi-legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fi-heading);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fi-border, #ececf1);
}
.fi-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fi-legal h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--fi-heading);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.fi-legal p, .fi-legal li { font-size: 0.95rem; }
.fi-legal ul, .fi-legal ol { padding-left: 1.25rem; }
.fi-legal li { margin-bottom: 0.35rem; }
.fi-legal a { color: var(--fi-rose); }
.fi-legal code {
  background: #f4f5f7;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
  color: var(--fi-heading);
}
.fi-legal table {
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.88rem;
  display: block;
  overflow-x: auto;
}
.fi-legal th, .fi-legal td {
  border: 1px solid var(--fi-border, #ececf1);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.fi-legal th {
  background: #f8f8fa;
  font-weight: 600;
  color: var(--fi-heading);
  white-space: nowrap;
}