/* ========================================================================== DriveX — Mobile Listing Workflow (stepped posting) Mobile-only (<=768px) presentation layer over the EXISTING post form. Desktop (>768px) is completely unaffected — no rule below applies there. Activated by JS adding `dx-mwf-on` to only on mobile. ========================================================================== */ @media (max-width: 768px) { /* Only restyle once the JS controller has taken over. */ html.dx-mwf-on .dx-mwf-step { display: none; } html.dx-mwf-on .dx-mwf-step.dx-mwf-active { display: block; animation: dxMwfIn .22s ease; } @keyframes dxMwfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---- Progress header (sticky under the site header) ---- */ .dx-mwf-progress { position: sticky; top: 0; z-index: 40; background: var(--bg, #0a0c0f); padding: 12px 0 10px; margin: -8px 0 14px; border-bottom: 1px solid var(--border, #23262d); } .dx-mwf-bar { display: flex; gap: 6px; margin-bottom: 9px; } .dx-mwf-bar span { flex: 1; height: 5px; border-radius: 99px; background: var(--bg3, #1a1d24); transition: background .25s; } .dx-mwf-bar span.done { background: rgba(249,115,22,.55); } .dx-mwf-bar span.active { background: var(--accent, #f97316); } .dx-mwf-steplabel { display: flex; align-items: baseline; gap: 8px; } .dx-mwf-steplabel .dx-mwf-stepnum { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent, #f97316); } .dx-mwf-steplabel .dx-mwf-steptitle { font-size: 16px; font-weight: 700; color: var(--text, #f8fafc); font-family: var(--font-head, inherit); } /* ---- Step content cards keep existing look; tighten margins ---- */ html.dx-mwf-on .dx-mwf-step .al-post-form { margin-bottom: 12px !important; } /* ---- Big touch-friendly inputs ---- */ html.dx-mwf-on .al-form-field input, html.dx-mwf-on .al-form-field select, html.dx-mwf-on .al-form-field textarea { font-size: 16px !important; /* >=16px stops iOS auto-zoom */ min-height: 50px; padding: 13px 14px !important; } html.dx-mwf-on .al-form-field textarea { min-height: 96px; } html.dx-mwf-on .al-form-field label { font-size: 13.5px !important; font-weight: 600; } /* ---- Category chooser (Step 1): big tappable cards ---- */ html.dx-mwf-on #listingTypeGrid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } html.dx-mwf-on #listingTypeGrid .al-listing-type-card { padding: 22px 14px !important; min-height: 116px; justify-content: center; text-align: center; } html.dx-mwf-on #listingTypeGrid .al-listing-type-card i { font-size: 30px !important; } html.dx-mwf-on #listingTypeGrid .al-listing-type-card.selected { box-shadow: 0 0 0 3px rgba(249,115,22,.18); } /* ---- Quick vs. Detailed segmented toggle (top of Step 2) ---- */ .dx-mwf-modepick { display: flex; gap: 8px; margin: 2px 0 16px; background: var(--bg3, #1a1d24); padding: 5px; border: 1px solid var(--border, #23262d); border-radius: 12px; } .dx-mwf-modepick button { flex: 1; border: none; background: transparent; cursor: pointer; padding: 11px 8px; border-radius: 9px; color: var(--text2, #94a3b8); font-size: 13px; font-weight: 700; transition: all .15s; display: flex; flex-direction: column; gap: 2px; align-items: center; } .dx-mwf-modepick button small { font-size: 10.5px; font-weight: 500; color: var(--text3, #64748b); } .dx-mwf-modepick button.active { background: var(--accent, #f97316); color: #0a0c0f; } .dx-mwf-modepick button.active small { color: rgba(10,12,15,.7); } /* ---- Optional-field hiding in Quick mode ---- */ html.dx-mwf-on form.dx-mwf-mode-quick .dx-mwf-opt { display: none !important; } /* A small hint shown in quick mode where optionals were collapsed */ .dx-mwf-opt-hint { display: none; font-size: 12px; color: var(--text3, #64748b); background: rgba(249,115,22,.06); border: 1px dashed rgba(249,115,22,.25); border-radius: 10px; padding: 11px 13px; margin-top: 8px; } html.dx-mwf-on form.dx-mwf-mode-quick .dx-mwf-opt-hint { display: block; } /* ---- Review step summary ---- */ .dx-mwf-summary { background: var(--bg2, #12141a); border: 1px solid var(--border, #23262d); border-radius: 14px; padding: 6px 16px; margin-bottom: 14px; } .dx-mwf-summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border, #23262d); } .dx-mwf-summary .row:last-child { border-bottom: none; } .dx-mwf-summary .row .k { font-size: 12.5px; color: var(--text3, #64748b); flex-shrink: 0; } .dx-mwf-summary .row .v { font-size: 13.5px; color: var(--text, #f8fafc); font-weight: 600; text-align: right; word-break: break-word; } .dx-mwf-review-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 14px; } .dx-mwf-review-photos img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #23262d); } .dx-mwf-review-edit { background: none; border: none; color: var(--accent, #f97316); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; } /* ---- Fixed bottom action bar (always in view — Issue 3) ---- */ .dx-mwf-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 10px; align-items: center; background: var(--bg, #0a0c0f); border-top: 1px solid var(--border, #23262d); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 26px rgba(0,0,0,.4); } /* Reserve space so the last fields are never hidden behind the fixed bar. */ html.dx-mwf-on form[method="post"][enctype] { padding-bottom: 88px; } html.dx-mwf-on main[role="main"] { padding-top: 14px !important; padding-bottom: 0 !important; } /* Tighten the page heading block on mobile so Step 1 fits above the fold. */ html.dx-mwf-on main[role="main"] > .al-container > div:first-of-type { margin-bottom: 14px !important; } .dx-mwf-nav .dx-mwf-back { flex: 0 0 auto; min-width: 92px; background: var(--bg3, #1a1d24); color: var(--text2, #94a3b8); border: 1px solid var(--border, #23262d); border-radius: 12px; padding: 15px 16px; font-size: 15px; font-weight: 700; cursor: pointer; } .dx-mwf-nav .dx-mwf-next { flex: 1; background: var(--accent, #f97316); color: #0a0c0f; border: none; border-radius: 12px; padding: 16px; font-size: 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 20px rgba(249,115,22,.28); } .dx-mwf-nav .dx-mwf-next:disabled { opacity: .55; box-shadow: none; } /* Step 1 has no Back button — Next fills width */ .dx-mwf-step[data-step="1"] .dx-mwf-back { display: none; } /* Draft link on the review step */ .dx-mwf-draftrow { text-align: center; margin: 4px 0 2px; } .dx-mwf-draftrow button { background: none; border: none; color: var(--text3, #64748b); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px; text-decoration: underline; } /* In stepper mode, hide the original inline footer (relocated into review) */ html.dx-mwf-on .al-form-footer { border: none !important; padding: 0 !important; margin: 0 !important; display: block !important; } html.dx-mwf-on .al-form-footer > div:first-child { /* the "reviewed & published" note */ font-size: 12px; color: var(--text3, #64748b); margin-bottom: 12px !important; max-width: 100% !important; text-align: center; } html.dx-mwf-on .al-form-footer #alSaveDraftBtn { display: none; } /* draft offered via dx-mwf-draftrow */ html.dx-mwf-on .al-form-footer button[type="submit"] { width: 100%; justify-content: center; font-size: 16px; padding: 16px; } /* ---- Consistent spacing system across the workflow (Issue 4) ---- */ /* 8pt-based rhythm: card padding 16, field gap 14, section-title gap 14. */ html.dx-mwf-on .dx-mwf-step .al-form-section { padding: 16px !important; } html.dx-mwf-on .dx-mwf-step .al-form-section-title { font-size: 15px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--border, #23262d); display: flex; align-items: center; gap: 8px; } html.dx-mwf-on .dx-mwf-step .al-form-grid { gap: 14px !important; } html.dx-mwf-on .dx-mwf-step .al-form-field { margin-bottom: 0; } /* Standalone fields (outside a grid) get uniform vertical rhythm. */ html.dx-mwf-on .dx-mwf-step .al-form-section > .al-form-field { margin-top: 14px !important; } html.dx-mwf-on .dx-mwf-step .al-form-section > .al-form-field:first-of-type { margin-top: 0 !important; } html.dx-mwf-on .dx-mwf-step .al-form-field label { display: block; margin-bottom: 7px; } /* Switch rows: even padding */ html.dx-mwf-on .dx-mwf-step .al-switch-row { padding: 13px 0 !important; } /* ---- Review step header (P4: "Review your advertisement") ---- */ .dx-mwf-review-head { margin: 2px 0 14px; } .dx-mwf-review-title { font-size: 20px; font-weight: 800; color: var(--text, #f8fafc); font-family: var(--font-head, inherit); letter-spacing: -.2px; } .dx-mwf-review-sub { font-size: 13px; color: var(--text3, #64748b); margin-top: 3px; } /* P4: review footer note compact; the actual Submit lives in the fixed bar (triggered via the relocated submit button) so it's always visible. */ html.dx-mwf-on .dx-mwf-step[data-step="5"] .al-form-footer { margin-top: 4px !important; } html.dx-mwf-on .dx-mwf-step[data-step="5"] .al-form-footer button[type="submit"] { display: none !important; } /* ---- P6: professional polish — typography, buttons, consistency ---- */ html.dx-mwf-on .dx-mwf-step .al-form-section-title { letter-spacing: -.2px; } /* uniform select chevrons + tap targets */ html.dx-mwf-on .al-form-field select { min-height: 50px; } /* category cards: clearer selected state */ html.dx-mwf-on #listingTypeGrid .al-listing-type-card div { line-height: 1.3; } /* error text consistency */ html.dx-mwf-on .al-field-error > label { font-weight: 700; } /* Inline scripts / hidden plumbing must never take layout space */ html.dx-mwf-on .dx-mwf-step > script { display: none; } } /* Desktop safety: if the helper class ever leaks above 768px, neutralise it. */ @media (min-width: 769px) { html.dx-mwf-on .dx-mwf-step { display: block !important; } .dx-mwf-progress, .dx-mwf-nav, .dx-mwf-modepick, .dx-mwf-summary, .dx-mwf-review-photos, .dx-mwf-draftrow { display: none !important; } } /* Searchable-picker trigger matches the stepper's big touch inputs */ @media (max-width: 768px) { html.dx-mwf-on .al-form-field .dxss-trigger { min-height: 50px; font-size: 16px !important; padding: 13px 14px !important; border-radius: 10px; } } /* ── Step 5 (Review) polish (2026-06-26) ───────────────────────────────── */ @media (max-width: 768px) { html.dx-mwf-on .dx-mwf-step[data-step="5"] .dx-mwf-review-head { text-align: center; margin: 2px 0 16px; } html.dx-mwf-on .dx-mwf-step[data-step="5"] .dx-mwf-review-head::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px; background: rgba(249,115,22,.14); color: var(--accent, #f97316); font-size: 22px; font-weight: 800; } html.dx-mwf-on .dx-mwf-step[data-step="5"] .dx-mwf-review-title { font-size: 21px; } html.dx-mwf-on .dx-mwf-step[data-step="5"] .dx-mwf-summary { padding: 4px 16px; border-radius: 14px; } html.dx-mwf-on .dx-mwf-step[data-step="5"] .dx-mwf-summary .row { padding: 12px 0; } html.dx-mwf-on .dx-mwf-step[data-step="5"] .dx-mwf-summary .row .k { font-weight: 600; } /* the title field on review reads as the headline of the ad */ html.dx-mwf-on .dx-mwf-step[data-step="5"] #alAdTitle { font-size: 16px !important; font-weight: 700 !important; } /* comfortable, evenly-spaced review blocks */ html.dx-mwf-on .dx-mwf-step[data-step="5"] > * { margin-bottom: 14px; } html.dx-mwf-on .dx-mwf-step[data-step="5"] .dx-mwf-review-photos img { width: 64px; height: 64px; border-radius: 10px; } } /* One-button OTP UX: the separate "Send OTP" tap is folded into the main "Request OTP & Review" button, so hide the standalone send button on mobile. */ @media (max-width: 768px) { html.dx-mwf-on #alWaSendWrap { display: none !important; } }