/* define defaults for light mode */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #121212; /* fallback for dark mode */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

html.light-mode #pageLoader {
  background-color: white;
  color: #333;
}

:root {
  --card-bg:   #fff;
  --card-fg:   #333;
}



/* override for dark mode */
body.dark-mode {
  --card-bg:   #333;
  --card-fg:   #fff;
}

/* apply to your gbos card */
#gbosMain {
  background-color: var(--card-bg);
  color:            var(--card-fg);
}

/* ensure placeholders on inputs inherit readable color */
#gbosMain input::placeholder,
#gbosMain textarea::placeholder {
  color: var(--card-fg);
  opacity: 0.7; /* optional: soften the placeholder text */
}

/* Card-style separation for Orders and Bookings */
.order-section,
.booking-section {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  background-color: var(--card-bg);
  color: var(--card-fg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Distinct accents */
.order-section { border-left: 6px solid #0078D4; }  /* blue accent */
.booking-section { border-left: 6px solid #d32f2f; } /* red accent */

/* Consistent headers inside each section */
.order-section h3,
.booking-section h3 {
  margin-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

/* Dark mode accent tuning */
body.dark-mode .order-section { border-left-color: #66b2ff; }
body.dark-mode .booking-section { border-left-color: #ff6666; }


/* === Base Styles === */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 40px;
  background-color: white;
  color: #333;
  max-width: 800px;
  font-size: 16px;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

input, select, textarea, button {
  font-size: 16px;
  padding: 8px 10px;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-bottom: 8px;
}

button {
  cursor: pointer;
}

/* === Header & Title Block === */
header {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.title-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 15px;
  padding: 0 10px;
}

.title-block .line1,
.title-block .line2 {
  font-size: 36px;
  margin: 0;
}

.title-block .line1 {
  flex-basis: 100%;
}

.title-block .line2 {
  flex: 1;
}

.title-block img {
  height: 60px;
  transform: translate(-10px, -25px);
}

/* === Top Bar Navigation === */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
  gap: 10px;
}

.left-buttons,
.right-button {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.left-buttons a,
.right-button a {
  display: inline-block;
}

.nav-button {
  padding: 6px 10px;
  font-size: 15px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  width: auto;
  max-width: 200px;
  display: inline-block;
  white-space: nowrap;
  min-width: 60px; /* or whatever width suits your layout */
  text-align: center; /* ensures label is centered */
}

.nav-button:hover {
  background-color: #222;
}

/* === Dark Mode Toggle === */
#darkToggle {
  padding: 6px 10px;
  font-size: 15px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 4px;
}

#darkToggle:hover {
  background-color: #222;
}

/* === Dark Mode Styles === */
body.dark-mode {
  background-color: #121212;
  color: #eee;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode button {
  background-color: #333;
  color: #eee;
  border-color: #555;
}
body.dark-mode input:focus {
  background-color: #2a2a2a;
  border-color: #888;
  outline: none;
}

body.dark-mode button:hover {
  background-color: #444;
}
body.dark-mode .input-group button {
  background-color: #0078D4 !important;
  color: white !important;
  border: none !important;
}

body.dark-mode .input-group button:hover {
  background-color: #005A9E !important;
}
body.dark-mode .vendor-section .input-group button {
  background-color: #0078D4 !important;
  color: white !important;
  border: none !important;
  pointer-events: auto !important;
}

body.dark-mode .vendor-section .input-group button:hover {
  background-color: #005A9E !important;
}
body:not(.dark-mode) .input-group button {
  background-color: #0078D4 !important;
  color: white !important;
  border: none !important;
}

body:not(.dark-mode) .input-group button:hover {
  background-color: #005A9E !important;
}

body.dark-mode header {
  background-color: #121212;
  color: #eee;
}

body.dark-mode header h1,
body.dark-mode header button {
  color: #eee;
}
body.dark-mode .vendor-section .input-group input,
body.dark-mode .vendor-section .input-group select,
body.dark-mode .vendor-section .input-group button {
  background-color: #333 !important;
  color: #eee !important;
  border-color: #555 !important;
}
body.dark-mode .vendor-section {
  background-color: #1a1a1a !important;
  border-color: #444 !important;
}

body.dark-mode .vendor-section .input-group input::placeholder {
  color: #ccc !important;
}
body.dark-mode select {
  background-color: #333;
  color: #eee;
  border-color: #555;
}
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:hover {
  -webkit-text-fill-color: #eee !important;
  background-color: #333 !important;
  box-shadow: 0 0 0px 1000px #333 inset !important;
  transition: background-color 0s ease-in-out 0s;
}
body.dark-mode select option {
  background-color: #333;
  color: #eee;
}
html.dark-mode input,
body.dark-mode input {
  background-color: #333;
  color: #eee;
}

/* === FIX: Placeholder Visibility in Dark Mode === */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #ccc !important;
  opacity: 1;
}

/* === Form Layout === */
form > * {
  margin-bottom: 8px;
}

#orderForm label {
  display: block;
  margin-top: 2px;
  font-weight: 500;
}

#orderForm h2 {
  font-size: 20px;
  margin-bottom: 16px;
}

#orderForm input,
#orderForm select,
#orderForm textarea {
  width: 100%;
  max-width: 100%;
  margin-bottom: 5px;
}

#orderForm button {
  width: auto;
  max-width: 200px;
  display: inline-block;
  margin-bottom: 5px;
}

/* === Input Group === */
.input-group {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.input-group input,
.input-group select {
  flex: 1;
  max-width: 300px;
}

.input-group button {
  flex-shrink: 0;
  background-color: #0078D4;
  color: white;
}


.input-group button:hover {
  background-color: #005A9E;
}

/* === Submit & Delete Buttons === */
#submitOrder {
  background-color: #0078D4;
  color: white;
  padding: 8px 14px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}

#submitOrder:hover {
  background-color: #005A9E !important;
}

.delete-container {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.delete-container button:not(#submitOrder),
.item-row button {
  background-color: #d32f2f;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 16px;
}

.delete-container button:not(#submitOrder):hover,
.item-row button:hover {
  background-color: #b71c1c;
}

/* === Item Row === */
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.item-description {
  flex: 1;
  margin-right: 10px;
}

.item-row .delete-button {
  white-space: nowrap;
}

/* === Custom Items === */
#customItems {
  height: 120px;
  resize: vertical;
  margin-top: 20px;
}

#customItems::placeholder {
  color: #333;
  font-size: 16px;
  opacity: 1;
}

/* === Vendor Link === */
.vendor-link {
  margin-top: 40px;
  text-align: center;
}

.vendor-link a {
  text-decoration: none;
}

.vendor-link button {
  background-color: #444;
  color: white;
  padding: 6px 10px;
  font-size: 15px;
  border: none;
  border-radius: 4px;
}

.vendor-link button:hover {
  background-color: #222;
}

/* === Vendor Dashboard Grid === */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.vendor-section {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.vendor-section h3 {
  margin-top: 0;
  font-size: 18px;
  margin-bottom: 12px;
}

/* === Responsive Tweaks === */
@media (max-width: 650px) {
  body {
    margin: 20px;
    font-size: 16px;
  }
    .footer {
    font-size: 14px !important;
 
}
.cool-font {
  font-size: 60px !important;
}

  .title-block {
    padding: 0 8px;
  }

  .title-block .line1,
  .title-block .line2 {
    font-size: 36px;
  }

  header {
    margin-bottom: 16px;
  }

  .input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .delete-container {
    justify-content: center;
    margin-top: 16px;
  }

  #darkToggleContainer {
    justify-content: center;
    padding: 10px 0;
  }
}
.cool-font {
  font-family: 'Segoe UI', 'Open Sans', sans-serif;
  font-size: 2.5em;
  font-style: italic;
  font-weight: bold;
}

.bold-italic {
  font-weight: bold;
  font-style: italic;
}

.line2 {
  font-size: 1.2em;
  margin-top: -10px;
  color: #555;
}

.title-block {
  text-align: left;
  margin-bottom: 20px;
}

.title-block img {
  max-height: 80px;
  margin-top: 10px;
  display: block;
}
body.dark-mode .footer {
  background-color: #121212 !important;
  color: #eee !important;
  border-top-color: #444 !important;
}
.footer {
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 14px;
  color: #444;
  text-align: center;
  border-top: 1px solid #ccc;
}

.footer a {
  color: #0066cc;
}

body.dark-mode .footer {
  background-color: #121212 !important;
  color: #eee !important;
  border-top-color: #444 !important;
}

body.dark-mode .footer a {
  color: #66b2ff !important;
}
body:not(.dark-mode) {
  background-color: white;
  color: #333;
}

body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea,
body:not(.dark-mode) button {
  background-color: white;
  color: #333;
  border-color: #ccc;
}

body:not(.dark-mode) button:hover {
  background-color: #f0f0f0;
}

body:not(.dark-mode) header {
  background-color: white;
  color: #333;
}

body:not(.dark-mode) header h1,
body:not(.dark-mode) header button {
  color: #333;
}

body:not(.dark-mode) input::placeholder,
body:not(.dark-mode) textarea::placeholder {
  color: #666;
  opacity: 1;
}

body:not(.dark-mode) .footer {
  background-color: #f2f2f2;
  color: #444;
  border-top-color: #ccc;
}

body:not(.dark-mode) .footer a {
  color: #0066cc;
}
body:not(.dark-mode) .footer a {
  color: #0066cc;
}
/* === Light Mode Button Fixes === */
body:not(.dark-mode) .nav-button,
body:not(.dark-mode) #darkToggle,
body:not(.dark-mode) .vendor-link button,
body:not(.dark-mode) #submitOrder,
body:not(.dark-mode) .delete-container button:not(#submitOrder),
body:not(.dark-mode) .item-row button {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
}

body:not(.dark-mode) .nav-button:hover,
body:not(.dark-mode) #darkToggle:hover,
body:not(.dark-mode) .vendor-link button:hover,
body:not(.dark-mode) #submitOrder:hover,
body:not(.dark-mode) .delete-container button:not(#submitOrder):hover,
body:not(.dark-mode) .item-row button:hover {
  background-color: #e0e0e0;
}
body.dark-mode input:-webkit-autofill {
  background-color: #333 !important;
  color: #eee !important;
  -webkit-box-shadow: 0 0 0px 1000px #333 inset !important;
  transition: background-color 0s ease-in-out 0s;
}
/* === Dark Mode Compatibility: html.dark-mode === */
html.dark-mode {
  background-color: #121212;
  color: #eee;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode button {
  background-color: #333;
  color: #eee;
  border-color: #555;
}

html.dark-mode input:focus {
  background-color: #2a2a2a;
  border-color: #888;
  outline: none;
}

html.dark-mode button:hover {
  background-color: #444;
}

html.dark-mode header {
  background-color: #121212;
  color: #eee;
}

html.dark-mode header h1,
html.dark-mode header button {
  color: #eee;
}

html.dark-mode .vendor-section {
  background-color: #1a1a1a !important;
  border-color: #444 !important;
}

html.dark-mode .vendor-section .input-group input,
html.dark-mode .vendor-section .input-group select,
html.dark-mode .vendor-section .input-group button {
  background-color: #333 !important;
  color: #eee !important;
  border-color: #555 !important;
}

html.dark-mode .vendor-section .input-group input::placeholder {
  color: #ccc !important;
}

html.dark-mode select option {
  background-color: #333;
  color: #eee;
}

html.dark-mode input:-webkit-autofill,
html.dark-mode input:-webkit-autofill:focus,
html.dark-mode input:-webkit-autofill:hover {
  -webkit-text-fill-color: #eee !important;
  background-color: #333 !important;
  box-shadow: 0 0 0px 1000px #333 inset !important;
  transition: background-color 0s ease-in-out 0s;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #ccc !important;
  opacity: 1;
}

html.dark-mode .footer {
  background-color: #121212 !important;
  color: #eee !important;
  border-top-color: #444 !important;
}

html.dark-mode .footer a {
  color: #66b2ff !important;
}
#orderForm button[type="submit"] {
  display: block;
  margin: 20px auto 0 auto; /* top margin + auto horizontal centering */
}
/* mimic your old form container */
#gbosMain {
  max-width:     600px;
  margin:        2rem auto;
  padding:       1.5rem;
  background:    var(--card-bg);
  color:         var(--card-fg);
  border-radius: 8px;
  box-shadow:    0 2px 8px rgba(0, 0, 0, 0.1);
}
#gbosMain input,
#gbosMain select,
#gbosMain textarea,
#gbosMain button {
  background-color: var(--card-bg);
  color:            var(--card-fg);
  border-color:     #ccc;
}
#gbosMain input[type="date"]::-webkit-datetime-edit,
#gbosMain input[type="time"]::-webkit-datetime-edit {
  color: var(--card-fg);
}

/* space out each direct child section */
#gbosMain > div {
  margin-bottom: 1.25rem;
}

/* full-width labels, inputs, selects, textareas, buttons */
#gbosMain label,
#gbosMain select,
#gbosMain input,
#gbosMain textarea,
#gbosMain button {
  display: block;
  width: 100%;
}

/* tighten up label spacing */
#gbosMain label {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

/* center and space any headings inside the card */
#gbosMain h3 {
  margin-top: 0;
  text-align: center;
}
/* ── Force Submit Order & Booking colors in both modes ── */

/* Primary “Submit Order” button stays blue */
#submitOrder,
body:not(.dark-mode) #submitOrder,
body.dark-mode #submitOrder {
  background-color: #0078D4;
  color:           #fff;
  border:          none;
}

/* Hover state */
#submitOrder:hover {
  background-color: #005A9E;
}

/* Secondary “Submit Booking” button stays red */
#submitBooking,
body:not(.dark-mode) #submitBooking,
body.dark-mode #submitBooking {
  background-color: #d32f2f;
  color:           #fff;
  border:          none;
}

/* Hover state */
#submitBooking:hover {
  background-color: #b71c1c;
}
/* ── Force red for “Submit Booking” in light mode ── */
body:not(.dark-mode) .delete-container button#submitBooking {
  background-color: #d32f2f;
  color:           #fff;
  border:          none;
}

/* Hover state */
body:not(.dark-mode) .delete-container button#submitBooking:hover {
  background-color: #b71c1c;
}
/* ──────────────────────────────────────────────────────
   1) Push “Total” to the bottom of the list
   2) Stack each item’s description over its Delete button
──────────────────────────────────────────────────────*/

/* make the panel a column so we can reorder its pieces */
.order-panel {
  display: flex;
  flex-direction: column;
}
.order-panel .order-total {
  margin: 8px 0;
  font-weight: bold;
  font-size: 1.1em;
  text-align: right;
}


/* ensure every item‐row stays above the total */
.order-panel .item-row {
  order: 0;
  display: flex;              /* we’ll override this below */
  flex-direction: column;     /* stack description + button */
  align-items: stretch;       /* allow full-width button */
  padding: 8px 0;             /* a little breathing room */
  border-bottom: none;
}

/* description sits on top, with a bit of bottom margin */
.order-panel .item-row .item-description {
  margin-bottom: 6px;
  font-size: 1em;
  color: inherit;
}

/* delete button spans 100% under the description */
.order-panel .item-row .delete-button {
  width: 100%;
  background-color: #d32f2f;
  color: white;
  border: none;
  padding: 6px;
  border-radius: 4px;
}

/* place the grand-total at the top of the list */
.order-panel .order-total {
  order: -1;
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 1.1em;
  text-align: right;
}

/* ensure items come after Total */
.order-panel .item-row {
  order: 0;
}

/* style the item-row delete button */
.item-row .delete-button {
  background-color: #d32f2f;
  color:            #fff;
  border:           none;
  padding:          8px 12px;
  border-radius:    4px;
  cursor:           pointer;
  font-size:        16px;
  transition:       background-color 0.2s ease;
}

/* hover state */
.item-row .delete-button:hover {
  background-color: #b71c1c;
}
/* ── Force red delete buttons in both modes ── */

/* In light mode, override the “button” reset */
body:not(.dark-mode) .item-row .delete-button {
  background-color: #d32f2f;
  color:            #fff;
  border:           none;
  padding:          8px 12px;
  border-radius:    4px;
  cursor:           pointer;
  font-size:        16px;
  transition:       background-color 0.2s ease;
}

/* In dark mode, reinforce the same styling */
body.dark-mode .item-row .delete-button {
  background-color: #d32f2f;
  color:            #fff;
  border:           none;
  padding:          8px 12px;
  border-radius:    4px;
  cursor:           pointer;
  font-size:        16px;
  transition:       background-color 0.2s ease;
}

/* Hover states */
body:not(.dark-mode) .item-row .delete-button:hover,
body.dark-mode   .item-row .delete-button:hover {
  background-color: #b71c1c;
}
/* ── Force real, red delete buttons ── */
.item-row button.delete-button {
  background-color: #d32f2f !important;
  color:            #fff    !important;
  border:           none    !important;
  padding:          8px 12px !important;
  border-radius:    4px     !important;
  cursor:           pointer !important;
  font-size:        16px    !important;
  transition:       background-color 0.2s ease !important;
}

.item-row button.delete-button:hover {
  background-color: #b71c1c !important;
}
/* 1) Make date & time inputs full-width instead of capped at 300px */
#gbosMain .input-group input[type="date"],
#gbosMain .input-group input[type="time"] {
  flex:       1 1 100%;
  max-width:  100%;
  width:      100%;
}

/* 2) Match “Other Items” and “Any messages” textarea heights */
#gbosMain textarea#customItems,
#gbosMain textarea#bookingMessage {
  height:     120px;    /* same as your customItems */
  resize:     vertical; /* allow the user to grow/shrink */
}

/* match the customItems gap on the booking textarea */
#bookingMessage {
  margin-top: 20px;
}
/* ── or add space above any booking header ── */
#gbosMain h3 {
  margin-top: 0rem;     /* pushes all h3s down */
}
#gbosMain .booking-header {
  margin-top: 1rem;     /* was 2rem, increase this for extra space */
}
/* Match footer line color to header line in dark mode */
body.dark-mode .footer {
  border-top-color: #ccc !important; /* same as header line */
}
/* override inline max-width on the search input */
/* Compact, responsive search input */
.top-bar .search-container input#globalSearch {
  width: 250px !important;       /* base desktop width */
  max-width: 40vw;               /* don’t let it blow up */
  box-sizing: border-box !important;
  flex-shrink: 1;                /* allow shrinking inside flex */
}

/* Match dropdown width to input */
.top-bar .search-container #searchResults {
  width: 250px !important;       /* keep results aligned with input */
  max-width: 40vw !important;
}

/* Mobile: tighten further to avoid wrapping dark toggle */
@media (max-width: 650px) {
  .top-bar .search-container input#globalSearch {
    width: 140px !important;
    max-width: 35vw;
    font-size: 0.85em;
  }
  .top-bar .search-container #searchResults {
    width: 100px !important;
    max-width: 35vw !important;
  }
}

.top-bar {
  gap: 8px;
  flex-wrap: nowrap;   /* keep on one line until truly impossible */
}

.left-buttons {
  gap: 8px;
  flex-wrap: nowrap;   /* reduce wrapping pressure */
}

#searchResults:empty {
  border: none !important;
}
body.dark-mode #searchResults {
  border: 1px solid #555;
  background-color: #1a1a1a;
  color: #eee;
}
/* Ensure "No matches found." is readable in both modes */
.top-bar .search-container #searchResults em {
  color: var(--card-fg);
  font-style: italic;
  opacity: 0.95;
}

/* If you need a slightly different tone in dark mode */
body.dark-mode .top-bar .search-container #searchResults em {
  color: #696666;
}
/* three-column top-bar: left | center (flex) | right */
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* left and right keep their intrinsic width */
.left-buttons,
.right-button {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* center expands to fill remaining space and centers its children */
.top-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0; /* allow children to shrink nicely on small screens */
}

/* ensure search-container stays inline and doesn't stretch */
.top-center .search-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* dropdown should align under input when centered */
.top-center .search-container #searchResults {
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 6px);
  position: absolute;
  width: auto;
  min-width: 140px;
  max-width: 80vw;
  box-sizing: border-box;
}
/* Force dropdown to center under the centered search container */
.top-center .search-container #searchResults {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: calc(100% + 6px) !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: 80vw !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
}
/* Hide the "line" under search results when there are no visible results.
   This is defensive: handles empty, whitespace-only, inline styles, or pseudo-elements. */



/* 2) Fallback: hide when truly empty (no child nodes) */
.top-bar .search-container #searchResults:empty,
.top-center .search-container #searchResults:empty {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.order-section .store-title {
  margin-top: 0;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

/* Optional: ensure the card itself doesn’t add unintended top gap */
.order-section {
  margin-top: 0;
  padding-top: 16px;
}
.booking-section h3 {
  margin-top: 0;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
#gbos-darkloader {
  pointer-events: auto; /* allow blocking clicks while visible */
}
#gbos-darkloader.hidden {
  pointer-events: none;
  visibility: hidden;
}
#gbos-darkloader .dot { display: none !important; }
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #444;
  color: white;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  padding: 8px;
  z-index: 1;
}

.dropdown.show .dropdown-content {
  display: block;
}
/* Dark mode dropdown styling */
body.dark-mode .dropdown-content,
html.dark-mode .dropdown-content {
  background-color: #1a1a1a;   /* dark background */
  color: #eee;                 /* light text */
  border: 1px solid #555;      /* subtle border */
}

body.dark-mode .dropdown-content label,
html.dark-mode .dropdown-content label {
  color: #eee;                 /* ensure labels are readable */
}

body.dark-mode .dropdown-content input[type="checkbox"],
html.dark-mode .dropdown-content input[type="checkbox"] {
  accent-color: #66b2ff;       /* blue checkboxes in dark mode */
}
body.dark-mode .dropdown-content label:hover {
  background-color: #2a2a2a;
}