/* =========================================================
   LIST-PROPERTY WIZARD STYLES
   Reuses existing CSS variables from style.css (--p,--pd,--ps,
   --bg,--text,--muted,--border,--green,--shadow). No new theme
   colors are introduced — only layout/components for the wizard.
   ========================================================= */

.wizard-shell{padding:26px 0 70px}
.wizard-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}

/* ---------- Left promo rail ---------- */
.wizard-promo{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;position:sticky;top:94px}
.wizard-promo-top{padding:26px 24px 0}
.wizard-promo-top h2{font-size:26px;font-weight:800;line-height:1.2;margin:0 0 12px;color:var(--text)}
.wizard-promo-top .tag-free{display:inline-block;background:var(--ps);color:var(--p);font-weight:800;font-size:12px;border-radius:8px;padding:6px 10px;margin-bottom:10px}
.wizard-promo-top p{font-size:12.5px;color:var(--muted);margin:0 0 18px}
.wizard-promo-img{position:relative;margin:0 24px 18px;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.wizard-promo-img img{width:100%;height:100%;object-fit:cover;display:block}
.wizard-quote{margin:0 24px 18px;font-style:italic;font-size:15px;font-weight:600;color:var(--text);line-height:1.4;border-left:3px solid var(--p);padding-left:12px}
.wizard-perks{list-style:none;margin:0;padding:0 24px 22px;display:flex;flex-direction:column;gap:14px}
.wizard-perks li{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--text)}
.wizard-perks li i{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--ps);color:var(--p);display:grid;place-items:center;font-size:15px}
.wizard-promo-footer{border-top:1px solid var(--border);padding:18px 24px 22px;text-align:center}
.wizard-promo-footer svg{width:100%;height:auto;color:var(--p);opacity:.55;margin-bottom:10px}
.wizard-promo-footer strong{display:block;font-family:Georgia,serif;font-style:italic;font-size:15px;color:var(--pd)}

/* ---------- Right form column ---------- */
.wizard-main{min-width:0}
.wizard-topline{display:flex;justify-content:flex-end;margin-bottom:14px}
.wizard-back{font-size:12px;font-weight:700;color:var(--p);background:none;border:0;display:inline-flex;align-items:center;gap:6px}
.wizard-back:hover{color:var(--pd)}

.wizard-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px 28px;box-shadow:0 2px 8px rgba(20,20,30,.025)}

/* stepper */
.stepper{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.step-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative;cursor:pointer}
.step-item:not(:last-child)::after{content:"";position:absolute;top:17px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:var(--border);z-index:0}
.step-item.done:not(:last-child)::after{background:var(--p)}
.step-circle{width:34px;height:34px;border-radius:50%;background:#f1f0f5;color:#9c9da5;display:grid;place-items:center;font-weight:800;font-size:13px;position:relative;z-index:1;border:2px solid #f1f0f5}
.step-item.active .step-circle{background:var(--p);color:#fff;border-color:var(--p)}
.step-item.done .step-circle{background:var(--ps);color:var(--p);border-color:var(--p)}
.step-label{font-size:11px;font-weight:700;color:#9c9da5;text-align:center}
.step-item.active .step-label{color:var(--text)}
.step-item.done .step-label{color:var(--p)}

.wizard-head{margin-bottom:22px}
.wizard-head h1{font-size:24px;font-weight:800;margin:0 0 4px;color:var(--text)}
.wizard-head p{font-size:13px;color:var(--muted);margin:0}
.wizard-context-chip{margin-left:auto;background:var(--ps);border:1px solid #dcd5f7;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12px}
.wizard-context-chip i{color:var(--p);font-size:20px}
.wizard-context-chip strong{display:block;font-size:12.5px;color:var(--text)}
.wizard-context-chip a,.wizard-context-chip button{font-size:11px;font-weight:700;color:var(--p);background:none;border:0;padding:0}
.wizard-head-row{display:flex;align-items:flex-start;gap:16px}

/* sections */
.wz-section{border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:18px}
.wz-section-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.wz-num{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--pd);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.wz-section-title h4{font-size:14.5px;font-weight:800;margin:0 0 2px;color:var(--text)}
.wz-section-title span{font-size:11.5px;color:var(--muted)}
.wz-section-title .req{color:#dc5279}

/* choice cards (property type / who's listing / furnishing) */
.choice-cards{display:grid;gap:12px}
.choice-cards.cols-3{grid-template-columns:repeat(3,1fr)}
.choice-cards.cols-2{grid-template-columns:repeat(2,1fr)}
.choice-card{border:1.5px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;position:relative;transition:.15s;background:#fff}
.choice-card:hover{border-color:#cfc6f5}
.choice-card.selected{border-color:var(--p);background:var(--ps)}
.choice-card i.cc-icon{font-size:22px;color:var(--p);margin-bottom:10px;display:block}
.choice-card h5{font-size:13.5px;font-weight:800;margin:0 0 4px;color:var(--text)}
.choice-card p{font-size:11px;color:var(--muted);margin:0}
.choice-card .cc-radio{position:absolute;bottom:14px;left:16px;width:17px;height:17px;border-radius:50%;border:2px solid #d3d0de;display:grid;place-items:center}
.choice-card.selected .cc-radio{border-color:var(--p)}
.choice-card.selected .cc-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--p)}
.choice-card-wide{display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;background:#fff;position:relative}
.choice-card-wide.selected{border-color:var(--p);background:var(--ps)}
.choice-card-wide .cc-radio{width:17px;height:17px;border-radius:50%;border:2px solid #d3d0de;display:grid;place-items:center;flex:0 0 17px;margin-top:2px}
.choice-card-wide.selected .cc-radio{border-color:var(--p)}
.choice-card-wide.selected .cc-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--p)}
.choice-card-wide strong{display:block;font-size:12.5px;font-weight:800;color:var(--text)}
.choice-card-wide span{font-size:11px;color:var(--muted)}

/* choice-card / choice-card-wide: native <input type=radio> inside the card
   (which is now a <label>). Same "belt-and-braces" pattern as .pill-radio
   below — CSS :has() drives the look natively, and step-form.js also toggles
   ".selected" on change for browsers without :has() support. Purely
   structural/hidden, no visual change to the cards themselves. */
.choice-card .cc-radio-input,.choice-card-wide .cc-radio-input{position:absolute;opacity:0;width:0;height:0;margin:0}
.choice-card:has(.cc-radio-input:checked){border-color:var(--p);background:var(--ps)}
.choice-card:has(.cc-radio-input:checked) .cc-radio{border-color:var(--p)}
.choice-card:has(.cc-radio-input:checked) .cc-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--p)}
.choice-card-wide:has(.cc-radio-input:checked){border-color:var(--p);background:var(--ps)}
.choice-card-wide:has(.cc-radio-input:checked) .cc-radio{border-color:var(--p)}
.choice-card-wide:has(.cc-radio-input:checked) .cc-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--p)}

/* furnishing icon cards */
.furn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.furn-card{border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;background:#fff}
.furn-card.selected{border-color:var(--p);background:var(--ps)}
.furn-card i.fc-icon{font-size:20px;color:var(--p)}
.furn-card strong{display:block;font-size:12.5px;font-weight:800;color:var(--text)}
.furn-card span{font-size:10.5px;color:var(--muted)}
.furn-card .cc-radio{width:16px;height:16px;border-radius:50%;border:2px solid #d3d0de;display:grid;place-items:center;margin-left:auto;flex:0 0 16px}
.furn-card.selected .cc-radio{border-color:var(--p)}
.furn-card.selected .cc-radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--p)}

/* pill-radio group (Property Condition / Furnishing / Property Age / Property Facing)
   Native <input type=radio> inside a <label>. Selection is shown via CSS :has()
   AND a JS-added ".is-checked" class on the label (belt-and-braces so it keeps
   working even without :has() support, and stays in sync with change events). */
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.pill-row .pill-radio{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1.5px solid var(--border);border-radius:20px;background:#fff;color:#4b4f58;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s ease;user-select:none}
.pill-row .pill-radio-input{position:absolute;opacity:0;width:0;height:0;margin:0}
.pill-row .pill-radio i{font-size:14px;color:var(--p)}
.pill-row .pill-radio:hover{border-color:var(--p)}
.pill-row .pill-radio:has(.pill-radio-input:checked),
.pill-row .pill-radio.is-checked{background:var(--p);border-color:var(--p);color:#fff}
.pill-row .pill-radio:has(.pill-radio-input:checked) i,
.pill-row .pill-radio.is-checked i{color:#fff}

/* usage / amenity checkbox grid */
.check-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.chk-pill{border:1.5px solid var(--border);border-radius:10px;padding:11px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;color:#54555f;font-weight:600;background:#fff}
.chk-pill.checked{border-color:var(--p);background:var(--ps);color:var(--pd)}
.chk-pill input{accent-color:var(--p);width:14px;height:14px;flex:0 0 14px}
.chk-pill.other-pill{grid-column:span 2}
.chk-pill.other-pill input[type=text]{border:0;background:transparent;outline:0;font-size:11px;flex:1;min-width:0}

/* amenity / highlight grids — native <input type="checkbox"> inside a <label>.
   Checked look is driven purely by CSS :has(), no JS required. */
.amenity-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.amenity-item{border:1.5px solid var(--border);border-radius:10px;padding:12px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:pointer;background:#fff;position:relative}
.amenity-item .am-input{position:absolute;opacity:0;width:0;height:0;margin:0}
.amenity-item:has(.am-input:checked){border-color:var(--p);background:var(--ps)}
.amenity-item i.am-icon{font-size:17px;color:var(--p)}
.amenity-item span{font-size:11px;font-weight:700;color:var(--text);line-height:1.25}
.amenity-item .am-check{position:absolute;top:9px;right:9px;width:16px;height:16px;border-radius:4px;border:1.5px solid #d3d0de;background:#fff;display:grid;place-items:center}
.amenity-item:has(.am-input:checked) .am-check{background:var(--p);border-color:var(--p);color:#fff;font-size:10px}
.amenity-subhead{font-size:11.5px;font-weight:800;color:var(--pd);text-transform:uppercase;letter-spacing:.4px;margin:18px 0 10px}
.amenity-subhead:first-of-type{margin-top:2px}

.highlight-item{border:1.5px solid var(--border);border-radius:10px;padding:11px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;background:#fff;position:relative}
.highlight-item .am-input{position:absolute;opacity:0;width:0;height:0;margin:0}
.highlight-item:has(.am-input:checked){border-color:var(--p);background:var(--ps)}
.highlight-item i.hi-icon{font-size:15px;color:var(--p)}
.highlight-item span{font-size:11.5px;font-weight:700;color:var(--text)}
.highlight-item .am-check{margin-left:auto;width:16px;height:16px;border-radius:4px;border:1.5px solid #d3d0de;background:#fff;display:grid;place-items:center;font-size:10px}
.highlight-item:has(.am-input:checked) .am-check{background:var(--p);border-color:var(--p);color:#fff}

.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}


/* form fields grid */
.wz-fields{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.wz-fields.cols-2{grid-template-columns:repeat(2,1fr)}
.wz-fields.cols-4{grid-template-columns:repeat(4,1fr)}
.wz-field label{display:block;font-size:11px;font-weight:700;color:#54555f;margin-bottom:6px}
.wz-field .req{color:#dc5279}
.wz-field input,.wz-field select,.wz-field textarea{width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 11px;font-size:12px;outline:0;color:var(--text);background:#fff}
.wz-field input:focus,.wz-field select:focus,.wz-field textarea:focus{border-color:#cfc6f5}
.wz-field .unit-row{display:flex;gap:8px}
.wz-field .unit-row select{max-width:110px}
.wz-hint{background:var(--ps);border-radius:10px;padding:12px 14px;font-size:11.5px;color:#5c536e;display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.wz-hint i{color:var(--p);font-size:16px;margin-top:1px}
.char-count{text-align:right;font-size:10.5px;color:#9c9da5;margin-top:5px}

/* pills (popular areas) */
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pill-row button{border:1px solid var(--border);background:#fff;color:#666772;border-radius:99px;padding:7px 12px;font-size:11px;font-weight:600}
.pill-row button.active{background:var(--ps);color:var(--p);border-color:#d8cffc}

/* map + address split */
.loc-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.map-box{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#eef1f6;min-height:230px;position:relative}
.map-box img{width:100%;height:100%;object-fit:cover;display:block}
.map-box-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.map-box-head span{font-size:12.5px;font-weight:800;color:var(--text)}
.map-box-head button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 10px;font-size:10.5px;font-weight:700;color:#54555f}
.map-view-link{display:block;text-align:right;font-size:10.5px;color:var(--p);font-weight:700;margin-top:8px}

.visibility-box{border:1px solid var(--border);border-radius:12px;padding:14px}
.visibility-box>strong{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);margin-bottom:10px}
.visibility-box>strong i{color:var(--p)}
.vis-option{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.vis-option.selected{border-color:var(--p);background:var(--ps)}
.vis-option .cc-radio{width:16px;height:16px;border-radius:50%;border:2px solid #d3d0de;flex:0 0 16px;display:grid;place-items:center;margin-top:2px}
.vis-option.selected .cc-radio{border-color:var(--p)}
.vis-option.selected .cc-radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--p)}
.vis-option strong{display:block;font-size:11.5px;color:var(--text)}
.vis-option span{font-size:10.5px;color:var(--muted)}

.check-inline{display:flex;gap:22px;margin-top:12px}
.check-inline label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#54555f}
.check-inline input{accent-color:var(--p);width:15px;height:15px}

/* photos */
.upload-drop{border:2px dashed #d9d6e3;border-radius:14px;padding:38px 20px;text-align:center;background:#fafafd;cursor:pointer}
.upload-drop i{font-size:30px;color:var(--p)}
.upload-drop strong{display:block;font-size:13px;color:var(--text);margin:10px 0 2px}
.upload-drop small{color:#9c9da5;font-size:10.5px}
.upload-drop .btn{margin-top:14px}
.upload-tips{background:var(--ps);border-radius:14px;padding:16px 18px}
.upload-tips h5{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--text);margin:0 0 12px}
.upload-tips h5 i{color:var(--p)}
.upload-tips ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.upload-tips li{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:#5c536e}
.upload-tips li i{color:var(--green);margin-top:2px}
.upload-note{font-size:10.5px;color:#9c9da5;margin-top:10px}

.photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:16px}
.photo-item{position:relative;border-radius:12px;overflow:hidden;background:#eee;aspect-ratio:4/3}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cover-badge{position:absolute;top:8px;left:8px;background:var(--p);color:#fff;font-size:9px;font-weight:800;border-radius:7px;padding:5px 8px;display:flex;align-items:center;gap:4px}
.photo-menu{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.9);border:0;color:#666772;font-size:12px}
.photo-caption{display:flex;justify-content:space-between;align-items:center;padding:8px 2px 0;font-size:11px;color:#54555f;font-weight:600}
.photo-caption i{color:#9c9da5}
.photo-add{border:1.5px dashed #d9d6e3;border-radius:12px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--p);font-size:12px;font-weight:700;cursor:pointer;background:#fafafd}
.photo-add i{font-size:20px}
.safe-note{background:var(--ps);border-radius:12px;padding:12px 14px;font-size:11px;color:#5c536e;display:flex;gap:10px;align-items:flex-start;aspect-ratio:auto;grid-column:span 2}
.safe-note i{color:var(--p);font-size:16px;margin-top:1px}

/* preview step */
.preview-hero{border-radius:14px;overflow:hidden;aspect-ratio:16/8;margin-bottom:18px;background:#eee}
.preview-hero img{width:100%;height:100%;object-fit:cover}
.preview-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.summary-block{border:1px solid var(--border);border-radius:12px;padding:16px}
.summary-block h5{font-size:12.5px;font-weight:800;color:var(--text);display:flex;justify-content:space-between;margin:0 0 12px}
.summary-block h5 button{font-size:10.5px;font-weight:700;color:var(--p);background:none;border:0}
.summary-row{display:flex;justify-content:space-between;font-size:11.5px;padding:6px 0;border-bottom:1px dashed var(--border);color:#54555f}
.summary-row:last-child{border-bottom:0}
.summary-row strong{color:var(--text)}

/* footer nav */
.wizard-footer-nav{display:flex;justify-content:space-between;margin-top:22px}

@media(max-width:1100px){
  .wizard-layout{grid-template-columns:1fr}
  .wizard-promo{position:static}
  .check-grid,.amenity-grid{grid-template-columns:repeat(3,1fr)}
  .wz-fields{grid-template-columns:repeat(3,1fr)}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .loc-split{grid-template-columns:1fr}
}
@media(max-width:700px){
  .choice-cards.cols-3,.furn-cards,.highlight-grid{grid-template-columns:1fr}
  .check-grid,.amenity-grid{grid-template-columns:repeat(2,1fr)}
  .wz-fields{grid-template-columns:repeat(2,1fr)}
  .wz-fields.cols-4{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .preview-summary-grid{grid-template-columns:1fr}
  .stepper{overflow-x:auto}
  .step-label{font-size:9px}
  .wizard-card{padding:18px}
  .wizard-head-row{flex-direction:column}
}