/**
 * PickleTara - Design System & Custom Stylesheet
 * 
 * Color Palette:
 * - Green (Primary Brand & Sports Action)
 * - Blue (Supporting, Secondary Actions & Information)
 * - Dark (Slate/Charcoal for Headings, Navigation & High Contrast)
 * - Light/Neutral (Clean surfaces & Backgrounds)
 */

:root {
  /* Brand Green Palette */
  --pt-primary: #15803d;
  --pt-primary-hover: #166534;
  --pt-primary-active: #14532d;
  --pt-primary-light: #f0fdf4;
  --pt-primary-subtle: #dcfce7;
  --pt-primary-border: #bbf7d0;

  /* Accent Lime (Pickleball ball vibrance) */
  --pt-accent-lime: #84cc16;
  --pt-accent-lime-light: #f7fee7;
  --pt-accent-lime-subtle: #ecfccb;

  /* Supporting Blue Palette */
  --pt-blue: #0284c7;
  --pt-blue-hover: #0369a1;
  --pt-blue-active: #075985;
  --pt-blue-light: #f0f9ff;
  --pt-blue-subtle: #e0f2fe;
  --pt-blue-border: #bae6fd;

  /* Dark Contrast & Surfaces */
  --pt-dark: #0f172a;
  --pt-dark-surface: #1e293b;
  --pt-dark-muted: #334155;

  /* Text Colors */
  --pt-text-main: #1e293b;
  --pt-text-heading: #0f172a;
  --pt-text-muted: #64748b;
  --pt-text-light: #94a3b8;

  /* Neutral Backgrounds & Borders */
  --pt-bg-page: #f8fafc;
  --pt-bg-card: #ffffff;
  --pt-bg-muted: #f1f5f9;
  --pt-border: #e2e8f0;
  --pt-border-subtle: #f1f5f9;

  /* Semantic Colors */
  --pt-success: #16a34a;
  --pt-warning: #d97706;
  --pt-danger: #dc2626;
  --pt-info: #0284c7;

  /* Shadows */
  --pt-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --pt-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --pt-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --pt-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  /* Radii */
  --pt-radius-sm: 0.375rem;
  --pt-radius-md: 0.5rem;
  --pt-radius-lg: 0.75rem;
  --pt-radius-xl: 1rem;
  --pt-radius-2xl: 1.5rem;
  --pt-radius-pill: 9999px;

  /* Spacing Scale */
  --pt-space-xs: 0.25rem;
  --pt-space-sm: 0.5rem;
  --pt-space-md: 1rem;
  --pt-space-lg: 1.5rem;
  --pt-space-xl: 2rem;
  --pt-space-2xl: 3rem;
  --pt-space-3xl: 4.5rem;

  /* Typography */
  --pt-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  font-family: var(--pt-font-sans);
  color: var(--pt-text-main);
  background-color: var(--pt-bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Global Modal Layout Stability Rules
   ========================================================================== */
body.modal-open {
  overflow-y: hidden;
}

@media (max-width: 991.98px) {
  body.modal-open {
    padding-right: 0 !important;
  }
}

/* ==========================================================================
   Typography & Headings
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pt-font-sans);
  color: var(--pt-text-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }

@media (min-width: 768px) {
  h1, .h1 { font-size: 3rem; }
  h2, .h2 { font-size: 2.25rem; }
  h3, .h3 { font-size: 1.75rem; }
}

@media (min-width: 992px) {
  h1, .h1 { font-size: 3.5rem; }
}

p {
  margin-bottom: 1rem;
}

.text-pt-muted {
  color: var(--pt-text-muted) !important;
}

.text-pt-primary {
  color: var(--pt-primary) !important;
}

.text-pt-blue {
  color: var(--pt-blue) !important;
}

.text-pt-dark {
  color: var(--pt-dark) !important;
}

/* ==========================================================================
   Navbar & Navigation System
   Normal document flow on mobile & tablet; sticky on desktop.
   ========================================================================== */
.pt-navbar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--pt-border);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: static;
  top: auto;
  z-index: 1030;
}

@media (min-width: 992px) {
  .pt-navbar {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 991.98px) {
  .pt-navbar,
  nav.navbar,
  header,
  nav.navbar.sticky-top,
  nav.navbar.fixed-top,
  .pt-guide-nav-bar.sticky-top,
  .sticky-top {
    position: static !important;
    top: auto !important;
  }

  .position-sticky {
    position: static !important;
    top: auto !important;
  }
}

.pt-navbar.scrolled {
  box-shadow: var(--pt-shadow-sm);
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
}

.pt-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--pt-dark);
  text-decoration: none;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pt-brand:hover {
  color: var(--pt-primary);
}

.pt-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--pt-primary) 0%, #16a34a 100%);
  color: #ffffff;
  border-radius: var(--pt-radius-md);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
  font-size: 1.15rem;
}

.pt-brand-highlight {
  color: var(--pt-primary);
}

.pt-nav-link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--pt-dark-muted) !important;
  padding: 0.55rem 0.9rem !important;
  border-radius: var(--pt-radius-pill);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.pt-nav-link:hover,
.pt-nav-link:focus {
  color: var(--pt-primary) !important;
  background-color: var(--pt-primary-light);
}

.pt-nav-link.active {
  color: var(--pt-primary) !important;
  background-color: var(--pt-primary-subtle);
  font-weight: 700;
}

.pt-navbar-toggler {
  border: 1px solid var(--pt-border);
  padding: 0.45rem 0.65rem;
  border-radius: var(--pt-radius-md);
  background-color: var(--pt-bg-muted);
  color: var(--pt-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  transition: all 0.15s ease-in-out;
}

.pt-navbar-toggler:hover {
  background-color: var(--pt-border);
  color: var(--pt-dark);
}

.pt-navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--pt-primary-subtle);
  outline: none;
}

/* Notification Bell Button & Dropdown */
.pt-notif-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--pt-border);
  background-color: var(--pt-bg-muted);
  color: var(--pt-dark);
  padding: 0;
  transition: all 0.15s ease-in-out;
}

.pt-notif-btn:hover,
.pt-notif-btn:focus {
  background-color: var(--pt-border);
  color: var(--pt-dark);
}

.pt-notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 9999px;
  background-color: var(--pt-danger);
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.4);
}

.pt-notif-menu {
  border-radius: var(--pt-radius-lg);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow-xl);
  z-index: 1060;
  width: 350px;
  max-width: calc(100vw - 20px);
  overflow: hidden;
  padding: 0;
}

/* Status Dots */
.pt-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pt-status-dot-green {
  background-color: var(--pt-primary);
  box-shadow: 0 0 0 2px var(--pt-primary-subtle);
}

.pt-status-dot-blue {
  background-color: var(--pt-blue);
  box-shadow: 0 0 0 2px var(--pt-blue-subtle);
}

.pt-status-dot-dark {
  background-color: var(--pt-dark);
  box-shadow: 0 0 0 2px #cbd5e1;
}

/* Mode Switcher Components */
.pt-mode-pill {
  border-radius: var(--pt-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--pt-border);
  background-color: var(--pt-bg-muted);
  color: var(--pt-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.15s ease-in-out;
}

.pt-mode-pill:hover,
.pt-mode-pill:focus {
  background-color: var(--pt-border);
  color: var(--pt-dark);
}

.pt-mobile-mode-switcher {
  background-color: var(--pt-bg-muted);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  padding: 0.4rem;
  display: flex;
  gap: 0.4rem;
}

.pt-mobile-mode-btn {
  flex: 1;
  border-radius: var(--pt-radius-md);
  font-weight: 600;
  font-size: 0.825rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--pt-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.15s ease-in-out;
  min-height: 40px;
}

.pt-mobile-mode-btn.active {
  background-color: #ffffff;
  color: var(--pt-dark);
  border-color: var(--pt-border);
  box-shadow: var(--pt-shadow-sm);
  font-weight: 700;
}

/* Account Dropdown & Menu */
.pt-account-pill {
  border-radius: var(--pt-radius-pill);
  border: 1px solid var(--pt-border);
  background-color: #ffffff;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pt-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.15s ease-in-out;
  min-height: 38px;
}

.pt-account-pill:hover,
.pt-account-pill:focus {
  border-color: #cbd5e1;
  background-color: var(--pt-bg-muted);
  color: var(--pt-dark);
}

.pt-dropdown-panel {
  border-radius: var(--pt-radius-lg);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow-xl);
  z-index: 1060;
  min-width: 240px;
  padding: 0.5rem;
}

.pt-dropdown-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pt-text-light);
  padding: 0.45rem 0.75rem 0.2rem;
}

.pt-dropdown-link {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--pt-text-main);
  padding: 0.38rem 0.65rem;
  border-radius: var(--pt-radius-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  min-height: 34px;
}

.pt-dropdown-link:hover,
.pt-dropdown-link:focus {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
}

.pt-dropdown-link.active {
  background-color: var(--pt-primary-subtle);
  color: var(--pt-primary);
  font-weight: 700;
}

.pt-dropdown-link-danger {
  color: var(--pt-danger);
}

.pt-dropdown-link-danger:hover,
.pt-dropdown-link-danger:focus {
  background-color: #fef2f2;
  color: #dc2626;
}

/* Mobile Navigation Drawer Structure */
@media (max-width: 991.98px) {
  .pt-navbar .navbar-collapse {
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0 1.25rem;
    border-top: 1px solid var(--pt-border);
    margin-top: 0.5rem;
  }
}

.pt-mobile-user-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--pt-bg-muted) 100%);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  padding: 0.85rem;
}

.pt-mobile-section-title {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pt-text-light);
  margin-top: 0.85rem;
  margin-bottom: 0.35rem;
  padding-left: 0.45rem;
}

.pt-mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.75rem;
  border-radius: var(--pt-radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--pt-dark);
  text-decoration: none;
  min-height: 38px;
  transition: all 0.15s ease-in-out;
  margin-bottom: 0.15rem;
}

.pt-mobile-nav-link:hover,
.pt-mobile-nav-link:focus,
.pt-mobile-nav-link:active {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
}

.pt-mobile-nav-link.active {
  background-color: var(--pt-primary-subtle);
  color: var(--pt-primary);
  font-weight: 700;
}

.pt-mobile-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--pt-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pt-bg-muted);
  color: var(--pt-primary);
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: all 0.15s ease-in-out;
}

.pt-mobile-nav-link.active .pt-mobile-nav-icon {
  background-color: var(--pt-primary);
  color: #ffffff;
}

.pt-mobile-nav-icon-blue {
  color: var(--pt-blue);
}

.pt-mobile-nav-link.active .pt-mobile-nav-icon-blue {
  background-color: var(--pt-blue);
  color: #ffffff;
}

/* ==========================================================================
   Buttons System (Touch-Friendly, min height 44px)
   ========================================================================== */
.btn {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65rem 1.35rem;
  min-height: 44px;
  border-radius: var(--pt-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.18s ease-in-out;
  text-decoration: none;
}

.btn-lg {
  font-size: 1.05rem;
  padding: 0.85rem 1.75rem;
  min-height: 50px;
  border-radius: var(--pt-radius-lg);
}

.btn-sm {
  font-size: 0.875rem;
  padding: 0.45rem 0.9rem;
  min-height: 38px;
  border-radius: var(--pt-radius-md);
}

/* Primary Green Button */
.btn-pt-primary {
  background-color: var(--pt-primary);
  border: 1px solid var(--pt-primary);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(21, 128, 61, 0.2);
}

.btn-pt-primary:hover,
.btn-pt-primary:focus {
  background-color: var(--pt-primary-hover);
  border-color: var(--pt-primary-hover);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(21, 128, 61, 0.3);
  transform: translateY(-1px);
}

.btn-pt-primary:active {
  background-color: var(--pt-primary-active);
  transform: translateY(0);
}

/* Secondary Blue Button */
.btn-pt-blue {
  background-color: var(--pt-blue);
  border: 1px solid var(--pt-blue);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.btn-pt-blue:hover,
.btn-pt-blue:focus {
  background-color: var(--pt-blue-hover);
  border-color: var(--pt-blue-hover);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
  transform: translateY(-1px);
}

/* Outline Green Button */
.btn-pt-outline {
  background-color: transparent;
  border: 1.5px solid var(--pt-primary);
  color: var(--pt-primary);
}

.btn-pt-outline:hover,
.btn-pt-outline:focus {
  background-color: var(--pt-primary);
  border-color: var(--pt-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Outline Blue Button */
.btn-pt-outline-blue {
  background-color: transparent;
  border: 1.5px solid var(--pt-blue);
  color: var(--pt-blue);
}

.btn-pt-outline-blue:hover,
.btn-pt-outline-blue:focus {
  background-color: var(--pt-blue);
  border-color: var(--pt-blue);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Dark Contrast Button */
.btn-pt-dark {
  background-color: var(--pt-dark);
  border: 1px solid var(--pt-dark);
  color: #ffffff;
}

.btn-pt-dark:hover,
.btn-pt-dark:focus {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Light / Ghost Button */
.btn-pt-light {
  background-color: var(--pt-bg-muted);
  border: 1px solid var(--pt-border);
  color: var(--pt-dark);
}

.btn-pt-light:hover,
.btn-pt-light:focus {
  background-color: var(--pt-border);
  color: var(--pt-dark);
}

.btn-pt-subtle-primary {
  background-color: var(--pt-primary-light);
  border: 1px solid var(--pt-primary-border);
  color: var(--pt-primary);
}

.btn-pt-subtle-primary:hover,
.btn-pt-subtle-primary:focus {
  background-color: var(--pt-primary-subtle);
  color: var(--pt-primary-hover);
}

/* ==========================================================================
   Cards System
   ========================================================================== */
.pt-card {
  background-color: var(--pt-bg-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  box-shadow: var(--pt-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: visible;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pt-shadow-lg);
  border-color: #cbd5e1;
}

.pt-card-header {
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border-bottom: 1px solid var(--pt-border-subtle);
}

.pt-card-body {
  padding: 1.5rem;
  flex: 1 1 auto;
}

.pt-card-footer {
  padding: 1rem 1.5rem;
  background-color: var(--pt-bg-page);
  border-top: 1px solid var(--pt-border-subtle);
}

/* Interactive Card Image Banner */
.pt-card-image-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-court-illustration {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: 
    linear-gradient(to right, #ffffff 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff 1px, transparent 1px);
  background-size: 24px 24px;
}

.pt-card-image-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.pt-card-image-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* ==========================================================================
   Badges & Status Indicators
   ========================================================================== */
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: var(--pt-radius-pill);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.pt-badge-primary {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  border: 1px solid var(--pt-primary-border);
}

.pt-badge-blue {
  background-color: var(--pt-blue-light);
  color: var(--pt-blue);
  border: 1px solid var(--pt-blue-border);
}

.pt-badge-dark {
  background-color: var(--pt-dark);
  color: #ffffff;
}

.pt-badge-light {
  background-color: var(--pt-bg-muted);
  color: var(--pt-dark-muted);
  border: 1px solid var(--pt-border);
}

.pt-badge-accent {
  background-color: var(--pt-accent-lime-subtle);
  color: #3f6212;
  border: 1px solid #d9f99d;
}

.pt-badge-warning {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.pt-badge-danger {
  background-color: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Status Dot */
.pt-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.pt-status-dot-green { background-color: var(--pt-primary); box-shadow: 0 0 0 2px var(--pt-primary-subtle); }
.pt-status-dot-blue { background-color: var(--pt-blue); box-shadow: 0 0 0 2px var(--pt-blue-subtle); }
.pt-status-dot-amber { background-color: var(--pt-warning); }

/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */
.pt-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: var(--pt-radius-lg);
  border: 1px solid transparent;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.pt-alert-primary {
  background-color: var(--pt-primary-light);
  border-color: var(--pt-primary-border);
  color: var(--pt-primary-hover);
}

.pt-alert-blue {
  background-color: var(--pt-blue-light);
  border-color: var(--pt-blue-border);
  color: var(--pt-blue-hover);
}

.pt-alert-warning {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.pt-alert-danger {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.pt-alert-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ==========================================================================
   Form Controls
   ========================================================================== */
.form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pt-dark);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  min-height: 44px;
  border-radius: var(--pt-radius-md);
  border: 1.5px solid var(--pt-border);
  color: var(--pt-text-main);
  background-color: #ffffff;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pt-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  outline: none;
}

.form-control::placeholder {
  color: var(--pt-text-light);
}

/* Quick Search Widget Box */
.pt-search-widget {
  background-color: #ffffff;
  border-radius: var(--pt-radius-xl);
  box-shadow: var(--pt-shadow-xl);
  border: 1px solid var(--pt-border);
  padding: 1.25rem;
}

@media (min-width: 992px) {
  .pt-search-widget {
    padding: 1.5rem 2rem;
  }
}

/* ==========================================================================
   Empty States
   ========================================================================== */
.pt-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background-color: #ffffff;
  border: 1.5px dashed var(--pt-border);
  border-radius: var(--pt-radius-xl);
}

.pt-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  font-size: 1.75rem;
}

/* ==========================================================================
   Hero Section & Introductory Animation (Phase 2)
   ========================================================================== */
.pt-hero-section {
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(220, 252, 231, 0.6) 0%, rgba(248, 250, 252, 1) 60%),
              radial-gradient(circle at 10% 80%, rgba(224, 242, 254, 0.5) 0%, transparent 50%);
  padding: 3rem 0 4.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--pt-border);
}

@media (min-width: 768px) {
  .pt-hero-section {
    padding: 4.5rem 0 5.5rem;
  }
}

/* Introductory Pickleball Animation (GIF Support + CSS Fallback) */
.pt-intro-anim-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background-color: #ffffff;
  border: 1.5px solid var(--pt-border);
  padding: 0.35rem 0.95rem 0.35rem 0.45rem;
  border-radius: var(--pt-radius-pill);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pt-dark);
  margin-bottom: 1.25rem;
  max-width: 100%;
}

.pt-intro-gif-preview {
  max-height: 32px;
  width: auto;
  border-radius: var(--pt-radius-pill);
  object-fit: cover;
}

/* Pure CSS/SVG Micro-Animation Fallback */
.pt-ball-anim-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef08a 0%, #84cc16 100%);
  color: #1e293b;
  box-shadow: 0 2px 5px rgba(132, 204, 22, 0.4);
  flex-shrink: 0;
  position: relative;
  animation: pt-ball-bounce 2.4s ease-in-out infinite;
}

@keyframes pt-ball-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(12deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-2px) rotate(-8deg); }
}

.pt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #ffffff;
  border: 1px solid var(--pt-primary-border);
  padding: 0.35rem 0.9rem;
  border-radius: var(--pt-radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pt-primary);
  box-shadow: var(--pt-shadow-sm);
  margin-bottom: 1.25rem;
}

/* Authenticated Contextual Welcome Badge & Quick Action Bar (Phase 5) */
.pt-auth-welcome-badge {
  background-color: #ffffff;
  border: 1.5px solid var(--pt-border);
  padding: 0.35rem 0.85rem 0.35rem 0.45rem;
  border-radius: var(--pt-radius-pill);
  font-size: 0.85rem;
  color: var(--pt-dark);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.pt-auth-quick-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pt-auth-quick-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pt-dark-muted);
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  padding: 0.4rem 0.85rem;
  min-height: 38px;
  border-radius: var(--pt-radius-pill);
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pt-auth-quick-link:hover {
  color: var(--pt-primary);
  border-color: var(--pt-primary-border);
  background-color: var(--pt-primary-light);
}

.pt-hero-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pt-dark);
  margin-bottom: 1rem;
  line-height: 1.15;
  font-size: 2.25rem;
}

@media (min-width: 768px) {
  .pt-hero-title {
    font-size: 2.85rem;
  }
}

@media (min-width: 992px) {
  .pt-hero-title {
    font-size: 3.25rem;
  }
}

.pt-hero-subtitle {
  font-size: 1.1rem;
  color: var(--pt-text-muted);
  max-width: 560px;
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .pt-hero-subtitle {
    font-size: 1.2rem;
  }
}

/* Tri-Pathway Scanning Chips in Hero */
.pt-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.pt-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--pt-radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pt-role-chip-player {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  border: 1px solid var(--pt-primary-border);
}

.pt-role-chip-organizer {
  background-color: var(--pt-blue-light);
  color: var(--pt-blue);
  border: 1px solid var(--pt-blue-border);
}

.pt-role-chip-owner {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.pt-hero-visual {
  position: relative;
}

.pt-hero-card-preview {
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-2xl);
  box-shadow: var(--pt-shadow-xl);
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

.pt-court-preview-box {
  background: linear-gradient(145deg, #064e3b 0%, #065f46 50%, #0f172a 100%);
  border-radius: var(--pt-radius-xl);
  height: 260px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  color: #ffffff;
}

.pt-hero-float-badge {
  position: absolute;
  bottom: -15px;
  right: -15px;
  background: #ffffff;
  border: 1px solid var(--pt-border);
  padding: 0.85rem 1.2rem;
  border-radius: var(--pt-radius-xl);
  box-shadow: var(--pt-shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 3;
}

/* Pulsing Status Dot */
.pt-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.pt-pulse-dot-green {
  background-color: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pt-pulse-green 2s infinite;
}

.pt-pulse-dot-red {
  background-color: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: pt-pulse-red 2s infinite;
}

@keyframes pt-pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes pt-pulse-red {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================================================
   Section Spacing & Utilities
   ========================================================================== */
.pt-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .pt-section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}

.pt-section-alt {
  background-color: #ffffff;
  border-top: 1px solid var(--pt-border);
  border-bottom: 1px solid var(--pt-border);
}

.pt-section-header {
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .pt-section-header {
    margin-bottom: 3.5rem;
  }
}

.pt-section-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

.pt-section-subtitle {
  color: var(--pt-text-muted);
  font-size: 1.05rem;
  max-width: 600px;
}

/* Feature Step Box */
.pt-step-card {
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  padding: 2rem 1.5rem;
  text-align: left;
  height: 100%;
  box-shadow: var(--pt-shadow-sm);
  transition: all 0.2s ease-in-out;
  position: relative;
}

.pt-step-card:hover {
  border-color: var(--pt-primary-border);
  box-shadow: var(--pt-shadow-md);
  transform: translateY(-3px);
}

.pt-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  font-weight: 800;
  font-size: 1.15rem;
  border-radius: var(--pt-radius-lg);
  border: 1px solid var(--pt-primary-border);
}

.pt-step-number-blue {
  background-color: var(--pt-blue-light);
  color: var(--pt-blue);
  border-color: var(--pt-blue-border);
}

.pt-step-header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.pt-step-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--pt-radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Step Journey Tabs (Phase 6) */
.pt-step-tab-pills {
  background-color: var(--pt-bg-muted);
  padding: 0.35rem;
  border-radius: var(--pt-radius-pill);
  border: 1px solid var(--pt-border);
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pt-step-tab-pills .nav-link {
  border-radius: var(--pt-radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 1.25rem;
  color: var(--pt-dark-muted);
  background-color: transparent;
  border: none;
  transition: all 0.2s ease;
}

.pt-step-tab-pills .nav-link.active {
  background-color: #ffffff;
  color: var(--pt-dark);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.pt-step-tab-pills .nav-link-player.active {
  color: var(--pt-primary);
}

.pt-step-tab-pills .nav-link-organizer.active {
  color: var(--pt-blue);
}

/* Secondary CTA Bar (Phase 6) */
.pt-cta-secondary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #94a3b8;
}

.pt-cta-secondary-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease;
}

.pt-cta-secondary-link:hover {
  color: #86efac;
}

/* Audience Split & Pathways Section */
.pt-audience-card,
.pt-pathway-card {
  border-radius: var(--pt-radius-2xl);
  padding: 1.75rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--pt-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #ffffff;
}

@media (min-width: 992px) {
  .pt-audience-card,
  .pt-pathway-card {
    padding: 2.25rem 1.75rem;
  }
}

.pt-audience-card:hover,
.pt-pathway-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pt-shadow-lg);
}

.pt-audience-owner,
.pt-pathway-owner {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-color: var(--pt-primary-border);
}

.pt-audience-organizer,
.pt-pathway-organizer {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border-color: var(--pt-blue-border);
}

.pt-pathway-player {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: var(--pt-border);
}

.pt-pathway-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--pt-radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}

.pt-pathway-punchline {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pt-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.pt-team-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--pt-blue-light);
  border: 1px dashed var(--pt-blue-border);
  color: var(--pt-blue-active);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: var(--pt-radius-md);
  margin-top: 0.25rem;
}

/* Mobile Pathway Role Switcher Tabs */
.pt-pathway-nav-pills {
  background-color: var(--pt-bg-muted);
  padding: 0.35rem;
  border-radius: var(--pt-radius-pill);
  border: 1px solid var(--pt-border);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pt-pathway-nav-pills .nav-link {
  border-radius: var(--pt-radius-pill);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 0.85rem;
  color: var(--pt-dark-muted);
  background-color: transparent;
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pt-pathway-nav-pills .nav-link.active {
  background-color: #ffffff;
  color: var(--pt-dark);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.pt-pathway-nav-pills .nav-link-player.active {
  color: var(--pt-primary);
}

.pt-pathway-nav-pills .nav-link-organizer.active {
  color: var(--pt-blue);
}

.pt-pathway-nav-pills .nav-link-owner.active {
  color: #b45309;
}

/* Trust & Verification Grid */
.pt-trust-card {
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pt-trust-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-md);
  border-color: var(--pt-primary-border);
}

.pt-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--pt-radius-lg);
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Ecosystem & Sharing Highlights */
.pt-ecosystem-card {
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  padding: 1.75rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pt-ecosystem-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-md);
  border-color: var(--pt-border);
}

.pt-ecosystem-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--pt-radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.pt-share-action-hint {
  font-size: 0.75rem;
  color: var(--pt-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Intro Animation Scaffold Frame */
.pt-intro-animation-frame {
  position: relative;
  border-radius: var(--pt-radius-2xl);
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.04) 0%, rgba(2, 132, 199, 0.04) 100%);
  border: 1px dashed var(--pt-primary-border);
  padding: 1.5rem;
  text-align: center;
  overflow: hidden;
}

/* Date Pill Badge for Events */
.pt-date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 58px;
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  box-shadow: var(--pt-shadow-sm);
  text-align: center;
  flex-shrink: 0;
}

.pt-date-month {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--pt-primary);
  line-height: 1;
}

.pt-date-day {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pt-dark);
  line-height: 1.1;
}

/* Progress bar for capacity */
.pt-progress {
  height: 6px;
  border-radius: var(--pt-radius-pill);
  background-color: var(--pt-bg-muted);
  overflow: hidden;
}

.pt-progress-bar {
  background-color: var(--pt-primary);
  border-radius: var(--pt-radius-pill);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pt-footer {
  background-color: var(--pt-dark);
  color: #94a3b8;
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid #1e293b;
}

.pt-footer h6 {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.pt-footer-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-block;
  margin-bottom: 0;
  transition: color 0.15s ease-in-out;
}

.pt-footer-link:hover {
  color: #ffffff;
}

.pt-footer-bottom {
  border-top: 1px solid #1e293b;
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: 0.875rem;
}

.pt-footer-auth {
  background-color: var(--pt-dark);
  color: #94a3b8;
  border-top: 1px solid #1e293b;
  font-size: 0.875rem;
}

/* ==========================================================================
   Accessibility & Responsive Helpers
   ========================================================================== */
:focus-visible {
  outline: 2.5px solid var(--pt-primary);
  outline-offset: 2px;
}

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--pt-dark);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  border-radius: var(--pt-radius-md);
  font-weight: 600;
  transition: top 0.2s ease-in-out;
}

.skip-to-content:focus {
  top: 1rem;
}

/* Mobile & Tablet Specific Adjustments */
@media (max-width: 767.98px) {
  .pt-hero-section {
    text-align: center;
  }
  
  .pt-intro-anim-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .pt-role-chips {
    justify-content: center;
  }

  .pt-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .pt-hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .pt-hero-cta-group .btn {
    width: 100%;
  }

  .pt-audience-card {
    padding: 1.75rem 1.25rem;
  }

  .pt-search-widget {
    padding: 1.25rem;
  }

  .pt-search-widget .row > div {
    margin-bottom: 0.75rem;
  }

  .pt-card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet Specific Breakpoints (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pt-hero-title {
    font-size: 2.75rem;
  }

  .pt-audience-card {
    padding: 2rem 1.5rem;
  }

  .pt-card {
    padding: 1.5rem;
  }
}

/* Text Overflow & Safe Wrapping */
.text-break-word {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* High Contrast Focus Ring */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pt-primary) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   Hourly Court Availability Grid (Mobile-First Layout)
   ========================================================================== */
.hourly-grid-table {
  border-collapse: separate;
  border-spacing: 0;
}

.hourly-grid-table th,
.hourly-grid-table td {
  border-color: #e2e8f0;
}

.pt-slot-available-btn {
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.pt-slot-available-btn:hover {
  background-color: #d1fae5 !important;
  border-color: #34d399 !important;
  color: #064e3b !important;
  transform: scale(1.02);
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.15) !important;
}

.pt-slot-available-btn:active,
.pt-slot-available-btn.border-pt-primary {
  background-color: #a7f3d0 !important;
  border-color: #059669 !important;
  color: #064e3b !important;
  box-shadow: 0 0 0 2px #059669 !important;
}

.modal-court-choice:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}

.btn-check:checked + #label_mode_single {
  background-color: var(--pt-primary);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(6, 78, 59, 0.2);
}

.btn-check:checked + #label_mode_multi {
  background-color: var(--pt-blue);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(30, 58, 138, 0.2);
}

.btn-check:not(:checked) + #label_mode_single,
.btn-check:not(:checked) + #label_mode_multi {
  background-color: transparent;
  color: #475569;
}

/* ==========================================================================
   Form Controls, Numeric & Time Picker Alignment
   ========================================================================== */
body,
input,
select,
textarea,
button,
.form-control,
.form-select,
.dropdown-menu,
.dropdown-item,
.badge,
.table,
.font-monospace {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* Ensure consistent spacing and font rendering across all time and date inputs */
input[type="datetime-local"],
input[type="time"],
input[type="date"],
input[type="number"],
.form-control,
.form-select {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  line-height: 1.5;
}

/* Normalize WebKit/Chromium date & time native values */
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value {
  min-height: 1.5em;
  margin: 0;
  line-height: 1.5;
}

/* Prevent unwanted margin/padding on WebKit inner datetime components */
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* Select options & dropdown items with uniform tabular spacing without blank gaps */
select option {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  margin: 0;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
}

select option:empty {
  display: none;
}

/* ==========================================================================
   EasySerb Dropdown Design System & Responsive Framework
   ========================================================================== */

/* Universal Dropdown Menu */
.dropdown-menu {
  z-index: 1060;
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  padding: 0.4rem;
  min-width: 12rem;
  max-width: calc(100vw - 20px);
  overflow-x: hidden;
  font-size: 0.875rem;
}

/* Dropdown Options (Items) */
.dropdown-item {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  line-height: 1.35;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pt-text-main);
  padding: 0.38rem 0.65rem;
  border-radius: var(--pt-radius-sm);
  display: flex;
  align-items: center;
  gap: 0.48rem;
  transition: all 0.15s ease-in-out;
  min-height: 35px;
  white-space: normal;
  word-break: break-word;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--pt-primary);
  color: #ffffff;
  font-weight: 600;
}

.dropdown-item.active i,
.dropdown-item:active i,
.dropdown-item.active .bi,
.dropdown-item:active .bi {
  color: #ffffff !important;
}

/* Dropdown Icons Alignment */
.dropdown-item i,
.dropdown-item .bi,
.pt-dropdown-link i {
  font-size: 0.9rem;
  width: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease-in-out;
}

/* Dropdown Section Header */
.dropdown-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pt-text-light);
  padding: 0.35rem 0.65rem 0.2rem;
}

/* Dropdown Divider */
.dropdown-divider {
  margin: 0.3rem 0;
  border-top: 1px solid var(--pt-border);
  opacity: 1;
}

/* Stacking Context Elevation for cards containing active dropdowns */
.pt-card-dropdown-elevated {
  position: relative;
  z-index: 30 !important;
  overflow: visible !important;
}

/* Venue Dropdown Custom Component */
.pt-dropdown-venue-list {
  min-width: 290px;
  max-width: min(340px, calc(100vw - 24px));
}

.pt-dropdown-venue-item {
  padding: 0.38rem 0.6rem;
  border-radius: var(--pt-radius-md);
  transition: all 0.15s ease-in-out;
  min-height: 35px;
}

.pt-dropdown-venue-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--pt-radius-sm);
  flex-shrink: 0;
}

/* Responsive Dropdown Scaling: Tablet screens (576px to 991.98px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .dropdown-menu {
    max-width: min(340px, calc(100vw - 24px));
    padding: 0.35rem;
  }

  .dropdown-item {
    font-size: 0.835rem;
    padding: 0.34rem 0.58rem;
    min-height: 35px;
    gap: 0.45rem;
  }

  .dropdown-item i,
  .dropdown-item .bi,
  .pt-dropdown-link i {
    font-size: 0.88rem;
    width: 1.1rem;
  }

  .dropdown-header {
    font-size: 0.66rem;
    padding: 0.3rem 0.58rem 0.18rem;
  }
}

/* Responsive Dropdown Scaling: Mobile & Small Screens (< 576px) */
@media (max-width: 575.98px) {
  .dropdown-menu {
    padding: 0.28rem !important;
    border-radius: var(--pt-radius-md) !important;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.15), 0 4px 6px -2px rgba(15, 23, 42, 0.08) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: min(200px, calc(100vw - 20px)) !important;
    font-size: 0.8125rem !important;
  }

  /* Compact Individual Dropdown Options */
  .dropdown-item {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 0.28rem 0.5rem !important;
    min-height: 34px !important;
    border-radius: var(--pt-radius-sm) !important;
    gap: 0.4rem !important;
    line-height: 1.3 !important;
  }

  /* Override hardcoded Bootstrap padding utilities on dropdown items */
  .dropdown-item.py-2,
  .dropdown-item.py-1\.5,
  .dropdown-item.p-2 {
    padding-top: 0.28rem !important;
    padding-bottom: 0.28rem !important;
  }

  .dropdown-item.px-3 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Account & Workspace Dropdown Links on Mobile */
  .pt-dropdown-link {
    font-size: 0.8125rem !important;
    padding: 0.3rem 0.52rem !important;
    min-height: 34px !important;
    gap: 0.42rem !important;
    line-height: 1.3 !important;
  }

  .dropdown-item i,
  .dropdown-item .bi,
  .pt-dropdown-link i {
    font-size: 0.825rem !important;
    width: 1rem !important;
  }

  .dropdown-header,
  .pt-dropdown-section-title {
    font-size: 0.64rem !important;
    padding: 0.25rem 0.45rem 0.12rem !important;
    letter-spacing: 0.05em !important;
  }

  .dropdown-divider {
    margin: 0.2rem 0 !important;
  }

  .dropdown-item .badge {
    font-size: 0.64rem !important;
    padding: 0.12rem 0.32rem !important;
  }

  /* Mobile Navigation Menu Links (Inside Header Drawer) */
  .pt-mobile-nav-link {
    padding: 0.32rem 0.6rem !important;
    min-height: 35px !important;
    font-size: 0.825rem !important;
    gap: 0.45rem !important;
    margin-bottom: 0.1rem !important;
  }

  .pt-mobile-nav-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.825rem !important;
  }

  .pt-mobile-section-title {
    font-size: 0.64rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Compact Mobile Notification Menu */
  .pt-notif-menu {
    width: min(320px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .pt-notif-menu .dropdown-item {
    padding: 0.32rem 0.52rem !important;
    min-height: auto !important;
  }

  .pt-notif-menu .dropdown-item strong {
    font-size: 0.78rem !important;
  }

  .pt-notif-menu .dropdown-item .text-pt-muted {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  .pt-notif-menu .dropdown-item .mb-1 {
    margin-bottom: 0.12rem !important;
  }

  .pt-notif-menu .dropdown-item .mt-1 {
    margin-top: 0.12rem !important;
  }

  /* Venue discovery mobile optimization */
  .pt-dropdown-venue-list {
    min-width: min(280px, calc(100vw - 20px)) !important;
    width: min(320px, calc(100vw - 20px)) !important;
  }

  .pt-dropdown-venue-item {
    padding: 0.28rem 0.45rem !important;
    min-height: 34px !important;
    gap: 0.42rem !important;
  }

  .pt-dropdown-venue-img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ==========================================================================
   Password Visibility Toggle Buttons
   ========================================================================== */
.btn-toggle-password {
  border-color: var(--pt-border);
  background-color: var(--pt-bg-card);
  color: var(--pt-text-muted);
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.85rem;
  z-index: 4;
}

.btn-toggle-password:hover,
.btn-toggle-password:focus {
  background-color: var(--pt-bg-muted);
  color: var(--pt-primary);
  border-color: var(--pt-border);
  box-shadow: none;
}

.btn-toggle-password:active,
.btn-toggle-password.active {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  border-color: var(--pt-primary-border);
}

.input-group .form-control:focus ~ .btn-toggle-password {
  border-color: #86b7fe;
}

.input-group .form-control.is-invalid ~ .btn-toggle-password {
  border-color: var(--pt-danger);
}

/* ==========================================================================
   Pagination Component Styling (Professional & Appropriately Sized)
   ========================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.page-item {
  display: inline-flex;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--pt-text-main);
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md) !important;
  text-decoration: none;
  min-width: 36px;
  height: 36px;
  transition: all 0.15s ease-in-out;
}

.page-link:hover {
  z-index: 2;
  color: var(--pt-primary-hover);
  background-color: var(--pt-primary-light);
  border-color: var(--pt-primary-border);
}

.page-link:focus {
  z-index: 3;
  color: var(--pt-primary-hover);
  background-color: var(--pt-primary-light);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.15);
}

.page-item.active .page-link {
  z-index: 3;
  color: #ffffff;
  background-color: var(--pt-primary);
  border-color: var(--pt-primary);
  font-weight: 600;
  box-shadow: var(--pt-shadow-2xs);
}

.page-item.disabled .page-link {
  color: var(--pt-text-light);
  pointer-events: none;
  background-color: #f8fafc;
  border-color: var(--pt-border);
  opacity: 0.65;
}

/* ==========================================================================
   Homepage Redesign & Section Navigation Enhancements
   ========================================================================== */
section[id] {
  scroll-margin-top: 65px;
}

@media (max-width: 767.98px) {
  section[id] {
    scroll-margin-top: 58px;
  }
}

.pt-anchor-target {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  scroll-margin-top: 65px;
}

@media (max-width: 767.98px) {
  .pt-anchor-target {
    scroll-margin-top: 58px;
  }
}

/* Role Feature Cards & Journey Grids */
.pt-role-section {
  position: relative;
}

.pt-journey-card {
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pt-journey-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pt-shadow-md);
}

.pt-journey-card-player:hover {
  border-color: var(--pt-primary-border);
}

.pt-journey-card-organizer:hover {
  border-color: var(--pt-blue-border);
}

.pt-journey-card-owner:hover {
  border-color: #fde68a;
}

.pt-journey-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--pt-radius-lg);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.pt-journey-step-player {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  border: 1px solid var(--pt-primary-border);
}

.pt-journey-step-organizer {
  background-color: var(--pt-blue-light);
  color: var(--pt-blue);
  border: 1px solid var(--pt-blue-border);
}

.pt-journey-step-owner {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Hero Responsive Video Card (Mobile-Oriented Video Fit) */
.pt-hero-video-card {
  position: relative;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--pt-radius-2xl);
  padding: 1rem;
  color: #ffffff;
  box-shadow: var(--pt-shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  max-width: 440px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .pt-hero-video-card {
    padding: 1.25rem;
    max-width: 100%;
    margin: 0;
  }
}

/* Video Wrapper - handles mobile-oriented aspect ratio cleanly across all viewports */
.pt-hero-video-wrapper {
  position: relative;
  width: 100%;
  height: 380px;
  background-color: #0b1120;
  border-radius: var(--pt-radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .pt-hero-video-wrapper {
    height: 400px;
  }
}

@media (min-width: 992px) {
  .pt-hero-video-wrapper {
    height: 420px;
  }
}

@media (min-width: 1200px) {
  .pt-hero-video-wrapper {
    height: 450px;
  }
}

.pt-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--pt-radius-xl);
}

/* Video Tagline Footer */
.pt-hero-video-footer {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.pt-hero-video-tagline {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

@media (min-width: 768px) {
  .pt-hero-video-tagline {
    font-size: 1.05rem;
    letter-spacing: normal;
  }
}

.pt-tagline-dot {
  color: #eab308;
  font-size: 0.9rem;
  margin: 0 0.15rem;
}

.text-pt-accent {
  color: #86efac;
}

.text-pt-accent-blue {
  color: #38bdf8;
}

.pt-hero-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
}

.pt-video-placeholder-icon {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.4);
}

.pt-teams-callout {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px dashed var(--pt-blue-border);
  border-radius: var(--pt-radius-xl);
  padding: 1.5rem;
}

/* Court Owner Value Spotlight & Promotional Elements */
.pt-owner-spotlight-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 1.5px solid var(--pt-primary-border);
  border-radius: var(--pt-radius-2xl);
  padding: 2rem 1.75rem;
  box-shadow: var(--pt-shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pt-owner-spotlight-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pt-shadow-xl);
}

.pt-free-system-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 0.35rem 0.85rem;
  border-radius: var(--pt-radius-pill);
  font-weight: 700;
  font-size: 0.825rem;
}

.pt-final-cta-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  position: relative;
  overflow: hidden;
}

.pt-final-cta-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pt-primary) 0%, var(--pt-blue) 50%, #eab308 100%);
}

/* ==========================================================================
   PickleTara User Guide & Role Documentation
   ========================================================================== */
.pt-guide-section {
  scroll-margin-top: 80px;
}

.pt-guide-nav-bar {
  top: 0;
  z-index: 1010;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.95) !important;
}

.pt-guide-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--pt-radius-pill);
  font-size: 0.825rem;
  font-weight: 700;
  transition: all 0.15s ease-in-out;
  touch-action: manipulation;
  white-space: nowrap;
}

.pt-guide-nav-player {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary);
  border: 1px solid var(--pt-primary-border);
}

.pt-guide-nav-player:hover,
.pt-guide-nav-player:focus {
  background-color: var(--pt-primary-subtle);
  color: var(--pt-primary-hover);
}

.pt-guide-nav-organizer {
  background-color: var(--pt-blue-light);
  color: var(--pt-blue);
  border: 1px solid var(--pt-blue-border);
}

.pt-guide-nav-organizer:hover,
.pt-guide-nav-organizer:focus {
  background-color: var(--pt-blue-subtle);
  color: var(--pt-blue-hover);
}

.pt-guide-nav-owner {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.pt-guide-nav-owner:hover,
.pt-guide-nav-owner:focus {
  background-color: #fef3c7;
  color: #92400e;
}

.pt-guide-nav-foundation {
  background-color: var(--pt-bg-muted);
  color: var(--pt-dark);
  border: 1px solid var(--pt-border);
}

.pt-guide-nav-foundation:hover,
.pt-guide-nav-foundation:focus {
  background-color: #e2e8f0;
  color: var(--pt-dark);
}

.pt-role-icon-box {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pt-radius-xl);
  flex-shrink: 0;
}

.pt-guide-step-card {
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--pt-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pt-guide-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-md);
}

.pt-guide-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--pt-radius-md);
  font-weight: 800;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.pt-guide-step-player {
  background-color: var(--pt-primary-subtle);
  color: var(--pt-primary);
}

.pt-guide-step-organizer {
  background-color: var(--pt-blue-subtle);
  color: var(--pt-blue);
}

.pt-guide-step-owner {
  background-color: #fef3c7;
  color: #b45309;
}

/* User Guide Goal & Feature Components */
.pt-guide-goal-card {
  background-color: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  padding: 1.5rem;
  box-shadow: var(--pt-shadow-sm);
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s ease;
}

.pt-guide-goal-card:hover {
  box-shadow: var(--pt-shadow-md);
}

.pt-guide-goal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pt-border-subtle);
}

.pt-flow-step-item {
  position: relative;
  padding: 1rem;
  background-color: var(--pt-bg-muted);
  border-radius: var(--pt-radius-lg);
  height: 100%;
}

.pt-flow-step-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: var(--pt-radius-md);
  margin-bottom: 0.5rem;
  display: inline-block;
}

.pt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--pt-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}

.pt-tip-box {
  background-color: var(--pt-primary-light);
  border: 1px solid var(--pt-primary-border);
  border-radius: var(--pt-radius-lg);
  padding: 1rem 1.25rem;
}

/* ==========================================================================
   Cumulative Star-Rating Interaction System
   ========================================================================== */
.pt-star-rating-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.pt-star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}

.pt-star-rating input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.pt-star-rating label {
  cursor: pointer;
  font-size: 1.85rem;
  line-height: 1;
  color: #cbd5e1; /* unselected / muted star state */
  transition: color 0.15s ease-in-out, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  padding: 0.1rem 0.15rem;
}

/* Hover / Preview State: hovered star and all stars before it light up */
.pt-star-rating:hover label {
  color: #cbd5e1;
}

.pt-star-rating label:hover,
.pt-star-rating label:hover ~ label {
  color: #f59e0b !important;
  transform: scale(1.18);
}

/* Selected State: all stars up to checked radio remain solidly highlighted */
.pt-star-rating input[type="radio"]:checked ~ label {
  color: #f59e0b;
}

/* Click/Touch Micro-animation */
.pt-star-rating label:active {
  transform: scale(1.28);
}

/* Accessible focus ring */
.pt-star-rating input[type="radio"]:focus-visible + label {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 4px;
}

.pt-star-rating-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--pt-radius-pill);
  background-color: var(--pt-bg-muted);
  color: var(--pt-text-dark);
  transition: all 0.15s ease;
}

/* ==========================================================================
   Find Courts & Find Events Discovery UI & Card System
   ========================================================================== */

.pt-discovery-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid var(--pt-border);
}

.pt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--pt-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--pt-border);
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pt-hero-badge-courts,
.pt-hero-badge-events {
  color: var(--pt-primary);
  border-color: var(--pt-primary-border);
  background-color: var(--pt-primary-light);
}

.pt-discovery-search-box {
  background: #ffffff;
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pt-discovery-search-box:focus-within,
.pt-discovery-search-box-events:focus-within {
  border-color: var(--pt-primary);
  box-shadow: 0 8px 24px -4px rgba(21, 128, 61, 0.14), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
}

.pt-discovery-search-box .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pt-text-main);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
}

.pt-discovery-search-box .input-group-text {
  background-color: #f8fafc;
  border: 1.5px solid var(--pt-border);
  border-right: none;
  color: var(--pt-text-muted);
  font-size: 0.9rem;
}

.pt-discovery-search-box .form-control,
.pt-discovery-search-box .form-select {
  border: 1.5px solid var(--pt-border);
  min-height: 44px;
  font-size: 0.9rem;
}

.pt-discovery-search-box .form-control:focus,
.pt-discovery-search-box .form-select:focus,
.pt-discovery-search-box-events .form-control:focus,
.pt-discovery-search-box-events .form-select:focus {
  border-color: var(--pt-primary);
  box-shadow: 0 0 0 3px var(--pt-primary-subtle);
}

.pt-filter-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--pt-radius-md);
  transition: all 0.18s ease;
  white-space: nowrap;
  min-height: 44px;
  height: 44px;
  border: 1.5px solid var(--pt-border);
  background-color: #ffffff;
  color: var(--pt-text-main);
}

.pt-filter-trigger-btn:hover {
  background-color: var(--pt-bg-muted);
  border-color: #cbd5e1;
  color: var(--pt-dark);
  transform: translateY(-1px);
}

.pt-filter-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--pt-radius-pill);
  background-color: var(--pt-primary);
  color: #ffffff;
  line-height: 1;
}

.pt-search-submit-btn {
  min-height: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Quick Area Pills */
.pt-quick-pill {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--pt-radius-pill);
  transition: all 0.18s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pt-quick-pill-active,
.pt-quick-pill-active-events {
  background-color: var(--pt-primary);
  color: #ffffff !important;
  border: 1px solid var(--pt-primary);
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.25);
}

.pt-quick-pill-inactive {
  background-color: #ffffff;
  color: var(--pt-text-muted) !important;
  border: 1px solid var(--pt-border);
}

.pt-quick-pill-inactive:hover,
.pt-quick-pill-inactive-events:hover {
  background-color: var(--pt-primary-light);
  color: var(--pt-primary) !important;
  border-color: var(--pt-primary-border);
  transform: translateY(-1px);
}

/* Redesigned Discovery Cards (Find Courts) */
.pt-discovery-card {
  border-radius: var(--pt-radius-xl);
  background: #ffffff;
  border: 1px solid var(--pt-border);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
}

.pt-discovery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.10), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  border-color: rgba(21, 128, 61, 0.35);
}

.pt-discovery-card-media {
  position: relative;
  width: 100%;
  height: 185px;
  background-color: #0f172a;
  overflow: hidden;
}

.pt-discovery-card-media img.pt-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pt-discovery-card:hover .pt-discovery-card-media img.pt-card-img {
  transform: scale(1.04);
}

.pt-card-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.05) 35%, rgba(15, 23, 42, 0.05) 65%, rgba(15, 23, 42, 0.65) 100%);
  pointer-events: none;
}

.pt-card-venue-logo {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  object-fit: contain;
  z-index: 2;
}

.pt-card-sport-badge {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  background-color: var(--pt-primary) !important;
  color: #ffffff;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: var(--pt-radius-pill);
}

.pt-card-badge-chip {
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--pt-radius-pill);
  font-weight: 600;
}

.pt-discovery-card .card-title a {
  color: var(--pt-dark);
  transition: color 0.15s ease;
}

.pt-discovery-card:hover .card-title a {
  color: var(--pt-primary);
}

/* Event Discovery Cards (Find Events - Edge-to-Edge Clean White Details Panel) */
.pt-event-discovery-card {
  border-radius: var(--pt-radius-xl);
  background: #ffffff;
  border: 1px solid var(--pt-border);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
}

.pt-event-discovery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.10), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  border-color: rgba(21, 128, 61, 0.35);
}

.pt-event-card-media {
  position: relative;
  width: 100%;
  height: 185px;
  background-color: #0f172a;
  overflow: hidden;
}

.pt-event-card-media img.pt-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pt-event-discovery-card:hover .pt-event-card-media img.pt-card-img {
  transform: scale(1.04);
}

.pt-event-card-body {
  padding: 1.15rem 1.25rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  background-color: #ffffff;
  width: 100%;
}

.pt-event-card-body .card-title a {
  color: var(--pt-dark);
  transition: color 0.15s ease;
}

.pt-event-discovery-card:hover .card-title a {
  color: var(--pt-primary) !important;
}

.pt-event-details-box {
  background-color: #ffffff;
  width: 100%;
}

.pt-event-detail-item {
  display: flex;
  align-items: center;
  font-size: 0.835rem;
  font-weight: 500;
  color: var(--pt-text-main);
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.pt-event-detail-item:last-of-type {
  margin-bottom: 0.5rem;
}

.pt-event-detail-icon {
  font-size: 0.95rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--pt-primary);
}

/* Filter Offcanvas */
.pt-filter-offcanvas {
  width: 380px !important;
  max-width: 90vw;
  border-left: 1px solid var(--pt-border);
}

/* Empty State */
.pt-empty-state {
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-xl);
  padding: 3rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
}

.pt-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--pt-bg-muted);
  color: var(--pt-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) {
  .pt-filter-offcanvas {
    width: 100% !important;
    max-width: 100vw;
  }
  .pt-discovery-card-media,
  .pt-event-card-media {
    height: 165px;
  }
}

/* ==========================================================================
   EasySerb Global Modal System & Responsive Presentation
   ========================================================================== */

/* Modal Base & Container */
.modal {
  --pt-modal-padding-x: 1.5rem;
  --pt-modal-padding-y: 1.25rem;
  --pt-modal-header-padding-y: 1.125rem;
  --pt-modal-footer-padding-y: 1rem;
  --pt-modal-border-radius: var(--pt-radius-xl);
  --pt-modal-header-title-size: 1.25rem;
  --pt-modal-btn-min-height: 42px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-x: hidden;
  width: 100%;
}

.modal-dialog {
  margin: 1.75rem auto;
  max-width: 500px;
  width: auto;
  overflow-x: hidden;
}

.modal-dialog.modal-sm {
  max-width: 380px;
}

.modal-dialog.modal-lg {
  max-width: 800px;
}

.modal-dialog.modal-xl {
  max-width: 1140px;
}

/* Modal Content Card */
.modal-content {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--pt-modal-border-radius);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.04);
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Modal Header - Uniform & Professional Across All Screen Sizes */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--pt-modal-header-padding-y) var(--pt-modal-padding-x);
  border-bottom: 1px solid var(--pt-border);
  background-color: var(--pt-bg-muted);
  position: relative;
  min-height: auto;
}

/* Modal Header Default & Light Background Styling */
.modal-header {
  background-color: var(--pt-bg-muted);
  border-bottom: 1px solid var(--pt-border);
  color: var(--pt-text-heading);
}

.modal-header.bg-white {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--pt-border);
}

.modal-header.bg-light {
  background-color: var(--pt-bg-muted) !important;
  border-bottom: 1px solid var(--pt-border);
}

.modal-header.bg-warning-subtle {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-bottom: 1px solid #fde68a !important;
}

/* Modal Guidance / Contextual Explanation Area */
.pt-modal-guidance,
.modal-guidance {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475569;
  background-color: #f8fafc;
  border-bottom: 1px solid var(--pt-border);
  padding: 0.75rem 1.25rem;
  margin: 0;
  display: block;
}

.modal-body > .pt-modal-guidance,
.modal-body > .modal-guidance {
  margin: calc(-1 * var(--pt-modal-padding-y)) calc(-1 * var(--pt-modal-padding-x)) var(--pt-modal-padding-y) calc(-1 * var(--pt-modal-padding-x));
  border-radius: 0;
}

/* Left/Main Container in Header (Holds Title, Badges, Subtitles) */
.modal-header > div:first-child,
.modal-header .modal-title-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 3rem);
}

/* If the title itself is the direct first child */
.modal-header > .modal-title:first-child,
.modal-header > h2:first-child,
.modal-header > h3:first-child,
.modal-header > h4:first-child,
.modal-header > h5:first-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 3rem);
}

/* Uniform Modal Title Styling */
.modal-title,
.modal-header .modal-title,
.modal-header h2.modal-title,
.modal-header h3.modal-title,
.modal-header h4.modal-title,
.modal-header h5.modal-title,
.modal-header h2:not(.btn),
.modal-header h3:not(.btn),
.modal-header h4:not(.btn),
.modal-header h5:not(.btn) {
  font-family: var(--pt-font-sans);
  font-size: var(--pt-modal-header-title-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0;
  padding: 0;
  color: var(--pt-text-heading);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: manual;
}

/* Inherit text color when header has dark/colored background */
.modal-header.bg-pt-dark .modal-title,
.modal-header.bg-dark .modal-title,
.modal-header.bg-success .modal-title,
.modal-header.bg-danger .modal-title,
.modal-header.text-white .modal-title {
  color: #ffffff !important;
}

.modal-header.bg-pt-dark h2,
.modal-header.bg-pt-dark h3,
.modal-header.bg-pt-dark h4,
.modal-header.bg-pt-dark h5,
.modal-header.bg-dark h2,
.modal-header.bg-dark h3,
.modal-header.bg-dark h4,
.modal-header.bg-dark h5,
.modal-header.bg-success h2,
.modal-header.bg-success h3,
.modal-header.bg-success h4,
.modal-header.bg-success h5,
.modal-header.bg-danger h2,
.modal-header.bg-danger h3,
.modal-header.bg-danger h4,
.modal-header.bg-danger h5 {
  color: #ffffff !important;
}

/* Header Subtitles / Descriptions */
.modal-header .text-pt-muted,
.modal-header .text-muted,
.modal-header .small {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-top: 0.25rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.modal-header.bg-pt-dark .text-pt-muted,
.modal-header.bg-pt-dark .text-muted,
.modal-header.bg-dark .text-muted,
.modal-header.bg-success .text-muted,
.modal-header.bg-danger .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Header Badges / Icons */
.modal-header .badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.625rem;
  border-radius: var(--pt-radius-pill);
  vertical-align: middle;
}

.modal-header i {
  vertical-align: -0.1em;
}

/* Close Button - Always pinned, accessible, high contrast & never squeezed */
.modal-header .btn-close {
  flex: 0 0 auto;
  margin: -0.25rem -0.25rem 0 0 !important;
  padding: 0.625rem !important;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: 50%;
  background-size: 0.85rem;
  opacity: 0.65;
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-header .btn-close:hover {
  opacity: 1;
  background-color: rgba(15, 23, 42, 0.08);
  transform: scale(1.05);
}

.modal-header .btn-close:focus {
  opacity: 1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.25);
}

.modal-header .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-header .btn-close-white:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Modal Body - Natural Document Flow */
.modal-body {
  padding: var(--pt-modal-padding-y) var(--pt-modal-padding-x);
  color: var(--pt-text-main);
  line-height: 1.6;
  max-width: 100%;
}

/* Scrollable Dialog Body (Exclusively for modals with .modal-dialog-scrollable) */
.modal-dialog-scrollable .modal-body {
  max-height: calc(85vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar polish for modal scrollable containers */
.modal-body::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.modal-body::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: var(--pt-border);
  border-radius: 999px;
}
.modal-body::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: var(--pt-text-light);
}

/* Modal Footer - Desktop & Default Layout */
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--pt-modal-footer-padding-y) var(--pt-modal-padding-x);
  border-top: 1px solid var(--pt-border);
  background-color: var(--pt-bg-muted);
}

.modal-footer.bg-white {
  background-color: #ffffff !important;
}

.modal-footer.bg-light {
  background-color: var(--pt-bg-muted) !important;
}

/* Touch target polish for modal footer buttons */
.modal-footer .btn {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: all 0.15s ease-in-out;
}

/* Duration Toggle Radio Buttons (Court Reservation Modal) */
.btn-check:checked + #label_mode_single,
.btn-check:checked + #label_mode_multi {
  background-color: var(--pt-primary) !important;
  color: #ffffff !important;
  border-color: var(--pt-primary) !important;
  box-shadow: 0 1px 3px rgba(21, 128, 61, 0.3) !important;
}

.btn-check:not(:checked) + #label_mode_single,
.btn-check:not(:checked) + #label_mode_multi {
  background-color: transparent !important;
  color: var(--pt-dark-muted) !important;
  border-color: transparent !important;
}

.btn-check:focus-visible + #label_mode_single,
.btn-check:focus-visible + #label_mode_multi {
  outline: 2px solid var(--pt-primary);
  outline-offset: 1px;
}

/* ==========================================================================
   Responsive Modal Behavior (Mobile & Small Screens)
   ========================================================================== */

@media (max-width: 575.98px) {
  .modal {
    --pt-modal-padding-x: 1rem;
    --pt-modal-padding-y: 1rem;
    --pt-modal-header-padding-y: 0.875rem;
    --pt-modal-footer-padding-y: 0.875rem;
    --pt-modal-border-radius: var(--pt-radius-lg);
    --pt-modal-header-title-size: 1.125rem;
    --pt-modal-btn-min-height: 44px;
    overflow-x: hidden;
  }

  .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
    width: calc(100% - 1rem);
    overflow-x: hidden;
  }

  .modal-dialog-centered {
    min-height: calc(100% - 1rem);
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
  }

  .modal-body {
    padding: 0.875rem 1rem;
    max-width: 100%;
  }

  /* Inner scrolling strictly scoped to explicit scrollable dialogs */
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - 1rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal-dialog-scrollable .modal-body {
    flex: 1 1 auto;
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header {
    padding: 0.875rem 1rem;
    gap: 0.625rem;
  }

  .modal-header > div:first-child,
  .modal-header .modal-title-wrapper,
  .modal-header > .modal-title:first-child,
  .modal-header > h2:first-child,
  .modal-header > h3:first-child,
  .modal-header > h4:first-child,
  .modal-header > h5:first-child {
    max-width: calc(100% - 2.5rem);
  }

  .modal-header .btn-close {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.5rem !important;
  }

  /* Small-Screen Modal Action Button Arrangement:
     [ Submit / Main Action ] (TOP, Centered, Easy to Tap)
     [ Cancel / Dismiss ]     (BELOW, Separated, Easy to Tap) */
  .modal-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.625rem !important;
    padding: 0.875rem 1rem !important;
  }

  /* Reset default bootstrap margins on footer children */
  .modal-footer > * {
    margin: 0 !important;
    width: 100% !important;
  }

  /* Primary Action Elements: Positioned at TOP (order: 1) */
  .modal-footer button[type="submit"],
  .modal-footer input[type="submit"],
  .modal-footer a.btn-pt-primary,
  .modal-footer a.btn-primary,
  .modal-footer a.btn-success,
  .modal-footer a.btn-danger,
  .modal-footer button.btn-pt-primary:not([data-bs-dismiss="modal"]),
  .modal-footer button.btn-primary:not([data-bs-dismiss="modal"]),
  .modal-footer button.btn-success:not([data-bs-dismiss="modal"]),
  .modal-footer button.btn-danger:not([data-bs-dismiss="modal"]),
  .modal-footer button.btn-warning:not([data-bs-dismiss="modal"]),
  .modal-footer button.btn-pt-dark:not([data-bs-dismiss="modal"]),
  .modal-footer button.btn-dark:not([data-bs-dismiss="modal"]) {
    order: 1 !important;
    width: 100% !important;
    min-height: var(--pt-modal-btn-min-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
  }

  /* Form wrappers around action buttons */
  .modal-footer > form {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  .modal-footer > form > button,
  .modal-footer > form > input[type="submit"] {
    width: 100% !important;
    min-height: var(--pt-modal-btn-min-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
  }

  /* Cancel / Secondary / Dismiss Buttons: Positioned BELOW (order: 2) */
  .modal-footer button[data-bs-dismiss="modal"],
  .modal-footer a[data-bs-dismiss="modal"],
  .modal-footer .btn-pt-light,
  .modal-footer .btn-secondary,
  .modal-footer .btn-outline-secondary,
  .modal-footer .btn-light,
  .modal-footer #venueMapCancelBtn {
    order: 2 !important;
    width: 100% !important;
    min-height: var(--pt-modal-btn-min-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
  }

  /* Single-button footer (e.g. Welcome Modal "Got it, Let's Play!" or Info "Close") */
  .modal-footer > :only-child,
  .modal-footer > form:only-child > button {
    order: 1 !important;
    width: 100% !important;
    min-height: var(--pt-modal-btn-min-height) !important;
  }

  /* Nested flex button groups (e.g. venueMapModal) */
  .modal-footer > div.d-flex {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    order: 1 !important;
    margin: 0 !important;
  }

  .modal-footer > div.d-flex > a.btn-pt-primary,
  .modal-footer > div.d-flex > a.btn-primary,
  .modal-footer > div.d-flex > button[type="submit"] {
    order: 1 !important;
    width: 100% !important;
    min-height: var(--pt-modal-btn-min-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
  }

  .modal-footer > div.d-flex > button[data-bs-dismiss="modal"],
  .modal-footer > div.d-flex > .btn-pt-light,
  .modal-footer > div.d-flex > #venueMapCancelBtn {
    order: 2 !important;
    width: 100% !important;
    min-height: var(--pt-modal-btn-min-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
  }

  /* Informational text in footer */
  .modal-footer > span.small,
  .modal-footer > div.small,
  .modal-footer > .text-muted,
  .modal-footer > .text-pt-muted {
    order: 3 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 0.25rem !important;
  }
}

/* Tablet screens (576px to 991.98px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .modal-dialog {
    margin: 1.25rem auto;
    max-width: min(520px, calc(100% - 2.5rem));
    width: auto;
  }

  .modal-dialog.modal-sm {
    max-width: min(380px, calc(100% - 2rem));
  }

  .modal-dialog.modal-lg {
    max-width: min(740px, calc(100% - 2.5rem));
  }

  .modal-dialog.modal-xl {
    max-width: min(920px, calc(100% - 2.5rem));
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
  }

  .modal-header {
    padding: 1rem 1.25rem;
  }

  .modal-title {
    font-size: 1.1875rem;
  }

  .modal-body {
    padding: 1.25rem;
    max-width: 100%;
  }

  /* Inner scrolling strictly scoped to explicit scrollable dialogs */
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - 2.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal-dialog-scrollable .modal-body {
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 0.875rem 1.25rem;
  }

  .modal-footer .btn {
    min-height: var(--pt-modal-btn-min-height);
  }
}

/* ==========================================================================
   Global Footer Layout & Flow (Normal Document Flow)
   ========================================================================== */
footer,
.pt-footer,
.pt-footer-auth {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  width: 100%;
  margin-top: auto;
}

/* ==========================================================================
   Responsive Suggested Cards & Global Reminder Banners
   ========================================================================== */
#global-location-reminder,
#global-sport-type-reminder {
  transition: all 0.2s ease-in-out;
}

@media (max-width: 767.98px) {
  #global-location-reminder,
  #global-sport-type-reminder {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  #global-location-reminder .btn,
  #global-sport-type-reminder .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #global-location-reminder .badge,
  #global-sport-type-reminder .badge {
    align-self: center;
  }
}

/* ==========================================================================
   Global Detail Header & Responsive Action Buttons System
   ========================================================================== */
.pt-detail-header-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
}

@media (min-width: 992px) {
  .pt-detail-header-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

.pt-detail-header-title {
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-word;
  overflow-wrap: break-word;
}

.pt-detail-header-title h1,
.pt-detail-header-title .h1,
.pt-detail-header-title .h2,
.pt-detail-header-title .h3,
.pt-detail-header-title .h4 {
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.pt-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Mobile Screens (< 768px): Max 2 action buttons per row; odd/last button centered with exact same width */
@media (max-width: 767.98px) {
  .pt-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .pt-header-actions > * {
    flex: 0 1 calc(50% - 0.25rem);
    max-width: calc(50% - 0.25rem);
    width: calc(50% - 0.25rem);
    min-width: 0;
    margin: 0;
  }

  .pt-header-actions > :only-child {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 160px;
  }

  .pt-header-actions > form,
  .pt-header-actions > .dropdown {
    display: flex;
    flex-direction: column;
  }

  .pt-header-actions > form > .btn,
  .pt-header-actions > .dropdown > .btn {
    width: 100%;
    flex: 1 1 auto;
    height: 100%;
  }

  .pt-header-actions .btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.84rem;
    padding: 0.45rem 0.55rem;
    min-height: 40px;
    line-height: 1.2;
    border-radius: var(--pt-radius-md);
  }

  .pt-header-actions .btn i {
    font-size: 0.95rem;
  }
}

/* Tablet Screens (768px - 991.98px): Max 3 action buttons per row; fewer items on last row centered with exact same width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pt-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .pt-header-actions > * {
    flex: 0 1 calc(33.333% - 0.35rem);
    max-width: calc(33.333% - 0.35rem);
    width: calc(33.333% - 0.35rem);
    min-width: 0;
    margin: 0;
  }

  .pt-header-actions > :only-child {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 180px;
  }

  .pt-header-actions > form,
  .pt-header-actions > .dropdown {
    display: flex;
    flex-direction: column;
  }

  .pt-header-actions > form > .btn,
  .pt-header-actions > .dropdown > .btn {
    width: 100%;
    flex: 1 1 auto;
    height: 100%;
  }

  .pt-header-actions .btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.86rem;
    padding: 0.45rem 0.75rem;
    min-height: 40px;
    line-height: 1.25;
    border-radius: var(--pt-radius-md);
  }

  .pt-header-actions .btn i {
    font-size: 0.95rem;
  }
}

/* Desktop & Laptop Screens (>= 992px): Preserves existing desktop layout, right-aligned flex */
@media (min-width: 992px) {
  .pt-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }

  .pt-header-actions > * {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
  }

  .pt-header-actions .btn {
    width: auto;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.45rem 0.9rem;
    min-height: 38px;
    line-height: 1.35;
  }
}

/* =========================================================================
   NOTIFICATIONS COMPONENT & RESPONSIVE LAYOUT ENHANCEMENTS
   ========================================================================= */
.min-w-0 {
  min-width: 0 !important;
}

.pt-notif-item {
  transition: background-color 0.15s ease-in-out;
}

.pt-notif-content {
  flex: 1 1 0%;
  min-width: 0 !important;
  width: 100%;
}

.pt-notif-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

.pt-notif-body {
  display: block !important;
  text-align: left !important;
  flex: 1 1 auto;
  min-width: 0;
}

.pt-notif-message {
  display: block !important;
  text-align: left !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  margin-bottom: 0.25rem !important;
}

.pt-notif-time {
  display: block !important;
  text-align: left !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 0.2rem !important;
  margin-bottom: 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  color: var(--pt-muted, #64748b) !important;
}

.pt-notif-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ==========================================================================
   Live Notification Toast Alert (SweetAlert2-style, Non-blocking)
   ========================================================================== */
.pt-live-toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1095;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 380px;
  width: calc(100vw - 2.5rem);
}

@media (max-width: 576px) {
  .pt-live-toast-container {
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
  }
}

.pt-live-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #ffffff;
  color: var(--pt-dark, #1e293b);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.14), 0 6px 12px -4px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.pt-live-toast.pt-live-toast-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pt-live-toast-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.12);
  color: var(--pt-primary, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08);
}

.pt-live-toast-content {
  flex-grow: 1;
  min-width: 0;
  cursor: pointer;
}

.pt-live-toast-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pt-dark, #1e293b);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.pt-live-toast-subtitle {
  font-size: 0.78rem;
  color: var(--pt-muted, #64748b);
  font-style: italic;
  line-height: 1.3;
  margin: 0;
}

.pt-live-toast-close {
  background: transparent;
  border: none;
  color: var(--pt-muted, #94a3b8);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.3rem;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.pt-live-toast-close:hover {
  color: var(--pt-dark, #1e293b);
  background-color: rgba(0, 0, 0, 0.05);
}