/* ==========================================================================
   COST CALCULATOR PAGE
   Uses color tokens & base classes defined in style.css
   ========================================================================== */

/* ===== Banner ===== */
.cc-banner{ position:relative; color:var(--white); overflow:hidden; }
.cc-banner__media{ position:absolute; inset:0; }
.cc-banner__img{ width:100%; height:100%; object-fit:cover; }
.cc-banner__scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(14,51,32,0.92) 0%, rgba(14,51,32,0.78) 45%, rgba(14,51,32,0.32) 82%);
}
.cc-banner__content{ position:relative; padding:88px 24px 76px; max-width:680px; }
.cc-banner .eyebrow{ color:var(--gold-500); }
.cc-banner h1{ color:var(--white); font-size:clamp(1.9rem,4.2vw,2.7rem); margin-bottom:12px; }
.cc-banner__lead{ color:rgba(255,255,255,0.88); font-size:1.02rem; margin:0; }

/* ===== Calculator card ===== */
.calculator{ padding:72px 0 96px; background:var(--paper); }
.calc-card{
  max-width:960px; margin:0 auto;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:40px clamp(20px,4vw,48px);
}
.calc-card__head{ text-align:center; margin-bottom:32px; }
.calc-card__head h2{ font-size:clamp(1.35rem,3vw,1.7rem); margin-bottom:6px; }
.calc-card__head p{ margin:0; }

.calc-lead{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-bottom:28px; padding-bottom:28px; border-bottom:1px dashed var(--line);
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:0.85rem; color:var(--green-900); }
.field label span{ font-weight:400; color:var(--ink-soft); font-size:0.78rem; }
.field input,.field select{
  font-family:var(--font-body); font-size:0.92rem; color:var(--ink);
  border:1px solid var(--line); border-radius:6px; padding:10px 12px;
  background:var(--white);
}
.field input:focus,.field select:focus{ border-color:var(--gold-500); }

.calc-controls{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin-bottom:28px;
}

/* ===== Table ===== */
.calc-table-wrap{ overflow-x:auto; border:1px solid var(--ink); border-radius:4px; }
.calc-table{ width:100%; border-collapse:collapse; min-width:640px; }
.calc-table th{
  background:var(--green-100); color:var(--green-900);
  font-family:var(--font-display); font-size:0.82rem; text-align:left;
  padding:12px 14px; border-bottom:1px solid var(--ink);
}
.calc-table td{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:0.88rem; vertical-align:middle; }
.calc-table .hint{ display:block; font-size:0.76rem; color:var(--ink-soft); margin-top:2px; }
.col-area,.col-unit,.col-rate,.col-cost{ text-align:right; white-space:nowrap; }
.calc-table th.col-area,.calc-table th.col-unit,.calc-table th.col-rate,.calc-table th.col-cost{ text-align:right; }
.calc-input{
  width:140px; text-align:right; border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-size:0.88rem; font-family:var(--font-body);
}
.calc-input:focus{ border-color:var(--gold-500); }
.col-area--split{ display:flex; gap:8px; justify-content:flex-end; }
.calc-input--small{ width:90px; }
.cost{ font-weight:700; color:var(--green-800); }
.calc-total-row td{
  background:var(--green-100); font-family:var(--font-display); font-weight:700;
  color:var(--green-900); border-bottom:none; font-size:0.98rem;
}
.calc-total-row .cost{ color:var(--gold-600); font-size:1.1rem; }

.calc-actions{ text-align:center; margin-top:32px; }
.calc-disclaimer{ font-size:0.78rem; color:var(--ink-soft); text-align:center; margin:18px 0 0; }

/* ==========================================================================
   QUOTATION OVERLAY (A4 preview)
   ========================================================================== */
.quote-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(14,51,32,0.55);
  display:none; flex-direction:column;
}
.quote-overlay.is-open{ display:flex; }

.quote-overlay__bar{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.quote-overlay__actions{ display:flex; gap:12px; }

.quote-scroll{ flex:1; overflow-y:auto; padding:32px 16px; }

.quote-page{
  width:210mm; min-height:297mm; margin:0 auto;
  background:var(--white); box-shadow:0 12px 40px rgba(0,0,0,0.25);
  padding:16mm; color:var(--ink);
}
.quote-letterhead{ display:flex; align-items:center; gap:18px; }
.quote-logo{ height:64px; width:auto; }
.quote-company h2{ margin:0; font-size:1.25rem; color:var(--green-900); }
.quote-company h2 span{ display:block; font-family:var(--font-body); font-weight:600; font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
.quote-company p{ margin:2px 0 0; font-size:0.78rem; color:var(--ink-soft); }
.quote-divider{ height:3px; background:linear-gradient(90deg,var(--green-800) 0%, var(--gold-500) 100%); margin:18px 0 22px; }

.quote-meta{ display:flex; justify-content:space-between; gap:24px; margin-bottom:22px; flex-wrap:wrap; }
.quote-meta h3{ margin:0 0 6px; font-size:1.05rem; color:var(--green-900); }
.quote-meta p{ margin:2px 0; font-size:0.85rem; }
.quote-meta__to{ text-align:right; }
.quote-meta__to p{ font-size:0.85rem; }

.quote-table{ width:100%; border-collapse:collapse; margin-bottom:20px; }
.quote-table th{
  background:var(--green-800); color:var(--white);
  font-family:var(--font-display); font-size:0.78rem; text-align:left;
  padding:10px 12px;
}
.quote-table th:last-child,.quote-table td:last-child,
.quote-table th:nth-child(2),.quote-table td:nth-child(2),
.quote-table th:nth-child(3),.quote-table td:nth-child(3),
.quote-table th:nth-child(4),.quote-table td:nth-child(4){ text-align:right; }
.quote-table td{ padding:9px 12px; border-bottom:1px solid var(--line); font-size:0.84rem; }
.quote-table tbody tr:nth-child(even){ background:var(--paper); }
.quote-total-row td{
  background:var(--gold-100); font-family:var(--font-display); font-weight:700;
  color:var(--green-900); border-top:2px solid var(--green-800);
}

.quote-package{ display:flex; gap:32px; margin-bottom:22px; flex-wrap:wrap; }
.quote-package p{ margin:0; font-size:0.85rem; }

.quote-notes{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:14px 18px; margin-bottom:22px;
}
.quote-notes h4{ margin:0 0 8px; font-family:var(--font-display); font-size:0.85rem; color:var(--green-900); }
.quote-notes ul{ margin:0; padding-left:18px; list-style:disc; }
.quote-notes li{ font-size:0.78rem; color:var(--ink-soft); margin-bottom:4px; }

.quote-footer{ text-align:center; border-top:1px solid var(--line); padding-top:14px; }
.quote-footer p{ margin:0; font-size:0.8rem; color:var(--ink-soft); font-style:italic; }

/* ===== Print styles ===== */
@media print{
  body *{ visibility:hidden; }
  .quote-page,.quote-page *{ visibility:visible; }
  .quote-page{ position:absolute; left:0; top:0; box-shadow:none; margin:0; width:auto; min-height:auto; }
  .quote-overlay__bar,.top-strip,.site-header,.site-footer,.back-to-top{ display:none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:760px){
  .calc-lead{ grid-template-columns:1fr; }
  .calc-controls{ grid-template-columns:1fr; }
  .quote-page{ width:100%; min-height:auto; padding:20px; }
  .quote-meta{ flex-direction:column; }
  .quote-meta__to{ text-align:left; }
}