/* الورشة الإسلامية للنجارة — request questionnaire (lead.js). Prefix: ld- */

.ld{width:min(640px,100%);max-width:100%;max-height:100%;margin:auto;padding:0;border:0;background:transparent;color:var(--oud);overflow:visible}
.ld::backdrop{background:rgba(84,45,41,.55)}
html.ld-open{overflow:hidden}
.ld__panel{position:relative;display:flex;flex-direction:column;max-height:min(760px,calc(100dvh - 32px));background:var(--canvas);box-shadow:inset 0 0 0 var(--hairline) var(--sawdust),0 30px 60px -20px rgba(0,0,0,.45);direction:rtl}
.ld__panel::after{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(to left,var(--machine-green) 0 38%,var(--shelf-green) 38% 64%,var(--sawdust) 64% 84%,var(--wood) 84% 100%)}

.ld__top{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4) 0}
.ld__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);padding:0;background:transparent;border:0;cursor:pointer;color:var(--oud)}
.ld__icon:hover{background:var(--sawdust-light)}
.ld__icon:focus-visible{outline:2px solid var(--oud);outline-offset:2px}
.ld__back .ws-icon{transform:scaleX(-1)}   /* the arrow points left (next); back points right in RTL */
.ld__back[hidden]{display:inline-flex;visibility:hidden}
.ld__progress{flex:1;height:6px;background:var(--sawdust-light);box-shadow:inset 0 0 0 var(--hairline) var(--sawdust)}
.ld__progress span{display:block;height:100%;width:0;margin-inline-start:0;background:var(--machine-green);transition:width .25s ease}

.ld__body{overflow-y:auto;padding:var(--space-4) var(--space-8) var(--space-8)}
.ld__count{margin:0;font:600 13px/1.6 var(--font-body);color:var(--ink-muted)}
.ld__q{outline:none;margin:var(--space-1) 0 0;font:400 32px/1.25 var(--font-display);color:var(--oud)}
.ld__hint{margin:var(--space-1) 0 0;font:400 15px/1.6 var(--font-body);color:var(--ink-muted)}
.ld__lead{margin:var(--space-3) 0 0;font:500 17px/1.8 var(--font-body)}

.ld__opts{display:grid;gap:var(--space-2);margin-top:var(--space-6)}
.ld__opt{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:52px;padding:var(--space-3) var(--space-4);text-align:right;background:var(--paper);color:var(--oud);font:500 17px/1.5 var(--font-body);border:0;box-shadow:inset 0 0 0 1.5px var(--sawdust);cursor:pointer;transition:box-shadow .12s,background .12s}
.ld__opt:hover{box-shadow:inset 0 0 0 1.5px var(--wood)}
.ld__opt:focus-visible{outline:2px solid var(--oud);outline-offset:2px}
.ld__opt[aria-checked="true"]{background:var(--shelf-light);box-shadow:inset 0 0 0 2px var(--machine-green),inset -5px 0 0 var(--machine-green)}
.ld__mark{flex:none;width:20px;height:20px;box-shadow:inset 0 0 0 1.5px var(--wood);background:var(--canvas)}
.ld__opt[role="radio"] .ld__mark{border-radius:50%}
.ld__opt[aria-checked="true"] .ld__mark{background:var(--machine-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F1E4' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
.ld__opt[role="radio"][aria-checked="true"] .ld__mark{background-image:none;box-shadow:inset 0 0 0 6px var(--canvas)}

.ld__next{width:100%;margin-top:var(--space-6)}
.ld__text{margin-top:var(--space-6);min-height:120px;resize:vertical}
.ld__form{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.ld__form .ld__next{margin-top:var(--space-2)}
/* Phone: country picker + number, always left to right with Latin digits */
.ld__phone{display:flex;gap:var(--space-2);direction:ltr}
.ld__phone .ws-input{flex:1;min-width:0;text-align:left;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ld__cc{position:relative;flex:none;display:flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-8) 0 var(--space-3);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23542D29' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") right 12px center/12px no-repeat;border:1.5px solid var(--wood);cursor:pointer}
.ld__cc:hover,.ld__cc:focus-within{border-color:var(--oud)}
.ld__cc:focus-within{outline:2px solid var(--oud);outline-offset:3px}
.ld__cc-show{font:600 16px/1 var(--font-body);white-space:nowrap;direction:ltr}
.ld__cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.ld__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.ld__fine{margin:0;font:400 13px/1.6 var(--font-body);color:var(--ink-muted)}
.ld__fail{display:grid;gap:var(--space-3);padding:var(--space-4);background:var(--sawdust-light);box-shadow:inset 0 0 0 1.5px var(--rust);font:500 15px/1.6 var(--font-body)}
.ld__fail p{margin:0;color:var(--rust)}

.ld__done{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding-top:var(--space-4)}
.ld__tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--shelf-green)}
.ld__tick .ws-icon{width:30px;height:30px;stroke-width:2.25}
.ld__done .ld__wa{width:100%;margin:var(--space-4) 0 var(--space-1)}
.ld__wa .ws-icon{stroke:var(--paper)}

@media (max-width:600px){
  .ld{width:100%;height:100%;max-height:100dvh}
  .ld__panel{height:100dvh;max-height:none}
  .ld__body{padding:var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom))}
  .ld__q{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.ld__progress span{transition:none}}