/* ============================================================
   Dimau glass buttons - Fiji Navigate
   Light sky-blue glassmorphism for every control in the app.
   Loaded last so it finishes buttons defined in
   navigation-preview.css, satnav-planner.css, mobile-planner.css
   and the shared Dimau widgets (account, Bula welcome, guided tour).
   ============================================================ */
:root{
  --glass-face:linear-gradient(150deg,rgba(255,255,255,.78),rgba(234,246,253,.50));
  --glass-face-hi:linear-gradient(150deg,rgba(255,255,255,.94),rgba(226,243,253,.68));
  --glass-edge:rgba(255,255,255,.74);
  --glass-ink:#10384f;
  --glass-blur:saturate(170%) blur(14px);
  --glass-lift:0 8px 20px rgba(14,52,78,.14),0 1px 2px rgba(14,52,78,.08),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(125,165,195,.16);
  --glass-lift-hi:0 14px 30px rgba(14,52,78,.20),inset 0 1px 0 rgba(255,255,255,.96);
  --glass-press:inset 0 3px 10px rgba(14,52,78,.16),inset 0 1px 0 rgba(255,255,255,.55);
  --glass-blue:linear-gradient(150deg,rgba(62,150,212,.95),rgba(15,88,152,.95));
  --glass-blue-hi:linear-gradient(150deg,rgba(110,191,238,.97),rgba(28,122,192,.95));
  --glass-blue-edge:rgba(255,255,255,.58);
  --glass-blue-lift:0 10px 24px rgba(13,74,124,.28),inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---- 1. every ordinary button and button-like link ---- */
button,
[role=button],
.dui-btn,
.dui-empty__action,
a.primary,
.google-directions,
.satellite-link,
.terrain-link,
.nav-share-options a,
.navigation-launch>a,
.resume-route,
#navigate-account .dm-acct-btn,
#navigate-welcome .bw-pill,
.bw-long,
.bw-share,
.menu-btn,
.rail-btn,
.share-btn{
  background:var(--glass-face)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-lift)!important;
  color:var(--glass-ink)!important;
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease;
}
button{border-radius:14px}

/* ---- 2. lift on hover, settle on press ---- */
button:hover,
[role=button]:hover,
.dui-btn:hover,
a.primary:hover,
.google-directions:hover,
.satellite-link:hover,
.terrain-link:hover,
.nav-share-options a:hover,
.navigation-launch>a:hover,
#navigate-account .dm-acct-btn:hover,
#navigate-welcome .bw-pill:hover{
  background:var(--glass-face-hi)!important;
  box-shadow:var(--glass-lift-hi)!important;
  transform:translateY(-1px);
}
button:active,
[role=button]:active,
.dui-btn:active,
#navigate-account .dm-acct-btn:active,
#navigate-welcome .bw-pill:active{
  transform:translateY(0);
  box-shadow:var(--glass-press)!important;
}

/* ---- 3. main actions: blue glass, still clearly the main action ---- */
button.primary,
.satnav-planner button.primary,
.simple-navigation button.primary,
a.primary,
.gt-primary,
.nav-trip-actions .nav-start,
.search>button,
.satnav-planner .search>button{
  background:var(--glass-blue)!important;
  border:1px solid var(--glass-blue-edge)!important;
  box-shadow:var(--glass-blue-lift)!important;
  color:#fff!important;
  text-shadow:0 1px 1px rgba(8,45,78,.28);
}
button.primary:hover,
.satnav-planner button.primary:hover,
a.primary:hover,
.gt-primary:hover,
.nav-trip-actions .nav-start:hover,
.search>button:hover{
  background:var(--glass-blue-hi)!important;
  box-shadow:0 14px 30px rgba(13,74,124,.32),inset 0 1px 0 rgba(255,255,255,.5)!important;
}

/* ---- 4. chosen / switched-on controls ---- */
button[aria-pressed=true],
button[aria-current],
.planner-tabs button[aria-current],
.category-chips button[aria-pressed=true],
.map-style button[aria-pressed=true],
.view-switch button[aria-pressed=true],
nav .active{
  background:linear-gradient(150deg,rgba(146,205,241,.88),rgba(74,155,210,.82))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  color:#06304e!important;
  box-shadow:0 6px 16px rgba(13,74,124,.22),inset 0 1px 0 rgba(255,255,255,.7)!important;
}

/* ---- 5. icon-only controls stay boxless at rest (owner request, 24 Sep 2026) ---- */
.nav-music,
.nav-music__play,
.nav-music__manage,
.nav-share{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.nav-music__play:hover,
.nav-music__manage:hover,
.nav-share:hover{
  background:var(--glass-face)!important;
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-lift)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}

/* ---- 6. map zoom cluster ---- */
.maplibregl-ctrl-group{
  background:var(--glass-face)!important;
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-lift)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-radius:14px!important;
  overflow:hidden;
}
.maplibregl-ctrl-group button{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--glass-ink)!important;
}
.maplibregl-ctrl-group button+button{border-top:1px solid rgba(255,255,255,.6)!important}
.maplibregl-ctrl-group button:hover{background:rgba(255,255,255,.55)!important}
.virtual-zoom button{
  background:var(--glass-face)!important;
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-lift)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}

/* ---- 7. help launcher keeps its identity, in glass ---- */
#gt-launcher{
  background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(255,232,232,.58))!important;
  border:1px solid rgba(214,86,86,.5)!important;
  box-shadow:0 10px 24px rgba(120,30,30,.20),inset 0 1px 0 rgba(255,255,255,.92)!important;
  color:#c0392b!important;
  border-radius:999px!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
#gt-launcher:hover{
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(255,224,224,.7))!important;
  box-shadow:0 14px 30px rgba(120,30,30,.26),inset 0 1px 0 rgba(255,255,255,.96)!important;
}

/* ---- 8. unavailable buttons ---- */
button:disabled,
.dui-btn:disabled,
button.primary:disabled,
.satnav-planner button.primary:disabled{
  opacity:.45;
  box-shadow:none!important;
  transform:none!important;
}

/* ---- 9. if the browser cannot blur, keep the text readable ---- */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  button,
  [role=button],
  .dui-btn,
  #navigate-account .dm-acct-btn,
  #navigate-welcome .bw-pill,
  .maplibregl-ctrl-group,
  .virtual-zoom button{background:rgba(255,255,255,.95)!important}
}

/* ---- 9b. small blue buttons need a deeper blue to carry white text ---- */
.search>button,
.satnav-planner .search>button{
  background:linear-gradient(150deg,rgba(32,122,190,.97),rgba(11,74,131,.97))!important;
  font-weight:600;
}
.search>button:hover,
.satnav-planner .search>button:hover{
  background:linear-gradient(150deg,rgba(60,158,222,.98),rgba(20,104,172,.97))!important;
}

/* ---- 9c. "Use my location" needs room to breathe ---- */
.use-location,
.satnav-planner .use-location{
  display:inline-flex!important;
  align-items:center;
  min-height:40px;
  padding:9px 14px!important;
  margin:8px 0 10px!important;
  line-height:1.15;
  border-radius:12px!important;
  font-weight:500;
}

/* ---- 9d. on phones the help pill sits right under the zoom cluster ---- */
@media(max-width:740px){
  #gt-launcher{transform:translateY(12px)}
}

/* ---- 10. respect reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  button,[role=button],.dui-btn{transition:none!important}
  button:hover,[role=button]:hover,.dui-btn:hover{transform:none!important}
}