/* ===== Zive IT — On-demand banner + Quote wizard ===== */

/* ---- Hero banner ---- */
.ondemand-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
  justify-content:center; text-align:left;
  margin:0 auto 30px; padding:16px 20px; max-width:760px;
  background:linear-gradient(120deg, rgba(100,168,197,.10), rgba(154,215,234,.05));
  border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(100,168,197,.08), 0 24px 60px -30px rgba(0,0,0,.7);
}
.ondemand-banner__text{ flex:1 1 340px; min-width:260px; }
.ondemand-banner__tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-tag); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:6px;
}
.ondemand-banner__tag::before{ content:"✦"; color:var(--accent); }
.ondemand-banner__desc{ color:var(--text-dim); font-size:14px; line-height:1.55; }
.ondemand-banner__desc strong{ color:var(--text); font-weight:600; }
.ondemand-banner .btn{ flex:0 0 auto; white-space:nowrap; }

@media (max-width:560px){
  .ondemand-banner{ flex-direction:column; align-items:stretch; text-align:center; }
  .ondemand-banner__tag{ justify-content:center; }
  .ondemand-banner .btn{ width:100%; justify-content:center; }
}

/* ---- Modal overlay ---- */
.quote-modal{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:flex-start; justify-content:center;
  padding:max(16px, 4vh) 16px; overflow-y:auto;
  background:rgba(3,4,8,.72); backdrop-filter:blur(6px);
}
.quote-modal.open{ display:flex; }
body.quote-open{ overflow:hidden; }

.quote-dialog{
  width:100%; max-width:680px; margin:auto;
  background:var(--bg-soft); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 40px 100px -30px rgba(0,0,0,.85);
  display:flex; flex-direction:column; max-height:92vh; overflow:hidden;
  animation:quoteIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes quoteIn{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;} }

.quote-head{ padding:20px 22px 14px; border-bottom:1px solid var(--border); position:relative; }
.quote-head__title{ font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--text); padding-right:36px; }
.quote-head__sub{ font-size:13px; color:var(--text-faint); margin-top:3px; }
.quote-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; color:var(--text-dim);
  border:1px solid var(--border); background:var(--surface); font-size:18px; line-height:1;
}
.quote-close:hover{ color:var(--text); border-color:var(--border-strong); }

/* progress */
.quote-steps{ display:flex; gap:6px; margin-top:14px; }
.quote-steps__dot{ height:4px; flex:1; border-radius:99px; background:var(--surface-2); transition:background .3s; }
.quote-steps__dot.done{ background:var(--accent); }
.quote-steps__dot.active{ background:var(--accent-2); }

/* body */
.quote-body{ padding:22px; overflow-y:auto; }
.quote-step-title{ font-family:var(--font-display); font-size:16.5px; font-weight:600; margin-bottom:4px; color:var(--text); }
.quote-step-hint{ font-size:13px; color:var(--text-faint); margin-bottom:18px; }

/* fields */
.quote-field{ margin-bottom:16px; }
.quote-field > label{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:7px; }
.quote-field .req{ color:var(--accent-2); }
.quote-input, .quote-textarea, .quote-select{
  width:100%; padding:11px 13px; font-family:inherit; font-size:14.5px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color .2s, box-shadow .2s;
}
.quote-input:focus, .quote-textarea:focus, .quote-select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(100,168,197,.16);
}
.quote-textarea{ min-height:88px; resize:vertical; line-height:1.5; }
.quote-input::placeholder, .quote-textarea::placeholder{ color:var(--text-faint); }
.quote-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .quote-grid2{ grid-template-columns:1fr; } }

/* selectable options (multi/single choice) */
.quote-options{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.quote-options--2col{ grid-template-columns:repeat(2,1fr); }
@media (max-width:520px){ .quote-options--2col{ grid-template-columns:1fr; } }
.quote-option{
  position:relative; display:flex; align-items:flex-start; gap:9px;
  padding:12px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); cursor:pointer; transition:border-color .18s, background .18s, transform .1s;
}
.quote-option:hover{ border-color:var(--border-strong); }
.quote-option.selected{ border-color:var(--accent); background:rgba(100,168,197,.10); }
.quote-option__box{
  flex:0 0 18px; width:18px; height:18px; margin-top:1px; border-radius:6px;
  border:1.5px solid var(--border-strong); display:grid; place-items:center;
  color:var(--accent-ink); font-size:12px; font-weight:800;
}
.quote-option.selected .quote-option__box{ background:var(--accent); border-color:var(--accent); }
.quote-option.selected .quote-option__box::after{ content:"✓"; }
.quote-option[data-single] .quote-option__box{ border-radius:50%; }
.quote-option__label{ flex:1; font-size:13.5px; color:var(--text); line-height:1.35; }

/* tooltip (?) */
.quote-tip{ position:relative; display:inline-grid; place-items:center; flex:0 0 auto;
  width:17px; height:17px; border-radius:50%; font-size:11px; font-weight:700;
  color:var(--accent-2); border:1px solid var(--border-strong); background:var(--surface-2); cursor:help; }
.quote-tip:hover{ color:var(--accent); border-color:var(--accent); }
.quote-tip__pop{
  position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  width:230px; padding:10px 12px; z-index:5; display:none;
  background:#14151c; border:1px solid var(--border-strong); border-radius:10px;
  font-size:12.5px; font-weight:400; line-height:1.45; color:var(--text-dim);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85); text-align:left; letter-spacing:0;
}
.quote-tip.open .quote-tip__pop{ display:block; }
.quote-tip__pop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#14151c; }

/* optional inline description under a selected feature */
.quote-subinput{ margin-top:9px; }
.quote-subinput input{ font-size:13px; padding:8px 11px; }
.quote-subinput textarea{ min-height:72px; font-size:13px; padding:9px 11px; line-height:1.45; }

/* footer */
.quote-foot{ display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:16px 22px; border-top:1px solid var(--border); }
.quote-foot .quote-err{ color:#ff8f8f; font-size:12.5px; flex:1; }
.quote-foot__btns{ display:flex; gap:10px; margin-left:auto; }

/* result */
.quote-result__lead{ font-size:13px; color:var(--text-faint); margin-bottom:14px; }
.quote-card{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:16px 18px; margin-bottom:16px; }
.quote-card h4{ font-family:var(--font-display); font-size:14px; letter-spacing:.02em; color:var(--accent-2); margin-bottom:9px; text-transform:uppercase; }
.quote-card p{ font-size:14px; color:var(--text-dim); line-height:1.6; }
.quote-budget{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.quote-budget__num{ font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--text); }
.quote-budget__meta{ font-size:13px; color:var(--text-faint); }
.quote-budget__brl{ font-size:14px; color:var(--text-dim); font-weight:600; }
.quote-roadmap{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.quote-phase{ display:flex; gap:12px; }
.quote-phase__idx{ flex:0 0 26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(100,168,197,.14); color:var(--accent-2); font-size:12px; font-weight:700; font-family:var(--font-mono); }
.quote-phase__body h5{ font-size:14px; color:var(--text); margin-bottom:2px; }
.quote-phase__body span{ font-size:12.5px; color:var(--text-faint); }
.quote-phase__body p{ font-size:13px; color:var(--text-dim); margin-top:3px; line-height:1.5; }
.quote-disclaimer{ font-size:12px; color:var(--text-faint); margin-top:6px; line-height:1.5; }
.quote-sent{ font-size:13px; color:var(--text-faint); text-align:center; padding:8px 0 2px; }
.quote-sent.ok{ color:var(--accent-2); font-weight:600; }
.quote-sent.err{ color:#ff8f8f; }

/* reuse site buttons but ensure sizing here */
.quote-foot .btn, .quote-result .btn{ font-size:14px; }
.btn--sm-quote{ padding:9px 16px; font-size:13px; }