.showroom-view,
.showroom-list-view {
  direction: rtl;
  padding: 16px 1px 10px;
}

.showroom-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.showroom-page-header > div { min-width: 0; text-align: center; }
.showroom-page-header p { margin: 0 0 1px; color: var(--blue); font-size: 9px; font-weight: 800; }
.showroom-page-header h1 { overflow: hidden; margin: 0; color: var(--ink); font-size: 18px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }

.showroom-nav-button,
.showroom-home-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #47576e;
  font-size: 10px;
  font-weight: 800;
}

.showroom-nav-button { width: 36px; padding: 0; }
.showroom-nav-button span { display: none; }
.showroom-home-button { color: var(--blue); background: #f2f8ff; border-color: #d5e9ff; }
.showroom-home-button i { font-size: 12px; }
.showroom-home-button span { display: none; }

.showroom-hero {
  position: relative;
  height: 158px;
  overflow: hidden;
  border-radius: 17px;
  color: #fff;
  isolation: isolate;
}

.showroom-hero > img,
.showroom-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.showroom-hero > img { object-fit: cover; object-position: center; }
.showroom-hero-overlay { background: linear-gradient(90deg, rgba(5, 15, 30, .06) 12%, rgba(5, 15, 30, .75) 82%, rgba(5, 15, 30, .92)); z-index: 1; }
.showroom-hero-copy { position: absolute; z-index: 2; right: 17px; bottom: 18px; text-align: right; }
.showroom-hero-copy p { margin: 0 0 2px; color: #bcdcff; font-size: 10px; font-weight: 800; }
.showroom-hero-copy h2 { margin: 0; font-size: 24px; line-height: 1.18; }
.showroom-hero-copy span { color: #e7eef9; font-size: 10px; }

.showroom-intro { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 17px 1px 11px; }
.showroom-intro h2 { margin: 0; color: var(--ink); font-size: 16px; }.showroom-intro p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.city-count { flex: none; padding: 5px 8px; border-radius: 20px; color: var(--blue); background: #eff7ff; font-size: 9px; font-weight: 800; }
.showroom-intro-actions { display: flex; flex: none; flex-direction: column; align-items: end; gap: 6px; }
.register-showroom-button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 800; box-shadow: 0 5px 12px rgba(11,113,237,.2); }

.city-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.city-card { position: relative; height: 137px; overflow: hidden; padding: 0; border: 0; border-radius: 14px; color: #fff; text-align: right; background: #243750; box-shadow: 0 4px 11px rgba(22, 41, 71, .1); transition: box-shadow .2s ease; }
.city-card:hover,.city-card:focus-visible { outline: 2px solid #71b5ff; outline-offset: 2px; box-shadow: 0 9px 19px rgba(22, 41, 71, .22); }
.city-card img,.city-card::after { position: absolute; inset: 0; width: 100%; height: 100%; }.city-card img { object-fit: cover; }.city-card::after { background: linear-gradient(0deg, rgba(4, 12, 25, .91), rgba(4, 12, 25, .03) 72%); content: ""; }
.city-name { position: absolute; z-index: 1; right: 10px; bottom: 10px; left: 25px; overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.city-card i { position: absolute; z-index: 1; bottom: 13px; left: 10px; color: #fff; font-size: 12px; }

.showroom-list-subtitle { margin: -5px 1px 13px; color: var(--muted); font-size: 11px; }
.showroom-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.showroom-card { position: relative; display: block; overflow: hidden; min-width: 0; border: 1px solid #e2e9f1; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(18, 36, 63, .06); transition: box-shadow .2s ease; }.showroom-card:hover, .showroom-card:focus-within { box-shadow: 0 7px 15px rgba(18,36,63,.14); }
.showroom-card-image { position: relative; overflow: hidden; aspect-ratio: 1 / .88; background: #eef3f8; }.showroom-card-image img { display: block; width: 100%; height: 100%; object-fit:contain; }.verified-chip { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 6px; color: #fff; background: rgba(8, 105, 222, .92); font-size: 7px; font-weight: 800; }
.showroom-card-body { position: relative; min-height: 47px; padding: 8px 8px 7px; }.showroom-card-body h2 { overflow: hidden; margin: 0; color: var(--ink); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.showroom-card-body > p, .showroom-meta { display: none; }.showroom-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color: transparent; }.showroom-open i { display: none; }

html[dir="ltr"] .showroom-view,
html[dir="ltr"] .showroom-list-view { direction: ltr; }
html[dir="ltr"] .showroom-hero-overlay { background: linear-gradient(90deg, rgba(5, 15, 30, .92), rgba(5, 15, 30, .75) 30%, rgba(5, 15, 30, .06) 88%); }
html[dir="ltr"] .showroom-hero-copy { right: auto; left: 17px; text-align: left; }
html[dir="ltr"] .city-card { text-align: left; }.city-name { right: 25px; left: 10px; }.city-card i { right: 10px; left: auto; transform: rotate(180deg); }.verified-chip { right: auto; left: 6px; }

/* Public profile and private owner area for the isolated Car Showroom module. */
.showroom-profile-view, .showroom-registration-view, .showroom-owner-view { direction: rtl; padding: 16px 1px 12px; }
.public-showroom-profile { overflow: hidden; border: 1px solid #e1e9f2; border-radius: 17px; background: #fff; box-shadow: 0 5px 18px rgba(18,36,63,.08); }
.public-cover { position: relative; height: 167px; overflow: hidden; background: #1e324e; }
.public-cover img, .public-cover-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }.public-cover img { object-fit:contain; }.public-cover-overlay { background: linear-gradient(0deg, rgba(7,17,34,.56), transparent 60%); }
.public-verified { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 20px; color: #fff; background: rgba(11,113,237,.92); font-size: 9px; font-weight: 800; }
.public-showroom-heading { display: flex; align-items: end; gap: 10px; margin: -31px 13px 0; position: relative; z-index: 1; }.public-showroom-logo { width: 68px; height: 68px; object-fit:contain; border: 4px solid #fff; border-radius: 15px; background: #fff; box-shadow: 0 3px 10px rgba(15,32,55,.2); }.public-showroom-heading h1 { margin: 0 0 3px; color: #fff; font-size: 18px; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.25); }.public-showroom-heading p { margin: 0; color: #2c405b; font-size: 10px; font-weight: 700; }
.public-description { margin: 15px 13px 12px; color: #526278; font-size: 11px; line-height: 1.7; }
.public-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 13px 13px; }.public-info-card { display: flex; min-width: 0; gap: 8px; padding: 10px; border: 1px solid #e5ecf4; border-radius: 11px; color: #2e405b; background: #f9fbfe; text-decoration: none; }.public-info-card.full { grid-column: 1 / -1; }.public-info-card > i { margin-top: 2px; color: var(--blue); }.public-info-card span { min-width: 0; display: grid; gap: 2px; }.public-info-card b { color: #53647a; font-size: 8px; }.public-info-card small { overflow: hidden; color: #172944; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.public-map-wrap { height: 170px; margin: 0 13px; overflow: hidden; border: 1px solid #e2eaf2; border-radius: 12px; background: #edf3f8; }.public-map-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }.public-location-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 11px 13px 13px; }.location-action { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; font-size: 10px; font-weight: 800; text-decoration: none; }.location-action.secondary { border: 1px solid #d6e6f7; color: var(--blue); background: #f3f9ff; }.location-action.primary { color: #fff; background: var(--blue); }.owner-manage-button { display: flex; width: calc(100% - 26px); min-height: 40px; align-items: center; justify-content: center; gap: 7px; margin: 0 13px 13px; border: 0; border-radius: 10px; color: #154164; background: #fff5dd; font-size: 10px; font-weight: 800; }
.public-inventory-heading { display: flex; align-items: end; justify-content: space-between; margin: 19px 2px 10px; }.public-inventory-heading p { margin: 0 0 2px; color: var(--blue); font-size: 9px; font-weight: 800; }.public-inventory-heading h2 { margin: 0; font-size: 16px; }.public-inventory-heading > span { padding: 5px 7px; border-radius: 20px; color: var(--blue); background: #eff7ff; font-size: 9px; font-weight: 800; }
.public-car-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }.public-car-card { position: relative; display: grid; grid-template-columns: minmax(104px, 40%) minmax(0, 1fr); grid-template-areas: "media copy"; overflow: hidden; min-width: 0; border: 1px solid #e2eaf2; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(18,36,63,.06); direction: ltr; }.public-car-media { grid-area: media; position: relative; min-height: 116px; overflow: hidden; background: #eef3f8; }.public-car-media > img { width: 100%; height: 100%; display: block; object-fit:contain; }.public-car-gallery { position: absolute; right: 5px; bottom: 5px; left: 5px; display: flex; gap: 4px; overflow-x: auto; padding: 0; scrollbar-width: none; }.public-car-gallery::-webkit-scrollbar { display: none; }.public-car-gallery img { width: 29px; height: 22px; flex: 0 0 auto; border: 1px solid #e0e8f1; border-radius: 4px; object-fit:contain; }.showroom-car-status { position: absolute; top: 7px; left: 7px; padding: 4px 6px; border-radius: 6px; color: #fff; background: var(--blue); font-size: 8px; font-weight: 800; }.showroom-car-status.sold { background: #64748b; }.public-car-media-count { position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 3px 6px; border-radius: 20px; color: #fff; background: rgba(10,26,50,.78); direction: ltr; font: 800 9px/1 Arial,sans-serif; pointer-events: none; }.public-car-favorite { position: absolute; z-index: 3; top: 6px; right: 6px; display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border: 1px solid #fff; border-radius: 50%; color: #1c2d43; background: #fffffff2; font-size: 15px; }.public-car-favorite[aria-pressed="true"] { color: #dc1830; }.public-car-body { grid-area: copy; display: grid; align-content: center; gap: 5px; min-width: 0; padding: 9px; direction: ltr; text-align: left; }.public-car-body h3 { overflow: hidden; margin: 0; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.public-car-body strong { display: block; color: var(--blue); font-size: 13px; direction: ltr; }.public-car-body p { overflow: hidden; margin: 0; color: #6d7b8f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.public-car-view { justify-self: start; min-height: 28px; padding: 4px 0; border: 0; color: var(--blue); background: transparent; font: 800 10px/1.2 inherit; text-decoration: underline; text-underline-offset: 3px; }.empty-showroom-cars { padding: 20px; border-radius: 12px; color: #6a788b; background: #f6f8fb; text-align: center; font-size: 11px; } html[dir="rtl"] .public-car-body { direction: rtl; text-align: right; } html[dir="rtl"] .public-car-view { justify-self: end; }
.showroom-form-intro { margin: 0 0 12px; color: #607086; font-size: 11px; line-height: 1.7; }.showroom-profile-form, .owner-car-form { display: grid; gap: 10px; }.showroom-profile-form label, .owner-car-form label { display: grid; gap: 5px; color: #354964; font-size: 10px; font-weight: 800; }.showroom-profile-form input, .showroom-profile-form select, .showroom-profile-form textarea, .owner-car-form input, .owner-car-form select, .owner-car-form textarea { width: 100%; min-width: 0; min-height: 39px; padding: 8px 9px; border: 1px solid #dce6f0; border-radius: 9px; outline: 0; color: #1f314b; background: #fff; font: inherit; font-size: 11px; }.showroom-profile-form textarea, .owner-car-form textarea { min-height: 73px; resize: vertical; line-height: 1.5; }.showroom-profile-form input:focus, .showroom-profile-form select:focus, .showroom-profile-form textarea:focus, .owner-car-form input:focus, .owner-car-form select:focus, .owner-car-form textarea:focus { border-color: #70b5ff; box-shadow: 0 0 0 3px rgba(11,113,237,.1); }.profile-image-field { position: relative; }.profile-image-preview { width: 100%; height: 94px; border: 1px solid #dce6f0; border-radius: 9px; object-fit:contain; background: #edf3f8; }.showroom-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.owner-car-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.owner-account-method { display: grid; gap: 9px; margin: 0; padding: 11px; border: 1px solid #d5e6f8; border-radius: 12px; background: #f8fbff; }.owner-account-method legend { padding: 0 4px; color: #264b70; font-size: 11px; font-weight: 800; }.owner-account-method > p { margin: 0; color: #61748a; font-size: 10px; line-height: 1.55; }.owner-method-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.owner-method-option { position: relative; display: block !important; cursor: pointer; }.owner-method-option input { position: absolute; opacity: 0; }.owner-method-option span { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 7px; padding: 7px; border: 1px solid #d7e5f3; border-radius: 9px; color: #405a77; background: #fff; font-size: 10px; }.owner-method-option input:checked + span { border-color: var(--blue); color: var(--blue); background: #eef7ff; box-shadow: inset 0 0 0 1px var(--blue); }.owner-contact-field, .owner-verification-code { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }.owner-verification-button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid #cbe1f7; border-radius: 9px; color: #155d98; background: #fff; font: inherit; font-size: 9px; font-weight: 800; }.owner-verification-note { margin: 0; color: #6d7f93; font-size: 9px; line-height: 1.5; }
.map-picker { display: grid; gap: 8px; padding: 11px; border: 1px solid #dce8f3; border-radius: 12px; background: #f8fbff; }.map-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #324864; font-size: 10px; }.map-picker-heading i { color: var(--blue); }.map-picker-heading small { color: #708097; font-size: 8px; text-align: left; }.location-picker-surface { position: relative; min-height: 96px; overflow: hidden; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, rgba(12,72,126,.84), rgba(23,155,106,.62)), url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=800&q=82') center/cover; }.location-picker-surface::after { position: absolute; top: 38%; left: 52%; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; background: #f34758; box-shadow: 0 3px 8px rgba(0,0,0,.25); content: ''; transform: rotate(-45deg); }.location-picker-surface > * { position: relative; z-index: 1; }.location-picker-surface i { display: block; margin-bottom: 5px; font-size: 19px; }.location-picker-surface span { font-size: 10px; font-weight: 800; }.showroom-submit-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; margin-top: 2px; border: 0; border-radius: 10px; color: #fff; background: var(--blue); box-shadow: 0 5px 12px rgba(11,113,237,.22); font-size: 11px; font-weight: 800; }
.owner-lock-note { display: flex; gap: 8px; margin-bottom: 12px; padding: 10px 11px; border: 1px solid #d7ebff; border-radius: 10px; color: #27557d; background: #f1f8ff; font-size: 10px; line-height: 1.5; }.owner-lock-note i { color: var(--blue); }.owner-reference-note { display:flex; align-items:center; gap:7px; margin:-4px 0 12px; padding:8px 10px; border:1px solid #d8e7f6; border-radius:9px; color:#386285; background:#fbfdff; font-family:Arial,sans-serif; font-size:10px; font-weight:800; direction:ltr; }.owner-reference-note i { color:var(--blue); }.owner-moderation-note { margin: -4px 0 12px; padding: 9px 11px; border: 1px solid #f0d092; border-radius: 10px; color: #986007; background: #fff8e9; font-size: 10px; font-weight: 800; line-height: 1.5; }.owner-section { margin-bottom: 10px; overflow: hidden; border: 1px solid #e0e9f2; border-radius: 12px; background: #fff; }.owner-section summary { display: flex; align-items: center; gap: 8px; padding: 12px; color: #253a57; cursor: pointer; font-size: 11px; font-weight: 800; }.owner-section summary i { color: var(--blue); }.owner-section form, .owner-car-list { margin: 0 12px 12px; }.car-photo-upload { display: grid; gap: 7px; padding: 10px; border: 1px dashed #b9d6f5; border-radius: 10px; background: #f7fbff; }.car-photo-upload > p { margin: 0; color: #667a92; font-size: 9px; line-height: 1.5; }.car-photo-manager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.car-photo-item { overflow: hidden; border: 1px solid #dce8f4; border-radius: 9px; background: #fff; }.car-photo-item > img { display: block; width: 100%; aspect-ratio: 1.45; object-fit:contain; }.car-photo-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; }.car-photo-action { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 4px 6px; border: 1px solid #d4e4f5; border-radius: 6px; color: #24649a; background: #fff; cursor: pointer; font: inherit; font-size: 8px; font-weight: 800; }.car-photo-action.main { flex: 1; color: #fff; border-color: var(--blue); background: var(--blue); }.car-photo-action:disabled { opacity: .55; cursor: default; }.car-photo-action.replace input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }.car-photo-action.danger { border-color: #f5d4d8; color: #c43d49; }.owner-car-list { display: grid; gap: 8px; }.owner-car-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid #e5ecf4; border-radius: 10px; background: #fbfcfe; }.owner-car-preview { width: 44px; height: 35px; flex: 0 0 auto; border-radius: 7px; object-fit:contain; background: #eaf0f6; }.owner-car-item > div:first-of-type { min-width: 0; flex: 1; }.owner-car-item h3 { overflow: hidden; margin: 0 0 3px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.owner-car-item p { overflow: hidden; margin: 0; color: #6b7a8e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.owner-car-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }.owner-car-actions button { padding: 5px 6px; border: 1px solid #d8e8f9; border-radius: 6px; color: var(--blue); background: #fff; font-size: 8px; font-weight: 800; }.owner-car-actions button:disabled { opacity: .5; }.owner-car-actions .danger { border-color: #f7d5d9; color: #d33c4c; }
.showroom-p-badge { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #fff; background: #0b71ed; box-shadow: 0 3px 7px rgba(11,113,237,.28); font-family: Arial,sans-serif; font-size: 13px; font-weight: 900; line-height: 1; }.showroom-source-label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 5px; color: #2f6fa7; font-size: 10px; font-weight: 800; }.showroom-vehicle-detail { display: grid; gap: 10px; }.showroom-vehicle-image { width: 100%; height: 180px; border-radius: 13px; object-fit:contain; background: #edf2f7; }.showroom-vehicle-thumbnails { display: flex; gap: 6px; overflow-x: auto; }.showroom-vehicle-thumbnails button { width: 46px; height: 34px; flex: 0 0 auto; padding: 0; overflow: hidden; border: 1px solid #dce6f1; border-radius: 6px; background: #fff; }.showroom-vehicle-thumbnails img { display: block; width: 100%; height: 100%; object-fit:contain; }.showroom-vehicle-price { margin: 0; color: var(--blue); font-size: 19px; font-weight: 900; direction: ltr; }.showroom-vehicle-specs, .showroom-vehicle-description { margin: 0; color: #52667e; font-size: 11px; line-height: 1.65; }.showroom-source-card { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #dce9f6; border-radius: 11px; background: #f7fbff; }.showroom-source-card img { width: 40px; height: 40px; border-radius: 9px; object-fit:contain; }.showroom-source-card div { display: grid; gap: 2px; min-width: 0; }.showroom-source-card p, .showroom-source-card small { margin: 0; color: #6b7e94; font-size: 9px; }.showroom-source-card b { overflow: hidden; color: #1b3553; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.showroom-source-button { width: 100%; min-height: 42px; }

html[dir="ltr"] .showroom-profile-view, html[dir="ltr"] .showroom-registration-view, html[dir="ltr"] .showroom-owner-view { direction: ltr; } html[dir="ltr"] .showroom-profile-view .public-showroom-heading { direction: ltr; }

/* The legacy public showroom profile remains a provider-detail surface rather
   than a directory card. Keep its media, facts, and server-authorized contact
   actions compact enough for a phone without changing the inventory below. */
#showroomProfileScreen .showroom-page-header { margin-bottom:8px; }
#showroomProfileScreen .showroom-page-header h1 { font-size:16px; }
#showroomProfileScreen .public-showroom-profile { border-radius:14px; }
#showroomProfileScreen .public-cover { height:clamp(116px,31vw,138px); }
#showroomProfileScreen .public-verified { top:8px; inset-inline-end:8px; padding:4px 7px; }
#showroomProfileScreen .public-showroom-heading { gap:8px; margin:-25px 11px 0; }
#showroomProfileScreen .public-showroom-logo { width:56px; height:56px; border-width:3px; border-radius:12px; }
#showroomProfileScreen .public-showroom-heading h1 { font-size:15px; line-height:1.25; }
#showroomProfileScreen .public-showroom-heading p { font-size:9px; }
#showroomProfileScreen .public-description { margin:10px 11px 9px; font-size:10.5px; line-height:1.5; }
#showroomProfileScreen .public-contact-grid { gap:6px; padding:0 11px 8px; }
#showroomProfileScreen .public-info-card { min-height:46px; gap:6px; padding:7px; border-radius:9px; }
#showroomProfileScreen .public-info-card b { font-size:7.5px; }
#showroomProfileScreen .public-info-card small { font-size:9.5px; }
#showroomProfileScreen .public-showroom-contact-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 11px 10px; }
#showroomProfileScreen .public-showroom-contact-actions .record-customer-actions { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0; padding:0; border:0; }
#showroomProfileScreen .public-showroom-contact-actions .record-customer-actions button,
#showroomProfileScreen .public-showroom-contact-actions .global-contact-bar>a,
#showroomProfileScreen .public-showroom-contact-actions .global-contact-bar>button { min-width:0; min-height:38px; padding:6px 7px; border-radius:9px; font-size:11px; line-height:1.2; }
#showroomProfileScreen .public-showroom-contact-actions .global-contact-bar { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0; }
#showroomProfileScreen .public-map-wrap { height:132px; margin:0 11px; border-radius:10px; }
#showroomProfileScreen .public-location-actions { gap:6px; padding:8px 11px 11px; }
#showroomProfileScreen .location-action { min-height:36px; border-radius:9px; font-size:9.5px; }
#showroomProfileScreen .owner-manage-button { width:calc(100% - 22px); min-height:36px; margin:0 11px 11px; border-radius:9px; font-size:9.5px; }
#showroomProfileScreen .public-inventory-heading { margin:14px 2px 8px; }
@media (max-width:360px) {
  #showroomProfileScreen .public-showroom-contact-actions .global-contact-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #showroomProfileScreen .public-showroom-contact-actions .global-contact-bar>:last-child:nth-child(odd) { grid-column:1 / -1; }
}

@media (min-width: 401px) { .showroom-nav-button { width: auto; }.showroom-nav-button span,.showroom-home-button span { display: inline; } .showroom-card-body h2 { font-size: 11px; } }
@media (max-width: 370px) { .city-grid { gap: 6px; }.city-card { height: 115px; }.city-name { font-size: 12px; }.showroom-hero { height: 142px; }.showroom-hero-copy h2 { font-size: 20px; }.showroom-list { gap: 6px; }.showroom-card-body { min-height: 43px; padding: 7px 6px; }.showroom-card-body h2 { font-size: 9px; }.showroom-form-grid, .public-contact-grid, .owner-contact-field, .owner-verification-code { grid-template-columns: 1fr; }.public-info-card.full { grid-column: auto; }.owner-car-grid { grid-template-columns: 1fr 1fr; } }

/* Keep full modal and inventory action surfaces responsive to mouse and touch. */
#showroomVehicleModal .close-modal,
#showroomVehicleModal .showroom-source-button,
#showroomVehicleModal .showroom-vehicle-thumbnails button,
.public-car-card[role="button"] { cursor: pointer; touch-action: manipulation; }
#showroomVehicleModal .close-modal > *,
#showroomVehicleModal .showroom-source-button > *,
#showroomVehicleModal .showroom-vehicle-thumbnails button > * { pointer-events: none; }
#showroomVehicleError { margin: 0; color: #b42318; font-size: 14px; }

.vehicle-detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; font-size: 13px; }
.vehicle-detail-fields dt { color: #52667e; }
.vehicle-detail-fields dd { margin: 0; overflow-wrap: anywhere; }
#vehicleDetailVideo { width: 100%; max-height: 260px; }
#showroomVehicleModal [hidden] { display: none !important; }
.car-card[role="button"] { cursor: pointer; touch-action: manipulation; }

/* Fixed management surfaces: only the sibling content pane owns scrolling. */
.account-content-scroll { display: grid; gap: 16px; }
#myAccountScreen.has-showroom:not([hidden]), #showroomOwnerScreen:not([hidden]) {
  position: fixed; inset: 0 0 88px; z-index: 10;
  width: min(100%, 510px); margin-inline: auto; padding: max(12px, env(safe-area-inset-top)) 14px 0;
  display: flex; flex-direction: column; gap: 12px; background: #fff; overflow: hidden;
}
#myShowroomCardSlot, .owner-add-listing-bar, #showroomOwnerScreen > .showroom-page-header { flex: 0 0 auto; }
#myShowroomCardSlot[hidden] { display: none; }
.my-showroom-card {
  display: flex; align-items: center; gap: 18px; width: 100%; min-height: 170px;
  padding: 20px; border: 1px solid #bad8fa; border-radius: 20px; text-align: start;
  color: #102f53; background: linear-gradient(120deg, #e7f2ff, #f5faff);
  box-shadow: 0 6px 20px rgba(11, 113, 237, .12);
}
.my-showroom-card img { width: 88px; height: 88px; flex: 0 0 auto; border-radius: 16px; object-fit:contain; background: #fff; }
.my-showroom-card > span { display: grid; gap: 7px; min-width: 0; }
.my-showroom-card strong { font-size: 24px; line-height: 1.5; }
.my-showroom-card span span { font-size: 16px; overflow-wrap: anywhere; }
.my-showroom-card small { color: #165ba3; font-size: 14px; }
.my-showroom-card:focus-visible, #ownerAddListing:focus-visible { outline: 3px solid #102f53; outline-offset: -4px; }
.has-showroom .account-content-scroll, .owner-management-scroll {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
  padding: 2px 2px 24px; scrollbar-gutter: stable; scroll-padding-top: 12px;
}
.has-showroom .account-content-scroll { display: flex; flex-direction: column; }
.has-showroom .account-content-scroll > * { flex-shrink: 0; }
.has-showroom .my-account-header { order: 0; }
.has-showroom .my-listings-section { order: 1; }
.has-showroom .my-account-summary { order: 2; }
.has-showroom #recoveryAccountLinks { order: 3; }
.has-showroom #businessProfiles { order: 4; }
.owner-management-scroll { display: block; }
.owner-management-scroll > * { margin-bottom: 14px; }
.owner-add-listing-bar { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#ownerAddListing { width: 100%; min-height: 54px; margin: 0; border-radius: 14px; font-size: 16px; gap: 10px; }
.owner-location-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.owner-location-controls button { min-height: 44px; padding: 8px 12px; border: 1px solid #bad8fa; border-radius: 10px; color: #165ba3; background: #f0f7ff; font-size: 14px; }
body:has(#myAccountScreen.has-showroom:not([hidden])), body:has(#showroomOwnerScreen:not([hidden])) { overflow: hidden; }
body:has(#myAccountScreen.has-showroom:not([hidden])) .bottom-nav,
body:has(#showroomOwnerScreen:not([hidden])) .bottom-nav { position: fixed; width: min(100%, 510px); margin-inline: auto; z-index: 11; }
@media (max-height: 550px) {
  .my-showroom-card { min-height: 130px; padding: 12px; }
  .my-showroom-card img { width: 64px; height: 64px; }
  .my-showroom-card strong { font-size: 20px; }
}

.showroom-directory-city { max-width:100%; min-height:40px; padding:8px 12px; margin:0 0 12px; border:1px solid #dce1e7; border-radius:10px; background:#fff; color:var(--text); font:inherit; }

/* Public showroom directory only — photo-led GOLD feature and two-column cards. */
.app-shell:has(#showroomListScreen:not([hidden])) { padding-inline:0; background:#f7f9fd; }
.app-shell:has(#showroomListScreen:not([hidden])) > .status-bar { position:relative; z-index:6; padding-inline:22px; }
.app-shell:has(#showroomListScreen:not([hidden])) > .top-header { position:absolute; z-index:7; top:38px; left:16px; right:16px; height:48px; }
.app-shell:has(#showroomListScreen:not([hidden])) .top-header .menu-button { visibility:hidden; }
.app-shell:has(#showroomListScreen:not([hidden])) .top-header .notification-button { background:#ffffffd9; border-radius:50%; }
.app-shell:has(#showroomListScreen:not([hidden])) .top-header .brand-logo { content:url('assets/zagros-auto-plus-logo.png'); filter:drop-shadow(0 1px 3px #ffffffa6); }
.app-shell:has(#showroomListScreen:not([hidden])) > .search-row { display:none!important; }
#showroomListScreen { position:relative; padding:0; margin-top:-32px; }
#showroomListScreen > .showroom-page-header { position:absolute; z-index:8; top:40px; left:16px; width:40px; padding:0; margin:0; }
#showroomListScreen > .showroom-page-header > div, #showroomListHome { display:none; }
#showroomListScreen #backToShowroomCities { width:40px; height:40px; min-width:40px; padding:0; border:0; border-radius:50%; background:#ffffffed; color:#172137; font-size:18px; box-shadow:0 4px 16px #1e304d12; }
#showroomListScreen #backToShowroomCities span { display:none; }
html[dir=ltr] #showroomListScreen #backToShowroomCities i { transform:rotate(180deg); }
#showroomListScreen .showroom-gold { position:relative; isolation:isolate; width:100%; min-width:0; min-height:300px; aspect-ratio:1.55; overflow:hidden; border-radius:0 0 22px 22px; background:#e5edf7; color:white; }
#showroomListScreen .showroom-gold-slide { position:absolute; inset:0; width:100%; height:100%; display:block; border:0; padding:0; background:#e5edf7; color:white; text-align:start; touch-action:pan-y; }
#showroomListScreen .showroom-gold-photo { display:block; width:100%; height:100%; object-fit:contain; }
#showroomListScreen .showroom-gold-slide::after { position:absolute; inset:0; content:''; pointer-events:none; background:linear-gradient(0deg,#071222e6 0%,#07122265 35%,transparent 65%),linear-gradient(180deg,#ffffff85,transparent 34%); }
#showroomListScreen .showroom-gold-copy { position:absolute; z-index:1; inset-inline:24px; bottom:52px; display:grid; gap:9px; text-shadow:0 2px 8px #0007; }
#showroomListScreen .showroom-gold-eyebrow { font-size:13px; font-weight:700; letter-spacing:.08em; }
#showroomListScreen .showroom-gold-name { font-size:clamp(26px,6vw,36px); line-height:1.14; font-weight:800; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#showroomListScreen .showroom-gold-meta { font-size:15px; line-height:1.5; }
#showroomListScreen .showroom-gold-badge { position:absolute; z-index:2; inset-inline-start:10px; top:10px; padding:5px 9px; border-radius:20px; background:#e92838; color:#fff5c1; font-size:11px; font-weight:800; box-shadow:0 2px 8px #0002; }
#showroomListScreen .showroom-gold-badge.hero-badge { top:102px; inset-inline-start:24px; background:#eac66b; color:#34270c; }
#showroomListScreen .showroom-gold-arrow { position:absolute; bottom:19px; z-index:3; display:grid; place-items:center; width:34px; height:34px; border:1px solid #fff6; border-radius:50%; color:white; background:#17213780; font-size:25px; line-height:1; }
#showroomListScreen .showroom-gold-arrow.previous { left:24px; }
#showroomListScreen .showroom-gold-arrow.next { right:24px; }
#showroomListScreen .showroom-gold-dots { position:absolute; z-index:3; bottom:28px; left:70px; right:70px; display:flex; justify-content:center; gap:7px; }
#showroomListScreen .showroom-gold-dots button { width:9px; height:9px; border:0; border-radius:50%; padding:0; background:#ffffff7a; }
#showroomListScreen .showroom-gold-dots button[aria-current=true] { background:#f8d57c; }
#showroomListScreen .showroom-gold.is-empty { min-height:240px; aspect-ratio:auto; padding:126px 24px 35px; background:linear-gradient(135deg,#dce8f7,#f8fbff 65%,#f4e9cf); color:#24374e; }
#showroomListScreen .showroom-gold.is-empty .showroom-gold-badge { top:102px; inset-inline-start:24px; background:#eac66b; color:#34270c; }
#showroomListScreen .showroom-gold.is-empty h2 { margin:12px 0 6px; font-size:25px; }
#showroomListScreen .showroom-gold.is-empty p { margin:0; font-size:14px; line-height:1.6; color:#52657b; }
#showroomListScreen .showroom-gold-badge.listing-promotion-badge { inline-size:58px; block-size:66px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:transparent; font-size:0; line-height:0; }
#showroomListScreen .showroom-gold-badge.listing-promotion-badge .listing-promotion-logo { inline-size:100%; block-size:100%; }
#showroomListScreen .showroom-directory-content { position:relative; z-index:2; margin-top:-16px; padding:18px 16px 16px; border-radius:24px 24px 0 0; background:#f7f9fd; }
#showroomListScreen .showroom-search { display:flex; align-items:center; gap:12px; padding:0 14px; height:49px; border:1px solid #eaf0f9; border-radius:16px; color:#8090a8; background:#edf2fa; box-shadow:inset 0 1px 4px #8ea1c60b; }
#showroomListScreen .showroom-search i { font-size:20px; }
#showroomListScreen .showroom-search input { width:100%; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:#172137; font:inherit; font-size:14px; }
#showroomListScreen .showroom-search:focus-within { outline:2px solid #347ce8; outline-offset:2px; }
#showroomListScreen .showroom-city-filters { display:flex; gap:8px; overflow:auto; scrollbar-width:none; margin:12px -16px 18px; padding:0 16px 4px; }
#showroomListScreen .showroom-directory-city { flex:0 0 auto; max-width:180px; min-height:39px; margin:0; padding:8px 11px; border:1px solid #1b75f4; border-radius:12px; background:#1671f7; box-shadow:0 4px 12px #1671f730; color:white; font-family:inherit; font-size:13px; font-weight:600; }
#showroomListScreen .showroom-directory-city option { color:#172137; background:#fff; }
#showroomCityChips { display:flex; gap:8px; }
#showroomListScreen .showroom-city-chip { flex:0 0 auto; white-space:nowrap; padding:8px 14px; border:1px solid #e3e8f2; border-radius:12px; background:#f1f5fb; color:#29394f; font-size:13px; }
#showroomListScreen .showroom-city-chip[aria-pressed=true] { background:#e1edff; border-color:#367bef; color:#145cca; }
#showroomListScreen .showroom-directory-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 14px; }
#showroomListScreen .showroom-list-subtitle { margin:0; color:#172137; font-size:14px; font-weight:750; }
#showroomListScreen .showroom-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
#showroomListScreen .showroom-card { border:0; border-radius:16px; background:white; box-shadow:0 5px 16px #1e3b6a0b; cursor:pointer; }
#showroomListScreen .showroom-card:hover { box-shadow:0 7px 20px #1e3b6a20; }
#showroomListScreen .showroom-card-gold { box-shadow:0 0 0 1px #d9b65155,0 5px 16px #1e3b6a0b; }
#showroomListScreen .showroom-card-image { aspect-ratio:1.65; }
#showroomListScreen .showroom-favorite { position:absolute; z-index:3; inset-inline-end:10px; top:10px; display:grid; place-items:center; width:33px; height:33px; padding:0; border:0; border-radius:50%; background:#fff; color:#172137; font-size:27px; line-height:1; box-shadow:0 2px 8px #1e304d14; }
#showroomListScreen .showroom-favorite[aria-pressed=true] { color:#e42745; }
#showroomListScreen .showroom-card-body { display:flex; align-items:center; gap:9px; padding:12px 10px 14px; min-height:92px; }
#showroomListScreen .showroom-avatar { width:42px; height:42px; flex:0 0 42px; object-fit:contain; border-radius:50%; background:#eef1f7; }
#showroomListScreen .showroom-card-copy { min-width:0; flex:1; }
#showroomListScreen .showroom-card-body h2 { font-size:15px; line-height:1.3; font-weight:750; }
#showroomListScreen .showroom-card-city { display:block; margin:4px 0; color:#788398; font-size:12px; }
#showroomListScreen .showroom-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px; margin:4px 0 0; font-size:12px; color:#27384f; }
#showroomListScreen .showroom-rating { color:#a57817; }
#showroomListScreen .showroom-intro-actions { align-items:start; margin-top:18px; }
#showroomListScreen .showroom-empty-state { grid-column:1/-1; margin:10px 0; font-size:14px; color:#66788e; }
#showroomListScreen button:focus-visible,#showroomListScreen .showroom-card:focus-visible { outline:3px solid #3680f4; outline-offset:2px; }
@media(max-width:390px) {
 #showroomListScreen .showroom-directory-content { padding-inline:12px; }
 #showroomListScreen .showroom-list { gap:10px; }
 #showroomListScreen .showroom-card-body { gap:6px; padding:10px 8px; }
 #showroomListScreen .showroom-avatar { width:30px; height:30px; flex-basis:30px; }
 #showroomListScreen .showroom-card-body h2 { font-size:14px; }
 #showroomListScreen .showroom-gold-name { font-size:26px; }
}
@media(prefers-reduced-motion:no-preference) {
 #showroomListScreen .showroom-gold-photo { animation:showroom-photo-reveal .45s ease-out; }
 @keyframes showroom-photo-reveal { from { opacity:.55; } to { opacity:1; } }
}

/* Compact public showroom inventory rows without changing the media-left rail. */
.public-car-grid { gap:6px; }
.public-car-card {
  grid-template-columns:minmax(92px,39%) minmax(0,1fr);
  border-radius:11px;
}
.public-car-media { min-height:98px; }
.public-car-body {
  gap:3px;
  padding:7px 8px;
}
.public-car-body > .listing-promotion-badge {
  margin-bottom:0;
  padding:0;
  font-size:0;
}
.public-car-body h3 { font-size:12px; line-height:1.22; }
.public-car-body strong { font-size:12px; line-height:1.2; }
.public-car-body p { font-size:9px; line-height:1.25; }
.public-car-view {
  min-height:28px;
  padding:2px 0;
  font-size:9px;
}
.showroom-car-status {
  top:5px;
  left:5px;
  padding:3px 5px;
}
.public-car-favorite {
  top:5px;
  right:5px;
  width:30px;
  height:30px;
  font-size:14px;
}
.public-car-media-count {
  right:5px;
  bottom:5px;
  padding:2px 5px;
}