/* ══════════════════════════════════════════════════════════════════════════ create-ad.css — the three-step ad wizard (category → details → publish) Typography: the same stack public/css/styles.css gives , and no webfont. This page used to pull Syne 700/800 and DM Sans from Google Fonts, which made it the only screen in the app rendered in a different face — "aligned with the site" means dropping both and letting headings earn their hierarchy from weight, size and tracking instead of from a display face. Colour: the brand blue and its partners come straight from styles.css, down to the rule that text on a blue fill is dark (--ca-ink) rather than white — white on #007DFF measures 3.9:1 and misses AA at button sizes. ══════════════════════════════════════════════════════════════════════════ */ :root{ --ca-bg:#071014; --ca-surface:#07171b; --ca-surface-2:rgba(255,255,255,.035); --ca-surface-3:rgba(255,255,255,.06); --ca-line:rgba(0,125,255,.15); --ca-line-strong:rgba(0,125,255,.32); --ca-blue:#007DFF; --ca-blue-hover:#2A92FF; --ca-blue-deep:#0F63C4; --ca-blue-soft:rgba(0,125,255,.14); --ca-ink:#071014; /* text that sits ON the blue */ --ca-text:#dbe9ee; --ca-text-strong:#f2fafd; --ca-muted:#9aa6ad; --ca-danger:#ff5252; --ca-warn:#ffa726; --ca-ok:#3ddc97; --ca-r-lg:16px; --ca-r:12px; --ca-r-sm:9px; /* Aliases for the map + camera CSS lifted in at the bottom of this file, which was written against the old names and is otherwise untouched. */ --green:var(--ca-blue); --blue:#2979ff; --muted:var(--ca-muted); --text:var(--ca-text); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth;overflow-y:auto!important;height:auto!important;min-height:100dvh} body{ min-height:100dvh; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--ca-bg); color:var(--ca-text); -webkit-font-smoothing:antialiased; overflow-x:hidden;overflow-y:auto!important;height:auto!important; } /* The full-screen camera must not scroll the page underneath it. */ body.cam-active{overflow:hidden!important;height:100dvh!important} /* ── Ambient background ──────────────────────────────────────────────────── */ .bg-orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(110px);opacity:.3;animation:orbDrift linear infinite} .bg-orb-1{width:560px;height:560px;background:radial-gradient(circle,rgba(0,125,255,.2),transparent 70%);top:-220px;left:-200px;animation-duration:24s} .bg-orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(0,140,200,.11),transparent 70%);bottom:-160px;right:-160px;animation-duration:30s;animation-direction:reverse} @keyframes orbDrift{0%{transform:translate(0,0)}33%{transform:translate(50px,-40px)}66%{transform:translate(-35px,50px)}100%{transform:translate(0,0)}} .bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(0,125,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(0,125,255,.028) 1px,transparent 1px);background-size:44px 44px;pointer-events:none} @media (prefers-reduced-motion:reduce){.bg-orb{animation:none}} /* ── Page shell ──────────────────────────────────────────────────────────── */ #createAdPage{ min-height:100dvh;display:flex;flex-direction:column;align-items:center; padding:120px 16px 96px;position:relative; } @media(max-width:480px){#createAdPage{padding-top:100px}} .wiz-hero{width:100%;max-width:760px;text-align:center;position:relative;z-index:10;margin-bottom:26px} .wiz-hero h1{ font-size:clamp(23px,5.4vw,31px);font-weight:700;letter-spacing:-.022em; line-height:1.15;color:var(--ca-text-strong);margin-bottom:9px; } .wiz-hero h1 em{font-style:normal;color:var(--ca-blue)} .wiz-hero p{font-size:clamp(13px,3.2vw,15px);color:var(--ca-muted);line-height:1.6;max-width:480px;margin:0 auto} /* ── Step indicator ──────────────────────────────────────────────────────── */ .wiz-steps{ width:100%;max-width:760px;position:relative;z-index:10;margin-bottom:20px; display:grid;grid-template-columns:repeat(3,1fr);gap:8px; } .wiz-steps-track{ grid-column:1 / -1;height:3px;border-radius:3px;background:var(--ca-surface-3); overflow:hidden;margin-bottom:12px; } .wiz-steps-fill{height:100%;width:0;background:var(--ca-blue);border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)} .wiz-step-tab{ display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center; background:none;border:none;font:inherit;color:inherit;padding:0; cursor:default;opacity:.5;transition:opacity .25s; } .wiz-step-tab[data-reachable="1"]{cursor:pointer} .wiz-step-tab.is-active,.wiz-step-tab.is-done{opacity:1} .wiz-step-dot{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center; border:1.5px solid var(--ca-line-strong);background:var(--ca-surface-2); font-size:12px;font-weight:700;color:var(--ca-muted); transition:background .25s,border-color .25s,color .25s,box-shadow .25s; } .wiz-step-tab.is-active .wiz-step-dot{ border-color:var(--ca-blue);background:var(--ca-blue-soft);color:var(--ca-blue); box-shadow:0 0 0 4px rgba(0,125,255,.09); } .wiz-step-tab.is-done .wiz-step-dot{background:var(--ca-blue);border-color:var(--ca-blue);color:var(--ca-ink)} .wiz-step-label{font-size:11.5px;font-weight:600;color:var(--ca-muted);line-height:1.25} .wiz-step-tab.is-active .wiz-step-label{color:var(--ca-text-strong)} /* ── Card + step panes ───────────────────────────────────────────────────── */ .wiz-card{ width:100%;max-width:760px;position:relative;z-index:10; background:var(--ca-surface);border:1px solid var(--ca-line);border-radius:var(--ca-r-lg); box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden; } .wiz-pane{padding:26px 28px 28px;animation:paneIn .3s cubic-bezier(.4,0,.2,1) both} .wiz-pane[hidden]{display:none} @keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.wiz-pane{animation:none}} .pane-head{margin-bottom:22px} .pane-head h2{font-size:19px;font-weight:700;letter-spacing:-.012em;color:var(--ca-text-strong);margin-bottom:6px} .pane-head p{font-size:13px;color:var(--ca-muted);line-height:1.6} .pane-head p strong{color:var(--ca-blue);font-weight:600} /* ── Sections inside a pane ──────────────────────────────────────────────── */ .sec{padding-top:22px;margin-top:22px;border-top:1px solid rgba(0,125,255,.09)} .sec:first-of-type{padding-top:0;margin-top:0;border-top:none} .sec-label{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.075em; color:var(--ca-muted);display:flex;align-items:center;gap:10px;margin-bottom:16px; } .sec-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--ca-line),transparent)} .sec-note{font-size:12px;color:var(--ca-muted);line-height:1.6;margin-top:10px} /* ── Fields ──────────────────────────────────────────────────────────────── */ .field{margin-bottom:18px} .field:last-child{margin-bottom:0} .field-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px} .field-label{font-size:12px;font-weight:600;color:var(--ca-text-strong)} .req{color:var(--ca-danger);margin-left:2px} .char-count{font-size:11px;color:var(--ca-muted);font-variant-numeric:tabular-nums} .char-count.warn{color:var(--ca-warn)} .field-input,.fi{ width:100%;padding:11px 13px; background:var(--ca-surface-2);border:1.5px solid rgba(255,255,255,.12); border-radius:var(--ca-r-sm);color:var(--ca-text-strong); font-family:inherit;font-size:14.5px;line-height:1.45;outline:none; transition:border-color .18s,box-shadow .18s,background .18s; -webkit-appearance:none;appearance:none; } .field-input::placeholder,.fi::placeholder{color:#7b8990} .field-input:hover,.fi:hover{border-color:rgba(255,255,255,.2)} .field-input:focus,.fi:focus{ border-color:var(--ca-blue);background:rgba(0,125,255,.05); box-shadow:0 0 0 3px rgba(0,125,255,.16); } .field-input.err,.fi.err{border-color:var(--ca-danger);box-shadow:0 0 0 3px rgba(255,82,82,.15)} .field-textarea,.fi-ta{resize:vertical;min-height:92px;line-height:1.6} select.field-input,select.fi{cursor:pointer} select.field-input option,select.fi option{background:#0b1b21;color:var(--ca-text-strong)} .field-err{display:none;font-size:12px;color:var(--ca-danger);margin-top:6px;line-height:1.45} .field-err.show{display:block} .field-hint{font-size:12px;color:var(--ca-muted);margin-top:6px;line-height:1.55} /* Currency + amount read as one control. */ .price-input-wrap{display:flex;gap:9px} .price-input-wrap .price-currency{flex:0 0 116px;width:auto} .price-input-wrap .price-amount{flex:1;min-width:0} /* Icon-prefixed input (the external link field, the searches). */ .input-icon-wrap{position:relative} .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#7b8990;pointer-events:none} .field-input.has-icon,.fi.has-icon{padding-left:37px} /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 20px;border-radius:var(--ca-r-sm);border:1.5px solid transparent; font-family:inherit;font-size:14px;font-weight:600; cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .1s,opacity .18s; } .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.42;cursor:not-allowed;transform:none} .btn-primary{background:var(--ca-blue);color:var(--ca-ink)} .btn-primary:hover:not(:disabled){background:var(--ca-blue-hover)} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.18);color:var(--ca-text)} .btn-ghost:hover:not(:disabled){border-color:rgba(255,255,255,.34);background:var(--ca-surface-2)} .btn-quiet{background:transparent;border:none;color:var(--ca-muted);font-size:13px;padding:10px 6px;text-decoration:underline;text-underline-offset:3px} .btn-quiet:hover{color:var(--ca-text)} .btn-danger{background:transparent;border-color:rgba(255,82,82,.4);color:#ff8a8a} .btn-danger:hover:not(:disabled){background:rgba(255,82,82,.1);border-color:rgba(255,82,82,.6)} .btn-block{width:100%} .btn-lg{padding:14px 22px;font-size:15px} .pane-actions{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(0,125,255,.09)} .pane-actions .spacer{flex:1} /* ── Banners ─────────────────────────────────────────────────────────────── */ .banner{display:none;border-radius:var(--ca-r);padding:13px 16px;gap:11px;align-items:flex-start} .banner.show{display:flex} .banner-error{background:rgba(255,82,82,.09);border:1.5px solid rgba(255,82,82,.28)} .banner-success{background:rgba(0,125,255,.07);border:1.5px solid var(--ca-line-strong)} .banner-icon{font-size:17px;flex-shrink:0;line-height:1.35} .banner-body{flex:1;min-width:0} .banner-body strong{font-size:13px;font-weight:700;display:block;margin-bottom:2px} .banner-body p{font-size:12.5px;color:var(--ca-muted);line-height:1.55} .banner-error .banner-body strong{color:#ff8a8a} .banner-success .banner-body strong{color:#7fc4ff} .wiz-card > .banner.show{margin:18px 28px 0} /* ══ STEP 1 — category ═══════════════════════════════════════════════════ */ .cat-group{margin-bottom:22px} .cat-group:last-of-type{margin-bottom:0} .cat-group-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.075em;color:var(--ca-muted);margin-bottom:12px} .cat-group-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .cat-group-dot.free{background:var(--ca-ok)} .cat-group-dot.paid{background:var(--ca-blue)} .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px} .cat-card{ position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px; padding:14px 14px 13px;border-radius:var(--ca-r); background:var(--ca-surface-2);border:1.5px solid rgba(255,255,255,.08); cursor:pointer;transition:border-color .18s,background .18s; text-align:left;font-family:inherit;color:inherit; } .cat-card:hover{border-color:var(--ca-line-strong);background:rgba(0,125,255,.05)} .cat-card:focus-visible{outline:2px solid var(--ca-blue);outline-offset:2px} .cat-card.selected{border-color:var(--ca-blue);background:var(--ca-blue-soft)} .cat-card.hidden-cat{display:none} .cat-card-icon{font-size:22px;line-height:1} .cat-card-name{font-size:13px;font-weight:600;color:var(--ca-text-strong);line-height:1.35} .cat-card-price{font-size:12px;font-weight:700;color:var(--ca-blue);font-variant-numeric:tabular-nums} .cat-card-price.free-price{color:var(--ca-ok)} .cat-card-check{ position:absolute;top:10px;right:10px;width:19px;height:19px;border-radius:50%; background:var(--ca-blue);color:var(--ca-ink);display:none;place-items:center; } .cat-card-check svg{width:11px;height:11px} .cat-card.selected .cat-card-check{display:grid} /* A published ad's category cannot change, so the other cards stop behaving like choices — visibly inert rather than clickable-but-refused. */ .cat-card.is-locked{opacity:.32;cursor:not-allowed;pointer-events:none} .cat-card.is-locked:hover{border-color:rgba(255,255,255,.08);background:var(--ca-surface-2)} .cat-no-results{display:none;font-size:13px;color:var(--ca-muted);padding:14px 2px} .cat-no-results.show{display:block} /* ══ STEP 2 — destination choice ═════════════════════════════════════════ */ .dest-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .dest-opt{ position:relative;display:flex;flex-direction:column;gap:5px; padding:15px 15px 14px;border-radius:var(--ca-r); background:var(--ca-surface-2);border:1.5px solid rgba(255,255,255,.08); cursor:pointer;transition:border-color .18s,background .18s; } .dest-opt:hover{border-color:var(--ca-line-strong)} .dest-opt:focus-within{box-shadow:0 0 0 3px rgba(0,125,255,.16)} .dest-opt input{position:absolute;opacity:0;width:0;height:0} .dest-opt.selected{border-color:var(--ca-blue);background:var(--ca-blue-soft)} .dest-opt-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ca-text-strong)} .dest-opt-title .dot{ width:15px;height:15px;border-radius:50%;flex-shrink:0; border:1.5px solid rgba(255,255,255,.3);transition:border-color .18s,border-width .18s; } .dest-opt.selected .dot{border-color:var(--ca-blue);border-width:4.5px} .dest-opt-desc{font-size:12px;color:var(--ca-muted);line-height:1.5;padding-left:23px} .dest-panel[hidden]{display:none} /* ── Photo slots ─────────────────────────────────────────────────────────── */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .pslot{ position:relative;border-radius:var(--ca-r);overflow:hidden; background:var(--ca-surface-2);border:1.5px dashed rgba(0,125,255,.26); transition:border-color .18s,background .18s; } .pslot:hover{border-color:var(--ca-line-strong)} .pslot.filled{border-style:solid;border-color:var(--ca-line-strong);background:#000} .pslot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:18px 12px;min-height:128px} .pslot-icon{font-size:26px;line-height:1;opacity:.6} .pslot-label{font-size:12px;font-weight:600;color:var(--ca-muted)} .pslot-btns{display:flex;gap:7px;width:100%;justify-content:center;flex-wrap:wrap} .btn-cam,.btn-gal{ flex:1 1 auto;min-width:0;padding:7px 10px;border-radius:7px; font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer; border:1.5px solid transparent;transition:background .18s,border-color .18s; white-space:nowrap; } .btn-cam{background:var(--ca-blue);color:var(--ca-ink)} .btn-cam:hover{background:var(--ca-blue-hover)} .btn-gal{background:transparent;border-color:rgba(255,255,255,.2);color:var(--ca-text)} .btn-gal:hover{border-color:rgba(255,255,255,.36);background:var(--ca-surface-2)} .pslot input[type=file]{display:none} .pslot-preview{display:none;width:100%;aspect-ratio:4/3;background:#000} .pslot-preview img{display:block;width:100%;height:100%;object-fit:cover} .pslot.filled .pslot-empty{display:none} .pslot.filled .pslot-preview{display:block} .pslot-del{ position:absolute;top:8px;right:8px;width:27px;height:27px;border-radius:50%; background:rgba(10,16,20,.82);color:#fff;border:1.5px solid rgba(255,255,255,.5); font-size:13px;font-weight:700;cursor:pointer;display:none;align-items:center;justify-content:center; line-height:1;z-index:10;transition:background .15s,transform .12s; } .pslot.filled .pslot-del{display:flex} .pslot-del:hover{background:#e53935;transform:scale(1.08)} .pslot-num{ position:absolute;top:8px;left:8px;background:rgba(10,16,20,.72);color:#fff; font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 8px;display:none;pointer-events:none; } .pslot.filled .pslot-num{display:block} /* ── Contact toggles ─────────────────────────────────────────────────────── */ .contact-group{display:flex;flex-direction:column;gap:9px} .contact-item{background:var(--ca-surface-2);border:1.5px solid rgba(255,255,255,.08);border-radius:var(--ca-r);padding:13px 15px;transition:border-color .18s,background .18s} .contact-item.on{border-color:var(--ca-line-strong);background:rgba(0,125,255,.055)} .contact-row{display:flex;align-items:center;justify-content:space-between;gap:14px} .contact-left{display:flex;flex-direction:column;gap:2px;min-width:0} .contact-label{font-size:13.5px;font-weight:600;color:var(--ca-text-strong)} .contact-desc{font-size:11.5px;color:var(--ca-muted)} .rec{font-size:10px;font-weight:700;background:var(--ca-blue-soft);color:var(--ca-blue);border:1px solid var(--ca-line-strong);border-radius:20px;padding:2px 7px;margin-left:6px;text-transform:uppercase;letter-spacing:.05em} .contact-val{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .3s,opacity .3s,margin-top .3s;display:flex;align-items:center;gap:9px} .contact-val.show{max-height:60px;opacity:1;margin-top:10px} .val-icon{font-size:14px;flex-shrink:0} .val-text{font-size:12.5px;font-weight:600;color:var(--ca-text-strong);background:rgba(0,125,255,.08);border:1px solid var(--ca-line);border-radius:7px;padding:5px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .val-text.empty{color:var(--ca-warn);font-style:italic;font-weight:500} .tog{position:relative;width:44px;height:25px;flex-shrink:0} .tog input{opacity:0;width:0;height:0;position:absolute} .tog-sl{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:25px;cursor:pointer;transition:background .25s} .tog-sl::before{content:"";position:absolute;height:19px;width:19px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .25s} .tog input:checked+.tog-sl{background:var(--ca-blue)} .tog input:checked+.tog-sl::before{transform:translateX(19px)} .tog input:focus-visible+.tog-sl{box-shadow:0 0 0 3px rgba(0,125,255,.3)} /* ── In-page video block ─────────────────────────────────────────────────── */ .vid-block{ border-radius:var(--ca-r);border:1.5px solid rgba(255,255,255,.08); background:var(--ca-surface-2);overflow:hidden; } .vid-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 18px} .vid-empty[hidden]{display:none} .vid-empty p{font-size:12.5px;color:var(--ca-muted);text-align:center;line-height:1.55;max-width:380px} .vid-modes{display:flex;flex-direction:column;gap:9px;width:min(340px,100%)} .modeBtn{ display:flex;align-items:center;gap:13px;width:100%;padding:13px 16px; border-radius:var(--ca-r);border:1.5px solid transparent;cursor:pointer; font-family:inherit;text-align:left;transition:background .18s,border-color .18s,transform .1s; } .modeBtn:active{transform:translateY(1px)} .modeBtn .btn-icon{font-size:22px;flex-shrink:0;line-height:1} .modeBtn .btn-text{display:flex;flex-direction:column;gap:2px;min-width:0} .modeBtn .btn-text strong{font-size:14px;font-weight:600} .modeBtn .btn-text small{font-size:11.5px;font-weight:400;opacity:.8} .modeBtn.quick{background:var(--ca-blue);color:var(--ca-ink)} .modeBtn.quick:hover{background:var(--ca-blue-hover)} .modeBtn.pro{background:transparent;border-color:rgba(255,255,255,.2);color:var(--ca-text)} .modeBtn.pro:hover{border-color:rgba(255,255,255,.36);background:var(--ca-surface-2)} .vid-done{display:flex;flex-direction:column;gap:12px;padding:16px} .vid-done[hidden]{display:none} .vid-done video{width:100%;max-height:320px;border-radius:var(--ca-r-sm);background:#000;display:block} .vid-done-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .vid-done-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ca-ok)} .vid-done-row .spacer{flex:1} /* ══ STEP 3 — publish & pay ══════════════════════════════════════════════ */ .summary{border-radius:var(--ca-r);border:1.5px solid rgba(255,255,255,.08);background:var(--ca-surface-2);padding:4px 16px;margin-bottom:20px} .sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0} .sum-row+.sum-row{border-top:1px solid rgba(0,125,255,.07)} .sum-label{font-size:12.5px;color:var(--ca-muted);flex-shrink:0} .sum-val{font-size:13px;font-weight:600;color:var(--ca-text-strong);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sum-row.total{border-top:1.5px solid var(--ca-line-strong)} .sum-row.total .sum-label{font-size:13px;font-weight:600;color:var(--ca-text)} .sum-row.total .sum-val{font-size:18px;font-weight:700;color:var(--ca-blue);font-variant-numeric:tabular-nums} .sum-row.total .sum-val.is-free{color:var(--ca-ok)} .ad-preview{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--ca-r);border:1.5px solid rgba(255,255,255,.08);background:var(--ca-surface-2);margin-bottom:20px} .ad-preview-media{width:112px;flex-shrink:0;border-radius:var(--ca-r-sm);overflow:hidden;background:#000;aspect-ratio:3/4} .ad-preview-media video,.ad-preview-media img{width:100%;height:100%;object-fit:cover;display:block} .ad-preview-media.empty{display:grid;place-items:center;background:var(--ca-surface-3);color:var(--ca-muted);font-size:24px} .ad-preview-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .ad-preview-title{font-size:15px;font-weight:700;color:var(--ca-text-strong);line-height:1.3} .ad-preview-abstract{font-size:12.5px;color:var(--ca-muted);line-height:1.55} .ad-preview-meta{font-size:12px;color:var(--ca-muted);display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px} .ad-preview-price{font-size:14px;font-weight:700;color:var(--ca-blue);font-variant-numeric:tabular-nums} .notice{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:var(--ca-r);font-size:12.5px;line-height:1.55;margin-bottom:18px} .notice[hidden]{display:none} .notice-info{background:rgba(0,125,255,.07);border:1.5px solid var(--ca-line);color:var(--ca-text)} .notice-warn{background:rgba(255,167,38,.08);border:1.5px solid rgba(255,167,38,.28);color:#ffd39b} .notice strong{font-weight:700;color:var(--ca-text-strong)} .notice-icon{flex-shrink:0;font-size:15px;line-height:1.3} /* Payment */ .pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px} .pay-method-btn{ display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px; border-radius:var(--ca-r-sm);border:1.5px solid rgba(255,255,255,.1); background:var(--ca-surface-2);color:var(--ca-text); font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer; transition:border-color .18s,background .18s; } .pay-method-btn:hover{border-color:var(--ca-line-strong)} .pay-method-btn.active{border-color:var(--ca-blue);background:var(--ca-blue-soft);color:var(--ca-text-strong)} .pay-method-btn svg{width:20px;height:20px} .pay-form[hidden]{display:none} .pay-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .card-brand{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:var(--ca-muted);pointer-events:none} .sec-badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px} .sec-badge{font-size:11px;font-weight:600;color:var(--ca-muted);background:var(--ca-surface-2);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:5px 11px} .pay-note{text-align:center;font-size:11.5px;color:var(--ca-muted);margin-top:12px;line-height:1.5} /* Done */ .done-icon{width:62px;height:62px;border-radius:50%;background:var(--ca-blue-soft);border:1.5px solid var(--ca-blue);display:grid;place-items:center;margin:0 auto 18px;font-size:28px} .done-head{text-align:center;margin-bottom:22px} .done-head h2{font-size:21px;font-weight:700;color:var(--ca-text-strong);margin-bottom:7px} .done-head p{font-size:13.5px;color:var(--ca-muted);line-height:1.6} .done-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px} /* ── Full-screen processing overlay ──────────────────────────────────────── */ .overlay{position:fixed;inset:0;background:rgba(4,10,13,.76);backdrop-filter:blur(8px);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px} .overlay.show{display:flex} .overlay-card{background:var(--ca-surface);border:1px solid var(--ca-line-strong);border-radius:var(--ca-r-lg);padding:26px 30px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;min-width:220px;max-width:340px} .overlay-spinner{width:40px;height:40px;border:3px solid rgba(0,125,255,.2);border-top-color:var(--ca-blue);border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .overlay-text{font-size:15px;font-weight:700;color:var(--ca-text-strong)} .overlay-sub{font-size:12.5px;color:var(--ca-muted);line-height:1.5} /* ── Toast ───────────────────────────────────────────────────────────────── */ .toast{ position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px); z-index:9500;max-width:min(440px,calc(100vw - 32px)); padding:12px 18px;border-radius:var(--ca-r); background:#0d2029;border:1.5px solid var(--ca-line-strong);color:var(--ca-text-strong); font-size:13px;line-height:1.5;box-shadow:0 14px 40px rgba(0,0,0,.5); opacity:0;pointer-events:none;transition:opacity .22s,transform .22s; } .toast.show{opacity:1;transform:translate(-50%,0)} .toast.error{border-color:rgba(255,82,82,.45);background:#2a1113} /* ── Responsive ──────────────────────────────────────────────────────────── */ @media(max-width:600px){ #createAdPage{padding-left:0;padding-right:0} .wiz-hero,.wiz-steps{padding-left:16px;padding-right:16px} .wiz-card{border-radius:0;border-left:none;border-right:none} .wiz-pane{padding:22px 16px 24px} .wiz-card > .banner.show{margin:16px 16px 0} .dest-choice{grid-template-columns:1fr} .pay-row{grid-template-columns:1fr} .cat-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} .pane-actions{flex-wrap:wrap} .pane-actions .btn{flex:1 1 auto} .wiz-step-label{font-size:10.5px} .ad-preview{flex-direction:column} .ad-preview-media{width:100%;aspect-ratio:16/9} } /* ══════════════════════════════════════════════════════════════════════════ BELOW THIS LINE: lifted verbatim from the pre-rework public/html/create_ad.html (lines 111–130, 168–253 and 288–302 of its