/* ============================================================
   TravlFun · estimate.css · v1.0 · © Luxa Grid LLC
   Composition for estimate.html (ep- prefix). Loads after
   search.css (sp-* helpers) and the design system.
   ============================================================ */

body { margin: 0; }

.ep-main { max-width: 1140px; margin-inline: auto; padding: 32px 24px 90px; display: flex; flex-direction: column; gap: 22px; }
.ep-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ep-head h1 { font: var(--tf-text-h1); margin: 0 0 4px; }
.ep-head p { font: var(--tf-text-body); color: var(--tf-ink-2); margin: 0; max-width: 58ch; }
.ep-head .tf-badge { margin-bottom: 6px; }

.ep-body { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; }
@media (max-width: 1023px) { .ep-body { grid-template-columns: 1fr; } }

/* ---- Controls ---- */
.ep-controls .tf-card__body { padding: 24px; gap: 18px; }
.ep-controls h2 { font: var(--tf-text-h4); margin: 0; display: flex; gap: 8px; align-items: center; }
.ep-controls h2 svg { width: 17px; height: 17px; color: var(--tf-color-primary); }
.ep-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .ep-row2 { grid-template-columns: 1fr; } }
.ep-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 2px; }
.ep-switchrow .txt b { display: block; font: 600 13.5px var(--tf-font-body); color: var(--tf-ink); }
.ep-switchrow .txt span { font: var(--tf-text-body-s); color: var(--tf-ink-3); }

/* ---- Summary ---- */
.ep-summary { position: sticky; top: 80px; }
.ep-summary .tf-card__body { padding: 26px; gap: 16px; }
.ep-total__cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-total__num { font: 700 clamp(30px, 4vw, 42px)/1.1 var(--tf-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ep-total__num .tilde { color: var(--tf-ink-3); font-weight: 600; }
.ep-total__sub { display: flex; gap: 18px; flex-wrap: wrap; font: var(--tf-text-body-s); color: var(--tf-ink-2); }
.ep-total__sub b { color: var(--tf-ink); font-variant-numeric: tabular-nums; }

.ep-lines { display: flex; flex-direction: column; }
.ep-line { display: grid; grid-template-columns: 30px 1fr auto; gap: 4px 12px;
  padding: 12px 0 10px; border-top: 1px solid var(--tf-border); align-items: center; }
.ep-line__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--tf-color-primary-soft); color: var(--tf-color-primary); grid-row: span 2; }
.ep-line__icon svg { width: 15px; height: 15px; }
.ep-line__label { font: 600 14px var(--tf-font-body); color: var(--tf-ink); }
.ep-line__label small { font: 500 11px var(--tf-font-body); color: var(--tf-ink-3);
  text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }
.ep-line__amt { font: 600 14px var(--tf-font-display); font-variant-numeric: tabular-nums; text-align: right; }
.ep-line__amt.zero { color: var(--tf-ink-3); font-weight: 500; }
.ep-line__meta { grid-column: 2 / 4; display: flex; align-items: center; gap: 10px; }
.ep-line__note { font: var(--tf-text-body-s); color: var(--tf-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-bar { flex: 1; height: 5px; border-radius: var(--tf-r-pill); background: var(--tf-surface-2); min-width: 60px; }
.ep-bar i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--tf-color-secondary), var(--tf-color-primary));
  transition: width .3s var(--tf-ease); }

.ep-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ep-actions .tf-btn { flex: 1; min-width: 160px; }

@media (max-width: 639px) {
  .ep-main { padding: 20px 16px 70px; }
  .ep-line__note { white-space: normal; }
}