/* GBbooking master layout styling. Applied identically on every page. */
:root { --gb-blue: #0056b3; --gb-blue-dark: #004085; --gb-green: #28a745; --gb-orange: #f97316; }
body { font-family: Inter, sans-serif; }
body { padding-bottom: 4rem !important; }
@media (min-width: 1024px) { body { padding-bottom: 0 !important; } }
.text-9px { font-size: 9px !important; line-height: 11px !important; }

/* Shared master header */
.gb-master-header { background: #fff !important; border-bottom: 1px solid #e5e7eb !important; color: #111827 !important; }
.gb-master-header > div { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
#mobileMenuBtn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: .5rem; background: transparent; color: #1f2937; cursor: pointer; }
#mobileMenuBtn:hover { background: #f3f4f6; }
/* The ID selector above overrides Tailwind's lg:hidden unless we explicitly hide it. */
@media (min-width: 1024px) { #mobileMenuBtn { display: none !important; } }
/* Compact, consistent typography in the mobile/tablet Gutenberg drawer. */
.gb-master-header ~ #mobileDrawer .drawer-link { font-size: .875rem; line-height: 1.25rem; }
.gb-master-header ~ #mobileDrawer .drawer-link { padding: .625rem .75rem; }
.gb-master-header ~ #mobileDrawer { position: fixed; inset: 0; z-index: 1000; background: rgb(0 0 0 / .5); }
.gb-master-header ~ #mobileDrawer.hidden { display: none !important; }
.gb-master-header ~ #mobileDrawer > div { width: 80%; max-width: 20rem; height: 100%; overflow-y: auto; background: #fff; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }
.gb-master-header ~ #mobileDrawer .drawer-link { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .75rem; border-radius: .5rem; color: #374151; font-weight: 500; text-decoration: none; }
.gb-master-header ~ #mobileDrawer .drawer-link:hover { background: #eff6ff; color: var(--gb-blue); }
.gb-master-header ~ #mobileDrawer .drawer-link i { width: 1.5rem; flex: 0 0 1.5rem; }
.gb-master-header ~ #mobileDrawer a[href="index.html#account"] { display: flex; justify-content: center; align-items: center; width: 100%; padding: .75rem; border-radius: .75rem; background: var(--gb-blue); color: #fff; font-weight: 700; text-decoration: none; }

/* Shared mobile/tablet bottom navigation */
.gb-master-bottom-nav { position: fixed; z-index: 900; inset-inline: 0; bottom: 0; display: block; width: 100%; background: #fff; border-top: 1px solid #e5e7eb; padding: .25rem .5rem; box-shadow: 0 -4px 12px rgb(0 0 0 / .06); }
.gb-master-bottom-nav > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; text-align: center; }
.gb-master-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.75rem; padding: .25rem; color: #6b7280; text-decoration: none; }
.gb-master-bottom-nav a:first-child { color: var(--gb-blue); }
.gb-master-bottom-nav a:hover { color: var(--gb-blue); }
.gb-master-bottom-nav a i { font-size: 1rem; line-height: 1.25rem; }
.gb-master-bottom-nav a span { margin-top: .125rem; font-size: 9px; line-height: 11px; font-weight: 600; }
@media (min-width: 1024px) { .gb-master-bottom-nav { display: none !important; } }


/* Current-page state: consistent active background across all navigation layouts. */
.gb-master-header nav a.gb-nav-active {
  background: #eaf2ff !important;
  color: var(--gb-blue) !important;
}
.gb-master-header nav a.gb-nav-active i { color: var(--gb-blue) !important; }
#mobileDrawer a.drawer-link.gb-nav-active {
  background: #eaf2ff !important;
  color: var(--gb-blue) !important;
  font-weight: 700;
}
#mobileDrawer a.drawer-link.gb-nav-active i { color: var(--gb-blue) !important; }
.gb-master-bottom-nav a.gb-nav-active {
  background: #eaf2ff;
  color: var(--gb-blue) !important;
  border-radius: .625rem;
}