/* DalilDigital forms: submit-product page, contact popup, "describe what you couldn't find" popup.
   Source: scripts/templates/forms.css (copied to assets/forms.css by scripts/build_static_pages.py).
   Uses only the tokens of assets/dd-site.css (:root variables); no new colors, fonts or radii. Logical properties only (RTL/LTR). */

/* ---- form card (same panel look as .lp-card / .news) ---- */
.form-card{max-width:880px;margin-inline:auto;padding:clamp(1.25rem,4vw,3rem);background:var(--paper);border:1px solid var(--line);border-radius:2rem;box-shadow:var(--shadow-soft)}
.req-note{margin-bottom:1.75rem;color:var(--ink-3);font-size:.875rem}
.fs{min-width:0;margin:0 0 2.25rem;padding:0;border:0}
.fs:last-of-type{margin-bottom:0}
.fs>legend{float:none;width:100%;margin:0 0 1rem;padding:0}
.fs .lg{display:flex;align-items:center;gap:.75rem;font-family:var(--font-heading);font-weight:600;font-size:1.1875rem;line-height:1.3}
html[lang="ar"] .fs .lg{font-family:var(--font-heading-ar)}
.step-n{flex:none;display:grid;place-items:center;width:2rem;aspect-ratio:1;border-radius:50%;background:var(--gradient-brand);color:#fff;font-size:.875rem;font-weight:700}
.fs-intro{margin:0 0 1rem;color:var(--ink-2);font-size:.9375rem;line-height:1.7}

/* ---- fields ---- */
/* align-content:start keeps label/control/hint at natural height when a neighbour in the same grid row is taller. Without it the stretched
   .fld spreads the extra height over its auto rows, so the control sits lower and becomes taller than its neighbour's */
.fld{display:grid;align-content:start;gap:.4rem;min-width:0;margin-bottom:1rem}
.fld>label,.chk label{font-weight:600;font-size:.9375rem;line-height:1.5}
.req{color:var(--berry-strong)}
.in{display:block;width:100%;min-height:44px;padding:.75rem 1.1rem;font:inherit;font-size:1rem;line-height:1.5;color:var(--ink);background:var(--paper);border:1.5px solid rgba(36,27,27,.25);border-radius:1rem}
textarea.in{min-height:5rem;resize:vertical}
select.in{min-height:50px;padding-inline-end:.75rem;text-overflow:ellipsis}
.in::placeholder{color:var(--ink-3);opacity:1}
.in:focus-visible{outline:2px solid var(--indigo-strong);outline-offset:2px;border-radius:1rem}
.in[aria-invalid="true"]{border-color:var(--berry-strong)}
/* links and e-mail addresses are always typed left-to-right; in RTL pages they stay right-aligned */
.in[type="url"],.in[type="email"]{direction:ltr}
[dir="rtl"] .in[type="url"],[dir="rtl"] .in[type="email"]{text-align:right}
.in:disabled{background:var(--bg-2);color:var(--ink-3)}
.fmeta{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.hint{color:var(--ink-3);font-size:.8125rem;line-height:1.6}
.count{flex:none;color:var(--ink-3);font-size:.8125rem;font-variant-numeric:tabular-nums}
.ferr{color:var(--berry-strong);font-size:.875rem;font-weight:600;line-height:1.5}
.ferr:empty{display:none}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:0 1.25rem}
.fgrid .fld--full{grid-column:1/-1}
.fgrid--media{align-items:stretch;gap:1.25rem}
@media (max-width:767px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- uploads ---- */
.fileset{min-width:0;padding:1rem 1.1rem;background:var(--bg-1);border:1px dashed rgba(36,27,27,.25);border-radius:var(--radius-card)}
.in--file{padding:.5rem;background:var(--paper);cursor:pointer}
.in--file::file-selector-button{margin-inline-end:.75rem;padding:.5rem 1.1rem;font-family:var(--font-heading);font-weight:600;font-size:.8125rem;color:var(--ink);background:transparent;border:1.5px solid rgba(36,27,27,.28);border-radius:var(--radius-pill);cursor:pointer}
html[lang="ar"] .in--file::file-selector-button{font-family:var(--font-heading-ar)}
.fp{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.5rem}
.fp-img{position:relative;display:block;flex:none;width:150px;max-width:100%;aspect-ratio:5/2;overflow:hidden;background:var(--paper);border:1px solid var(--line-soft);border-radius:.75rem}
.fp--image .fp-img{width:225px;aspect-ratio:16/9;background:var(--bg-2);border-radius:var(--radius-card)}
.fp-img img{position:absolute;inset:.25rem;width:calc(100% - .5rem);height:calc(100% - .5rem);max-width:none;object-fit:contain}
.fp-name{flex:1 1 10rem;min-width:0;color:var(--ink-2);font-size:.8125rem;overflow-wrap:anywhere}
/* kept file after Back to edit (thumbnail + name + Replace / Remove); same look as .fp, plain colours (not an error state) */
.fk{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.fk[hidden]{display:none}
.sp-lost{margin:.25rem 0 .75rem;color:var(--ink-2)}
/* ---- one image, upload from the computer only (a single file input per fieldset) ---- */
.mset{margin:0}
.mset>legend{padding-inline:.4rem;font-weight:600;font-size:.9375rem;line-height:1.5}


/* ---- captcha ---- */
.cap{margin-bottom:1.25rem;padding:1rem 1.1rem;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:1rem}
.cap .fld{margin-bottom:0}
.cap-q-label{font-weight:600}
.cap-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.cap-in{width:8rem;flex:none;text-align:center}
.cap-row .pill{flex:none;min-height:44px}
.cap--ts:focus{outline:none}
.cap--ts:focus-visible{outline:2px solid var(--indigo-strong);outline-offset:2px}
.cap-ts{min-height:65px;margin-top:.5rem}

/* ---- consent, actions, summary, success ---- */
.chk{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.25rem}
.chk input{flex:none;width:1.4rem;height:1.4rem;margin:.15rem 0 0;accent-color:var(--indigo-strong)}
.chk input[aria-invalid="true"]{outline:2px solid var(--berry-strong);outline-offset:2px}
.chk label{font-weight:500;color:var(--ink-2)}
.factions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.25rem}
.factions--c{justify-content:center}
.send-err{flex:1 1 100%;margin:0}
.fsum{margin-bottom:1.5rem;padding:1rem 1.25rem;background:var(--paper);border:1.5px solid var(--berry-strong);border-radius:var(--radius-card)}
.fsum p{font-weight:700;color:var(--berry-strong)}
.fsum ul{display:grid;gap:.25rem;margin-top:.5rem;padding-inline-start:1.25rem;list-style:disc}
.fsum a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fsum a:hover{color:var(--berry-strong)}
.form-ok{display:grid;justify-items:center;gap:.9rem;padding:clamp(1.25rem,5vw,2.5rem) .5rem;text-align:center}
.form-ok:focus{outline:none}
.ok-ic{display:grid;place-items:center;width:64px;aspect-ratio:1;border-radius:50%;background:var(--gradient-brand);color:#fff}
.ok-ic .i{width:50%;height:50%}
.ok-h{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em}
.form-ok p{color:var(--ink-2);max-width:48ch}
.demo-note{color:var(--ink-3);font-size:.8125rem}
.ns{margin-top:1.5rem;color:var(--ink-2)}
.ns a{color:var(--indigo-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:519px){.factions .pill{flex:1 1 100%}.cap-in{width:100%;flex:1 1 100%}}

/* ---- "missing" block with two actions ---- */
.missing-act{display:flex;flex-wrap:wrap;gap:.6rem}
.missing--cat{margin-top:clamp(2rem,4vw,3rem)}

/* ---- popups (native <dialog>) ---- */
.dd-modal{box-sizing:border-box;padding:0;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);width:min(640px,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain}
.dd-modal::backdrop{background:rgba(36,27,27,.5)}
.dd-modal__in{padding:clamp(1.25rem,4vw,2rem)}
.dd-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.dd-modal__head h2{font-size:clamp(1.375rem,3vw,1.75rem);letter-spacing:-.02em;line-height:1.25}
.dd-modal__head h2:focus{outline:none}
.dd-modal__intro{margin-bottom:1.25rem;color:var(--ink-2);line-height:1.7}
.dd-close{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;color:var(--ink);background:transparent;border:1.5px solid var(--line);border-radius:50%;cursor:pointer;transition:border-color .2s,color .2s}
.dd-close:hover{border-color:var(--berry-strong);color:var(--berry-strong)}
.dd-form .fgrid{gap:0 1rem}
.dd-form .factions{margin-top:1rem}
html.dd-lock{overflow:hidden;padding-inline-end:var(--sbw,0px)}
@keyframes dd-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.dd-modal[open]{animation:dd-pop .2s ease-out}}
@media (max-width:600px){
  .dd-modal{inset:auto 0 0 0;margin:0;width:100%;max-height:92dvh;border-radius:var(--radius-card) var(--radius-card) 0 0;border-inline:0;border-block-end:0}
}

/* ---- Submit-product hero: logo icon, title and intro centered ---- */
.page-hero--center .ph-grid{flex-direction:column;justify-content:center;gap:1rem;text-align:center}
.page-hero--center .ph-ic{width:clamp(64px,8vw,84px);height:clamp(64px,8vw,84px)}
.page-hero--center .ph-title{flex:none;width:100%}
.page-hero--center .ph-title .eyebrow{justify-content:center}
.page-hero--center .ph-sum{margin-inline:auto;text-align:center}

/* ---- task 10: character counter states and progress line */
.count[data-state="ok"]{color:var(--ink);font-weight:700}
.count[data-state="bad"]{color:var(--berry-strong);font-weight:700}
.sp-prog{margin:0 0 1rem;font-weight:600}
.hint-ex{margin:.35rem 0 0;padding:.5rem .75rem;background:var(--bg-2);border:1px solid var(--line, #e3e3e3);border-radius:.5rem;font:.8125rem/1.7 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-2, var(--ink));white-space:pre-wrap;overflow-wrap:anywhere}
.mset > .hint{margin:.25rem 0 .5rem}
textarea.in{resize:vertical;min-height:5rem}

/* Back to edit notice (the preview itself is the real listing page, see listing.css .pv-bar) */
.sp-restored{margin:0 0 1rem;padding:.6rem .9rem;border-inline-start:3px solid var(--line);background:var(--bg-2,#f6f6f6);border-radius:.5rem}
/* Key features label + example: plain, like the other fields (no shading, no accent colour that could look like a validation error) */
.hint-box{margin:0 0 .5rem}
.hint-box label{display:block;margin:0 0 .4rem;font-weight:600;font-size:.9375rem;line-height:1.5}
.hint-box .hint-ex{margin:0}