/* Shopify fees calculator. Builds on studio-luxury.css tokens and guides.css layout. */
.fc-hero { padding-bottom: 40px; }
.fc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fc-tool { padding: 40px 0 16px; border-bottom: 1px solid var(--border-dark); scroll-margin-top: 88px; }
.fc { display: grid; gap: 28px; border: 1px solid var(--border-light); background: var(--bg-card); border-radius: 22px; padding: 28px; }

.fc-controls { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: end; }
.fc-control { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fc-control > label, .fc-control legend { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 0; }
.fc-control legend { margin-bottom: 8px; }
.fc select, .fc input[type="number"] { width: 100%; background: #071714; border: 1px solid var(--border-light); border-radius: 10px; color: #fff; font: 500 15px var(--font-mono); padding: 10px 12px; min-height: 44px; }
.fc select { font-family: var(--font-sans); min-width: 230px; cursor: pointer; }
.fc select:hover, .fc input[type="number"]:hover { border-color: rgba(45, 226, 166, 0.45); }
.fc select:focus-visible, .fc input:focus-visible { outline: 2px solid var(--emerald-accent); outline-offset: 1px; }

.fc-seg-row { display: inline-flex; border: 1px solid var(--border-light); border-radius: 12px; padding: 3px; background: #071714; }
.fc-seg-row input { position: absolute; opacity: 0; pointer-events: none; }
.fc-seg-row label { padding: 9px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; min-height: 38px; display: inline-flex; align-items: center; }
.fc-seg-row label:hover { color: #fff; }
.fc-seg-row input:checked + label { background: var(--emerald-accent); color: #04110e; }
.fc-seg-row input:focus-visible + label { outline: 2px solid var(--emerald-accent); outline-offset: 2px; }

.fc-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
.fc-group h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #fff; }
.fc-field { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; margin-bottom: 10px; }
.fc-field[hidden] { display: none; }
.fc-field label { font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.fc-cur { color: var(--text-dim); font-size: 12px; }

.fc-results { display: grid; gap: 16px; border-top: 1px solid var(--border-dark); padding-top: 24px; }
.fc-verdict { margin: 0; font-size: 19px; line-height: 1.55; color: var(--text-main); max-width: 72ch; }
.fc-verdict strong { color: var(--emerald-accent); }
.fc-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fc-plan { position: relative; border: 1px solid var(--border-dark); border-radius: 16px; padding: 18px; background: rgba(0, 0, 0, 0.14); display: grid; gap: 10px; align-content: start; transition: border-color 0.2s ease, transform 0.2s ease; }
.fc-plan:hover { border-color: var(--border-light); transform: translateY(-2px); }
.fc-plan.is-best { border-color: rgba(45, 226, 166, 0.6); background: linear-gradient(180deg, rgba(45, 226, 166, 0.09), rgba(0, 0, 0, 0.14)); }
.fc-plan.is-out { opacity: 0.62; }
.fc-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.fc-plan-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.fc-swatch { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.fc-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px; background: var(--emerald-accent); color: #04110e; white-space: nowrap; }
.fc-badge.warn { background: transparent; color: var(--gold-accent); border: 1px solid rgba(229, 192, 123, 0.5); }
.fc-total { font: 700 30px/1.05 var(--font-mono); color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fc-total small { font: 500 13px var(--font-sans); color: var(--text-dim); letter-spacing: 0; }
.fc-eff { font-size: 13px; color: var(--text-muted); }
.fc-lines { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border-dark); display: grid; gap: 5px; }
.fc-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-muted); }
.fc-lines li b { font: 500 13px var(--font-mono); color: var(--text-main); font-variant-numeric: tabular-nums; }
.fc-year { font-size: 12px; color: var(--text-dim); }
.fc-note { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 90ch; }
.fc-note:empty { display: none; }

.fc-chart-block { display: grid; gap: 12px; border-top: 1px solid var(--border-dark); padding-top: 24px; }
.fc-chart-head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #fff; }
.fc-chart-head p { margin: 0; font-size: 14px; color: var(--text-muted); }
.fc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-muted); }
.fc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.fc-chart { position: relative; width: 100%; min-height: 240px; }
.fc-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.fc-chart svg:focus:not(:focus-visible) { outline: none; }
.fc-chart svg:focus-visible { outline: 2px solid var(--emerald-accent); outline-offset: 4px; border-radius: 6px; }
.fc-chart .fc-grid line { stroke: rgba(255, 255, 255, 0.07); }
.fc-chart .fc-axis text { fill: var(--text-dim); font: 500 11px var(--font-mono); }
.fc-chart .fc-baseline { stroke: rgba(255, 255, 255, 0.22); }
.fc-chart .fc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-chart .fc-label { font: 600 12px var(--font-sans); fill: var(--text-main); }
.fc-chart .fc-you line { stroke: var(--gold-accent); stroke-dasharray: 3 4; }
.fc-chart .fc-you text { fill: var(--gold-accent); font: 700 11px var(--font-sans); letter-spacing: 0.08em; }
.fc-chart .fc-cross line { stroke: rgba(255, 255, 255, 0.4); }
.fc-chart .fc-cross circle { stroke: var(--bg-card); stroke-width: 2; }
.fc-tip { position: absolute; top: 0; pointer-events: none; background: #06130f; border: 1px solid var(--border-light); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--text-main); min-width: 180px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); display: grid; gap: 4px; z-index: 3; }
.fc-tip[hidden] { display: none; }
.fc-tip strong { font: 700 12px var(--font-mono); color: #fff; margin-bottom: 2px; }
.fc-tip div { display: flex; align-items: center; gap: 8px; }
.fc-tip div b { margin-left: auto; font: 500 12px var(--font-mono); padding-left: 12px; }
.fc-tip .is-min b { color: var(--emerald-accent); }

@media (max-width: 1100px) {
  .fc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fc-inputs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fc { padding: 18px; border-radius: 18px; gap: 22px; }
  .fc-tool { padding-top: 24px; }
  .fc-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fc select { min-width: 0; }
  .fc-seg-row { display: flex; }
  .fc-seg-row label { flex: 1; justify-content: center; padding: 9px 10px; }
  .fc-field { grid-template-columns: minmax(0, 1fr) 118px; gap: 10px; }
  .fc-plans { grid-template-columns: minmax(0, 1fr); }
  .fc-verdict { font-size: 17px; }
  .fc-total { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-plan { transition: none; }
  .fc-plan:hover { transform: none; }
}
.fc-chart circle.fc-cross-pt { stroke: var(--bg-card); stroke-width: 2; }