/*
  Flare Fireplaces Glass Price Tool
  Stage 15: shared indoor/outdoor design system, selectors, results, motion, and responsive rules.
*/

/* 1) Design system */
:root {
  --bridge-bg: #f4f0e9;
  --bridge-ink: #19211d;
  --bridge-muted: #5f6861;
  --bridge-line: rgba(25, 33, 29, .13);
  --bridge-glass: rgba(255, 255, 255, .58);
  --bridge-glass-strong: rgba(255, 255, 255, .82);
  --bridge-accent: #233f35;
  --bridge-accent-hover: #172c24;
  --bridge-lime: #99cc00;
  --bridge-radius-lg: 30px;
  --bridge-radius-md: 24px;
  --bridge-radius-sm: 18px;
  --bridge-shadow: 0 22px 60px rgba(25, 33, 29, .13);
  --bridge-shadow-soft: 0 14px 36px rgba(25, 33, 29, .10);
  --bridge-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body { min-height: 100%; }

body {
  margin: 0 !important;
  color: var(--bridge-ink) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(61, 102, 83, .12), transparent 26rem),
    radial-gradient(circle at 86% 12%, rgba(61, 102, 83, .09), transparent 22rem),
    var(--bridge-bg) !important;
}

.flare-glass-tool,
.flare-glass-tool *,
.flare-glass-tool *::before,
.flare-glass-tool *::after { box-sizing: border-box; }

.flare-glass-tool {
  --fg-ink: var(--bridge-ink);
  --fg-muted: var(--bridge-muted);
  --fg-soft-ink: #27362f;
  --fg-green: var(--bridge-lime);
  --fg-green-deep: var(--bridge-accent);
  --fg-accent: var(--bridge-accent);
  --fg-accent-hover: var(--bridge-accent-hover);
  --fg-status-color: #99cc00;
  --fg-status-rgb: 153, 204, 0;
  --fg-line: var(--bridge-line);
  --fg-shadow: var(--bridge-shadow);
  --fg-shadow-soft: var(--bridge-shadow-soft);
  --fg-mode-accent: var(--bridge-lime);
  --fg-status-ring: rgba(var(--fg-status-rgb), .13);
  --fg-status-glow: rgba(var(--fg-status-rgb), .30);
  --fg-status-ring-strong: rgba(var(--fg-status-rgb), .17);
  --fg-status-glow-strong: rgba(var(--fg-status-rgb), .50);
  --fg-status-glow-soft: rgba(var(--fg-status-rgb), .18);
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(24px, 4vw, 56px) clamp(14px, 4vw, 44px) clamp(34px, 5vw, 72px);
  color: var(--fg-ink);
  background: transparent;
  font-family: var(--bridge-font);
}

.flare-glass-tool[data-mode="outdoor"] {
  --fg-mode-accent: #0fa0d1;
  --fg-status-ring: rgba(15, 160, 209, .14);
  --fg-status-glow: rgba(15, 160, 209, .34);
  --fg-status-ring-strong: rgba(15, 160, 209, .20);
  --fg-status-glow-strong: rgba(15, 160, 209, .58);
  --fg-status-glow-soft: rgba(15, 160, 209, .22);
}

.flare-glass-tool::before,
.flare-glass-tool::after,
.fg-shell::before,
.fg-shell::after { display: none; }


/* 2) Hero and shell */
.fg-shell {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.fg-hero {
  position: relative;
  min-height: clamp(245px, 26vw, 350px);
  display: grid;
  place-items: center;
  margin-bottom: clamp(14px, 2.4vw, 28px);
  overflow: visible;
}

.fg-glass-img-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  pointer-events: none;
}

/*
  The <picture> element is the grid item here, not the <img>. With no width of
  its own it stretched to the full hero width, so the 980px image inside it sat
  flush-left and pulled the hero off-centre. Giving <picture> the width makes
  the existing centring apply to the artwork itself.
*/
.fg-glass-img-wrap picture {
  display: block;
  width: min(100%, 980px);
  margin-inline: auto;
  line-height: 0;
}

.fg-glass-img {
  display: block;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  height: auto;
  margin-top: clamp(4px, 1.5vw, 16px);
  opacity: .94;
  filter: drop-shadow(0 24px 28px rgba(18, 32, 24, .13));
  animation: fgGlassSlideIn .9s cubic-bezier(.18,.84,.24,1) .05s both, fgGlassFloat 5.8s ease-in-out 1.05s infinite;
  will-change: transform, opacity, filter;
}

.fg-title-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 930px);
  margin-top: clamp(78px, 9vw, 118px);
  padding: clamp(24px, 3.3vw, 40px) clamp(10px, 2vw, 22px) 12px;
  text-align: center;
  overflow: hidden;
}

.fg-title-stage::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 18px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .44), transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: .55;
  pointer-events: none;
  transform: translateY(16px);
}

.fg-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 12px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 999px;
  background: rgba(255, 255, 255, .48);
  color: var(--fg-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 10px 26px rgba(82, 110, 0, .06);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  animation: fgSoftIn .72s ease .08s both;
}

.fg-status-dot {
  position: relative;
  isolation: isolate;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: var(--fg-mode-accent);
  box-shadow: 0 0 0 4px var(--fg-status-ring), 0 0 10px var(--fg-status-glow);
  transform-origin: center;
  animation: fgStatusPulse 2.35s ease-in-out infinite;
}

.fg-status-dot::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 999px;
  background: var(--fg-status-ring-strong);
  animation: fgStatusHalo 2.35s ease-out infinite;
}

.fg-title {
  position: relative;
  z-index: 2;
  max-width: 930px;
  margin: 0 auto;
  color: var(--bridge-ink);
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: .88;
  font-weight: 900;
  letter-spacing: -.07em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 20px 38px rgba(25, 33, 29, .10);
  opacity: 0;
  filter: blur(18px);
  transform: translateY(54px);
  animation: fgTitleReveal 1.18s cubic-bezier(.16,1,.3,1) .18s forwards;
}

.fg-subtitle {
  max-width: 730px;
  margin: 14px auto 0;
  color: var(--bridge-muted);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
  text-wrap: balance;
  animation: fgSoftIn .8s ease .64s both;
}


/* Indoor / outdoor mode switch */
.fg-mode-switch {
  position: relative;
  z-index: 30;
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0 auto clamp(14px, 2.4vw, 24px);
  padding: 5px;
  border: 1px solid rgba(25, 33, 29, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  box-shadow: var(--bridge-shadow-soft);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.fg-mode-button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bridge-muted);
  font: 850 13px/1 var(--bridge-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.fg-mode-button:hover,
.fg-mode-button:focus-visible {
  color: var(--bridge-ink);
  outline: none;
}

.fg-mode-button.fg-mode-active {
  background: rgba(35, 63, 53, .96);
  color: #fff;
  box-shadow: 0 10px 24px rgba(35, 63, 53, .20);
}

.fg-mode-light {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
}

.fg-mode-light-indoor {
  background: #99cc00;
  box-shadow: 0 0 0 4px rgba(153, 204, 0, .13), 0 0 12px rgba(153, 204, 0, .36);
}

.fg-mode-light-outdoor {
  background: #0fa0d1;
  box-shadow: 0 0 0 4px rgba(15, 160, 209, .13), 0 0 12px rgba(15, 160, 209, .36);
}

.flare-glass-tool.fg-mode-outdoor {
  --fg-accent: #087ba3;
  --fg-accent-hover: #066481;
  --fg-status-color: #0fa0d1;
  --fg-status-rgb: 15, 160, 209;
}

.flare-glass-tool.fg-mode-outdoor .fg-mode-button.fg-mode-active {
  background: #087ba3;
  box-shadow: 0 10px 24px rgba(15, 160, 209, .24);
}

.flare-glass-tool.fg-mode-outdoor .fg-eyebrow {
  color: #086f93;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 10px 26px rgba(15, 160, 209, .08);
}

.flare-glass-tool.fg-mode-outdoor .fg-price-note,
.flare-glass-tool.fg-mode-outdoor .fg-quote-count {
  border-color: rgba(15, 160, 209, .16);
  background: rgba(15, 160, 209, .08);
  color: #086f93;
}

.flare-glass-tool.fg-mode-outdoor [data-field="style"] { order: 1; }
.flare-glass-tool.fg-mode-outdoor [data-field="length"] { order: 2; }
.flare-glass-tool.fg-mode-outdoor [data-field="type"] { order: 3; }
.flare-glass-tool.fg-mode-outdoor [data-field="height"] { order: 4; }

/* 3) Panels and selector controls */
.fg-liquid-panel {
  position: relative;
  border: 1px solid var(--bridge-line);
  border-radius: var(--bridge-radius-lg);
  background: linear-gradient(145deg, var(--bridge-glass-strong), var(--bridge-glass));
  box-shadow: var(--bridge-shadow);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  overflow: visible;
}

.fg-liquid-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  /* Literal 29px rather than calc(var(--bridge-radius-lg) - 1px): naive CSS
     minifiers strip the spaces around the operator, and calc(...-1px) is
     invalid, so the whole declaration gets dropped. --bridge-radius-lg is
     30px and this overlay is inset by 1px, so 29px is the same value. */
  border-radius: 29px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .68), transparent 34%);
  pointer-events: none;
}

.fg-configurator {
  z-index: 20;
  padding: clamp(24px, 4vw, 48px);
}

.fg-configurator > * { position: relative; z-index: 1; }

.fg-steps {
  position: relative;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.fg-field {
  position: relative;
  min-width: 0;
  transition: opacity .26s ease, transform .26s ease;
}

.fg-field.fg-hidden { display: none; }

.fg-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--bridge-ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .02em;
}

.fg-step-number { display: none; }

.fg-choice {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 46px 0 16px;
  border: 1px solid rgba(25, 33, 29, .16);
  border-radius: var(--bridge-radius-sm);
  background: rgba(255, 255, 255, .72);
  color: var(--bridge-ink);
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.fg-choice-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fg-choice-arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--fg-accent);
  border-bottom: 2px solid var(--fg-accent);
  transform: translateY(-60%) rotate(45deg);
  transition: transform .18s ease;
  pointer-events: none;
}

.fg-choice:hover:not(:disabled),
.fg-choice:focus,
.fg-choice:focus-visible,
.fg-field.fg-open .fg-choice {
  border-color: rgba(35, 63, 53, .55);
  background: rgba(255, 255, 255, .88);
}

.fg-field.fg-open .fg-choice-arrow { transform: translateY(-35%) rotate(225deg); }

.fg-choice:disabled {
  color: rgba(25, 33, 29, .38);
  background: rgba(255, 255, 255, .38);
  border-color: rgba(25, 33, 29, .10);
  cursor: not-allowed;
}

/* Dropdown menus are moved to <body> by JS, so keep this selector global. */
.fg-menu {
  position: fixed;
  z-index: 9999;
  top: var(--fg-menu-top, 0);
  left: var(--fg-menu-left, 0);
  width: var(--fg-menu-width, 260px);
  max-height: var(--fg-menu-max, 304px);
  display: grid;
  gap: 6px;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(25, 33, 29, .12);
  border-radius: var(--bridge-radius-sm);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 20px 48px rgba(25, 33, 29, .14);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(.985);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.fg-menu.fg-menu-up { transform-origin: bottom center; }

.fg-menu.fg-menu-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fg-option {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--bridge-ink);
  font: 650 14px/1.25 var(--bridge-font);
  text-align: left;
  cursor: pointer;
}

.fg-option:hover,
.fg-option:focus-visible,
.fg-option.fg-selected {
  background: rgba(35, 63, 53, .08);
  color: var(--fg-accent);
  outline: none;
}

/* 4) Underbar, status, and action buttons */
.fg-underbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.fg-status {
  min-height: 20px;
  color: var(--bridge-muted);
  font-size: 14px;
  line-height: 1.45;
}

.fg-underbar-actions,
.fg-actions,
.fg-helper-actions,
.fg-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fg-underbar-actions { justify-content: flex-end; }

.fg-reset,
.fg-button,
.fg-add-button,
.fg-add-bubble,
.fg-spec-button,
.fg-contact-button,
.fg-remove-quote {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  font: 850 13px/1 var(--bridge-font);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.fg-reset,
.fg-spec-button,
.fg-contact-button,
.fg-remove-quote {
  border: 1px solid rgba(25, 33, 29, .12);
  background: rgba(255, 255, 255, .66);
  color: var(--fg-accent) !important;
  box-shadow: none;
}

.fg-button,
.fg-add-button,
.fg-add-bubble {
  border: 0;
  background: var(--fg-accent);
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(35, 63, 53, .24);
}

.fg-button:hover,
.fg-add-button:hover,
.fg-add-bubble:hover,
.fg-reset:hover,
.fg-spec-button:hover,
.fg-contact-button:hover,
.fg-remove-quote:hover {
  transform: translateY(-1px);
}

.fg-button:hover,
.fg-add-button:hover,
.fg-add-bubble:hover {
  background: var(--fg-accent-hover);
  box-shadow: 0 16px 36px rgba(35, 63, 53, .28);
}

.fg-add-bubble {
  flex: 0 0 42px;
  width: 42px;
  padding: 0;
  font-size: 0;
}

.fg-add-bubble::before {
  content: "+";
  display: block;
  color: #fff;
  font-size: 25px;
  font-weight: 850;
  line-height: .9;
  transform: translateY(-1px);
}

/* 5) Results and quote rows */
.fg-result-shell,
.fg-quote-shell { margin-top: 18px; }

.fg-result,
.fg-quote-panel,
.fg-contact-card,
.fg-empty {
  border: 1px solid rgba(35, 63, 53, .14);
  border-radius: var(--bridge-radius-md);
  background: rgba(255, 255, 255, .62);
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

.fg-result,
.fg-quote-panel { padding: clamp(16px, 2.5vw, 24px); }

.fg-result-head,
.fg-quote-head,
.fg-quote-top,
.fg-quote-grand,
.fg-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fg-result-head,
.fg-quote-head { margin-bottom: 14px; }

.fg-result-title,
.fg-quote-head h3,
.fg-quote-title {
  margin: 0;
  color: var(--bridge-ink);
  letter-spacing: -.035em;
}

.fg-result-title,
.fg-quote-head h3 { font-size: clamp(24px, 3vw, 34px); }
.fg-quote-title { font-size: 18px; }

.fg-price-note,
.fg-quote-count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(35, 63, 53, .10);
  border-radius: 999px;
  background: rgba(35, 63, 53, .06);
  color: var(--fg-accent);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.fg-products,
.fg-quote-products,
.fg-quote-items {
  display: grid;
  gap: 10px;
}

.fg-product,
.fg-quote-item,
.fg-odg-helper {
  border: 1px solid rgba(25, 33, 29, .10);
  border-radius: var(--bridge-radius-sm);
  background: rgba(255, 255, 255, .58);
  box-shadow: none;
}

.fg-product {
  display: grid;
  grid-template-columns: minmax(94px, .42fr) minmax(260px, 1.7fr) minmax(84px, .34fr) minmax(116px, .42fr);
  gap: 12px;
  align-items: center;
  padding: 13px;
}

.fg-sku-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.fg-sku-link {
  color: var(--fg-accent) !important;
  font-weight: 850;
  text-decoration: none !important;
  word-break: break-word;
}

.fg-sku-link:hover,
.fg-sku-link:focus-visible {
  text-decoration: none !important;
}

.fg-desc {
  color: var(--bridge-ink);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
}

.fg-desc .fg-measurement {
  display: block;
  margin-top: 5px;
  color: var(--bridge-muted);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
}

.fg-desc .fg-measurement strong {
  color: var(--bridge-ink);
  font-weight: 750;
}

.fg-desc .fg-specification,
.fg-desc .fg-quantity-note {
  display: block;
  margin-top: 4px;
  color: var(--bridge-muted);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
}

.fg-desc .fg-specification strong {
  color: var(--bridge-ink);
  font-weight: 750;
}

.fg-desc .fg-quantity-note {
  color: #8a5a12;
  font-weight: 700;
}

.fg-component-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(15, 160, 209, .28);
  border-radius: 999px;
  background: rgba(15, 160, 209, .10);
  color: #075f79;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .01em;
  white-space: normal;
}

.flare-glass-tool[data-mode="outdoor"] .fg-price-note,
.flare-glass-tool[data-mode="outdoor"] .fg-quote-count {
  border-color: rgba(15, 160, 209, .16);
  background: rgba(15, 160, 209, .08);
  color: #075f79;
}

.flare-glass-tool[data-mode="outdoor"] .fg-spec-button:hover,
.flare-glass-tool[data-mode="outdoor"] .fg-spec-button:focus-visible {
  border-color: rgba(15, 160, 209, .32);
  color: #075f79 !important;
}


.fg-cost {
  color: var(--bridge-ink);
  font-weight: 900;
  text-align: right;
}

.fg-cost span {
  display: block;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.035em;
}

.fg-cost small {
  display: block;
  margin-top: 4px;
  color: var(--bridge-muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
}

.fg-actions { justify-content: flex-end; }

.fg-odg-helper {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.fg-odg-copy {
  min-width: 0;
  color: var(--bridge-muted);
  font-size: 13px;
  line-height: 1.4;
}

.fg-odg-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--bridge-ink);
}

.fg-quote-item { padding: 13px; }
.fg-quote-products .fg-product { grid-template-columns: minmax(90px, .46fr) minmax(0, 1.45fr) minmax(86px, .38fr) minmax(104px, .42fr); }
.fg-quote-subtotal { margin-top: 10px; color: var(--bridge-ink); font-weight: 850; text-align: right; }
.fg-quote-grand { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(25, 33, 29, .10); font-weight: 900; }
.fg-quote-grand span:last-child { font-size: 24px; letter-spacing: -.04em; }

.fg-empty {
  padding: 20px;
  border-style: dashed;
  color: var(--bridge-muted);
  text-align: center;
  font-weight: 750;
  line-height: 1.45;
}

/* 6) Tempered glass cues and support card */
.fg-tempered-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(35, 63, 53, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .64);
  color: var(--fg-accent);
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .01em;
  white-space: normal;
}

.fg-tempered-active {
  background: rgba(153, 204, 0, .14);
  border-color: rgba(153, 204, 0, .34);
}

.fg-tempered-passive {
  background: rgba(35, 63, 53, .08);
  border-color: rgba(35, 63, 53, .20);
}

.fg-quote-products .fg-tempered-label {
  padding: 4px 8px;
  font-size: 10.5px;
}

.fg-outdoor-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(15, 160, 209, .24);
  border-radius: 999px;
  background: rgba(15, 160, 209, .10);
  color: #086f93;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .01em;
  white-space: normal;
}

.fg-quote-products .fg-outdoor-label {
  padding: 4px 8px;
  font-size: 10.5px;
}

.fg-contact-card {
  margin-top: 16px;
  padding: 16px;
}

.fg-contact-copy { min-width: 0; }

.fg-contact-copy strong {
  display: block;
  margin-bottom: 3px;
  color: var(--bridge-ink);
  font-size: 14px;
  font-weight: 900;
}

.fg-contact-copy span {
  display: block;
  color: var(--bridge-muted);
  font-size: 14px;
  line-height: 1.4;
}

.fg-contact-actions { justify-content: flex-end; flex: 0 0 auto; }

/* 7) Motion */
@keyframes fgTitleReveal {
  0% { transform: translateY(64px) scale(.985); opacity: 0; filter: blur(18px); }
  58% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes fgSoftIn {
  from { transform: translateY(10px); opacity: 0; filter: blur(8px); }
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}

@keyframes fgGlassSlideIn {
  0% {
    transform: translateY(-92px) scale(.992);
    opacity: 0;
    filter: blur(12px) drop-shadow(0 18px 22px rgba(18, 32, 24, .08));
  }
  62% { opacity: .97; }
  100% {
    transform: translateY(0) scale(1);
    opacity: .94;
    filter: drop-shadow(0 24px 28px rgba(18, 32, 24, .13));
  }
}

@keyframes fgGlassRiseMobile {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: .94; transform: translateY(0); }
}

@keyframes fgGlassFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes fgStatusPulse {
  0%, 100% {
    transform: scale(.94);
    box-shadow: 0 0 0 4px var(--fg-status-ring), 0 0 10px var(--fg-status-glow);
    filter: saturate(1);
  }
  45% {
    transform: scale(1.06);
    box-shadow: 0 0 0 5px var(--fg-status-ring-strong), 0 0 15px var(--fg-status-glow-strong), 0 0 24px var(--fg-status-glow-soft);
    filter: saturate(1.14);
  }
}

@keyframes fgStatusHalo {
  0% {
    opacity: .52;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(2.15);
  }
  100% {
    opacity: 0;
    transform: scale(2.15);
  }
}

/* 8) Responsive */
@media (max-width: 1020px) {
  .fg-product,
  .fg-quote-products .fg-product {
    grid-template-columns: minmax(94px, .5fr) minmax(0, 1.55fr) minmax(84px, .42fr);
  }
  .fg-product .fg-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .flare-glass-tool { padding: 18px 10px 38px; }
  .fg-hero { min-height: 292px; }
  .fg-title-stage { margin-top: 100px; padding-inline: 0; }
  .fg-title { font-size: clamp(34px, 12vw, 52px); }
  .fg-subtitle { font-size: 15px; }
  .fg-configurator { padding: 22px; }
  .fg-steps { grid-template-columns: 1fr; }
  .fg-underbar { align-items: stretch; flex-direction: column; }
  .fg-underbar-actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 520px) {
  .fg-mode-switch {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fg-mode-button {
    min-width: 0;
    padding-inline: 12px;
  }
}

@media (max-width: 640px) {
  .fg-mode-switch {
    width: 100%;
    border-radius: 22px;
  }
  .fg-mode-button {
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  /* Was width:136% on the image, anchored left: the panel ran off the right
     edge and gave the page a horizontal scrollbar. Centring it at that size
     would push BOTH bevelled ends off-canvas, leaving only a featureless band
     behind the title — so fit the whole panel to the screen instead. */
  .fg-glass-img { width: 100%; max-width: 100%; margin-top: 18px; }

  /*
    Mobile-safe render path for the hero.

    The desktop entrance stacks will-change:filter, an animated blur() and a
    drop-shadow() on one element. On iOS Safari that combination is a known
    cause of an element compositing to a blank layer — it occupies correct
    layout space but paints nothing, which is exactly "the glass is missing on
    my phone" while desktop is fine.

    So on phones: no will-change, no filter, and a plain opacity/translate
    entrance. Crucially the fill-mode is `forwards`, not `both` — the from-state
    (opacity 0) is then never held before the animation runs, so if the
    animation fails to start for any reason the image simply sits at its normal
    visible state instead of staying invisible.
  */
  .fg-glass-img {
    filter: none;
    will-change: auto;
    animation: fgGlassRiseMobile .8s cubic-bezier(.18,.84,.24,1) 0s forwards;
  }

  .fg-liquid-panel { border-radius: 24px; }
  .fg-result-head,
  .fg-quote-head,
  .fg-quote-top,
  .fg-quote-grand,
  .fg-contact-card,
  .fg-odg-helper { flex-direction: column; align-items: stretch; }
  .fg-price-note,
  .fg-quote-count { width: fit-content; white-space: normal; }
  .fg-product,
  .fg-quote-products .fg-product { grid-template-columns: 1fr; gap: 8px; }
  .fg-cost { text-align: left; }
  .fg-actions,
  .fg-helper-actions,
  .fg-contact-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .fg-button,
  .fg-spec-button,
  .fg-contact-button { width: 100%; }
  .fg-reset { flex: 1 1 auto; }
  .fg-add-bubble { flex: 0 0 42px; }
  .fg-quote-subtotal { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .flare-glass-tool *,
  .flare-glass-tool *::before,
  .flare-glass-tool *::after,
  .fg-menu,
  .fg-status-dot,
  .fg-status-dot::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fg-glass-img { animation: none !important; }
}

/* Stage 15.1: compact outdoor chips and side-by-side helper buttons */
.fg-odg-helper .fg-helper-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.fg-odg-helper .fg-spec-button {
  min-width: 0;
  white-space: nowrap;
}

.fg-outdoor-label {
  max-width: none;
  padding-inline: 8px;
  font-size: 10px;
  white-space: nowrap;
}

@media (min-width: 1021px) {
  .flare-glass-tool[data-mode="outdoor"] .fg-product {
    grid-template-columns: minmax(150px, .58fr) minmax(240px, 1.62fr) minmax(84px, .34fr) minmax(116px, .42fr);
  }
}

@media (min-width: 641px) and (max-width: 1020px) {
  .flare-glass-tool[data-mode="outdoor"] .fg-product,
  .flare-glass-tool[data-mode="outdoor"] .fg-quote-products .fg-product {
    grid-template-columns: minmax(150px, .62fr) minmax(0, 1.5fr) minmax(84px, .42fr);
  }
}

@media (max-width: 640px) {
  .fg-odg-helper .fg-helper-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
    gap: 8px;
    width: 100%;
  }

  .fg-odg-helper .fg-spec-button {
    width: 100%;
    min-height: 40px;
    padding-inline: 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .fg-outdoor-label {
    font-size: 10px;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .fg-odg-helper .fg-spec-button {
    padding-inline: 6px;
    font-size: 10px;
  }
}