/* ===========================================================
   AWESTRUCK · WhatsApp Contact Widget
   One neutral scheme — identical on light & dark sites.
   Fully responsive (desktop / tablet / mobile).
   No build step. Drop this file in and load contact-widget.js.
   =========================================================== */
:root{
  --awc-wa:#25D366; --awc-wa-2:#1FBE5A;
  --awc-tab-bg:linear-gradient(165deg,#3A3852 0%,#262438 100%);
  --awc-pop-bg:#1A1926; --awc-pop-bd:rgba(255,255,255,.10);
  --awc-violet:#7A5CFF; --awc-sky:#4C8DFF;
  --awc-title:#FFFFFF; --awc-sub:#A7ABC8; --awc-opt:#ECEDF5; --awc-opt-sub:#9A9FBE;
  --awc-row:rgba(255,255,255,.05); --awc-row-h:rgba(255,255,255,.10);
  --awc-font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --awc-label-font:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --awc-title-font:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
}
.awc, .awc *{box-sizing:border-box;margin:0;padding:0}

/* ---------- sticky tab ---------- */
.awc-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:2147483000;cursor:pointer;
  background:var(--awc-tab-bg);color:#F1F2FB;padding:16px 9px;border-radius:11px 0 0 11px;overflow:hidden;
  box-shadow:-6px 10px 26px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset;
  display:flex;flex-direction:column;align-items:center;gap:10px;border:0;
  transition:box-shadow .26s;font-family:var(--awc-label-font)}
.awc-tab:hover{box-shadow:-8px 12px 30px -12px rgba(0,0,0,.62),0 0 0 1px rgba(122,92,255,.45) inset}
.awc-tab__txt{writing-mode:vertical-rl;text-orientation:mixed;font-weight:500;font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;line-height:1}
.awc-tab__led{width:6px;height:6px;border-radius:50%;background:var(--awc-wa);box-shadow:0 0 10px var(--awc-wa);flex:none}
.awc-tab__sheen{position:absolute;left:0;right:0;top:-40%;height:40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(122,92,255,.26),rgba(76,141,255,.10),transparent);
  animation:awc-sheen 7s ease-in-out infinite}
@keyframes awc-sheen{0%{top:-45%}55%{top:115%}100%{top:115%}}
.awc-tab::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--awc-violet),var(--awc-sky));opacity:.7;animation:awc-breathe 4.5s ease-in-out infinite}
@keyframes awc-breathe{0%,100%{opacity:.35}50%{opacity:.95}}

/* ---------- popup ---------- */
.awc-pop{position:fixed;right:46px;top:50%;transform:translate(14px,-50%) scale(.97);transform-origin:right center;
  width:320px;max-width:calc(100vw - 24px);border-radius:22px;overflow:hidden;z-index:2147483001;
  opacity:0;visibility:hidden;pointer-events:none;font-family:var(--awc-font);
  background:var(--awc-pop-bg);border:1px solid var(--awc-pop-bd);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  transition:opacity .24s ease,transform .32s cubic-bezier(.3,1.3,.5,1)}
.awc.is-open .awc-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%) scale(1)}

/* running border */
@property --awc-bang{syntax:'<angle>';inherits:false;initial-value:0deg}
.awc-pop::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:5;
  background:conic-gradient(from var(--awc-bang),rgba(122,92,255,0) 0deg,rgba(122,92,255,0) 248deg,rgba(122,92,255,.65) 300deg,rgba(76,141,255,.7) 332deg,rgba(122,92,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:awc-bspin 7s linear infinite}
@keyframes awc-bspin{to{--awc-bang:360deg}}

.awc-pop__h{padding:20px 20px 12px;position:relative}
.awc-pop__h b{font-family:var(--awc-title-font);font-weight:700;font-size:19px;letter-spacing:-.01em;display:block;color:var(--awc-title)}
.awc-pop__h span{font-size:12.5px;margin-top:3px;display:block;color:var(--awc-sub);line-height:1.45}
.awc-pop__x{position:absolute;top:16px;right:16px;border:0;width:28px;height:28px;border-radius:50%;font-size:16px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#C7CAE2;transition:.16s;line-height:1}
.awc-pop__x:hover{background:rgba(255,255,255,.16);color:#fff}

.awc-pop__topics{display:flex;flex-wrap:wrap;gap:7px;padding:2px 18px 12px}
.awc-topic{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer;
  padding:8px 12px;border-radius:999px;background:var(--awc-row);border:1px solid transparent;color:var(--awc-opt);transition:.16s}
.awc-topic svg{width:14px;height:14px;stroke:#C7C2FF;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.awc-topic:hover{background:var(--awc-row-h)}
.awc-topic.is-on{background:rgba(122,92,255,.20);border-color:rgba(122,92,255,.6);color:#fff}
.awc-topic.is-on svg{stroke:#fff}

.awc-pop__compose{padding:0 18px 14px}
.awc-pop__ta{width:100%;min-height:94px;max-height:150px;resize:none;font-family:inherit;font-size:14px;line-height:1.5;
  color:#F1F2FB !important;background:rgba(255,255,255,.07) !important;border:1px solid var(--awc-pop-bd);border-radius:14px;padding:13px 14px;outline:none;transition:.16s;
  -webkit-text-fill-color:#F1F2FB !important;}
.awc-pop__ta::placeholder{color:#888EAE}
.awc-pop__ta:focus{border-color:rgba(122,92,255,.65);background:rgba(255,255,255,.10) !important;color:#F1F2FB !important;-webkit-text-fill-color:#F1F2FB !important;}
.awc-pop__meta{display:flex;justify-content:flex-end;margin-top:7px}
.awc-pop__count{font-size:11px;font-weight:600;color:var(--awc-opt-sub)}
.awc-pop__count.is-warn{color:#FFC24B}

.awc-pop__send{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:14.5px;background:var(--awc-wa);color:#06210A;transition:.16s}
.awc-pop__send svg{width:18px;height:18px;fill:#06210A}
.awc-pop__send:disabled{background:#2A2A38;color:#6A6F8C;cursor:not-allowed}
.awc-pop__send:not(:disabled):hover{background:var(--awc-wa-2)}

/* ---------- mobile: popup becomes a bottom sheet ---------- */
@media(max-width:560px){
  .awc-pop{right:12px;left:12px;top:auto;bottom:84px;width:auto;max-width:none;
    transform:translateY(18px) scale(.99);transform-origin:bottom center}
  .awc.is-open .awc-pop{transform:translateY(0) scale(1)}
  .awc-tab{padding:14px 8px;gap:9px}
}

@media(prefers-reduced-motion:reduce){
  .awc-tab__sheen,.awc-tab::before,.awc-tab__led,.awc-pop::after{animation:none}
}