/* ─────────────────────────────────────────────────────────────────────────────
    GLOBAL VARIABLES & THEME SETUP
───────────────────────────────────────────────────────────────────────────── */
:root {
    /* 🎨 Brand Colors */
    --color-rose: #f7005b;
    --color-rose-light: #ff91b4;
    /* Lighter shade for accents/backgrounds */
    --color-rose-dark: #ab003c;
    /* Darker shade for hover/active */
    --color-success: #28a745;
    /* Green for success states/amounts */
    --color-secondary: #979899;
    /* Neutral secondary text color */

    /* 🧱 Font Sizes & Line Heights */
    --fz-base: clamp(0.95rem, 1.5vw, 1.05rem);
    --fz-sm: calc(var(--fz-base) / 1.2);
    --fz-lg: calc(var(--fz-base) * 1.2);
    --lh-base: 1.6;
    --lh-tight: 1.3;

    /* 🌀 Transitions */
    --transition-speed-fast: 0.2s;
    /* Faster for quick feedback like hover */
    --transition-speed-medium: 0.3s;
    /* General UI transitions */
    --transition-speed-slow: 0.6s;
    /* For larger animations like panel changes */
    --transition-speed-header: 1s;
    /* Specifically for header background sync */
    --transition-ease: ease-in-out;

    /* 🧊 Pill Bar Styling */
    --pill-radius: 999px;
    --pill-padding: 0.6rem 1.1rem;
    --pill-gap: 0.5rem;
    --pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Colors derived from theme, not hardcoded */

    /* Card Defaults */
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    --card-radius: 12px;

    /* 🎨 Light Theme Defaults */
    --color-text: #000;
    --color-card-bg: #fff;
    --color-card-header-bg: #fde2e4;
    /* Light pink for order/live order headers */
    --color-border: #ddd;
    --color-input-bg: #f5f6fa;
    --color-error: red;
    --color-pill-bg: var(--color-rose);
    /* Main pill bar background */
    --header-bg: var(--color-rose);
    /* Default header background, changes via JS */
    --bg-gradient: linear-gradient(135deg, #f8f9fa, #eaeaea);

    /* Pill-bar specific light theme colors */
    --pill-highlight-color: #fff;
    --pill-hover-bg: rgba(255, 255, 255, 0.15);
    --pill-active-bg: #fff;
    --pill-active-color: var(--color-rose);
}

/* 🌙 Dark Theme Overrides */
:root[data-theme="dark"] {
    --color-text: #e0e0e0;
    --color-card-bg: #2c2c2c;
    --color-card-header-bg: #3c3c3c;
    /* Darker header for dark mode */
    --color-border: #444;
    --color-input-bg: #3a3a3a;
    --color-error: #ff7070;
    --color-pill-bg: var(--color-rose-dark);
    --header-bg: var(--color-rose-dark);
    --bg-gradient: #1e1e1e;
    /* Solid dark background for dark mode */

    /* Pill-bar specific dark theme colors */
    --pill-highlight-color: var(--color-rose-light);
    --pill-hover-bg: rgba(255, 255, 255, 0.1);
    --pill-active-bg: rgba(255, 255, 255, 0.08);
    --pill-active-color: var(--color-rose-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
    GLOBAL & BODY
───────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Ensure no scrollbar on HTML */
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--fz-base);
    line-height: var(--lh-base);
    background: var(--bg-gradient);
    color: var(--color-text);
    text-align: center;
    transition:
        background var(--transition-speed-medium) var(--transition-ease),
        color var(--transition-speed-medium) var(--transition-ease);
    /* Prevent horizontal scroll from overflowing content */
    overflow-x: hidden;
}

/* Base Panel Styling - applies to all main panels */
.main-panel {
    display: none;
    /* Hidden by default */
    opacity: 0;
    transform: translateY(1rem);
    /* Start slightly below */
    transition: opacity var(--transition-speed-medium) ease, transform var(--transition-speed-medium) ease;
    flex: 1;
    /* Allow panels to fill available space */
    width: 100%;
}

.main-panel.show.active {
    display: block;
    /* Make visible when active */
    opacity: 1;
    transform: translateY(0);
    /* Slide into place */
    animation: slideIn var(--transition-speed-medium) forwards var(--transition-ease);
    /* Apply slide-in animation */
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
    TYPOGRAPHY & LINKS
───────────────────────────────────────────────────────────────────────────── */
h1 {
    font-size: 1.8rem;
    /* Adjusted for better visibility */
    margin: 0;
}

h2 {
    font-size: var(--fz-lg);
    line-height: var(--lh-tight);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: var(--fz-lg);
    line-height: var(--lh-tight);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

h4 {
    font-size: var(--fz-base);
    line-height: var(--lh-tight);
    font-weight: 500;
    margin-bottom: 1rem;
}

h5 {
    font-size: var(--fz-lg);
    /* For card headers */
    line-height: var(--lh-tight);
    font-weight: 600;
}

a {
    color: var(--color-rose);
    text-decoration: none;
    transition: color var(--transition-speed-fast);
}
a:hover,
a:focus {
  color: var(--color-rose-dark);
  text-decoration: underline;
}
/* ─── Floating Menu Button ─────────────────────────────── */
/* ensure the button can host an absolutely‑positioned ::before */
.pill-toggle-btn {
  position: fixed;
  top: 60%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 2000;
  background: var(--brand-rose);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
  
  /* make room for the pseudo-element */
  overflow: visible;
}

/* the “background” halo */
.pill-toggle-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;    /* adjust size as needed */
  height: 4rem;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  z-index: -1;    /* sit behind the button */
}

/* lift and recolor on hover/focus */
.pill-toggle-btn:hover,
.pill-toggle-btn:focus-visible {
  background: var(--brand-rose-dark);
  transform: translateY(-50%) translateY(-4px);
  box-shadow: var(--shadow-lg);
  outline: none;
}

/* ─── Floating Menu Container (Light Mode) ───────────────────────────── */
.menu-dropdown {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(calc(-100% - 0.5rem)) scale(0.95);

  /* Light frosted‑glass */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);

  border-radius: 1.25rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  width: clamp(260px, 90vw, 320px);

  z-index: 1049;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-dropdown.show {
  opacity: 1;
  transform: translateY(calc(-100% - 0.5rem)) scale(1);
  pointer-events: auto;
}

/* ─── Menu Items (Light Mode) ────────────────────────── */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.menu-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 0.75rem;

  padding: 0.75rem 0.25rem;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  text-align: center;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-grid button:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.menu-grid button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-rose-light);
}

.menu-grid button span,
.menu-grid button small {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.75rem;
  line-height: 1;
}

/* ─── Dark Mode Overrides ───────────────────────────── */
:root[data-theme="dark"] .menu-dropdown {
  /* Dark frosted‑glass */
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .menu-grid button {
  background: rgba(50, 50, 50, 0.6);
  color: var(--color-text-on-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .menu-grid button:hover {
  background: rgba(60, 60, 60, 0.8);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .menu-grid button:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-rose-light);
}



/* ─────────────────────────────────────────────────────────────────────────────
    BUTTONS
───────────────────────────────────────────────────────────────────────────── */
.btn-rose,
.btn-outline-rose {
    font-size: var(--fz-base);
    font-weight: 500;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition:
        background-color var(--transition-speed-fast),
        border-color var(--transition-speed-fast),
        color var(--transition-speed-fast),
        transform var(--transition-speed-fast);
}

/* Filled “Rose” */
.btn-rose {
    background-color: var(--color-rose);
    border: 1px solid var(--color-rose);
    color: #fff;
}

.btn-rose:hover,
.btn-rose:focus {
    background-color: var(--color-rose-dark);
    border-color: var(--color-rose-dark);
    color: #fff;
    transform: translateY(-1px);
    /* Subtle lift on hover */
}

/* Outline “Rose” */
.btn-outline-rose {
    background: transparent;
    border: 1px solid var(--color-rose);
    color: var(--color-rose);
}

.btn-outline-rose:hover,
.btn-outline-rose:focus {
    background: var(--color-rose);
    color: #fff;
    transform: translateY(-1px);
    /* Subtle lift on hover */
}

/* Special “Order” Button */
.btn-order {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    background-image: linear-gradient(45deg, var(--color-rose), var(--color-rose-dark));
    border: none;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: box-shadow var(--transition-speed-medium), transform var(--transition-speed-medium);
}

.btn-order:hover,
.btn-order:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Disabled state for buttons */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    /* Remove hover effect */
    box-shadow: none;
    /* Remove hover shadow */
}


/* ─────────────────────────────────────────────────────────────────────────────
    HEADER & FOOTER
───────────────────────────────────────────────────────────────────────────── */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 1.25rem;
    background: var(--header-bg);
    /* Controlled by JS for slider sync */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-speed-header) var(--transition-ease);
    /* Smooth transition for header color */
    display: flex;
    flex-direction: column;
    /* Stack h1 and p vertically */
    justify-content: center;
    align-items: center;
}

.header h1,
.header p {
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.header h1 {
    color: #fff;
    font-weight: 600;
}

.header p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.footer {
    background: var(--color-rose);
    color: #fff;
    text-align: center;
    padding: 1.25rem;
    font-size: 0.9rem;
    margin-top: auto;
    /* Push footer to the bottom */
}

.footer a {
    color: #fff;
    margin: 0 0.625rem;
    text-decoration: none;
    transition: text-decoration var(--transition-speed-fast);
}

.footer a:hover,
.footer a:focus {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
    FORMS & INPUTS
───────────────────────────────────────────────────────────────────────────── */
.input-field,
.form-control,
.form-select {
    width: 100%;
    padding: 0.75rem;
    font-size: var(--fz-base);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-input-bg);
    color: var(--color-text);
    transition:
        background var(--transition-speed-fast),
        border-color var(--transition-speed-fast),
        box-shadow var(--transition-speed-fast);
}

.input-field:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--color-rose);
    box-shadow: 0 0 0 0.2rem rgba(199, 44, 72, 0.25);
    outline: none;
    outline-offset: 2px;
    /* Improves accessibility for keyboard navigation */
}

/* Custom switch for theme toggles */
.form-check-input.theme-toggle {
    cursor: pointer;
    background-color: var(--color-rose-dark);
    /* Default background for off-state */
    border-color: var(--color-rose-dark);
    /* Default border color */
    transition: background-color var(--transition-speed-fast) ease, border-color var(--transition-speed-fast) ease;
}

.form-check-input.theme-toggle:checked {
    background-color: var(--color-rose-light);
    /* Background for on-state */
    border-color: var(--color-rose-light);
}

/* Validation feedback */
.form-control.is-invalid {
    border-color: var(--color-error);
    padding-right: calc(1.5em + .75rem);
    /* Space for icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.invalid-feedback {
    color: var(--color-error);
    font-size: 0.875em;
    margin-top: 0.25rem;
    text-align: left;
    /* Ensure feedback aligns left */
}

/* Specific alignment for phone input and button in step 3 */
#step3 .d-flex.gap-2 {
    align-items: flex-end;
    /* Align the bottom of the input with the bottom of the button */
}

#step3 .btn-order {
    margin-top: 0 !important;
    /* Ensure no extra top margin from Bootstrap */
}

/* Order Form Stepper Labels (Pill-bar inside form) */
.pill-bar[aria-label="Order Steps"] {
    margin-bottom: 1.5rem;
    /* Space below the step pills */
    background: transparent;
    /* Make internal pill-bar transparent */
    box-shadow: none;
    /* No shadow for internal pill-bar */
    animation: none;
    /* No floating animation */
    padding: 0;
    /* Remove padding */
    gap: 0;
    /* Remove gap, use margins on labels if needed */
    flex-wrap: nowrap;
    /* Prevent wrapping in steps */
    justify-content: space-around;
    /* Distribute steps evenly */
    position: static;
    /* Remove fixed positioning */
    transform: none;
    /* Remove transform */
    width: auto;
    /* Allow natural width */
}

.pill-bar[aria-label="Order Steps"]::before {
    display: none;
    /* Hide glowing background ring */
}

.pill-bar[aria-label="Order Steps"] .nav-link {
    background: var(--color-input-bg);
    /* Use input background for step pills */
    color: var(--color-text);
    /* Use text color */
    border: 1px solid var(--color-border);
    /* Add a subtle border */
    flex: 1;
    /* Allow steps to take equal width */
    text-align: center;
    margin: 0 0.25rem;
    /* Small gap between steps */
}

.pill-bar[aria-label="Order Steps"] .nav-link:hover {
    background: var(--color-rose-light);
    /* Hover state */
    color: var(--color-rose-dark);
}

.pill-bar[aria-label="Order Steps"] input[type="radio"]:checked+.nav-link {
    background: var(--color-rose);
    /* Active background color */
    color: #fff;
    /* Active text color */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--color-rose);
}

.pill-bar[aria-label="Order Steps"] .nav-link::after {
    display: none;
    /* No sparkle for step pills */
}

.pill-bar[aria-label="Order Steps"] .pill-highlight {
    display: none;
    /* Hide the sliding highlight for step pills */
}

/* Order step content panels */
.order-step-content {
    display: none;
    padding: 1rem 0;
    /* Adjust padding as needed */
    animation: fadeSlideUp var(--transition-speed-medium) forwards var(--transition-ease);
}

.order-step-content.show {
    display: block;
}


/* ─────────────────────────────────────────────────────────────────────────────
    CONTENT & CARD LAYOUT
───────────────────────────────────────────────────────────────────────────── */
.content {
    flex: 1;
    /* Allows content area to grow and shrink */
    padding: 1.5rem 1.25rem;
    /* Adjusted padding for better mobile view */
    max-width: 600px;
    /* Constrain content width */
    margin: 0 auto;
    /* Center the content */
    width: 100%;
}

.order-card {
    position: relative;
    background: var(--color-card-bg);
    border: 1px solid var(--color-rose-light);
    border-radius: var(--card-radius);
    padding: 1.5625rem;
    width: 100%;
    /* Use 100% width within max-width */
    margin: 1rem auto;
    /* Centers the card and adds vertical spacing */
    box-shadow: var(--card-shadow);
    animation: fadeIn var(--transition-speed-medium) var(--transition-ease);
    transition:
        transform var(--transition-speed-fast),
        box-shadow var(--transition-speed-fast);
}

.order-card:hover,
.order-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Dark-mode override for order-card */
:root[data-theme="dark"] .order-card {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────────────────────
    SLIDERS & PANEL TRANSITIONS
───────────────────────────────────────────────────────────────────────────── */
/* Slider wrappers */
.slider-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    /* Occupy full viewport height */
    z-index: -1;
    /* Place behind other content */
    overflow: hidden;
}

#leftSliderWrapper {
    left: 0;
}

#rightSliderWrapper {
    right: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity var(--transition-speed-medium) var(--transition-ease);
}

/* ─────────────────────────────────────────────────────────────────────────────
    CHAT PANEL & BUBBLES (FULL-HEIGHT LAYOUT)
───────────────────────────────────────────────────────────────────────────── */

#chatPanel .chat-box {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: linear-gradient(145deg, var(--color-card-bg), rgba(255, 255, 255, 0.03));
    border-radius: 0.75rem;
    transition: background var(--transition-speed-medium) ease;
    scroll-behavior: smooth;
}


/* Scrollbar */
#chatPanel .chat-box::-webkit-scrollbar {
    width: 6px;
}

#chatPanel .chat-box::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary);
    border-radius: 3px;
}

#chatPanel .chat-box::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Input Row (sticks to bottom) */
#chatPanel .panel-body>.d-flex.align-items-center {
    flex: 0 0 auto;
    /* No grow/shrink */
    padding: 1rem;
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
    /* Separator line */
}

/* Input Field */
#chatPanel .form-control {
    border-radius: 999px;
    /* Pill shape */
    padding: 0.5rem 1rem;
}

/* Send Button */
#chatPanel .btn-rose {
    border-radius: 999px;
    padding: 0.5rem 1rem;
}

/* Chat Bubbles */
.chat-bubble {
    max-width: 75%;
    padding: 0.65rem 1rem;
    border-radius: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    animation: popIn var(--transition-speed-medium) ease forwards;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
}

.chat-bubble.assistant {
    background: var(--color-rose-dark);
    color: #fff;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.chat-bubble.user {
    background: #333;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

/* Bubble Tail */
.chat-bubble.assistant::after,
.chat-bubble.user::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

.chat-bubble.assistant::after {
    left: -4px;
    border-right-color: var(--color-rose-light);
    transform: translateY(1px);
}

.chat-bubble.user::after {
    right: -4px;
    border-left-color: var(--color-rose);
    transform: translateY(1px);
}

/* Typing Indicator */
.chat-bubble.typing {
    background: var(--color-input-bg);
    color: var(--color-text);
    box-shadow: none;
    border-bottom-left-radius: 1.25rem;
}

.chat-bubble.typing .dot {
    display: inline-block;
    animation: blink 1.4s infinite ease-in-out;
    opacity: 0.2;
}

.chat-bubble.typing .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-bubble.typing .dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Animations */
@keyframes blink {

    0%,
    80%,
    100% {
        opacity: 0.2;
    }

    40% {
        opacity: 1;
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
    COUNTY & LOCATION LAYOUT — always two columns
───────────────────────────────────────────────────────────────────────────── */
.county-location-row {
    display: flex;
    gap: 0.625rem;
    /* 10px gap */
    margin-bottom: 1.25rem;
    /* 20px bottom margin */
    flex-wrap: nowrap;
    /* Never wrap to a new line */
    overflow-x: auto;
    /* Allow horizontal scroll on small screens if needed */
    -webkit-overflow-scrolling: touch;
    /* Smooth iOS scrolling */
}

.county-location-row>* {
    flex: 1 1 0;
    /* Grow & shrink equally */
    min-width: 140px;
    /* Prevent them from collapsing too small */
}

/* Hide native scrollbar if you like */
.county-location-row::-webkit-scrollbar {
    display: none;
}
/*
|--------------------------------------------------------------------------
| Global Variables & Utilities (Assumed from previous context)
|--------------------------------------------------------------------------
| These variables should ideally be defined at the root level or in a
| dedicated variables file to ensure consistency across the stylesheet.
*/
:root {
    /* Transitions */
    --transition-speed-fast: 0.15s;
    --transition-speed-medium: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-ease: ease-in-out;

    /* Colors (example values - adapt to your theme) */
    --color-background: #f8f9fa;
    --color-text: #343a40;
    --color-secondary-text: #6c757d;
    --color-rose: #f7005b;
    --color-rose-dark: #d6004d;
    --color-border: #e0e0e0;

    /* Pill Bar Specific */
    --pill-gap: 0.5rem;
    /* Gap between individual pills */
    --pill-radius: 50px;
    /* Highly rounded corners */
    --pill-padding: 0.6rem 1.2rem;
    /* Padding inside pills */
    --pill-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    --pill-bg: rgba(255, 255, 255, 0.9);
    /* Semi-transparent background */
    --pill-hover-bg: rgba(240, 240, 240, 0.95);
    /* Slightly darker on hover */
    --pill-active-bg: var(--color-rose);
    /* Active pill background */
    --pill-active-color: white;
    /* Active pill text color */
    --pill-highlight-color: var(--color-rose);
    /* Color of the bottom highlight */

    /* Font Sizes (example values - adapt to your typography scale) */
    --fz-sm: 0.9rem;
}

/* Dark Mode Adjustments (Example - adapt if you have dark mode variables) */
[data-theme="dark"] {
    --pill-bg: rgba(45, 55, 72, 0.9);
    --pill-hover-bg: rgba(60, 75, 90, 0.95);
    --pill-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/*
|--------------------------------------------------------------------------
| Bottom Floating Navigation Container
|--------------------------------------------------------------------------
| Positions the entire pill bar navigation at the bottom center of the
| viewport, with a slide-in animation.
*/
.bottom-nav-container {
    position: fixed;
    bottom: 1rem;
    /* Spacing from the bottom edge */
    left: 50%;
    transform: translateX(-50%);
    /* Centering horizontally */
    z-index: 1000;
    /* Ensures it stays on top of most content */
    display: flex;
    justify-content: center;
    /* Center content within the container */
    padding: 0 1rem;
    /* Horizontal padding for smaller screens */
    width: fit-content;
    /* Container shrinks to fit content */
    max-width: calc(100% - 2rem);
    /* Prevents overflow on very small screens */
    overflow: visible;
    /* Allows glowing aura to extend beyond bounds */

    /* Transitions */
    transition: opacity var(--transition-speed-medium) ease, transform var(--transition-speed-medium) ease;

    /* Animations */
    animation: slideInUp var(--transition-speed-slow) var(--transition-ease) forwards;
    /* 'forwards' keeps the final state */
}

/* Keyframe animation for sliding in the bottom navigation */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 40px);
        /* Starts below and invisible */
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
        /* Ends at its intended position and visible */
    }
}

/*
|--------------------------------------------------------------------------
| Pill Bar Styling
|--------------------------------------------------------------------------
| Styles for the main container of the navigation pills.
*/
.pill-bar {
    display: inline-flex;
    /* Shrinks to fit its content */
    flex-wrap: wrap;
    /* Allows pills to wrap to the next line on small screens */
    align-items: center;
    justify-content: center;
    gap: var(--pill-gap);
    /* Spacing between individual pills */
    padding: 0.5rem 0.75rem;
    /* Internal padding of the pill bar container */

    background: var(--pill-bg);
    border-radius: var(--pill-radius);
    box-shadow: var(--pill-shadow);
    backdrop-filter: blur(8px) saturate(140%);
    /* Frosted glass effect */

    position: relative;
    overflow: visible;
    /* Essential for the glowing pseudo-element to not be clipped */

    /* Scrollbar hiding for cleaner look on some browsers */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer and Edge */

    /* Animation for subtle floating effect */
    animation: floatOverlay 6s ease-in-out infinite;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.pill-bar::-webkit-scrollbar {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Pill Bar Glowing Background Ring (::before pseudo-element)
|--------------------------------------------------------------------------
| Creates a dynamic, glowing aura around the pill bar using a conic gradient.
*/
.pill-bar::before {
    content: "";
    position: absolute;
    inset: -10px;
    /* Expands the pseudo-element beyond the pill bar's bounds */
    border-radius: var(--pill-radius);
    /* Matches the pill bar's rounded corners */
    background: conic-gradient(from 0deg, #ff6ec4, #7873f5, #4ade80, #facc15, #f43f5e, #ff6ec4);
    /* Colorful rotating gradient */
    filter: blur(24px);
    /* Applies a strong blur to create the glow */
    opacity: 0.5;
    /* Makes the glow semi-transparent */
    z-index: -1;
    /* Positions the glow behind the actual pills */
    pointer-events: none;
    /* Ensures the glow doesn't interfere with mouse events */

    /* Animation for the rotating gradient */
    animation: spinRing 18s linear infinite;
}

/* Keyframe animation for the subtle floating effect of the overlay */
@keyframes floatOverlay {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
        /* Moves slightly up and down */
    }
}

/* Keyframe animation for rotating the conic gradient glow */
@keyframes spinRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| Individual Pill Buttons (.nav-link)
|--------------------------------------------------------------------------
| Styles for each clickable pill within the navigation.
*/
.pill-bar .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: var(--pill-padding);
    font-size: var(--fz-sm);
    color: var(--color-text);
    /* Default text color for pills */
    background: transparent;
    /* No background by default */
    border: none;
    border-radius: var(--pill-radius);
    position: relative;
    z-index: 1;
    /* Ensures pills are above the highlight and glow */
    cursor: pointer;
    text-decoration: none;
    /* Remove default underline */

    /* Smooth transitions for interactive states */
    transition: all var(--transition-speed-medium) var(--transition-ease);
}

/* Hover and Focus states for individual pills */
.pill-bar .nav-link:hover,
.pill-bar .nav-link:focus {
    background: var(--pill-hover-bg);
    color: var(--pill-active-color);
    /* Text color change on hover/focus */
    text-decoration: none;
    /* Keep no underline */
    outline: none;
    /* Remove default focus outline */
}

/*
|--------------------------------------------------------------------------
| Active Pill State (radio:checked + label)
|--------------------------------------------------------------------------
| Styles applied when a pill is actively selected (corresponding radio button is checked).
*/
input[type="radio"]:checked+.nav-link {
    background: var(--pill-active-bg);
    color: var(--pill-active-color);
    box-shadow: 0 0 0 2px var(--color-border);
    /* A subtle border/ring effect */
}

/*
|--------------------------------------------------------------------------
| Sparkle on Hover (::after pseudo-element for flair)
|--------------------------------------------------------------------------
| Adds a decorative sparkle emoji that appears on hover.
*/
.pill-bar .nav-link::after {
    content: "✨";
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.9rem;
    opacity: 0;
    /* Hidden by default */
    pointer-events: none;
    /* Ensures it doesn't block clicks */

    /* Animation for the sparkle effect */
    animation: sparkle 1.5s ease-in-out infinite;
}

/* Show sparkle on hover */
.pill-bar .nav-link:hover::after {
    opacity: 1;
}

/* Keyframe animation for the sparkle effect */
@keyframes sparkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.3) rotate(20deg);
        /* Scales and rotates slightly */
    }
}

/*
|--------------------------------------------------------------------------
| Animated Pill Highlight
|--------------------------------------------------------------------------
| A dynamic underline that moves and resizes to indicate the active pill.
*/
.pill-highlight {
    position: absolute;
    bottom: 4px;
    /* Positioned slightly below the pills */
    left: 0;
    height: 4px;
    /* Thickness of the highlight */
    width: 0;
    /* Starts with no width (hidden) */
    background: var(--pill-highlight-color);
    border-radius: 2px;
    /* Rounded ends for the highlight */
    z-index: 0;
    /* Ensures it stays behind the pills */
    pointer-events: none;
    /* Non-interactive */

    /* Smooth transitions for movement and resizing */
    transition: all var(--transition-speed-medium) var(--transition-ease);
}

/*
|--------------------------------------------------------------------------
| Responsive Adjustments
|--------------------------------------------------------------------------
| Ensures the pill bar looks good on various screen sizes.
*/
@media (max-width: 767.98px) {
    .bottom-nav-container {
        padding: 0 0.5rem;
        /* Less horizontal padding on smaller screens */
        max-width: calc(100% - 1rem);
        /* Adjust max-width accordingly */
    }

    .pill-bar {
        padding: 0.4rem 0.6rem;
        /* Slightly smaller internal padding */
        gap: 0.4rem;
        /* Reduce gap between pills */
    }

    .pill-bar .nav-link {
        padding: 0.5rem 1rem;
        /* Smaller padding for pills */
        font-size: 0.85rem;
        /* Slightly smaller font size */
    }

    .pill-toggle-btn {
        bottom: 5rem;
        /* Adjust position slightly for smaller screens */
        right: 0.8rem;
        padding: 0.5rem 0.8rem;
        /* Smaller padding for button */
        font-size: 0.8rem;
    }
}

/*
|--------------------------------------------------------------------------
| Accessibility Considerations
|--------------------------------------------------------------------------
| Reminders for HTML structure to ensure accessibility.
*/
/*
* Remember to use `aria-label` or `aria-labelledby` for your `.pill-bar`
* when it acts as a `role="radiogroup"` or `role="tablist"` to provide
* a meaningful name for assistive technologies.
*
* Example: `<div class="pill-bar" role="radiogroup" aria-label="Main Navigation">`
*
* Ensure `visually-hidden` class for inputs is defined as:
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
*/
/* ─────────────────────────────────────────────────────────────────────────────
    LIVE ORDERS SECTION — Themed & Responsive
───────────────────────────────────────────────────────────────────────────── */
section.live-orders-section {
    width: 100%;
    margin-top: 2rem;
    max-width: 500px;
    /* Constrain width similar to other cards */
    margin-left: auto;
    margin-right: auto;
}

.live-orders-card {
    background: var(--color-card-bg);
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    border: none;
    overflow: hidden;
}

.live-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--color-card-header-bg);
    color: var(--color-rose-dark);
}

.live-orders-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.live-orders-header h5 i {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

.live-orders-header small {
    font-size: 0.85rem;
    color: var(--color-secondary);
}

.live-orders-body {
    background: var(--color-card-bg);
    max-height: 112px;
    /* Limit height to show scrolling effect */
    overflow: hidden;
    position: relative;
    padding: 0;
}

.live-orders-scroll {
    display: flex;
    flex-direction: column;
    animation: scrollOrders 9s linear infinite;
    /* Adjust duration based on number of items */
}

.live-orders-body:hover .live-orders-scroll {
    animation-play-state: paused;
    /* Pause scroll on hover */
}

.order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-border);
    animation: fadeSlideUp 0.5s ease;
}

.order-item:last-child {
    border-bottom: none;
}

.order-initial {
    font-size: 1rem;
    color: var(--color-secondary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.order-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.order-details .product-name {
    font-weight: 600;
    color: var(--color-text);
}

.order-details .user-name,
.order-details small {
    font-size: 0.75rem;
    color: var(--color-secondary);
}

.order-amount {
    font-weight: 700;
    color: var(--color-success);
    margin-left: 1rem;
    flex-shrink: 0;
}

@keyframes scrollOrders {
    0% {
        transform: translateY(0);
    }

    100% {
        /* This calculation likely needs JS to be truly dynamic.
           Hardcoding for now, assuming items are of similar height.
           This would scroll up to show new items repeatedly. */
        transform: translateY(calc(-100% + 3 * 38px));
        /* Example: Assuming 3 items visible, 38px height per item */
    }
}

/* Dark mode override for live orders */
:root[data-theme="dark"] .live-orders-card {
    background: var(--color-card-bg);
}


/* ─────────────────────────────────────────────────────────────────────────────
    TRACKING LIST AS CARDS
───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   TRACKING LIST AS CARDS
───────────────────────────────────────────────────────────────────────────── */
#trackOrderListInPanel .list-group {
    padding: 0;
    margin: 0;
    list-style: none;
}

#trackOrderListInPanel .list-group-item {
    position: relative;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition:
        background var(--transition-speed),
        border-color var(--transition-speed);
}

#trackOrderListInPanel .list-group-item:hover {
    background: var(--color-rose-light);
}

:root[data-theme="dark"] #trackOrderListInPanel .list-group-item {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

#trackOrderListInPanel .list-group-item .badge {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: var(--fz-sm);
    pointer-events: none;
}

#trackOrderListInPanel .order-detail {
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 12px 12px;
    padding: 1rem;
    margin-top: 0.5rem;
    display: none;
    transition:
        background var(--transition-speed),
        border-color var(--transition-speed);
}

#trackOrderListInPanel .order-detail:not(.d-none) {
    display: block;
}

#trackOrderListInPanel .order-detail .list-group {
    border: none;
    margin: 0;
    padding: 0;
}

#trackOrderListInPanel .order-detail .list-group-item {
    border: none;
    padding: 0.5rem 0;
    display: flex;
    justify-content: space-between;
    font-size: var(--fz-base);
    color: var(--color-text);
}

#trackOrderListInPanel .order-detail .list-group-item strong {
    font-weight: 600;
}

#trackOrderListInPanel .order-detail .progress {
    height: 1rem;
    background-color: var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

#trackOrderListInPanel .order-detail .progress-bar {
    font-size: var(--fz-sm);
    line-height: 1rem;
}

#trackOrderListInPanel .order-detail .timeline {
    list-style: none;
    padding-left: 0;
    border-left: 2px solid var(--color-border);
    margin-left: 0.5rem;
}

#trackOrderListInPanel .order-detail .timeline-item {
    position: relative;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

#trackOrderListInPanel .order-detail .timeline-item::before {
    content: "";
    position: absolute;
    left: -1.125rem;
    top: 0.5rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--color-rose);
    border: 2px solid var(--color-card-bg);
    border-radius: 50%;
}

#trackOrderListInPanel .order-detail .timeline-item .badge {
    font-size: var(--fz-sm);
    margin-bottom: 0.25rem;
}

#trackOrderListInPanel .order-detail .timeline-item p.small {
    margin: 0.25rem 0;
    font-size: var(--fz-sm);
    color: var(--color-text);
}

#trackOrderListInPanel .order-detail .timeline-item small.text-muted {
    font-size: var(--fz-sm);
    color: var(--color-text);
}

:root[data-theme="dark"] #trackOrderListInPanel .order-detail {
    background: var(--color-card-bg);
    border-color: var(--color-border);
}

:root[data-theme="dark"] #trackOrderListInPanel .order-detail .timeline-item::before {
    background-color: var(--color-rose-light);
    border-color: var(--color-card-bg);
}

/* ─────────────────────────────────────────────────────────────────────────────
    PANEL HEADER & BODY (General)
───────────────────────────────────────────────────────────────────────────── */
.panel-header {
    font-size: var(--fz-lg);
    font-weight: 600;
    text-align: center;
    margin: 1.5rem 0 1rem;
}

.panel-body {
    max-width: 500px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
    SECTION BANNER (Alert-like messages)
───────────────────────────────────────────────────────────────────────────── */
.section-banner {
    background-color: var(--color-rose-light);
    color: var(--color-text);
    /* Changed to color-text for theme compatibility */
    padding: 0.5rem 1rem;
    font-size: var(--fz-base);
    font-weight: 600;
    text-align: center;
    max-width: 480px;
    width: 100%;
    margin: 0.5rem auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.section-banner strong {
    color: var(--color-rose-dark);
}

@media (max-width: 767px) {
    .section-banner {
        font-size: var(--fz-sm);
        padding: 0.5rem 0.75rem;
        margin: 0.5rem auto;
    }
}



/* Specific pill bar for submission type and steps */
#shoppingForm .pill-bar {
    justify-content: space-around;
}

#shoppingForm .pill-bar .nav-link {
    flex-grow: unset;
    min-width: 120px;
    /* Apply this to both submission type and steps */
}

/* Highlight for submission type (screenshot/link) */
#shoppingForm .pill-bar:has(#submission-screenshot:checked) .pill-highlight {
    transform: translateX(0%);
    width: calc((100% - 10px) / 2);
    /* 2 pills */
}

#shoppingForm .pill-bar:has(#submission-link:checked) .pill-highlight {
    transform: translateX(100%);
    width: calc((100% - 10px) / 2);
    /* 2 pills */
}

/* Highlight for order steps (Q&S, Delivery, Checkout) */
#shoppingForm .pill-bar:has(#step-radio-1:checked) .pill-highlight {
    transform: translateX(0%);
    width: calc((100% - 10px) / 3);
    /* 3 pills */
}

#shoppingForm .pill-bar:has(#step-radio-2:checked) .pill-highlight {
    transform: translateX(100%);
    width: calc((100% - 10px) / 3);
    /* 3 pills */
}

#shoppingForm .pill-bar:has(#step-radio-3:checked) .pill-highlight {
    transform: translateX(200%);
    width: calc((100% - 10px) / 3);
    /* 3 pills */
}
/*
 * STYLE 1: MINIMALIST SUN & MOON TOGGLE
 */

.theme-switch {
  /* Use a CSS variable for easy size scaling */
  --size: 1.2rem; 

  position: relative;
  display: inline-block;
  width: calc(var(--size) * 2);
  height: var(--size);
}

.theme-switch .theme-toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider track */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0; /* Replaces top, right, bottom, left: 0 */
  background-color: #eee;
  border-radius: var(--size);
  transition: 0.4s;
}

/* The sliding knob */
.slider:before {
  position: absolute;
  content: "";
  /* Size the knob relative to the switch */
  height: calc(var(--size) * 0.8);
  width: calc(var(--size) * 0.8);
  left: calc(var(--size) * 0.1);
  bottom: calc(var(--size) * 0.1);
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.1); /* Softer, minimal shadow */
  transition: 0.4s;
}

/* Shared icon styles */
.slider:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(var(--size) * 0.45);
  transition: 0.4s;
}

/* Light mode icon (Sun) */
.theme-toggle:not(:checked) + .slider:after {
  content: '☀️';
  right: calc(var(--size) * 0.2);
}

/* Dark mode icon (Moon) */
.theme-toggle:checked + .slider:after {
  content: '🌙';
  left: calc(var(--size) * 0.2);
}

/* --- Checked State --- */

.theme-toggle:checked + .slider {
  background-color: #2c3e50; /* A modern dark blue/grey */
}

.theme-toggle:checked + .slider:before {
  transform: translateX(var(--size));
}