/* Arzaq / أرزاق — extra styles for home additions, static pages and post-ad tweaks. Load after styles.css. */

/* bilingual blocks (static pages): show only the active language */
html[lang="en"] .l-ar { display: none !important; }
html:not([lang="en"]) .l-en { display: none !important; }

/* home */
.section-more { display: flex; justify-content: center; margin-block-start: 28px; color: var(--text-2); }
.foot-legal a { text-decoration: underline; text-decoration-color: rgba(210, 187, 138, .5); text-underline-offset: 4px; }
.foot-legal a:hover { color: var(--on-panel); }
.chip-soft { display: inline-flex; align-items: center; }

/* static pages */
.prose { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; color: var(--text-2); font-size: 1.04rem; }
.prose.wide { max-width: 920px; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-block-start: 14px; }
.prose a { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.prose ul { list-style: disc; padding-inline-start: 1.4em; display: grid; gap: 6px; }
.prose section { display: grid; gap: 10px; }
.prose .l-ar, .prose .l-en { display: grid; gap: 10px; }
html[lang="en"] .prose .l-ar, html:not([lang="en"]) .prose .l-en { display: none !important; }
.legal-note { margin-block-start: 0; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block-start: 10px; }
.pg-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-grid .tip .tip-ico .i { width: 22px; height: 22px; }
.pg-lead { max-width: 960px; margin-inline: auto; display: grid; gap: 12px; justify-items: start; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--panel); color: var(--on-panel); position: relative; overflow: hidden; }
.pg-lead h2 { color: var(--on-panel); font-size: clamp(1.7rem, 4vw, 2.4rem); position: relative; }
.pg-lead p { color: var(--on-panel-2); position: relative; font-size: 1.08rem; }
.pg-lead .star-icon { position: relative; }
.two-col { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist { display: grid; gap: 12px; }
.checklist li { position: relative; padding-inline-start: 34px; color: var(--text-2); }
.checklist li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .45em; width: 20px; height: 20px; background: var(--accent-2); -webkit-mask: var(--m-star) center / contain no-repeat; mask: var(--m-star) center / contain no-repeat; }

/* FAQ accordion */
.faq { display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-item[open] { border-color: var(--gold); box-shadow: var(--shadow); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; cursor: pointer; font-weight: 600; color: var(--text); list-style: none; min-height: 56px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--accent-2); -webkit-mask: var(--m-chev) center / contain no-repeat; mask: var(--m-chev) center / contain no-repeat; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-a { padding: 0 20px 18px; color: var(--text-2); }
.faq-a a { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* contact */
.contact-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.contact-card form { display: grid; gap: 18px; }
.contact-card textarea { width: 100%; }
.contact-info { display: grid; gap: 14px; padding: 6px 4px; }
.contact-info h2 { font-size: 1.6rem; }
.contact-info ul { display: grid; gap: 16px; }
.contact-info li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-2); }
.contact-info li .i { width: 22px; height: 22px; color: var(--accent-2); margin-block-start: 4px; flex: none; }
.contact-info li div { display: grid; gap: 2px; }
.contact-info strong { color: var(--text); }
.contact-info a { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* 404 */
.nf { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; text-align: center; padding-block: 10px; }
.nf .star-icon { width: 96px; height: 96px; }
.nf-code { font-family: var(--font-display); font-size: clamp(3.4rem, 10vw, 6rem); line-height: 1; color: var(--accent); }
.nf h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.nf p { color: var(--text-2); max-width: 34em; }
.nf > * { max-width: 100%; }
.nf-search { display: flex; gap: 10px; width: min(520px, 100%); }
.nf-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.nf .cta-actions { justify-content: center; }

/* post-ad additions */
.err-summary.show { display: flex; }
.terms-link { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.thumb.is-busy { display: grid; place-items: center; background: var(--gold-soft); min-height: 90px; color: var(--muted); font-size: .85rem; }