:root{
  --brc-bg:#ffffff;
  --brc-surface:#f8fafc;
  --brc-border:#e5e7eb;
  --brc-muted:#6b7280;
  --brc-text:#0f172a;
  --brc-primary:#10b981;   /* emerald */
  --brc-primary-weak:#ecfdf5;
  --brc-accent:#f59e0b;    /* amber */
  --brc-danger:#ef4444;
  --brc-shadow:0 8px 24px rgba(2,8,23,.06);
}

.brc-widget{
  background:var(--brc-bg);
  border:1px solid var(--brc-border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--brc-shadow);
  max-width:1100px;
  margin:18px auto;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--brc-text);
}

.brc-top{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.brc-product-select label,.brc-qty-select label{display:block;font-weight:650;margin-bottom:6px;color:var(--brc-muted)}
.brc-product-select select{
  min-width:260px;padding:10px 12px;border:1px solid var(--brc-border);
  border-radius:10px;background:#fff
}

.brc-qty-select .qty-wrap{display:flex;align-items:center;gap:8px}
.qty-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--brc-border);background:var(--brc-surface)}
[data-brc-qty]{width:84px;text-align:center;padding:10px;border:1px solid var(--brc-border);border-radius:10px;background:#fff}

/* Two-column layout */
.brc-body{display:grid;grid-template-columns:460px 1fr;gap:22px;align-items:start}

/* Image + thumbs */
.brc-image-wrap{border:1px solid var(--brc-border);border-radius:14px;overflow:hidden;background:var(--brc-surface)}
.brc-left img{width:100%;display:block;object-fit:cover;max-height:360px}
.brc-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.brc-thumbs button{
  border:2px solid transparent;border-radius:10px;overflow:hidden;background:#fff;padding:0;cursor:pointer;
  box-shadow:0 2px 8px rgba(2,8,23,.05)
}
.brc-thumbs img{width:72px;height:72px;object-fit:cover;display:block}
.brc-thumbs button.active{border-color:var(--brc-accent)}

/* Right column */
.brc-title{margin:0 0 8px;font-size:22px;line-height:1.2;color:#04364a;font-weight:800}

.brc-tenure-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brc-tenures{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 6px;flex:1}
.brc-tenure{
  border:1px solid var(--brc-border);border-radius:50px;padding:10px 12px;background:#fff;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;height:78px;
  transition:all .15s ease
}
.brc-tenure .num{font-size:18px;font-weight:800}
.brc-tenure .lbl{font-size:12px;color:var(--brc-muted);margin-top:2px}
.brc-tenure .sub{font-size:11px;color:#9ca3af}
.brc-tenure:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(2,8,23,.06)}
.brc-tenure.selected{background:var(--brc-primary-weak);border-color:var(--brc-primary);box-shadow:0 0 0 3px rgba(16,185,129,.2) inset}

.brc-compare{height:42px;border-radius:12px;border:1px solid var(--brc-border);background:#fff;padding:0 12px;cursor:pointer;white-space:nowrap}
.brc-compare:hover{background:var(--brc-surface)}

/* Breakdown card */
.brc-breakdown{
  border:1px dashed var(--brc-border);border-radius:14px;padding:14px;background:#fff
}
.brc-breakdown .row{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.brc-breakdown .row span{color:var(--brc-muted)}
.brc-breakdown .row strong{font-weight:800}
.brc-breakdown .row.total{border-top:1px solid var(--brc-border);padding-top:10px;margin-top:10px}
.brc-breakdown .subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.brc-breakdown .subgrid > div{
  background:var(--brc-surface);border:1px solid var(--brc-border);border-radius:12px;padding:10px 12px;
  display:flex;justify-content:space-between;align-items:center
}
.brc-breakdown .subgrid > div span{color:var(--brc-muted)}
.brc-breakdown .subgrid .save{grid-column:span 3;background:#f0fdf4;border-color:#bbf7d0}

/* CTA */
.brc-cta .brc-rent-now{
  display:inline-block;background:var(--brc-danger);color:#fff;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;margin-top:12px;
  box-shadow:0 4px 14px rgba(239,68,68,.25)
}

/* Specs */
.brc-specs{margin-top:14px;border-top:1px dashed var(--brc-border);padding-top:12px;color:#334155;line-height:1.6}

/* Sticky bar (mobile) */
.brc-sticky{
  position:fixed;bottom:0;left:0;right:0;background:#0b1220;color:#fff;display:none;align-items:center;gap:10px;padding:12px 14px;z-index:9999;
  box-shadow:0 -8px 30px rgba(2,8,23,.28)
}
.brc-sticky .s-title{flex:1;font-size:12px;opacity:.95}
.brc-sticky .s-price{font-weight:900}
.brc-sticky button{background:var(--brc-accent);border:none;color:#111827;border-radius:10px;padding:10px 12px;margin-left:6px;cursor:pointer;font-weight:700}

/* Modal */
.brc-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10000}
.brc-modal.show{display:flex}
.brc-modal-backdrop{position:absolute;inset:0;background:rgba(2,8,23,.45)}
.brc-modal-dialog{position:relative;background:#fff;border-radius:14px;max-width:980px;width:92%;max-height:80vh;overflow:auto;box-shadow:0 16px 40px rgba(2,8,23,.25)}
.brc-modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--brc-border);padding:12px 16px}
.brc-modal-head strong{font-size:18px}
.brc-modal-head .close{background:var(--brc-surface);border:1px solid var(--brc-border);border-radius:10px;cursor:pointer;width:36px;height:36px}
.brc-modal-body{padding:12px 16px}
.brc-compare-table{display:grid;gap:8px}
.brc-compare-table .row{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:10px;border:1px solid var(--brc-border);border-radius:12px;background:#fff}
.brc-compare-table .head{background:var(--brc-surface);font-weight:800}

/* Responsive improvements */
@media (max-width: 1100px){
  .brc-body{grid-template-columns:420px 1fr}
}
@media (max-width: 980px){
  .brc-body{grid-template-columns:1fr}
  .brc-left img{max-height:420px}
  .brc-tenures{grid-template-columns:repeat(2,1fr)}
  .brc-breakdown .subgrid{grid-template-columns:repeat(2,1fr)}
  .brc-breakdown .subgrid .save{grid-column:span 2}
  .brc-sticky{display:flex}
}
@media (max-width: 560px){
  .brc-tenure{height:72px}
  .brc-thumbs img{width:64px;height:64px}
  .brc-compare-table .row{grid-template-columns:repeat(4,1fr)}
  .brc-compare-table .head{display:none}
}


/* ---------- Mobile polish (≤480px) ---------- */
@media (max-width: 480px){
  .brc-widget{padding:14px;border-radius:14px;margin:12px}
  .brc-top{gap:10px;margin-bottom:10px}
  .brc-product-select select, [data-brc-qty]{width:100%}
  .brc-qty-select{width:100%}
  .brc-qty-select .qty-wrap{width:100%;justify-content:space-between}
  .qty-btn{width:40px;height:40px}

  .brc-left img{max-height:none}
  .brc-image-wrap{border-radius:12px}
  .brc-thumbs{overflow-x:auto;white-space:nowrap;gap:8px;padding-bottom:6px;scroll-snap-type:x mandatory}
  .brc-thumbs button{display:inline-block;scroll-snap-align:start}
  .brc-thumbs img{width:68px;height:68px}

  /* Tenures as a swipe row */
  .brc-tenures{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0}
  .brc-tenure{min-width:140px;scroll-snap-align:start;height:70px}
  .brc-tenure .num{font-size:17px}

  .brc-title{font-size:18px;margin-top:6px}
  .brc-breakdown{padding:12px}
  .brc-breakdown .row{margin:8px 0}
  .brc-breakdown .subgrid{grid-template-columns:1fr;gap:10px}
  .brc-breakdown .subgrid .save{grid-column:span 1}

  /* Sticky with Rent Now primary */
  .brc-sticky{display:flex;align-items:center}
  .brc-sticky .s-title{display:none}
  .brc-sticky .s-price{margin-right:auto}
  .brc-sticky .s-details{display:none}
  .brc-sticky .s-compare{background:#f3f4f6;color:#111827}
  .brc-sticky .s-rent{background:var(--brc-danger);color:#fff}
}


/* ---- v1.4.3 mobile flow: show title/tenure before image/specs ---- */
@media (max-width: 980px){
  .brc-body{display:flex;flex-direction:column}
  .brc-right{order:1}
  .brc-left{order:2}
}
@media (max-width: 480px){
  .brc-tenure{min-width:120px;height:62px;padding:8px 10px}
  .brc-tenure .num{font-size:16px}
  .brc-title{font-size:19px;margin-bottom:4px}
  .brc-breakdown{padding:10px;border-radius:12px}
  .brc-breakdown .row{margin:6px 0}
  .brc-top{margin-bottom:8px}
  .brc-widget{padding:12px}
}
/* Specs accordion */
.brc-specs[data-collapsed="true"]{max-height:0;overflow:hidden;padding-top:0;border-top:none}
.brc-specs-toggle{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--brc-border);border-radius:10px;padding:10px 12px;margin-top:10px;cursor:pointer;font-weight:700}
.brc-specs-toggle span{flex:1}


/* ---- v1.4.4 Tenure-fit fixes ---- */
.brc-widget, .brc-widget *{box-sizing:border-box}
@media (max-width: 480px){
  /* Avoid horizontal scrolling causing overflow */
  .brc-tenures{display:grid !important; grid-template-columns: 1fr 1fr; gap:10px; overflow-x:visible; padding:0; margin:8px 0}
  .brc-tenure{min-width:0 !important; width:100% !important; height:58px; padding:8px 10px}
  .brc-tenure .num{font-size:15px}
  .brc-tenure .lbl{font-size:11px}
  /* Ensure parent containers don't push wider than viewport */
  .brc-widget{max-width:100%; overflow:hidden}
  .brc-top, .brc-body{width:100%}
}

/* ---- v1.4.5 Tenure grid + compare button placement ---- */
@media (max-width: 600px){
  .brc-tenure-row{flex-direction:column;align-items:stretch;gap:12px}
  .brc-tenures{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .brc-tenure{min-width:0;width:100%;height:64px}
  .brc-compare{order:2;width:100%;height:46px;background:var(--brc-primary);color:#fff;font-weight:700;border:none}
  .brc-compare:hover{background:#059669}
}

/* ---- v1.4.6 Contrast fixes ---- */
.brc-tenure{color:#111827;background:#fff}
.brc-tenure .num,.brc-tenure .lbl,.brc-tenure .sub{color:#111827}
.brc-tenure.selected{background:var(--brc-primary-weak);border-color:var(--brc-primary)}
.brc-tenure.selected .num{color:#065f46}
.brc-tenure:disabled{color:#9ca3af}

.brc-compare{background:var(--brc-primary);color:#fff;border:none}
.brc-compare:hover{background:#059669;color:#fff}

.brc-cta .brc-rent-now,
.brc-sticky .s-rent{background:var(--brc-danger);color:#fff}
.brc-cta .brc-rent-now:hover,
.brc-sticky .s-rent:hover{background:#dc2626;color:#fff}