/* UTOPIA hoodie FAQ: "ask UTOPIA", a chat with the brand, on the footer's night: black with the glowing blue arc
   (same shader as the footer, drawn by faq.js). The chat is glass: no backdrop-filter (it froze weak PCs) - the shader
   paints a softer, wider, lifted copy of the arc under the chat box, so the light really looks frosted through it.
   Desktop: heading + hint + questions on the right, the chat on the left. Phone: heading, hint, every question, then the chat.
   Fonts: UH Orbitron / UH Panchang from hero.css, Arabic is the store's Alexandria. */

.uq{--uq-hdr:var(--utopia-header-height,104px);--uq-blue:#0033FF;--uq-sky:#6F93FF;--uq-gut:3.8cqw;--uq-dock:96px;
  position:relative;width:var(--uq-vw,100vw);margin-inline:calc(50% - var(--uq-vw,100vw) / 2);height:120svh;min-height:744px;overflow:clip;color:#fff;
  /* fallback when WebGL is off: the same arc, drawn with gradients */
  background:#000 radial-gradient(ellipse 62% 70% at 50% 55%,transparent 72%,rgba(0,51,255,.38) 79%,rgba(0,51,255,.08) 86%,transparent 92%)}
@media (max-width:767px){.uq{--uq-hdr:var(--utopia-header-height,64px)}}
.uq *{box-sizing:border-box;margin:0}
.uq__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
/* the content sits above the background canvas (the canvas is a positioned child of the stage) */
.uq__side,.uq__intro,.uq__hint,.uq__chips,.uq__panel{position:relative;z-index:1}
/* 120svh runway: the one-screen stage (background included) stays pinned for the last 20svh, so the visitor pauses on it.
   The stage is the whole screen; the store header sits over its top band (overflow:clip on the section keeps sticky working) */
.uq__stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;container-type:size;display:grid;grid-template-columns:minmax(0,1fr) min(560px,46cqw);column-gap:6cqw;align-items:stretch;
  padding:calc(var(--uq-hdr) + 5svh) var(--uq-gut) var(--uq-dock)}

/* right column (reading start): the heading, the hint and the questions */
.uq__side{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4cqh,34px);min-height:0}
.uq__k{font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.3em;color:rgba(255,255,255,.5);direction:ltr;text-align:right;margin-bottom:16px}
/* Arabic needs room between lines (dots and tall letters); the store forces its own line-height on headings, so lock ours */
.uq__t{font:700 clamp(30px,4cqw,60px)/1.45 Alexandria,sans-serif;color:#fff}
.uq .uq__t,.uq .uq__t span{line-height:1.45!important}
.uq__t span{color:var(--uq-sky)}
.uq__sub{margin-top:12px;font:400 clamp(13px,1.1cqw,16px)/1.7 Alexandria,sans-serif;color:rgba(255,255,255,.6)}
/* the hint: tells the visitor that a tap shows the answer in the chat */
.uq__hint{display:flex;align-items:center;gap:10px;font:500 clamp(12px,1cqw,14px)/1.5 Alexandria,sans-serif;color:rgba(255,255,255,.78)}
.uq__hint i{flex:none;position:relative;width:8px;height:8px;border-radius:50%;background:var(--uq-sky)}
.uq__hint i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--uq-sky);animation:uq-ping 1.8s ease-out infinite}
@keyframes uq-ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}
.uq--used .uq__hint i::after{animation:none;opacity:0}
.uq__chips{display:flex;flex-wrap:wrap;gap:8px}
.uq__chips button{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);font:500 clamp(13px,1cqw,15px)/1.3 Alexandria,sans-serif;color:#fff;text-align:right;-webkit-tap-highlight-color:transparent;
  transition:border-color .25s,background-color .25s,color .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.uq__chips button b{font:500 9px/1 "UH Orbitron",sans-serif;letter-spacing:.14em;color:var(--uq-sky)}
.uq__chips button:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}
.uq__chips button:active{transform:scale(.97)}
/* asked already: quieter, with a tick, and moved to the end so the next unanswered question is always first */
.uq__chips button[aria-pressed="true"]{order:1;background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.08);box-shadow:none;color:rgba(255,255,255,.45)}
.uq__chips button[aria-pressed="true"] b{color:rgba(255,255,255,.35)}
.uq__chips button[aria-pressed="true"]::after{content:"✓";font-size:12px;color:var(--uq-sky)}
.uq__chips button:focus-visible{outline:2px solid var(--uq-sky);outline-offset:2px}

/* the chat: smoked glass, like the MIND chat on intomymind-eg.com: a dark see-through tint with a faint brand light at the
   top, a hairline rim, a bright top edge and a dark bottom edge. The frost (the arc's light, blurred) is painted under it
   by the shader, so no backdrop-filter is needed */
.uq__panel{grid-column:2;display:flex;flex-direction:column;min-height:0;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,51,255,.16),transparent 150px),rgba(8,10,22,.62);border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.4),0 30px 80px rgba(0,0,0,.6)}
.uq__head{display:flex;align-items:center;gap:12px;padding:16px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.uq__avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#000;font:600 17px/1 "UH Panchang",sans-serif}
.uq__who{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.uq__who b{font:600 12px/1 "UH Panchang",sans-serif;letter-spacing:.08em;color:#fff;direction:ltr;text-align:right}
.uq__who small{display:flex;align-items:center;gap:6px;font:400 11px/1 Alexandria,sans-serif;color:rgba(255,255,255,.6)}
.uq__who small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--uq-sky);box-shadow:0 0 0 3px rgba(111,147,255,.2)}
.uq__badge{font:500 9px/1 "UH Orbitron",sans-serif;letter-spacing:.2em;color:rgba(255,255,255,.45)}
.uq__thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 20px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
  background:none}
.uq__thread>:first-child{margin-top:auto}

/* bubbles. RTL chat: the visitor's own messages sit on the left (blue), the brand's on the right (white) */
.uq__msg{max-width:80%;padding:11px 15px 9px;border-radius:20px;animation:uq-in .4s cubic-bezier(.2,.7,.2,1) both}
.uq__msg p{font:400 15px/1.75 Alexandria,sans-serif}
.uq__msg time{display:block;margin-top:3px;font:500 8.5px/1 "UH Orbitron",sans-serif;letter-spacing:.12em;opacity:.55;direction:ltr;text-align:left}
/* both bubbles are glass too: the visitor's a blue tint, the brand's a faint white one */
.uq__msg.is-me{align-self:flex-end;color:#fff;border-end-end-radius:6px;background:linear-gradient(120deg,rgba(0,51,255,.5),rgba(111,147,255,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.1)}
.uq__msg.is-us{align-self:flex-start;color:rgba(255,255,255,.95);border-end-start-radius:6px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.1)}
.uq__msg.is-us p{font-size:16px;font-weight:500}
.uq__msg.is-us b{font-weight:700;color:var(--uq-sky)}
.uq__msg.is-us time{text-align:right}
.uq__msg.is-me time::after{content:" ✓✓"}
/* the brand typing */
.uq__msg.is-typing{display:flex;gap:5px;padding:15px 16px}
.uq__msg.is-typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);animation:uq-dot 1s ease-in-out infinite}
.uq__msg.is-typing i:nth-child(2){animation-delay:.15s}.uq__msg.is-typing i:nth-child(3){animation-delay:.3s}
@keyframes uq-dot{50%{transform:translateY(-4px);background:var(--uq-sky)}}
@keyframes uq-in{from{opacity:0;transform:translateY(10px) scale(.98)}}

/* the source list stays in the page for search engines and screen readers, out of sight */
.uq__src{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the store forces its own font on span/p/button/h2: lock ours */
.uq .uq__k,.uq .uq__chips button b,.uq .uq__badge,.uq .uq__msg time{font-family:"UH Orbitron",sans-serif!important}
.uq .uq__who b,.uq .uq__avatar{font-family:"UH Panchang",sans-serif!important}
.uq .uq__t,.uq .uq__t span,.uq .uq__sub,.uq .uq__hint,.uq .uq__chips button,.uq .uq__who small,.uq .uq__msg p,.uq .uq__msg b{font-family:Alexandria,sans-serif!important}

/* portrait: heading, the hint, ALL the questions in view (so it reads as ready answers), then the chat above the buy dock */
@media (max-width:1023px) and (orientation:portrait){
  .uq{--uq-dock:62px}
  .uq__stage{display:flex;flex-direction:column;gap:12px;padding:calc(var(--uq-hdr) + 14px) 0 calc(var(--uq-dock) + 14px)}
  .uq__side{display:contents}
  .uq__intro{order:1;padding:0 18px}
  .uq__k{margin-bottom:8px}
  .uq__t{font-size:26px}.uq__t br{display:none}
  .uq__sub{display:none}
  .uq__hint{order:2;padding:0 18px;font-size:12px}
  .uq__chips{order:3;gap:6px;padding:0 14px}
  .uq__chips button{padding:7px 11px 7px 10px;gap:6px;font-size:12px}
  .uq__chips button b{display:none}
  .uq__panel{order:4;flex:1;min-height:150px;margin:0 14px;border-radius:24px}
  .uq__head{padding:10px 14px}.uq__avatar{width:32px;height:32px;font-size:14px}.uq__who b{font-size:11px}
  .uq__thread{padding:16px 14px}
  .uq__msg p{font-size:14px}.uq__msg.is-us p{font-size:15px}
}
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){.uq{--uq-dock:80px}}
/* the store header over this section: transparent with white type and logo, so the night background runs under it and the
   whole screen is one colour (same treatment the footer gives the header; faq.js sets the class while they overlap) */
html.ut-faq-header-overlap [data-utopia-scroll-header],html.ut-faq-header-overlap div:has(> header.default_header),
html.ut-faq-header-overlap header.default_header,html.ut-faq-header-overlap header.default_header .default_header_container{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
html.ut-faq-header-overlap header.default_header,html.ut-faq-header-overlap header.default_header a,html.ut-faq-header-overlap header.default_header button{color:#fff!important}
html.ut-faq-header-overlap header.default_header .default_header_logo img{filter:brightness(0) invert(1)}
html.ut-faq-header-overlap header.default_header svg [fill="#131316"]{fill:currentColor}
@media (prefers-reduced-motion:reduce){.uq__msg,.uq__msg.is-typing i,.uq__hint i::after{animation:none}}