/*
 * Nyaruka Universal — storefront design system
 * =============================================
 * Shared design tokens + components for the customer-facing pages
 * (welcome/landing, restaurant menu, checkout, order confirmation, order
 * tracking). Loaded by resources/views/layouts/storefront.blade.php.
 *
 * Before this file existed, welcome/menus/checkout were three separate
 * standalone HTML documents, each with its own ~150-250 line inline
 * <style> block, hardcoded colors that didn't match each other (#3b76e1
 * vs #E5BA02 vs #e5ba02 vs #28a745...), and no shared component styles —
 * every card, button, and badge was redefined per page. This file is the
 * single source of truth for all of that; page-specific styles that
 * genuinely don't belong here can still live in a page's own <style>
 * block, but colors/spacing/type should come from the tokens below.
 */

:root {
  /* Brand — matches the gold/orange already established in transactional
     emails (resources/views/emails/order-placed.blade.php), so the color
     a customer sees in their inbox matches what they see on the site. */
  --brand-50:  #FFF8E6;
  --brand-100: #FFEDBF;
  --brand-300: #FFD35C;
  --brand-400: #FFC633;
  --brand-500: #FFB800;
  --brand-600: #E6A600;
  --brand-700: #B8850A;

  /* Ink / neutrals */
  --ink-900: #1F2328;
  --ink-700: #3A4048;
  --ink-600: #5B6470;
  --ink-400: #8A93A0;
  --ink-300: #C9CED6;
  --ink-200: #E4E7EC;
  --ink-100: #F1F2F5;

  --surface:      #FFFFFF;
  --surface-alt:  #F4F5F8;
  --surface-dark: #1F2328;

  /* Status */
  --success-500: #1E9E5A;
  --success-100: #E3F6EC;
  --danger-500:  #E5484D;
  --danger-100:  #FDEAEA;
  --info-500:    #2F6FE4;
  --info-100:    #EAF1FE;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.06), 0 1px 1px rgba(31, 35, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(31, 35, 40, 0.08), 0 2px 6px rgba(31, 35, 40, 0.05);
  --shadow-lg: 0 20px 48px rgba(31, 35, 40, 0.14), 0 6px 16px rgba(31, 35, 40, 0.08);

  /* Type */
  --font-sans: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --header-height: 76px;
  --container-max: 1240px;
}

/* ---------------------------------------------------------------------
   Bootstrap 4 gutter-utility shim
   -----------------------------------------------------------------------
   The storefront markup uses Bootstrap 5's row-gutter classes (g-3, g-4,
   gx-*, gy-*) for spacing between grid cards — but this site loads
   Bootstrap 4.4.1 (public/LandingPage/assets/bootstrap/css/bootstrap.min.css),
   which has no such classes at all. They were being silently ignored,
   which is why cards in a wrapped grid (restaurant list, menu items,
   feature tiles, form field pairs) had no vertical space between rows no
   matter what gutter class was applied. Bootstrap 4's own .col-* classes
   already add horizontal padding (the default 30px gutter), so only the
   missing vertical spacing needs adding here.
--------------------------------------------------------------------- */
.row.g-3 > [class*="col-"],
.row.gy-3 > [class*="col-"] { margin-bottom: 1rem; }

.row.g-4 > [class*="col-"],
.row.gy-4 > [class*="col-"],
.row.gx-4 > [class*="col-"] { margin-bottom: 1.5rem; }

.row.g-5 > [class*="col-"],
.row.gy-5 > [class*="col-"] { margin-bottom: 3rem; }

/* Restaurant grid gets a slightly wider horizontal gutter than Bootstrap
   4's 30px default, on top of the vertical spacing above — same
   negative-margin-on-row / padding-on-column pattern Bootstrap's own grid
   uses, just scoped to this one grid instead of changing every column's
   gutter site-wide. */
.restaurant-grid.row {
  margin-left: -18px;
  margin-right: -18px;
}

.restaurant-grid.row > [class*="col-"] {
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 576px) {
  /* Root cause of the "restaurant name/type don't fit" complaint on phone
     browsers: the grid stayed 2-up (col-6) all the way down to phone
     width, and each of those two columns lost 36px combined to the 18px
     gutter above — leaving barely ~130px of real card width, so the name
     and type badge had almost no room even truncated. The card now goes
     full-width below 576px (see the col classes on .restaurant-tile in
     welcome.blade.php); this just tightens the now-oversized gutter and
     the 3rem vertical gap (line ~91) to match a single-column layout
     instead of leaving "big space between cards" on a narrow screen. */
  .restaurant-grid.row {
    margin-left: -10px;
    margin-right: -10px;
  }

  .restaurant-grid.row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 1.1rem;
  }
}

/* ---------------------------------------------------------------------
   Base
--------------------------------------------------------------------- */
.sf-page {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--surface-alt);
  -webkit-font-smoothing: antialiased;
}

.sf-page h1, .sf-page h2, .sf-page h3, .sf-page h4, .sf-page h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.sf-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 576px) {
  .sf-container { padding-inline: 16px; }
}

.sf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.sf-muted { color: var(--ink-600); }

/* ---------------------------------------------------------------------
   Header / nav
--------------------------------------------------------------------- */
.sf-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  /* The site's signature gold header band — this is the color the
     original template used across the top of every page (the same gold
     already established in transactional emails and the brand tokens
     above). The full redesign had quietly lost it in favor of a plain
     white bar; bringing it back here restores that identity site-wide. */
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
  box-shadow: 0 2px 14px rgba(31, 35, 40, 0.18);
  height: var(--header-height);
}

.sf-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.sf-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink-900);
  text-decoration: none;
}

.sf-header__logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.sf-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sf-nav a {
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sf-nav a:hover,
.sf-nav a:focus-visible {
  background: rgba(31, 35, 40, 0.1);
  color: var(--ink-900);
}

.sf-nav a.sf-nav--brand {
  color: var(--ink-900);
  text-decoration: underline;
}

.sf-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* On the gold header, the shared button classes need their own contrast:
   a plain outline (originally meant for a white background) would nearly
   vanish here, and a gold-on-gold "Sign up" button would disappear
   entirely. */
.sf-header .btn-brand-outline {
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: var(--ink-900);
}

.sf-header .btn-brand-outline:hover {
  background: var(--surface);
  border-color: transparent;
}

.sf-header .btn-brand {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.sf-header .btn-brand:hover,
.sf-header .btn-brand:focus-visible {
  background: #000;
  border-color: #000;
  color: #fff;
}

.sf-header .btn-ghost {
  color: var(--ink-900);
}

.sf-header .btn-ghost:hover {
  background: rgba(31, 35, 40, 0.1);
  border-radius: var(--radius-sm);
}

.sf-header__toggle {
  display: none;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(31, 35, 40, 0.15);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--ink-900);
}

@media (max-width: 991px) {
  .sf-nav { display: none; }
  .sf-header__toggle { display: inline-flex; }
}

.sf-mobile-nav {
  display: none;
  border-top: 1px solid rgba(31, 35, 40, 0.12);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.sf-mobile-nav.show { display: block; }

.sf-mobile-nav a {
  display: block;
  padding: 14px 16px;
  color: var(--ink-800, var(--ink-900));
  text-decoration: none;
  border-bottom: 1px solid var(--ink-100);
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.btn-brand {
  --bs-btn-color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-family: var(--font-sans);
  background: var(--brand-500);
  color: var(--ink-900);
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-brand:hover,
.btn-brand:focus-visible {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-brand:active { transform: translateY(1px); }

.btn-brand:disabled,
.btn-brand[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-brand-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--ink-300);
  border-radius: var(--radius-pill);
  padding: 11px 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.btn-brand-outline:hover {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--ink-900);
  transform: translateY(-1px);
}

.btn-ghost {
  background: none;
  border: none;
  color: var(--ink-700);
  font-weight: 500;
  padding: 8px 10px;
}

/* ---------------------------------------------------------------------
   Cards
--------------------------------------------------------------------- */
.sf-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-md);
}

.sf-card--interactive {
  border-color: var(--ink-200);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sf-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-400);
}

/* Restaurant listing card */
.restaurant-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.restaurant-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.restaurant-card__media::before {
  /* Sits behind the <img> as a placeholder — if the image fails to load
     the onerror handler on the <img> hides it, revealing this icon
     instead of a broken-image glyph. */
  content: '\f2e7';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--ink-300);
  position: absolute;
}

.restaurant-card__scrim {
  /* Darkens the lower half of the photo so the name/address overlaid on
     top of it stay legible against any image, without needing a solid
     text panel that would hide more of the photo. */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 25, 0) 42%, rgba(15, 16, 19, 0.86) 100%);
  z-index: 1;
  pointer-events: none;
}

.restaurant-card__type-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-900);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  /* "Not fit in card" fix: on a narrow phone-browser card, a long vendor
     type name (e.g. "Fast Food & Confectionery") could wrap or overflow
     past the card edge. Keep it a single-line, truncated pill instead. */
  max-width: calc(100% - 64px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.restaurant-card__overlay-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 16px 14px;
}

.restaurant-card__overlay-info .restaurant-card__name {
  color: #fff;
  font-size: 1.12rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  /* Bug fix: a long restaurant name (e.g. "Subpoint Restaurant (buy1
     pizza get 1 free)") had no truncation here, so on the 2-up mobile
     grid (col-6, ~160px per card) it would wrap past the image height
     and get raggedly cut off mid-line by .restaurant-card__media's
     overflow:hidden — the "cards not well fit" look. Clamping to 2 lines
     with an ellipsis keeps every card's overlay text inside the photo. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.restaurant-card__overlay-info .restaurant-card__meta {
  color: rgba(255, 255, 255, 0.9);
}

.restaurant-card__overlay-info .restaurant-card__meta span {
  /* Same fix as the name above, applied to the address line. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.restaurant-card__overlay-info .restaurant-card__meta i {
  color: var(--brand-400);
}

.restaurant-card__media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.restaurant-card:hover .restaurant-card__media img {
  transform: scale(1.05);
}

.restaurant-card__footer {
  padding: 14px 18px;
  border-top: 1px solid var(--ink-100);
}

.restaurant-card__view-menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--brand-700);
  transition: gap 0.15s ease, color 0.15s ease;
}

.restaurant-card:hover .restaurant-card__view-menu {
  gap: 10px;
  color: var(--brand-600);
}

.restaurant-card__name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-900);
  line-height: 1.3;
}

.restaurant-card__meta {
  font-size: 0.86rem;
  color: var(--ink-600);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.restaurant-card__meta i {
  color: var(--brand-600);
  margin-top: 2px;
  flex: none;
}

.status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.status-badge--open { background: var(--success-500); }
.status-badge--closed { background: var(--danger-500); }

.restaurant-card--closed .restaurant-card__media img {
  filter: grayscale(0.5);
  opacity: 0.75;
}

/* Menu item card */
.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.menu-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-card__media::before {
  /* Placeholder shown behind the <img> — revealed if the image fails to
     load and its onerror handler hides it. */
  content: '\f2e7';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--ink-300);
  position: absolute;
}

.menu-card__media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.menu-card:hover .menu-card__media img {
  transform: scale(1.05);
}

.menu-card__category {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(31, 35, 40, 0.72);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  /* Same "not fit in card" fix as .restaurant-card__type-badge — a long
     category name shouldn't be able to wrap and break the pill shape on a
     narrow mobile card. */
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  border-top: 1px solid var(--ink-100);
}

.menu-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-900);
  line-height: 1.3;
}

.menu-card__desc {
  font-size: 0.86rem;
  color: var(--ink-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.menu-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-200);
}

.menu-card__price {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-700);
}

.menu-card__price--was {
  font-weight: 400;
  color: var(--ink-400);
  text-decoration: line-through;
  margin-right: 6px;
  font-size: 0.85rem;
}

.menu-card__discount {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--success-500);
  background: var(--success-100);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
}

.menu-card__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-500);
  color: var(--ink-900);
  border: none;
  flex: none;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.menu-card__add:hover {
  background: var(--brand-600);
  box-shadow: var(--shadow-md);
}

.menu-card__add:active { transform: scale(0.94); }

/* ---------------------------------------------------------------------
   Category pills
--------------------------------------------------------------------- */
.sf-pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-pill-nav .nav-link {
  border-radius: var(--radius-pill) !important;
  padding: 9px 18px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-700) !important;
  background: var(--surface);
  border: 1px solid var(--ink-200) !important;
}

.sf-pill-nav .nav-link.active {
  background: var(--ink-900) !important;
  color: #fff !important;
  border-color: var(--ink-900) !important;
}

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
.sf-page .form-control,
.sf-page .form-select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-200);
  padding: 11px 14px;
  font-family: var(--font-sans);
}

.sf-page .form-control:focus,
.sf-page .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-50);
}

.sf-page label,
.sf-field-label {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ink-700);
  margin-bottom: 6px;
  display: inline-block;
}

/* Segmented / tab toggle (used for sign-in vs guest, and delivery option) */
.sf-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  gap: 2px;
}

.sf-toggle__option {
  border: none;
  background: transparent;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-600);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sf-toggle__option.active {
  background: var(--surface);
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}

/* Card-style radio (payment methods / delivery option) */
.sf-radio-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.sf-radio-card input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  margin: 0;
}

.sf-radio-card__face {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Same interactive language as every other card on the site (restaurant
   cards, menu items): a brand-colored border and a small lift on hover. */
.sf-radio-card:hover .sf-radio-card__face {
  border-color: var(--brand-400);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.sf-radio-card input:checked + .sf-radio-card__face {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

.sf-radio-card input:focus-visible + .sf-radio-card__face {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

.sf-radio-card__face img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------
   Status / flash messages
--------------------------------------------------------------------- */
.sf-flash {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.sf-flash--success { background: var(--success-100); color: #15693F; }
.sf-flash--error   { background: var(--danger-100); color: #A32327; }

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.sf-footer {
  background: var(--surface-dark);
  color: var(--ink-300);
  margin-top: 64px;
}

.sf-footer a { color: var(--ink-100); text-decoration: none; }
.sf-footer a:hover { color: var(--brand-300); }

.sf-footer__heading {
  color: #fff;
  font-weight: 600;
  margin-bottom: 14px;
}

.sf-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 32px;
  font-size: 0.85rem;
  color: var(--ink-400);
}

/* ---------------------------------------------------------------------
   Misc utilities
--------------------------------------------------------------------- */
.sf-section { padding-block: 48px; }
@media (max-width: 576px) { .sf-section { padding-block: 32px; } }

.sf-empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--ink-600);
}

.sf-skeleton {
  background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 37%, var(--ink-100) 63%);
  background-size: 400% 100%;
  animation: sf-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes sf-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.sf-whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

.sf-whatsapp-fab img { width: 28px; height: 28px; }