/* ==============================================================
   MODAL  -  booking wizard + quick "Get Free Quote" form
   ============================================================== */

.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,22,35,.76);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.is-open { display:flex; animation:mFade .2s var(--ease); }
@keyframes mFade { from { opacity:0; } to { opacity:1; } }

.modal {
  background:var(--white); border-radius:var(--r-xl);
  width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  box-shadow:var(--sh-xl); position:relative;
  animation:mUp .3s var(--ease);
}
@keyframes mUp { from { transform:translateY(38px); opacity:0; } to { transform:none; opacity:1; } }

/* ---------------- header ---------------- */
.modal-head {
  background:linear-gradient(135deg,var(--navy-800),var(--navy-600));
  padding:22px 26px 20px; border-radius:var(--r-xl) var(--r-xl) 0 0;
  position:sticky; top:0; z-index:3;
}
.modal-head-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-title { display:flex; align-items:center; gap:11px; min-width:0; }
.modal-title img {
  width:42px; height:42px; border-radius:10px; object-fit:cover; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.22);
}
.modal-title h3 { font-size:18px; color:#fff; line-height:1.25; font-weight:700; }
.modal-title p { font-size:12px; color:rgba(255,255,255,.6); margin-top:2px; }

.modal-close {
  width:34px; height:34px; flex-shrink:0; border-radius:var(--r-sm);
  background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center;
  transition:background .2s var(--ease);
}
.modal-close:hover { background:rgba(255,255,255,.24); }

/* ---------------- progress ---------------- */
.progress { margin-top:18px; }
.progress.is-hidden { display:none; }
.progress-track { display:flex; align-items:center; margin-bottom:8px; }
.pg-item { display:flex; align-items:center; flex:1; }
.pg-item:last-child { flex:0; }
.pg-dot {
  width:27px; height:27px; flex-shrink:0; border-radius:50%;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.4); font-size:11px; font-weight:700;
  display:grid; place-items:center;
  transition:all .35s var(--ease);
}
.pg-dot.is-active { background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-800); }
.pg-dot.is-done   { background:var(--green-500); border-color:var(--green-500); color:#fff; }
.pg-dot.is-skip   { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); color:rgba(255,255,255,.22); }
.pg-line { flex:1; height:2px; margin:0 4px; background:rgba(255,255,255,.13); transition:background .35s var(--ease); }
.pg-line.is-done { background:var(--green-500); }

.progress-labels { display:flex; }
.pg-label { flex:1; font-size:10px; font-weight:500; color:rgba(255,255,255,.38); text-align:center; }
.pg-label:first-child { text-align:left; }
.pg-label:last-child { text-align:right; flex:0 0 auto; }
.pg-label.is-active { color:var(--gold-500); font-weight:700; }
.pg-label.is-done { color:rgba(255,255,255,.62); }
.pg-label.is-skip { color:rgba(255,255,255,.2); }

/* ---------------- body / panels ---------------- */
.modal-body { padding:24px 26px 28px; }

.panel { display:none; }
.panel.is-active { display:block; animation:pIn .25s var(--ease); }
@keyframes pIn { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }

.panel-title { font-size:15px; font-weight:700; color:var(--navy-800); margin-bottom:15px; }
.panel-title small { display:block; font-size:12.5px; font-weight:500; color:var(--muted); margin-top:3px; }

/* ---------------- step 1: property type ---------------- */
.type-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.type-card {
  position:relative; text-align:center; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 18px;
  transition:all .2s var(--ease);
}
.type-card:hover { border-color:var(--blue-300); background:var(--blue-50); }
.type-card.is-selected { border-color:var(--blue-500); background:var(--blue-50); box-shadow:0 0 0 3px rgba(41,128,185,.12); }
.type-card.is-selected::after {
  content:''; position:absolute; top:10px; right:11px;
  width:20px; height:20px; border-radius:50%; background:var(--blue-500);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}
.type-ico {
  width:52px; height:52px; margin:0 auto 12px; border-radius:14px;
  background:var(--blue-50); border:1px solid var(--blue-100); color:var(--blue-500);
  display:grid; place-items:center;
}
.type-card.is-selected .type-ico { background:#fff; }
.type-card h4 { font-size:15px; margin-bottom:4px; }
.type-card p { font-size:12px; color:var(--muted); line-height:1.45; }

/* ---------------- step 2: plan & size ---------------- */
.plan-tabs {
  display:flex; gap:5px; margin-bottom:16px;
  background:var(--paper); padding:4px; border-radius:var(--r-md);
}
.plan-tab {
  flex:1; padding:9px 6px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:600; color:var(--muted);
  transition:all .2s var(--ease);
}
.plan-tab.is-active { background:var(--white); color:var(--navy-800); box-shadow:var(--sh-sm); }
.plan-tab.is-hidden { display:none; }
.plan-tabs.is-hidden { display:none; }

.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.price-opt {
  position:relative; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:13px 11px;
  transition:all .2s var(--ease);
}
.price-opt:hover { border-color:var(--blue-300); background:var(--blue-50); }
.price-opt.is-selected { border-color:var(--blue-500); background:var(--blue-50); box-shadow:0 0 0 3px rgba(41,128,185,.12); }
.price-opt.is-selected::after {
  content:''; position:absolute; top:7px; right:8px;
  width:17px; height:17px; border-radius:50%; background:var(--blue-500);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:10px; background-position:center; background-repeat:no-repeat;
}
.po-size { font-size:11.5px; font-weight:700; color:var(--navy-800); margin-bottom:3px; }
.po-mrp { font-size:10.5px; color:#9AAEBF; line-height:1.3; }
.po-mrp s { text-decoration:line-through; }
.po-amt { font-family:'Bebas Neue',Impact,sans-serif; font-size:23px; color:var(--blue-500); line-height:1.05; }
.po-amt sup { font-size:12px; font-family:inherit; top:-.4em; }
.po-note { font-size:10px; color:#9AAEBF; margin-top:2px; }
.po-custom { font-size:13.5px; font-weight:700; color:var(--blue-500); margin-top:7px; line-height:1.35; }

/* info banners */
.note-box {
  display:none; gap:11px; align-items:flex-start;
  border-radius:var(--r-md); padding:13px 16px; margin-bottom:16px;
}
.note-box.is-shown { display:flex; }
.note-box svg { flex-shrink:0; margin-top:1px; }
.note-box h4 { font-size:13px; margin-bottom:2px; }
.note-box p { font-size:11.5px; line-height:1.55; }

.note-box--amc { background:var(--gold-100); border:1.5px solid rgba(201,138,12,.26); }
.note-box--amc svg { color:var(--gold-600); }
.note-box--amc p { color:#6B5313; }
.note-amc-btn {
  background:var(--navy-700); color:#fff; border-radius:var(--r-sm);
  padding:6px 13px; font-size:11.5px; font-weight:600; margin-top:7px;
}

.note-box--info { background:var(--blue-50); border:1.5px solid var(--blue-200); }
.note-box--info svg { color:var(--blue-500); }
.note-box--info p { color:var(--muted); }

/* ---------------- step 3: schedule ---------------- */
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:14px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field.full { grid-column:1/-1; }
.field label { font-size:12px; font-weight:600; color:var(--ink-soft); }
.field input, .field textarea, .field select {
  border:1.5px solid #CBD8E3; border-radius:var(--r-sm);
  padding:11px 13px; font-size:14px; background:#FAFCFE; color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--blue-400); background:#fff;
  box-shadow:0 0 0 3px rgba(74,159,204,.15);
}
.field textarea { resize:vertical; min-height:74px; }
.field-err { display:none; font-size:11.5px; color:var(--danger); margin-top:1px; }
.field-err.is-shown { display:block; }
.field.has-error input, .field.has-error textarea { border-color:var(--danger); background:#FEF6F5; }

.slot-label { font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:9px; }
.slot-grid { display:flex; gap:8px; flex-wrap:wrap; }
.slot-btn {
  display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid #CBD8E3; border-radius:var(--r-sm);
  padding:9px 14px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); background:#FAFCFE;
  transition:all .2s var(--ease);
}
.slot-btn svg { color:var(--blue-400); }
.slot-btn:hover { border-color:var(--blue-300); color:var(--navy-600); }
.slot-btn.is-selected { background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.slot-btn.is-selected svg { color:var(--gold-500); }

/* ---------------- step 4: summary + details ---------------- */
.summary {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--blue-50); border:1px solid var(--blue-200);
  border-radius:var(--r-md); padding:13px 16px; margin-bottom:18px;
}
.summary-left { flex:1; min-width:0; }
.summary-tag {
  display:inline-block; background:var(--green-500); color:#fff;
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:5px; margin-bottom:4px;
}
.summary-info { font-size:12.2px; color:var(--navy-700); font-weight:600; line-height:1.5; }
.summary-price {
  font-family:'Bebas Neue',Impact,sans-serif; font-size:27px;
  color:var(--blue-500); margin-left:auto; white-space:nowrap; line-height:1;
}

/* ---------------- inline errors ---------------- */
.err-inline {
  display:none; align-items:center; gap:7px;
  font-size:12.5px; color:var(--danger); font-weight:500; margin-bottom:10px;
}
.err-inline.is-shown { display:flex; }

/* ---------------- nav buttons ---------------- */
.modal-nav { display:flex; gap:10px; margin-top:22px; }
.modal-nav .btn--outline { flex:0 0 auto; }
.modal-nav .btn--navy { flex:1; }

.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.spinner.is-shown { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------------- success ---------------- */
.success { display:none; text-align:center; padding:34px 16px 24px; }
.success.is-active { display:block; animation:pIn .3s var(--ease); }
.success-ico {
  width:78px; height:78px; margin:0 auto 18px; border-radius:50%;
  background:var(--green-500); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,177,89,.34);
  animation:pop .45s .12s var(--ease-pop) both;
}
@keyframes pop { from { transform:scale(0); } to { transform:scale(1); } }
.success h3 { font-size:26px; margin-bottom:10px; }
.success p { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:6px; }
.success .redirect { font-size:13px; color:#9AAEBF; margin-top:14px; }
.success .redirect strong { color:var(--blue-500); }

/* ---------------- responsive ---------------- */
@media (max-width:580px) {
  .modal { max-width:none; border-radius:var(--r-lg); max-height:94vh; }
  .modal-head { padding:18px 18px 16px; border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .modal-body { padding:20px 18px 24px; }
  .modal-title h3 { font-size:16px; }
  .field-grid { grid-template-columns:1fr; }
  .price-grid { grid-template-columns:repeat(2,1fr); }
  .pg-label { font-size:9px; }
  .modal-nav { flex-wrap:wrap; }
  .modal-nav .btn--outline { flex:1 1 100%; order:2; }
  .modal-nav .btn--navy { flex:1 1 100%; order:1; }
}