/* ==========================================================
   FRAMEWORK7 FAB – APPLE / LIQUID GLASS STYLE (FINAL)
   ========================================================== */

/* allow FAB to float above everything */
.fab, .fab-buttons {
  overflow: visible !important;
  z-index: 9999;
}

/* --- Fixed FAB position (center bottom example) --- */
.fab-center-bottom {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 99999 !important;
}

/* --- Main + button styling --- */
.fab > .fab-btn {
  background: linear-gradient(135deg, #007aff, #00c6ff);
  color: #fff;
  //box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* --- Icon rotation for main button --- */
.fab .f7-icons {
  transition: transform 0.3s ease;
}
.fab.fab-opened > .fab-btn .f7-icons {
  transform: rotate(45deg);
}

/* ==========================================================
   CHILD BUTTONS + FLOATING LABELS
   ========================================================== */

/* each mini button wrapper */
.fab-buttons .fab-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* mini buttons (glass style) */
.fab-buttons .fab-btn {
  background: rgba(255, 255, 255, 0.25);
  color: #000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s ease;
  opacity: 0;
  transform: translateY(10px);
}
.fab.fab-opened .fab-buttons .fab-btn {
  opacity: 1;
  transform: translateY(0);
}

/* floating label beside or above each icon */
.fab-buttons .fab-label {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: rgba(255,255,255,0.25);
  color: #000;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 12px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  text-transform: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*following to show similar fab button in tips panel*/
/* Inline FAB style */
.inline-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Size tuned to Font Awesome fa-3x + fa-fw */
  width: 1.0em;          /* 1.25em × 3 = matches fa-3x fixed width */
  height: 1.0em;
  font-size: 3em;         /* same as fa-3x */
  border-radius: 10px;    /* square with soft corners */
  background: #007aff;    /* iOS blue */
  color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  vertical-align: middle;
  margin-right: 0.0em;
  text-align: center;
  cursor: default;
  line-height: 1;
}

.inline-fab:hover {
  background: #0063cc;
}

/* show labels only when opened */
.fab.fab-opened .fab-buttons .fab-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* small arrow pointer */
.fab-buttons .fab-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  //border-width: 6px;
  border-style: solid;
  //border-color: transparent transparent transparent rgba(255,255,255,0.25);
}

/* icon size inside buttons */
.fab-buttons .f7-icons {
  font-size: 20px;
  text-transform: none;
  font-family: "Framework7 Icons" !important;
}

/* optional hover lift */
.fab-buttons .fab-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Always render Framework7 icons as icons, not text */
.f7-icons, .icon.f7-icons {
  font-family: "Framework7 Icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* hidden state */
.fab--hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
/* shown state (remove fab--hidden) */
#mainFab {
  transition: opacity .25s ease, transform .25s ease;
}

.hidden-toggle {
  display: none !important;
}

.fabSuppress {  // this used in pages with simple bottom middle popup (the one that just opens 'More Info' popup )
--f7-fab-size: 40px;
--f7-fab-bg-color: white;
 --f7-fab-border-radius: 40px;
 --f7-fab-box-shadow: 0px 0px 0px rgba(255, 255, 255, 255);
 
 }
 .fabSuppress .popup-open {
   width: 40px;
   height: 40px;
 }

/* Back arrow in white circle */
.backArrowCircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  //border: 2px solid #000;      /* black edge */
  border-radius: 50%;          /* circular shape */
  background: #fff;            /* white fill */
  color: #000;                 /* black glyph */
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  cursor: pointer;             /* optional */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* subtle “floating” look */
  transition: transform 0.2s ease;
}

.backArrowCircle i {
  margin-right: 0px !important; //to overrfide setting in index.html
}

.backArrowCircle:hover {
  transform: scale(1.05);
}

/* === Optional positioning if you still want it to “float” like a FAB === */
#fabMiddle .fab-btn {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  z-index: 9999 !important;
}

#fabMiddle.speed-dial > .fab-btn {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  z-index: 9999 !important;
}

/* === Optional positioning if you still want it to “float” like a FAB === */
.fabBack {
  position: fixed;
  bottom: 45px;
  left: 10%;
  transform: translateX(-50%);
  z-index: 9999;
}

.fab-buttons-top i[class^="fa-"] {
  font-size: 32px;
  line-height: 72px;
  color: #000; /* or your preferred color */
  width: 100%;
  text-align: center;
}