/* ============================================================
   Triptiq Sailing — Offerte (multi-step quote request)
   Loaded after styles.css + pages.css.
   ============================================================ */

.quote { background: var(--cream); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem,7vw,6rem); }
.quote-layout { display: grid; grid-template-columns: 1.5fr .85fr; gap: 2.5rem; align-items: start; }

/* ---------- Form card ---------- */
.quote-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3vw, 2.5rem); }

/* Progress */
.qprogress { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; }
.qprogress__step { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.qprogress__bar { height: 5px; border-radius: 100px; background: var(--line); overflow: hidden; }
.qprogress__bar i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 100px; transition: width .4s var(--ease); }
.qprogress__step.done .qprogress__bar i, .qprogress__step.active .qprogress__bar i { width: 100%; }
.qprogress__step.active .qprogress__bar i { background: var(--coral); }
.qprogress__lbl { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.qprogress__step.active .qprogress__lbl { color: var(--coral); }
.qprogress__step.done .qprogress__lbl { color: var(--teal); }

/* Panels */
.qpanel { display: none; animation: qfade .4s var(--ease); }
.qpanel.active { display: block; }
@keyframes qfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qpanel__head { margin-bottom: 1.5rem; }
.qpanel__step { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.qpanel__title { font-family: var(--display); font-weight: 600; font-size: 1.7rem; color: var(--navy); line-height: 1.15; margin-top: .2rem; }
.qpanel__sub { color: var(--ink-soft); margin-top: .4rem; }

/* Option cards (radio) */
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.opt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.opt-card { position: relative; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card__box {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1rem;
  height: 100%; transition: border-color .2s, background .2s, transform .2s; background: var(--cream);
}
.opt-card:hover .opt-card__box { border-color: var(--teal); transform: translateY(-2px); }
.opt-card input:checked + .opt-card__box { border-color: var(--coral); background: #fff; box-shadow: 0 0 0 3px rgba(237,106,74,.15); }
.opt-card__ic { font-size: 1.4rem; }
.opt-card__t { font-weight: 700; color: var(--navy); margin-top: .4rem; }
.opt-card__d { font-size: .82rem; color: var(--ink-soft); margin-top: .15rem; }

/* Field + check primitives now live in pages.css (shared) */

/* Nav */
.qnav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; gap: 1rem; }
.qnav__spacer { flex: 1; }

/* Success */
.qsuccess { text-align: center; padding: 1rem 0; }
.qsuccess__badge { width: 76px; height: 76px; margin: 0 auto 1.3rem; border-radius: 50%; background: rgba(46,204,113,.15); color: #1f9d57; display: grid; place-items: center; font-size: 2.2rem; }
.qsuccess h2 { font-family: var(--display); font-weight: 600; font-size: 2rem; color: var(--navy); }
.qsuccess p { color: var(--ink-soft); max-width: 460px; margin: .8rem auto 0; }
.qsuccess__code { display: inline-block; margin-top: 1.4rem; font-weight: 700; color: var(--navy); background: var(--sand); border: 1px dashed var(--gold); border-radius: 10px; padding: .6rem 1.1rem; letter-spacing: .04em; }
.qsuccess__next { text-align: left; max-width: 460px; margin: 1.8rem auto 0; display: grid; gap: .7rem; }
.qsuccess__next li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; }
.qsuccess__next .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }

/* ---------- Aside summary ---------- */
.quote-aside { position: sticky; top: 100px; display: grid; gap: 1.2rem; }
.summary { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-md); }
.summary h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin-bottom: 1rem; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.summary__row:last-child { border-bottom: none; }
.summary__row span { color: rgba(255,255,255,.6); }
.summary__row b { color: #fff; font-weight: 600; text-align: right; }
.summary__row b.empty { color: rgba(255,255,255,.35); font-weight: 500; font-style: italic; }

.assure { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
.assure li { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; font-size: .92rem; color: var(--ink); }
.assure .ic { color: var(--teal); font-weight: 700; flex: none; }
.assure__contact { margin-top: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.assure__contact a { color: var(--teal); font-weight: 700; }

@media (max-width: 960px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-aside { position: static; order: -1; }
  .opt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .opt-grid, .opt-grid--2 { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .qprogress__lbl { display: none; }
}