/* AW Media CRM public pages in Black Glass (20 Oct 2026), the look of the new
   awmedia.marketing: black ground, white type, frosted glass, white buttons,
   no pink. Alex: "lets go with the new styling everywhere".
   Loaded after forms.css / book.css / chat.css and only active under
   html.glass, which the page sets for every page opened from a link and, in
   an iframe, when the site asks for it (?theme=glass). Everything here is an
   override; the old look is untouched underneath. */

/* ── Forms and the booking diary (forms.css + book.css) ───────────────── */
html.glass {
  --pink: #ffffff;
  --pink-soft: rgba(255, 255, 255, 0.08);
  --pink-line: rgba(255, 255, 255, 0.32);
  --ink: #f5f5f7;
  --body: rgba(245, 245, 247, 0.72);
  --muted: rgba(245, 245, 247, 0.5);
  --line: rgba(255, 255, 255, 0.14);
  --bg: #000000;
  --panel: rgba(255, 255, 255, 0.05);
  --radius: 18px;
  background: #000;
}
html.glass body {
  background-color: #000;
  background-image:
    radial-gradient(70vmax 70vmax at -10% -20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%),
    radial-gradient(60vmax 60vmax at 110% 120%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%);
  background-attachment: fixed;
}
html.glass body.embed { background: transparent; background-image: none; }
/* Embedded on the site: see-through, so the site's own glass panel shows. */
html.glass:has(body.embed) { background: transparent; }
/* The booking diary inside the site (?frame=1): see-through as well. */
html.glass.framed, html.glass.framed body { background: transparent; background-image: none; }
html.glass ::selection { background: #fff; color: #000; }

html.glass .bar { background: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.glass .bar .logo { filter: invert(1); }
html.glass .prog { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); }

html.glass .kicker, html.glass .qnum { color: rgba(245, 245, 247, 0.5); letter-spacing: 0.2em; font-weight: 600; }
html.glass h1.q, html.glass .cover h1, html.glass .thanks h1 { font-weight: 600; letter-spacing: -0.04em; }
html.glass .cover h1, html.glass .thanks h1 {
  background: linear-gradient(180deg, #ffffff 10%, #c7c7cc 60%, #8a8a90 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0.08em 0.04em 0.18em; margin-left: -0.04em;
}

html.glass .field input::placeholder, html.glass .field textarea::placeholder,
html.glass .group .ginp::placeholder, html.glass .fcol input::placeholder { color: rgba(245, 245, 247, 0.3); }
html.glass .field textarea, html.glass .group .ginp, html.glass .fcol input, html.glass .fcol select {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
html.glass .group .ginp.bad { border-color: #ff8a8a; }
html.glass select option { background: #111; color: #fff; }
html.glass .group select.ginp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%278%27 viewBox=%270 0 14 8%27%3E%3Cpath d=%27M1 1l6 6 6-6%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-color: rgba(255, 255, 255, 0.05);
}
html.glass .group .gcheck .ginp { background: rgba(255, 255, 255, 0.06); }
html.glass .group .gcheck .ginp:checked { background: #fff; border-color: #fff; }
html.glass .group .gcheck .ginp:checked::after { border-color: #000; }

/* Choice cards, calendar days, slots and chips: frosted glass, lit white. */
html.glass .opt, html.glass .cal-day.on, html.glass .slot, html.glass .chip, html.glass .cal-nav button, html.glass .fileitem {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html.glass .opt:hover, html.glass .slot:hover, html.glass .cal-day.on:hover, html.glass .chip:hover, html.glass .cal-nav button:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.4); }
html.glass .opt.sel { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
html.glass .opt.sel .key { background: #fff; color: #000; border-color: #fff; }
html.glass .chip.sel { background: #fff; color: #000; border-color: #fff; }
html.glass .cal-day { color: rgba(245, 245, 247, 0.22); }
html.glass .cal-day.on::after { background: #fff; box-shadow: 0 0 8px #fff; }

/* Buttons: the site's solid white pill. */
html.glass .btn, html.glass .thanks .meetbtn {
  background: linear-gradient(180deg, #ffffff 0%, #e6e6eb 100%); color: #000; border-radius: 999px; font-weight: 600;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 14px 40px -14px rgba(255, 255, 255, 0.45);
}
html.glass .btn:hover { filter: none; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 18px 54px -12px rgba(255, 255, 255, 0.6); }
html.glass .back:hover, html.glass .enter-hint b { color: #fff; }
html.glass .err-msg { color: #ff8a8a; }
html.glass .thanks .calbtn { color: #fff; }
html.glass .thanks .addcal a, html.glass .picked button { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

html.glass .tick { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
html.glass .tick svg { stroke: #fff; }
html.glass .spin { border-color: rgba(255, 255, 255, 0.14); border-top-color: #fff; }
html.glass .filebtn { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); }
html.glass .bookframe { background: transparent; border-color: var(--line); }

/* ── The live chat window (chat.css) ─────────────────────────────────── */
html.glass {
  --pink2: #ffffff;
  --card: rgba(255, 255, 255, 0.07);
  --card2: rgba(255, 255, 255, 0.1);
  --mid: rgba(245, 245, 247, 0.62);
  --soft: rgba(245, 245, 247, 0.4);
}
html.glass .cw-head { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
html.glass .cw-av { background: linear-gradient(180deg, #ffffff, #d4d4d9); color: #000; box-shadow: 0 8px 20px -10px rgba(255, 255, 255, 0.5); }
html.glass .cw-who .dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }
html.glass .cw-who span.wait .dot { background: rgba(255, 255, 255, 0.5); box-shadow: none; }
html.glass .cw-who span.alex .dot { background: #fff; box-shadow: 0 0 10px #fff; }
html.glass .m.alex .b { border-color: rgba(255, 255, 255, 0.35); }
html.glass .m.alex .lbl { color: #fff; }
html.glass .m.visitor .b { background: linear-gradient(180deg, #ffffff, #e6e6eb); color: #000; }
html.glass .m.ai .b a, html.glass .m.alex .b a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
html.glass .lnks a { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }
html.glass .lnks a:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
html.glass .cw-chips button { border-color: rgba(255, 255, 255, 0.28); }
html.glass .cw-chips button:hover { background: rgba(255, 255, 255, 0.1); }
html.glass .cw-form:focus-within { border-color: rgba(255, 255, 255, 0.5); }
html.glass #cw-send { background: linear-gradient(180deg, #ffffff, #e6e6eb); color: #000; border-radius: 50%; }