:root {
  --navy: #12223f;
  --navy-2: #1b3157;
  --orange: #ff7a22;
  --orange-soft: #fff0e5;
  --blue-soft: #eaf1ff;
  --text: #14213a;
  --muted: #778298;
  --line: #e6e9ef;
  --surface: #fff;
  --bg: #f7f8fb;
  --shadow: 0 12px 35px rgba(18, 34, 63, .10);
}
.chat-sheet{width:min(980px,100%);height:min(760px,90vh);background:#fff;border-radius:24px;position:relative;z-index:1;padding:24px;overflow:hidden}.chat-layout{display:grid;grid-template-columns:300px 1fr;height:calc(100% - 65px);gap:16px}.chat-layout aside{border-left:1px solid var(--line);overflow:auto}.conversation-item{display:block;width:100%;text-align:right;border:0;border-bottom:1px solid var(--line);background:#fff;padding:14px}.conversation-item.active{background:#fff3ea}.conversation-item small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item i{background:var(--orange);color:#fff;border-radius:10px;padding:2px 7px;font-style:normal}.chat-thread{display:flex;flex-direction:column;min-width:0}.chat-thread h3{margin:0 0 12px}.chat-thread #messageList{flex:1;overflow:auto;background:#f7f8fb;border-radius:15px;padding:15px}.message{max-width:75%;padding:10px 13px;border-radius:14px;margin:7px 0;background:#fff}.message.mine{margin-right:auto;background:#ffe3d2}.message small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.chat-thread form{display:flex;gap:8px;margin-top:10px}.chat-thread form input{flex:1;padding:13px;border:1px solid var(--line);border-radius:12px}.chat-thread form button{background:var(--orange);color:#fff;border:0;border-radius:12px;padding:0 20px}@media(max-width:700px){.chat-layout{grid-template-columns:1fr}.chat-layout aside{max-height:150px;border-left:0;border-bottom:1px solid var(--line)}.chat-sheet{padding:16px}.message{max-width:88%}}
.message video{width:min(360px,100%);max-height:280px;border-radius:10px;background:#000}.video-controls{display:flex;gap:8px;margin-top:8px}.video-controls button,.video-controls label{border:1px solid #ff7928;color:#c85410;background:#fff5ee;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}
.chat-photo{display:block;width:min(360px,100%);max-height:320px;object-fit:contain;border-radius:10px}.save-attachment{display:block;margin-top:6px;border:0;background:transparent;color:#c85410;font-weight:800;cursor:pointer}
.nearby-tools{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px}.nearby-tools button,.nearby-tools select,.location-capture,.map-button{border:1px solid #ff7928;background:#fff7f1;color:#c85410;border-radius:10px;padding:9px 12px;font-weight:800}.nearby-tools span{color:var(--muted);font-size:12px}.map-button{width:100%;margin-top:12px}.location-capture{align-self:end;height:43px}
.category-fields{border:1px solid var(--line);background:#f8fafc;border-radius:16px;padding:15px}.category-fields h3{margin:0 0 12px}.dynamic-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.optional-fields{margin:0;color:var(--muted);font-size:13px}.detail-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.detail-specs div{background:#f7f8fb;border-radius:10px;padding:9px}.detail-specs dt{color:var(--muted);font-size:11px}.detail-specs dd{margin:3px 0 0;font-weight:800}.contact-card{display:grid;gap:5px;border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0}.contact-card a{color:#d85f16;font-weight:900;text-decoration:none}.contact-card span{color:#5d687b}.fraud-warning{display:grid;gap:5px;background:#fff5e8;border:1px solid #f3b76c;color:#7a4306;border-radius:13px;padding:12px;font-size:12px;line-height:1.6}.fraud-warning b{font-size:13px}.chat-safety{background:#fff5e8;border:1px solid #f3b76c;color:#7a4306;border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:11px;font-weight:700}
.advanced-search{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:20px}.advanced-search-head,.saved-search-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.advanced-search-head small{display:block;color:var(--muted);margin-top:3px}.advanced-search button{border:1px solid #ff7928;background:#fff7f1;color:#c85410;border-radius:10px;padding:9px 12px;font-weight:800}.advanced-base,.category-search-fields{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;margin-top:14px}.advanced-search label{display:grid;gap:5px;color:#4c586d;font-size:12px;font-weight:700}.advanced-search input,.advanced-search select{width:100%;border:1px solid var(--line);border-radius:10px;background:#fafbfc;padding:10px;min-width:0}.advanced-search .check-filter{display:flex;flex-direction:row;align-items:center;gap:7px;padding-top:22px}.check-filter input{width:auto}.saved-search-row{justify-content:flex-start;border-top:1px solid var(--line);padding-top:13px;margin-top:14px}.saved-search-row select{width:auto;min-width:210px}.saved-search-row span{background:#eaf8f1;color:#08784a;border-radius:10px;padding:8px 11px;font-weight:800;font-size:12px}
.report-button{width:100%;margin-top:9px;border:1px solid #d83d3d;background:#fff5f5;color:#b42323;border-radius:10px;padding:10px;font-weight:800}.liability-policy{margin-top:18px;border:1px solid #f0c37d;background:#fffaf2;border-radius:18px;padding:18px}.liability-policy h3{margin:5px 0 12px}.liability-grid{display:grid;gap:8px}.liability-grid p{margin:0;background:#fff;border-right:4px solid #ff7928;border-radius:10px;padding:11px;line-height:1.7;font-size:13px}.report-sheet{width:min(560px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;position:relative;z-index:1;padding:30px}.report-sheet>p{color:var(--muted);line-height:1.7}.report-sheet form,.report-sheet label{display:grid;gap:10px}.report-sheet form{gap:15px}.report-sheet select,.report-sheet textarea{border:1px solid var(--line);background:#fafbfc;border-radius:12px;padding:12px}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Tajawal", system-ui, sans-serif; padding-bottom: 92px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(5vw, 24px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(15px); }
.brand { text-decoration: none; color: var(--navy); display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 46px; height: 46px; border-radius: 15px 15px 15px 5px; display: grid; place-items: center; background: linear-gradient(145deg,#10203c,#244b80); position: relative; box-shadow:0 8px 20px rgba(18,34,63,.22) }
.brand-mark svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}.brand-mark svg circle{fill:var(--orange);stroke:var(--orange)}
.brand b { font-size: 21px; display: block; line-height: 1; }
.brand small { font-size: 9px; letter-spacing: 2px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.location-button, .icon-button, .avatar { border: 0; background: transparent; color: var(--navy); }
.location-button { font-weight: 700; padding: 10px 12px; border-radius: 12px; }
.location-button:hover { background: var(--bg); }
.chevron { color: var(--muted); margin-right: 5px; }
.icon-button { font-size: 25px; position: relative; }
.icon-button i { position: absolute; width: 7px; height: 7px; background: var(--orange); border-radius: 50%; top: 4px; right: 3px; border: 1px solid white; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font-weight: 800; }
.account-chip{border:1px solid var(--line);background:#fff;border-radius:14px;padding:5px 9px;display:flex;align-items:center;gap:7px;color:var(--navy)}.account-person,.profile-person{display:grid;place-items:center;border-radius:50%;background:var(--orange-soft);color:var(--orange);font-size:23px;width:34px;height:34px}.account-chip b,.account-chip small{display:block;text-align:right;line-height:1.15}.account-chip b{font-size:12px}.account-chip small{font-size:10px;color:var(--muted);max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hero { min-height: 460px; background: linear-gradient(125deg, #12223f 0%, #1c3763 58%, #234a7c 100%); display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; color: white; padding-inline-start: max(7vw, 32px); position: relative; }
.hero-content { z-index: 2; max-width: 720px; padding: 65px 0; }
.eyebrow, .kicker { color: var(--orange); font-size: 13px; font-weight: 800; letter-spacing: .2px; }
.hero h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.04; margin: 12px 0 17px; letter-spacing: -2px; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero p { color: #cbd5e7; font-size: 18px; max-width: 560px; line-height: 1.8; margin-bottom: 25px; }
.search-box { display: flex; background: white; padding: 7px; border-radius: 17px; box-shadow: 0 15px 35px rgba(0,0,0,.2); max-width: 650px; }
.search-icon { color: var(--muted); width: 45px; display: grid; place-items: center; font-size: 25px; }
.search-box input { border: 0; outline: 0; flex: 1; min-width: 80px; color: var(--text); font-size: 16px; }
.search-box button, .promo-strip button, .submit-listing { border: 0; background: var(--orange); color: white; font-weight: 800; border-radius: 12px; padding: 13px 25px; }
.quick-searches { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: #cbd5e7; font-size: 13px; flex-wrap: wrap; }
.quick-searches button { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); color: white; border-radius: 20px; padding: 5px 11px; }
.hero-art { position: relative; min-height: 420px; direction: ltr; }
.sun { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,34,.45), transparent 68%); top: 30px; right: 10%; }
.tower { position: absolute; bottom: 80px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 0 0 12px rgba(18,34,63,.15); }
.tower::after { content: ""; position: absolute; inset: 22px 18px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.15) 0 3px, transparent 3px 24px); }
.tower-one { width: 90px; height: 265px; left: 24%; clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); }
.tower-two { width: 125px; height: 340px; left: 50%; clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%); }
.road { position: absolute; height: 85px; width: 150%; background: #0b172c; left: -25%; bottom: 0; transform: skewX(-22deg); }
.car-shape { position: absolute; bottom: 58px; left: 8%; width: 260px; height: 70px; border-radius: 70px 80px 18px 18px; background: linear-gradient(160deg, #ff9c58, var(--orange)); box-shadow: 0 15px 30px rgba(0,0,0,.4); }
.car-shape::before { content: ""; position: absolute; width: 130px; height: 58px; border-radius: 80px 80px 5px 5px; background: #f48840; top: -32px; left: 70px; clip-path: polygon(20% 0, 78% 0, 100% 100%, 0 100%); }
.car-shape::after, .car-shape span::after { content: ""; position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #111827; border: 9px solid #d9e1ee; bottom: -18px; }
.car-shape::after { left: 35px; } .car-shape span::after { right: 30px; }
.pin { position: absolute; top: 90px; left: 16%; background: var(--orange); width: 48px; height: 48px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 20px rgba(255,122,34,.35); }
.pin::first-letter { transform: rotate(45deg); }

.section { padding: 55px max(5vw, 24px); max-width: 1500px; margin: auto; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 25px; }
.section-heading h2 { margin: 4px 0 0; font-size: 30px; }
.text-button { border: 0; background: transparent; color: var(--orange); font-weight: 800; }
.categories { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.category-card { border: 1px solid var(--line); background: white; border-radius: 20px; padding: 21px 12px; text-align: center; transition: .2s; color: var(--text); }
.category-card:hover, .category-card.active { transform: translateY(-4px); border-color: rgba(255,122,34,.45); box-shadow: var(--shadow); }
.category-icon { width: 58px; height: 58px; border-radius: 18px; background: var(--icon-bg); display: grid; place-items: center; margin: 0 auto 12px; font-size: 28px; }
.category-card b { display: block; font-size: 15px; }.category-card small { color: var(--muted); }
.employment-heading{grid-column:1/-1;padding:14px 16px;border:1px solid #ffd2b5;background:#fff7f1;border-radius:14px}.employment-heading b,.employment-heading small{display:block}.employment-heading b{color:var(--orange);font-size:17px}.employment-heading small{margin-top:4px;color:var(--muted)}.resume-upload{grid-column:1/-1;border:2px dashed #ffb583!important;background:#fffaf6!important}

.promo-strip { max-width: calc(1500px - 10vw); margin: 0 auto; background: linear-gradient(100deg, var(--orange-soft), #fff8f1); border: 1px solid #ffd8bc; border-radius: 22px; padding: 22px 28px; display: flex; align-items: center; gap: 18px; }
.promo-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--orange); color: white; font-size: 24px; }
.promo-strip div:nth-child(2) { flex: 1; }.promo-strip b, .promo-strip span { display: block; }.promo-strip b { font-size: 20px; }.promo-strip span { color: var(--muted); margin-top: 3px; }

.filters { display: flex; gap: 7px; background: #edf0f5; padding: 4px; border-radius: 12px; }
.filter { border: 0; color: var(--muted); background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 700; }
.filter.active { background: white; color: var(--navy); box-shadow: 0 3px 10px rgba(18,34,63,.08); }
.advanced-toggle{width:100%;margin:14px 0 9px;border:1px solid #d7dce5;background:#fff;color:var(--navy);border-radius:13px;padding:12px;font-weight:800}.advanced-toggle.active{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.listing-card { border-radius: 20px; background: white; border: 1px solid var(--line); overflow: hidden; transition: .2s; position: relative; }
.listing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.listing-image { height: 190px; display: grid; place-items: center; font-size: 72px; background: linear-gradient(145deg, var(--image-a), var(--image-b)); position: relative; overflow: hidden; }
.listing-image::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.25); top: -90px; left: -45px; }
.listing-badge { position: absolute; top: 13px; right: 13px; background: white; color: var(--navy); border-radius: 9px; padding: 5px 9px; font-size: 11px; font-weight: 800; z-index: 1; }
.favorite-button { position: absolute; left: 13px; top: 13px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.93); color: var(--navy); font-size: 20px; z-index: 2; }
.favorite-button.saved { color: var(--orange); background: white; }
.listing-body { padding: 17px; }
.listing-category { color: var(--muted); font-size: 12px; }.listing-body h3 { margin: 7px 0 9px; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.listing-price { color: var(--orange); font-size: 21px; font-weight: 800; }.listing-footer { display: flex; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); margin-top: 13px; padding-top: 11px; font-size: 12px; }
.empty-state { text-align: center; padding: 60px; }.empty-state span { font-size: 45px; }.empty-state h3 { font-size: 23px; margin-bottom: 5px; }.empty-state p { color: var(--muted); }.empty-state button { border: 0; border-radius: 12px; padding: 11px 18px; background: var(--navy); color: white; }

.bottom-nav { position: fixed; bottom: 0; right: 50%; transform: translateX(50%); width: min(640px, 100%); min-height: 74px; z-index: 40; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 6px 10px env(safe-area-inset-bottom); box-shadow: 0 -8px 30px rgba(18,34,63,.1); backdrop-filter: blur(15px); }
.nav-item, .add-nav { border: 0; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; }
.nav-item span { font-size: 25px; line-height: 1; }.nav-item b, .add-nav b { font-size: 11px; }.nav-item.active { color: var(--orange); }.nav-item i { display: none; position: absolute; top: -3px; right: 22%; font-style: normal; background: var(--orange); color: white; border-radius: 9px; min-width: 16px; height: 16px; font-size: 10px; place-items: center; }
.add-nav { color: var(--navy); margin-top: -28px; }.add-nav span { width: 52px; height: 52px; background: var(--orange); color: white; border-radius: 18px; display: grid; place-items: center; font-size: 34px; box-shadow: 0 8px 20px rgba(255,122,34,.35); margin-bottom: 4px; }

.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; }.modal.open { display: flex; }.modal-backdrop { position: absolute; inset: 0; background: rgba(8,16,31,.7); backdrop-filter: blur(5px); }.detail-sheet, .add-sheet { width: min(920px, 100%); max-height: 90vh; overflow: auto; background: white; border-radius: 25px; position: relative; z-index: 1; box-shadow: 0 25px 80px rgba(0,0,0,.3); }.detail-sheet { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }.close-button { border: 0; background: white; width: 38px; height: 38px; border-radius: 50%; font-size: 26px; color: var(--navy); position: absolute; top: 15px; left: 15px; z-index: 3; box-shadow: 0 4px 15px rgba(0,0,0,.12); }.detail-image { min-height: 550px; display: grid; place-items: center; font-size: 130px; background: linear-gradient(145deg, var(--image-a), var(--image-b)); }.detail-content { padding: 42px 34px 28px; }.detail-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }.detail-content h2 { font-size: 29px; margin: 16px 0 8px; }.detail-content > strong { color: var(--orange); font-size: 30px; }.detail-content > p { color: #5d687b; line-height: 1.9; margin: 20px 0; }.seller-card { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 15px; padding: 13px; }.seller-avatar { width: 45px; height: 45px; display: grid; place-items: center; background: var(--blue-soft); color: var(--navy); border-radius: 50%; font-weight: 800; }.seller-card span { display: block; color: #19a36b; font-size: 12px; }.seller-card small { margin-right: auto; color: var(--muted); }.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }.detail-actions button { border-radius: 12px; padding: 13px; font-weight: 800; }.call-button { background: white; border: 1px solid var(--navy); color: var(--navy); }.chat-button { background: var(--orange); border: 1px solid var(--orange); color: white; }
.detail-image{position:relative}.detail-gallery{position:absolute;inset:0;pointer-events:none}.gallery-arrow{pointer-events:auto;position:absolute;top:45%;transform:translateY(-50%);z-index:2;width:44px;height:52px;border:0;border-radius:12px;background:rgba(8,24,49,.78);color:#fff;font-size:36px;line-height:1}.gallery-prev{left:12px}.gallery-next{right:12px}.gallery-count{position:absolute;top:15px;right:15px;background:rgba(8,24,49,.78);color:#fff;border-radius:20px;padding:6px 12px;font-size:13px;font-weight:800}.gallery-thumbs{pointer-events:auto;position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:7px;overflow-x:auto;padding:7px;background:rgba(8,24,49,.7);border-radius:12px}.gallery-thumb{flex:0 0 58px;width:58px;height:50px;border:2px solid transparent;border-radius:8px;padding:0;overflow:hidden;background:#fff;opacity:.72}.gallery-thumb.active{border-color:var(--orange);opacity:1}.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.add-sheet { width: min(680px, 100%); padding: 32px; }.sheet-header { display: flex; justify-content: space-between; }.sheet-header h2 { margin: 4px 0 22px; }.sheet-header .close-button { position: static; background: var(--bg); box-shadow: none; }.add-sheet form { display: grid; gap: 16px; }.add-sheet label { display: grid; gap: 7px; font-weight: 700; }.add-sheet input, .add-sheet select, .add-sheet textarea { border: 1px solid var(--line); background: #fafbfc; border-radius: 12px; padding: 12px 13px; outline: none; }.add-sheet input:focus, .add-sheet select:focus, .add-sheet textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.upload-zone { border: 1px dashed #b8c0ce; border-radius: 14px; padding: 20px; text-align: center; color: var(--muted); }.upload-zone span, .upload-zone b, .upload-zone small { display: block; }.upload-zone span { font-size: 27px; }.upload-zone b { color: var(--navy); }.submit-listing { padding: 14px; font-size: 16px; }
.listing-map-picker{border:1px solid var(--line);border-radius:16px;padding:10px;background:#f7f9fc}.map-help{display:grid;gap:3px;padding:3px 3px 10px}.map-help span{color:var(--muted);font-size:12px}.listing-map-picker #listingMap{height:330px;border-radius:12px;overflow:hidden;direction:ltr;z-index:1}.map-picker-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.map-picker-actions button{border:1px solid var(--orange);border-radius:11px;padding:11px;font-weight:800;background:#fff;color:var(--orange)}.map-picker-actions #confirmMapLocation{background:var(--orange);color:#fff}.leaflet-container{font-family:Tajawal,sans-serif}
.my-ad-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.delete-own-ad,.feature-own-ad{background:#fff;border-radius:9px;padding:7px 10px;font-weight:800;cursor:pointer}.delete-own-ad{border:1px solid #dc3545;color:#c82333}.delete-own-ad:hover{background:#fff1f2}.feature-own-ad{border:1px solid #c59418;color:#8a6300;background:#fff9df}
.toast { position: fixed; bottom: 95px; left: 50%; transform: translate(-50%, 20px); background: var(--navy); color: white; padding: 11px 18px; border-radius: 12px; z-index: 90; opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--shadow); }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.support-fab{position:fixed;left:20px;bottom:98px;z-index:45;border:0;border-radius:999px;background:var(--navy);color:#fff;padding:12px 16px;display:flex;gap:8px;align-items:center;font-weight:800;box-shadow:0 10px 30px rgba(8,24,49,.28)}.support-sheet{width:min(620px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:24px;padding:28px;position:relative;z-index:1}.support-sheet .sheet-header small{color:var(--muted)}.support-safety{background:#fff5e9;border:1px solid #ffd3ad;color:#8b4a13;border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:12px}.support-messages{height:min(48vh,430px);overflow:auto;background:#f7f9fc;border:1px solid var(--line);border-radius:15px;padding:12px;display:flex;flex-direction:column;gap:9px}.support-message{max-width:86%;padding:10px 12px;border-radius:13px;background:#fff;border:1px solid var(--line)}.support-message.user{align-self:flex-start;background:var(--orange-soft);border-color:#ffd0b3}.support-message.admin{background:#e9f6ef;border-color:#bfe7d2}.support-message small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.support-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.support-form input{border:1px solid var(--line);border-radius:12px;padding:12px}.support-form button,.request-human{border:0;border-radius:11px;padding:11px 15px;font-weight:800}.support-form button{background:var(--orange);color:#fff}.request-human{width:100%;margin-top:10px;background:#fff;border:1px solid var(--navy);color:var(--navy)}

@media (max-width: 1050px) { .categories { grid-template-columns: repeat(3, 1fr); }.listing-grid { grid-template-columns: repeat(3, 1fr); }.hero { grid-template-columns: 1.3fr .7fr; }.car-shape { transform: scale(.8); left: -5%; }.tower-one { left: 0; }.tower-two { left: 42%; } }
@media (max-width: 760px) {
  .topbar { height: 66px; padding: 0 16px; }.brand-mark { width: 38px; height: 38px; }.brand b { font-size: 18px; }.location-button { font-size: 12px; }.icon-button { display: none; }
  .hero { min-height: auto; display: block; padding: 0 18px; }.hero-content { padding: 45px 0 55px; }.hero h1 { font-size: 44px; }.hero p { font-size: 15px; }.hero-art { display: none; }.search-box button { padding: 11px 16px; }
  .section { padding: 38px 16px; }.section-heading { align-items: center; }.section-heading h2 { font-size: 24px; }.categories { grid-template-columns: repeat(3, 1fr); gap: 10px; }.category-card { padding: 14px 5px; border-radius: 15px; }.category-icon { width: 47px; height: 47px; font-size: 23px; }.category-card b { font-size: 12px; }.category-card small { font-size: 10px; }
  .promo-strip { margin: 0 16px; padding: 17px; }.promo-icon { display: none; }.promo-strip b { font-size: 16px; }.promo-strip span { font-size: 12px; }.promo-strip button { padding: 10px 13px; white-space: nowrap; }
  .listings-section .section-heading { display: block; }.filters { margin-top: 15px; overflow-x: auto; }.filter { flex: 1; white-space: nowrap; }.listing-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }.listing-image { height: 135px; font-size: 53px; }.listing-body { padding: 12px; }.listing-body h3 { font-size: 14px; }.listing-price { font-size: 17px; }.listing-footer { font-size: 10px; }.listing-badge { font-size: 9px; }.favorite-button { width: 32px; height: 32px; }
  .detail-sheet { grid-template-columns: 1fr; }.detail-image { min-height: 280px; font-size: 90px; }.detail-content { padding: 25px 20px; }.detail-content h2 { font-size: 23px; }.detail-content > strong { font-size: 24px; }.modal { padding: 0; align-items: end; }.detail-sheet, .add-sheet { max-height: 93vh; border-radius: 25px 25px 0 0; }.add-sheet { padding: 24px 18px; }.form-row,.dynamic-fields,.detail-specs { grid-template-columns: 1fr; }.advanced-base,.category-search-fields{grid-template-columns:1fr 1fr}.saved-search-row{align-items:stretch;flex-wrap:wrap}.saved-search-row select{width:100%}
}

/* Phase 2 - authentication, image previews and user ads */
.auth-sheet,.account-sheet { width: min(540px,100%); max-height: 90vh; overflow: auto; background: white; border-radius: 24px; padding: 34px; position: relative; z-index: 1; }
.auth-logo { width: 58px; height: 58px; display: grid; place-items: center; color: white; background: var(--navy); border-radius: 18px; font-size: 30px; font-weight: 800; margin-bottom: 18px; }
.auth-sheet h2 { margin: 5px 0; }.auth-sheet p { color: var(--muted); }.phone-row { display: grid; grid-template-columns: 110px 1fr; gap: 9px; margin: 22px 0 12px; direction: ltr; }.phone-row input,.phone-row select,.otp-input { width: 100%; border: 1px solid var(--line); background: #fafbfc; border-radius: 12px; padding: 13px; outline: none; }.auth-sheet .submit-listing { width: 100%; border: 0; }.otp-input { margin: 18px 0 12px; text-align: center; font-size: 25px; letter-spacing: 8px; direction: ltr; }
.phone-row.email-row{grid-template-columns:1fr}.phone-row.email-row input{font-size:16px}
#googleSignIn{display:flex;justify-content:center;min-height:44px;margin:18px 0 8px}.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--line);flex:1}
.photo-preview { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 14px; direction: rtl; }
.photo-slot { position: relative; aspect-ratio: 1; min-width: 0; border: 1px dashed #c4ccda; border-radius: 11px; overflow: hidden; display: grid; place-items: center; background: #f7f9fc; color: #8b96a9; font-size: 12px; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-slot-number { position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(11,29,55,.78); color: white; font-size: 11px; font-weight: 800; }
.photo-remove { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #d33; box-shadow: 0 2px 8px rgba(0,0,0,.18); font-weight: 900; cursor: pointer; }
.photo-error { padding: 6px; color: #b42318; font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width:520px){.photo-preview{grid-template-columns:repeat(3,minmax(0,1fr));}}
.account-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 20px 0 25px; }.account-stats div { text-align: center; background: var(--bg); border-radius: 13px; padding: 14px 6px; }.account-stats b,.account-stats span { display: block; }.account-stats b { font-size: 21px; color: var(--orange); }.account-stats span { color: var(--muted); font-size: 12px; }.my-ads { display: grid; gap: 9px; }.my-ad { border: 1px solid var(--line); border-radius: 13px; padding: 12px; display: flex; justify-content: space-between; gap: 10px; }.my-ad b,.my-ad small { display: block; }.my-ad small { color: var(--muted); }.status-pill { align-self: center; white-space: nowrap; background: #fff6dd; color: #997010; padding: 5px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; }.status-pill.rejected { background: #fff0f0; color: #a52d2d; }.logout-button { width: 100%; margin-top: 20px; border: 1px solid #e6b6b6; color: #a52d2d; background: white; border-radius: 12px; padding: 11px; font-weight: 800; }
.profile-heading{display:flex;align-items:center;gap:11px}.profile-heading h2{margin:2px 0}.profile-heading small{color:var(--muted)}.profile-person{width:48px;height:48px;font-size:30px}.profile-editor{border:1px solid var(--line);border-radius:15px;padding:13px;margin-bottom:20px}.profile-editor summary{font-weight:800;cursor:pointer}.profile-editor form{display:grid;gap:10px;margin-top:13px}.profile-editor label{display:grid;gap:5px;font-weight:700;font-size:13px}.profile-editor input,.profile-editor select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fafbfc}.profile-save,.phone-change-row button{border:0;background:var(--orange);color:#fff;border-radius:10px;padding:10px;font-weight:800}.phone-change{border-top:1px solid var(--line);margin-top:14px;padding-top:13px}.phone-change-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}
@media (max-width:760px){.auth-sheet,.account-sheet{max-height:93vh;border-radius:25px 25px 0 0;padding:27px 19px}.phone-row{grid-template-columns:95px 1fr}}
@media (max-width:760px){.support-fab{left:12px;bottom:88px;padding:11px}.support-fab span{display:none}.support-sheet{max-height:93vh;border-radius:25px 25px 0 0;padding:23px 17px}.support-messages{height:48vh}}
@media (max-width: 380px) { .brand small { display: none; }.location-button { padding: 7px; }.categories { grid-template-columns: repeat(2, 1fr); }.listing-grid { grid-template-columns: 1fr; }.listing-image { height: 190px; } }

/* Global marketplace, regional pricing and safety policy */
.locale-button { border: 1px solid var(--line); background: white; color: var(--navy); border-radius: 11px; padding: 8px 11px; font-size: 12px; font-weight: 700; }
.safety-strip { max-width: calc(1500px - 10vw); margin: 18px auto 0; background: #eef9f5; border: 1px solid #c7ebdc; border-radius: 18px; padding: 16px 22px; display: flex; align-items: center; gap: 14px; }
.footer-safety{margin-top:44px;margin-bottom:24px}.site-footer{background:#0d213e;color:#fff;padding:34px max(5vw,20px) 110px;display:grid;gap:20px}.footer-brand{display:grid;gap:5px}.footer-brand b{font-size:20px}.footer-brand span,.site-footer small{color:#b9c6d8}.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}.site-footer a,.site-footer button{color:#fff;background:transparent;border:0;padding:0;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.site-footer a:hover,.site-footer button:hover{color:#ff8a43}.site-footer small{border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.safety-mark { width: 40px; height: 40px; display: grid; place-items: center; background: #1a9b68; color: white; border-radius: 50%; font-weight: 800; }
.safety-strip > div:nth-child(2) { flex: 1; }.safety-strip b,.safety-strip span { display: block; }.safety-strip span { color: #60776d; font-size: 13px; }
.safety-strip button { border: 1px solid #1a9b68; color: #12764e; background: white; border-radius: 11px; padding: 9px 13px; font-weight: 800; }
.pricing-note { display: flex; gap: 12px; align-items: center; border-radius: 13px; padding: 12px 14px; background: var(--blue-soft); color: var(--navy); }
.pricing-note > span { font-size: 24px; }.pricing-note b,.pricing-note small { display: block; }.pricing-note small { color: var(--muted); margin-top: 2px; }
.policy-consent { display: flex !important; grid-template-columns: 22px 1fr; align-items: start; font-size: 13px; font-weight: 500 !important; line-height: 1.6; }
.policy-consent input { margin-top: 4px; }.policy-consent button { padding: 0; border: 0; background: transparent; color: var(--orange); text-decoration: underline; font-weight: 800; }
.region-sheet,.policy-sheet { width: min(820px,100%); max-height: 90vh; overflow: auto; background: white; border-radius: 24px; padding: 31px; position: relative; z-index: 1; }
.sheet-intro { color: var(--muted); margin-top: -10px; }.setting-block { margin: 22px 0; }.setting-block > label,.setting-grid label { display: grid; gap: 7px; font-weight: 800; }
.setting-search { display:flex; align-items:center; gap:8px; margin-top:9px; border:1px solid var(--line); border-radius:12px; background:#fafbfc; padding:0 12px; }
.setting-search:focus-within { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.setting-search input { width:100%; border:0; outline:0; background:transparent; padding:12px 0; color:var(--navy); font:inherit; }
.setting-search span { color:var(--muted); font-size:20px; }
.empty-setting-results { color:var(--muted); text-align:center; margin:14px 0 0; }
.currency-auto-hint { color:var(--muted); font-weight:500; }
.country-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 8px; max-height: 260px; overflow: auto; padding: 2px; }
.country-option { border: 1px solid var(--line); border-radius: 12px; background: white; padding: 10px; text-align: right; }.country-option.active { border-color: var(--orange); background: var(--orange-soft); }
.setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.setting-grid select { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fafbfc; }.setting-grid select[size] { min-height:142px; }
.setting-grid select.language-list[size] { height:92px; min-height:92px; max-height:92px; }
.local-price-card { display: flex; gap: 12px; padding: 15px; margin: 18px 0; background: #f7f8fb; border-radius: 14px; }.local-price-card > span { font-size: 28px; }.local-price-card b,.local-price-card small { display: block; }.local-price-card small { color: var(--muted); }
.policy-sheet { width: min(980px,100%); }.zero-tolerance { background: #fff0f0; border: 1px solid #f3caca; color: #8f2222; padding: 14px 16px; border-radius: 14px; margin: 5px 0 18px; }
.country-policy-summary { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:16px; margin:2px 0 14px; border:1px solid #cfe1ff; background:#f4f8ff; border-radius:16px; }
.country-policy-flag { width:50px; height:50px; display:grid; place-items:center; border-radius:14px; background:white; font-size:29px; box-shadow:0 4px 15px rgba(15,37,71,.08); }
.country-policy-summary h3,.country-policy-summary p { margin:0; }.country-policy-summary p { color:var(--muted); font-size:13px; margin-top:3px; }.policy-overline { color:#315f9b; font-size:12px; font-weight:800; }
.policy-status,.review-badge { white-space:nowrap; border-radius:999px; padding:7px 10px; background:#e6f7ef; color:#087a50; font-size:12px; font-weight:900; }
.local-policy-block { margin-top:18px; padding:17px; border:1px solid var(--line); border-radius:16px; background:#fbfcfe; }.local-policy-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.local-policy-heading h3 { margin:3px 0 0; }
.local-rules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px; }.local-rule { padding:12px; background:white; border:1px solid var(--line); border-radius:12px; }.local-rule b,.local-rule small { display:block; }.local-rule small { color:var(--muted); line-height:1.5; margin-top:4px; }.local-rule .rule-state { display:inline-block; margin-top:8px; color:#9a6200; background:#fff4d8; padding:4px 7px; border-radius:7px; font-size:11px; font-weight:900; }.policy-legal-note { color:var(--muted); font-size:12px; line-height:1.7; margin:13px 0 0; }
.zero-tolerance b,.zero-tolerance span { display: block; }.zero-tolerance span { font-size: 13px; margin-top: 3px; }.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.policy-item { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 13px; padding: 13px; }.policy-item > span { font-size: 25px; }.policy-item b,.policy-item small { display: block; }.policy-item small { color: var(--muted); line-height: 1.55; margin-top: 3px; }
.policy-item.danger { border-color: #f0b7b7; background: #fff8f8; }.moderation-flow { padding: 14px; margin: 16px 0; border-radius: 13px; background: #eef9f5; }.moderation-flow b,.moderation-flow span { display: block; }.moderation-flow span { color: #60776d; font-size: 13px; margin-top: 3px; }

@media (max-width: 760px) {
  .locale-button { font-size: 10px; padding: 7px 6px; }.safety-strip { margin: 14px 16px 0; padding: 14px; align-items: start; flex-wrap: wrap; }.safety-strip button { width: 100%; }.safety-mark { width: 34px; height: 34px; }.safety-strip > div:nth-child(2) { width: calc(100% - 50px); }
  .region-sheet,.policy-sheet { max-height: 93vh; border-radius: 25px 25px 0 0; padding: 24px 18px; }.setting-grid { grid-template-columns: 1fr; }.country-grid { grid-template-columns: 1fr 1fr; }.policy-grid { grid-template-columns: 1fr; }.country-policy-summary { grid-template-columns:auto 1fr; }.country-policy-summary .policy-status { grid-column:1/-1; width:max-content; }.local-rules-grid { grid-template-columns:1fr; }
}
.otp-resend{display:block;margin:14px auto 0;padding:10px 16px;border:0;background:transparent;color:#17345b;font-weight:700;cursor:pointer}.otp-resend:disabled{color:#8995a8;cursor:not-allowed}
.billing-sheet{position:relative;background:#fff;width:min(520px,calc(100% - 32px));border-radius:24px;padding:28px;max-height:90vh;overflow:auto;box-shadow:0 24px 80px #10213d33}.billing-sheet h2{font-size:22px;margin:0}.billing-sheet p{line-height:1.8}.billing-amount{font-size:32px;display:block;color:#17345b;margin:24px 0}.billing-summary{padding:14px 18px;background:#fff4eb;border-radius:14px;line-height:1.8}.rejection-reason{color:#b02525!important}.billing-sheet button:disabled,#supportForm button:disabled,.request-human:disabled,#submitAdBtn:disabled{opacity:.55;cursor:wait}.support-message{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:600px){.billing-sheet{padding:22px}.billing-sheet h2{font-size:20px}}

/* Keep every category discoverable on phones and larger screens. */
.category-card { text-decoration: none; min-width: 0; }
.listings-section .section-heading { flex-wrap: wrap; }
.filters { flex-wrap: wrap; width: 100%; }
.filter { flex: 0 1 auto; font-size: 14px; min-height: 44px; white-space: normal; }
.category-card:focus-visible, .filter:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (max-width: 650px) {
  .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card b { font-size: 14px; }
  .category-card small { font-size: 12px; }
  .filters { overflow: visible; }
  .filter { flex: 1 1 auto; white-space: normal; }
}

.classified-sections { margin: 0 0 20px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.classified-sections[hidden] { display: none; }
.classified-sections h3 { margin: 0 0 12px; font-size: 18px; }
.classified-section-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.classified-section { padding: 10px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--navy); font-size: 14px; }
.classified-section.active { border-color: var(--orange); background: var(--orange-soft); }
.classified-section:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media(max-width:650px) { .classified-section { flex: 1 1 140px; } }

/* Keep the full contact panel reachable at every viewport size. */
#detailModal{padding:24px 16px;align-items:center}
#detailModal .detail-sheet{max-height:calc(100dvh - 48px);overflow-y:auto;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;padding-bottom:28px}
#detailModal .detail-image{min-height:0;height:clamp(280px,52vh,430px);margin:48px 16px 16px;border-radius:16px;background-color:#f7f8fb}
#detailModal .detail-content{padding:38px 28px 28px;min-width:0}
#detailModal .contact-card a{overflow-wrap:anywhere;text-align:start}
#detailModal .detail-actions{margin-bottom:16px}
@media(max-width:700px){#detailModal .detail-sheet{grid-template-columns:1fr;border-radius:22px}#detailModal .detail-image{height:280px;margin:48px 16px 0}#detailModal .detail-content{padding:22px 20px 32px}}

.photo-open{position:absolute;inset:0;border:0;background:transparent;cursor:zoom-in;width:100%;height:100%}.listing-photo-open{border:0;padding:0;background:transparent;cursor:zoom-in;display:block;width:100%}.listing-photo-open img{width:100%;height:auto}.photo-viewer{border:0;padding:0;background:#101725;color:white;width:94vw;max-width:1500px;height:90dvh;max-height:94dvh;border-radius:16px;overflow:hidden}.photo-viewer::backdrop{background:rgba(0,0,0,.85)}.photo-toolbar{height:64px;display:flex;justify-content:center;align-items:center;gap:12px;direction:ltr}.photo-toolbar button{background:#fff;color:#142239;border:0;border-radius:9px;min-width:48px;height:44px;font-size:24px;cursor:pointer}.photo-toolbar button:disabled{opacity:.4}.photo-stage{height:calc(100% - 64px);display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:grab;direction:ltr}.photo-stage:active{cursor:grabbing}.photo-stage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;flex-shrink:0;transform-origin:center}.photo-viewer button:focus-visible{outline:3px solid #ff7628;outline-offset:2px}

/* Dependent vehicle selection: one catalog for posting and browsing. */
.vehicle-picker{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid #dae3ef;background:#fff;border-radius:12px;min-width:0}.vehicle-field{display:flex;flex-direction:column;gap:7px;min-width:0}.vehicle-field label{font-weight:700}.vehicle-field select,.vehicle-field input{width:100%;min-width:0;box-sizing:border-box}.vehicle-field .vehicle-search{font-size:12px;padding:8px 10px;background:#f6f8fc}.vehicle-field [hidden]{display:none!important}.vehicle-field :disabled{opacity:.55;cursor:not-allowed}.vehicle-hint{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.7;margin:0}@media(max-width:600px){.vehicle-picker{grid-template-columns:1fr;padding:10px}}