/* prettier-ignore */
/* =====================================================================
   NoFeeSmart brand layer (loaded after the Phoenix theme + gobuy.css)

   Concept, "The Focus": two opposing corners of a selection frame. The
   frame picks what is worth it and holds nothing extra. Everything here
   expresses that one idea: the corners frame imagery and mark the product
   in focus; the 8:15 diagonal cut recurs on every corner.

   Rules (docs/branding.md):
     - Cobalt is the action colour; it IS the Phoenix primary, so buttons,
       links and focus rings stay on-brand with no theme overrides.
     - Ink carries campaigns; Volt is a spark: on ink, never on white.
     - Plus Jakarta Sans speaks (headings, campaign titles);
       Nunito Sans works (body, nav, forms, buttons, product names, prices).
   No layout dimensions are set here except on the brand's own elements.
   ===================================================================== */

:root {
  /* Palette */
  --nfs-cobalt: #3874ff;           /* = --phoenix-primary */
  --nfs-cobalt-deep: #1f4fe0;
  --nfs-cobalt-night: #10297a;
  --nfs-ink: #0b1020;
  --nfs-ink-raised: #161d33;
  --nfs-volt: #d7f75b;
  --nfs-paper: #f5f7fa;            /* = --phoenix-body-bg (light) */

  /* Role tokens (themed below) */
  --nfs-focus-color: var(--nfs-cobalt);
  --nfs-mark-color: var(--nfs-cobalt);

  /* Typography */
  --nfs-font-display: "Plus Jakarta Sans", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nfs-display-tracking: -0.02em;

  /* The Focus corner geometry: arm, stem, thickness; cut = 8/15 of thickness */
  --nfs-corner-arm: 26px;
  --nfs-corner-stem: 20px;
  --nfs-corner-t: 4px;
}

[data-bs-theme="dark"] {
  --nfs-focus-color: #85a9ff;      /* = --phoenix-primary (dark) */
  --nfs-mark-color: #85a9ff;
}

/* ---------- Typography roles ---------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--nfs-font-display);
  letter-spacing: var(--nfs-display-tracking);
}

/* Prices stay in the UI face (its narrower figures keep price + discount badge
   on one line in the existing card width) with tabular figures, so prices align. */
.product-card h3,
[class*="price"] h3 {
  font-family: var(--phoenix-body-font-family);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

/* ---------- The Focus corners (graphic motif) ----------
   .nfs-focus on any positioned box draws the two corners inside it.
   Tune per use with the --nfs-corner-* tokens and --nfs-focus-inset. */
.nfs-focus { position: relative; }
.nfs-focus::before,
.nfs-focus::after,
.product-card .gb-card-media::before,
.product-card .gb-card-media::after,
.gb-banner:not(.gb-banner--creative)::before,
.gb-banner:not(.gb-banner--creative)::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: calc(var(--nfs-corner-arm) + var(--nfs-corner-t) * 0.5333);
  height: var(--nfs-corner-stem);
  background: var(--nfs-focus-color);
  clip-path: polygon(0 0, var(--nfs-corner-arm) 0,
    calc(var(--nfs-corner-arm) + var(--nfs-corner-t) * 0.5333) var(--nfs-corner-t),
    var(--nfs-corner-t) var(--nfs-corner-t), var(--nfs-corner-t) 100%, 0 100%);
  pointer-events: none;
}
.nfs-focus::before { top: var(--nfs-focus-inset, 0); left: var(--nfs-focus-inset, 0); }
.nfs-focus::after { bottom: var(--nfs-focus-inset, 0); right: var(--nfs-focus-inset, 0); transform: rotate(180deg); }

/* ---------- Product card: the product you point at comes into focus ----------
   Corners settle in from slightly outside on hover / keyboard focus. Pure
   overlay: no size, spacing or layout change to the card. */
.product-card .gb-card-media {
  --nfs-corner-arm: 22px;
  --nfs-corner-stem: 17px;
  --nfs-corner-t: 3px;
  --nfs-focus-inset: 8px;
  position: relative;
}
.product-card .gb-card-media::before,
.product-card .gb-card-media::after {
  opacity: 0;
  transition: opacity var(--gb-motion-fast) var(--gb-ease), transform var(--gb-motion-fast) var(--gb-ease);
}
.product-card .gb-card-media::before {
  top: var(--nfs-focus-inset); left: var(--nfs-focus-inset);
  transform: translate(-4px, -4px);
}
.product-card .gb-card-media::after {
  bottom: var(--nfs-focus-inset); right: var(--nfs-focus-inset);
  transform: translate(4px, 4px) rotate(180deg);
}
.product-card:hover .gb-card-media::before,
.product-card:focus-within .gb-card-media::before { opacity: 1; transform: none; }
.product-card:hover .gb-card-media::after,
.product-card:focus-within .gb-card-media::after { opacity: 1; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .product-card .gb-card-media::before,
  .product-card .gb-card-media::after { transition: none; }
}

/* Product page: the main image sits in focus (corners in the p-5 padding). */
.nfs-focus--gallery { --nfs-focus-inset: 14px; }

/* ---------- Section mark: the symbol as a heading signature ---------- */
.nfs-section-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--nfs-mark-color);
  -webkit-mask: url("../../branding/logos/symbol-mono-black.svg") center / contain no-repeat;
          mask: url("../../branding/logos/symbol-mono-black.svg") center / contain no-repeat;
}

/* ---------- Campaign banners (no artwork): ink-led, framed in focus ----------
   Applies only to text banners; marketing creatives stay untouched. */
.gb-banner:not(.gb-banner--creative) {
  /* Sized to sit in the banner's padding gutter (p-4 / p-md-5), never under copy. */
  --nfs-corner-arm: clamp(26px, 4vw, 56px);
  --nfs-corner-stem: clamp(20px, 3vw, 42px);
  --nfs-corner-t: clamp(4px, 0.5vw, 6px);
  --nfs-focus-inset: clamp(8px, 1vw, 12px);
  --nfs-focus-color: rgba(255, 255, 255, 0.9);
}
.gb-banner:not(.gb-banner--creative)::before,
.gb-banner:not(.gb-banner--creative)::after { z-index: 1; }
.gb-banner:not(.gb-banner--creative)::before { top: var(--nfs-focus-inset); left: var(--nfs-focus-inset); }
.gb-banner:not(.gb-banner--creative)::after { bottom: var(--nfs-focus-inset); right: var(--nfs-focus-inset); transform: rotate(180deg); }
/* Content clears the top-left corner without changing the banner's size. */
.gb-banner:not(.gb-banner--creative) .gb-banner__content { position: relative; z-index: 2; }
.gb-banner .gb-banner__title--sm,
.gb-banner .gb-banner__title--md,
.gb-banner .gb-banner__title--lg { letter-spacing: -0.025em; }
/* Banner eyebrow: Volt on ink, the brand's one spark. */
.gb-banner__badge--light {
  background: var(--nfs-volt) !important;
  color: var(--nfs-ink) !important;
}

/* ---------- Account CTA (homepage): ink panel framed in focus ----------
   An ink surface in both app themes, so it reads as a brand moment rather
   than a themed card. Corners sit in the panel padding. */
.nfs-cta {
  --nfs-corner-arm: clamp(36px, 5vw, 72px);
  --nfs-corner-stem: clamp(28px, 3.8vw, 54px);
  --nfs-corner-t: clamp(5px, 0.6vw, 8px);
  --nfs-focus-inset: clamp(12px, 1.6vw, 20px);
  --nfs-focus-color: var(--nfs-cobalt);
  background: var(--nfs-ink);
  color: #c9cfdf;
  border-radius: 0.75rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 6vw, 5rem);
}
[data-bs-theme="dark"] .nfs-cta { border: 1px solid rgba(255, 255, 255, 0.08); }
.nfs-cta__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
  background: var(--nfs-volt);
  color: var(--nfs-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nfs-cta__title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.nfs-cta__lede { max-width: 30rem; margin-bottom: 1.75rem; font-size: 1.05rem; color: #aab2c8; }
.nfs-cta__link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgba(255, 255, 255, 0.35); }
.nfs-cta__link:hover, .nfs-cta__link:focus { color: var(--nfs-volt); text-decoration-color: currentColor; }
.nfs-cta__list { display: grid; gap: 1.25rem; }
.nfs-cta__list li { display: flex; gap: 0.9rem; align-items: flex-start; line-height: 1.45; }
.nfs-cta__list strong { display: block; color: #fff; font-weight: 700; margin-bottom: 0.1rem; }
.nfs-cta__mark {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  background: var(--nfs-volt);
  -webkit-mask: url("../../branding/logos/symbol-mono-black.svg") center / contain no-repeat;
          mask: url("../../branding/logos/symbol-mono-black.svg") center / contain no-repeat;
}

/* ---------- Footer sign-off ---------- */
.nfs-footer-line { font-family: var(--nfs-font-display); font-weight: 700; letter-spacing: var(--nfs-display-tracking); }