/* =========================================================
   RIG CONFIGURATOR — STYLES
   =========================================================
   This is the file to edit if you want to change how things
   LOOK — colors, spacing, fonts, card shape, button states.
   For what appears in the catalogue, edit rig-data.js instead.
   For how the buttons BEHAVE, edit script.js.

   Jump to:
     1. Theme variables (colors, fonts, spacing)
     2. Page structure (header/footer/layout)
     3. Rig summary panel (the chain at the top)
     4. Category sections
     5. Item cards / buttons  <-- most requested edits live here
     6. Mount + spec badges
   ========================================================= */

/* ---------- 1. THEME VARIABLES ---------- */
:root {
  /* Base surfaces */
  --bg: #131417;
  --surface-1: #191b1f;
  --surface-2: #202329;
  --surface-3: #2a2e36;

  /* Borders */
  --border: #33373f;
  --border-strong: #454a54;
  --border-accent: #6bff9e;

  /* Text */
  --text-primary: #edeef0;
  --text-secondary: #a7acb6;
  --text-muted: #6c7078;
  --text-accent: #6bff9e;
  --text-success: #6bff9e;

  /* Accent wash (selected state) */
  --bg-accent: rgba(107, 255, 158, 0.12);

  /* Mount badge colors — add more if you use more than 3 mount types */
  --mount-color-1: #7db8ff;   /* blue */
  --mount-color-2: #63d9c9;   /* teal */
  --mount-color-3: #ff9d7d;   /* coral */
  --mount-color-4: #d9a7ff;   /* violet, used once you have a 4th mount */
  --mount-color-5: #ffd76b;   /* amber, used once you have a 5th mount */

  /* Wireless family colors — match the actual TX/RX/monitor family
     groups the compatibility logic uses, so the thumbnail border
     lets you spot compatible gear at a glance */
  --family-teradek-6: #5a8fd6;        /* blue */
  --family-teradek-500: #4fae8f;      /* teal-green */
  --family-dji-transmission: #d9822b; /* amber/orange */
  --family-dji-sdr: #9d6fd0;          /* purple */

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 6px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ---------- 2. PAGE STRUCTURE ---------- */
.snapshot-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.snapshot-viewer-panel {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  overflow: auto;
}

.snapshot-viewer-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.snapshot-viewer-hint {
  color: var(--text-accent);
  font-size: 0.9rem;
  text-align: center;
  max-width: 480px;
  margin: 0.5rem 0 0;
}

.snapshot-viewer-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
}

.page-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1rem;
}

.page-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.page-header-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.quick-actions-row {
  margin-bottom: 0.6rem; /* same spacing page-header-top used to have below itself, now that these buttons live in their own row instead of sharing it with the title */
  justify-content: space-between; /* pushes .quick-actions-group to the left and #reset-btn to the far right, with the gap between them stretching/shrinking with available width */
}

.quick-actions-group {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.project-name-row {
  margin-bottom: 0.75rem; /* separates it from the intro paragraphs below, matching the gap page-header-top already has above it */
}

.page-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.reset-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}

.reset-btn:hover {
  border-color: var(--text-accent);
  color: var(--text-accent);
}

.reset-btn:active {
  background: var(--surface-1);
}

.page-header p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.95rem;
}

.app {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

.saved-slots {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 1rem;
}

.saved-slots:empty {
  display: none;
}

.snapshot-btn-below-slots-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  justify-content: center;
}

.saved-slots-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.saved-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.saved-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.7rem 0.85rem;
}

.saved-slot-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.saved-slot-label.has-data {
  color: var(--text-accent);
}

.saved-slot-label.has-data::before {
  content: '\25CF ';
  font-size: 0.6rem;
}

.saved-slot-buttons {
  display: flex;
  gap: 6px;
}

.saved-slot-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.saved-slot-btn:hover:not(:disabled) {
  border-color: var(--text-accent);
  color: var(--text-accent);
}

.saved-slot-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.price-total {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 0.6rem 1.1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.price-total-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.price-total-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--text-accent);
}

.price-total-period-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.price-total-period {
  font-size: 1.05rem; /* slightly smaller than the daily rate above it — still an amount, but a secondary one */
}

.price-total-weight-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.price-total-weight {
  font-size: 1rem;
  color: var(--text-secondary); /* not green — this isn't a price, kept visually distinct from the money figures above it */
}

.price-total.price-total-alert {
  border-color: #ff5c5c;
}

.price-total-warning {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: #ff5c5c;
  text-align: right;
  max-width: 190px;
}

.price-total-warning-short {
  display: none; /* mobile-only variant — see the max-width:640px block below */
}

.rental-dates-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 1.5rem;
}

.rental-dates-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}

.rental-dates-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 0.4rem;
}

.rental-dates-note {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.rental-dates-fields {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.rental-dates-buttons {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.discount-buttons-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.student-discount-btn {
  display: block;
  flex: 1 1 200px;
  padding: 0.7rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

#shooting-days-btn {
  width: 100%;
  margin-top: 0.75rem;
}

.student-discount-btn:hover {
  border-color: var(--border-strong);
}

.student-discount-btn.selected {
  color: var(--text-accent);
  background: rgba(107, 255, 158, 0.16);
  border-style: solid;
  border-color: var(--border-accent);
  box-shadow: 0 0 12px rgba(107, 255, 158, 0.25);
}

.student-discount-badge {
  margin-top: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #131417;
  background: var(--text-accent);
  border-radius: 4px;
  text-align: center;
}

.rental-date-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rental-date-field input[type="date"] {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  min-width: 170px;
  color-scheme: dark; /* tells the browser to render its native calendar icon/popup in a dark-friendly palette — the deepest styling reach CSS has into a date input, since the popup itself is native browser UI */
}

.rental-date-field input[type="date"]:focus {
  outline: none;
  border-color: var(--border-accent);
}

.back-to-top-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.back-to-top-btn {
  width: 100%;
  max-width: 480px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-accent);
  background: var(--bg-accent);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.back-to-top-btn:hover {
  background: rgba(107, 255, 158, 0.2);
  border-color: var(--text-accent);
}

/* Both "Download build snapshot" buttons (header + bottom of page) —
   deliberately more eye-catching than the neutral Quick Save/Load/
   Reset buttons and even the outlined "See your build on top" button,
   since this is the one action people are most likely to actually
   want. Solid accent fill + dark text (rather than just an accent
   outline) is what gives it real visual weight. Placed AFTER
   .back-to-top-btn above so it correctly wins the cascade tie on the
   bottom snapshot button, which carries both classes at once. */
.snapshot-cta-btn {
  color: #131417;
  background: var(--text-accent);
  border: 1px solid var(--text-accent);
  font-weight: 700;
  box-shadow: 0 0 16px rgba(107, 255, 158, 0.4);
}

.snapshot-cta-btn:hover {
  background: #7dffab;
  border-color: #7dffab;
  box-shadow: 0 0 20px rgba(107, 255, 158, 0.55);
}

.page-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 6rem; /* generous bottom padding — the fixed price-total widget (bottom-right) can grow tall with the period-price line + warning, and needs room to never sit on top of this footer's content */
  border-top: 1px solid var(--border);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding-top: 1.5rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.footer-location {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.footer-links {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: color 0.12s ease, border-color 0.12s ease;
}

.footer-links a:hover {
  color: var(--text-accent);
  border-color: var(--text-accent);
}

.footer-sep {
  color: var(--border-strong);
}

/* ---------- 3. RIG SUMMARY PANEL ---------- */
.summary-panel {
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.75rem;
}

.photo-hint {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0 0 0.35rem;
}

.photo-hint:last-of-type {
  margin-bottom: 1.75rem;
}

.summary-chain {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.summary-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  flex: 0 0 96px; /* fixed, not just a minimum — keeps every slot the same size regardless of name length or item count */
  text-align: center;
}

.summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: -0.02em;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
}

.summary-slot.filled .summary-icon {
  background: var(--bg-accent);
  color: var(--text-accent);
  border: 1px solid var(--border-accent);
}

.summary-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary-value {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* long names truncate instead of stretching the slot */
}

.summary-slot.filled .summary-value {
  color: var(--text-primary);
}

.summary-link-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.summary-link-block:hover .summary-icon {
  border-color: var(--text-accent);
}

.summary-link-block:hover .summary-value {
  text-decoration: underline;
}

.summary-dots {
  display: flex;
  flex-wrap: wrap; /* categories with many simultaneous selections (e.g. Grip and Power) can have enough dots to need a 2nd row — that's fine now, since the row's height below is reserved for exactly 2 rows */
  justify-content: center;
  align-content: flex-start;
  gap: 4px;
  max-width: 100%;
  overflow: hidden; /* a hard safety cap — if a selection is ever large enough to need a 3rd row, those extra dots clip rather than growing the slot further */
  height: 22px; /* fixed, not min — reserved for up to 2 rows of 9px dots plus the 4px gap between them (9 + 4 + 9 = 22), so a category whose dots wrap to a 2nd row (like Grip and Power with many items) never grows its slot taller than the rest. This element is ALWAYS rendered (see renderSummary() in script.js), even empty (0 or 1 item selected), so every slot keeps the exact same height regardless of selection count, instead of the summary panel (and everything below it) shifting down whenever a category's dots row appears, disappears, or grows */
}

.summary-dot {
  position: relative; /* anchors the ::before hit-area expansion below */
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-accent);
  border: 1px solid var(--border-accent);
  cursor: pointer;
  transition: background 0.12s ease;
}

/* The visible dot stays exactly 9px, but this invisible pseudo-
   element extends the actual TAPPABLE area to ~28px around it
   without changing how it looks — a small dot like this is genuinely
   hard to hit precisely on a touchscreen otherwise. Clicks anywhere
   in this expanded area still register as clicking .summary-dot
   itself, since a pseudo-element isn't independently interactive. */
.summary-dot::before {
  content: '';
  position: absolute;
  inset: -5px; /* modest expansion — dots sit only 4px apart, so a bigger inset would make neighboring hit-zones overlap and cause mis-taps */
}

.summary-dot:hover {
  background: var(--text-accent);
}

.summary-arrow {
  color: var(--text-muted);
  padding-top: 10px;
  font-size: 0.9rem;
}

.summary-badge {
  margin-top: 12px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.summary-badge.ok { color: var(--text-success); }
.summary-badge.info { color: var(--text-muted); }

/* ---------- 4. CATEGORY SECTIONS ---------- */
.category-section {
  margin-bottom: 1.75rem;
}

.category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.category-heading .label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.unlock-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.unlock-btn:hover {
  border-color: var(--text-accent);
  color: var(--text-accent);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 160px));
  gap: 10px;
}

/* "Batteries and Power" — small toggle buttons in a wrapping row,
   deliberately NOT a grid of cards (see chipOnly on that category's
   CATS entry) since there's nothing to illustrate for a flat
   battery/power add-on. */
.chip-only-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* "Custom Charge" renders as its own section well below every other
   category (see renderCustomChargeSection() in script.js) — the extra
   top margin + divider line give it clear visual separation instead
   of reading as part of whatever category happens to precede it. */
.custom-charge-section {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

/* Power Limit renders as its own section too, right below Custom
   Charge (see renderPowerLimitSection() in script.js) — same
   separation treatment since it's another build-wide setting rather
   than a category of gear. */
.power-limit-section {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.power-limit-status {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.power-limit-status-over {
  color: #ff5c5c; /* same red as the price panel's "expensive order" warning — this is also an actionable alert, not just info */
  font-weight: 600;
}

/* Label above a subgroup of chip-only buttons (e.g. "batteries" inside
   Grip and Power) — separates related items onto their own visual row
   without making them a whole new category section. */
.chip-only-subgroup-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.75;
  margin: 14px 0 8px;
}

.chip-only-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.chip-only-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.chip-only-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-only-btn.selected {
  color: var(--text-accent);
  background: rgba(107, 255, 158, 0.16);
  border-color: var(--border-accent);
  box-shadow: 0 0 12px rgba(107, 255, 158, 0.25);
}

/* Wraps a stock-limited battery's main toggle button together with
   its quantity chip row (1 through maxStock) as one unit within the
   surrounding .chip-only-row — same "wrap + strip below it" idea used
   elsewhere (camera accessories, lens focal lengths), adapted to this
   flex-wrap layout instead of the card grid. */
.battery-item-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qty-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px; /* keeps a 10-chip row from stretching too wide, wraps onto a 2nd line instead */
}

.qty-chip {
  min-width: 28px;
  padding: 0.3rem 0;
  text-align: center;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.qty-chip:hover {
  border-color: var(--border-strong);
}

.qty-chip.selected {
  color: #131417;
  background: var(--text-accent);
  border-color: var(--text-accent);
  font-weight: 700;
}

/* Free toggle boxes nested inside a selected item's own card (e.g.
   Spotlight mount's "19 degrees"/"36 degrees") — same chip look as
   the quantity row above, just wide enough for a text label instead
   of a single digit, and independently toggleable (no exclusivity). */
.accessory-chip {
  min-width: auto;
  padding: 0.3rem 0.6rem;
}

.accessory-chip-row {
  max-width: none;
}

/* Ronin 4D's card style — accessory chips (X9 Motor / Lidar mk1) sit
   INSIDE the card's own bordered box, matching the look of Large
   Slider or Ronin 2's grouped chips. The outer element carries
   .item-card too (so it gets that class's border/background/padding
   for free) — this just adds the gap between the inner select-region
   and the accessory row below it. */
.camera-card-with-inline-accessories {
  gap: 10px;
}

.camera-select-region {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.camera-select-region:disabled {
  cursor: not-allowed;
}

.inline-accessory-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- 5. ITEM CARDS / BUTTONS ---------- */
/* This is the block to edit for card shape, padding, hover state, etc. */

.item-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-3);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.item-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid var(--border);
  margin-bottom: 2px;
}

/* Wireless family + role color coding — a colored ring around the
   thumbnail so TX/RX/receiver-monitor items from the same family
   (Teradek 6, Teradek 500, DJI Transmission, DJI SDR) are easy to
   spot together. Color = family, border style = role:
   solid = transmitter, dashed = receiver, dotted = monitor with a
   built-in receiver. See wirelessFamily()/wirelessRole() in script.js. */
.item-thumb[data-family="teradek-6"]        { border-color: var(--family-teradek-6); }
.item-thumb[data-family="teradek-500"]      { border-color: var(--family-teradek-500); }
.item-thumb[data-family="dji-transmission"] { border-color: var(--family-dji-transmission); }
.item-thumb[data-family="dji-sdr"]          { border-color: var(--family-dji-sdr); }

.item-thumb[data-family] {
  border-width: 2px;
}

.item-thumb[data-role="tx"]         { border-style: solid; }
.item-thumb[data-role="rx"]         { border-style: dashed; }
.item-thumb[data-role="monitor-rx"] { border-style: dotted; }

.item-thumb-placeholder {
  object-fit: contain;
  padding: 14%;
  box-sizing: border-box;
}

.item-card:disabled .item-thumb,
.item-card.card-disabled .item-thumb {
  filter: grayscale(1);
}

/* Same greyscale treatment for Ronin 4D's div-based card style —
   :disabled is a pseudo-class that only applies to actual form
   elements, so a <div> can never match it; this uses an explicit
   class instead (see the "disabled ? 'card-disabled' : ''" check in
   renderCameraCardWithInlineAccessories()). */
.camera-card-with-inline-accessories.card-disabled .item-thumb {
  filter: grayscale(1);
}

.item-card:hover:not(:disabled):not(.card-disabled) {
  border-color: var(--border-strong);
}

.item-card.selected {
  background: rgba(107, 255, 158, 0.16);
  border-color: var(--border-accent);
  box-shadow: 0 0 12px rgba(107, 255, 158, 0.25);
}

.item-card:disabled,
.item-card.card-disabled {
  background: var(--surface-1);
  border-style: dashed;
  cursor: not-allowed;
}

.camera-card-with-inline-accessories.card-disabled {
  background: var(--surface-1);
  border-style: dashed;
}

/* "Unlock Filters" / "Unlock Focus" — sits as a grid item alongside
   real cards (same column sizing from .category-grid), but styled
   as a plain action button rather than a card, since it doesn't
   represent a piece of gear. */
.unlock-category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 96px;
  padding: 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.unlock-category-btn:hover {
  border-color: var(--border-strong);
}

.unlock-category-btn.selected {
  color: var(--text-accent);
  background: rgba(107, 255, 158, 0.16);
  border-color: var(--border-accent);
  box-shadow: 0 0 12px rgba(107, 255, 158, 0.25);
}

.second-body-card {
  border-style: dashed; /* always, even when enabled — signals "add-on", not a primary choice */
}

.second-body-card.selected {
  border-style: solid;
}

/* Wraps a camera's own card together with its small accessory chips
   (e.g. Ronin 4D's X9 Motor / Lidar mk1) so they read as one visual
   unit — small add-ons attached to the card — without needing any
   extra grid width. Stacks the chip row BELOW the card, both at the
   exact same width as a normal single card; a true side-by-side
   layout would need roughly double the width of one grid column
   (120-160px), which isn't enough room for both the full card and a
   chip strip next to it. */
.camera-with-accessories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Wraps a card (e.g. a Frame modifier) together with its own child
   add-on item(s) (e.g. "2x C-stands + Sandbags") stacked directly
   below it, in the same grid cell — see renderCardWithQty()'s
   "childOf" handling in script.js. A bit more breathing room than
   .camera-with-accessories since a child here is a full card, not a
   small chip row. */
.item-with-child-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.camera-accessory-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* was fine as a single row with only 1-2 camera accessory chips, but a 6-lens set's focal-length submenu needs to wrap onto multiple rows */
  gap: 6px;
}

.camera-accessory-chip {
  flex: 1 1 38px; /* grows to share space evenly within a row, but wraps to a new row rather than shrinking illegibly small once a row is full */
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  padding: 8px 6px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.camera-accessory-chip:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.camera-accessory-chip:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.camera-accessory-chip.selected {
  color: var(--text-accent);
  background: rgba(107, 255, 158, 0.16);
  border-style: solid;
  border-color: var(--border-accent);
  box-shadow: 0 0 8px rgba(107, 255, 158, 0.2);
}

.item-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.item-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0; /* allow the name to truncate/wrap instead of pushing the checkmark out */
}

.item-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  min-width: 0;
}

.item-card:disabled .item-name,
.item-card.card-disabled .item-name {
  color: var(--text-muted);
}

.camera-card-with-inline-accessories.card-disabled .item-name {
  color: var(--text-muted);
}

.check-icon {
  color: var(--text-accent);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Always occupies its layout space (unlike display:none), even when
   not shown — otherwise a card's available name-text width differs
   between selected/unselected states, which for long names (e.g.
   "Red V-Raptor VV") can be just enough to tip the name from one
   line to two ONLY when selected, making the card visibly taller. */
.check-icon-hidden {
  visibility: hidden;
}

.item-spec-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.item-spec-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.item-focal-lengths {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.item-caveat {
  display: block;
  font-size: 0.7rem;
  line-height: 1.3;
  color: #d9a441; /* amber — informational, distinct from the muted lock-reason gray and the red price warning */
  height: calc(1.3em * 5); /* fixed, not min — always reserve exactly 5 lines (the Pavotube 6C's weight/internal battery/length/+magic arms/+power banks is the longest stack) so a card's height never jumps when a caveat appears/disappears */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-left: -10px;  /* ~2 characters of extra width on each side before wrapping, borrowing a little of the card's own padding — safely within it (card padding is 1.15rem ≈ 18px) without touching the border */
  margin-right: -10px;
}

.item-caveat-hidden {
  visibility: hidden; /* content is always rendered (see script.js) so the space above is reserved; only show it once a caveat actually applies */
}

.item-reason {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
  height: calc(1.3em * 2); /* fixed, not min — always reserve exactly 2 lines so a card's height never jumps between enabled/disabled */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  visibility: hidden; /* content is always rendered (see script.js) so the space above is reserved; only show it once actually disabled */
}

.item-card:disabled .item-reason,
.item-card.card-disabled .item-reason {
  visibility: visible;
}

.camera-card-with-inline-accessories.card-disabled .item-reason {
  visibility: visible;
}

/* Group card (e.g. the IR-ND 6-piece set) — a plain div, not a
   button, since selection happens per-chip inside it rather than on
   the card itself. Reuses .item-card's look but needs its own
   disabled-state and reason-visibility rules since it has no native
   :disabled pseudo-class to hook into. */
.group-card {
  cursor: default;
}

.group-card.group-card-clickable {
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.group-card.group-card-clickable:hover:not(.group-card-disabled) {
  border-color: var(--border-strong);
}

.group-card.group-card-clickable.selected {
  background: rgba(107, 255, 158, 0.16);
  border-color: var(--border-accent);
  box-shadow: 0 0 12px rgba(107, 255, 158, 0.25);
}

.group-card.group-card-disabled {
  background: var(--surface-1);
  border-style: dashed;
}

.group-card.group-card-disabled .item-thumb {
  filter: grayscale(1);
}

.group-card.group-card-disabled .item-reason {
  visibility: visible;
}

.group-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.group-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 4px 2px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.group-chip:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.group-chip.selected {
  border: 2px solid var(--border-accent);
  background: var(--bg-accent);
  color: var(--text-accent);
  padding: 3px 1px; /* keep chip size stable when border thickens */
}

.group-chip:disabled {
  cursor: not-allowed;
  border-style: dashed;
  color: var(--text-muted);
}

/* ---------- 6. MOUNT + SPEC BADGES ---------- */
.badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.badge-mount-1 { background: rgba(125, 184, 255, 0.15); color: var(--mount-color-1); }
.badge-mount-2 { background: rgba(99, 217, 201, 0.15); color: var(--mount-color-2); }
.badge-mount-3 { background: rgba(255, 157, 125, 0.15); color: var(--mount-color-3); }
.badge-mount-4 { background: rgba(217, 167, 255, 0.15); color: var(--mount-color-4); }
.badge-mount-5 { background: rgba(255, 215, 107, 0.15); color: var(--mount-color-5); }

.badge-coverage {
  background: var(--surface-3);
  color: var(--text-secondary);
}

/* Sensor-size badge — a small circle next to the item name (cameras
   only), distinct from the rectangular pill badges below. Reuses the
   badge-mount-N classes above for its color (same palette, applied
   via sensorBadgeClass() in script.js so the color tracks sensor
   size rather than an arbitrary hash) — this rule only sets the
   circular shape/sizing on top of whichever color class is paired
   with it. */
.item-bubble-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.sensor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  border: 1.5px solid currentColor;
}

/* ---------- 7. MOBILE (narrow screens, ~640px and under) ---------- */
/* Layout throughout this file already flexes reasonably at any width
   (rem units, minmax() grids, flex-wrap) — everything in this block
   is a deliberate refinement on top of that, not a rescue fix for
   something that was otherwise broken. */
@media (max-width: 640px) {
  .page-header {
    padding: 1.75rem 1rem 1rem;
  }

  .page-header h1 {
    font-size: 1.5rem; /* 2rem reads oversized/cramped against real phone widths in this condensed uppercase font */
  }

  .page-header-buttons {
    width: 100%;
  }

  .page-header-buttons .reset-btn {
    flex: 1 1 auto; /* three buttons share the row evenly instead of each sizing to its own text and risking overflow */
  }

  .app,
  .saved-slots,
  .snapshot-btn-below-slots-wrap,
  .rental-dates-wrap,
  .back-to-top-wrap,
  .page-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* The floating price widget takes up real, precious space on a
     small screen, and can grow tall (daily rate + period total +
     warning all at once) — pull it in from the edge slightly and
     tighten its type so it stays legible without dominating the
     viewport. */
  .price-total {
    bottom: 10px;
    right: 10px;
    padding: 0.4rem 0.75rem;
    gap: 0px;
    max-width: 58vw; /* keeps a long warning line from ever spanning the full screen width */
  }

  .price-total-amount {
    font-size: 1.1rem;
  }

  .price-total-period {
    font-size: 0.9rem;
  }

  .price-total-period-row {
    margin-top: 2px;
    padding-top: 2px;
  }

  .price-total-weight-row {
    display: none; /* weight omitted from the floating widget on mobile — still shown in the downloadable PNG snapshot and on desktop, this is mobile-widget-only */
  }

  .price-total-warning {
    max-width: none; /* the 190px desktop cap is wider than useful here — let it use the widget's own constrained width instead */
    margin-top: 2px;
  }

  .price-total-warning-full {
    display: none; /* swap to the shorter variant on mobile — the full sentence was the single biggest reason the widget grew tall */
  }

  .price-total-warning-short {
    display: block;
  }

  /* Group chips (radio focus motors, ND filter sets, Canon RF
     Autofocus, Intercom quantity tiers) — 3 fixed columns get tight
     once the card itself is at its smallest (120px) width, most
     noticeably on chips with longer labels like "35mm f1.8 IS" or
     "8 units". Dropping to 2 columns on narrow screens trades a
     taller card for a chip that's actually comfortable to read and
     tap. */
  .group-chip-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .group-chip {
    font-size: 0.7rem;
    padding: 7px 4px; /* taller than the desktop 4px — a touch target, not just a hover target */
  }

  .rental-dates-card {
    padding: 1rem 1.1rem;
  }

  .rental-dates-title {
    font-size: 0.9rem;
  }

  .rental-dates-note {
    font-size: 0.78rem;
  }

  .rental-date-field {
    font-size: 0.7rem;
    gap: 0.25rem;
  }

  .rental-date-field input[type="date"] {
    min-width: 0;
    flex: 1 1 130px; /* lets both date fields sit closer to full-width and stack cleanly instead of relying only on wrapping */
    font-size: 0.8rem;
    padding: 0.4rem 0.55rem;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Shorter item cards, mobile only — the thumbnail image is by far
     the biggest vertical contributor per card, so a flatter aspect
     ratio does most of the work; tighter padding/gaps and a
     single-line (not two-line) reserved reason height trim the rest.
     Desktop's .item-card rules (rule 5, ~line 638) are untouched. */
  .item-thumb {
    aspect-ratio: 16 / 9; /* slightly taller than the previous 16/7 — still flatter than desktop's 16/10 */
  }

  .item-card {
    gap: 4px;
    padding: 0.7rem 0.85rem;
  }

  .item-reason {
    height: 1.3em; /* one line instead of two — still reserved, so height doesn't jump, just a smaller reservation */
    -webkit-line-clamp: 1;
  }

  .item-caveat {
    height: calc(1.3em * 5); /* keep all 5 lines reserved/visible on mobile too, so the Pavotube 6C's full stack doesn't get clipped */
    -webkit-line-clamp: 5;
  }
}