/* Quotation Wizard - shared styles for moving / storage / packaging */

.wiz-box {
    max-width: 1400px;
    margin: 40px auto 60px;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
    display: flex;
    /* iOS Safari ignores overflow:hidden on body when a positioned descendant
       overshoots, which let the wizard scroll sideways. Pinning the box to
       100% of its container and clipping any rogue child here keeps the page
       laterally stable on iPhones. */
    overflow: hidden;
    overflow-x: clip;
    width: 100%;
    box-sizing: border-box;
    min-height: 520px;
}

/* Belt-and-suspenders: nothing inside the wizard should be allowed to
   compute a width larger than its parent. Without this, long auto-filled
   addresses or place-autocomplete dropdowns push the form sideways on
   narrow screens. */
.wiz-box, .wiz-box *, .wiz-box *::before, .wiz-box *::after { box-sizing: border-box; }
.wiz-form { min-width: 0; max-width: 100%; }
.wiz-panel { max-width: 100%; }
.wiz-panel input,
.wiz-panel select,
.wiz-panel textarea { max-width: 100%; }

.wiz-image {
    width: 40%;
    min-height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.wiz-image-moving   { background-image: url('../images/movingservice.png'); }
.wiz-image-storage  { background-image: url('../images/storageimg.png'); }
.wiz-image-packaging { background-image: url('../images/Packingimg.png'); }
.wiz-image-delivery { background-image: url('../images/deliveryim.png'); }

.wiz-form {
    width: 70%;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
}

.wiz-form h2 {
    color: var(--bg-main,#061D5B);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.wiz-form .wiz-subtitle {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.wiz-step-label {
    color: #666;
    font-size: 14px;
    margin-bottom: 16px;
}

.wiz-progress-track {
    width: 100%;
    height: 8px;
    background: #ebebeb;
    border-radius: 4px;
    margin-bottom: 32px;
    overflow: hidden;
}

.wiz-progress-fill {
    height: 100%;
    background: var(--brand-blue,#00007E);
    border-radius: 4px;
    transition: width 0.3s;
}

.wiz-panel { display: none; }
.wiz-panel.active { display: block; }

.wiz-group { margin-bottom: 18px; }
.wiz-group > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.wiz-group select,
.wiz-group input[type="text"],
.wiz-group input[type="email"],
.wiz-group input[type="tel"],
.wiz-group input[type="number"],
.wiz-group input[type="date"] {
    width: 100%;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    /* 16px keeps iOS Safari from auto-zooming the viewport on input focus,
       which is what was shifting the wizard sideways on iPhones. */
    font-size: 16px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    /* iOS Safari renders empty <select> / <input type="date"> with no
       intrinsic content, so the box collapses to just its padding (~20px)
       and looks shorter than text inputs that have placeholders. min-height
       locks every field to a consistent ~44px regardless of whether a
       value is picked. line-height prevents the value/placeholder area
       from being squashed. */
    min-height: 44px;
    line-height: 1.4;
}

/* iOS Safari renders <input type="date"> with an intrinsic content
   width (driven by the "MM/DD/YYYY" placeholder), which ignores the
   parent's width:100% and overflows the wizard card on phones. min-width:0
   plus appearance:none flattens the input so the explicit width:100%
   above wins. The native iOS wheel picker still triggers on focus —
   only the inline visual is normalised. (Height is handled by the
   shared rule above via min-height + line-height.) */
.wiz-group input[type="date"] {
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    display: block;
}
.wiz-group input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    min-height: 1.4em;
}

/* iOS Safari sizes <select> at the OS-default height (~28px) unless
   -webkit-appearance is unset — then min-height from the shared rule
   above wins. Stripping the native chrome also drops the dropdown
   caret, so we draw one back in via an inline SVG background and
   add right-side padding so the caret doesn't sit on top of the
   selected option text. */
.wiz-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 36px;
}
.wiz-group select:disabled {
    background: #f5f5f5;
    color: #999;
}

.wiz-row { display: flex; gap: 16px; }
.wiz-row .wiz-group { flex: 1; }

.wiz-radio-group {
    display: flex;
    gap: 24px;
    margin-top: 4px;
}
.wiz-radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
}
.wiz-radio-group input[type="radio"] {
    accent-color: var(--brand-blue,#00007E);
    width: 16px;
    height: 16px;
}

.wiz-btn-next,
.wiz-btn-submit {
    background: var(--brand-blue,#00007E);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.wiz-btn-next:hover,
.wiz-btn-submit:hover { opacity: 0.9; }

.wiz-btn-back {
    background: #E0E0E0;
    color: #333;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.wiz-btn-back:hover { opacity: 0.85; }

.wiz-buttons {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}
.wiz-buttons-end {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* Items step */
.wiz-item-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.wiz-item-tab {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #D0D5DD;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.wiz-item-tab:hover { background: #f0f0ff; }
.wiz-item-tab.active {
    background: var(--brand-blue,#00007E);
    color: #fff;
    border-color: var(--brand-blue,#00007E);
}

.wiz-items-pane { display: none; }
.wiz-items-pane.active { display: block; }

.wiz-panel-items {
    min-height: 0;
}

.wiz-items-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.wiz-items-header .wiz-subtitle {
    margin-bottom: 20px;
}

.wiz-btn-add-item {
    background: #fff;
    color: var(--brand-blue,#00007E);
    border: 1px solid var(--brand-blue,#00007E);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.wiz-btn-add-item:hover {
    background: #f5f7ff;
}

/* ───── Delivery inline items form (replaces "+ Add Item" modal) ───── */
.wiz-inline-items { margin-top: 8px; }

.wiz-inline-items-list { display: flex; flex-direction: column; gap: 10px; }

.wiz-inline-item-row {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 44px 14px 16px;
}
.wiz-inline-item-fields {
    display: grid;
    /* Columns follow DOM order: Name · Volume · Quantity · Heavy. Heavy gets
       the widest non-name column (1.4fr) for its checkbox + weight input. */
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 12px;
    align-items: end;
}
.wiz-inline-item-field { display: flex; flex-direction: column; gap: 4px; }
.wiz-inline-item-field label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.wiz-inline-item-field input[type="text"],
.wiz-inline-item-field input[type="number"] {
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 14px;
    background: #fff;
}
.wiz-inline-item-field input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
/* The Heavy column stacks: checkbox+label on top, weight input
   underneath. The weight input is disabled (and hidden via CSS) until
   the checkbox is ticked, so customers can't enter a stray number for
   a non-heavy item and the empty "lb" placeholder doesn't clutter the
   layout. */
.wiz-inline-item-field-heavy {
    gap: 6px;
}
.wiz-inline-item-heavy-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
}
.wiz-inline-item-heavy-label input { width: 16px; height: 16px; }
.wiz-inline-item-field-heavy input[type="number"]:disabled {
    display: none;
}

/* 2026-06 — Include-in-total-volume toggle. Mirrors the Heavy
   checkbox styling so the two read as paired controls. Sits in its
   own column on desktop and shares the mobile "extras" row with the
   Heavy field. */
.wiz-inline-item-field-include {
    justify-content: center;
}
.wiz-inline-item-include-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    white-space: nowrap;
}
.wiz-inline-item-include-label input { width: 16px; height: 16px; }
/* Dim the row when excluded so customer sees at a glance which
   items aren't being counted. */
.wiz-inline-item-row:has(.wiz-inline-item-include-label input:not(:checked)) {
    opacity: 0.55;
}

.wiz-inline-item-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wiz-inline-item-remove:hover { background: #fee2e2; color: #b91c1c; }

.wiz-inline-items-add { margin-top: 12px; }
.wiz-inline-items-add .wiz-btn-add-item { width: 100%; justify-content: center; }

/* Mobile (≤640px): pack the row into a clean 3-line layout — Name
   spans the full width, Number + Volume share the second row 50/50,
   and the Heavy checkbox + (revealed) Weight input live together on
   the third row. Uses named grid areas so the HTML order can stay the
   way the desktop layout wants it. */
@media (max-width: 640px) {
    .wiz-inline-item-fields {
        /* Stack one field per row in the SAME order as desktop so the
           per-item volume reads unambiguously: Name → Volume → Number →
           Heavy → Include. */
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "volume"
            "qty"
            "heavy"
            "include";
        gap: 12px;
    }
    .wiz-inline-item-field-name    { grid-area: name; }
    .wiz-inline-item-field-qty     { grid-area: qty; }
    .wiz-inline-item-field-volume  { grid-area: volume; }
    .wiz-inline-item-field-include { grid-area: include; }
    .wiz-inline-item-field-heavy  {
        grid-area: heavy;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .wiz-inline-item-field-heavy > label { padding-top: 4px; }
    .wiz-inline-item-field-heavy input[type="number"] {
        max-width: 140px;
        flex: 0 1 140px;
    }
}

.wiz-items-table-wrap {
    max-height: clamp(320px, 48vh, 460px);
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.wiz-items-summary {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-top: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #f0f4ff 0%, #f8f9fb 100%);
    border: 1px solid #dbe2f5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(6, 29, 91, 0.04);
}
.wiz-items-summary-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wiz-items-summary-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wiz-items-summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-blue,#00007E);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.wiz-items-summary-unit {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}
.wiz-items-summary-divider {
    width: 1px;
    background: #dbe2f5;
}
@media (max-width: 640px) {
    .wiz-items-summary {
        flex-direction: column;
        gap: 12px;
        padding: 16px 18px;
    }
    .wiz-items-summary-divider {
        width: 100%;
        height: 1px;
    }
    .wiz-items-summary-value {
        font-size: 22px;
    }
}

.wiz-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}
.wiz-items-table thead th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    padding: 8px 10px;
    border-bottom: 2px solid #ebebeb;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.wiz-items-table tbody td {
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.wiz-custom-item-row {
    background: #f8faff;
}
.wiz-custom-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #dbe7ff;
    color: var(--bg-main,#061D5B);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wiz-item-name {
    font-weight: 600;
    color: #111827;
}
.wiz-item-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.wiz-item-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wiz-item-meta-mobile {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}
.wiz-item-meta-mobile span {
    display: block;
}
/* The edit pencil sits inline at the end of the meta block on mobile so
   the customer can tap it right where the size info is shown (#4). */
.wiz-item-meta-mobile .wiz-item-edit-btn-mobile {
    margin-top: 4px;
}
.wiz-item-weight-mobile {
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}
.wiz-items-table input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}
.wiz-items-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-blue,#00007E);
    cursor: pointer;
}
/* Packaging wizard variant selector — card per variant (2 Packer / 3 Packer / …)
   with price + throughput; the selected card gets a highlight ring. */
.wiz-packaging-variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.wiz-packaging-variant {
    position: relative;
    display: block;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.wiz-packaging-variant:hover { border-color: #c7d2fe; }
.wiz-packaging-variant.selected {
    border-color: var(--brand-blue,#00007E);
    background: #f5f7ff;
    box-shadow: 0 0 0 3px rgba(0, 0, 126, 0.10);
}
.wiz-packaging-variant input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wiz-packaging-variant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.wiz-packaging-variant-name {
    font-weight: 700;
    color: var(--bg-main,#061D5B);
    font-size: 15px;
}
.wiz-packaging-variant-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: transparent;
    font-weight: 700;
    font-size: 13px;
    transition: background .15s, color .15s;
}
.wiz-packaging-variant.selected .wiz-packaging-variant-check {
    background: var(--brand-blue,#00007E);
    color: #fff;
}
.wiz-packaging-variant-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wiz-packaging-variant-price {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
}
.wiz-packaging-variant-price small {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}
.wiz-packaging-variant-meta {
    font-size: 12px;
    color: #6b7280;
}

.wiz-dimensions {
    color: #888;
    font-size: 13px;
    white-space: nowrap;
}
.wiz-dimensions-text {
    display: inline-block;
    vertical-align: middle;
}
/* Volume (ft³) + edit pencil share one inline row under the dimensions,
   so the pencil sits directly beside the volume rather than below it. */
.wiz-dimensions-volume-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.wiz-dimensions-volume {
    color: #6b7280;
    font-size: 11px;
    line-height: 1.3;
}
.wiz-dimensions-volume-row .wiz-item-edit-btn-size {
    margin-left: 0;
}
/* Small red "(300 lb)" hint rendered above the size text for heavy items. */
.wiz-item-weight {
    display: block;
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}
.wiz-item-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: var(--bg-main,#061D5B);
    cursor: pointer;
    border-radius: 6px;
    vertical-align: middle;
    line-height: 1;
}
.wiz-item-edit-btn .wiz-item-edit-icon { width: 14px; height: 14px; display: block; }
.wiz-item-edit-btn:hover { background: #c7d2fe; }
.wiz-item-edit-btn-mobile {
    display: none;
    margin-left: 0;
    flex-shrink: 0;
}

/* Variant placed inside the Size column (next to the dimensions value)
   so the affordance sits where the customer is actually editing. */
.wiz-item-edit-btn-size {
    margin-left: 8px;
    vertical-align: middle;
}

/* Locked-input style applied to modal fields that aren't editable when
   the customer is editing a catalog item — only dimensions are. The
   `disabled` attribute already blocks input; this just makes the
   visual "this is read-only" obvious. */
.wiz-input-locked,
input.wiz-input-locked,
select.wiz-input-locked {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    opacity: 0.85;
}
.wiz-heavy-block.wiz-input-locked {
    opacity: 0.75;
    pointer-events: none;
}

/* Info notice shown below the item tabs, reminding the customer that boxes
   live in their own tab and still need a count even if they're checking
   furniture/appliances here. Dismissable via the × button. */
.wiz-items-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin: 12px 0 18px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 8px;
    color: var(--brand-navy2,#1E3A8A);
    font-size: 13px;
    line-height: 1.5;
}
.wiz-items-notice[hidden] { display: none; }
.wiz-items-notice-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--brand-navy2,#2563eb);
}
.wiz-items-notice-icon svg { width: 100%; height: 100%; display: block; }
.wiz-items-notice-body { flex: 1; min-width: 0; }
.wiz-items-notice-body strong { color: var(--brand-navy2,#1d4ed8); }
.wiz-items-notice-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-top: -2px;
    border: none;
    background: transparent;
    color: #1e40af;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wiz-items-notice-close svg { width: 14px; height: 14px; display: block; }
.wiz-items-notice-close:hover { background: #dbeafe; }
.wiz-item-edit-btn:focus-visible {
    outline: 2px solid var(--bg-secondary,#3155E7);
    outline-offset: 1px;
}
.wiz-heavy-block {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f5f7ff;
    border: 1px solid #e0e7ff;
    border-radius: 8px;
}
.wiz-heavy-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    user-select: none;
}
.wiz-heavy-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-blue,#00007E);
    cursor: pointer;
    margin: 0;
}
.wiz-heavy-weight {
    margin-top: 10px;
}
.wiz-heavy-weight input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}

.wiz-qty-control {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wiz-qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: var(--brand-blue,#00007E);
}
.wiz-qty-btn:hover { background: #f0f0f0; }
.wiz-qty-value {
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    color: var(--bg-main,#061D5B);
    display: inline-block;
}

.wiz-qty-control-static {
    justify-content: center;
}

.wiz-item-modal[hidden] {
    display: none;
}

.wiz-item-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wiz-item-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 29, 91, 0.45);
}

.wiz-item-modal-dialog {
    position: relative;
    width: min(680px, 100%);
    max-width: 680px;
    height: min(720px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wiz-item-modal-head,
.wiz-item-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    flex-shrink: 0;
}

.wiz-item-modal-head {
    border-bottom: 1px solid #e5e7eb;
}

.wiz-item-modal-head h3 {
    margin: 0;
    color: var(--bg-main,#061D5B);
    font-size: 20px;
    font-weight: 700;
}

.wiz-item-modal-close {
    width: 38px;
    height: 38px;
    border: 1px solid #d0d5dd;
    border-radius: 50%;
    background: #fff;
    color: #333;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}
.wiz-item-modal-close i { color: inherit; font-size: inherit; line-height: 1; }
.wiz-item-modal-close svg { width: 18px; height: 18px; display: block; }
.wiz-item-modal-close:hover { background: #f9fafb; }

.wiz-item-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.wiz-item-modal-error {
    margin: 0;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
}

.wiz-item-modal-actions {
    justify-content: flex-end;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

@media (max-width: 768px) {
    .wiz-item-edit-btn {
        border: none;
        background: transparent;
    }
    .wiz-items-header {
        flex-direction: column;
        align-items: stretch;
    }

    .wiz-btn-add-item {
        width: 100%;
    }

    .wiz-items-table-wrap {
        max-height: 360px;
        overflow-x: hidden;
    }

    .wiz-items-table thead th:nth-child(3),
    .wiz-items-table tbody td:nth-child(3) {
        display: none;
    }

    .wiz-items-table {
        table-layout: fixed;
    }

    .wiz-items-table thead th:nth-child(1) {
        width: 56px !important;
    }

    .wiz-items-table thead th:nth-child(2) {
        width: auto !important;
    }

    /* Quantity is ALWAYS the last column on every wizard (moving/storage/
       delivery = 4th; packaging = 5th). Target it via :last-child so the
       stepper (two pill buttons + value) always gets enough width and stays
       centred instead of being squeezed into the narrow rate width. */
    .wiz-items-table thead th:last-child,
    .wiz-items-table tbody td:last-child {
        width: 96px !important;
        text-align: center;
        white-space: nowrap;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Packaging wizard Rate column = the 4th cell when a 5th (Quantity)
       follows it. Keep it narrow; the quantity rule above owns the last cell. */
    .wiz-items-table thead th:nth-child(4):not(:last-child),
    .wiz-items-table tbody td:nth-child(4):not(:last-child) {
        width: 64px !important;
        text-align: right;
        white-space: nowrap;
    }

    .wiz-items-table tbody td {
        padding: 12px 8px;
    }

    /* Stop long item names like "Medium box" from wrapping mid-word in a
       way that makes the row tower while the Rate cell sits with three
       blank lines next to it. Allow wrapping at spaces only. */
    .wiz-items-table tbody td:nth-child(2) {
        min-width: 0;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .wiz-item-name {
        line-height: 1.25;
    }

    /* Centre + size the qty stepper so the 2 pill buttons + value sit neatly
       within the 96px Quantity cell instead of overflowing it. */
    .wiz-qty-control {
        gap: 6px;
        padding: 0;
        justify-content: center;
    }
    .wiz-qty-control .wiz-qty-btn {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        padding: 0;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .wiz-qty-control .wiz-qty-value {
        min-width: 16px;
        font-size: 14px;
    }

    .wiz-item-meta-mobile {
        display: block;
    }

    .wiz-item-edit-btn-mobile {
        display: inline-flex;
    }

    .wiz-item-name-wrap > .wiz-item-edit-btn {
        display: none;
    }

    .wiz-item-modal {
        align-items: stretch;
        padding: 12px;
    }

    .wiz-item-modal-dialog {
        height: calc(100dvh - 24px);
        height: calc(95vh - 24px);
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 16px;
    }

    .wiz-item-modal-head,
    .wiz-item-modal-body,
    .wiz-item-modal-actions {
        padding: 16px;
    }

    .wiz-item-modal-actions {
        flex-direction: column-reverse;
        position: sticky;
        bottom: 0;
        z-index: 2;
        box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
    }

    .wiz-item-modal-actions .wiz-btn-back,
    .wiz-item-modal-actions .wiz-btn-next {
        width: 100%;
    }
}

/* Per-step validation */
.wiz-field-error select,
.wiz-field-error input[type="text"],
.wiz-field-error input[type="email"],
.wiz-field-error input[type="tel"],
.wiz-field-error input[type="number"],
.wiz-field-error input[type="date"] {
    border-color: #dc2626 !important;
    background: #fef2f2;
}
.wiz-field-error label { color: #b91c1c; }
.wiz-field-error-msg {
    display: block;
    color: #b91c1c;
    font-size: 12px;
    margin-top: 4px;
}
.wiz-plan-card.wiz-field-error,
.wiz-field-error .wiz-plan-card {
    border-color: #dc2626;
}

/* Contact step */
.wiz-type-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}
.wiz-type-toggle-btn {
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: all 0.2s;
}
.wiz-type-toggle-btn.active {
    background: var(--brand-blue,#00007E);
    color: #fff;
}

.wiz-phone-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    overflow: hidden;
}
.wiz-phone-prefix {
    padding: 10px 12px;
    background: #f5f5f5;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    border-right: 1px solid #D0D5DD;
    white-space: nowrap;
}
.wiz-phone-wrap input {
    border: none;
    padding: 10px 14px;
    font-size: 15px;
    flex: 1;
    outline: none;
    width: 100%;
}

/* Storage add-on checkbox */
.wiz-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 16px;
    background: #f8f9fb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.wiz-checkbox-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--bg-main,#061D5B);
    margin-top: 2px;
}
.wiz-checkbox-row label {
    margin: 0;
    font-weight: 600;
    color: #32323B;
    display: block;
}
.wiz-checkbox-row .wiz-addon-desc {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

/* ============================================================
   Plan selection step — Truck detail card + horizontal pills
   ============================================================ */

/* ---------- Truck detail card (top) — blue background ---------- */
.wiz-truck-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--bg-main,#061D5B) 0%, #1a3a8a 100%);
    border-radius: 14px;
    padding: 44px 24px 20px;
    margin-bottom: 24px;
    position: relative;
    color: #fff;
    overflow: hidden;
}
/* Full-width top banner — same treatment as the .wiz-pill-badge strip on the
   plan cards below (green = recommended), spanning the card edge to edge. */
.wiz-truck-card-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #16a34a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}
.wiz-truck-card-img {
    width: 110px;
    height: 74px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.wiz-truck-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.wiz-truck-card-placeholder {
    color: rgba(255,255,255,0.5);
    font-size: 28px;
}
.wiz-truck-card-info {
    flex: 1;
    min-width: 0;
}
.wiz-truck-card-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    /* 2-truck plans (e.g. "4 Mover + 2 Truck") render two truck names
       joined by " + " ("Pro Extended Capacity Truck + Standard Moving
       Van"). Allow long pair names to wrap cleanly instead of pushing
       the Total Volume column off the card. */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}
.wiz-truck-card-tier {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
}
.wiz-truck-card-volume {
    text-align: right;
    flex-shrink: 0;
}
.wiz-truck-card-volume-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wiz-truck-card-volume-value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}

/* ---------- "Select your preferred mover option" label ---------- */
.wiz-plan-selector-label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 12px;
}

/* ==========================================================
   Plan cards — matching PLAN_UI.md reference exactly
   ========================================================== */

/* Card row */
.wiz-plan-pills {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

/* Card base */
.wiz-plan-pill {
    flex: 1;
    min-width: 0;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    display: block;
}
.wiz-plan-pill[hidden] { display: none !important; }
.wiz-plan-pill input[type="radio"] { display: none; }

.wiz-plan-pill:hover {
    border-color: var(--plan-color, #3b82f6);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Selected state */
.wiz-plan-pill.selected {
    border-color: #22c55e;
    background: #f6fffa;
}

/* ---- Top color strip (full-width bar, NOT floating pill) ---- */
.wiz-pill-badge {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #3b82f6, var(--brand-navy2,#1E3A8A));
}
.wiz-plan-pill.selected .wiz-pill-badge {
    background: #16a34a;
}

/* ---- Card body ---- */
.wiz-pill-content {
    padding: 16px 18px 18px;
}

/* Row 1: icon + plan name + radio circle */
.wiz-pill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wiz-pill-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Mover icon box — holds one silhouette per mover (2/3/4), wrapped
   2-per-row so the crew size is visible at a glance. */
.wiz-pill-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    font-size: 18px;
    background: #e0e7ff;
    color: #3b82f6;
}
.wiz-pill-icon i {
    flex: 0 0 auto;
    width: 13px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}
.wiz-plan-pill.selected .wiz-pill-icon {
    background: #dcfce7;
    color: #16a34a;
}

/* Plan name */
.wiz-pill-name {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    white-space: nowrap;
}

/* Radio / checkmark circle */
.wiz-pill-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    font-size: 0;
    color: transparent;
    background: #fff;
}
.wiz-plan-pill.selected .wiz-pill-check {
    background: #22c55e;
    border-color: #22c55e;
    font-size: 12px;
    color: #fff;
}

/* Row 2: price + duration pill */
.wiz-pill-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.wiz-pill-price {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
    white-space: nowrap;
}
.wiz-pill-price small {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

.wiz-pill-duration {
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: #f3f4f6;
    padding: 6px 10px;
    border-radius: 999px;
    color: #374151;
    white-space: nowrap;
    flex: 1;
    justify-content: flex-end;
}
.wiz-pill-duration-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.wiz-pill-duration strong {
    color: var(--bg-main,#061D5B);
    font-weight: 700;
}

/* Legacy */
.wiz-plan-card { display: none; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .wiz-plan-pills { flex-direction: column; gap: 16px; }
    .wiz-plan-pill { min-width: auto; }
    /* Restructure the truck card so a long 2-truck pair name (e.g.
       "Pro Extended Capacity Truck + Standard Moving Van") can't
       collide with the Total Volume column. Image + Info share the
       top row at their natural width; the Volume block drops to its
       own full-width row at the bottom and right-aligns. */
    .wiz-truck-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "img    info"
            "volume volume";
        gap: 10px 14px;
        padding: 16px;
        padding-top: 44px; /* clear the full-width top banner */
    }
    .wiz-truck-card-img {
        grid-area: img;
        width: 72px;
        height: 52px;
        margin-top: 0;
    }
    .wiz-truck-card-info {
        grid-area: info;
        margin-top: 0;
    }
    .wiz-truck-card-name { font-size: 15px; }
    .wiz-truck-card-tier { font-size: 12px; }
    .wiz-truck-card-volume {
        grid-area: volume;
        margin-top: 4px;
        text-align: right;
        border-top: 1px solid rgba(255,255,255,0.18);
        padding-top: 10px;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }
    .wiz-truck-card-volume-label { font-size: 11px; }
    .wiz-truck-card-volume-value { font-size: 18px; }
    .wiz-pill-name { font-size: 14px; }
    .wiz-pill-price { font-size: 16px; }
}

.wiz-route-summary {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding: 12px 16px;
    margin: 0 0 20px;
    background: #f5f7ff;
    border: 1px solid #dbe2ff;
    border-radius: 10px;
    font-size: 14px;
    color: var(--bg-main,#061D5B);
}
.wiz-route-summary strong { color: var(--brand-blue,#00007E); font-weight: 700; }

/* Recommended Storage Space card — green-themed twin of the (blue) truck
   card, rendered above it so the storage UNIT reads as the headline. Full-
   width "★ RECOMMENDED" banner mirrors the truck/plan-pill badge strip. */
.wiz-storage-card {
    margin: 0 0 16px;
    border: 1.5px solid #16a34a;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(16, 163, 74, 0.10);
}
.wiz-storage-card-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wiz-storage-card-body { padding: 16px 18px 18px; }
.wiz-storage-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.wiz-storage-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    background: #ecfdf5;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.wiz-storage-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #064e3b;
    line-height: 1.25;
}
.wiz-storage-card-stats {
    display: flex;
    gap: 12px;
}
.wiz-storage-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 12px 14px;
}
.wiz-storage-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wiz-storage-stat-value {
    font-size: 19px;
    font-weight: 800;
    color: #064e3b;
    white-space: nowrap;
}

/* Summary section */
.wiz-summary {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
}
.wiz-summary h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--bg-main,#061D5B);
    margin-bottom: 12px;
}
.wiz-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
    padding: 4px 0;
}
.wiz-summary-row strong { color: #333; }
.wiz-summary-row-highlight {
    font-weight: 600;
    color: var(--bg-main,#061D5B);
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #e5e7eb;
}
.wiz-summary-row-highlight strong { color: var(--bg-main,#061D5B); font-weight: 700; }
.wiz-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-blue,#00007E);
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
}

/* Supporting elements */
.wiz-breadcrumb {
    padding: 16px 0;
    color: #666;
    font-size: 14px;
}
.wiz-breadcrumb a {
    color: var(--brand-blue,#00007E);
    text-decoration: none;
}
.wiz-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 8px;
}
.wiz-error {
    color: #b91c1c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Banner variant for panel-level errors (e.g. items-required alert on
   the items step) — bigger, framed, attention-grabbing. */
.wiz-panel-error {
    margin: 8px 0 14px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}
.wiz-panel-error[hidden] {
    display: none;
}

/* Plans footnote helper to keep step-moving-plans + step-storage-plans
   inline-style-free. Same visual as the old inline copy. */
.wiz-plan-footnote {
    font-size: 12px;
    color: #888;
    margin-top: 12px;
}

/* ── Include-packing add-on card (wizard last step) ─────────────────── */
.wiz-packing-addon,
.wiz-cash-toggle {
    margin: 20px 0 8px;
    padding: 18px 20px;
    background: #f8faff;
    border: 1.5px solid #d6deff;
    border-radius: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.wiz-cash-toggle:has(input[type="checkbox"]:checked) {
    border-color: #10b981;
    background: #ecfdf5;
}
.wiz-cash-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}
.wiz-cash-toggle-label input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: #10b981;
    cursor: pointer;
    flex-shrink: 0;
}
.wiz-cash-toggle-text strong {
    display: block;
    font-size: 15px;
    color: var(--bg-main,#061D5B);
    margin-bottom: 2px;
}
.wiz-cash-toggle-text .wiz-cash-toggle-sub {
    display: block;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}
.wiz-packing-addon:has(input[type="checkbox"]:checked) {
    border-color: var(--bg-secondary,#3155E7);
    background: #eef2ff;
}
.wiz-packing-toggle {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}
.wiz-packing-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wiz-packing-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 12px;
    transition: all 0.15s ease;
    margin-top: 2px;
}
.wiz-packing-toggle input[type="checkbox"]:checked + .wiz-packing-check {
    background: var(--bg-secondary,#3155E7);
    border-color: var(--bg-secondary,#3155E7);
    color: #ffffff;
}
.wiz-packing-label strong {
    display: block;
    font-size: 15px;
    color: var(--bg-main,#061D5B);
    margin-bottom: 2px;
}
.wiz-packing-label .wiz-packing-sub {
    display: block;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}
.wiz-packing-body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #d6deff;
}
.wiz-packing-body[hidden] {
    display: none;
}
.wiz-packing-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}
.wiz-packing-body input[type="number"] {
    width: 100%;
    max-width: 220px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
}
.wiz-packing-body input[type="number"]:focus {
    outline: none;
    border-color: var(--bg-secondary,#3155E7);
    box-shadow: 0 0 0 3px rgba(49, 85, 231, 0.15);
}

@media (max-width: 1024px) {
    .wiz-box { min-height: auto; }
    .wiz-image { width: 35%; }
    .wiz-form { width: 65%; padding: 32px; }
    .wiz-item-modal-dialog { max-width: calc(100% - 32px); }
}

@media (max-width: 768px) {
    .wiz-box {
        flex-direction: column;
        border-radius: 16px;
    }
    .wiz-image { display: none; }
    .wiz-form {
        width: 100%;
        padding: 24px 20px;
    }
    .wiz-form h2 { font-size: 20px; }
    .wiz-row { flex-direction: column; gap: 0; }
    .wiz-plan-cards { flex-direction: column; }
    .wiz-item-tab { padding: 6px 10px; font-size: 12px; }

    /* Buttons full width */
    .wiz-btn-next,
    .wiz-btn-back,
    .wiz-btn-submit { width: 100%; }
    .wiz-form-buttons,
    .wiz-form-buttons-end { flex-direction: column; gap: 10px; }

    /* Type toggle full width */
    .wiz-type-toggle { width: 100%; }
    .wiz-type-toggle-btn { flex: 1; padding: 10px 16px; font-size: 14px; }
}

@media (max-width: 480px) {
    .wiz-form { padding: 20px 16px; }
    .wiz-form h2 { font-size: 18px; }
}

.pac-container {
    z-index: 10000 !important;
}

/* --------------------------------------------------------------------
   Pickup repeater (N pickup addresses)
   -------------------------------------------------------------------- */

.wiz-pickup-block {
    margin-top: 14px;
}

.wiz-pickup-block + .wiz-pickup-block {
    border-top: 1px dashed #e2e8f0;
    padding-top: 14px;
    margin-top: 18px;
}

.wiz-pickup-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
}

.wiz-pickup-block-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.wiz-pickup-block-title i {
    color: #F97316;
}

.wiz-pickup-block-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.wiz-pickup-block-remove:hover {
    background: #fee2e2;
}

.wiz-pickup-add-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.wiz-pickup-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #334155;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.wiz-pickup-add-btn:hover:not(:disabled) {
    border-color: #F97316;
    color: #F97316;
    background: #fff7ed;
}

.wiz-pickup-add-btn:disabled,
.wiz-pickup-add-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wiz-pickup-add-hint {
    color: #64748b;
    font-size: 12px;
}

/* --------------------------------------------------------------------
   Delivery wizard uploads — photo + document attachments
   -------------------------------------------------------------------- */

.wiz-uploads {
    margin-top: 18px;
    display: grid;
    gap: 14px;
}

@media (min-width: 640px) {
    .wiz-uploads {
        grid-template-columns: 1fr 1fr;
    }
}

.wiz-uploads-group {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 14px;
    background: #f8fafc;
}

.wiz-uploads-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
    margin-bottom: 8px;
}

.wiz-uploads-label i {
    color: #F97316;
}

.wiz-uploads-group input[type="file"] {
    display: block;
    width: 100%;
    font-size: 13px;
    padding: 8px 0;
}

.wiz-uploads-hint {
    color: #64748b;
    font-size: 11px;
    margin: 4px 0 8px 0;
}

.wiz-uploads-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wiz-uploads-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    color: #334155;
}

.wiz-uploads-list-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiz-uploads-list-size {
    color: #94a3b8;
    font-size: 11px;
}

.wiz-uploads-list-remove {
    border: none;
    background: transparent;
    color: #ef4444;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.wiz-uploads-list-remove:hover {
    color: #b91c1c;
}