/* «رأيك يُكمل البدر» — the visitor feedback survey (frontend/partials/feedback.blade.php, feedback.js).
   Scoped to #feedback so the older layout's global styles can't reach it. Its button sits just above the accessibility
   button (partials/a11y, same corner); everything stays under the accessibility layers, so their colour settings also
   apply here and their menu opens on top. */

#feedback{--f-green:#0C7F4B;--f-deep:#045749;--f-night:#133C1E;--f-gold:#E9DA7A;--f-gold2:#D8B86A;--f-cream:#F7F6EF;--f-ink:#231F20;--f-muted:#2F674B;
  font-family:"Graphik Arabic El",Tahoma,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.6;color:var(--f-ink);text-align:start}
#feedback *,#feedback *::before,#feedback *::after{box-sizing:border-box}
#feedback [hidden]{display:none !important}
#feedback button,#feedback textarea{font:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal}
#feedback button{background:none;border:0;padding:0;box-shadow:none;min-width:0;min-height:0;width:auto;height:auto;border-radius:0;cursor:pointer}
#feedback h2,#feedback p{margin:0;padding:0;font-family:inherit;border:0;background:none}
#feedback svg{display:block;flex:none;overflow:visible}
#feedback :focus-visible{outline:3px solid var(--f-deep);outline-offset:2px}

/* ---------- the button: a half-lit moon, just above the accessibility button ---------- */
#feedback .fb-fab{position:fixed;z-index:2147482990;bottom:26px;inset-inline-start:24px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--f-gold);color:var(--f-night);box-shadow:0 0 0 2px #fff,0 12px 24px -10px rgba(19,60,30,.75)}
#feedback .fb-fab:hover{background:#f1e599}
#feedback .fb-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
#a11y ~ #feedback .fb-fab{bottom:94px}
#a11y.a11y-raise ~ #feedback .fb-fab{bottom:152px}               /* the older pages' back-to-top button */
html.a11y-tts #a11y ~ #feedback .fb-fab{bottom:150px}              /* the read-aloud bar sits above the accessibility button */
html.a11y-tts #a11y.a11y-raise ~ #feedback .fb-fab{bottom:208px}
#feedback .fb-badge{position:absolute;top:-2px;inset-inline-end:-2px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffbe6,#e7d68a 60%,#d8b86a);box-shadow:0 0 0 2px var(--f-night);opacity:0;transform:scale(.4)}
#feedback.is-done .fb-badge{opacity:1;transform:none}

/* ---------- the window ---------- */
#feedback .fb-scrim{position:fixed;inset:0;z-index:2147482992;background:rgba(7,28,18,.6)}
#feedback .fb-win{position:fixed;z-index:2147482995;inset:0;margin:auto;width:min(540px,calc(100vw - 32px));height:fit-content;max-height:calc(100vh - 32px);display:flex;flex-direction:column;border-radius:26px;background:var(--f-cream);box-shadow:0 30px 70px -20px rgba(0,0,0,.65);overflow:hidden}
#feedback .fb-head{position:relative;flex:none;padding:16px 20px 18px;background:radial-gradient(140% 120% at 85% 0%,#1d6b48 0%,#0d4a33 45%,var(--f-night) 100%);color:#fff;overflow:hidden}
#feedback .fb-sky{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.4px 1.4px at 12% 30%,rgba(255,255,255,.6) 50%,transparent 51%),radial-gradient(1px 1px at 30% 72%,rgba(255,255,255,.55) 50%,transparent 51%),radial-gradient(1.6px 1.6px at 58% 22%,rgba(233,218,122,.85) 50%,transparent 51%),radial-gradient(1px 1px at 76% 62%,rgba(255,255,255,.6) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 91% 34%,rgba(255,255,255,.55) 50%,transparent 51%),radial-gradient(1px 1px at 46% 86%,rgba(255,255,255,.45) 50%,transparent 51%)}
#feedback .fb-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}
#feedback .fb-logo{display:block;height:44px;width:auto}
#feedback .fb-tools{display:flex;align-items:center;gap:6px}
#feedback .fb-tool{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:34px;height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;font-size:13px}
#feedback .fb-tool:hover{background:rgba(255,255,255,.14)}
#feedback .fb-head :focus-visible{outline-color:var(--f-gold)}
#feedback .fb-title{position:relative;margin-top:12px;font-size:22px;font-weight:800;line-height:1.35;color:#fff}
#feedback .fb-sub{position:relative;margin-top:2px;font-size:13.5px;color:#E7E7DA}
#feedback .fb-body{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:260px;padding:24px 22px 12px;text-align:center}
#feedback .fb-q{font-size:16px;font-weight:700;line-height:1.6;color:var(--f-night)}
#feedback .fb-q em{color:#b23a2b;font-style:normal}
#feedback .fb-q small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--f-muted)}
#feedback .fb-err{min-height:1.4em;font-size:13px;color:#b23a2b}
#feedback .fb-msg{font-size:15px;color:var(--f-muted)}

/* the scale: seven moons from a thin crescent to the full moon */
#feedback .fb-moons{display:flex;gap:4px;padding:9px 12px;border-radius:999px;background:var(--f-night);direction:rtl}
#feedback .fb-win[dir="ltr"] .fb-moons{direction:ltr} /* the window follows the survey's language; the button keeps the page's corner */
#feedback .fb-moon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#feedback .fb-moon svg{width:34px;height:34px}
#feedback .fb-moon:focus-visible{outline:3px solid var(--f-gold);outline-offset:0}
#feedback .fb-moon .ring{fill:none;stroke:#5f7d68;stroke-width:1.3}
#feedback .fb-moon .lit{fill:#2c5a3d}
#feedback .fb-moon.on .ring{stroke:var(--f-gold)}
#feedback .fb-moon.on .lit{fill:var(--f-gold)}
#feedback .fb-ends{display:flex;justify-content:space-between;width:100%;max-width:380px;font-size:12.5px;font-weight:700;color:var(--f-deep)}
#feedback .fb-full{min-height:1.4em;font-size:13.5px;font-weight:800;color:#a8862a}

#feedback .fb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:440px}
#feedback .fb-chip{padding:6px 14px;border:1px solid var(--f-green);border-radius:999px;background:#fff;color:var(--f-deep);font-size:13.5px}
#feedback .fb-chip:hover{background:#E6F1EA}
#feedback .fb-chip[aria-checked="true"]{background:var(--f-deep);border-color:var(--f-deep);color:#fff}
#feedback .fb-text{width:100%;max-width:440px;min-height:110px;padding:10px 12px;border:1px solid #BCBEC0;border-radius:14px;background:#fff;font-size:14.5px;line-height:1.6;resize:vertical}
#feedback .fb-text:focus{outline:2px solid var(--f-green);outline-offset:1px;border-color:transparent}
#feedback .fb-count{align-self:flex-end;max-width:440px;width:100%;font-size:11.5px;color:var(--f-muted);text-align:end}

#feedback .fb-nav{display:flex;gap:10px;justify-content:center;margin-top:4px}
#feedback .fb-btn{min-width:110px;padding:9px 26px;border-radius:999px;font-weight:700}
#feedback .fb-next{background:var(--f-green);color:#fff}
#feedback .fb-next:hover{background:var(--f-deep)}
#feedback .fb-next[aria-disabled="true"]{background:#D2D7D0;color:#fff;cursor:not-allowed}
#feedback .fb-prev{border:1px solid var(--f-deep);color:var(--f-deep)}
#feedback .fb-prev:hover{background:#E6F1EA}

#feedback .fb-foot{flex:none;display:flex;justify-content:center;padding:2px 0 16px}
#feedback .fb-progress{height:22px;width:auto}
#feedback .fb-progress .ring{fill:none;stroke:#C9CEC6;stroke-width:1.2}
#feedback .fb-progress .lit{fill:#E2E5DE}
#feedback .fb-progress .on .ring{stroke:var(--f-green)}
#feedback .fb-progress .on .lit{fill:var(--f-green)}
#feedback .fb-sr,#feedback .fb-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the end: a full moon */
#feedback .fb-thanks{display:flex;flex-direction:column;align-items:center;gap:12px}
#feedback .fb-glow{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fffbe6,#efe3a4 55%,#d8b86a);box-shadow:0 0 0 10px rgba(233,218,122,.18),0 0 40px 14px rgba(233,218,122,.55)}
#feedback .fb-thanks b{font-size:20px;color:var(--f-night)}
#feedback .fb-thanks p{color:var(--f-muted)}
@media (prefers-reduced-motion:no-preference){
  #feedback .fb-glow{animation:fbGlow 2.6s ease-in-out infinite}
  #feedback .fb-win:not([hidden]){animation:fbIn .25s ease-out}
  #feedback .fb-badge{transition:opacity .3s,transform .3s}
}
@keyframes fbGlow{50%{box-shadow:0 0 0 14px rgba(233,218,122,.12),0 0 60px 22px rgba(233,218,122,.7)}}
@keyframes fbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  #feedback .fb-fab{width:44px;height:44px;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-start:14px}
  #a11y ~ #feedback .fb-fab{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  #a11y.a11y-raise ~ #feedback .fb-fab{bottom:calc(130px + env(safe-area-inset-bottom,0px))}
  html.a11y-tts #a11y ~ #feedback .fb-fab,html.a11y-tts #a11y.a11y-raise ~ #feedback .fb-fab{bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  #feedback .fb-win{inset:auto 0 0 0;margin:0;width:100%;max-height:92vh;max-height:92dvh;border-radius:24px 24px 0 0}
  #feedback .fb-moon{width:38px;height:38px}
  #feedback .fb-moon svg{width:30px;height:30px}
  #feedback .fb-moons{gap:2px;padding:7px 8px}
  body:has(#badr.badr-open) #feedback .fb-fab{visibility:hidden}
}
@media (forced-colors:active){
  #feedback .fb-moon.on .lit,#feedback .fb-moon.on .ring{fill:Highlight;stroke:Highlight}
  #feedback .fb-chip[aria-checked="true"]{border:3px solid Highlight}
}
@media print{#feedback{display:none !important}}