/* Shared components of the PHP site (loaded on every public page after site-ui.css).
Everything here reuses the prototype design tokens (--surface, --ui-line, --accent…), so light/dark/palette
settings apply automatically. */
/* ---------- Skeleton loading: same outline as the shared ad card (components/ad-card-skeleton) ----------
The placeholder uses the real card classes, so only the grey shapes are styled here. .sk-text is one line of the
surrounding text size (the ZWSP gives it the line height), with a bar a little shorter than the line inside. */
.sk{display:block;border-radius:8px;background:color-mix(in srgb,var(--text-muted) 14%,var(--surface-soft));position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 55%,transparent),transparent);animation:site-shimmer 1.3s ease-in-out infinite}
@keyframes site-shimmer{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}
.sk-text{display:flex;align-items:center;white-space:nowrap}
.sk-text::before{content:"\200b"}
.sk-text>.sk{flex:none;width:100%;height:.8em;border-radius:6px}
.sk-text>.sk-wide{width:78%}
.sk-text>.sk-short{width:55%}
.product-photo-skeleton{position:absolute;inset:0;border-radius:inherit}
.product-photo:not([aria-busy="true"])>.product-photo-skeleton{display:none}
.is-skeleton{pointer-events:none}
.is-skeleton .sk-narrow{display:none}
@media (max-width:700px){.ad-card.is-skeleton .sk-narrow{display:flex}}
.is-skeleton .card-meta>.sk{border-radius:50%}
.is-skeleton .card-meta>.sk-text{flex:1 1 30%}
[data-ad-feed][aria-busy="true"]{align-content:start}
/* Map list row: the thumbnail is an in the real row (76x66, 66x62 on tiny screens, see reference-pages.css). */
.is-skeleton .sk-thumb{flex:none;width:76px;height:66px;border-radius:9px}
@media (max-width:380px){.is-skeleton .sk-thumb{width:66px;height:62px}}
.is-skeleton .map-row-detail{width:84px;height:28px;border:0}
.is-skeleton .map-row-footer>.sk-text{flex:1}
.is-skeleton .card-media{background:none}
.is-skeleton .sk-media{position:absolute;inset:0;border-radius:inherit}
.sk-chip{width:72px;height:22px;border-radius:999px}
.is-skeleton .card-open-arrow{background:none;border:0;box-shadow:none}
.is-skeleton .card-open-arrow .sk{width:100%;height:100%;border-radius:50%}
.is-skeleton .card-price>.sk-text{flex:1;min-width:0}
/* Photo area while a lazy image loads, and ads without a photo. (components/picture) must not take part in layout. */
picture{display:contents}
.ad-card .card-media,.list-card .card-media{background:color-mix(in srgb,var(--text-muted) 10%,var(--surface-soft))}
.card-media-empty{display:grid;place-items:center;width:100%;height:100%;min-height:120px;color:var(--text-muted)}
.card-media-empty .icon{width:38px;height:38px;opacity:.55}
.latest-results[aria-busy="true"] .latest-more-button{pointer-events:none}
/* "نمایش آگهیهای بیشتر" is a link to the next page on lists (works without JavaScript), a button on the home page. */
a.latest-more-button{text-decoration:none}
.latest-more-button[aria-disabled="true"]{pointer-events:none;opacity:.7}
/* ---------- Content pages (CMS) ---------- */
.site-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:13px;color:var(--text-muted)}
.site-breadcrumb a{color:inherit}
.site-breadcrumb a:hover{color:var(--accent)}
.cms-content{max-width:920px;padding:32px;line-height:2.3;font-size:15px}
.cms-content>:first-child{margin-top:0}
.cms-content h2{margin:30px 0 12px;font-size:20px;line-height:1.7}
.cms-content h3{margin:22px 0 8px;font-size:16px;line-height:1.7}
.cms-content p{margin:0 0 14px}
.cms-content ul,.cms-content ol{margin:0 0 16px;padding-inline-start:24px;display:grid;gap:6px}
.cms-content li::marker{color:var(--accent)}
.cms-content a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.cms-content strong{color:var(--text-main)}
@media (max-width:700px){.cms-content{padding:20px;font-size:14px}.cms-content h2{font-size:18px}}
/* ---------- Dialog menus (انتخاب شهر; the «بیشتر» menu is .site-menu-links in site-ui.css) ---------- */
.site-city-list button{display:flex;gap:12px;align-items:center;padding:13px;border-radius:10px;background:var(--surface-soft);color:inherit;text-align:right}
.site-city-list button:hover{background:var(--accent-pale);color:var(--accent-strong)}
.site-city-list button[aria-pressed="true"]{background:var(--accent-pale);color:var(--accent-strong);font-weight:700}
.site-city-list .icon{width:22px;height:22px}
/* Form errors next to a field (login, sign-up and later every form). */
.app-field-error{display:block;margin-top:2px;font-size:11px;line-height:1.8;color:#a82748}
.app-field input[aria-invalid="true"],.app-check input[aria-invalid="true"]{border-color:#c23a4b;outline-color:#c23a4b}
/* User panel additions (prototype classes cover the rest). */
.profile-photo-pick:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.account-sidebar-logout{display:contents}
.account-sidebar-logout .app-button{width:100%}
.service-session form{display:contents}
.site-confirm p{margin:0 0 18px;line-height:2}
.site-confirm .app-form-actions{display:flex;gap:10px;justify-content:flex-end}
/* Header/nav links rendered as where the prototype used