/* (Sir, Nov 2: "make the buttons more glass morphism / liquid glass, exactly like the aduok_code video, chrome silver")
   Glass button effect based on @aduok_code tutorial (instagram.com/p/DYj37n-Txg0, "Amazing Glass Button Hover Effect
   Using Pure CSS"). The video shows .glass-btn-shadow and .glass-btn-wrapper: the wrapper rule sits on the button,
   the shadow rule on its ::after. The rest (rim angle swing, colours, press) follows the same recipe we used on the
   Awanex site, here in chrome silver on black. Loaded after css/chrome-buttons.css and replaces its solid chrome look. */
@property --angle-1{syntax:'<angle>';inherits:true;initial-value:-75deg}
html body :is(.pill, a.pill, button.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall):not(#_a):not(#_b):not(#_c):not(#_d){
  --dur:400ms;--ease:cubic-bezier(.25,1,.5,1);
  /* from .glass-btn-wrapper (as shown) */
  position:relative;z-index:2;border-radius:999vw !important;transition:all var(--dur) var(--ease) !important;
  /* the glass */
  isolation:isolate;overflow:visible;border:0 !important;
  color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE !important;font-weight:600;text-shadow:0 .25em .05em rgba(0,0,0,.25);
  background:linear-gradient(-75deg,rgba(222,220,219,.10),rgba(222,220,219,.34),rgba(222,220,219,.10)),rgba(222,220,219,.10) !important;
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.42),0 .25em .125em -.125em rgba(0,0,0,.55),
    0 0 .1em .25em inset rgba(255,255,255,.16),0 12px 26px -14px rgba(0,0,0,.9) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
/* real see-through blur only where something lives behind the button (home hero + top bar); on flat dark cards the
   blur would look the same and only cost speed */
html body :is(#mfx-cta, #mfx-ask, .mfx-buy .pill, .duo-tile .pill, .gnav-cta, .hvisit-pill):not(#_a):not(#_b):not(#_c):not(#_d){
  -webkit-backdrop-filter:blur(10px) saturate(160%) !important;backdrop-filter:blur(10px) saturate(160%) !important}
/* the rim: 1px chrome edge whose bright corners sit at --angle-1 and swing round on hover */
html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall):not(#_a):not(#_b):not(#_c):not(#_d)::before{
  content:"" !important;display:block !important;position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px !important;pointer-events:none;opacity:1;animation:none;transform:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;-webkit-mask-composite:xor !important;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0) !important;
  background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(255,255,255,.85),rgba(255,255,255,0) 5% 40%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 60% 95%,rgba(255,255,255,.85)),
    linear-gradient(180deg,rgba(222,220,219,.42),rgba(222,220,219,.42)) !important;
  box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  transition:all var(--dur) var(--ease),--angle-1 500ms ease}
/* the shadow: from .glass-btn-shadow (as shown), drawn on ::after under the button */
html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall):not(#_a):not(#_b):not(#_c):not(#_d)::after{
  content:"" !important;display:block !important;
  --cutoff:2em;
  position:absolute;
  width:calc(100% + var(--cutoff));
  height:calc(100% + var(--cutoff));
  top:calc(0% - var(--cutoff) / 2);
  left:calc(0% - var(--cutoff) / 2);
  filter:blur(clamp(2px,.125em,12px));
  overflow:visible;
  pointer-events:none;
  /* ours: what the shadow looks like */
  z-index:-1;right:auto;bottom:auto;inset:auto;padding:0;border-radius:999vw;opacity:1;animation:none;-webkit-mask:none !important;mask:none !important;transform:none;
  background:radial-gradient(50% 32% at 50% 62%,rgba(0,0,0,.6),transparent) !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  transition:all var(--dur) var(--ease)}
html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall):not(#_a):not(#_b):not(#_c):not(#_d)::after{
  top:calc(0% - 1em);left:calc(0% - 1em)}
html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall) svg{position:relative;z-index:2}
@media (hover:hover) and (pointer:fine){
  html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall):not(#_a):not(#_b):not(#_c):not(#_d):hover{
    transform:translateY(-3px) scale(1.04) !important;--angle-1:-125deg;   /* (Sir: "pop up, not pop in") lifts toward you */
    background:linear-gradient(-75deg,rgba(222,220,219,.14),rgba(222,220,219,.42),rgba(222,220,219,.14)),rgba(222,220,219,.14) !important;
    box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.55),0 .15em .05em -.1em rgba(0,0,0,.5),
      0 0 .05em .1em inset rgba(255,255,255,.3),0 18px 32px -14px rgba(0,0,0,.95) !important}
  html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall):not(#_a):not(#_b):not(#_c):not(#_d):hover::after{
    top:calc(0% - 1em + .6em);opacity:1;filter:blur(6px)}   /* shadow drops further as it lifts */
}
/* press (click and tap): a little smaller, the light tilts back */
html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall):not(#_a):not(#_b):not(#_c):not(#_d):active{
  transform:translateY(0) scale(.97) !important;--angle-1:-75deg;transition-duration:.12s !important}
@media (prefers-reduced-motion:reduce){html body :is(.pill, .ln-btn, .hpm-pill, .hgrid-pill, .hvisit-pill, .gnav-cta, .abv-btn, .cox-pill, .bk-btn, .wk-btn, .acx-btn, #mfx-cta, #mfx-ask, .rpx-seeall){transition:none !important}}
/* the phone call/WhatsApp bar at the bottom becomes dark glass too, so the light glass buttons read on it */
html body .dock:not(#_a):not(#_b){background:rgba(11,11,11,.62) !important;-webkit-backdrop-filter:blur(18px) saturate(160%) !important;backdrop-filter:blur(18px) saturate(160%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 -10px 30px -12px rgba(0,0,0,.8) !important;border-color:rgba(222,220,219,.12) !important}
/* the WhatsApp button sits on the LIGHT top bar: dark icon so it shows */
html body .gnav-cta:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f){color:#0B0B0B !important;-webkit-text-fill-color:#0B0B0B !important;
  background:linear-gradient(-75deg,rgba(255,255,255,.25),rgba(255,255,255,.7),rgba(255,255,255,.25)),rgba(255,255,255,.3) !important}
/* (phone check, Nov 2) on the LIGHT repair tiles the clear glass buttons were white on white: there they are dark
   glass with light lettering, same rim and shadow */
html body .hgrid-tile.hgrid-light .hgrid-pill:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){
  background:linear-gradient(-75deg,rgba(11,11,11,.72),rgba(40,40,40,.86),rgba(11,11,11,.72)) !important;
  color:#F5F4EE !important;-webkit-text-fill-color:#F5F4EE !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(11,11,11,.5),0 10px 22px -12px rgba(0,0,0,.6) !important}
@media (hover:hover) and (pointer:fine){html body .hgrid-tile.hgrid-light .hgrid-pill:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):hover{
  background:linear-gradient(-75deg,rgba(20,20,20,.8),rgba(60,60,60,.9),rgba(20,20,20,.8)) !important}}