/* ==========================================================================
   HELP PAGE (/support)  ·  variant B of the Help Center package
   --------------------------------------------------------------------------
   Contact block (mount point for the Gotya Assistant), FAQ video, Track your
   order (PlayerStatus), Quick answers, all questions with search, Responsible
   play. Everything is scoped under .hc and built on the --g-* tokens of
   bridge.css. Loaded by app/Views/pages/support.php only.
   ========================================================================== */
.hc{
  --hc-surface:var(--g-panel,#111214); --hc-surface2:var(--g-card,#17181d);
  --hc-line:rgba(255,255,255,.09); --hc-line2:rgba(255,255,255,.16);
  --hc-muted:#a6a8ad; --hc-dim:var(--g-mut2,#8a8d94);
  --hc-gold:var(--g-gold,#FFC629); --hc-late:var(--g-gold2,#F5A623); --hc-bad:var(--g-red,#FF6B5E);
  --hc-cond:var(--g-cond,'Barlow Condensed','Barlow',sans-serif); --hc-sans:var(--g-sans,'Barlow',sans-serif);
  font-family:var(--hc-sans);color:var(--g-ink,#fff);
}
.hc *,.hc *::before,.hc *::after{box-sizing:border-box}
.hc a{color:var(--hc-gold);text-underline-offset:3px}
.hc .hc-ic{width:20px;height:20px;flex:none}
.hc .hc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hc :focus-visible{outline:2px solid var(--hc-gold);outline-offset:2px}
.hc [hidden]{display:none!important}

/* ---------- buttons ---------- */
.hc .hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;border:1px solid transparent;
  font:600 15px/1.1 var(--hc-sans);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.hc .hc-btn:active{transform:translateY(1px)}
.hc .hc-btn .hc-ic{width:18px;height:18px}
.hc .hc-btn-primary{background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206}
.hc .hc-btn-primary:hover{filter:brightness(1.05)}
.hc .hc-btn-ghost{background:transparent;color:#fff;border-color:var(--hc-line2)}
.hc .hc-btn-ghost:hover{border-color:var(--hc-gold)}

/* ---------- hero ---------- */
.hc-hero{padding:18px 0 26px}
.hc-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:5px 12px;border-radius:99px;background:rgba(255,198,41,.1);color:var(--hc-gold);font-weight:600;font-size:13.5px}
.hc-kicker .hc-ic{width:16px;height:16px;fill:var(--hc-gold);stroke:none}
.hc-hero h1{margin:0 0 10px;font:700 clamp(44px,8.4vw,108px)/.88 var(--hc-cond);text-transform:uppercase;letter-spacing:.005em;color:#fff}
.hc-hero h1 em{font-style:normal;color:var(--hc-gold)}
.hc-sub{margin:0 0 26px;max-width:600px;color:var(--hc-muted);font-size:18px;line-height:1.5}
.hc-duo{display:grid;gap:18px}
.hc-duo>*{min-width:0}
@media (min-width:1100px){.hc-duo{grid-template-columns:1.05fr .95fr;gap:22px}}

/* contact block: the clean mount point for the assistant (data-assistant-mount) */
.hc-ask{display:flex;flex-direction:column;min-height:100%;border-radius:24px;background:var(--hc-surface);border:1px solid var(--hc-line2);
  box-shadow:0 0 0 1px rgba(255,198,41,.18),0 30px 80px rgba(255,198,41,.06);overflow:hidden}
.hc-ask-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hc-line)}
.hc-ask-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--g-grad,linear-gradient(135deg,#FFC629,#F5A623,#E8990A));color:#0A0A0A;flex:none}
.hc-ask-av .hc-ic{width:20px;height:20px}
.hc-ask-head b{display:block;font:700 20px/1.05 var(--hc-cond);letter-spacing:.04em;text-transform:uppercase}
.hc-ask-head div span{display:block;margin-top:3px;color:var(--hc-muted);font-size:13.5px}
.hc-ask-body{padding:26px 22px 22px;flex:1}
.hc-ask-eyebrow{margin:0 0 6px;font:700 14px/1 var(--hc-cond);letter-spacing:4px;text-transform:uppercase;color:var(--hc-gold)}
.hc .hc-ask-mail{display:inline-block;margin:0 0 12px;font:700 clamp(34px,4.6vw,52px)/1 var(--hc-cond);color:#fff;text-decoration:none;word-break:break-all}
.hc .hc-ask-mail:hover{color:var(--hc-gold)}
.hc-ask-note{margin:0 0 18px;color:#d6d6d6;font-size:15.5px;line-height:1.55;max-width:520px}
.hc-ask-links{padding:6px 12px 14px;border-top:1px solid var(--hc-line)}
.hc-ask-links p{margin:10px 8px 6px;color:var(--hc-dim);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hc .hc-ask-links a{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;color:#fff;text-decoration:none}
.hc .hc-ask-links a:hover{background:var(--hc-surface2)}
.hc-ask-links a .hc-ic{color:var(--hc-gold)}
.hc-ask-links a span{display:block;font-weight:600;font-size:15px}
.hc-ask-links a small{display:block;color:var(--hc-muted);font-size:13px}
.hc-ask-links a .hc-go{margin-left:auto;color:var(--hc-dim)}

.hc-vid{position:relative}
.hc-vid .hc-lbl{position:absolute;z-index:1;top:14px;left:14px;padding:5px 11px;border-radius:99px;background:rgba(10,10,10,.75);font-size:13px;font-weight:600;pointer-events:none}
.hc-vid iframe{display:block;background:var(--hc-surface)}

/* ---------- Track your order ---------- */
/* scroll-margin-top 80px: in-page jumps (#track, #faq) land below the sticky .app-topbar (about 63px) */
.hc-band{margin-top:22px;scroll-margin-top:80px}
.hc-band-top{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-end;justify-content:space-between;padding:44px 36px 110px;border-radius:28px;
  background:var(--g-grad,linear-gradient(135deg,#FFC629,#F5A623,#E8990A));color:#0A0A0A}
.hc-band-top h2{margin:0;font:700 clamp(46px,7vw,92px)/.86 var(--hc-cond);text-transform:uppercase;color:#0A0A0A}
.hc-band-top p{margin:0;max-width:420px;font-weight:500;font-size:17px;line-height:1.45;color:#0A0A0A}
.hc-panel{position:relative;margin:-84px 20px 0;padding:24px;border-radius:24px;background:var(--g-bg,#0A0A0A);box-shadow:0 30px 60px rgba(0,0,0,.35);border:1px solid var(--hc-line)}
.hc-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hc-tabs::-webkit-scrollbar{display:none}
.hc-tabs button{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:9px 14px;border-radius:12px;background:var(--hc-surface2);
  border:1px solid var(--hc-line);color:#fff;cursor:pointer;font:600 15px/1 var(--hc-sans)}
.hc-tabs button span{color:var(--hc-muted);font-weight:500;font-size:13px}
.hc-tabs button[aria-selected="true"]{border-color:var(--hc-gold);background:rgba(255,198,41,.1)}
.hc-tabs button[aria-selected="true"] .hc-ic{color:var(--hc-gold)}
.hc-signed{margin:14px 0;color:var(--hc-muted);font-size:14px}
.hc-signed b{color:#fff}
.hc-alerts{display:grid;gap:10px;margin:0 0 16px}
.hc-alert{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:14px;border:1px solid rgba(245,166,35,.45);background:rgba(245,166,35,.08)}
.hc-alert div{flex:1 1 260px;min-width:0}
.hc-alert b{display:block;color:var(--hc-late);font-size:15.5px}
.hc-alert p{margin:3px 0 0;color:#e2e2e2;font-size:14.5px;line-height:1.5}
.hc-grid{display:grid;gap:12px;margin-top:12px}
@media (min-width:900px){.hc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hc-card{min-width:0;padding:18px;border-radius:16px;background:var(--hc-surface);border:1px solid var(--hc-line)}
.hc-card header{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between}
.hc-card-id{font:700 20px/1.1 var(--hc-cond);letter-spacing:.02em;text-transform:uppercase}
.hc-card-meta{color:var(--hc-muted);font-size:13.5px}
.hc-card-title{margin:12px 0 4px;font:600 17px/1.3 var(--hc-sans);color:var(--hc-gold)}
.hc-card.tone-late .hc-card-title{color:var(--hc-late)}
.hc-card.tone-muted .hc-card-title{color:var(--hc-muted)}
.hc-card.tone-done .hc-card-title{color:#fff}
.hc-card.tone-bad .hc-card-title{color:var(--hc-bad)}
.hc-card-text{margin:0;color:#dadada;font-size:15px;line-height:1.55}
.hc-card-note{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--hc-surface2);color:#e2e2e2;font-size:14px;line-height:1.5}
.hc-card.is-big{padding:24px;border-color:rgba(255,198,41,.35);background:linear-gradient(160deg,rgba(255,198,41,.08),transparent 55%),var(--hc-surface)}
.hc-card.is-big .hc-card-title{margin-top:14px;font:700 32px/1 var(--hc-cond);text-transform:uppercase;letter-spacing:.01em}
.hc-card.is-big .hc-card-text{font-size:16.5px;max-width:680px}
.hc-steps{list-style:none;margin:16px 0 6px;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:4px}
.hc-steps li{position:relative;display:grid;align-content:start;gap:2px;padding-top:18px;font-size:12.5px;line-height:1.3;color:var(--hc-dim)}
.hc-steps li::before{content:'';position:absolute;top:5px;left:0;right:0;height:2px;background:var(--hc-line2);border-radius:2px}
.hc-dot{position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--hc-surface);border:2px solid var(--hc-line2);z-index:1}
.hc-steps .is-done{color:#fff}
.hc-steps .is-done::before{background:var(--hc-gold)}
.hc-steps .is-done .hc-dot{background:var(--hc-gold);border-color:var(--hc-gold)}
.hc-steps .is-now{color:#fff;font-weight:600}
.hc-steps .is-now .hc-dot{border-color:var(--hc-gold);box-shadow:0 0 0 4px rgba(255,198,41,.2)}
.hc-steps .is-stop{color:var(--hc-muted)}
.hc-steps .is-stop .hc-dot{background:var(--hc-dim);border-color:var(--hc-dim)}
.hc-card.tone-late .hc-steps .is-now .hc-dot{border-color:var(--hc-late);box-shadow:0 0 0 4px rgba(245,166,35,.22)}
.hc-step-w{color:var(--hc-muted);font-weight:400}
.hc-card.is-big .hc-steps{margin-top:22px}
.hc-card.is-big .hc-steps li{font-size:14px}
.hc-cards{margin-top:10px;font-size:14px}
.hc-cards summary{cursor:pointer;color:var(--hc-muted)}
.hc-cards ul{margin:8px 0 0;padding-left:18px}
.hc-cards li{margin:3px 0}
.hc-cards li span{color:var(--hc-muted)}
.hc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hc-actions:empty{display:none}
.hc-empty{padding:22px 4px;color:var(--hc-muted)}
.hc-empty a{font-weight:600}
.hc-more{margin:14px 2px 0;font-size:14.5px}
.hc-money{display:grid;gap:12px;margin-top:4px;padding:16px 18px;border-radius:16px;background:var(--hc-surface2);border:1px solid var(--hc-line)}
.hc-money-row{display:flex;flex-wrap:wrap;gap:6px 24px}
.hc-money-row div{min-width:120px}
.hc-money-row small{display:block;color:var(--hc-muted);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.hc-money-row b{font:700 26px/1.1 var(--hc-cond);letter-spacing:.02em}
.hc-money ul{margin:0;padding-left:18px;color:#dadada;font-size:14.5px;line-height:1.5}
.hc-money p{margin:0;color:#dadada;font-size:14.5px}
.hc-login{display:grid;gap:14px;justify-items:start;padding:18px 6px 8px}
.hc-login .hc-ic{width:34px;height:34px;color:var(--hc-gold)}
.hc-login h3{margin:0;font:700 30px/1 var(--hc-cond);text-transform:uppercase}
.hc-login p{margin:0;max-width:560px;color:#dadada;font-size:15.5px;line-height:1.55}
.hc-login .hc-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- sections ---------- */
.hc-block{padding:56px 0 0;scroll-margin-top:80px}
.hc-h2{margin:0 0 8px;font:700 clamp(34px,5vw,60px)/.92 var(--hc-cond);text-transform:uppercase;color:#fff}
.hc-lead{margin:0 0 24px;color:var(--hc-muted);font-size:17px}
.hc-top{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));counter-reset:q}
@media (min-width:1000px){.hc-top{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hc .hc-top a{position:relative;display:flex;flex-direction:column;gap:10px;min-height:170px;padding:20px 20px 18px;border-radius:20px;background:var(--hc-surface);
  border:1px solid var(--hc-line);color:#fff;text-decoration:none;counter-increment:q;transition:border-color .15s,transform .15s}
.hc .hc-top a::before{content:counter(q,decimal-leading-zero);font:700 15px/1 var(--hc-cond);color:var(--hc-gold);letter-spacing:.06em}
.hc .hc-top a:hover{border-color:var(--hc-gold);transform:translateY(-2px)}
.hc-top b{font:700 25px/1.02 var(--hc-cond);text-transform:uppercase;letter-spacing:.01em}
.hc-top span{color:var(--hc-muted);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-top i{margin-top:auto;font-style:normal;font-weight:600;font-size:14px;color:var(--hc-gold)}

.hc-faqgrid{display:grid;gap:22px}
.hc-faqgrid>*{min-width:0}
.hc-side{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.hc-side::-webkit-scrollbar{display:none}
.hc-side button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--hc-line);
  background:var(--hc-surface);color:#fff;font:600 14.5px/1.2 var(--hc-sans);cursor:pointer;text-align:left}
.hc-side button .hc-ic{color:var(--hc-muted)}
.hc-side button[aria-pressed="true"]{border-color:var(--hc-gold)}
.hc-side button[aria-pressed="true"] .hc-ic{color:var(--hc-gold)}
@media (min-width:1100px){
  .hc-faqgrid{grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
  .hc-side{position:sticky;top:80px;flex-direction:column;overflow:visible}
  .hc-side button{width:100%}
}
.hc-find{position:relative;margin:10px 0 8px}
.hc-find .hc-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--hc-muted)}
.hc-find input{width:100%;min-height:54px;padding:12px 16px 12px 46px;border-radius:14px;border:1px solid var(--hc-line2);background:var(--hc-surface);color:#fff;font:400 16px/1.2 var(--hc-sans)}
.hc-find input::placeholder{color:var(--hc-dim)}
.hc-find input:focus{outline:none;border-color:var(--hc-gold);box-shadow:0 0 0 4px rgba(255,198,41,.12)}
.hc-findnote{margin:4px 0 0;color:var(--hc-muted);font-size:14px}
.hc-faq{border-bottom:1px solid var(--hc-line);scroll-margin-top:90px}
.hc-faq summary{list-style:none;display:flex;align-items:center;gap:10px;padding:20px 4px;cursor:pointer}
.hc-faq summary::-webkit-details-marker{display:none}
.hc-faq-q{flex:1;font:600 18px/1.35 var(--hc-sans)}
.hc-faq-plus{position:relative;width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--hc-line2)}
.hc-faq-plus::before,.hc-faq-plus::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.6px;background:var(--hc-gold);transform:translate(-50%,-50%);transition:transform .2s}
.hc-faq-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.hc-faq[open] .hc-faq-plus::after{transform:translate(-50%,-50%) rotate(0)}
.hc-faq-a{padding:0 4px 20px;color:#e2e2e2;font-size:16px;line-height:1.6}
.hc-faq-a p{margin:0 0 10px}
.hc-faq-a ul{margin:0 0 12px;padding-left:20px}
.hc-faq-a li{margin:4px 0}
.hc-faq-a b{color:#fff}
.hc-faq.hc-flash{animation:hcflash 1.6s ease-out}
@keyframes hcflash{0%,30%{background:rgba(255,198,41,.12)}100%{background:transparent}}

.hc-rp{display:grid;gap:16px;padding:28px;border-radius:24px;border:1px solid var(--hc-line2);background:var(--hc-surface)}
.hc-rp>.hc-ic{width:34px;height:34px;color:var(--hc-gold)}
.hc-rp h2{margin:0;font:700 34px/1 var(--hc-cond);text-transform:uppercase}
.hc-rp p{margin:6px 0 0;color:#dadada;line-height:1.55}
.hc-rp .hc-rp-line{color:var(--hc-muted);font-size:13.5px}
.hc-rp .hc-row{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:1000px){.hc-rp{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:30px 36px}}

.hc-mailme{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:48px;padding:26px 0;border-top:1px solid var(--hc-line)}
.hc-mailme b{font:700 28px/1 var(--hc-cond);text-transform:uppercase}
.hc-mailme p{margin:6px 0 0;color:var(--hc-muted);max-width:640px;line-height:1.5}

@media (max-width:620px){
  .hc-hero{padding-top:6px}
  .hc-sub{font-size:16.5px}
  .hc-ask-body{padding:22px 18px 18px}
  .hc-band-top{padding:30px 20px 96px;border-radius:22px}
  .hc-panel{margin:-72px 8px 0;padding:14px;border-radius:20px}
  .hc-tabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  .hc-tabs button{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:8px 12px;font-size:14.5px}
  .hc-tabs button .hc-ic{display:none}
  .hc .hc-top a{min-height:0}
  .hc-card,.hc-card.is-big{padding:16px}
  .hc-card.is-big .hc-card-title{font-size:27px}
  .hc-card.is-big .hc-steps li,.hc-steps li{font-size:12px}
  .hc-rp{padding:22px}
  .hc-block{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){.hc *{animation:none!important;transition:none!important}}