/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f0f3f7; color: #222; min-height: 100vh; }

/* ── Header ── */
.hdr-main { background: #1F3864; color: #fff; padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; }
.hdr-left { display: flex; align-items: center; gap: 16px; }
.hdr-logo { height: 52px; width: auto; object-fit: contain; flex-shrink: 0; }
.hdr-main h1 { font-size: 22px; font-weight: bold; }
.hdr-main p  { font-size: 12px; opacity: .75; margin-top: 3px; }
.hdr-sub { background: #2E75B6; color: #fff; font-size: 12px; padding: 7px 32px; }
.badge { background: #c0392b; color: #fff; font-size: 10px; font-weight: bold; padding: 3px 10px; border-radius: 12px; letter-spacing: .5px; white-space: nowrap; }

/* ── Layout ── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 28px 16px; display: grid; grid-template-columns: 400px 1fr; gap: 24px; }

/* ── Cards ── */
.card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.09); padding: 24px; }
.card-title { font-size: 14px; font-weight: bold; color: #1F3864; border-bottom: 2px solid #2E75B6; padding-bottom: 8px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Form ── */
.fg { margin-bottom: 13px; }
.fg label { display: block; font-size: 11px; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.fg select, .fg input[type=text] { width: 100%; padding: 9px 11px; border: 1px solid #d0d7e2; border-radius: 6px; font-size: 13px; color: #222; background: #fff; transition: border .15s; }
.fg select:focus, .fg input[type=text]:focus { outline: none; border-color: #2E75B6; }
.fg select:disabled { opacity: .45; cursor: not-allowed; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Section label ── */
.sec-lbl { font-size: 11px; font-weight: bold; color: #2E75B6; text-transform: uppercase; letter-spacing: .5px; margin: 18px 0 8px; border-top: 1px solid #eee; padding-top: 14px; }

/* ── Price preview ── */
.preview { background: #DEEAF1; border-radius: 8px; padding: 16px 18px; margin: 18px 0; }
.preview .lbl { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: .5px; }
.preview .big { font-size: 28px; font-weight: bold; color: #1F3864; line-height: 1.1; margin-top: 2px; }
.preview .breakdown { font-size: 11px; color: #667; margin-top: 5px; line-height: 1.5; }

/* ── Warning / info boxes ── */
.warn      { display: none; background: #fff8e1; border-left: 3px solid #f59e0b; border-radius: 4px; padding: 8px 12px; font-size: 11px; color: #92400e; margin-bottom: 10px; line-height: 1.5; }
.warn-err  { display: none; background: #fff0f0; border-left: 3px solid #dc2626; border-radius: 4px; padding: 8px 12px; font-size: 11px; color: #7f1d1d; margin-bottom: 10px; line-height: 1.5; }
.info-note { display: none; background: #e8f4fd; border-left: 3px solid #2E75B6; border-radius: 4px; padding: 8px 12px; font-size: 11px; color: #1F3864; margin-bottom: 10px; line-height: 1.5; }

/* ── Checkbox ── */
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.check-row input { width: 15px; height: 15px; cursor: pointer; }

/* ── Buttons ── */
.btn { border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; padding: 10px 18px; transition: background .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-add   { background: #1F3864; color: #fff; width: 100%; padding: 13px; font-size: 14px; }
.btn-add:hover  { background: #2E75B6; }
.btn-print { background: #375623; color: #fff; }
.btn-print:hover { background: #2a4019; }
.btn-pdf { background: #2E75B6; color: #fff; }
.btn-pdf:hover { background: #1F3864; }
.btn-clear { background: #e5e7eb; color: #444; }
.btn-clear:hover { background: #d1d5db; }
.btn-del   { background: none; border: 1px solid #fca5a5; color: #dc2626; border-radius: 5px; padding: 4px 9px; font-size: 11px; font-weight: bold; cursor: pointer; }
.btn-del:hover { background: #fee2e2; }

/* ── Quote meta ── */
.quote-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }

/* ── Table ── */
.q-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.q-table thead th { background: #1F3864; color: #fff; padding: 10px 13px; text-align: left; font-size: 12px; letter-spacing: .3px; }
.q-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.q-table tbody tr:hover { background: #f8fafc; }
.q-table td { padding: 11px 13px; vertical-align: middle; }
.q-table .desc-main { font-weight: bold; font-size: 13px; }
.q-table .desc-sub  { font-size: 11px; color: #888; margin-top: 3px; line-height: 1.5; }
.q-table tfoot td   { background: #1F3864; color: #fff; font-weight: bold; font-size: 15px; padding: 13px; }

/* ── Empty state ── */
.empty { text-align: center; padding: 50px 20px; color: #bbb; }
.empty-icon { font-size: 36px; margin-bottom: 10px; }
.empty p { font-size: 13px; }

/* ── Action bar ── */
.action-bar { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ── Footer note ── */
.foot-note { margin-top: 20px; font-size: 10.5px; color: #aaa; border-top: 1px solid #eee; padding-top: 12px; line-height: 1.6; }

/* ── Print ── */
.print-block { display: none; }
@media print {
  html, body { height: auto; min-height: auto; background: #fff; }
  .no-print { display: none !important; }
  .wrap { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .col-left { display: none; }
  .card { box-shadow: none; border-radius: 0; padding: 12px 0 0; }
  .print-block { display: block !important; margin-bottom: 16px; font-size: 13px; }
  .q-table thead th, .q-table tfoot td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hdr-main, .hdr-sub { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .btn-del, .action-bar { display: none !important; }
}

/* ── Brochure Links ── */
.ref-links { display: flex; gap: 14px; margin: 6px 0 0; }
.ref-links a { font-size: 11px; color: #2E75B6; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.ref-links a:hover { text-decoration: underline; }

/* ── Color Swatches ── */
#color-fg > label, #color { display: none; }
.ref-swatches { margin-top: 8px; }
.swatch-group { margin-bottom: 8px; }
.swatch-tier-label { font-size: 10px; font-weight: bold; color: #999; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 5px; }
.color-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #333; padding: 3px 8px 3px 4px; border: 1px solid #dde5f0; border-radius: 10px; background: #fff; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s; }
.color-chip:hover { background: #eef4fc; border-color: #2E75B6; }
.color-chip--selected { background: #deeaf1 !important; border-color: #1F3864 !important; font-weight: bold; outline: 2px solid #1F3864; outline-offset: 1px; }
.chip-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.galaxy-chip { background: linear-gradient(90deg,#fdecea,#fef3e2,#fefde2,#edfbea,#e5f4fc,#f2eafd); border-color: #d0c0e8; }
.galaxy-chip:hover { background: linear-gradient(90deg,#fad5d2,#fde8c8,#fdfbc8,#d8f7d3,#c8ebf8,#e8d8fa) !important; }
.galaxy-dot { background: conic-gradient(#e74c3c,#e67e22,#f1c40f,#2ecc71,#3498db,#9b59b6,#e74c3c); }

/* ── Panel Design Photo Cards ── */
.ref-panels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.panel-card { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; border-radius: 6px; padding: 4px; border: 2px solid transparent; transition: border-color .12s, background .12s; }
.panel-card:hover { background: #eef4fc; border-color: #2E75B6; }
.panel-card--selected { border-color: #1F3864 !important; background: #deeaf1 !important; }
.panel-card--selected .panel-card-name { color: #1F3864; }
.panel-card-img { width: 80px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid #d0daea; display: block; }
.panel-card-name { font-size: 10px; font-weight: bold; color: #1F3864; text-align: center; }
.panel-card-sub { font-size: 9px; color: #aaa; text-align: center; margin-top: 3px; }
.ref-note { font-size: 10px; color: #888; margin: 3px 0 8px; }

/* ── Window Designs inline ── */
.ref-windsgn { margin: 8px 0 4px; }
.win-browse-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; color: #2E75B6; background: #eef4fc; border: 1px solid #b8cce4; border-radius: 6px; padding: 7px 14px; cursor: pointer; transition: background .15s; }
.win-browse-btn:hover { background: #ddeaf8; }
.win-browse-btn--chosen   { color: #1F3864; background: #deeaf1; border-color: #1F3864; }
.win-browse-btn--required { color: #92400e; background: #fff8e1; border-color: #f59e0b; }
.win-insert-row { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.win-clear-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; padding: 0 10px; background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; border-radius: 5px; font-size: 11px; font-weight: bold; cursor: pointer; line-height: 1; flex-shrink: 0; }
.win-clear-btn:hover { background: #fecaca; }
.insert-required-hint { font-size: 11px; color: #92400e; background: #fff8e1; border-left: 3px solid #f59e0b; border-radius: 4px; padding: 6px 10px; margin-top: 2px; }
.btn-add:disabled { background: #9ca3af !important; cursor: not-allowed; }
.btn-add:disabled:hover { background: #9ca3af !important; }
.add-hint { margin-bottom: 8px; }
.add-hint-item { font-size: 11px; color: #92400e; background: #fff8e1; border-left: 3px solid #f59e0b; border-radius: 4px; padding: 7px 11px; margin-bottom: 5px; line-height: 1.4; }

/* ── Tier Pills (Good / Better / Best) ── */
.tier-pills { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.tier-pill { font-size: 10px; font-weight: bold; border: 1px solid #d0d7e2; border-radius: 10px; padding: 2px 9px; cursor: pointer; background: #f5f7fa; color: #888; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; line-height: 1.6; }
.tier-pill:hover { border-color: #2E75B6; color: #1F3864; background: #eef4fc; }
.tier-pill--good.tier-pill--active   { background: #dcfce7; border-color: #16a34a; color: #15803d; }
.tier-pill--better.tier-pill--active { background: #dbeafe; border-color: #1F3864;  color: #1F3864; }
.tier-pill--best.tier-pill--active   { background: #fef9c3; border-color: #b45309;  color: #92400e; }

/* ── Comparison Section ── */
.comp-section { margin-top: 24px; }
.comp-title { font-size: 14px; font-weight: bold; color: #1F3864; border-bottom: 2px solid #2E75B6; padding-bottom: 8px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; }
.comp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.comp-col { border-radius: 8px; overflow: hidden; border: 1px solid #e5eaf2; }
.comp-col-header { font-size: 13px; font-weight: bold; color: #fff; text-align: center; padding: 10px 12px; text-transform: uppercase; letter-spacing: .5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.comp-col--good   .comp-col-header { background: #375623; }
.comp-col--better .comp-col-header { background: #1F3864; }
.comp-col--best   .comp-col-header { background: #B8860B; }
.comp-col-body { padding: 14px; background: #fff; min-height: 80px; }
.comp-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.comp-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.comp-item-main  { font-size: 12px; font-weight: bold; color: #222; }
.comp-item-sub   { font-size: 10px; color: #888; margin-top: 3px; line-height: 1.4; }
.comp-item-price { font-size: 16px; font-weight: bold; color: #1F3864; margin-top: 7px; }
.comp-empty { text-align: center; color: #ccc; font-size: 12px; padding: 20px 0; }
.comp-price { font-size: 22px; font-weight: bold; color: #1F3864; margin-bottom: 3px; }
.comp-delta { font-size: 11px; font-weight: 600; color: #555; background: #f4f6fa; border-radius: 4px; display: inline-block; padding: 2px 7px; margin-bottom: 10px; }
.comp-body-detail { border-top: 1px solid #eee; padding-top: 10px; margin-top: 4px; }
.comp-upgrades-label { font-size: 10px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.comp-diff-item { font-size: 12px; color: #222; margin-bottom: 5px; line-height: 1.4; }
.comp-diff-to { font-weight: 600; }
.comp-diff-from { color: #aaa; font-size: 10px; }
.comp-same { font-size: 11px; color: #aaa; font-style: italic; }

/* ── Insert Design Cards (modal) ── */
.insert-group { margin-bottom: 16px; }
.insert-group-lbl { font-size: 10px; font-weight: bold; color: #2E75B6; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; }
.insert-row { display: flex; flex-wrap: wrap; gap: 8px; }
.insert-card { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; border-radius: 6px; padding: 6px 8px; border: 2px solid transparent; background: #f8fafd; transition: border-color .12s, background .12s; user-select: none; }
.insert-card:hover { background: #eef4fc; border-color: #2E75B6; }
.insert-card--selected { border-color: #1F3864 !important; background: #deeaf1 !important; }
.insert-card-img { display: block; height: 34px; width: auto; max-width: 230px; min-width: 50px; image-rendering: -webkit-optimize-contrast; }
.insert-card-name { font-size: 10px; font-weight: bold; color: #1F3864; text-align: center; max-width: 230px; }

/* ── Window Designs Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: #fff; border-radius: 10px; max-width: 680px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,.28); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e5eaf2; flex-shrink: 0; }
.modal-title { font-size: 13px; font-weight: bold; color: #1F3864; }
.modal-close { background: none; border: none; font-size: 16px; cursor: pointer; color: #666; padding: 4px 8px; border-radius: 4px; line-height: 1; }
.modal-close:hover { background: #f0f0f0; color: #222; }
.modal-body { overflow-y: auto; padding: 16px; flex: 1; }
.modal-ref-img { width: 100%; height: auto; display: block; }

/* ── Partner co-branding (header right side) ── */
.hdr-right { display: flex; align-items: center; gap: 16px; }
.partner-hdr-slot { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.partner-hdr-label { font-size: 9px; text-transform: uppercase; letter-spacing: .7px; opacity: .6; color: #fff; }
.partner-hdr-logo { height: 44px; width: auto; object-fit: contain; max-width: 130px; }

/* ── Config confirmation banner ── */
.confirm-banner { background: #eef7eb; border-bottom: 2px solid #c3dbbe; padding: 10px 32px; }
.confirm-banner-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.confirm-banner-text { font-size: 13px; color: #1a4a2e; }
.confirm-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.confirm-btn { background: #375623; color: #fff; font-size: 12px; font-weight: bold; padding: 7px 14px; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background .15s; }
.confirm-btn:hover { background: #2a4019; }
.confirm-dismiss { background: none; border: none; color: #888; font-size: 15px; cursor: pointer; padding: 3px 7px; border-radius: 4px; line-height: 1; }
.confirm-dismiss:hover { background: #d9edd3; color: #333; }
@media print { .confirm-banner { display: none !important; } }

/* ── Responsive ── */
@media (max-width: 780px) {
  .wrap { grid-template-columns: 1fr; }
  .fg-row, .quote-meta { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: 1fr; }
}

@media print {
  .tier-pills { display: none !important; }
}