/* AlphaBaths Renovation Calculator — Styles v1.0.2 */

/* ===== LAYOUT ===== */
.abc-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px; display: flex; gap: 24px; align-items: flex-start; font-family: 'Inter', system-ui, -apple-system, sans-serif; box-sizing: border-box; }
.abc-main { flex: 1; min-width: 0; }
.abc-side  { width: 300px; flex-shrink: 0; position: sticky; top: 20px; }
*, .abc-wrap * { box-sizing: border-box; }

/* ===== CARD ===== */
.abc-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); overflow: hidden; }

/* ===== PROGRESS ===== */
.abc-progress-wrap { padding: 20px 24px 0; }
.abc-progress-label { display: flex; justify-content: space-between; font-size: 13px; color: #6B7280; margin-bottom: 8px; }
.abc-progress-label .abc-pct { font-weight: 600; color: #2563EB; }
.abc-progress-bar { height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.abc-progress-fill { height: 100%; background: #2563EB; border-radius: 4px; transition: width .4s ease; }

/* ===== PROMO BANNER ===== */
.abc-promo { margin: 16px 24px 0; background: #EFF6FF; border-left: 4px solid #2563EB; color: #1D4ED8; padding: 12px 16px; border-radius: 4px; font-size: 13px; line-height: 1.5; }

/* ===== STEP BODY ===== */
.abc-step-body { padding: 24px; }
.abc-step-title { font-size: 1.35rem; font-weight: 700; color: #111827; margin: 0 0 18px; }
.abc-step { display: none; animation: abcFadeIn .25s ease; }
.abc-step.active { display: block; }
@keyframes abcFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ===== FIELD LABELS ===== */
.abc-field-label { font-weight: 600; font-size: .95rem; color: #374151; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.abc-required-tag { color: #CC0000; font-style: italic; font-size: .8rem; font-weight: 400; }
.abc-error-msg { color: #CC0000; font-size: .8rem; margin-top: 4px; display: none; }
.abc-has-error .abc-error-msg { display: block; }
.abc-has-error input, .abc-has-error select { border-color: #CC0000 !important; }

/* ===== INPUTS ===== */
.abc-input, .abc-select, .abc-textarea {
  width: 100%; border: 1px solid #D1D5DB; border-radius: 6px;
  padding: 9px 12px; font-size: .95rem; font-family: inherit;
  color: #374151; background: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.abc-input:focus, .abc-select:focus, .abc-textarea:focus {
  border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.abc-textarea { resize: vertical; min-height: 90px; }
input[type=checkbox], input[type=radio] { accent-color: #CC0000; }

/* ===== RADIO OPTIONS WITH PRODUCT IMAGE ===== */
.abc-radio-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid #E5E7EB;
  border-radius: 8px; cursor: pointer; margin-bottom: 8px;
  transition: border-color .2s, background .2s; user-select: none;
}
.abc-radio-option:hover { border-color: #2563EB; background: #F0F7FF; }
.abc-radio-option input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; margin: 0; }

/* --- OPTION THUMBNAIL (left side product image) --- */
.abc-opt-img {
  width: 72px; height: 56px;
  object-fit: cover; object-position: center;
  border-radius: 6px; flex-shrink: 0;
  border: 1px solid #E5E7EB; background: #F3F4F6;
  display: block;
}
.abc-opt-img-placeholder {
  width: 72px; height: 56px; flex-shrink: 0;
  border-radius: 6px; background: #F3F4F6;
  border: 1px solid #E5E7EB;
  display: flex; align-items: center; justify-content: center;
  color: #D1D5DB; font-size: 20px;
}

.abc-option-label { flex: 1; font-size: .9rem; color: #374151; line-height: 1.3; }
.abc-option-price { font-weight: 700; color: #6B7280; font-size: .85rem; white-space: nowrap; }
.abc-radio-option.selected { border-color: #2563EB; background: #EFF6FF; }
.abc-radio-option.selected .abc-option-price { color: #2563EB; }
.abc-radio-option.selected .abc-opt-img { border-color: #2563EB; }

/* ===== CHECKBOX OPTIONS ===== */
.abc-check-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid #E5E7EB;
  border-radius: 8px; cursor: pointer; margin-bottom: 8px;
  transition: border-color .2s, background .2s; user-select: none;
}
.abc-check-option input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.abc-check-option.checked { border-color: #2563EB; background: #EFF6FF; }
.abc-check-title { font-weight: 600; font-size: .95rem; color: #374151; }
.abc-check-price { font-size: .85rem; color: #059669; font-weight: 600; }

/* ===== SUB-OPTIONS ===== */
.abc-sub-opts { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; margin-top: 8px; display: none; }
.abc-sub-opts.visible { display: block; }
.abc-sub-label { font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: 6px; margin-top: 10px; }
.abc-sub-label:first-child { margin-top: 0; }

/* ===== SECTION HEADING ===== */
.abc-section-head { font-weight: 600; font-size: .95rem; color: #374151; padding-bottom: 8px; border-bottom: 1px solid #E5E7EB; margin: 18px 0 12px; }
.abc-section-head:first-child { margin-top: 0; }

/* ===== BOTTOM PREVIEW IMAGE (full bathroom scene) ===== */
.abc-preview-wrap { margin-top: 22px; }
.abc-preview-label {
  font-size: .78rem; font-weight: 700; color: #6B7280;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .6px;
  display: flex; align-items: center; gap: 6px;
}
.abc-preview-label::before { content: '\1F3E0'; font-size: .9rem; }
.abc-preview-box {
  width: 100%; height: 320px; border-radius: 10px; overflow: hidden;
  border: 1px solid #E5E7EB; background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
}
.abc-preview-box img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  opacity: 0; transition: opacity 0.3s ease;
}
.abc-preview-box img.loaded { opacity: 1; }
.abc-no-preview {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; color: #9CA3AF; font-size: .85rem; text-align: center; padding: 20px;
}
.abc-no-preview svg { width: 40px; height: 40px; }

/* ===== DISCLAIMER ===== */
.abc-disclaimer { margin-top: 16px; font-size: .82rem; color: #6B7280; line-height: 1.5; }

/* ===== BUTTONS ===== */
.abc-btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.abc-btn-prev { background: #fff; border: 1px solid #D1D5DB; color: #374151; padding: 10px 24px; border-radius: 6px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .2s; font-family: inherit; }
.abc-btn-prev:hover { background: #F9FAFB; }
.abc-btn-next, .abc-btn-submit { background: #CC0000; color: #fff; border: none; padding: 10px 28px; border-radius: 6px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .2s; margin-left: auto; font-family: inherit; }
.abc-btn-next:hover, .abc-btn-submit:hover { background: #AA0000; }
.abc-btn-print { background: #2563EB; color: #fff; border: none; padding: 8px 18px; border-radius: 6px; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .2s; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.abc-btn-print:hover { background: #1D4ED8; }

/* ===== SUMMARY BOX ===== */
.abc-summary-card { padding: 20px; }
.abc-summary-title { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #E5E7EB; }
.abc-sum-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: .85rem; }
.abc-sum-lbl { color: #6B7280; flex: 1; }
.abc-sum-val { font-weight: 600; color: #374151; text-align: right; max-width: 160px; word-break: break-word; }
.abc-sum-val.unset { color: #D1D5DB; font-weight: 400; }
.abc-sum-divider { border: none; border-top: 1px solid #E5E7EB; margin: 10px 0; }
.abc-sum-total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; margin-top: 4px; }
.abc-sum-total-lbl { color: #111827; }
.abc-sum-total-amt { color: #16A34A; font-size: 1.1rem; }
.abc-sum-deposit { text-align: right; font-size: .8rem; color: #2563EB; margin-top: 4px; }
.abc-sum-badge { background: #EFF6FF; color: #1D4ED8; font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: 100px; margin-top: 8px; display: inline-block; }

/* ===== FINAL PREVIEW STEP 7 ===== */
.abc-final-preview { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.abc-final-preview-hdr { background: #1E3A5F; color: #fff; padding: 12px 16px; font-weight: 700; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; }
.abc-final-preview-img-wrap { height: 280px; overflow: hidden; background: #F3F4F6; }
.abc-final-preview-img-wrap div, .abc-final-preview-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.abc-final-selections { padding: 14px 16px; }
.abc-sel-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #F3F4F6; font-size: .88rem; }
.abc-sel-row:last-child { border-bottom: none; }
.abc-sel-key { color: #6B7280; }
.abc-sel-val { font-weight: 600; color: #374151; }

/* ===== QUOTE BOX ===== */
.abc-quote-box { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; margin: 20px 0; }
.abc-quote-hdr { background: #1E3A5F; color: #fff; padding: 12px 16px; font-weight: 700; font-size: .95rem; }
.abc-quote-body { padding: 0 16px; }
.abc-quote-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F3F4F6; font-size: .9rem; }
.abc-quote-row:last-child { border-bottom: none; }
.abc-quote-row-lbl { color: #374151; } .abc-quote-row-amt { font-weight: 600; color: #374151; }
.abc-quote-total { display: flex; justify-content: space-between; padding: 12px 16px; background: #F9FAFB; font-weight: 700; }
.abc-quote-total-lbl { color: #111827; font-size: 1rem; } .abc-quote-total-amt { color: #16A34A; font-size: 1.1rem; }
.abc-quote-deposit { display: flex; justify-content: space-between; padding: 8px 16px; background: #EFF6FF; }
.abc-quote-deposit-lbl { color: #1D4ED8; font-size: .85rem; font-weight: 600; } .abc-quote-deposit-amt { color: #1D4ED8; font-size: .85rem; font-weight: 700; }
.abc-quote-balance { display: flex; justify-content: space-between; padding: 8px 16px 12px; }
.abc-quote-balance-lbl { color: #6B7280; font-size: .85rem; } .abc-quote-balance-amt { color: #6B7280; font-size: .85rem; font-weight: 600; }

/* ===== PAYMENT ICONS ===== */
.abc-pay-icons { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.abc-pay-icons img { height: 28px; width: auto; object-fit: contain; }

/* ===== FORM GRID ===== */
.abc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.abc-form-grid .full { grid-column: 1 / -1; }
.abc-form-group { display: flex; flex-direction: column; gap: 6px; }
.abc-form-group label { font-size: .85rem; font-weight: 600; color: #374151; }
.abc-form-group .abc-req { color: #CC0000; }
.abc-heard-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.abc-heard-opt { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: #374151; cursor: pointer; }

/* ===== THANK YOU ===== */
.abc-thankyou { text-align: center; padding: 40px 24px; }
.abc-thankyou h2 { font-size: 1.5rem; font-weight: 700; color: #059669; margin-bottom: 12px; }
.abc-thankyou p { color: #6B7280; margin-bottom: 12px; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .abc-wrap { flex-direction: column; }
  .abc-side { width: 100%; position: static; }
  .abc-btn-row { flex-direction: column-reverse; }
  .abc-btn-prev, .abc-btn-next, .abc-btn-submit { width: 100%; text-align: center; margin-left: 0; }
  .abc-form-grid { grid-template-columns: 1fr; }
  .abc-form-grid .full { grid-column: 1; }
  .abc-opt-img { width: 56px; height: 44px; }
  .abc-preview-box { height: 220px; }
}

/* ===== PRINT ===== */
.abc-print-header { display: none; }
.abc-print-footer { display: none; }
@media print {
  .abc-progress-wrap, .abc-promo, .abc-btn-row, .abc-side,
  .abc-step:not(.active) { display: none !important; }
  .abc-print-header { display: block !important; margin-bottom: 20px; }
  .abc-wrap { display: block; padding: 0; max-width: 100%; }
  .abc-card { border: none; box-shadow: none; }
  .abc-step-body { padding: 0; }
  body { font-family: Arial, sans-serif; color: #000; }
  .abc-final-preview { display: block !important; break-inside: avoid; }
  .abc-quote-box { display: block !important; break-inside: avoid; }
  .abc-quote-hdr, .abc-final-preview-hdr { background: #1E3A5F !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .abc-quote-deposit { background: #EFF6FF !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .abc-print-footer { display: block !important; position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-size: 11px; color: #666; padding: 8px; border-top: 1px solid #ddd; }
}