/* ============================================================
   BookMyMeds — Shared Bottom Nav CSS
   Upload to: public_html/css/bookmymeds-nav.css

   TO CHANGE NAV HEIGHT:
   1. Change `height` on .bottom-bar
   2. Change `padding-bottom` on .scroll (same number)
   Both must match.
   ============================================================ */

/* ── BOTTOM BAR — fixed nav at bottom of screen (mobile only) */
.bottom-bar {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 430px;
  height: 72px;                          /* ← CHANGE HEIGHT HERE */
  background: #fff; z-index: 700;
  display: flex; align-items: center; justify-content: space-around;
  padding: 6px 4px 6px;                  /* ← REDUCE PADDING TOO */
  box-shadow: 0 -3px 20px rgba(0,0,0,.1);
  border-top: 1px solid #f0f0f0;
}

/* ── SCROLL AREA — must match height above */
.scroll {
  padding-bottom: 72px;                  /* ← ALWAYS MATCH height above */
}

/* ── NAV ITEMS */
.bb-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; cursor: pointer;
  flex: 1; border: none; background: transparent;
  font-family: 'Nunito', 'Poppins', sans-serif;
  transition: transform .15s;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.bb-item:focus { outline: none; }
.bb-item:focus-visible { outline: none; }
.bb-item:active { transform: scale(.92); }

/* ── ICON BOX */
.bb-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: transform .15s;
}

/* ── LABEL */
.bb-lbl {
  font-size: 10px; font-weight: 700;
  line-height: 1; display: block;
  font-family: 'Poppins', sans-serif;
}

/* ── WHATSAPP ICON BOX */
.bb-wa-flat-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #25d366, #20b358);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
}

/* ── CALL ICON BOX */
.bb-call-flat-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff; border: 1.5px solid #e5e7eb;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ── DESKTOP — hide nav on large screens */
@media (min-width: 1280px) {
  .bottom-bar { display: none; }
}

/* ── MOBILE — remove grey body background on small screens */
@media (max-width: 599px) {
  body { background: #f7f9fc !important; }
  .phone { box-shadow: none !important; }
}