/* ========================================
   PUB MODE - PROPER BRITISH BOOZER STYLING
   ======================================== 
   
   Transforms the sterile tube station look into 
   something that feels like you've walked into
   a proper London local. Think: warm oak, brass
   taps, chalkboard menus, and that specific smell
   of old carpets and questionable pork scratchings.
*/

/* Import a proper pub-style font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Cabin:wght@400;500;600&family=Permanent+Marker&display=swap');

/* ========================================
   PUB COLOUR PALETTE
   ======================================== */
:root {
  /* The warm amber glow of a proper pint */
  --pub-amber: #D4A03D;
  --pub-amber-light: #E8C36B;
  --pub-amber-dark: #B8862B;
  
  /* Rich dark wood - the oak of ages */
  --pub-wood-dark: #2C1810;
  --pub-wood-medium: #4A2C1A;
  --pub-wood-light: #6B3E22;
  --pub-wood-grain: #8B5A2B;
  
  /* Brass and copper - taps and trim */
  --pub-brass: #B4975A;
  --pub-brass-bright: #D4AF37;
  --pub-copper: #B87333;
  
  /* The green of British pubs - snooker tables and bar towels */
  --pub-green: #1E4D2B;
  --pub-green-felt: #2D5A3D;
  
  /* Deep burgundy - the colour of a good Merlot and old leather */
  --pub-burgundy: #722F37;
  --pub-burgundy-light: #8B3A4A;
  
  /* Cream and ivory - Victorian tiles and pump clips */
  --pub-cream: #F5F0E1;
  --pub-ivory: #FFFEF7;
  --pub-parchment: #E8DCC8;
  
  /* Chalkboard - specials board */
  --pub-chalk-board: #2D3436;
  --pub-chalk-text: #F5F5DC;
  --pub-chalk-blue: #87CEEB;
  --pub-chalk-pink: #FFB6C1;
  --pub-chalk-green: #90EE90;
  --pub-chalk-orange: #FFB347;
  
  /* Stained glass accents */
  --pub-glass-red: #C62828;
  --pub-glass-blue: #1565C0;
  --pub-glass-gold: #FFD700;
  --pub-glass-green: #2E7D32;
}

/* ========================================
   PUB MODE BASE OVERRIDES
   ======================================== */
.pub-mode {
  --primary: var(--pub-amber);
  --primary-color: var(--pub-amber);
  --primary-dark: var(--pub-amber-dark);
  --primary-light: var(--pub-amber-light);
  --secondary: var(--pub-burgundy);
  --accent: var(--pub-brass-bright);
  --bg-primary: var(--pub-wood-dark);
  --bg-secondary: var(--pub-wood-medium);
  --bg-tertiary: var(--pub-wood-light);
  --text-primary: var(--pub-cream);
  --text-secondary: var(--pub-parchment);
  --text-muted: var(--pub-brass);
  --border-color: var(--pub-brass);
  --border-light: var(--pub-wood-grain);
  --surface: var(--pub-wood-medium);
  --surface-elevated: var(--pub-wood-light);
}

/* Header transformation - from tube roundel to pub sign */
.pub-mode header {
  background: linear-gradient(180deg,
    var(--pub-wood-dark) 0%,
    var(--pub-wood-medium) 100%
  ) !important;
  box-shadow: 
    0 4px 20px rgba(0,0,0,0.4),
    inset 0 -3px 0 var(--pub-brass);
}

/* Pub roundel - warm and inviting */
.pub-roundel,
.pub-mode .roundel {
  background: linear-gradient(145deg,
    var(--pub-amber-light) 0%,
    var(--pub-amber) 50%,
    var(--pub-amber-dark) 100%
  ) !important;
  border: 4px solid var(--pub-brass) !important;
  color: var(--pub-wood-dark) !important;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255,255,255,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.2);
  font-size: 2.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pub-mode h1 {
  font-family: 'Playfair Display', serif !important;
  color: var(--pub-brass-bright) !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.pub-mode body,
body.pub-mode {
  background: 
    /* Subtle wood grain texture */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 4px
    ),
    linear-gradient(180deg, 
      var(--pub-wood-dark) 0%, 
      var(--pub-wood-medium) 50%,
      var(--pub-wood-dark) 100%
    );
  font-family: 'Cabin', sans-serif;
}

/* ========================================
   PUB SIGNAGE - HANGING PUB SIGNS
   ======================================== */
.pub-mode .station-sign,
.pub-mode h2.station-sign,
.pub-mode .pub-sign {
  /* Transform tube station signs into hanging pub signs */
  background: 
    linear-gradient(180deg,
      var(--pub-wood-light) 0%,
      var(--pub-wood-medium) 50%,
      var(--pub-wood-dark) 100%
    );
  border: 4px solid var(--pub-brass);
  border-radius: 8px;
  padding: 1rem 2rem;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700;
  color: var(--pub-brass-bright) !important;
  text-shadow: 
    2px 2px 4px rgba(0,0,0,0.5),
    0 0 20px rgba(212, 175, 55, 0.3);
  letter-spacing: 0.05em;
  position: relative;
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.4),
    inset 0 2px 0 rgba(255,255,255,0.1),
    inset 0 -2px 0 rgba(0,0,0,0.3);
}

/* The bracket/hook detail at top */
.pub-mode .station-sign::before {
  content: '⛓️';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

/* ========================================
   CHALKBOARD STYLING - SPECIALS BOARD
   ======================================== */
.pub-mode .glass-card,
.pub-mode .card.glass-card {
  background: var(--pub-chalk-board);
  border: 8px solid var(--pub-wood-medium);
  border-radius: 4px;
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.5),
    0 10px 30px rgba(0,0,0,0.3),
    inset 2px 2px 0 rgba(255,255,255,0.03);
  position: relative;
  padding: 2rem;
}

/* Chalk dust effect at edges */
.pub-mode .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at top left, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
  border-radius: 2px;
}

/* Chalk-style text */
.pub-mode .glass-card h2,
.pub-mode .glass-card h3,
.pub-mode .glass-card h4 {
  font-family: 'Permanent Marker', cursive;
  color: var(--pub-chalk-text);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  letter-spacing: 0.02em;
}

.pub-mode .glass-card p,
.pub-mode .glass-card label,
.pub-mode .glass-card small {
  color: rgba(245, 245, 220, 0.9);
  font-family: 'Cabin', sans-serif;
}

/* ========================================
   BEER MAT / COASTER CARDS
   ======================================== */
.pub-mode .coming-soon-card,
.pub-mode .results-box,
.pub-mode .route-export-section {
  background: 
    /* Beer mat texture */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0,0,0,0.02) 1px,
      rgba(0,0,0,0.02) 2px
    ),
    linear-gradient(135deg, 
      var(--pub-cream) 0%, 
      var(--pub-parchment) 100%
    );
  border: 3px solid var(--pub-wood-light);
  border-radius: 12px;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.5);
  color: var(--pub-wood-dark);
  position: relative;
  overflow: hidden;
}

/* Ring stain effect - because what's a beer mat without one? */
.pub-mode .coming-soon-card::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border: 3px solid rgba(180, 151, 90, 0.15);
  border-radius: 50%;
  top: -20px;
  right: -20px;
  pointer-events: none;
}

.pub-mode .coming-soon-card h3,
.pub-mode .results-box h4 {
  color: var(--pub-wood-dark);
  font-family: 'Playfair Display', serif;
}

.pub-mode .coming-soon-card p {
  color: var(--pub-wood-medium);
}

/* ========================================
   BUTTONS - BRASS TAP HANDLES
   ======================================== */
.pub-mode .btn,
.pub-mode button.btn {
  background: linear-gradient(180deg,
    var(--pub-brass-bright) 0%,
    var(--pub-brass) 50%,
    var(--pub-copper) 100%
  );
  border: 2px solid var(--pub-wood-dark);
  border-radius: 6px;
  color: var(--pub-wood-dark);
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -2px 0 rgba(0,0,0,0.2);
  transition: all 0.15s ease;
}

.pub-mode .btn:hover {
  background: linear-gradient(180deg,
    #E5C56B 0%,
    var(--pub-brass-bright) 50%,
    var(--pub-brass) 100%
  );
  transform: translateY(-2px);
  box-shadow: 
    0 6px 12px rgba(0,0,0,0.4),
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.2);
}

.pub-mode .btn:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(0,0,0,0.2);
}

.pub-mode .btn-large {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border-radius: 8px;
}

.pub-mode .btn-small {
  background: linear-gradient(180deg,
    var(--pub-cream) 0%,
    var(--pub-parchment) 100%
  );
  border: 2px solid var(--pub-brass);
}

.pub-mode .btn-primary {
  background: linear-gradient(180deg,
    var(--pub-amber-light) 0%,
    var(--pub-amber) 50%,
    var(--pub-amber-dark) 100%
  ) !important;
}

/* ========================================
   FORM CONTROLS - WOOD & BRASS STYLING
   ======================================== */
.pub-mode select,
.pub-mode input[type="number"],
.pub-mode input[type="text"],
.pub-mode input[type="email"],
.pub-mode input[type="password"],
.pub-mode textarea {
  background: var(--pub-cream) !important;
  border: 2px solid var(--pub-brass);
  border-radius: 6px;
  color: var(--pub-wood-dark) !important;
  font-family: 'Cabin', sans-serif;
  padding: 0.75rem 1rem;
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 2px 0 rgba(255,255,255,0.1);
}

.pub-mode select:focus,
.pub-mode input:focus {
  outline: none;
  border-color: var(--pub-brass-bright);
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 0 0 3px rgba(212, 175, 55, 0.3);
}

/* Ensure placeholder text is visible */
.pub-mode input::placeholder {
  color: #8B7355 !important;
  opacity: 1;
}

.pub-mode label {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--pub-chalk-text);
}

/* Form help text - ensure readable */
.pub-mode .form-help,
.pub-mode small,
.pub-mode .control-group small {
  color: var(--pub-parchment) !important;
  opacity: 0.9;
}

/* ========================================
   SETTINGS/ACCOUNT SECTION - PUB MODE
   ======================================== */
.pub-mode .settings-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.pub-mode .settings-section h3 {
  color: var(--pub-brass-bright) !important;
  font-family: 'Playfair Display', serif;
  margin-bottom: 1rem;
}

.pub-mode .settings-section h4 {
  color: var(--pub-amber-light) !important;
}

.pub-mode .settings-section p,
.pub-mode .settings-section span,
.pub-mode .settings-section label {
  color: var(--pub-cream) !important;
}

.pub-mode .account-info .info-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.pub-mode .account-info .info-item label {
  color: var(--pub-parchment) !important;
  font-weight: 500;
}

.pub-mode .account-info .info-item span {
  color: var(--pub-cream) !important;
}

.pub-mode .data-rights .right-item {
  background: rgba(0, 0, 0, 0.15);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.pub-mode .strava-connection {
  background: rgba(0, 0, 0, 0.15);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.pub-mode .strava-connection p,
.pub-mode .strava-connection h4 {
  color: var(--pub-cream) !important;
}

/* ========================================
   FIXED STATION SECTION - CONTRAST FIX
   ======================================== */
.pub-mode .fixed-station-section {
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.pub-mode .fixed-station-section label {
  color: var(--pub-chalk-text) !important;
}

.pub-mode .fixed-station-section small {
  color: var(--pub-parchment) !important;
}

.pub-mode .fixed-station-section input {
  background: var(--pub-cream) !important;
  color: var(--pub-wood-dark) !important;
}

/* Autocomplete dropdown */
.pub-mode .autocomplete-dropdown {
  background: var(--pub-cream);
  border: 2px solid var(--pub-brass);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pub-mode .autocomplete-dropdown .autocomplete-item {
  color: var(--pub-wood-dark);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(139, 90, 43, 0.2);
}

.pub-mode .autocomplete-dropdown .autocomplete-item:hover,
.pub-mode .autocomplete-dropdown .autocomplete-item.selected {
  background: var(--pub-amber-light);
}

/* Route form cards in pub mode */
.pub-mode .route-form-card,
.pub-mode .platform-panel {
  background: var(--pub-chalk-board);
  border: 4px solid var(--pub-wood-medium);
}

.pub-mode .route-form-card h3,
.pub-mode .platform-panel h3 {
  color: var(--pub-brass-bright) !important;
}

.pub-mode .route-form-card p,
.pub-mode .route-form-card small,
.pub-mode .route-form-card label {
  color: var(--pub-cream) !important;
}

.pub-mode .route-card-content {
  color: var(--pub-cream);
}

/* Radio options */
.pub-mode .radio-option {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.pub-mode .radio-option:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--pub-brass);
}

.pub-mode .radio-option strong {
  color: var(--pub-amber-light) !important;
}

.pub-mode .radio-option small {
  color: var(--pub-parchment) !important;
}

/* Distance reference text */
.pub-mode .distance-reference {
  color: var(--pub-cream) !important;
}

.pub-mode .distance-reference strong {
  color: var(--pub-amber-light) !important;
}

/* ========================================
   AREA TOGGLES - PUB QUIZ ANSWER CARDS
   ======================================== */
.pub-mode .area-toggles {
  background: rgba(0,0,0,0.2);
  padding: 1rem;
  border-radius: 8px;
  border: 2px dashed rgba(245, 245, 220, 0.3);
}

.pub-mode .area-toggle {
  background: var(--pub-parchment);
  border: 2px solid var(--pub-wood-light);
  border-radius: 8px;
  color: var(--pub-wood-dark);
  transition: all 0.2s ease;
}

.pub-mode .area-toggle:hover {
  background: var(--pub-cream);
  border-color: var(--pub-brass);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.pub-mode .area-toggle input[type="checkbox"] {
  accent-color: var(--pub-amber);
}

.pub-mode .area-toggle span {
  color: var(--pub-wood-dark);
  font-weight: 500;
}

/* ========================================
   NAVIGATION TABS - BAR MENU BOARD
   ======================================== */
.pub-mode .mode-tabs,
.pub-mode .nav-tabs {
  background: var(--pub-wood-dark);
  border: 3px solid var(--pub-brass);
  border-radius: 8px;
  padding: 0.5rem;
}

.pub-mode .nav-tab {
  background: transparent;
  border: none;
  color: var(--pub-parchment);
  font-family: 'Permanent Marker', cursive;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.pub-mode .nav-tab:hover {
  background: rgba(212, 175, 55, 0.2);
  color: var(--pub-brass-bright);
}

.pub-mode .nav-tab.active {
  background: var(--pub-amber);
  color: var(--pub-wood-dark);
  box-shadow: 0 2px 8px rgba(212, 160, 61, 0.4);
}

/* ========================================
   MODE BUTTON - PUB CRAWLS TAB
   ======================================== */
.pub-mode #pubMode.mode-btn.active,
#pubMode.mode-btn.active {
  background: var(--pub-amber);
  color: var(--pub-wood-dark) !important;
  border-color: var(--pub-brass);
  font-weight: 600;
}

/* ========================================
   PUB CARDS - ROUTE RESULTS
   ======================================== */
.pub-mode .pub-card,
.pub-mode .route-pub {
  background: 
    linear-gradient(135deg, 
      var(--pub-cream) 0%, 
      var(--pub-parchment) 100%
    );
  border: 3px solid var(--pub-wood-medium);
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1rem 0;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  transition: all 0.2s ease;
}

.pub-mode .pub-card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Pub number badge - like a tap number */
.pub-mode .pub-card .pub-number,
.pub-mode .pub-number {
  background: linear-gradient(180deg,
    var(--pub-brass-bright) 0%,
    var(--pub-brass) 100%
  );
  color: var(--pub-wood-dark);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.3);
  border: 2px solid var(--pub-wood-dark);
}

.pub-mode .pub-card h4,
.pub-mode .pub-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--pub-wood-dark);
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.pub-mode .pub-card .pub-address,
.pub-mode .pub-address {
  color: var(--pub-wood-medium);
  font-style: italic;
  font-size: 0.9rem;
}

/* Hygiene rating badge */
.pub-mode .hygiene-rating,
.pub-mode .pub-rating {
  background: var(--pub-green);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.pub-mode .hygiene-rating.rating-5 { background: #1B5E20; }
.pub-mode .hygiene-rating.rating-4 { background: #2E7D32; }
.pub-mode .hygiene-rating.rating-3 { background: #F57F17; }
.pub-mode .hygiene-rating.rating-2 { background: #E65100; }
.pub-mode .hygiene-rating.rating-1 { background: #BF360C; }

/* ========================================
   MAP CONTAINER - FRAMED LIKE PUB ART
   ======================================== */
.pub-mode .map-container,
.pub-mode #pubMap {
  border: 8px solid var(--pub-wood-medium);
  border-radius: 4px;
  box-shadow: 
    0 8px 24px rgba(0,0,0,0.3),
    inset 0 0 0 2px var(--pub-brass);
}

/* ========================================
   LOADING & STATUS MESSAGES
   ======================================== */
.pub-mode .loading,
.pub-mode .generation-status {
  background: var(--pub-chalk-board);
  border: 3px solid var(--pub-wood-light);
  border-radius: 8px;
  padding: 1.5rem;
  color: var(--pub-chalk-text);
  font-family: 'Permanent Marker', cursive;
  text-align: center;
}

.pub-mode .generation-status h4 {
  color: var(--pub-chalk-orange);
}

/* ========================================
   PROGRESS INDICATORS - RUNNING TAB
   ======================================== */
.pub-mode .progress-bar {
  background: var(--pub-wood-dark);
  border: 2px solid var(--pub-brass);
  border-radius: 20px;
  overflow: hidden;
}

.pub-mode .progress-bar-fill,
.pub-mode .progress-fill {
  background: linear-gradient(90deg,
    var(--pub-amber-dark) 0%,
    var(--pub-amber) 50%,
    var(--pub-amber-light) 100%
  );
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.3);
}

/* ========================================
   EXPORT STATUS - RECEIPT STYLE
   ======================================== */
.pub-mode .export-status {
  background: var(--pub-cream);
  border: 1px dashed var(--pub-wood-medium);
  border-radius: 4px;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  color: var(--pub-wood-dark);
  margin-top: 1rem;
}

/* ========================================
   STAINED GLASS ACCENTS
   ======================================== */
.pub-mode .feature-description {
  position: relative;
  padding-left: 1rem;
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg,
    var(--pub-glass-red) 0%,
    var(--pub-glass-gold) 33%,
    var(--pub-glass-green) 66%,
    var(--pub-glass-blue) 100%
  ) 1;
}

/* ========================================
   CONTROLS GRID - PUB MENU LAYOUT
   ======================================== */
.pub-mode .controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.pub-mode .control-group {
  background: rgba(0,0,0,0.15);
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.pub-mode .control-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.pub-mode .control-group small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ========================================
   ROUTE PREFERENCES - CHALK TICK BOXES
   ======================================== */
.pub-mode .route-preferences {
  background: rgba(0,0,0,0.2);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.pub-mode .route-preferences h5 {
  font-family: 'Permanent Marker', cursive;
  color: var(--pub-chalk-blue);
  margin-bottom: 0.75rem;
}

.pub-mode .preference-checkbox {
  color: var(--pub-cream);
}

/* ========================================
   ANIMATIONS & TRANSITIONS
   ======================================== */
.pub-mode .btn,
.pub-mode .area-toggle,
.pub-mode .pub-card,
.pub-mode .nav-tab {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Warm glow on hover - like firelight */
.pub-mode .glass-card:hover {
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.5),
    0 10px 40px rgba(0,0,0,0.4),
    0 0 60px rgba(212, 160, 61, 0.1);
}

/* ========================================
   SCROLLBAR - BRASS RAIL
   ======================================== */
.pub-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.pub-mode ::-webkit-scrollbar-track {
  background: var(--pub-wood-dark);
  border-radius: 6px;
}

.pub-mode ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--pub-brass-bright) 0%,
    var(--pub-brass) 50%,
    var(--pub-copper) 100%
  );
  border-radius: 6px;
  border: 2px solid var(--pub-wood-dark);
}

.pub-mode ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    #E5C56B 0%,
    var(--pub-brass-bright) 100%
  );
}

/* ========================================
   FUN EXTRAS - THE LITTLE TOUCHES
   ======================================== */

/* "Last Orders" banner for coming soon sections */
.pub-mode .coming-soon-card .coming-soon-icon::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--pub-brass);
  margin: 0.5rem auto;
}

/* Pint glass cursor on buttons */
.pub-mode .btn-large {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><text y='20' font-size='20'>🍺</text></svg>") 12 12, pointer;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  .pub-mode .glass-card {
    padding: 1.25rem;
    border-width: 6px;
  }
  
  .pub-mode .station-sign,
  .pub-mode h2.station-sign {
    font-size: 1.3rem;
    padding: 0.75rem 1.25rem;
  }
  
  .pub-mode .controls-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .pub-mode .nav-tab {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ========================================
   DARK MODE COMPATIBILITY
   ======================================== */
@media (prefers-color-scheme: dark) {
  .pub-mode .results-box,
  .pub-mode .route-export-section,
  .pub-mode .coming-soon-card {
    background: 
      linear-gradient(135deg, 
        var(--pub-parchment) 0%, 
        var(--pub-cream) 100%
      );
  }
}

/* ========================================
   PRINT STYLES - PUB CRAWL ROUTE CARD
   ======================================== */
@media print {
  .pub-mode .glass-card {
    background: white !important;
    border: 2px solid #333 !important;
    box-shadow: none !important;
  }
  
  .pub-mode .pub-card {
    page-break-inside: avoid;
  }
}

/* ========================================
   FUN EXTRAS - BECAUSE PUBS ARE FUN
   ======================================== */

/* Pint glass filling animation for loading states */
@keyframes pint-fill {
  0% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

.pub-mode .loading::before {
  content: '🍺';
  display: block;
  font-size: 3rem;
  animation: wobble 0.5s ease-in-out infinite alternate;
  margin-bottom: 0.5rem;
}

@keyframes wobble {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* Bell icon for alerts - LAST ORDERS! */
.pub-mode .generation-status::before {
  content: '🔔';
  display: block;
  font-size: 2rem;
  animation: ring-bell 0.3s ease-in-out infinite alternate;
  margin-bottom: 0.5rem;
}

@keyframes ring-bell {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

/* Pub stop number styling - tap handle numbers */
.pub-mode .pub-stop-number {
  background: linear-gradient(180deg,
    var(--pub-brass-bright) 0%,
    var(--pub-brass) 50%,
    var(--pub-copper) 100%
  );
  color: var(--pub-wood-dark);
  width: 40px;
  height: 60px;
  border-radius: 8px 8px 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.3rem;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -4px 8px rgba(0,0,0,0.2);
  border: 2px solid var(--pub-wood-dark);
  position: relative;
}

/* Tap handle top */
.pub-mode .pub-stop-number::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 8px;
  background: var(--pub-brass);
  border-radius: 4px 4px 0 0;
  border: 2px solid var(--pub-wood-dark);
  border-bottom: none;
}

/* Chalk underline effect for headers */
.pub-mode .chalk-header {
  font-family: 'Permanent Marker', cursive;
  color: var(--pub-chalk-text);
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.pub-mode .chalk-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: 
    repeating-linear-gradient(
      90deg,
      var(--pub-chalk-text) 0px,
      var(--pub-chalk-text) 8px,
      transparent 8px,
      transparent 12px
    );
  opacity: 0.7;
}

/* Results header with chalk styling */
.pub-mode .results-header {
  font-family: 'Permanent Marker', cursive;
  color: var(--pub-wood-dark);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px double var(--pub-brass);
}

/* Route summary - receipt style */
.pub-mode .route-summary {
  background: var(--pub-cream);
  border: 1px dashed var(--pub-wood-medium);
  padding: 1rem;
  margin: 1rem 0;
  font-family: 'Courier New', monospace;
  position: relative;
}

.pub-mode .route-summary::before {
  content: '- - - YOUR CRAWL - - -';
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

/* Hop decorations for pub cards */
.pub-mode .pub-card::before {
  content: '🍃';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2rem;
  opacity: 0.3;
  transform: rotate(45deg);
}

/* Distance badge - like a pump clip */
.pub-mode .distance-badge {
  background: linear-gradient(135deg,
    var(--pub-burgundy) 0%,
    var(--pub-burgundy-light) 100%
  );
  color: var(--pub-cream);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 2px solid var(--pub-brass);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Fun hover states */
.pub-mode .pub-card:hover::before {
  animation: hop-bounce 0.5s ease infinite;
}

@keyframes hop-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(-5px); }
}

/* Pub type indicator badges */
.pub-mode .pub-type-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  margin-left: 0.5rem;
  font-weight: 500;
}

.pub-mode .pub-type-badge.traditional {
  background: var(--pub-wood-medium);
  color: var(--pub-cream);
}

.pub-mode .pub-type-badge.gastro {
  background: var(--pub-green);
  color: white;
}

.pub-mode .pub-type-badge.craft {
  background: var(--pub-amber);
  color: var(--pub-wood-dark);
}

/* Decorative corner flourishes on cards */
.pub-mode .glass-card::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-left: 2px solid rgba(212, 175, 55, 0.3);
  border-top: 2px solid rgba(212, 175, 55, 0.3);
  pointer-events: none;
}

/* Victorian corner ornament (bottom right) */
.pub-mode .pub-generator-card::before {
  content: '❧';
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 1.5rem;
  color: rgba(212, 175, 55, 0.2);
  pointer-events: none;
}

/* Pint glass progress indicator */
.pub-mode .pint-progress {
  width: 60px;
  height: 100px;
  background: 
    linear-gradient(180deg,
      rgba(255,255,255,0.3) 0%,
      rgba(255,255,255,0.1) 10%,
      transparent 10%
    ),
    linear-gradient(180deg,
      var(--pub-wood-light) 0%,
      transparent 3px,
      transparent calc(100% - 3px),
      var(--pub-wood-light) 100%
    );
  border: 3px solid var(--pub-wood-medium);
  border-radius: 0 0 10px 10px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.pub-mode .pint-progress::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--fill, 0%);
  background: linear-gradient(180deg,
    #FFF8DC 0%,
    var(--pub-amber) 5%,
    var(--pub-amber-dark) 100%
  );
  transition: height 0.5s ease;
}

/* Foam head */
.pub-mode .pint-progress::after {
  content: '';
  position: absolute;
  bottom: calc(var(--fill, 0%) - 5px);
  left: 2px;
  right: 2px;
  height: 12px;
  background: 
    radial-gradient(ellipse at 50% 100%, #FFFEF7 0%, rgba(255,254,247,0.8) 50%, transparent 100%);
  border-radius: 50%;
  transition: bottom 0.5s ease;
}

/* Success state - celebratory */
.pub-mode .success-message {
  background: linear-gradient(135deg,
    var(--pub-green) 0%,
    var(--pub-green-felt) 100%
  );
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 3px solid var(--pub-brass);
  text-align: center;
  animation: cheers 0.5s ease;
}

@keyframes cheers {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.pub-mode .success-message::before {
  content: '🍻 ';
}

/* Error state */
.pub-mode .error-message {
  background: var(--pub-burgundy);
  color: var(--pub-cream);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 3px solid var(--pub-burgundy-light);
}

.pub-mode .error-message::before {
  content: '😔 ';
}

/* Tooltip styling */
.pub-mode [title] {
  position: relative;
  cursor: help;
}

/* Number of pubs visual indicator */
.pub-mode .pub-count-visual {
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 0;
  justify-content: center;
}

.pub-mode .pub-count-visual .pint-icon {
  font-size: 1.5rem;
  opacity: 0.3;
  transition: all 0.2s ease;
}

.pub-mode .pub-count-visual .pint-icon.active {
  opacity: 1;
  transform: scale(1.1);
}

/* Subtle texture overlay for that "worn" pub feel */
.pub-mode .glass-card {
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Selection color */
.pub-mode ::selection {
  background: var(--pub-amber);
  color: var(--pub-wood-dark);
}

/* ========================================
   CHALKBOARD PUB RESULTS
   ======================================== */

.chalkboard-results {
  background: #2d2d2d;
  border: 8px solid #5c4033;
  border-radius: 4px;
  padding: 2rem;
  box-shadow: 
    inset 0 0 50px rgba(0,0,0,0.5),
    0 4px 20px rgba(0,0,0,0.3);
  position: relative;
}

.chalkboard-results::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
}

.chalkboard-title {
  font-family: 'Permanent Marker', 'Segoe Print', cursive;
  color: #f5f5dc;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.pub-route-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chalkboard-pub-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border-left: 4px solid #D4AF37;
}

.pub-number {
  width: 40px;
  height: 40px;
  background: #D4AF37;
  color: #2d2d2d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.pub-details {
  flex: 1;
}

.pub-name {
  font-family: 'Playfair Display', Georgia, serif;
  color: #f5f5dc;
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.pub-type-tag {
  display: inline-block;
  background: rgba(212, 175, 55, 0.2);
  color: #D4AF37;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.pub-address {
  color: #a0a0a0;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.pub-hygiene {
  font-size: 0.9rem;
  color: #f5f5dc;
}

.pub-hygiene .rating-text {
  color: #888;
  font-size: 0.8rem;
}

.pub-connector {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

/* ========================================
   PUB LOG TAB STYLES
   ======================================== */
.pub-log-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.pub-log-entry {
  background: var(--pub-wood-medium);
  border: 2px solid var(--pub-brass);
  border-radius: 8px;
  padding: 15px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.log-header h3 {
  color: var(--pub-amber);
  margin: 0;
}

.log-date {
  color: var(--pub-cream);
  font-size: 0.9em;
}

.log-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.stat-badge {
  background: var(--pub-green);
  color: var(--pub-cream);
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.85em;
}

.log-pubs {
  color: var(--pub-parchment);
  font-style: italic;
}

/* ========================================
   PUB PROGRESS TAB STYLES
   ======================================== */
.progress-header {
  text-align: center;
  margin: 20px 0;
}

.progress-percent {
  font-size: 1.5em;
  color: var(--pub-amber);
  font-weight: bold;
}

.progress-bar-container {
  width: 100%;
  height: 30px;
  background: var(--pub-wood-dark);
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid var(--pub-brass);
  margin: 20px 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--pub-amber-dark), var(--pub-amber), var(--pub-amber-light));
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  color: white;
  font-weight: bold;
}

.visited-pubs-list {
  margin-top: 20px;
  padding: 15px;
  background: var(--pub-wood-medium);
  border-radius: 8px;
  border: 2px solid var(--pub-brass);
}

.visited-pubs-list summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--pub-amber);
  padding: 10px;
}

.pub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.pub-chip {
  background: var(--pub-green);
  color: var(--pub-cream);
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.85em;
  border: 1px solid var(--pub-brass);
}

.pub-marker {
  font-size: 20px;
}

/* ========================================
   DISCOVER TAB STYLES
   ======================================== */
.discover-search {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 12px;
  border: 2px solid var(--pub-brass);
  border-radius: 8px;
  background: var(--pub-wood-medium);
  color: var(--pub-cream);
  font-size: 1em;
}

.search-input::placeholder {
  color: var(--pub-brass);
}

.filter-select {
  padding: 12px;
  border: 2px solid var(--pub-brass);
  border-radius: 8px;
  background: var(--pub-wood-medium);
  color: var(--pub-cream);
  font-size: 1em;
  min-width: 150px;
}

.discover-results {
  margin-top: 20px;
}

.results-count {
  color: var(--pub-amber);
  font-weight: bold;
  margin-bottom: 15px;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.discover-pub-card {
  background: var(--pub-wood-medium);
  border: 2px solid var(--pub-brass);
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.discover-pub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 160, 61, 0.3);
}

.discover-pub-card h3 {
  color: var(--pub-amber);
  margin: 0 0 10px 0;
  font-size: 1.1em;
}

.pub-address {
  color: var(--pub-cream);
  font-size: 0.9em;
  margin: 5px 0;
}

.pub-rating {
  color: var(--pub-amber-light);
  font-weight: bold;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .discover-grid {
    grid-template-columns: 1fr;
  }
  
  .discover-search {
    flex-direction: column;
  }
  
  .search-input,
  .filter-select {
    width: 100%;
  }
}