/* BlueFy "Glass" design (0.1.5). Loaded after site.css (and account.css) when Settings > Appearance > Design style is "Glass".
   Frosted, see-through cards over a soft brand-coloured background. It only changes colours, borders, shadows and blur:
   layouts stay the same, so everything still reads without JavaScript, with "reduce motion", and in browsers without blur
   (they get near-solid cards instead, see the @supports block at the end). */

:root{
  --gl-sf:rgba(255,255,255,.62);--gl-sf2:rgba(255,255,255,.42);--gl-sf3:rgba(255,255,255,.55);
  --gl-solid:rgba(255,255,255,.94);--gl-field:rgba(255,255,255,.78);
  --gl-bd:rgba(255,255,255,.72);--gl-line:rgba(16,33,43,.09);
  --gl-shadow:0 10px 30px rgba(8,51,68,.08),0 1px 2px rgba(8,51,68,.05);
  --gl-shadow-hi:0 22px 48px rgba(8,51,68,.14),0 2px 6px rgba(8,51,68,.06);
  --gl-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --gl-blur:saturate(170%) blur(16px);
  --gl-page:#EEF6F9;
  --dm-sf:var(--gl-sf);--dm-sf2:var(--gl-sf2);--dm-sf3:var(--gl-sf3);--line:var(--gl-line);
}
html[data-mode=dark]{
  --gl-sf:rgba(23,29,43,.58);--gl-sf2:rgba(23,29,43,.38);--gl-sf3:rgba(34,42,59,.55);
  --gl-solid:rgba(20,26,39,.96);--gl-field:rgba(14,19,32,.7);
  --gl-bd:rgba(255,255,255,.09);--gl-line:rgba(255,255,255,.08);
  --gl-shadow:0 10px 30px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
  --gl-shadow-hi:0 22px 48px rgba(0,0,0,.45);
  --gl-hi:inset 0 1px 0 rgba(255,255,255,.06);
  --gl-page:#0B1020;
  --dm-bg:transparent;--dm-sf:var(--gl-sf);--dm-sf2:var(--gl-sf2);--dm-sf3:var(--gl-sf3);--dm-line:var(--gl-line);--line:var(--gl-line);
}

/* The page: brand-tinted light falling from the corners, fixed so cards slide over it. */
html{background:var(--gl-page)}
body{background:transparent;position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 8% -6%,color-mix(in srgb,var(--p2) 30%,transparent),transparent 62%),
    radial-gradient(760px 560px at 98% 12%,color-mix(in srgb,var(--p) 22%,transparent),transparent 60%),
    radial-gradient(820px 640px at 70% 108%,color-mix(in srgb,var(--p2) 22%,transparent),transparent 62%),
    radial-gradient(600px 480px at -6% 88%,color-mix(in srgb,var(--p) 14%,transparent),transparent 60%),
    linear-gradient(180deg,var(--gl-page),var(--gl-page))}
html[data-mode=dark] body::before{
  background:
    radial-gradient(900px 620px at 8% -6%,color-mix(in srgb,var(--p) 34%,transparent),transparent 62%),
    radial-gradient(760px 560px at 98% 14%,color-mix(in srgb,var(--p2) 16%,transparent),transparent 60%),
    radial-gradient(820px 640px at 70% 108%,color-mix(in srgb,var(--p) 24%,transparent),transparent 62%),
    linear-gradient(180deg,var(--gl-page),var(--gl-page))}

/* Bands that used to be solid now let the page show through. */
.phero,.hero.tf,section.s.tint,section.alt,.acct-bg{background:transparent}
.phero{border-bottom:1px solid var(--gl-line)}
section.alt{border-color:var(--gl-line)}

/* Frosted surfaces: the cards people read and click. */
.nav,.card,.panel,.pcard,.svc,.plan,.hc,.host-card,.steps>div,.tf-step,.faq details,.dom-form,.ann,.st-board,.ni,
.quote-card,.postcard,.vcard,.pb-method,.pb-opt,.inc div,.legal-meta,.cw-band,.offer-doc,.lp-doc,.tmsg,.pi,
.acct nav.side,.aside .me,.astat,.rowc,.aempty,.ibx-list,.ibx-read,.hx-next,.ag-top,.auth-form,.buy{
  background:var(--gl-sf);
  border:1px solid var(--gl-bd);
  box-shadow:var(--gl-shadow),var(--gl-hi);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
.card.paybox{border:1px solid var(--gl-bd)}
.auth-form{border:0;border-radius:0;box-shadow:none}
.tmsg.me{background:color-mix(in srgb,var(--pl) 70%,transparent)}

/* Lift on hover for things you can click. */
.pcard,.svc,.plan,.host-card,a.astat,.hc,.pb-method{transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s}
.pcard:hover,.svc:hover,.plan:hover,.host-card:hover,a.astat:hover,.pb-method:hover{box-shadow:var(--gl-shadow-hi),var(--gl-hi);border-color:color-mix(in srgb,var(--p) 35%,var(--gl-bd))}
.svc:hover,.plan:hover,.host-card:hover{transform:translateY(-3px)}

/* Top bar: clear glass that stays on top while scrolling. */
.nav{border-width:0 0 1px;border-radius:0;background:color-mix(in srgb,var(--gl-solid) 72%,transparent);box-shadow:0 1px 0 var(--gl-line),0 8px 24px rgba(8,51,68,.05)}

/* Small chips and buttons pick up the glass too, without the blur cost. */
.pill,.trust-chips span,.chips a,.crumb a,.crumb .here,.cart-ico,.mode-btn,.cur-sw,.tfiles a,.ofile{background:var(--gl-sf3);border-color:var(--gl-bd)}
.out,.btn.line{background:var(--gl-sf3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pri{box-shadow:0 8px 22px color-mix(in srgb,var(--p) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.pri:hover{box-shadow:0 12px 28px color-mix(in srgb,var(--p) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}

/* Fields stay easy to read: almost solid, with a clear focus ring. */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],input[type=search],input[type=date],select,textarea{
  background:var(--gl-field);border-color:color-mix(in srgb,var(--ink) 14%,transparent)}
input:focus,select:focus,textarea:focus{background:var(--gl-solid);outline:3px solid color-mix(in srgb,var(--p) 25%,transparent);outline-offset:0;border-color:var(--p)}
select option{background:var(--gl-solid);color:var(--ink)}

/* Things that sit over other content must stay solid enough to read. */
.modal-box,.as-list,.cookiebar,.skip:focus,.lock-in{background:var(--gl-solid);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--gl-bd)}
.modal{background:rgba(8,20,30,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
table.t{background:transparent}
table.t tbody tr:hover td{background:color-mix(in srgb,var(--pl) 45%,transparent)}

/* Coloured blocks get a glassy sheen: a soft light from the top corner. */
.ctaband,.ahero,.pb-head{position:relative;overflow:hidden;box-shadow:0 22px 50px color-mix(in srgb,var(--p) 28%,transparent)}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 260px at 12% -20%,rgba(255,255,255,.28),transparent 60%),radial-gradient(420px 240px at 100% 120%,rgba(255,255,255,.14),transparent 60%)}
.ctaband>*{position:relative}
.ctaband .btn{background:rgba(255,255,255,.92);color:var(--pd)}
.anext,.btn.gl,.aquote a{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.aquote{background:linear-gradient(140deg,color-mix(in srgb,var(--dm-inkbg,var(--ink)) 92%,transparent),color-mix(in srgb,var(--pd) 70%,var(--ink)));box-shadow:var(--gl-shadow)}

/* The account menu: the open page reads as a lit glass tab. */
.acct nav.side a.on{background:color-mix(in srgb,var(--p) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p) 22%,transparent)}
.acct nav.side a:hover{background:color-mix(in srgb,var(--p) 8%,transparent)}

/* Login and sign-up: the brand panel gets a frosted message card. */
.auth-brand .quote{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* Footer: deep glass over the brand colour. The EPS pay banner keeps its own white card. */
footer.foot{background:linear-gradient(160deg,var(--dm-inkbg,var(--ink)),color-mix(in srgb,var(--dm-inkbg,var(--ink)) 82%,var(--p)));position:relative}
footer.foot::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--p2) 60%,transparent),transparent)}

/* Phones: less blur keeps scrolling smooth. */
@media (max-width:640px){
  :root,html[data-mode=dark]{--gl-blur:saturate(160%) blur(10px)}
}
/* No blur support: near-solid cards so text never sits on a busy background. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--gl-sf:rgba(255,255,255,.92);--gl-sf2:rgba(255,255,255,.8);--gl-sf3:rgba(255,255,255,.88)}
  html[data-mode=dark]{--gl-sf:rgba(23,29,43,.94);--gl-sf2:rgba(23,29,43,.85);--gl-sf3:rgba(34,42,59,.9)}
  .nav{background:var(--gl-solid)}
}
/* Old browsers without color-mix keep the solid look of the classic design. */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  body::before{background:linear-gradient(180deg,var(--gl-page),var(--gl-page))}
  .nav{background:var(--gl-solid)}
}
@media (prefers-reduced-transparency:reduce){
  :root{--gl-sf:rgba(255,255,255,.96);--gl-sf2:rgba(255,255,255,.9);--gl-sf3:rgba(255,255,255,.94)}
  html[data-mode=dark]{--gl-sf:#171D2B;--gl-sf2:#1A2131;--gl-sf3:#222A3B}
}
@media print{body::before{display:none}html{background:#fff}}
/* Homepage hero: two soft brand orbs behind the cards, so the frosted glass has something to blur. */
.hero.tf{position:relative;overflow:hidden}
.hero.tf::before,.hero.tf::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero.tf::before{width:440px;height:440px;right:6%;top:8%;background:radial-gradient(circle at 30% 30%,var(--p2),var(--p) 62%,transparent 72%);opacity:.38}
.hero.tf::after{width:260px;height:260px;right:36%;bottom:8%;background:radial-gradient(circle at 40% 40%,var(--p2),transparent 70%);opacity:.3}
.hero.tf .wrap{position:relative;z-index:1}
.hero.tf .hc{background:color-mix(in srgb,var(--gl-sf) 80%,transparent)}
@media (max-width:860px){.hero.tf::before{width:300px;height:300px;right:-80px;top:auto;bottom:10%}.hero.tf::after{display:none}}