/* Brand colours and layout follow the approved El Fouad form. */
:root { color-scheme: light dark; background: light-dark(#f3f5fc, #101428); }
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 16px; }
main { max-width: 860px; margin: 0 auto; }
button, input, textarea { font: inherit; }
button, label.cursor-interaction, input[type="radio"] { cursor: pointer; }
button:disabled, input:disabled, textarea:disabled { cursor: default; }
button:disabled { opacity: .75; }
textarea:disabled { opacity: .85; }
@media (max-width: 500px) { body { padding: 8px; } }
#workshop-feedback-concept{--wf-bg:light-dark(#f3f5fc,#101428);--wf-paper:light-dark(#fff,#1a2038);--wf-text:light-dark(#202951,#f1f3fc);--wf-muted:light-dark(#616982,#bac2dc);--wf-line:light-dark(#dfe4f1,#3b4465);--wf-accent:light-dark(#2b3990,#b9c3ff);--wf-onaccent:light-dark(#fff,#172157);--wf-soft:light-dark(#eef1ff,#293258);--wf-blue:#2b3990;--wf-gold:#d6b779;--wf-white:#fff;--wf-shadow:light-dark(#2b399014,#00000024);font:15px/1.75 Helvetica,Tahoma,Arial,sans-serif;color:var(--wf-text);position:relative;width:100%}
    #workshop-feedback-concept *{box-sizing:border-box}
    #workshop-feedback-concept [hidden]{display:none!important}
    #workshop-feedback-concept .wf-stage{background:var(--wf-bg);padding:18px;border-radius:18px}
    #workshop-feedback-concept .wf-paper{background:var(--wf-paper);border:1px solid var(--wf-line);border-radius:14px;overflow:clip}
    #workshop-feedback-concept .wf-header{border-top:5px solid var(--wf-gold);padding:24px 26px 26px;background:var(--wf-blue);color:var(--wf-white);position:relative;isolation:isolate;overflow:hidden}
    #workshop-feedback-concept .wf-header:after{content:'';position:absolute;inset-inline-end:-75px;bottom:-150px;width:260px;height:260px;border:40px solid #ffffff08;border-radius:50%;z-index:-1;pointer-events:none}
    #workshop-feedback-concept .wf-brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-inline-end:0;margin-bottom:20px}
    #workshop-feedback-concept .wf-logo-plate{background:var(--wf-white);border-radius:8px;padding:9px 13px;width:210px;max-width:100%}
    #workshop-feedback-concept .wf-logo{display:block;width:100%;height:auto}
    #workshop-feedback-concept .wf-topline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:#ffffffd9}
    #workshop-feedback-concept .wf-badge{background:var(--wf-gold);color:var(--wf-blue);padding:3px 11px;border-radius:20px}
    #workshop-feedback-concept h1{font-size:24px;font-weight:500;line-height:1.5;margin:0 0 8px}
    #workshop-feedback-concept .wf-title{font-size:18px;line-height:1.6;font-weight:500;margin:0 0 12px;direction:ltr;text-align:start;color:var(--wf-gold)}
    #workshop-feedback-concept[dir="rtl"] .wf-title{text-align:right}
    #workshop-feedback-concept .wf-intro{margin:0;font-size:14px;color:#ffffffe6}
    #workshop-feedback-concept .wf-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:#ffffffd9}
    #workshop-feedback-concept .wf-meta span+span:before{content:'·';padding-inline-end:10px}
    #workshop-feedback-concept .wf-progress{border-top:1px solid var(--wf-line);border-bottom:1px solid var(--wf-line);padding:12px 26px;background:var(--wf-soft);display:flex;align-items:center;gap:20px;justify-content:space-between}
    #workshop-feedback-concept .wf-count{font-size:12px;color:var(--wf-muted)}
    #workshop-feedback-concept .wf-track{height:4px;max-width:150px;min-width:65px;flex:1;border-radius:5px;background:var(--wf-line);overflow:hidden}
    #workshop-feedback-concept .wf-fill{height:100%;background:var(--wf-accent);width:0;transition:width 400ms cubic-bezier(.2,.7,.2,1)}
    #workshop-feedback-concept .wf-content{padding:8px 26px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
    #workshop-feedback-concept .wf-section{margin:0;padding:20px 0;border:0;border-bottom:1px solid var(--wf-line);min-width:0;animation:wf-enter 550ms cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--wf-order,0)*65ms)}
    #workshop-feedback-concept .wf-section:nth-child(n+5){border-bottom:0}
    @media(min-width:621px){#workshop-feedback-concept .wf-section legend,#workshop-feedback-concept .wf-question-label{min-height:53px}}
    #workshop-feedback-concept legend{float:inline-start;width:100%;padding:0;margin:0 0 13px;font-size:15px;font-weight:500}
    #workshop-feedback-concept .wf-question-label{display:block;margin-bottom:10px;font-weight:500}
    #workshop-feedback-concept .wf-number{color:var(--wf-accent);font-weight:500;margin-inline-end:6px}
    #workshop-feedback-concept .wf-optional{font-size:12px;color:var(--wf-muted);font-weight:400}
    #workshop-feedback-concept .wf-rating{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;clear:both}
    #workshop-feedback-concept .wf-rate{border:1px solid var(--wf-line);border-radius:9px;padding:10px 3px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--wf-text);font-size:16px;background:var(--wf-paper);transition:transform 200ms,border-color 200ms,background-color 200ms,box-shadow 200ms}
    #workshop-feedback-concept .wf-rate:hover{transform:translateY(-3px);border-color:var(--wf-accent);box-shadow:0 5px 12px var(--wf-shadow)}
    #workshop-feedback-concept .wf-rate:has(input:checked){background:var(--wf-gold);border-color:var(--wf-gold);color:var(--wf-blue);animation:wf-select 330ms ease-out}
    #workshop-feedback-concept .wf-rate:has(input:checked) input{accent-color:var(--wf-blue)}
    #workshop-feedback-concept input[type="radio"]{accent-color:var(--wf-accent);width:17px;height:17px;margin:0}
    #workshop-feedback-concept .wf-endpoints{display:flex;justify-content:space-between;gap:20px;margin-top:8px;font-size:12px;color:var(--wf-muted)}
    #workshop-feedback-concept .wf-endpoints span{max-width:46%}
    #workshop-feedback-concept .wf-endpoints span:last-child{text-align:end}
    #workshop-feedback-concept textarea{font:inherit;font-size:14px;background:var(--wf-paper);color:var(--wf-text);border:1px solid var(--wf-line);border-radius:9px;padding:11px 13px;width:100%;min-height:92px;resize:vertical;transition:border-color 200ms,box-shadow 200ms}
    #workshop-feedback-concept textarea:focus{border-color:var(--wf-accent);box-shadow:0 0 0 3px var(--wf-soft)}
    #workshop-feedback-concept textarea::placeholder{color:var(--wf-muted);opacity:1}
    #workshop-feedback-concept button{font:inherit;font-size:14px;border:1px solid var(--wf-line);border-radius:9px;padding:10px 18px;min-height:44px;background:var(--wf-paper);color:var(--wf-text)}
    #workshop-feedback-concept .wf-primary{background:var(--wf-blue);color:var(--wf-white);border-color:var(--wf-blue);transition:transform 200ms,box-shadow 200ms}
    #workshop-feedback-concept .wf-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--wf-shadow)}
    #workshop-feedback-concept .wf-primary:active{transform:translateY(0) scale(.98)}
    #workshop-feedback-concept .wf-footer{grid-column:1/-1;border-top:1px solid var(--wf-line);margin-top:4px;padding-top:18px;display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap}
    #workshop-feedback-concept .wf-note{font-size:12px;color:var(--wf-muted);margin:15px 0 0;text-align:center}
    #workshop-feedback-concept .wf-thanks{grid-column:1/-1;background:var(--wf-soft);padding:18px;border-radius:10px;margin-top:18px;border-inline-start:4px solid var(--wf-gold);animation:wf-enter 450ms ease-out both}
    #workshop-feedback-concept .wf-thanks strong{font-weight:500}
    #workshop-feedback-concept .wf-thanks p{margin:5px 0 0;font-size:13px;color:var(--wf-muted)}
    #workshop-feedback-concept .wf-language{font-size:12px;padding:7px 12px;min-height:40px;background:transparent;color:var(--wf-white);border-color:#ffffff6b}
    #workshop-feedback-concept .wf-language:hover{background:#ffffff15}
    #workshop-feedback-concept.wf-no-motion *,#workshop-feedback-concept.wf-no-motion *:before,#workshop-feedback-concept.wf-no-motion *:after{animation:none!important;transition:none!important}
    @keyframes wf-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    @keyframes wf-select{0%{transform:scale(.94)}65%{transform:scale(1.06)}100%{transform:scale(1)}}
    @media(max-width:620px){#workshop-feedback-concept .wf-content{grid-template-columns:1fr}#workshop-feedback-concept .wf-section:nth-child(n+5){border-bottom:1px solid var(--wf-line)}#workshop-feedback-concept .wf-section:nth-child(6){border-bottom:0}}
    @media(max-width:500px){#workshop-feedback-concept .wf-stage{padding:10px;border-radius:12px}#workshop-feedback-concept .wf-header{padding:20px 16px}#workshop-feedback-concept .wf-content{padding:6px 16px 20px}#workshop-feedback-concept .wf-progress{padding:12px 16px}#workshop-feedback-concept h1{font-size:21px}#workshop-feedback-concept .wf-title{font-size:16px}#workshop-feedback-concept .wf-rate{padding:10px 4px;min-height:70px}#workshop-feedback-concept textarea{font-size:16px}#workshop-feedback-concept .wf-brand-row{padding-inline-end:0;margin-bottom:18px;gap:10px}#workshop-feedback-concept .wf-logo-plate{width:190px}#workshop-feedback-concept .wf-endpoints{gap:10px}}
    @media(prefers-reduced-motion:reduce){#workshop-feedback-concept *,#workshop-feedback-concept *:before,#workshop-feedback-concept *:after{animation:none!important;transition:none!important}}
#workshop-feedback-concept .wf-brand-row { padding-inline-end: 0; }
#workshop-feedback-concept .wf-error { grid-column: 1 / -1; padding: 12px 14px; margin: 14px 0 4px; border-radius: 9px; background: light-dark(#fff0f2, #39232e); color: light-dark(#982134, #ffc2cd); font-size: 14px; }
#workshop-feedback-concept .wf-content[aria-busy="true"] .wf-primary { opacity: .8; }
#workshop-feedback-concept .wf-section:has(textarea:focus-visible) .wf-question-label { color: var(--wf-accent); }
@media (pointer: coarse) { #workshop-feedback-concept .wf-language { min-height: 44px; } }
@media (max-width: 360px) { #workshop-feedback-concept .wf-stage { padding: 6px; } #workshop-feedback-concept .wf-rating { gap: 4px; } }

/* A confirmed response replaces the questions with a quiet branded receipt. */
#workshop-feedback-concept.has-submitted .wf-progress,
#workshop-feedback-concept.has-submitted .wf-section,
#workshop-feedback-concept.has-submitted .wf-footer,
#workshop-feedback-concept.has-submitted .wf-error,
#workshop-feedback-concept.has-submitted .wf-meta { display: none; }
#workshop-feedback-concept.has-submitted .wf-content { display: block; padding: 44px 26px 50px; }
#workshop-feedback-concept.has-submitted .wf-thanks { background: transparent; border: 0; padding: 0; margin: 0; text-align: center; }
#workshop-feedback-concept .wf-received-mark { display: block; width: 64px; height: 64px; margin: 0 auto 22px; color: var(--wf-gold); }
#workshop-feedback-concept .wf-received-mark path { stroke-dasharray: 40; stroke-dashoffset: 0; animation: wf-received-check 650ms cubic-bezier(.2,.7,.2,1) both; }
#workshop-feedback-concept .wf-thanks strong { display: block; font-size: 22px; line-height: 1.5; }
#workshop-feedback-concept .wf-thanks p { margin: 14px auto 0; max-width: 440px; font-size: 15px; line-height: 1.9; }
#workshop-feedback-concept .wf-close-note { display: block; margin-top: 26px; color: var(--wf-muted); font-size: 12px; }
@keyframes wf-received-check { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@media (max-width: 500px) { #workshop-feedback-concept.has-submitted .wf-content { padding: 36px 20px 40px; } #workshop-feedback-concept .wf-thanks strong { font-size: 20px; } }
