/* ==========================================================================
   Property Wizard – Mobile-First
   Extracted from templates/dashboard/wizard/step1.php
   ========================================================================== */

/* Shell & Hero – mobile: single column */
.wizard-shell { display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
.wizard-main { min-width:0; }
.wizard-hero { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:1.5rem; }
.wizard-hero-copy { background:linear-gradient(135deg,#0f766e 0%,#0284c7 55%,#f97316 100%); color:#fff; border-radius:24px; padding:1.5rem; box-shadow:0 20px 50px rgba(2,132,199,0.2); }
.wizard-hero-kicker { display:inline-block; padding:0.3rem 0.8rem; background:rgba(255,255,255,0.16); border-radius:999px; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.9rem; }
.wizard-hero h1 { font-size:1.5rem; margin-bottom:0.75rem; color:#fff; }
.wizard-hero-text { font-size:1.03rem; max-width:48rem; opacity:0.95; margin-bottom:1.2rem; }
.wizard-hero-highlights { display:flex; flex-wrap:wrap; gap:0.65rem; }
.wizard-hero-highlights span { background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.18); padding:0.55rem 0.85rem; border-radius:999px; font-size:0.9rem; }

/* Progress */
.wizard-progress-card { background:#fff7ed; border:1px solid #fdba74; border-radius:24px; padding:1.5rem; box-shadow:0 16px 40px rgba(249,115,22,0.12); }
.wizard-progress-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.8rem; }
.wizard-progress-caption { font-size:0.84rem; color:#9a3412; text-transform:uppercase; letter-spacing:0.04em; }
.wizard-progress-bar { background:#fed7aa; border-radius:999px; height:10px; overflow:hidden; margin-bottom:0.85rem; }
.wizard-progress-bar span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#f97316 0%,#facc15 100%); }

/* Phases – 2 cols on mobile */
.wizard-phases { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-bottom:1.5rem; }
.wizard-phase { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:1rem; display:grid; gap:0.55rem; min-height:120px; position:relative; box-shadow:0 8px 24px rgba(15,23,42,0.05); }
.wizard-phase.active { border-color:#38bdf8; background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%); box-shadow:0 18px 38px rgba(56,189,248,0.16); transform:translateY(-2px); }
.wizard-phase.done { border-color:#86efac; background:linear-gradient(180deg,#f0fdf4 0%,#ffffff 100%); }
.wizard-phase-number { width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; font-weight:700; background:#e0f2fe; color:#0369a1; }
.wizard-phase.done .wizard-phase-number { background:#dcfce7; color:#166534; }
.wizard-phase p { margin:0; color:#64748b; font-size:0.9rem; }
.wizard-phase-link { margin-top:auto; font-size:0.86rem; color:#0284c7; font-weight:600; }

/* Section headings */
.wizard-section-head { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.35rem; }
.wizard-section-tag { display:inline-block; background:#ecfeff; color:#0f766e; border-radius:999px; padding:0.3rem 0.75rem; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:0.45rem; align-self:flex-start; }
.wizard-section-head p { color:#64748b; max-width:48rem; }
.wizard-subsection { margin:1.3rem 0 0.8rem; }
.wizard-subsection h3 { color:#0f172a; margin-bottom:0.25rem; }
.wizard-subsection p { color:#64748b; }
.wizard-subsection-inline { display:flex; flex-direction:column; gap:1rem; margin-top:1.8rem; }
.wizard-inline-badge { background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:0.45rem 0.8rem; font-size:0.8rem; font-weight:700; white-space:nowrap; align-self:flex-start; }

/* Form fields */
.field-label { display:flex; align-items:center; gap:0.65rem; }
.field-icon { width:2rem; height:2rem; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#e0f2fe 0%,#fef3c7 100%); color:#0f172a; flex-shrink:0; font-size:0.95rem; box-shadow:inset 0 0 0 1px rgba(148,163,184,0.18); }

/* Capacity */
.capacity-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem; }
.capacity-card { background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%); border:1px solid #dbeafe; border-radius:20px; padding:1rem; box-shadow:0 12px 28px rgba(14,165,233,0.08); }
.capacity-card-label { display:grid; gap:0.6rem; color:#0f172a; font-weight:700; margin-bottom:0.8rem; }
.capacity-card input { width:100%; font-size:1.4rem; font-weight:700; text-align:center; border-radius:16px; border:1px solid #cbd5e1; background:#fff; padding:0.8rem 0.65rem; min-height:44px; }

/* Amenities */
.amenity-toggle-grid { display:grid; grid-template-columns:1fr; gap:0.75rem; margin-bottom:1.1rem; }
.amenity-toggle { background:linear-gradient(180deg,#fff7ed 0%,#ffffff 100%); border:1px solid #fed7aa; border-radius:18px; padding:0.9rem 1rem; }
.amenity-toggle-label { display:flex; align-items:center; gap:0.65rem; margin:0; font-weight:600; color:#334155; }
.amenity-list-grid { display:grid; grid-template-columns:1fr; gap:0.45rem 0.8rem; }
.amenity-list-item { margin:0; padding:0.2rem 0; }

/* Translations */
.translation-card { margin-bottom:1.5rem; padding:1.25rem; border:1px solid #dbeafe; border-radius:18px; background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%); }

/* Imported images card – prominent success display */
.imported-images-card { background:linear-gradient(135deg,#f0fdf4 0%,#ecfeff 50%,#eff6ff 100%); border:2px solid #86efac; border-radius:24px; }
.imported-images-card h2 { color:#065f46; }
.imported-images-note { font-size:0.9rem; color:#475569; margin-top:0.5rem; }

/* Images */
.wizard-image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0.85rem; margin-bottom:1rem; }
.wizard-image-card { position:relative; border-radius:16px; overflow:hidden; min-height:120px; background:#e2e8f0; box-shadow:0 10px 30px rgba(15,23,42,0.08); }
.wizard-image-card img { width:100%; height:100%; object-fit:cover; display:block; }
.wizard-image-badge { position:absolute; left:0.6rem; bottom:0.6rem; background:rgba(15,23,42,0.8); color:#fff; border-radius:999px; padding:0.25rem 0.6rem; font-size:0.75rem; }

/* Actions */
.wizard-actions { margin-top:1.6rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* Preview panel – hidden on mobile by default, shown via modal */
.wizard-preview-panel { position:static; }
.wizard-preview-card { background:#fff; color:#0f172a; border-radius:24px; overflow:hidden; box-shadow:0 22px 44px rgba(15,23,42,0.16); border:1px solid #e2e8f0; }
.wizard-preview-hero { padding:1rem; background:linear-gradient(180deg,#fff7ed 0%,#ffffff 100%); }
.wizard-preview-gallery { display:grid; grid-template-columns:1fr; gap:0.55rem; margin-bottom:1rem; }
.wizard-preview-gallery-main img,
.wizard-preview-gallery-side img { width:100%; height:100%; object-fit:cover; border-radius:18px; display:block; }
.wizard-preview-gallery-main { min-height:140px; }
.wizard-preview-gallery-side { display:grid; gap:0.55rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.wizard-preview-gallery-empty { min-height:140px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(135deg,#e0f2fe 0%,#ffedd5 100%); color:#475569; text-align:center; padding:1rem; margin-bottom:1rem; }
.wizard-preview-head h3 { color:#0f172a; margin:0.45rem 0 0.3rem; font-size:1.35rem; }
.wizard-preview-head p { color:#64748b; margin-bottom:0.8rem; }
.wizard-preview-kicker { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:#0284c7; }
.wizard-preview-cta-row { display:flex; flex-wrap:wrap; gap:0.5rem; }
.wizard-preview-chip { background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:0.42rem 0.75rem; font-size:0.78rem; font-weight:700; }
.wizard-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.85rem; padding:0 1rem 1rem; }
.wizard-preview-grid div { background:#f8fafc; border-radius:16px; padding:0.8rem; display:grid; gap:0.25rem; border:1px solid #e2e8f0; }
.wizard-preview-grid strong { font-size:0.78rem; color:#64748b; text-transform:uppercase; letter-spacing:0.03em; }
.wizard-preview-grid span { color:#0f172a; font-weight:700; }
.wizard-preview-copy { padding:0 1rem 1rem; }
.wizard-preview-copy h4 { margin:0 0 0.4rem; font-size:0.95rem; color:#0f172a; }
.wizard-preview-copy p { margin:0; color:#475569; line-height:1.5; }
.wizard-preview-checklist { display:grid; gap:0.55rem; padding:0 1rem 1rem; }
.wizard-preview-checklist span { background:#f8fafc; border-radius:16px; padding:0.75rem 0.85rem; color:#334155; font-size:0.9rem; border:1px solid #e2e8f0; }
.wizard-preview-facts { display:flex; flex-wrap:wrap; gap:0.55rem; padding:0 1rem 1rem; }
.wizard-preview-facts span { background:#ecfeff; color:#0f766e; border-radius:999px; padding:0.45rem 0.7rem; font-size:0.82rem; font-weight:700; }
.wizard-preview-facts span.is-muted { background:#f1f5f9; color:#94a3b8; }
.wizard-preview-footer { display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem; padding:1rem; border-top:1px solid #e2e8f0; background:#fcfcfd; color:#64748b; font-size:0.84rem; }

/* Preview modal */
.wizard-preview-modal { position:fixed; inset:0; z-index:50; }
.wizard-preview-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.62); }
.wizard-preview-modal-card { position:relative; width:min(92vw,680px); margin:4vh auto 0; background:#fff; border-radius:24px; padding:1.5rem; z-index:1; box-shadow:0 30px 80px rgba(15,23,42,0.26); max-height:90vh; overflow-y:auto; }
.wizard-preview-close { position:absolute; right:1rem; top:1rem; border:none; background:#e2e8f0; width:2.2rem; height:2.2rem; border-radius:50%; cursor:pointer; min-height:44px; min-width:44px; }

/* ---- sm (480px+) ---- */
@media (min-width: 480px) {
    .amenity-toggle-grid { grid-template-columns:repeat(2,1fr); }
    .amenity-list-grid { grid-template-columns:repeat(2,1fr); }
    .capacity-cards { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
    .wizard-image-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

/* ---- md (768px+) ---- */
@media (min-width: 768px) {
    .wizard-hero-copy { padding:2rem; }
    .wizard-hero h1 { font-size:2rem; }
    .wizard-phases { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .wizard-phase { min-height:148px; }
    .wizard-section-head { flex-direction:row; justify-content:space-between; align-items:flex-start; }
    .wizard-subsection-inline { flex-direction:row; align-items:flex-start; justify-content:space-between; }
    .amenity-toggle-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
    .amenity-list-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
    .wizard-preview-gallery { grid-template-columns:1.7fr 1fr; }
    .wizard-preview-gallery-main { min-height:180px; }
    .wizard-preview-gallery-side { grid-template-rows:repeat(2,minmax(0,1fr)); grid-template-columns:none; }
    .wizard-preview-footer { flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ---- lg (1024px+) ---- */
@media (min-width: 1024px) {
    .wizard-shell { grid-template-columns:minmax(0,1fr) 320px; }
    .wizard-hero { grid-template-columns:minmax(0,1fr) 320px; }
    .wizard-preview-panel { position:sticky; top:1.25rem; }
}