/* Spencer Trailer Configurator — styles */
.stc-configurator-root, .stc-review-root {
  --brand: #1a3a6c; --brand-light: #2855a3; --accent: #c41e3a;
  --bg: #fff; --bg-alt: #f7f9fc; --border: #e1e6ee;
  --text: #1a202c; --muted: #6b7280; --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.15);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  font-size: 15px; line-height: 1.55; color: var(--text);
}
.stc-configurator-root *, .stc-review-root * { box-sizing: border-box; }
.stc-error { padding: 30px; text-align: center; background: #fee; color: #c00; border-radius: 6px; }

.stc-msrp-band { background: linear-gradient(135deg,#0f1f3a,#1a3a6c); color:#fff; padding:36px 20px; text-align:center; border-radius: var(--radius) var(--radius) 0 0; }
.stc-msrp-band h2 { margin:0 0 10px; color:#fff; font-size:28px; font-weight:600; letter-spacing:1px; }
.stc-msrp-band p { max-width:820px; margin:0 auto; font-size:13px; opacity:.85; line-height:1.65; }

.stc-tabs-bar { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.stc-tabs-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.stc-nav-tabs { display:flex; list-style:none; margin:0; padding:0; }
.stc-nav-tabs li { flex:1; }
.stc-nav-tabs a { display:block; padding:20px 16px; text-align:center; font-weight:600; font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:3px solid transparent; transition:all .2s ease; cursor:pointer; }
.stc-nav-tabs a:hover { color:var(--brand); background:rgba(26,58,108,.04); }
.stc-nav-tabs li.active a { color:var(--brand); border-bottom-color:var(--brand); background:var(--bg); }

.stc-form { margin:0; padding:0; }
.stc-config-wrap { max-width:1200px; margin:0 auto; padding:24px 20px 30px; }
.stc-loading { padding:60px; text-align:center; color:var(--muted); }
.stc-component-row { padding:24px; border-radius:var(--radius); margin-bottom:16px; background:var(--bg-alt); border:1px solid var(--border); }
.stc-component-row.hidden { display:none; }
.stc-component-row .stc-name { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--brand); margin:0 0 16px; }
.stc-options { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }

.stc-option-wrapper { position:relative; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:all .18s ease; min-height:56px; display:flex; align-items:center; }
.stc-option-wrapper:hover { border-color:var(--brand-light); box-shadow:var(--shadow-sm); }
.stc-option-wrapper.hidden { display:none; }
.stc-option-wrapper.selected { border-color:var(--brand); background:rgba(26,58,108,.04); }

.stc-opt-input { appearance:none; -webkit-appearance:none; width:18px; height:18px; border:2px solid #cbd5e1; background:#fff; cursor:pointer; margin:0 10px 0 0; flex-shrink:0; transition:all .15s; position:relative; }
.stc-opt-input.radio { border-radius:50%; }
.stc-opt-input.checkbox { border-radius:3px; }
.stc-opt-input.radio:checked, .stc-opt-input.checkbox:checked { border-color:var(--brand); background:var(--brand); }
.stc-opt-input.radio:checked::after { content:''; position:absolute; inset:3px; background:#fff; border-radius:50%; }
.stc-opt-input.checkbox:checked::after { content:''; position:absolute; left:4px; top:0; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.stc-opt-label { flex:1; font-size:14px; color:var(--text); cursor:pointer; margin:0; }

.stc-bubble { display:none; position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); width:320px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:100; padding:14px; text-align:left; pointer-events:none; }
.stc-bubble::before { content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:#fff; border-left:1px solid var(--border); border-top:1px solid var(--border); }
.stc-bubble * { pointer-events:auto; }
.stc-option-wrapper:hover .stc-bubble { display:block; }
.stc-bubble img { width:100%; height:auto; border-radius:4px; margin-bottom:8px; }
.stc-bubble .description { font-size:13px; margin:0 0 8px; line-height:1.5; color:var(--text); }
.stc-bubble .video { color:var(--accent); font-size:12px; font-weight:600; text-decoration:none; }
.stc-bubble .video::before { content:'▶ '; }
.stc-bubble .learn-more { display:inline-block; margin-top:8px; color:var(--brand); font-size:12px; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:.5px; }
.stc-bubble .price { font-weight:700; color:var(--brand); font-size:13px; margin-top:6px; }

.stc-dropdown-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.stc-dropdown-row select { appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a3a6c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center; background-size:18px; border:1.5px solid var(--border); border-radius:var(--radius); padding:10px 38px 10px 14px; font-size:14px; color:var(--text); min-width:240px; cursor:pointer; }
.stc-dropdown-row select:hover { border-color:var(--brand-light); }
.stc-dropdown-price { font-weight:700; color:var(--brand); }

.stc-info-row { background:rgba(26,58,108,.06); padding:12px 16px; border-radius:var(--radius); color:var(--brand); font-size:13px; }
.stc-info-row a { color:var(--brand); font-weight:600; }

.stc-action-bar { display:flex; gap:12px; max-width:1200px; margin:0 auto; padding:20px; }
.stc-btn { flex:1; padding:14px 18px; background:var(--brand); color:#fff; border:none; border-radius:var(--radius); font-size:14px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; transition:background .15s; text-decoration:none; text-align:center; display:inline-block; }
.stc-btn:hover { background:var(--brand-light); color:#fff; }
.stc-btn-secondary { background:#6b7280; }
.stc-btn-secondary:hover { background:#4b5563; }

.stc-live-bar { position:sticky; bottom:0; left:0; right:0; background:var(--brand); color:#fff; padding:14px 20px; text-align:center; z-index:50; box-shadow:0 -4px 16px rgba(0,0,0,.2); font-size:15px; }
.stc-live-bar strong { font-size:17px; }
.stc-live-selections { font-size:13px; opacity:.85; margin-left:12px; }

/* Review page */
.stc-review-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px 32px; margin-bottom:24px; }
.stc-review-card h2 { margin:0 0 6px; font-size:20px; color:var(--brand); text-transform:uppercase; letter-spacing:1.2px; font-weight:700; }
.stc-review-card h2 small { color:var(--muted); text-transform:none; font-size:13px; margin-left:8px; font-weight:400; }
.stc-review-card .stc-lead { margin:0 0 18px; color:var(--muted); font-size:14px; }
table.stc-config-table { width:100%; border-collapse:collapse; }
table.stc-config-table thead th { background:var(--brand); color:#fff; padding:12px 14px; text-align:left; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
table.stc-config-table tbody td { padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top; }
table.stc-config-table tbody tr:nth-child(even) { background:var(--bg-alt); }
table.stc-config-table .name { font-weight:700; color:var(--text); }
table.stc-config-table .col-price { text-align:right; width:110px; }
table.stc-config-table .col-qty { width:60px; text-align:center; }
table.stc-config-table .col-descriptor { width:130px; }
table.stc-config-table .col-type { width:100px; text-transform:capitalize; }
.stc-type-option { color:var(--accent); font-weight:600; }
.stc-type-add-on { color:var(--brand-light); font-weight:600; }
.stc-type-standard { color:var(--muted); }
.stc-total-row { display:flex; justify-content:flex-end; gap:30px; padding:18px 14px 6px; font-size:16px; font-weight:700; }
.stc-total-msrp { color:var(--brand); font-size:22px; }
.stc-msrp-note { font-size:12px; color:var(--muted); padding:0 14px; line-height:1.55; }
.stc-msrp-note strong { color:var(--accent); }

.stc-form-row { margin-bottom:16px; }
.stc-form-row label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text); }
.stc-form-row .req { color:var(--accent); }
.stc-form-row input[type=text], .stc-form-row input[type=email], .stc-form-row input[type=tel], .stc-form-row textarea {
  width:100%; padding:11px 14px; font-size:14px; border:1.5px solid var(--border); border-radius:var(--radius); background:#fff; font-family:inherit; color:var(--text);
}
.stc-form-row input:focus, .stc-form-row textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,58,108,.08); }
.stc-form-row textarea { min-height:100px; resize:vertical; }
.stc-row { display:flex; gap:16px; flex-wrap:wrap; }
.stc-row > .stc-form-row { flex:1 1 calc(50% - 8px); min-width:240px; }
.stc-radio-row { display:flex; align-items:center; gap:16px; margin-top:8px; }
.stc-radio-row label { display:flex; align-items:center; gap:6px; font-weight:400; margin:0; font-size:14px; }
.stc-radio-row input[type=radio] { appearance:none; -webkit-appearance:none; width:18px; height:18px; border:2px solid #cbd5e1; background:#fff; border-radius:50%; position:relative; cursor:pointer; }
.stc-radio-row input[type=radio]:checked { border-color:var(--brand); background:var(--brand); }
.stc-radio-row input[type=radio]:checked::after { content:''; position:absolute; inset:3px; background:#fff; border-radius:50%; }
.stc-review-actions { display:flex; gap:12px; padding:22px 0; }
.stc-review-actions .stc-btn { flex:1; }

.stc-flash { padding:14px 18px; background:#d4edda; color:#155724; border:1px solid #c3e6cb; border-radius:var(--radius); margin-bottom:16px; }
.stc-flash.error { background:#f8d7da; color:#721c24; border-color:#f5c6cb; }

@media (max-width:768px) {
  .stc-nav-tabs a { padding:14px 8px; font-size:12px; }
  .stc-msrp-band h2 { font-size:22px; }
  .stc-options { grid-template-columns:1fr 1fr; }
  .stc-review-card { padding:18px; }
}
@media print {
  .stc-msrp-band, .stc-tabs-bar, .stc-live-bar, .stc-action-bar, .stc-review-actions { display:none; }
  .stc-review-card { border:none; padding:0; }
}