/* price-configurator — Frigate Yacht Partners palette (navy #0A1A3F, gold #D4AF37, cream, Playfair
   Display + Inter + IBM Plex Mono), every class prefixed fyp-cfg. Reads the site's own CSS custom
   properties (--fyp-navy, --fyp-gold, etc.) where the component is slotted into the site, and falls
   back to plain values below so this file also stands alone (e.g. opened from this folder directly). */
.fyp-cfg {
  --cfg-navy: var(--fyp-navy, #0A1A3F);
  --cfg-gold: var(--fyp-gold, #D4AF37);
  --cfg-gold-deep: var(--fyp-gold-deep, #85691C);
  --cfg-cream: var(--fyp-cream, #F7F3EB);
  --cfg-paper: var(--fyp-paper, #FBFAF6);
  --cfg-ink: var(--fyp-ink, #0B1530);
  --cfg-muted: var(--fyp-muted, #6B7080);
  --cfg-line: var(--fyp-line, rgba(10, 26, 63, .12));
  --cfg-serif: var(--fyp-serif, 'Playfair Display', Georgia, serif);
  --cfg-sans: var(--fyp-sans, 'Inter', system-ui, sans-serif);
  --cfg-mono: var(--fyp-mono, 'IBM Plex Mono', ui-monospace, monospace);
  --cfg-ease: cubic-bezier(.4, 0, .2, 1);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--cfg-paper);
  border: 1px solid var(--cfg-line);
  color: var(--cfg-ink);
}
.fyp-cfg__head { margin-bottom: 26px; }
.fyp-cfg__head .fyp-h3, .fyp-cfg__head h3 { margin: 0 0 0; font: 400 clamp(1.35rem, 1.1rem + .7vw, 1.75rem)/1.2 var(--cfg-serif); color: var(--cfg-ink); }
.fyp-cfg__head .fyp-label, .fyp-cfg__head p:first-child { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; font: 500 11.5px/1 var(--cfg-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--cfg-gold-deep); }

.fyp-cfg__row { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); align-items: flex-start; }
.fyp-cfg__group { display: flex; flex-direction: column; gap: 10px; }
.fyp-cfg__grouplabel { font: 500 11px var(--cfg-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cfg-muted); }
.fyp-cfg__toggle { display: inline-flex; flex-wrap: wrap; gap: 6px; background: rgba(10, 26, 63, .05); border: 1px solid var(--cfg-line); border-radius: 999px; padding: 5px; }
.fyp-cfg__opt {
  padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--cfg-ink);
  font: 500 17px var(--cfg-sans); line-height: 1; cursor: pointer; transition: background .3s var(--cfg-ease), color .3s var(--cfg-ease);
}
.fyp-cfg__opt.is-active { background: var(--cfg-navy); color: var(--cfg-cream); }
.fyp-cfg__opt:hover:not(.is-active) { background: rgba(10, 26, 63, .08); }
.fyp-cfg__opt:focus-visible { outline: 2px solid var(--cfg-gold); outline-offset: 2px; }

.fyp-cfg__caption { margin: 18px 0 0; font: 400 17px/1.5 var(--cfg-sans); color: var(--cfg-muted); }

.fyp-cfg__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 32px); margin-top: 22px; padding-top: 24px; border-top: 1px solid var(--cfg-line); }
.fyp-cfg__fig { display: flex; flex-direction: column; gap: 6px; }
.fyp-cfg__figlabel { font: 500 10.5px var(--cfg-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cfg-gold-deep); }
.fyp-cfg__figlabel small { display: block; margin-top: 3px; font: 400 12px var(--cfg-sans); letter-spacing: 0; text-transform: none; color: var(--cfg-muted); }
.fyp-cfg__figvalue b { font: 400 clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem) var(--cfg-serif); color: var(--cfg-ink); font-variant-numeric: tabular-nums lining-nums; font-weight: 400; }
.fyp-cfg__figrange { display: block; min-height: 1.4em; font: 500 12px var(--cfg-mono); color: var(--cfg-muted); }

.fyp-cfg__extra { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 32px); margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--cfg-line); }
.fyp-cfg__fig--sm .fyp-cfg__figvalue b { font-size: 1.35rem; }

.fyp-cfg__note { margin: 22px 0 0; font: 400 12.5px/1.7 var(--cfg-mono); color: var(--cfg-muted); letter-spacing: .01em; }

@media (max-width: 700px) {
  .fyp-cfg__figs, .fyp-cfg__extra { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .fyp-cfg__figs, .fyp-cfg__extra { grid-template-columns: 1fr; }
  .fyp-cfg__toggle { width: 100%; justify-content: space-between; }
  .fyp-cfg__opt { flex: 1; text-align: center; padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fyp-cfg__opt { transition-duration: .001ms; }
}