@charset "UTF-8";
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

:root {
  --bc-header-height: 67px;
  --bc-bottom-nav-height: 58px;
}

html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.is-hidden {
  display: none !important;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--light-text);
  background-color: var(--dark-bg);
  background-image: linear-gradient(120deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.container-01 {
  margin: 80px auto calc(130px + env(safe-area-inset-bottom)) auto !important;
  padding: 0 20px !important;
}

.container-02 {
  margin: 20px auto calc(130px + env(safe-area-inset-bottom)) auto;
  padding: 0 20px;
}

.container-03 {
  margin: 0 auto;
  padding: 0 20px;
}

.container-04 {
  margin: 0 auto;
  max-width: 800px;
}

.container-05 {
  margin: 0 auto;
  max-width: 840px;
}

.main-container-01 {
  max-width: 800px;
  margin: 0 auto 12rem auto;
}

main {
  margin-bottom: calc(90px + env(safe-area-inset-bottom));
  overflow-x: clip;
}

.main-container {
  margin-top: 78px;
  border: 1px solid var(--accent-amber);
}

/* Smooth entrance for condition results */
.condition-results-enter {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.condition-results-enter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bulk-delete-transition-target {
  transition: opacity 260ms ease, transform 260ms ease;
  will-change: opacity, transform;
}

.bulk-delete-transition-target.is-bulk-delete-exiting,
.bulk-delete-transition-target.is-bulk-delete-entering,
[data-aos].bulk-delete-transition-target.is-bulk-delete-exiting,
[data-aos].bulk-delete-transition-target.is-bulk-delete-entering {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.bulk-delete-transition-target.is-bulk-delete-visible,
[data-aos].bulk-delete-transition-target.is-bulk-delete-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bulk-delete-transition-target {
    transition: none !important;
    transform: none !important;
  }
}
a {
  text-decoration: none;
  color: var(--accent-blue);
  transition: var(--transition);
}
a:hover {
  color: var(--accent-blue-dark);
  text-decoration: none;
}

h2 {
  color: var(--accent-amber);
}

h3 {
  color: var(--accent-amber);
}

p {
  font-size: var(--font-size-large);
}

.mt-6 {
  margin-top: 4rem !important;
}

.mt-7 {
  margin-top: 5rem !important;
}

.mt-8 {
  margin-top: 6rem !important;
}

.mb-6 {
  margin-bottom: 4rem !important;
}

.mb-7 {
  margin-bottom: 5rem !important;
}

.mb-8 {
  margin-bottom: 6rem !important;
}

.emojis-column-01 {
  margin: 0.5rem 0 0.75rem 0;
}

/* Base state for advanced sections */
.advanced-section {
  overflow: hidden;
  max-height: 2000px;
  /* big enough for your largest section */
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Hidden state (Basic view) */
.advanced-section.advanced-hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Used to disable transitions on initial load */
.advanced-section.no-transition {
  transition: none !important;
}

/* =====================================================
   Checklist – Advanced Section Reveal / Collapse
   ===================================================== */
/* Base (visible / expanded) */
.rc-advanced-section {
  overflow: hidden;
  max-height: 2000px;
  /* must exceed tallest section */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* Collapsing (animated, still in layout) */
.rc-advanced-section.rc-advanced-hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Fully collapsed (removed from layout AFTER animation) */
.rc-advanced-section.rc-advanced-gone {
  display: none !important;
}

/* Disable animation for first paint only */
.rc-advanced-section.rc-no-transition {
  transition: none !important;
}

.loading-fade {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.loading-fade.show {
  opacity: 1;
}

.loading-progress {
  margin-top: 15px;
  width: 60%;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.loading-progress-bar {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #7dce82, #de801c);
  animation: progressSlide 1.8s infinite ease-in-out;
}

@keyframes progressSlide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(200%);
  }
}
.loading-road {
  margin-top: 18px;
  width: 70%;
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.loading-road-stripe {
  position: absolute;
  top: 0;
  height: 100%;
  width: 30%;
  background: white;
  opacity: 0.85;
  /* critical: anchor it to far right */
  left: 100%;
  animation: passingLane 1.5s linear infinite;
}

/* stripe travels from exact right edge → far left */
@keyframes passingLane {
  0% {
    transform: translateX(0);
    /* starts exactly at right edge */
  }
  100% {
    transform: translateX(-500%);
    /* push far off the left side */
  }
}
.ms-4_5 {
  margin-left: 2rem !important;
}

@media (min-width: 992px) {
  .center-on-large {
    text-align: center !important;
  }
}

.condition-section p {
  margin-left: 2rem !important;
}

.centered-text {
  text-align: center;
  margin: 0 auto;
  justify-content: center;
}

.card-text {
  color: var(--light-text);
}

.font-size-small {
  font-size: var(--font-size-small) !important;
}

.font-size-medium {
  font-size: var(--font-size-medium) !important;
}

.font-size-large {
  font-size: var(--font-size-large) !important;
}

.font-size-xlarge, .ck-packed-toast {
  font-size: var(--font-size-xlarge);
}

.font-size-xxlarge {
  font-size: var(--font-size-xxlarge);
}

.font-size-xxxlarge {
  font-size: var(--font-size-xxxlarge);
}

.font-size-xxxxlarge {
  font-size: var(--font-size-xxxxlarge) !important;
}

.font-size-7large {
  font-size: var(--font-size-7large) !important;
}

.font-weight-100 {
  font-weight: 100 !important;
}

.font-weight-200 {
  font-weight: 200 !important;
}

.font-weight-300 {
  font-weight: 300 !important;
}

.font-weight-400 {
  font-weight: 400 !important;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.font-weight-700 {
  font-weight: 700 !important;
}

.font-weight-800 {
  font-weight: 800 !important;
}

.font-weight-900 {
  font-weight: 900 !important;
}

.font-color-white {
  color: var(--color-white) !important;
}

.font-color-white {
  color: var(--light-text) !important;
}

.font-color-blue {
  color: var(--accent-blue) !important;
}

.font-color-blue-account {
  color: var(--accent-blue-account) !important;
}

.font-color-blue-light {
  color: var(--accent-blue-light) !important;
}

.font-color-blue-sky {
  color: var(--accent-blue-sky) !important;
}

.font-color-blue-sky-muted-02 {
  color: var(--accent-blue-sky-muted-02) !important;
}

.font-color-blue-sky-muted {
  color: var(--accent-blue-sky-muted) !important;
}

.font-color-mauve {
  color: var(--accent-mauve) !important;
}

.font-color-mauve-light {
  color: var(--accent-mauve-light) !important;
}

.font-color-mauve-med-light {
  color: var(--accent-mauve-med-light) !important;
}

.font-color-amber {
  color: var(--accent-amber) !important;
}

.font-color-amber-light {
  color: var(--accent-amber-light) !important;
}

.font-color-amber-med-light {
  color: var(--accent-amber-med-light) !important;
}

.font-color-amber-dark {
  color: var(--accent-amber-dark) !important;
}

.font-color-purple {
  color: var(--accent-purple) !important;
}

.font-color-purple-light {
  color: var(--accent-purple-light) !important;
}

.font-color-purple-med-light {
  color: var(--accent-purple-med-light) !important;
}

.font-color-purple-dark {
  color: var(--accent-purple-dark) !important;
}

.font-color-gold {
  color: var(--accent-gold) !important;
}

.font-color-green {
  color: var(--accent-green) !important;
}

.font-color-green-dark {
  color: var(--accent-green-dark) !important;
}

.font-color-yellow {
  color: var(--accent-yellow) !important;
}

.font-color-red {
  color: var(--accent-red) !important;
}

.font-color-red-light {
  color: var(--accent-red-light) !important;
}

.font-color-red-med-light {
  color: var(--accent-red-med-light) !important;
}

.font-color-red-dark {
  color: var(--accent-red-dark) !important;
}

.font-color-gray-light {
  color: var(--light-gray) !important;
}

.font-color-dark-secondary {
  color: var(--dark-secondary) !important;
}

.font-rating-number-good {
  color: var(--accent-green);
  font-size: var(--font-size-xxxlarge);
  font-weight: bold;
}

.font-rating-number-good-big {
  color: var(--accent-green);
  font-size: var(--font-size-xxxxxxlarge);
  font-weight: bold;
  margin-top: -16px;
}

.font-rating-number-inbetween {
  color: var(--accent-yellow);
  font-size: var(--font-size-xxxlarge);
  font-weight: bold;
  margin-top: -11px;
}

.font-rating-number-inbetween-big {
  color: var(--accent-yellow);
  font-size: var(--font-size-xxxxxxlarge);
  font-weight: bold;
  margin-top: -16px;
}

.font-rating-number-bad {
  color: var(--accent-red);
  font-size: var(--font-size-xxxlarge);
  font-weight: bold;
}

.font-rating-number-bad-big {
  color: var(--accent-red);
  font-size: var(--font-size-xxxxxxlarge);
  font-weight: bold;
  margin-top: -16px;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.btn {
  background-color: var(--accent-purple);
  color: white;
  border: none;
  border-radius: 2rem;
  padding: 1rem 2rem;
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn:hover {
  background-color: var(--accent-purple-dark);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn:active {
  background-color: var(--accent-purple-dark) !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (hover: none) {
  .btn {
    /* Disable hover effects on touch devices */
  }
  .btn:hover {
    background-color: var(--accent-purple-dark) !important;
    color: white !important;
    transform: none;
    box-shadow: none;
  }
}

.btn-alt {
  background-color: var(--accent-green-dark) !important;
  color: white;
  border: none;
  border-radius: 2rem;
  padding: 1rem 2rem;
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-alt:hover {
  background-color: var(--accent-green-dark-02) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-alt:active {
  background-color: var(--accent-green-dark-02) !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (hover: none) {
  .btn-alt {
    /* Disable hover effects on touch devices */
  }
  .btn-alt:hover {
    background-color: var(--accent-green-dark-02) !important;
    color: white !important;
    transform: none;
    box-shadow: none;
  }
}

.btn-outline-light:hover {
  background-color: var(--accent-purple-dark);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-outline-light:active {
  background-color: var(--accent-purple-dark) !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (hover: none) {
  .btn-outline-light {
    /* Disable hover effects on touch devices */
  }
  .btn-outline-light:hover {
    background-color: var(--accent-purple-dark) !important;
    color: white !important;
    transform: none;
    box-shadow: none;
  }
}

.btn-outline-light-02:hover {
  background-color: var(--accent-green-dark);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-outline-light-02:active {
  background-color: var(--accent-green-dark) !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (hover: none) {
  .btn-outline-light-02 {
    /* Disable hover effects on touch devices */
  }
  .btn-outline-light-02:hover {
    background-color: var(--accent-green-dark) !important;
    color: white !important;
    transform: none;
    box-shadow: none;
  }
}

.btn-default-green {
  background-color: var(--accent-green-dark);
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 160px;
  white-space: nowrap;
}
.btn-default-green:hover {
  background-color: var(--accent-green-dark) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-default-green:active {
  background-color: var(--white) !important;
  color: var(--dark-secondary) !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline-green-dark {
  background-color: var(--accent-green-dark);
}
.btn-outline-green-dark:hover {
  background-color: var(--accent-green-dark) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-outline-green-dark:active {
  background-color: var(--white) !important;
  color: var(--dark-secondary) !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-outline-green-dark.active, .btn-outline-green-dark:focus, .btn-outline-green-dark:focus-visible {
  background-color: var(--white) !important;
  color: var(--dark-secondary) !important;
}

.btn-check:checked + .btn-outline-green-dark {
  background-color: var(--white) !important;
  color: var(--dark-secondary) !important;
}

.btn-main-cancel {
  background-color: transparent;
  border: 1px solid var(--dark-gray-light);
  color: var(--light-text);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 2rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-main-cancel:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(176, 176, 176, 0.4);
}
.btn-main-cancel:active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(176, 176, 176, 0.4);
}

.long-text-btn {
  font-size: var(--font-size-medium);
}

@media (min-width: 768px) {
  .long-text-btn {
    font-size: var(--font-size-xlarge) !important;
  }
}
.btn-ride-preset {
  background-color: var(--accent-purple);
  color: white;
  border: none;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-ride-preset:hover {
  background-color: var(--accent-purple-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-ride-preset:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-accent-purple {
  background-color: var(--accent-purple);
  color: white;
  border: 2px solid var(--accent-purple);
  border-radius: 2rem;
  padding: 1rem 2rem;
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-accent-purple:hover {
  color: var(--dark-secondary);
  background-color: var(--accent-purple-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-accent-purple:active {
  color: var(--dark-secondary);
  background-color: var(--accent-purple-light);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-accent-purple.active {
  border: 2px solid white;
  color: var(--dark-secondary);
  background-color: var(--accent-purple-light);
}

.btn-accent-amber {
  background-color: var(--accent-amber-dark);
  color: white;
  border: 2px solid var(--accent-amber-dark);
  border-radius: 2rem;
  padding: 0.7rem 1.6rem;
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-accent-amber:hover {
  color: var(--dark-secondary);
  background-color: var(--accent-amber);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-accent-amber:active {
  color: var(--dark-secondary);
  background-color: var(--accent-amber-light);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-accent-amber.active {
  border: 2px solid white;
  color: var(--dark-secondary);
  background-color: var(--accent-amber-light);
}

.btn-delete {
  position: absolute;
  bottom: 14px;
  right: 20px;
  z-index: 1;
  background-color: var(--accent-red);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  font-size: var(--font-size-medium);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-delete:hover {
  background-color: var(--accent-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-delete-past-conditions {
  position: absolute;
  top: 11px;
  right: 20px;
  z-index: 1;
  background-color: var(--accent-red);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  font-size: var(--font-size-medium);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-delete-past-conditions:hover {
  background-color: var(--accent-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-delete-modal {
  background-color: var(--accent-red);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 2rem;
  letter-spacing: 0.5px;
}
.btn-delete-modal:hover {
  background-color: var(--accent-red-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(176, 176, 176, 0.4);
}

.btn-close-modal {
  background-color: var(--accent-amber-dark);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 2rem;
  letter-spacing: 0.5px;
}
.btn-close-modal:hover {
  background-color: var(--accent-amber);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(176, 176, 176, 0.4);
}

.btn-round {
  color: white;
  font-size: var(--font-size-large);
  font-weight: 700;
  border-radius: 3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  border: none;
  cursor: pointer;
  width: 80%;
  margin: 0 auto;
  display: block;
  box-shadow: 0 5px 15px rgba(10, 102, 194, 0.4);
}

.btn-round:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.5);
}

.btn-round:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.btn-round:hover:before {
  left: 100%;
}

.btn-auth {
  padding: 6px 15px;
  border-radius: 20px;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
  display: inline-block;
}

.btn-login {
  background-color: var(--accent-purple-dark);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 18px 28px;
  border-radius: 2rem;
  box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3);
  letter-spacing: 0.5px;
  width: 150px;
}
.btn-login:hover {
  background-color: var(--accent-purple);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.4);
}

.btn-login-small {
  background-color: transparent;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--white);
  border-radius: 1.4rem;
  letter-spacing: 0.5px;
  width: 90px;
}
.btn-login-small:hover {
  background-color: var(--accent-purple);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(176, 176, 176, 0.4);
}

.btn-signup {
  background-color: var(--accent-amber-dark);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 18px 28px;
  border-radius: 2rem;
  box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3);
  letter-spacing: 0.5px;
  width: 150px;
}
.btn-signup:hover {
  background-color: var(--accent-amber);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.4);
}

.btn-signup-small {
  background-color: var(--accent-amber-dark);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 1.4rem;
  letter-spacing: 0.5px;
  width: 90px;
}
.btn-signup-small:hover {
  background-color: var(--accent-amber);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(176, 176, 176, 0.4);
}

.btn-signup-big {
  background-color: var(--accent-amber-dark);
  color: var(--white);
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  padding: 18px 28px;
  border-radius: 2rem;
  box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3);
  letter-spacing: 0.5px;
  width: 100%;
}
.btn-signup-big:hover {
  background-color: var(--accent-amber);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(176, 176, 176, 0.4);
}

#sign_up_btn_text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-submit {
  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
  color: var(--white);
  font-size: 1.2rem;
  padding: 18px 28px;
  width: 100%;
  box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 600;
}

.btn-submit:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
  z-index: -1;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.4);
}

.btn-submit:hover:before {
  opacity: 1;
}

.btn-close {
  font-size: 2rem;
  filter: invert(1) grayscale(100%) brightness(200%);
  /* Makes it white */
}

.action-btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: var(--accent-purple);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  width: auto;
  width: fit-content;
}

.action-btn:hover {
  opacity: 0.9;
}

.btn-tube-small {
  padding: 0.4rem 0.8rem;
  font-size: 1rem;
}

.tube-btn-wrapper {
  position: relative;
  display: inline-block;
}

/* hide star by default */
.tube-star {
  position: absolute;
  top: 3px;
  right: 11px;
  font-size: 9px;
  color: var(--accent-purple-dark);
  display: none !important;
}

/* show star only on active wrapper */
.tube-btn-wrapper.active .tube-star {
  display: block !important;
}

.terrain-btn-wrapper {
  position: relative;
  display: inline-block;
}

/* Hide star by default */
.terrain-star {
  position: absolute;
  top: 8px;
  /* adjust for small buttons */
  right: 15px;
  font-size: 12px;
  /* smaller for purple terrain buttons */
  color: var(--accent-purple-dark);
  display: none !important;
}

/* Show star only on active terrain button */
.terrain-btn-wrapper.active .terrain-star {
  display: block !important;
}

.btn.js-set-default:disabled,
.btn.js-set-default[disabled] {
  color: var(--medium-gray-dark) !important;
  background-color: var(--accent-amber) !important;
  border-color: #444 !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

.feedback-button-fixed {
  position: fixed;
  right: 1rem;
  bottom: 6.5rem;
  z-index: 1050;
  border-radius: 999px;
  padding-inline: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

.btn-small-for-txt {
  width: 32px !important;
  height: 32px !important;
}

.btn-small-for-txt i {
  font-size: 24px !important;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.cards-container {
  padding: 0 1rem;
  margin-bottom: 7rem !important;
}

.cards-container-signup {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(80px + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
}

@media (min-width: 1300px) {
  .cards-container {
    padding-top: 0;
    padding-bottom: 1rem !important;
  }
}
.card {
  background-color: var(--dark-secondary);
  border-radius: 8px;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(199, 199, 199, 0.2);
}

.card-signup {
  /* Optional width constraints */
  max-width: 420px;
  width: 100%;
}

.card-weather,
.card-weather-current {
  border: 1px solid rgba(126, 126, 126, 0.77);
  background-color: var(--dark-secondary);
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(199, 199, 199, 0.2);
}

.card-weather-current {
  position: relative;
}

.card-relative {
  position: relative;
}

.card-840w {
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}

.card-title {
  font-size: var(--font-size-xlarge);
  margin-bottom: 0.5rem;
  color: var(--accent-amber);
}

.card-body {
  font-size: var(--font-size-large);
  color: var(--dark-gray);
  padding: 0.5rem 0.2rem;
}

.card-content {
  font-size: var(--font-size-large);
  color: var(--light-text);
  padding: 0;
}

.card-content-2 {
  font-size: var(--font-size-large);
  color: var(--light-text);
  padding: 0;
}

.card-ul-li-spacing ul li {
  position: relative;
  padding-left: 1.5em;
  /* space for the icon */
}

.card-ul-li-spacing ul li i {
  position: absolute;
  left: 0;
  top: 0.1em;
}

/* subtle hover lift */
.card-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.created-at-bottom-right {
  text-align: right;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.4rem;
  margin-bottom: -12px;
  margin-right: 4px;
}

.support-card {
  background-color: var(--dark-bg-secondary);
  border-radius: 12px;
  box-shadow: 11px 6px 12px 0px rgba(0, 0, 0, 0.15);
}

.bike-single-wheel-card {
  background-color: var(--dark-bg-secondary);
  border-radius: 8px;
  border: 2px solid var(--accent-blue-sky);
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(199, 199, 199, 0.2);
}

.bc-page {
  /* keep it normal flow; no fixed height / no overflow locking */
  width: 100%;
  max-width: 100%;
  padding: 16px 12px 90px;
  /* bottom padding so content clears footer nav */
}

.bc-page__container {
  width: 100%;
  max-width: 980px;
  /* similar to your modal’s "nice width" */
  margin: 0 auto;
}

/* Main “page card” wrapper (replaces modal outer shell look) */
.bc-card--main {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}

/* Inner spacing between sections/cards */
.bc-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card used for sections (Bike, Wheels, Drivetrain, etc.) */
.bc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 14px;
  margin: 1rem 0;
}

.inside-border-01 {
  border: 1px solid rgba(90, 214, 255, 0.7);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 0.8rem;
}

/* Section title that visually matches modal */
.bc-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--accent-blue-sky);
  letter-spacing: 0.2px;
  line-height: 1.15;
  margin-bottom: 12px;
}

.bc-section-title.text-center {
  justify-content: center;
  text-align: center;
}

/* Icon sizing like your example */
.bc-section-icon {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

.bc-label-icon {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.bc-label-icon-02 {
  width: 25px;
  height: auto;
  flex-shrink: 0;
}

.bc-img-01 {
  width: 50px !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* Grid / rows inside a bc-card */
.bc-grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* Clean “label/value” row layout */
.bc-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 14px;
  align-items: center;
  /* ✅ vertically centers label + value */
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* label / value */
.bc-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: var(--font-size-xlarge);
  opacity: 0.85;
}

.bc-label-02 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: var(--font-size-xlarge);
  color: var(--accent-blue-sky);
  opacity: 0.85;
}

.bc-value {
  opacity: 0.92;
  line-height: 1.35;
  word-break: break-word;
}

.bc-value-02 {
  opacity: 0.92;
  line-height: 1.35;
  word-break: break-word;
}

/* Chips like “Travel: 120mm” */
.bc-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(135, 206, 250, 0.35);
  background: rgba(135, 206, 250, 0.1);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.95;
}

/* Optional subtitle style (Front Wheel / Rear Wheel headings) */
.bc-subtitle {
  font-weight: 800;
  font-size: var(--font-size-xlarge);
  color: var(--accent-blue-sky);
  opacity: 0.9;
  margin: 10px 0 8px;
}

/* Empty state */
.bc-empty {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.85;
}

/* Safety: never let bc layouts shrink the viewport or create weird scroll containers */
.bc-page,
.bc-page__container,
.bc-card--main,
.bc-card {
  min-height: 0;
  overflow: visible;
}

/* =========================================================
   BC Mobile Improvements (organization + indentation)
   Desktop layout remains unchanged
========================================================= */
/* Responsive: stack label/value on small screens */
@media (max-width: 576px) {
  .bc-page {
    padding: 12px 10px 110px;
    /* more bottom room for footer */
  }
  /* If you removed bc-card--main from markup, you can remove this rule too */
  .bc-card--main {
    padding: 14px;
  }
  .bc-section-icon {
    width: 46px;
  }
  .bc-label-icon {
    width: 32px;
  }
  .bc-img-01 {
    width: 42px !important;
  }
  /* Indent everything inside a section slightly */
  .bc-section .bc-grid {
    padding-left: 14px;
  }
  /* Stack label/value vertically */
  .bc-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-bottom: 10px;
  }
  /* Make value area behave like a clean list */
  .bc-value {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* if you want the value indented under the label on mobile */
    margin-left: 44px;
  }
  /* Make value area behave like a clean list */
  .bc-value-02 {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* If multiple inline items exist, stack them */
  .bc-value span,
  .bc-value .bc-chip {
    display: inline-flex;
    width: fit-content;
  }
  /* Turn chips into cleaner mobile badges */
  .bc-chip {
    font-size: 0.82rem;
    padding: 3px 10px;
  }
  /* Optional subtle divider between grouped rows */
  .bc-row + .bc-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}
/* Safety: never let bc layouts shrink the viewport or create weird scroll containers */
.bc-page,
.bc-page__container,
.bc-card--main,
.bc-card {
  min-height: 0;
  overflow: visible;
}

/* ✅ Past Insights: anchor absolute star to each card */
.riding-chk-card,
.riding-chk-card-inner {
  position: relative;
}

/* ✅ Past Insights: don’t clip the star (top:-10px) */
.riding-chk-card-inner {
  overflow: visible;
}

.riding-chk-meta-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(135, 206, 250, 0.12);
  margin-right: 6px;
  margin-bottom: 4px;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.form-max-width-container-600 {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 6rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--font-size-large);
}

.preset-selector-container {
  max-width: 600px;
  margin: 0 auto;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--font-size-large);
}

#preset_selector {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: var(--font-size-medium);
  transition: all 0.3s ease;
  background-color: #fff;
  /* Always white background */
}

.disabled-input {
  background-color: var(--dark-gray-light) !important;
  /* Light gray background for disabled state */
  border-color: var(--dark-gray-light) !important;
  /* Lighter border for disabled state */
  color: var(--light-gray) !important;
  /* Gray text color for disabled state */
  cursor: not-allowed !important;
}

.small-form {
  visibility: hidden !important;
  display: none !important;
  height: 0px !important;
}

#biking-conditions-form {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 6rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--font-size-large);
}

.conditions-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.conditions-credit-chip {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-purple) 0%, #8b5cf6 100%);
  color: var(--light-text);
  box-shadow: 0 8px 18px rgba(91, 55, 183, 0.24);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.conditions-credit-chip:hover,
.conditions-credit-chip:focus-visible {
  box-shadow: 0 10px 22px rgba(91, 55, 183, 0.34);
  transform: translateY(-1px);
}

.conditions-credit-chip:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 3px;
}

.conditions-credit-chip__value {
  font-size: var(--font-size-large);
}

.conditions-credit-chip .credit-icon {
  font-size: 1rem;
}

#signup_form {
  margin: 0 auto;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--font-size-large);
}

.password_str_text {
  font-size: 0.78rem;
}

.password-strength {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.strength-segment {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background-color: #e0e0e0;
  /* Default gray color */
  transition: background-color 0.3s;
}

.form-container {
  padding: 0 1rem 0rem 1rem;
  font-size: var(--font-size-large);
}

.form-group {
  margin-bottom: 2rem;
  position: relative;
  transition: all 0.3s ease;
}

.trail-system-detail-fields {
  padding-bottom: 0.5rem;
}

.trail-system-detail-group {
  margin-bottom: 1.5rem;
}

.trail-system-detail-group:last-child {
  margin-bottom: 0.75rem;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--accent-green);
  font-size: var(--font-size-large);
}

.sub-label {
  display: block;
  margin-top: -5px;
  font-size: var(--font-size-small);
  color: var(--accent-green);
}

.rider-credit-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.rider-credit-note__text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.rider-credit-note__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-purple) 0%, #8b5cf6 100%);
  color: var(--light-text);
  box-shadow: 0 5px 12px rgba(91, 55, 183, 0.22);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.rider-credit-note__chip .fa-coins {
  color: var(--accent-amber);
  font-size: 0.85rem;
}

.trail-system-toggle-label {
  gap: 0.6rem;
  flex-wrap: wrap;
}

.trail-system-credit-badge {
  padding: 0.35rem 0.75rem;
  min-height: 1.75rem;
  font-size: 0.95rem;
  box-shadow: 0 7px 16px rgba(91, 55, 183, 0.3);
  transform: translateY(-1px);
}

.trail-system-credit-badge .fa-coins {
  font-size: 0.95rem;
}

input[type=text],
input[type=email],
select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: var(--font-size-medium);
  transition: all 0.3s ease;
  background-color: #fff;
  /* Always white background */
}

/* Focus states with green border */
input[type=text]:focus,
input[type=email]:focus,
select:focus {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(var(--accent-green-rgb, 76, 175, 80), 0.2);
  outline: none;
}

.left-border-input {
  border-left: 6px solid var(--accent-green) !important;
  background-color: #fff;
  /* Keep white background */
}

.left-border-input-signup {
  border-left: 6px solid var(--accent-amber) !important;
  background-color: #fff;
  /* Keep white background */
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 45px;
  min-height: 45px;
  cursor: pointer;
  font-size: var(--font-size-large);
  user-select: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px 8px 8px 45px;
  justify-content: flex-start;
}

/* Style for checked container */
.checkbox-container input:checked ~ .checkbox-label {
  font-weight: 600;
  color: #2c7dfa;
}

/* Container background when checked */
.checkbox-container input:checked ~ .checkbox-label {
  font-weight: 600;
}
.checkbox-container input:checked + .checkmark + .checkbox-label {
  color: #2c7dfa;
}
.checkbox-container input:checked ~ .checkbox-container {
  background-color: rgba(44, 125, 250, 0.1);
  border-color: #2c7dfa;
  box-shadow: 0 2px 4px rgba(44, 125, 250, 0.2);
}

/* Apply background and border to the container itself when checked */
.checkbox-container:has(input:checked) {
  background-color: rgba(44, 125, 250, 0.1);
  border: 2px solid #2c7dfa;
  box-shadow: 0 2px 4px rgba(44, 125, 250, 0.2);
}

.checkbox-container.is-disabled-by-terrain-pair {
  cursor: not-allowed;
  opacity: 0.55;
  background-color: rgba(255, 255, 255, 0.04);
  border-color: transparent;
  box-shadow: none;
}

.checkbox-container.is-disabled-by-terrain-pair .checkbox-label {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.checkbox-container.is-disabled-by-terrain-pair .checkmark,
.checkbox-container.is-disabled-by-terrain-pair:hover input ~ .checkmark {
  background-color: rgba(240, 240, 240, 0.45);
  border-color: rgba(204, 204, 204, 0.7);
}

.rider-temperature-control-head {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  justify-content: space-between;
}

.rider-temperature-control-head .bike-form-label {
  min-width: 0;
}

.rider-temperature-unit-select {
  flex: 0 0 auto;
  max-width: 5.8rem;
  min-width: 5.8rem;
  padding-left: 0.85rem !important;
  width: 5.8rem !important;
}

.rider-temperature-readout {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.85rem;
}

.rider-temperature-readout span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}

.rider-temperature-readout strong {
  color: var(--accent-blue-sky);
  display: block;
  font-size: var(--font-size-large);
  line-height: 1.1;
}

.rider-temperature-readout small {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: var(--font-size-small);
  font-weight: 700;
  margin-top: 0.2rem;
}

.rider-temperature-range {
  height: 3rem;
  margin: 0.75rem 0 0.95rem;
  position: relative;
}

.rider-temperature-range::before {
  background: linear-gradient(90deg, #74cffc, #7dce82, #ffb86c);
  border-radius: 999px;
  content: "";
  height: 0.5rem;
  left: 0;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.rider-temperature-range-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 3rem;
  left: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.rider-temperature-range-input-min {
  z-index: 2;
}

.rider-temperature-range-input-max {
  z-index: 3;
}

.rider-temperature-range-input:focus {
  outline: none;
}

.rider-temperature-range-input::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  height: 0.5rem;
}

.rider-temperature-range-input::-moz-range-track {
  background: transparent;
  border: 0;
  height: 0.5rem;
}

.rider-temperature-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--accent-blue);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: grab;
  height: 1.55rem;
  margin-top: -0.52rem;
  pointer-events: auto;
  width: 1.55rem;
}

.rider-temperature-range-input::-moz-range-thumb {
  background: var(--accent-blue);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: grab;
  height: 1.25rem;
  pointer-events: auto;
  width: 1.25rem;
}

.rider-temperature-range-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.25rem rgba(44, 125, 250, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.rider-temperature-range-input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 0.25rem rgba(44, 125, 250, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 575.98px) {
  .rider-temperature-control-head {
    gap: 0.5rem;
  }
  .rider-temperature-unit-select {
    max-width: 5.35rem;
    min-width: 5.35rem;
    width: 5.35rem !important;
  }
}
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  height: 35px;
  width: 35px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

.checkbox-container:hover input ~ .checkmark {
  background-color: #e0e0e0;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #2c7dfa;
  border-color: #2c7dfa;
}

.conditions-credit-breakdown {
  width: min(100%, 34rem);
  margin: 0 auto 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(125, 206, 130, 0.28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(40, 44, 42, 0.96) 0%, rgba(29, 32, 30, 0.96) 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.conditions-credit-breakdown__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.55rem;
}

.conditions-credit-breakdown__available-chip {
  gap: 0.28rem;
  min-height: 1.75rem;
  padding: 0.28rem 0.58rem;
  box-shadow: 0 7px 16px rgba(91, 55, 183, 0.3);
}

.conditions-credit-breakdown__available-chip .conditions-credit-chip__value {
  font-size: 0.98rem;
}

.conditions-credit-breakdown__available-chip .credit-icon {
  font-size: 0.95rem;
}

.conditions-credit-breakdown__rows {
  display: grid;
  gap: 0.4rem;
}

.conditions-credit-breakdown__row {
  display: flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--light-text);
}

.conditions-credit-breakdown__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

.conditions-credit-breakdown__amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 2.75rem;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-purple) 0%, #8b5cf6 100%);
  color: var(--light-text);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.conditions-credit-breakdown__amount .fa-coins {
  color: var(--accent-amber);
  font-size: 0.85rem;
}

.conditions-credit-breakdown__footer {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.conditions-credit-breakdown__total-label {
  color: var(--light-text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.conditions-credit-breakdown__total-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 1.75rem;
  min-width: 2.75rem;
  padding: 0.26rem 0.58rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-purple) 0%, #8b5cf6 100%);
  color: var(--light-text);
  font-weight: 900;
  font-size: 0.98rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 7px 16px rgba(91, 55, 183, 0.3);
}

.conditions-credit-breakdown__total-chip .fa-coins {
  color: var(--accent-amber);
  font-size: 1rem;
}

.conditions-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
}

.conditions-actions__item {
  display: flex;
}

.conditions-action-btn {
  width: min(100%, 18rem);
  min-height: 4.5rem;
  margin: 0;
  padding: 1rem 1.5rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(125, 206, 130, 0.24);
  background: linear-gradient(180deg, rgba(56, 61, 56, 0.98) 0%, rgba(37, 41, 37, 0.98) 100%);
  color: var(--light-text) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
}

.conditions-action-btn:hover,
.conditions-action-btn:focus-visible {
  color: var(--white) !important;
  border-color: rgba(125, 206, 130, 0.45);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(125, 206, 130, 0.14);
}

.conditions-action-btn--primary {
  background: var(--accent-purple);
  color: white !important;
  border-color: transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.conditions-action-btn--primary:hover,
.conditions-action-btn--primary:focus-visible {
  background: var(--accent-purple-dark);
  color: white !important;
  border-color: transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.conditions-action-btn--primary .credit-counter-04 {
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: var(--accent-purple);
  color: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.conditions-action-btn--secondary .credit-icon,
.conditions-action-btn--primary .credit-icon {
  margin-left: 0.35rem;
}

.conditions-action-btn--secondary:hover,
.conditions-action-btn--secondary:focus-visible {
  background: linear-gradient(180deg, rgba(63, 69, 63, 0.98) 0%, rgba(43, 48, 43, 0.98) 100%);
}

@media (max-width: 575.98px) {
  .conditions-credit-breakdown {
    width: 100%;
  }
  .conditions-credit-breakdown__row {
    align-items: flex-start;
  }
  .conditions-credit-breakdown__footer {
    text-align: center;
  }
  .conditions-actions,
  .conditions-actions__item {
    width: 100%;
  }
  .conditions-action-btn {
    width: 100%;
  }
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 13px;
  top: 3px;
  width: 8px;
  height: 18px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  animation: checkmark 0.2s ease-in-out;
}

@keyframes checkmark {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}
.checkbox-label {
  font-size: var(--font-size-xlarge);
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  transition: all 0.3s ease;
}

.center-stuff {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Centered underline that grows to 80% width */
.form-group::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 7px;
  background: var(--accent-blue);
  border-radius: 3px;
  transition: width 0.5s ease, left 0.5s ease;
  transform: translateX(-50%);
}

.form-group.filled::after {
  width: 80%;
}

/* Custom dropdown styling with animated chevron */
/* Custom dropdown styling with animated chevron */
select {
  appearance: none;
  /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10'><path d='M1 2 L8 8 L15 2' fill='none' stroke='%234CAF50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  /* Space for the chevron */
  cursor: pointer;
}

/* For IE and Edge */
select::-ms-expand {
  display: none;
}

/* Class for when dropdown is open */
select.dropdown-open {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10'><path d='M1 8 L8 2 L15 8' fill='none' stroke='%234CAF50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Better vertical alignment for rider AI checkboxes */
.js-ai-topics .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.js-ai-topics .form-check-input {
  margin-top: 0;
  /* remove Bootstrap default offset */
  flex-shrink: 0;
  height: 1.4em;
  width: 1.4em;
}

.js-ai-topics .form-check-label {
  margin-bottom: 0;
  /* remove tiny label offset */
  font-size: var(--font-size-xlarge);
}

/* Larger Bike Upgrade Toggle */
.bc-upgrade-switch {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* make the toggle much larger */
.bc-upgrade-switch .form-check-input {
  width: 4rem;
  height: 2rem;
  cursor: pointer;
}

/* improve visual scaling */
.bc-upgrade-switch .form-check-input:checked {
  background-size: 1.4rem;
}

/* vertically center label */
.bc-upgrade-switch .form-check-label {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

/* Bike upgrade toggle color */
.bc-upgrade-switch .form-check-input:checked {
  background-color: #87cefa;
  border-color: #5bb7f3;
}

.border-rounded-green {
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
  border: 2px solid var(--accent-green);
}

#scheduleTypeGroup {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#scheduleTypeGroup .schedule-option {
  width: 100%;
}

@media (min-width: 768px) {
  #scheduleTypeGroup {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  #scheduleTypeGroup .schedule-option {
    width: auto;
    flex: 0 0 auto;
  }
}
.schedule-date-picker-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.schedule-option {
  transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, margin 0.35s ease;
  opacity: 1;
  transform: translateY(0);
  max-height: 80px;
  overflow: hidden;
}

.schedule-option.fade-hidden {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  margin: 0;
  pointer-events: none;
}

.schedule-details-wrap {
  color: #f3f3f3;
}

.schedule-details-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1rem 1rem 0.85rem;
}

.schedule-details-section-title {
  color: #ffb86c;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}

.schedule-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.schedule-detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.schedule-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.schedule-detail-row-stack {
  grid-template-columns: 1fr;
  gap: 0.4rem;
}

.schedule-detail-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.schedule-detail-value {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}

.schedule-detail-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.6rem;
}

.schedule-detail-subject,
.schedule-detail-error {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}

.schedule-detail-error {
  color: #ffb3b3;
  border-color: rgba(255, 77, 77, 0.25);
  background: rgba(255, 77, 77, 0.08);
}

.schedule-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 1.45rem;
  font-weight: 800;
  text-transform: capitalize;
}

.schedule-pill-success {
  background: rgba(125, 206, 130, 0.14);
  color: #7dce82;
  border: 1px solid rgba(125, 206, 130, 0.28);
}

.schedule-pill-warning {
  background: rgba(255, 184, 108, 0.14);
  color: #ffb86c;
  border: 1px solid rgba(255, 184, 108, 0.28);
}

.schedule-pill-danger {
  background: rgba(255, 77, 77, 0.14);
  color: #ff6b6b;
  border: 1px solid rgba(255, 77, 77, 0.28);
}

.schedule-pill-neutral {
  background: rgba(255, 255, 255, 0.08);
  color: #e7e7e7;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.schedule-chip {
  display: inline-block;
  margin: 0 0.45rem 0.45rem 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(159, 163, 237, 0.13);
  border: 1px solid rgba(159, 163, 237, 0.24);
  color: #dfe2ff;
  font-size: 1.45rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .schedule-detail-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .schedule-detail-label {
    font-size: 1.3rem;
  }
  .schedule-detail-value {
    font-size: 1.6rem;
  }
}
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.hero-section {
  background: linear-gradient(to bottom, rgba(45, 45, 45, 0.9), rgba(71, 71, 71, 0.9));
  background-size: cover;
  text-align: center;
  margin-bottom: 0;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 93%, 0 85%);
  padding-top: calc(90px + env(safe-area-inset-top));
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.hero-section.hero-color-purple {
  background: linear-gradient(to bottom, rgba(45, 45, 45, 0.4), rgba(45, 45, 45, 0.6), rgba(109, 114, 195, 0.6)) !important;
}

.hero-section.hero-color-amber {
  background: linear-gradient(to bottom, rgba(45, 45, 45, 0.4), rgba(45, 45, 45, 0.6), rgba(238, 150, 55, 0.6)) !important;
}

.hero-section.hero-color-green {
  background: linear-gradient(to bottom, rgba(45, 45, 45, 0.4), rgba(45, 45, 45, 0.6), rgba(125, 206, 130, 0.5)) !important;
}

.hero-section.hero-color-sky {
  background: linear-gradient(to bottom, rgba(122, 182, 243, 0.9), rgba(105, 139, 165, 0.7), rgba(19, 19, 19, 0.5)) !important;
}

.hero-section.hero-color-blue-sky {
  background: linear-gradient(to bottom, rgba(122, 182, 243, 0.5), rgba(45, 45, 45, 0.6), rgba(45, 45, 45, 0.4)) !important;
}

.hero-section.hero-color-mauve {
  background: linear-gradient(to bottom, rgba(195, 109, 180, 0.5), rgba(45, 45, 45, 0.6), rgba(45, 45, 45, 0.4)) !important;
}

.hero-container {
  max-width: 1000px;
  margin: 0 auto;
}

.hero-icon {
  font-size: 3.5rem;
  color: var(--accent-amber);
  margin-bottom: 1rem;
}

.about-page .about-hero__logo {
  width: min(10rem, 42vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}

.hero-section h1 {
  color: var(--light-text);
  margin-bottom: 1rem;
  font-size: 2rem;
}

.hero-section p {
  color: var(--light-text);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.credit-color {
  color: var(--accent-amber);
  font-weight: bold;
}

.public-marketing-page {
  color: var(--light-text);
  padding-bottom: 0;
}

.bottom-nav.bottom-nav--public-marketing {
  position: static;
  width: 100%;
  margin-top: 0;
}

.hero-section.public-page-hero {
  display: flex;
  align-items: center;
  min-height: 560px;
  text-align: left;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.public-page-hero--features {
  background-image: linear-gradient(90deg, rgba(30, 30, 30, 0.95) 0%, rgba(45, 45, 45, 0.78) 50%, rgba(30, 30, 30, 0.38) 100%), url("https://bikingconditions.nyc3.cdn.digitaloceanspaces.com/img/main/features_02.png");
  background-position: center right;
}

.public-page-hero--pricing {
  background-image: linear-gradient(90deg, rgba(30, 30, 30, 0.95) 0%, rgba(45, 45, 45, 0.76) 48%, rgba(30, 30, 30, 0.36) 100%), url("https://bikingconditions.nyc3.cdn.digitaloceanspaces.com/img/main/pricing_03.png");
  background-position: center right;
}

.public-page-hero__container {
  width: 100%;
}

.public-page-hero__content {
  max-width: 680px;
  padding: 1rem 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.public-page-hero .public-page-eyebrow {
  color: var(--accent-amber);
}

.public-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  color: var(--accent-amber);
  font-size: var(--font-size-medium);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-page-hero h1 {
  max-width: 12ch;
  margin-bottom: 1rem;
  color: var(--white);
  font-size: 3.2rem;
  line-height: 1.04;
  letter-spacing: 0;
}

.public-page-hero p {
  max-width: 660px;
  color: var(--light-text);
  font-size: 1.15rem;
}

.public-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.public-page-btn,
.public-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 9rem;
  padding: 0.72rem 1.15rem;
  border: 0;
  border-radius: 2rem;
  color: var(--white);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.public-page-btn:hover,
.public-card-link:hover {
  color: var(--white);
  transform: translateY(-2px);
  text-decoration: none;
}

.public-page-btn--primary,
.public-card-link {
  background-color: var(--accent-amber-dark);
  box-shadow: 0 10px 24px rgba(222, 128, 28, 0.28);
}

.public-page-btn--primary:hover,
.public-card-link:hover {
  background-color: var(--accent-amber);
}

.public-page-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.68);
  background-color: rgba(255, 255, 255, 0.08);
}

.public-page-btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.public-page-hero .public-page-hero__note {
  margin-top: 0.85rem;
  color: var(--accent-amber-light);
  font-size: 0.98rem;
  font-weight: 700;
}

.public-page-section {
  padding: 4rem 1rem 2.25rem;
}

.public-page-container {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.public-section-header {
  max-width: 720px;
  margin: 0 auto 2rem;
  text-align: center;
}

.public-section-header h2,
.public-band-copy h2 {
  margin-bottom: 0.85rem;
  color: var(--white);
  font-size: 2rem;
  line-height: 1.16;
  letter-spacing: 0;
}

.public-section-header p,
.public-band-copy p {
  color: var(--light-gray);
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.public-feature-card,
.public-pricing-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(45, 45, 45, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.public-feature-card {
  padding: 1.25rem;
}

.public-feature-card h3,
.public-pricing-card h3 {
  margin: 0.95rem 0 0.55rem;
  color: var(--white);
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.public-feature-card p,
.public-pricing-card p {
  margin: 0;
  color: var(--light-gray);
  font-size: 0.98rem;
}

.public-feature-icon,
.public-pricing-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.35rem;
}

.public-feature-icon--amber,
.public-pricing-card__icon {
  color: var(--accent-amber);
}

.public-feature-icon--green {
  color: var(--accent-green);
}

.public-feature-icon--blue {
  color: var(--accent-blue-sky);
}

.public-feature-icon--purple {
  color: var(--accent-purple-med-light);
}

.public-feature-icon--teal {
  color: var(--accent-teal);
}

.public-feature-icon--gold {
  color: var(--accent-gold);
}

.public-page-band {
  margin: 2rem 0 0;
  padding: 3.5rem 1rem calc(3.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, rgba(95, 99, 170, 0.22), rgba(125, 206, 130, 0.1)), var(--dark-secondary);
}

.public-band-grid,
.public-pricing-usage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 2rem;
  align-items: center;
}

.public-band-copy {
  max-width: 620px;
}

.public-mini-list,
.public-usage-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.public-mini-list div,
.public-usage-item {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  color: var(--light-text);
}

.public-mini-list i {
  color: var(--accent-green);
  line-height: 1.6;
}

.public-band-figure {
  margin: 0;
}

.public-band-figure img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.public-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.public-pricing-card {
  display: flex;
  flex-direction: column;
  padding: 1.15rem;
}

.public-pricing-card--free {
  border-color: rgba(125, 206, 130, 0.42);
}

.public-pricing-card--free .public-pricing-card__icon {
  color: var(--accent-green);
}

.public-pricing-card--featured {
  border-color: rgba(255, 184, 108, 0.72);
  box-shadow: 0 16px 34px rgba(222, 128, 28, 0.18);
}

.public-pricing-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background-color: var(--accent-purple-dark);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 800;
}

.public-pricing-card__price {
  margin: 0.15rem 0 0.5rem;
  color: var(--accent-amber);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.public-pricing-list {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.public-pricing-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.45rem;
  color: var(--light-gray);
  font-size: 0.92rem;
  line-height: 1.3;
}

.public-pricing-list i {
  color: var(--accent-green);
  line-height: 1.35;
}

.public-card-link {
  width: 100%;
  margin-top: auto;
}

.public-page-band--pricing {
  background: linear-gradient(135deg, rgba(44, 125, 250, 0.14), rgba(255, 184, 108, 0.12)), var(--dark-secondary);
}

.public-usage-list {
  gap: 0.8rem;
}

.public-usage-item {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background-color: rgba(30, 30, 30, 0.42);
}

.public-usage-item strong {
  color: var(--accent-amber);
  line-height: 1.25;
}

.public-usage-item span {
  color: var(--light-gray);
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .public-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .public-feature-grid,
  .public-band-grid,
  .public-pricing-usage-grid {
    grid-template-columns: 1fr;
  }
  .public-band-copy {
    max-width: 100%;
  }
}
@media (max-width: 700px) {
  .hero-section.public-page-hero {
    min-height: 520px;
    text-align: center;
  }
  .public-page-hero--features,
  .public-page-hero--pricing {
    background-image: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(30, 30, 30, 0.82) 52%, rgba(30, 30, 30, 0.58) 100%), var(--public-hero-mobile-image);
    background-position: center;
  }
  .public-page-hero--features {
    --public-hero-mobile-image: url("https://bikingconditions.nyc3.cdn.digitaloceanspaces.com/img/main/features_02.png");
  }
  .public-page-hero--pricing {
    --public-hero-mobile-image: url("https://bikingconditions.nyc3.cdn.digitaloceanspaces.com/img/main/pricing_03.png");
  }
  .public-page-hero__content,
  .public-page-hero h1,
  .public-page-hero p {
    max-width: 100%;
  }
  .public-page-hero h1 {
    font-size: 2.25rem;
  }
  .public-page-hero__actions {
    justify-content: center;
  }
  .public-page-section {
    padding-top: 3rem;
  }
  .public-section-header h2,
  .public-band-copy h2 {
    font-size: 1.65rem;
  }
}
@media (max-width: 560px) {
  .public-feature-grid,
  .public-pricing-grid {
    grid-template-columns: 1fr;
  }
  .public-page-btn {
    width: 100%;
  }
  .public-usage-item {
    grid-template-columns: 1fr;
  }
}
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.error-404-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--bc-header-height) - var(--bc-bottom-nav-height));
  padding: calc(95px + env(safe-area-inset-top)) 1rem calc(4rem + env(safe-area-inset-bottom));
  color: var(--light-text);
}

.error-404-card {
  position: relative;
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(45, 45, 45, 0.96), rgba(30, 30, 30, 0.98));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
  padding: clamp(1.35rem, 4vw, 2.5rem);
  text-align: center;
}

.error-404-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue-sky), var(--accent-amber));
}

.error-404-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(125, 206, 130, 0.36);
  border-radius: 8px;
  background: rgba(125, 206, 130, 0.12);
  color: var(--accent-green);
  font-size: 2rem;
}

.error-404-code {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.32rem 0.78rem;
  border: 1px solid rgba(255, 184, 108, 0.42);
  border-radius: 999px;
  color: var(--accent-amber);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.error-404-title {
  margin: 0 0 0.8rem;
  color: var(--white);
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
}

.error-404-copy {
  max-width: 35rem;
  margin: 0 auto;
  color: var(--light-gray);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.55;
}

.error-404-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1.45rem 0 0;
  padding: 0;
  list-style: none;
}

.error-404-list li {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
  color: var(--light-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.error-404-list i {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--accent-blue-sky);
  font-size: 1.1rem;
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
}

@media (max-width: 575.98px) {
  .error-404-page {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }
  .error-404-list {
    grid-template-columns: 1fr;
  }
  .error-404-actions {
    flex-direction: column;
  }
  .error-404-actions .public-page-btn {
    width: 100%;
  }
}
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.pos-relative {
  position: relative;
}

.credits-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem;
  margin-top: 1rem;
}

.credit-counter {
  position: relative;
  width: fit-content;
  margin: 1rem 0 2rem auto;
  background-color: var(--accent-purple);
  color: var(--light-text);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: -1;
  right: 1rem;
}

.credit-counter span {
  margin-right: 0.4rem;
  font-size: 1.1rem;
}

.credit-counter-02 {
  width: fit-content;
  margin: 1rem auto 2rem auto;
  background-color: var(--accent-purple);
  color: var(--light-text);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: -1;
  right: 1rem;
}

.credit-counter-02 span {
  margin-right: 0.4rem;
  font-size: 1.1rem;
}

.credit-counter-03 {
  position: relative;
  width: fit-content;
  background-color: var(--accent-purple);
  color: var(--light-text);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: -1;
  right: 1rem;
}

.credit-counter-04 {
  justify-self: center;
  font-size: 1.7rem;
  max-width: fit-content;
  padding: 0 0.6rem;
  background-color: var(--accent-purple);
  color: var(--light-text);
  border-radius: 20px;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.credit-counter-03 span {
  margin-right: 0.4rem;
  font-size: 1.1rem;
}

.credit-icon {
  color: var(--accent-gold);
  font-size: 1.1rem;
  display: inline-block;
}

.info-float-r,
.info-float-referral,
.info-float-ai {
  position: absolute;
  color: var(--light-text);
  top: 12px;
  right: 8px;
  z-index: 1;
  font-size: 2.4rem;
  /* Adjust size if needed */
  cursor: pointer;
  transition: top 0.1s ease;
}
.info-float-r:hover,
.info-float-referral:hover,
.info-float-ai:hover {
  top: 3px;
}

.info-icon-container-01 {
  margin: 1.6rem 0 1.3rem 0;
}

.info-normal {
  color: var(--light-text);
  font-size: 3rem;
  /* Adjust size if needed */
  cursor: pointer;
  transition: top 0.1s ease;
}
.info-normal:hover {
  transform: translateY(-5px);
}

.info-float-top-right {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  font-size: 2.4rem;
  color: var(--light-text);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.info-float-top-right:hover {
  transform: translateY(-4px);
  /* small lift */
  opacity: 0.9;
}

/* -------------------------------------------- */
/* SHARED FAVORITE ICON STYLES                  */
/* -------------------------------------------- */
/* Base transition for the icon itself */
.favorite-icon {
  transition: transform 0.2s ease;
}

/* Normal hover: small lift */
.favorite-icon:hover {
  transform: translateY(-3px);
}

/* Click pop: lift + scale (wins over hover) */
.favorite-icon.animate-grow,
.favorite-icon.animate-grow:hover {
  transform: translateY(-3px) scale(1.35);
}

/* -------------------------------------------- */
/* STAR SIZE (GLOBAL)                           */
/* -------------------------------------------- */
.favorite-toggle .fa-star,
.favorite-toggle-02 .fa-star,
.favorite-toggle-03 .fa-star {
  font-size: 2.3rem;
}

/* -------------------------------------------- */
/* POSITIONING — PREVIOUS CONDITIONS PAGE       */
/* -------------------------------------------- */
.favorite-toggle {
  text-align: center;
  cursor: pointer;
  z-index: 10;
}

/* Special override for .container-01 use case */
.container-01 .favorite-toggle {
  top: 42px;
  left: 12px;
}

/* -------------------------------------------- */
/* POSITIONING — PRESET MANAGER PAGE            */
/* -------------------------------------------- */
.favorite-toggle-02 {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 10;
}

.riding-chk-card .favorite-toggle-02 {
  opacity: 1 !important;
  pointer-events: auto;
}

.favorite-toggle-03 {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 10;
}

.riding-chk-card .favorite-toggle-03 {
  opacity: 1 !important;
  pointer-events: auto;
}

.default-badge {
  background-color: var(--accent-amber);
  color: var(--dark-gray);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  position: absolute;
  top: -10px;
  right: 0px;
}

.ride-preset-card {
  position: relative;
}

.ride-preset-default-control {
  position: absolute;
  top: -10px;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ride-preset-default-control .default-badge {
  position: static;
  top: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.ride-preset-default-control .default-badge.is-pending {
  opacity: 0.82;
  box-shadow: 0 0 0 2px rgba(255, 186, 84, 0.28);
}

.ride-preset-default-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background-color: rgba(43, 43, 43, 0.95);
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  border-radius: 12px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ride-preset-default-chip:hover,
.ride-preset-default-chip:focus-visible {
  background-color: var(--accent-amber);
  color: var(--dark-gray);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.ride-preset-default-chip:focus-visible {
  outline: 2px solid var(--light-text);
  outline-offset: 2px;
}

.ride-preset-default-chip i {
  font-size: 0.75rem;
}

.ride-preset-badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--font-size-medium);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
  background-color: #59595a !important;
}

/* Wrapper */
.gear-spinner {
  font-size: 4rem;
  color: var(--accent-purple);
  display: inline-block;
  /* Only spin THIS gear */
}
.gear-spinner i {
  animation: gearSpin 1.4s linear infinite, gearGlow 2.2s ease-in-out infinite;
}

/* Rotation animation */
@keyframes gearSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Glow animation (subtle amber pulse) */
@keyframes gearGlow {
  0%, 100% {
    text-shadow: 0 0 0px var(--accent-amber-light);
    opacity: 0.95;
  }
  50% {
    text-shadow: 0 0 12px var(--accent-amber);
    opacity: 1;
  }
}
.spin-wheel {
  animation: wheelSpin 3.4s linear infinite, wheelGlow 2.2s ease-in-out infinite;
}

/* Rotation */
@keyframes wheelSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Glow pulse for images */
@keyframes wheelGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0px var(--accent-amber-light));
    opacity: 0.95;
  }
  50% {
    filter: drop-shadow(0 0 14px var(--accent-amber-light));
    opacity: 1;
  }
}
.ck-overview-fab {
  position: fixed;
  right: 1rem;
  bottom: 6.1rem;
  z-index: 900;
  /* above page content; below Bootstrap modal (1055/1060) is fine */
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(42, 42, 42, 0.78);
  color: var(--accent-amber);
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.ck-overview-fab:hover {
  transform: translateY(-1px) !important;
}

.ck-overview-fab:active {
  transform: translateY(0) !important;
}

.ck-overview-fab:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 3px;
}

.ck-overview-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-green-dark);
  color: #0b0b0b;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

/* Optional: hide the FAB until user scrolls a bit (feels cleaner under the hero) */
.ck-overview-fab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.ck-overview-fab.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

ul.menu-list {
  padding-left: 0.3rem !important;
}

ul.no-bullets {
  list-style-type: none;
  padding-left: 0 !important;
}

.color-list-01 li::marker {
  color: var(--accent-amber);
  /* or any variable you want */
}

.color-list-02 li::marker {
  color: var(--accent-green);
  /* or any variable you want */
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.overlay {
  position: fixed;
  top: calc(var(--bc-header-height) + env(safe-area-inset-top));
  left: 0;
  width: 100%;
  height: calc(100vh - var(--bc-header-height) - env(safe-area-inset-top));
  height: calc(100dvh - var(--bc-header-height) - env(safe-area-inset-top));
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 80;
  display: none;
}

.overlay.show {
  display: block;
}

.modal-header {
  border-bottom: 1px solid #585858;
}

.modal-title {
  color: var(--accent-amber);
  font-size: 1.5rem;
}

.modal-content {
  background-color: var(--dark-secondary);
  max-height: calc(100vh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  border-top: 1px solid #585858;
}

.schedule-response-modal__content {
  border: 0;
  color: var(--light-text);
}

.buy-credits-modal__content {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.buy-credits-modal__subtitle {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.buy-credits-modal .modal-title {
  font-size: 2.2rem;
}

.buy-credits-modal__subtitle {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.buy-credits-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--light-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.buy-credits-limit-note {
  color: rgba(255, 255, 255, 0.76);
  background: rgba(109, 114, 195, 0.16);
  border: 1px solid rgba(159, 163, 237, 0.28);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 1.18rem;
  line-height: 1.45;
}

.buy-credits-limit-note__signoff {
  display: block;
  margin-top: 0.35rem;
  text-align: center;
}

.buy-credits-packages {
  display: grid;
  gap: 0.75rem;
}

.buy-credits-package {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem;
  background: rgba(20, 22, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.buy-credits-package__main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.buy-credits-package__name {
  color: var(--light-text);
  font-weight: 800;
  font-size: 1.34rem;
}

.buy-credits-package__name--trail_pack {
  color: var(--accent-green);
}

.buy-credits-package__name--adventure_pack {
  color: var(--accent-amber);
}

.buy-credits-package__name--expedition_pack {
  color: var(--accent-blue-sky);
}

.buy-credits-package__credits {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.22rem;
}

.buy-credits-package__button {
  justify-self: center;
  justify-content: center;
  margin: 0.2rem 0 0;
  width: 10.5rem;
  max-width: 100%;
  padding: 0.65rem 1rem;
  font-size: 1.3rem;
}

.buy-credits-package__button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.bike-limit-modal__content {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.bike-limit-modal .modal-title {
  font-size: 2rem;
}

.bike-limit-modal__notice,
.bike-limit-modal__subtitle {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.12rem;
  line-height: 1.45;
}

.bike-limit-modal__notice {
  margin-bottom: 0.65rem;
}

.bike-limit-modal__subtitle {
  margin-bottom: 1rem;
}

.bike-limit-modal__footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.75rem 1.5rem;
  line-height: 1.2;
}

.bike-slot-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--light-text);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-size: 1.22rem;
}

.bike-slot-packages {
  display: grid;
  gap: 0.75rem;
}

.bike-slot-package {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem;
  background: rgba(20, 22, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.bike-slot-package__main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.bike-slot-package__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--light-text);
  font-size: 1.42rem;
  font-weight: 800;
}

.bike-slot-package__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--accent-blue);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
}

.bike-slot-package__meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.35;
}

.bike-slot-package__button {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 11.75rem;
  max-width: 100%;
  min-height: 3.1rem;
  padding: 0.65rem 1rem;
  font-size: 1.12rem;
  line-height: 1.2;
  white-space: nowrap;
}

.bike-slot-package__button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.bike-slot-confirmation {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.bike-slot-confirmation__icon {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: var(--accent-gold);
  background: rgba(246, 192, 45, 0.12);
  border: 1px solid rgba(246, 192, 45, 0.24);
  border-radius: 999px;
  font-size: 1.8rem;
}

.bike-slot-confirmation__title {
  color: var(--light-text);
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0;
}

.bike-slot-confirmation__copy {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 0;
}

.bike-slot-confirmation__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.bike-slot-confirmation__summary div {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem;
  background: rgba(20, 22, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.bike-slot-confirmation__summary span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.bike-slot-confirmation__summary strong {
  color: var(--light-text);
  font-size: 1.1rem;
}

.bike-slot-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.bike-slot-confirmation__confirm,
.bike-slot-confirmation__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  min-height: 4rem;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.bike-slot-confirmation__confirm {
  background-color: var(--accent-blue-account);
  color: var(--white);
  border: none;
}

.bike-slot-confirmation__confirm:hover,
.bike-slot-confirmation__confirm:focus {
  background-color: #0056b3;
  color: var(--white) !important;
}

.bike-slot-confirmation__confirm span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.buy-credits-checkout {
  position: relative;
  display: grid;
  gap: 0.9rem;
}

.buy-credits-checkout__back {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--light-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.buy-credits-checkout__back:hover,
.buy-credits-checkout__back:focus {
  color: var(--accent-amber);
  border-color: rgba(255, 193, 7, 0.42);
}

.buy-credits-checkout__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(20, 22, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.buy-credits-checkout__label {
  display: block;
  color: rgba(255, 255, 255, 0.64);
  font-size: 1rem;
  line-height: 1.25;
}

.buy-credits-checkout__summary strong {
  color: var(--light-text);
  font-size: 1.28rem;
  line-height: 1.25;
}

.buy-credits-checkout__amount {
  display: grid;
  gap: 0.15rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
  line-height: 1.3;
  text-align: right;
}

.buy-credits-checkout__credits {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.buy-credits-checkout__amount strong {
  color: var(--accent-blue-account);
  font-size: 1.45rem;
  line-height: 1.15;
}

.buy-credits-payment-form {
  display: grid;
  gap: 0.85rem;
}

.buy-credits-payment-element-shell {
  position: relative;
  min-height: 180px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  overflow: hidden;
}

.buy-credits-payment-element {
  min-height: 180px;
  padding: 0.9rem;
}

.buy-credits-payment-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  padding: 1rem;
  color: #1d2735;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.96)), radial-gradient(circle at 50% 25%, rgba(135, 206, 250, 0.28), transparent 34%);
}

.buy-credits-payment-loader__scene {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 2rem;
  color: #2f435d;
  animation: buy-credits-loader-float 1.15s ease-in-out infinite;
}

.buy-credits-payment-loader__scene .fa-coins {
  color: #f8b91f;
  font-size: 1.45rem;
  animation: buy-credits-loader-coin 1.15s ease-in-out infinite;
}

.buy-credits-payment-loader__road {
  position: relative;
  width: min(220px, 72%);
  height: 5px;
  overflow: hidden;
  background: rgba(29, 39, 53, 0.16);
  border-radius: 999px;
}

.buy-credits-payment-loader__road span {
  position: absolute;
  top: 0;
  left: 100%;
  width: 34%;
  height: 100%;
  background: var(--accent-blue-sky);
  border-radius: inherit;
  animation: buy-credits-loader-road 1.1s linear infinite;
}

.buy-credits-payment-loader__text {
  color: rgba(29, 39, 53, 0.74);
  font-size: 0.95rem;
  font-weight: 700;
}

@keyframes buy-credits-loader-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes buy-credits-loader-coin {
  0%, 100% {
    transform: rotate(-5deg) scale(1);
  }
  50% {
    transform: rotate(7deg) scale(1.08);
  }
}
@keyframes buy-credits-loader-road {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-420%);
  }
}
.buy-credits-payment-message {
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.4;
}

.buy-credits-payment-message--info {
  color: var(--light-text);
  background: rgba(96, 165, 250, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.32);
}

.buy-credits-payment-message--success {
  color: var(--light-text);
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.34);
}

.buy-credits-payment-message--error {
  color: var(--light-text);
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.38);
}

.buy-credits-payment__submit {
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  width: 100%;
  min-height: 3rem;
}

.buy-credits-payment__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: buy-credits-spin 0.75s linear infinite;
}

@keyframes buy-credits-spin {
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 480px) {
  .modal-dialog {
    margin: calc(0.5rem + env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
  }
  .buy-credits-modal .modal-title {
    font-size: 1.65rem;
  }
  .buy-credits-modal__subtitle,
  .buy-credits-current,
  .buy-credits-limit-note {
    font-size: 1rem;
  }
  .buy-credits-current {
    align-items: flex-start;
    flex-direction: column;
  }
  .buy-credits-package {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 0.8rem;
  }
  .bike-slot-package {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.8rem;
  }
  .buy-credits-package__name {
    font-size: 1.18rem;
  }
  .bike-slot-package__name {
    font-size: 1.28rem;
  }
  .buy-credits-package__credits {
    font-size: 1.08rem;
  }
  .bike-slot-package__meta {
    font-size: 1.08rem;
  }
  .buy-credits-package__button {
    width: 100%;
    padding: 0.6rem 0.85rem;
  }
  .bike-slot-package__button {
    width: 100%;
  }
  .bike-slot-confirmation__summary {
    grid-template-columns: 1fr;
  }
  .bike-slot-confirmation__confirm,
  .bike-slot-confirmation__cancel {
    width: 100%;
  }
  .buy-credits-checkout__summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .buy-credits-checkout__amount {
    text-align: left;
  }
  .buy-credits-checkout__credits {
    justify-content: flex-start;
  }
}
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.weather-snippet-right {
  position: relative;
  top: 10px;
  /* Move closer to the top edge */
  right: 8px;
  /* Move closer to the right edge */
  z-index: 1;
  font-size: var(--font-size-xlarge);
  /* Adjust size if needed */
  transition: top 0.1s ease;
}

.weather-snippet-left {
  position: relative;
  top: 10px;
  /* Move closer to the top edge */
  left: 8px;
  /* Move closer to the right edge */
  z-index: 1;
  font-size: var(--font-size-xlarge);
  /* Adjust size if needed */
  transition: top 0.1s ease;
}

.forecast-row {
  overflow-x: auto;
  white-space: nowrap;
}

.forecast-card {
  display: inline-block;
  margin: 0 0.3rem;
}

.forecast-card-body {
  font-size: var(--font-size-medium);
  padding: 0.4rem 0.4rem;
}

@media (min-width: 600px) {
  .forecast-card {
    margin: 0 0.6rem;
  }
  .forecast-card-body {
    font-size: var(--font-size-large);
    padding: 1rem 1rem;
  }
}
@media (min-width: 768px) {
  .forecast-card {
    min-width: 200px;
    margin: 0.5rem 1rem;
  }
  .forecast-card-body {
    font-size: var(--font-size-xlarge);
    padding: 1.5rem 1.5rem;
  }
}
.forecast-row::-webkit-scrollbar {
  height: 12px;
  /* Height affects horizontal scrollbar */
}

.forecast-row::-webkit-scrollbar-thumb {
  border-radius: 6px;
}

.forecast-alignment {
  display: flex;
  justify-content: center !important;
  text-align: center;
}

.riding-conditions {
  font-size: var(--font-size-large);
}

.change-unit {
  color: var(--accent-blue-light);
  cursor: pointer;
}

.change-unit.snow-change-unit {
  color: var(--accent-blue-very-light);
  cursor: pointer;
}

.recent-rain-card .recent-rain-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
}
.recent-rain-card .recent-rain-day {
  display: grid;
  grid-template-rows: auto 10px auto;
  min-width: 0;
  row-gap: 0.38rem;
  text-align: center;
}
.recent-rain-card .recent-rain-day__label {
  color: rgba(224, 224, 224, 0.78);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.05;
}
.recent-rain-card .recent-rain__dash {
  background-color: #8a8a8a;
  border-radius: 5px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  height: 10px;
  min-width: 0;
  transition: background-color 0.2s ease;
  width: 100%;
}
.recent-rain-card .recent-rain__dash--missing {
  background-color: #8a8a8a;
}
.recent-rain-card .recent-rain__dash--none {
  background-color: #e0e0e0;
}
.recent-rain-card .recent-rain__dash--very-light {
  background-color: #a8d5a3;
}
.recent-rain-card .recent-rain__dash--light {
  background-color: #7dce82;
}
.recent-rain-card .recent-rain__dash--moderate {
  background-color: #f3d547;
}
.recent-rain-card .recent-rain__dash--heavy {
  background-color: #ff9f1c;
}
.recent-rain-card .recent-rain__dash--very-heavy {
  background-color: #ff4d4d;
}
.recent-rain-card .recent-rain__dash--extreme {
  background-color: #7f0000;
}
.recent-rain-card .recent-rain-day__total {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.15;
  min-height: 1.35rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.recent-rain-card .recent-rain-day__missing {
  color: rgba(224, 224, 224, 0.48);
  font-weight: 800;
}

@media (max-width: 420px) {
  .recent-rain-card .recent-rain-day__label,
  .recent-rain-card .recent-rain-day__total {
    font-size: 0.88rem;
  }
}
.wind-speed-direction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  line-height: 1.05;
  min-height: 1.8rem;
  white-space: nowrap;
}

.wind-direction-arrow {
  color: var(--accent-blue-light);
  display: block;
  flex: 0 0 auto;
  font-size: 0.95em;
  line-height: 1;
  margin-block: 0.1rem 0.22rem;
  transform-origin: center;
}

.wind-direction-label {
  color: var(--light-text);
  font-weight: 600;
}

.table .wind-direction-label {
  color: var(--dark-secondary);
}

.forecast-img {
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
}
.forecast-img:hover {
  transform: scale(1.76);
}

.hourly-alignment {
  text-align: center;
}

.severe-weather-warning-card {
  border: 2px solid var(--accent-red);
  padding: 2rem 1.5rem;
  margin-bottom: 3rem;
  max-width: 600px;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: rgba(255, 0, 0, 0.08);
}

.severe-weather-warning-card p {
  color: var(--accent-red-light);
  text-align: left;
}

.severe-weather-alert-card {
  border: 2px solid var(--accent-red);
  padding: 2rem 1.5rem;
  margin-bottom: 3rem;
  max-width: 600px;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: rgba(255, 108, 59, 0.3);
}

.severe-weather-alert-card p {
  color: var(--accent-red-light);
  text-align: left;
}

.severe-weather-notice-card {
  border: 2px solid var(--accent-yellow);
  padding: 2rem 1.5rem;
  margin-bottom: 3rem;
  max-width: 600px;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: rgba(255, 247, 0, 0.08);
  color: var(--accent-yellow-light);
}

.severe-weather-notice-card p {
  color: var(--accent-yellow-light);
  text-align: left;
}

.severe-weather-notice-card h4 {
  color: var(--accent-yellow);
}

.loading-overlay-biking {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-family: Arial, sans-serif;
}

.loading-comment-biking {
  margin-bottom: 20px;
  font-size: 1.2em;
  text-align: center;
  max-width: 100%;
}

.loading-spinner-biking {
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 5px solid #fff;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.view-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Don't block clicks */
  opacity: 0;
  z-index: 9999;
  /* Subtle BC vibes – tweak as you want */
  background: radial-gradient(circle at center, rgba(222, 128, 28, 0.12), rgba(120, 80, 200, 0.35), rgba(0, 0, 0, 0.9));
}

.view-flash-overlay.is-active {
  animation: viewFlash 420ms ease-out;
}

@keyframes viewFlash {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

header {
  padding: calc(1rem + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 1rem max(5px, env(safe-area-inset-left));
  background-color: var(--dark-secondary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  min-height: calc(var(--bc-header-height) + env(safe-area-inset-top));
  gap: 0.75rem;
  left: 0;
  right: 0;
}

header > div:first-child {
  min-width: 0;
}

.nav-brand-link {
  align-items: center;
  display: flex;
  min-width: 0;
  text-decoration: none;
}

.nav-brand-link:hover,
.nav-brand-link:focus-visible {
  text-decoration: none;
}

.logo {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--accent-green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-menu-controls {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.nav-header-credit-counter {
  border: 0;
  appearance: none;
  background-color: var(--accent-purple);
  flex: 0 0 auto;
  max-width: 0;
  overflow: hidden;
  order: 2;
  padding: 0;
  white-space: nowrap;
  margin: 0;
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(14px) scale(0.92);
  transform-origin: right center;
  transition: max-width 260ms cubic-bezier(0.22, 1, 0.36, 1), padding 260ms cubic-bezier(0.22, 1, 0.36, 1), margin 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms linear 260ms;
}

.nav-header-credit-counter.is-visible {
  max-width: 11rem;
  margin: 0 0.65rem 0 0.85rem;
  padding: 0.4rem 1rem;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition: max-width 260ms cubic-bezier(0.22, 1, 0.36, 1), padding 260ms cubic-bezier(0.22, 1, 0.36, 1), margin 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms linear 0ms;
}

.menu-icon {
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  z-index: 110;
  position: relative;
  flex: 0 0 auto;
  order: 3;
}

.menu-line {
  height: 3px;
  width: 30px;
  background-color: var(--light-text);
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
}

.menu-line:nth-child(1) {
  top: 6px;
}

.menu-line:nth-child(2) {
  top: 14px;
}

.menu-line:nth-child(3) {
  top: 22px;
}

.menu-open .menu-line:nth-child(1) {
  transform: rotate(45deg);
  top: 14px;
}

.menu-open .menu-line:nth-child(2) {
  opacity: 0;
}

.menu-open .menu-line:nth-child(3) {
  transform: rotate(-45deg);
  top: 14px;
}

.side-menu {
  position: fixed;
  top: calc(var(--bc-header-height) + env(safe-area-inset-top));
  right: -320px;
  width: min(320px, 100vw);
  background-color: var(--dark-secondary);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1100;
  transition: right 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: fit-content;
  max-height: calc(100vh - var(--bc-header-height) - env(safe-area-inset-top));
  max-height: calc(100dvh - var(--bc-header-height) - env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
}

.side-menu.open {
  right: 0;
}

.menu-content {
  padding: 0.6rem 0rem 0.6rem 0.6rem;
}

.menu-content h2 {
  color: var(--light-text);
  margin-bottom: 1.5rem;
}

.menu-list {
  list-style: none;
}

.menu-list li {
  margin-bottom: 1.2rem;
}

.menu-list a {
  color: var(--light-text);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.menu-list a:hover {
  color: var(--accent-amber);
}

.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.side-menu .nav-auth-buttons {
  align-items: center;
}

.side-menu .nav-auth-link {
  display: flex;
  justify-content: center;
  width: 100%;
}

nav.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--dark-secondary);
  display: flex;
  justify-content: space-around;
  padding: 0.4rem env(safe-area-inset-right) calc(0.4rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--light-text);
  text-decoration: none;
  font-size: 1.2rem;
}

.nav-icon {
  margin-bottom: 0.3rem;
  font-size: 1.4rem;
}

.nav-icon-img {
  margin-bottom: 0.3rem;
  font-size: 1.4rem;
  max-height: 50px;
}

.nav-icon-img-02 {
  max-height: 39px;
}

.nav-item.active {
  color: var(--accent-blue-light);
}

.nav-title-with-icon {
  --nav-link-accent: var(--accent-amber);
  display: flex;
  align-items: center;
  gap: 8px;
  /* adjust spacing as needed */
  text-decoration: none;
}

.nav-link-accent-amber {
  --nav-link-accent: var(--accent-amber);
}

.nav-link-accent-blue-sky {
  --nav-link-accent: var(--accent-blue-sky);
}

.nav-link-accent-green {
  --nav-link-accent: var(--accent-green);
}

.nav-link-accent-purple {
  --nav-link-accent: var(--accent-purple-med-light);
}

.nav-link-accent-red {
  --nav-link-accent: var(--accent-red);
}

.nav-title-with-icon > .d-flex {
  display: grid !important;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
}

.nav-title-with-icon i {
  color: var(--nav-link-accent);
  margin: 0;
  padding: 0;
}

.nav-title-with-icon > .d-flex > i,
.nav-title-with-icon > .d-flex > img {
  justify-self: center;
  margin: 0 !important;
}

.nav-title-with-icon span {
  font-size: 1.55rem;
  font-weight: 500;
  min-width: 0;
  transition: color 0.2s ease;
}

.nav-title-with-icon:hover span,
.nav-title-with-icon:focus-visible span {
  color: var(--nav-link-accent);
}

@media (max-width: 390px) {
  header {
    gap: 0.5rem;
  }
  .logo {
    font-size: 1.16rem;
  }
  .nav-header-credit-counter.is-visible {
    max-width: 8.75rem;
    margin: 0 0.45rem 0 0.55rem;
    padding: 0.35rem 0.7rem;
  }
  .menu-section-label,
  .nav-title-with-icon span {
    font-size: 1.32rem;
  }
  .side-menu {
    right: -100vw;
    width: 100vw;
  }
}
/* Side menu grouping */
.menu-section {
  margin-bottom: 0.25rem;
}

.menu-section-label {
  color: var(--light-text);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.5rem;
  margin: 0.35rem 0 0.35rem 0;
}

.menu-section-label > i,
.menu-section-label > img {
  justify-self: center;
  margin: 0 !important;
}

.menu-sublist {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.25rem 0.85rem;
  /* indent */
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  /* subtle grouping line */
}

.menu-sublist > li {
  margin: 0;
}

.menu-divider {
  opacity: 0.2;
  margin: 0.75rem 0;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

/* Flash Message Container */
.flash-container {
  position: fixed;
  top: 0.9rem;
  left: 50%;
  width: calc(100% - 1.5rem);
  max-width: 720px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

/* Base Flash Message Styles */
.flash-message {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.95rem;
  align-items: center;
  padding: 1rem 1rem 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--flash-border, rgba(255, 255, 255, 0.14));
  background: linear-gradient(140deg, rgba(53, 57, 65, 0.97), rgba(28, 30, 36, 0.94));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  animation: flashFadeIn 0.35s ease-out;
  pointer-events: auto;
  overflow: hidden;
}

.flash-message::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, var(--flash-accent), var(--flash-accent-strong));
}

.flash-icon {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flash-icon-bg, rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--flash-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.flash-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flash-icon i {
  font-size: 1.35rem;
  line-height: 1;
}

/* Message Content */
.flash-content {
  min-width: 0;
  padding-right: 0.25rem;
}

.flash-label {
  display: inline-block;
  margin-bottom: 0.18rem;
  color: var(--flash-accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flash-content p {
  margin: 0;
  padding: 0.05rem 0;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.2rem);
  line-height: 1.45;
  color: var(--light-text);
}

/* Close Button Styles */
.flash-close {
  position: relative;
  z-index: 1;
  margin-left: 0.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.flash-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.flash-close:focus-visible {
  outline: 2px solid var(--flash-accent);
  outline-offset: 2px;
}

/* SVG Icon Sizing */
.close-icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.5s ease-in-out;
}

/* Default state - X visible, gear hidden */
.x-path {
  opacity: 1;
  transition: opacity 0.3s ease, stroke-dashoffset 0.5s ease;
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
}

.gear-path {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Animated state classes */
.flash-close.animating .x-path {
  opacity: 0;
  stroke-dashoffset: 20;
  transition: opacity 0.14s ease, stroke-dashoffset 0.2s ease;
}

.flash-close.animating .gear-path {
  opacity: 1;
  transition: opacity 0.12s ease 0.08s;
}

/* Spinning animation */
.flash-close.animating .close-icon {
  transform: rotate(160deg) scale(0.78);
  transition: transform 1.2s ease-in-out 0.5s;
}

/* Message Types */
.flash-error {
  --flash-accent: var(--accent-red-light);
  --flash-accent-strong: var(--accent-red-dark);
  --flash-border: rgba(255, 77, 77, 0.34);
  --flash-icon-bg: rgba(255, 77, 77, 0.14);
}

.flash-success {
  --flash-accent: var(--accent-green);
  --flash-accent-strong: var(--accent-green-dark);
  --flash-border: rgba(125, 206, 130, 0.34);
  --flash-icon-bg: rgba(125, 206, 130, 0.14);
}

.flash-warning {
  --flash-accent: var(--accent-amber-med-light);
  --flash-accent-strong: var(--accent-amber-dark);
  --flash-border: rgba(255, 184, 108, 0.34);
  --flash-icon-bg: rgba(255, 184, 108, 0.14);
}

.flash-info {
  --flash-accent: var(--accent-blue-sky);
  --flash-accent-strong: var(--accent-blue-dark);
  --flash-border: rgba(90, 152, 247, 0.34);
  --flash-icon-bg: rgba(90, 152, 247, 0.14);
}

/* Animations */
@keyframes flashFadeIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes flashFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}
/* Auto-hide animation (optional) */
.flash-autohide {
  animation: flashShow 5s forwards;
}

@keyframes flashShow {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/* Add fade-out class for closing animation */
.flash-fade-out {
  animation: flashFadeOut 0.45s ease-out forwards;
}

/* Message fading out with shrinking close button */
.flash-message.flash-fade-out .flash-close {
  transform: scale(0.72);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

/* Adjust for mobile screens */
@media (max-width: 768px) {
  .flash-container {
    top: 0.75rem;
    width: calc(100% - 1rem);
  }
  .flash-message {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.9rem 0.85rem 0.9rem 1rem;
  }
  .flash-content p {
    font-size: 1rem;
  }
}
/* Add these styles to your CSS for the alerts */
.alert-item-bg-Severe {
  background-color: #d9534f;
  color: #fff;
}

.alert-item-bg-Moderate {
  background-color: #f0ad4e;
  color: #fff;
}

.alert-item-bg-Minor {
  background-color: #dede5b;
  color: #2b2b2b;
}

.alert-item-bg-Info {
  background-color: #5bc0de;
  color: #fff;
}

.alert-item-recent-snow {
  background-color: var(--medium-gray-dark) !important;
  color: #fff !important;
}

.accordion-snow {
  background: linear-gradient(to bottom, var(--medium-gray-dark) 0%, var(--dark-gray-light) 100%) !important;
  color: #fff !important;
}

.hourly-alerts {
  background-color: var(--accent-red) !important;
  color: #fff !important;
}

.accordion-hourly-alerts {
  background: linear-gradient(to bottom, var(--accent-red) 0%, var(--accent-red-light) 100%) !important;
  color: #fff !important;
}

.alert-severity-Severe {
  color: #d9534f;
  font-weight: bold;
}

.alert-severity-Moderate {
  color: #f0ad4e;
  font-weight: bold;
}

.alert-severity-Minor {
  color: #5bc0de;
  font-weight: bold;
}

.alert-description,
.alert-instruction {
  white-space: pre-line;
  font-size: 1.3rem;
}

.accordion-button {
  padding: 0.5rem 1rem;
}

.freeze-alert-item {
  background-color: var(--info-blue);
}

.leaves-alert-item {
  background-color: var(--accent-amber-light);
}

.snow-alert-item {
  background-color: var(--medium-gray-dark);
}

.alert-item-recent-snowaccordion-button:not(.collapsed) {
  color: #fff;
}

.system-alert-nav-button {
  align-items: center;
  appearance: none;
  background: #3a2d1a;
  border: 1px solid rgba(255, 184, 108, 0.85);
  border-radius: 8px;
  color: var(--accent-amber);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  margin-right: 0.65rem;
  order: 1;
  position: relative;
  width: 34px;
}

.system-alert-nav-button:hover,
.system-alert-nav-button:focus {
  background: #4a351f;
  color: var(--accent-amber-light);
}

.system-alert-nav-badge {
  align-items: center;
  background: var(--accent-red);
  border: 1px solid var(--dark-secondary);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: 0 0.25rem;
  position: absolute;
  right: -7px;
  top: -7px;
}

.system-alert-modal {
  border: 1px solid rgba(255, 184, 108, 0.35);
}

.system-alert-modal__item {
  background: #24272c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--accent-blue-sky);
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 1rem;
}

.system-alert-modal__item:last-child {
  margin-bottom: 0;
}

.system-alert-modal__item--warning {
  border-left-color: var(--accent-amber);
}

.system-alert-modal__item--critical {
  border-left-color: var(--accent-red);
}

.system-alert-modal__item--success {
  border-left-color: var(--accent-green);
}

.system-alert-modal__item-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.system-alert-modal__item-header h3 {
  color: var(--light-text);
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.5rem 0;
}

.system-alert-modal__item-header span {
  color: var(--accent-amber);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.system-alert-modal__item p {
  color: var(--light-text);
  margin: 0;
  white-space: pre-line;
}

.system-alert-modal__dismiss {
  align-items: center;
  appearance: none;
  background: rgba(255, 184, 108, 0.09);
  border: 1px solid rgba(255, 184, 108, 0.42);
  border-radius: 8px;
  color: var(--accent-amber-light);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  justify-content: center;
  line-height: 1.1;
  margin: 1rem auto 0;
  max-width: 100%;
  min-height: 2.35rem;
  min-width: 7rem;
  padding: 0.58rem 0.85rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
  width: fit-content;
}

.system-alert-modal__dismiss:hover,
.system-alert-modal__dismiss:focus {
  background: rgba(255, 184, 108, 0.17);
  border-color: rgba(255, 184, 108, 0.62);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.system-alert-modal__dismiss:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(255, 184, 108, 0.22);
  outline: 0;
}

.system-alert-modal__dismiss:active {
  background: rgba(255, 184, 108, 0.22);
  transform: translateY(0);
}

.system-alert-modal__dismiss:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

@media (max-width: 575.98px) {
  .system-alert-modal__dismiss {
    font-size: 1rem;
    line-height: 1.2;
    padding: 0.65rem 1.1rem;
    white-space: normal;
  }
}
.system-alert-admin-severity {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
}

.system-alert-admin-severity--info {
  background: rgba(135, 206, 250, 0.18);
  color: var(--accent-blue-sky);
}

.system-alert-admin-severity--warning {
  background: rgba(255, 184, 108, 0.18);
  color: var(--accent-amber);
}

.system-alert-admin-severity--critical {
  background: rgba(255, 77, 77, 0.18);
  color: var(--accent-red-light);
}

.system-alert-admin-severity--success {
  background: rgba(125, 206, 130, 0.18);
  color: var(--accent-green);
}

.weather-api-outage-card {
  background: #24272c;
  border: 1px solid rgba(255, 184, 108, 0.35);
  border-radius: 8px;
  box-shadow: inset 4px 0 0 var(--accent-amber);
  color: var(--light-text);
  margin-bottom: 4rem;
  text-align: center;
}

.weather-api-outage-card__icon {
  color: var(--accent-amber);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.weather-api-outage-card p {
  font-size: 1.2rem;
  line-height: 1.45;
  margin: 0;
}

.bc-toast-stack {
  position: fixed;
  bottom: 125px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1085;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  pointer-events: none;
}

.bc-toast-container {
  pointer-events: auto;
}

.bc-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 320px;
  max-width: 440px;
  width: min(440px, 100vw - 24px);
  background: linear-gradient(180deg, #22252b 0%, #1a1d22 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #7c83ff;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
  overflow: hidden;
  position: relative;
  animation: bcToastIn 0.22s ease;
}

.bc-toast.is-closing {
  animation: bcToastOut 0.18s ease forwards;
}

.bc-toast-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.bc-toast-label {
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.65;
}

.bc-toast-item {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  word-break: break-word;
}

.bc-toast-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.bc-toast-undo {
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

.bc-toast-close {
  opacity: 0.72;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.bc-toast-close:hover {
  opacity: 1;
  transform: scale(1.05);
}

.bc-toast-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(124, 131, 255, 0.95);
  transform-origin: left center;
}

.bc-toast-timer.is-animating {
  animation-name: bcToastTimer;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.bc-restore-flash {
  animation: bcRestoreFlash 0.7s ease;
}

@keyframes bcToastIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes bcToastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 120px;
    margin-top: 0;
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    max-height: 0;
    margin-top: -0.25rem;
  }
}
@keyframes bcToastTimer {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes bcRestoreFlash {
  0% {
    background-color: rgba(124, 131, 255, 0);
    transform: scale(1);
  }
  30% {
    background-color: rgba(124, 131, 255, 0.18);
    transform: scale(1.01);
  }
  100% {
    background-color: rgba(124, 131, 255, 0);
    transform: scale(1);
  }
}
@media (max-width: 576px) {
  .bc-toast-stack {
    left: 12px;
    right: 12px;
    transform: none;
    align-items: stretch;
  }
  .bc-toast {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}
.bc-restore-in {
  animation: bcRestoreIn 0.22s ease;
}

@keyframes bcRestoreIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-header {
  background-color: var(--accent-blue-account);
  color: white;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.card-header h2 {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: 700;
}

.info-group {
  margin-bottom: 1rem;
}

.info-group label {
  font-weight: 600;
  margin-bottom: 0;
  /* Removes default bottom margin from labels */
  color: #555;
}

.btn-icon {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: color 0.2s;
}

.btn-icon:hover {
  color: #0056b3;
}

.action-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  /* Changed from flex-end to center */
}

.btn-round-2 {
  border-radius: 50px;
  padding: 0.5rem 1.25rem;
  background-color: #007bff;
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
  /* Added to ensure it doesn't show underlines */
}

.btn-round-2:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  color: white;
  /* Ensure text stays white on hover */
  text-decoration: none;
  /* Ensure no underline on hover */
}

.credit-value {
  font-weight: bold;
  margin-right: 0.5rem;
}

.credits-info label {
  color: #555;
}

.referral-code-container {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
}

.code-display {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

#referral-code {
  font-family: monospace;
  font-size: 1.25rem;
  letter-spacing: 1px;
  background-color: #e9ecef;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
}

.referral-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  display: block;
  font-size: var(--font-size-xxlarge);
  font-weight: bold;
  color: #007bff;
}

.stat-label {
  font-size: var(--font-size-medium);
  color: #6c757d;
}

.payment-table {
  width: 100%;
  border-collapse: collapse;
}

.payment-table th,
.payment-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
  font-size: var(--font-size-medium);
}

.payment-history-table td {
  vertical-align: middle;
}

.payment-history-package {
  font-weight: 800;
}

.payment-history-package--trail_pack {
  color: var(--accent-green);
}

.payment-history-package--adventure_pack {
  color: var(--accent-amber);
}

.payment-history-package--expedition_pack {
  color: var(--accent-blue-sky);
}

.status-completed {
  color: #28a745;
}

.status-pending {
  color: #ffc107;
}

.status-failed {
  color: #dc3545;
}

.no-records {
  text-align: center;
  padding: 2rem 0;
  color: #6c757d;
  font-size: var(--font-size-medium);
}

.no-records i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Email edit form */
#email-edit-form {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: rgba(109, 114, 195, 0.1);
}

#email-edit-form .form-group {
  display: flex;
  margin-bottom: 0.3rem;
}

#email-edit-form input[type=email] {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin: 0 auto;
  margin-bottom: 1.5rem;
}

.btn-sm {
  padding: 0.65rem 1.25rem;
  font-size: 1.75rem;
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.account-value {
  color: var(--accent-purple-dark);
}

#account-email-container.active-edit {
  background-color: rgba(109, 114, 195, 0.1);
  /* Light purple background using the accent-purple from variables.scss */
  border-left: 4px solid var(--accent-purple);
  margin: 0 0;
  padding: 15px 10px 15px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Style for the container when form is processing */
#account-email-container.processing {
  background-color: rgba(109, 114, 195, 0.2);
  border-left: 4px solid var(--accent-amber);
  position: relative;
}

/* Style for the email edit form */
#email-form-container {
  padding: 5px 0;
}

/* Style for the form container when it has content */
#email-form-container:not(:empty) {
  border-left: 4px solid var(--accent-purple);
  margin-left: 0;
}

/* Ensure the form buttons match the site's design */
#email-edit-form .btn {
  background-color: var(--accent-purple);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

#email-edit-form .btn:hover {
  background-color: var(--accent-purple-dark);
}

#email-edit-form .btn-secondary {
  background-color: var(--medium-gray);
}

#email-edit-form .btn-secondary:hover {
  background-color: var(--medium-gray-dark);
}

/* Style for the form input */
#email-edit-form input[type=email] {
  padding: 8px 12px;
  border: 1px solid var(--medium-gray);
  border-radius: 4px;
  width: 100%;
  background-color: white;
  color: var(--dark-bg);
}

#email-edit-form input[type=email]:focus {
  border-color: var(--accent-purple);
  outline: none;
  box-shadow: 0 0 0 2px rgba(109, 114, 195, 0.2);
}

#timezone-container.active-edit {
  background-color: rgba(109, 114, 195, 0.1);
  border-left: 4px solid var(--accent-purple);
  margin: 0 0;
  padding: 15px 10px 15px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Style for the timezone edit form */
#timezone-edit-form {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: rgba(109, 114, 195, 0.1);
  border-left: 4px solid var(--accent-purple);
}

#timezone-edit-form .form-group {
  display: flex;
  margin-bottom: 0.3rem;
}

/* Style for the form select */
#timezone-edit-form select {
  padding: 8px 12px;
  border: 1px solid var(--medium-gray);
  border-radius: 4px;
  width: 100%;
  background-color: white;
  color: var(--dark-bg);
}

#timezone-edit-form select:focus {
  border-color: var(--accent-purple);
  outline: none;
  box-shadow: 0 0 0 2px rgba(109, 114, 195, 0.2);
}

/* Style for the container when form is processing */
#timezone-container.processing {
  background-color: rgba(109, 114, 195, 0.2);
  border-left: 4px solid var(--accent-amber);
  position: relative;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.account-page .account-hero {
  padding-bottom: 3.6rem;
}
.account-page .hero-container {
  max-width: 72rem;
}
.account-page .account-hero__content {
  max-width: 40rem;
  margin: 0 auto;
}
.account-page .account-hero__icon {
  width: 7rem;
  max-width: 42vw;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.16));
}
.account-page .account-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fbff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.account-page .account-hero h1 {
  margin-top: 1.15rem;
  margin-bottom: 0.85rem;
}
.account-page .account-hero__lede {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.9);
}
.account-page .account-hero__actions {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
}
.account-page .account-dashboard {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1rem 1rem 1.5rem;
  margin-top: -1.25rem;
  position: relative;
  z-index: 2;
}
.account-page .account-card--wide,
.account-page .account-summary-strip {
  grid-column: 1/-1;
}
.account-page .account-summary-strip {
  border: 1px solid rgba(0, 123, 255, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.account-page .account-summary-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.account-page .account-summary-strip__item {
  padding: 0.9rem 0.95rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  border: 1px solid rgba(0, 123, 255, 0.08);
  text-align: left;
}
.account-page .account-summary-strip__label,
.account-page .account-detail-label {
  display: block;
  font-size: var(--font-size-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
}
.account-page .account-summary-strip__value {
  display: block;
  margin-top: 0.4rem;
  color: #13233a;
  font-size: var(--font-size-large);
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}
.account-page .account-card-intro {
  color: #566274;
  margin-bottom: 1rem;
  font-size: var(--font-size-large);
  line-height: 1.5;
}
.account-page .account-detail-list {
  display: grid;
  gap: 0.8rem;
}
.account-page .account-detail-row {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  background: #f8fbff;
  border: 1px solid rgba(0, 123, 255, 0.08);
  border-radius: 1rem;
}
.account-page .account-detail-row--actionable {
  display: block;
}
.account-page .account-detail-content {
  min-width: 0;
}
.account-page .account-detail-value-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0.75rem;
}
.account-page .account-detail-value-wrap {
  flex: 1 1 12rem;
  min-width: min(100%, 10rem);
}
.account-page .account-detail-value {
  margin-top: 0.25rem;
  font-weight: 600;
  color: #162338;
  word-break: break-word;
  font-size: var(--font-size-large);
  line-height: 1.4;
}
.account-page .account-detail-copy-status {
  display: block;
  min-height: 1.2rem;
  margin-top: 0.15rem;
  color: #198754;
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.2;
}
.account-page .account-detail-copy-status.is-copy-error {
  color: #dc3545;
}
.account-page .account-detail-actions {
  display: flex;
  justify-content: flex-start;
}
.account-page .account-detail-row--actionable .account-detail-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
  padding-top: 0.25rem;
}
.account-page .btn-icon {
  width: 3.6rem;
  height: 3.6rem;
  margin-left: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 123, 255, 0.08);
  border: 1px solid rgba(0, 123, 255, 0.12);
  font-size: 1.35rem;
}
.account-page .btn-icon:hover {
  background: rgba(0, 123, 255, 0.14);
}
.account-page .btn-icon.is-copied {
  color: #198754;
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.24);
}
.account-page .btn-icon.is-copy-error {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.24);
}
.account-page .account-credit-counter {
  position: static;
  right: auto;
  z-index: auto;
  width: fit-content;
  margin-top: 0.2rem;
  background-color: var(--accent-purple);
  color: var(--light-text);
}
.account-page .account-summary-strip__item .account-credit-counter,
.account-page .stat-item .account-credit-counter {
  margin-left: auto;
  margin-right: auto;
}
.account-page .stat-item .account-credit-counter {
  margin-bottom: 0.45rem;
}
.account-page .account-summary-strip__item .account-credit-counter {
  margin-left: 0;
  margin-right: 0;
}
.account-page .account-detail-value .account-credit-counter {
  margin-left: 0;
  margin-right: 0;
}
.account-page .account-credit-counter span {
  font-size: var(--font-size-large);
  margin-right: 0.45rem;
}
.account-page .account-credit-counter .credit-icon {
  font-size: 1.2rem;
}
.account-page .account-note {
  background: #fff9ed;
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #6a4f1f;
  border-radius: 1rem;
  padding: 0.95rem 1rem;
  margin-top: 1rem;
  font-size: var(--font-size-large);
  line-height: 1.5;
}
.account-page .account-note i {
  color: var(--accent-amber);
}
.account-page .account-danger-card {
  border: 1px solid rgba(194, 45, 45, 0.18);
  box-shadow: 0 10px 30px rgba(194, 45, 45, 0.08);
}
.account-page .account-danger-card .card-header {
  background: var(--accent-red-dark);
}
.account-page .account-delete-standalone {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 1.25rem;
}
.account-page.account-delete-confirm-page .account-dashboard {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
}
.account-page .account-delete-warning {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 77, 77, 0.08);
  border: 1px solid rgba(194, 45, 45, 0.22);
  color: #641d1d;
}
.account-page .account-delete-warning i {
  color: var(--accent-red-dark);
  font-size: 1.55rem;
  margin-top: 0.15rem;
}
.account-page .account-delete-warning h3 {
  font-size: var(--font-size-xlarge);
  line-height: 1.25;
  margin-bottom: 0.45rem;
  color: #641d1d;
}
.account-page .account-delete-warning p {
  margin-bottom: 0;
  font-size: var(--font-size-large);
  line-height: 1.5;
}
.account-page .account-delete-warning-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.75rem 0;
  padding-left: 1.2rem;
  font-size: var(--font-size-large);
  line-height: 1.45;
}
.account-page .account-delete-warning-list li::marker {
  color: var(--accent-red-dark);
}
.account-page .account-delete-summary {
  margin-top: 1rem;
}
.account-page .account-delete-final-form {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
}
.account-page .account-delete-cancel-actions {
  margin-top: 0.8rem;
}
.account-page .account-actions-grid,
.account-page .action-buttons {
  display: grid;
  gap: 0.75rem;
  justify-content: stretch;
  margin-top: 1.25rem;
}
.account-page .account-actions-grid > *,
.account-page .account-hero__actions > * {
  width: 100%;
  justify-content: center;
}
.account-page .btn-round-ghost {
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  background-color: #ffffff;
  color: var(--accent-blue-account);
  border: 1px solid rgba(0, 123, 255, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-size-large);
  transition: all 0.25s ease;
}
.account-page .btn-round-ghost:hover {
  color: var(--accent-blue-account);
  border-color: rgba(0, 123, 255, 0.4);
  background: #f7fbff;
  text-decoration: none;
}
.account-page .account-table-note,
.account-page .unit-preferences-footnote {
  color: #5b6473;
  font-size: var(--font-size-large);
  line-height: 1.5;
}
.account-page .payment-history-table,
.account-page .payment-history-table thead,
.account-page .payment-history-table tbody,
.account-page .payment-history-table tr,
.account-page .payment-history-table td {
  display: block;
  width: 100%;
}
.account-page .payment-history-table thead {
  display: none;
}
.account-page .payment-history-table {
  border-collapse: separate;
  border-spacing: 0;
}
.account-page .payment-history-table tr {
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  border: 1px solid rgba(0, 123, 255, 0.16);
  border-left: 4px solid var(--accent-blue-account);
  border-radius: 1rem;
  padding: 0.45rem 0;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 35, 60, 0.08);
}
.account-page .payment-history-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  margin-top: 0.25rem;
}
.account-page .payment-history-accordion__item {
  border: 0;
  background: transparent;
}
.account-page .payment-history-accordion__button {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(0, 123, 255, 0.16);
  border-radius: 1rem !important;
  background: #f7fbff;
  color: #162338;
  font-size: var(--font-size-large);
  font-weight: 800;
  box-shadow: none;
}
.account-page .payment-history-accordion__button:not(.collapsed) {
  background: #eef6ff;
  color: #162338;
  box-shadow: none;
}
.account-page .payment-history-accordion__button > span:first-child {
  flex: 1 1 auto;
}
.account-page .payment-history-accordion__button::after {
  margin-left: 0;
}
.account-page .payment-history-accordion__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--accent-blue-account);
  color: #ffffff;
  font-size: var(--font-size-small);
  line-height: 1;
}
.account-page .payment-history-accordion__body {
  padding: 1rem 0 0;
}
.account-page .payment-history-table--accordion {
  margin-bottom: 0;
}
.account-page .payment-history-table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(0, 123, 255, 0.08);
  color: #162338;
  font-size: var(--font-size-large);
  line-height: 1.35;
}
.account-page .payment-history-table td:first-child {
  background: rgba(0, 123, 255, 0.05);
  font-weight: 700;
}
.account-page .payment-history-table td[data-label=Package] {
  font-weight: 800;
}
.account-page .payment-history-table td[data-label=Credits],
.account-page .payment-history-table td[data-label=Amount] {
  font-weight: 700;
}
.account-page .payment-history-table td[data-label=Summary] {
  font-weight: 700;
}
.account-page .payment-history-table td:last-child {
  border-bottom: 0;
}
.account-page .payment-history-table td::before {
  content: attr(data-label);
  flex: 0 0 auto;
  color: #6b7280;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--font-size-small);
}
.account-page .payment-history-table td > span[class^=status-] {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  background: rgba(40, 167, 69, 0.1);
  font-weight: 800;
  text-transform: capitalize;
}
.account-page .payment-history-summary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  background: rgba(0, 123, 255, 0.1);
  color: var(--accent-blue-account);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.account-page .payment-history-summary-link:hover {
  background: rgba(0, 123, 255, 0.16);
  color: var(--accent-blue-account);
  text-decoration: none;
}
.account-page.order-summary-page .account-summary-strip__grid {
  grid-template-columns: minmax(0, 1fr);
}
.account-page .order-summary-status,
.account-page .order-summary-package {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}
.account-page .order-summary-status {
  margin-top: 0.45rem;
  background: rgba(0, 123, 255, 0.1);
  color: #0f4c81;
}
.account-page .order-summary-status--succeeded {
  background: rgba(25, 135, 84, 0.12);
  color: #0f6848;
}
.account-page .order-summary-status--pending {
  background: rgba(245, 158, 11, 0.14);
  color: #7a4f07;
}
.account-page .order-summary-status--failed,
.account-page .order-summary-status--canceled,
.account-page .order-summary-status--incomplete {
  background: rgba(220, 53, 69, 0.1);
  color: #9d2734;
}
.account-page .order-summary-status--refunded,
.account-page .order-summary-status--partially_refunded {
  background: rgba(109, 114, 195, 0.12);
  color: var(--accent-purple);
}
.account-page .order-summary-package {
  background: #eef6ff;
  color: #162338;
  border: 1px solid rgba(0, 123, 255, 0.1);
}
.account-page .order-summary-lines {
  display: grid;
  gap: 0.75rem;
}
.account-page .order-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  background: #f8fbff;
  border: 1px solid rgba(0, 123, 255, 0.08);
  border-radius: 1rem;
  color: #162338;
  font-size: var(--font-size-large);
}
.account-page .order-summary-line span {
  color: #566274;
}
.account-page .order-summary-line strong {
  text-align: right;
}
.account-page .order-summary-line--total {
  background: linear-gradient(180deg, #ffffff, #eef6ff);
  border-color: rgba(0, 123, 255, 0.18);
  font-weight: 800;
}
.account-page .order-summary-line--total span,
.account-page .order-summary-line--total strong {
  color: #13233a;
  font-size: var(--font-size-xlarge);
}
.account-page .order-summary-note {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}
.account-page .receipt-page__dashboard {
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
}
.account-page .receipt-page__print-button {
  background-color: var(--accent-blue-account);
  color: #ffffff;
}
.account-page .receipt-page__print-button:hover, .account-page .receipt-page__print-button:focus {
  background-color: #0056b3;
  color: #ffffff;
}
.account-page .receipt-page__header {
  display: grid;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0, 123, 255, 0.12);
}
.account-page .receipt-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 100%;
  margin-bottom: 0.7rem;
}
.account-page .receipt-page__logo {
  width: 3.9rem;
  height: 3.9rem;
  display: block;
  flex: 0 0 auto;
}
.account-page .receipt-page__brand h2 {
  color: var(--accent-green);
  margin-bottom: 0;
  line-height: 1.1;
}
.account-page .receipt-page__header p,
.account-page .receipt-page__subtext,
.account-page .receipt-page__footer {
  color: #5b6473;
  font-size: var(--font-size-large);
  line-height: 1.45;
}
.account-page .receipt-page__meta {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 0.95rem 1rem;
  background: #f8fbff;
  border: 1px solid rgba(0, 123, 255, 0.08);
  border-radius: 1rem;
}
.account-page .receipt-page__meta strong {
  color: #13233a;
  font-size: var(--font-size-xxlarge);
  line-height: 1.1;
}
.account-page .receipt-page__bill-grid {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}
.account-page .receipt-page__table-wrap {
  margin-top: 1.2rem;
  overflow-x: auto;
}
.account-page .receipt-page__table {
  width: 100%;
  border-collapse: collapse;
  color: #162338;
  font-size: var(--font-size-large);
}
.account-page .receipt-page__table th,
.account-page .receipt-page__table td {
  padding: 0.95rem 0.75rem;
  border-bottom: 1px solid rgba(0, 123, 255, 0.1);
  vertical-align: top;
}
.account-page .receipt-page__table th {
  color: #6b7280;
  font-size: var(--font-size-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
}
.account-page .receipt-page__table td:nth-child(2),
.account-page .receipt-page__table td:nth-child(3),
.account-page .receipt-page__table th:nth-child(2),
.account-page .receipt-page__table th:nth-child(3) {
  text-align: right;
  white-space: nowrap;
}
.account-page .receipt-page__table td span {
  display: block;
  color: #5b6473;
  margin-top: 0.25rem;
}
@media (max-width: 575.98px) {
  .account-page .receipt-page__table-wrap {
    overflow-x: visible;
  }
  .account-page .receipt-page__table {
    border-collapse: separate;
    border-spacing: 0;
  }
  .account-page .receipt-page__table thead {
    display: none;
  }
  .account-page .receipt-page__table,
  .account-page .receipt-page__table tbody,
  .account-page .receipt-page__table tr,
  .account-page .receipt-page__table td {
    display: block;
    width: 100%;
  }
  .account-page .receipt-page__table tr {
    overflow: hidden;
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 1rem;
    background: #ffffff;
  }
  .account-page .receipt-page__table td {
    padding: 0.85rem 0.9rem;
    text-align: left;
    white-space: normal;
  }
  .account-page .receipt-page__table td:nth-child(2),
  .account-page .receipt-page__table td:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    white-space: normal;
  }
  .account-page .receipt-page__table td:nth-child(2)::before,
  .account-page .receipt-page__table td:nth-child(3)::before {
    content: attr(data-label);
    color: #6b7280;
    font-size: var(--font-size-medium);
    font-weight: 800;
    text-transform: uppercase;
  }
  .account-page .receipt-page__table td:first-child strong {
    display: block;
    font-size: var(--font-size-xlarge);
    line-height: 1.2;
  }
  .account-page .receipt-page__table td span {
    line-height: 1.45;
    margin-top: 0.4rem;
  }
  .account-page .receipt-page__table td:last-child {
    border-bottom: 0;
  }
}
.account-page .receipt-page__totals {
  display: grid;
  gap: 0.75rem;
  max-width: 26rem;
  margin: 1.2rem 0 0 auto;
}
.account-page .receipt-page__footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 123, 255, 0.12);
}
.account-page .receipt-page__contact-link {
  color: var(--accent-blue-account);
  font-weight: 800;
  text-decoration: none;
}
.account-page .receipt-page__contact-link:hover, .account-page .receipt-page__contact-link:focus {
  color: #0056b3;
  text-decoration: underline;
}
.account-page .account-unit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.account-page .account-unit-card {
  padding: 0.95rem 0.75rem;
  border-radius: 1rem;
  background: #f8fbff;
  border: 1px solid rgba(0, 123, 255, 0.08);
}
.account-page .account-unit-card--full {
  grid-column: 1/-1;
}
.account-page .account-unit-card .stat-item {
  text-align: left;
}
.account-page .account-unit-card .stat-value {
  font-size: var(--font-size-xxlarge);
  line-height: 1.1;
}
.account-page .account-unit-card .stat-value--compact {
  font-size: var(--font-size-xlarge);
  overflow-wrap: anywhere;
}
.account-page .stat-row {
  flex-direction: column;
}

.account-delete-request-btn,
.account-delete-final-btn,
.account-delete-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  background: var(--accent-red);
  color: #ffffff;
  font-weight: 800;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.account-delete-request-btn:hover,
.account-delete-request-btn:focus,
.account-delete-final-btn:hover,
.account-delete-final-btn:focus,
.account-delete-modal-btn:hover,
.account-delete-modal-btn:focus {
  background: var(--accent-red-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(194, 45, 45, 0.2);
}

.account-delete-request-btn:disabled,
.account-delete-final-btn:disabled,
.account-delete-modal-btn:disabled {
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.account-delete-modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f4f7fb;
  line-height: 1.45;
}

.account-delete-modal-warning i {
  color: #63b3ff;
  margin-top: 0.2rem;
}

@media (min-width: 768px) {
  .account-page .account-hero {
    padding-bottom: 4.5rem;
  }
  .account-page .account-hero__actions {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
  }
  .account-page .account-dashboard {
    padding: 1.5rem;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -1.75rem;
  }
  .account-page .account-summary-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .account-page.order-summary-page .account-summary-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .account-page .receipt-page__header,
  .account-page .receipt-page__bill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-page .account-detail-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .account-page .account-detail-actions {
    justify-content: flex-end;
    align-items: center;
  }
  .account-page .account-actions-grid,
  .account-page .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .account-page .account-actions-grid > *,
  .account-page .account-hero__actions > * {
    width: auto;
  }
  .account-page .account-unit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .account-page .account-unit-card--full {
    grid-column: auto;
  }
  .account-page .stat-row {
    flex-direction: row;
  }
}
@media print {
  body.receipt-print-page {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }
  body.receipt-print-page main {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }
  body.receipt-print-page > header,
  body.receipt-print-page > .side-menu,
  body.receipt-print-page > .overlay,
  body.receipt-print-page > .bottom-nav,
  body.receipt-print-page > .modal {
    display: none !important;
  }
  .receipt-page {
    color: #111827;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    break-after: avoid;
    page-break-after: avoid;
  }
  .receipt-page .account-hero,
  .receipt-page .receipt-page__screen-actions,
  .receipt-page .receipt-page__footer,
  .receipt-page .modal {
    display: none !important;
  }
  .receipt-page .receipt-page__dashboard {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .receipt-page .receipt-card,
  .receipt-page .receipt-page__dashboard {
    break-after: avoid;
    break-inside: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  .receipt-page .dashboard-card,
  .receipt-page .account-detail-row,
  .receipt-page .receipt-page__meta,
  .receipt-page .order-summary-line {
    box-shadow: none !important;
    border-color: #d1d5db !important;
    background: #ffffff !important;
  }
  .receipt-page .receipt-card {
    border: 0;
  }
  .receipt-page .card-body {
    padding: 0 !important;
  }
}
.usage-info {
  margin-top: 1.5rem;
}

.section-title {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--accent-purple);
  margin-bottom: 0.5rem;
}

.progress-container {
  margin-bottom: 1rem;
}

.progress-container label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--font-size-medium);
  color: var(--medium-gray);
}

.stats-progress {
  height: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
  width: 100%;
  /* Ensure this is set to full width */
  position: relative;
  /* Add positioning context */
}

.stats-progress-fill {
  height: 100%;
  /* Fill the height of the container */
  background-color: var(--accent-purple);
  position: absolute;
  /* Position absolutely within container */
  top: 0;
  left: 0;
  transition: width 0.3s ease;
  /* Add smooth transition */
}

.milestone-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.milestone-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: var(--font-size-medium);
}

.milestone-list li i {
  color: var(--accent-amber);
  margin-right: 0.75rem;
  font-size: 1rem;
}

.login-verification-page__card {
  max-width: 34rem;
}
.login-verification-page__container {
  display: grid;
  gap: 1.35rem;
}
.login-verification-page__brand {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  margin-bottom: 0 !important;
}
.login-verification-page__logo {
  width: 5.25rem;
  height: 5.25rem;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}
.login-verification-page__site-name {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #7dce82;
  text-transform: uppercase;
}
.login-verification-page__title {
  margin-bottom: 0;
}
.login-verification-page__intro {
  max-width: 24rem;
  margin-bottom: 0;
  text-align: center;
  color: #f1f4f7;
  line-height: 1.55;
}
.login-verification-page__intro--secondary {
  margin-top: -0.2rem;
}
.login-verification-page__panel {
  display: grid;
  gap: 1rem;
}
.login-verification-page__lede {
  font-size: var(--font-size-large);
  color: #d5dee8;
  text-align: center;
}
.login-verification-page__lede--inactive {
  margin-bottom: 0.1rem;
}
.login-verification-page__lede--active {
  margin-bottom: 0.1rem;
}
.login-verification-page__email {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 800;
  color: #ffffff;
  word-break: break-word;
  text-align: center;
}
.login-verification-page__email--inactive {
  margin-top: 0;
}
.login-verification-page__email--active {
  margin-top: 0;
}
.login-verification-page__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  color: #d9e2ea;
  font-weight: 600;
}
.login-verification-page__meta .is-expired {
  color: #ff9f8f;
}
.login-verification-page__form {
  display: grid;
  gap: 1.25rem;
}
.login-verification-page__form--hidden {
  display: none;
}
.login-verification-page__inline-error {
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 128, 128, 0.4);
  background: rgba(194, 45, 45, 0.14);
  color: #ffd6d6;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.login-verification-page__digit-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}
.login-verification-page__digit {
  width: 100%;
  min-height: 4rem;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.95rem;
  background-color: rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--accent-green-dark);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.login-verification-page__digit.is-error {
  color: var(--accent-red-dark);
}
.login-verification-page__digit:focus {
  outline: none;
  border-color: #f4a940;
  box-shadow: 0 0 0 4px rgba(244, 169, 64, 0.2);
  transform: translateY(-1px);
}
.login-verification-page__submit {
  width: 100%;
}
.login-verification-page__actions {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-top: 0.5rem;
}
.login-verification-page__link-button, .login-verification-page__link {
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 700;
  color: #ffb86c;
  text-decoration: none;
  cursor: pointer;
}
.login-verification-page__link-button--primary {
  min-width: min(100%, 18rem);
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f4a940, #ff8c42);
  color: #1f2833;
  box-shadow: 0 14px 28px rgba(244, 169, 64, 0.28);
  text-decoration: none;
}
.login-verification-page__link-button:hover, .login-verification-page__link-button:focus, .login-verification-page__link {
  font-weight: 700;
  color: #ffb86c;
  text-decoration: none;
}
.login-verification-page__link-button:hover, .login-verification-page__link-button:focus, .login-verification-page__link:hover, .login-verification-page__link:focus {
  text-decoration: underline;
}
.login-verification-page__link-button--primary:hover, .login-verification-page__link-button--primary:focus {
  color: #1f2833;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(244, 169, 64, 0.34);
}

@media (max-width: 640px) {
  .login-verification-page__digit-row {
    gap: 0.45rem;
  }
  .login-verification-page__digit {
    min-height: 3.4rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
  }
  .login-verification-page__meta {
    font-size: var(--font-size-medium);
  }
}
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

/* auto-fit images on all screens */
img.img-fluid {
  object-fit: cover;
}

.image-container-01 {
  width: 100%;
  max-width: 800px;
  height: auto;
}

.measurement-img {
  max-height: 210px;
}

:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.support-history-page .support-summary {
  font-size: var(--font-size-large);
  line-height: 1.5;
}
.support-history-page .support-history-meta {
  font-size: var(--font-size-medium);
  line-height: 1.45;
}
.support-history-page .support-history-ticket-raw {
  font-size: var(--font-size-medium);
}
.support-history-page .support-history-empty-icon {
  font-size: 3rem;
}

.support-tickets-index-page .pt-4 {
  padding-top: 1rem !important;
}
.support-tickets-index-page__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 32rem;
  margin-inline: auto;
  text-align: center;
}
.support-tickets-index-page__hero-icon {
  line-height: 1;
}
.support-tickets-index-page__hero-copy {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
}
.support-tickets-index-page h1 {
  font-size: clamp(2rem, 8vw, 2.5rem);
  line-height: 1.05;
}
.support-tickets-index-page__hero-text {
  max-width: 24rem;
  font-size: var(--font-size-large);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.support-tickets-index-page__actions {
  flex-direction: column;
}
.support-tickets-index-page .card-weather {
  padding: 1rem !important;
}
.support-tickets-index-page .card-body {
  padding: 1rem;
}
.support-tickets-index-page .font-size-xxxlarge {
  line-height: 1;
}
.support-tickets-index-page__results {
  background: linear-gradient(180deg, rgba(34, 36, 43, 0.96), rgba(25, 26, 32, 0.98));
  border: 1px solid rgba(134, 141, 168, 0.28);
}
.support-tickets-index-page__ticket-card {
  background: linear-gradient(180deg, rgba(41, 44, 53, 0.98), rgba(30, 32, 39, 0.98));
  border: 1px solid rgba(118, 126, 151, 0.28);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.support-tickets-index-page__ticket-card.support-ticket-audience--guest {
  background: linear-gradient(180deg, rgba(59, 48, 33, 0.98), rgba(40, 34, 28, 0.98));
  border-color: rgba(226, 157, 64, 0.38);
}
.support-tickets-index-page__ticket-card.support-ticket-audience--registered-unpaid {
  background: linear-gradient(180deg, rgba(34, 45, 62, 0.98), rgba(27, 35, 49, 0.98));
  border-color: rgba(105, 154, 235, 0.36);
}
.support-tickets-index-page__ticket-topic, .support-tickets-index-page__ticket-copy .opacity-75, .support-tickets-index-page__ticket-user .opacity-75, .support-tickets-index-page__ticket-footer .opacity-75 {
  color: rgba(230, 233, 244, 0.68) !important;
}
.support-tickets-index-page__ticket-copy {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.support-tickets-index-page__ticket-user {
  padding-top: 0.1rem;
}
.support-tickets-index-page__ticket-account a, .support-tickets-index-page__table a {
  color: #9cbcff;
}
.support-tickets-index-page__ticket-footer {
  flex-wrap: wrap;
  padding-top: 0.35rem;
}
.support-tickets-index-page__ticket-dates {
  min-width: 0;
  flex: 1 1 12rem;
}
.support-tickets-index-page__ticket-date {
  color: #fff;
  font-weight: 600;
}
.support-tickets-index-page__open-btn {
  border-color: rgba(140, 160, 255, 0.5);
  color: #dfe5ff;
  background: rgba(107, 114, 218, 0.16);
}
.support-tickets-index-page__open-btn:hover, .support-tickets-index-page__open-btn:focus {
  background: rgba(121, 129, 235, 0.28);
  border-color: rgba(155, 173, 255, 0.8);
  color: #fff;
}
.support-tickets-index-page__ticket-actions, .support-tickets-index-page__row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.support-tickets-index-page__delete-btn {
  border-color: rgba(255, 112, 112, 0.5);
  color: #ffd6d6;
  background: rgba(190, 50, 50, 0.14);
}
.support-tickets-index-page__delete-btn:hover, .support-tickets-index-page__delete-btn:focus {
  background: rgba(218, 62, 62, 0.26);
  border-color: rgba(255, 134, 134, 0.82);
  color: #fff;
}
.support-tickets-index-page__table-wrap {
  border-radius: 1rem;
  overflow: hidden;
}
.support-tickets-index-page__table {
  margin-bottom: 0;
  color: #f7f8fc;
  --bs-table-bg: transparent;
  --bs-table-color: #f7f8fc;
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(120, 133, 255, 0.08);
}
.support-tickets-index-page__table thead th {
  border-bottom-width: 1px;
  padding: 1rem 0.9rem;
  font-size: var(--font-size-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(230, 233, 244, 0.72);
}
.support-tickets-index-page__table tbody td {
  padding: 1rem 0.9rem;
  vertical-align: middle;
}
.support-tickets-index-page__table tbody tr {
  transition: background-color 0.2s ease;
}
.support-tickets-index-page__table tbody tr.support-ticket-audience--guest {
  --bs-table-bg: rgba(143, 96, 32, 0.2);
  --bs-table-accent-bg: rgba(143, 96, 32, 0.2);
  --bs-table-hover-bg: rgba(143, 96, 32, 0.28);
}
.support-tickets-index-page__table tbody tr.support-ticket-audience--registered-unpaid {
  --bs-table-bg: rgba(57, 104, 183, 0.18);
  --bs-table-accent-bg: rgba(57, 104, 183, 0.18);
  --bs-table-hover-bg: rgba(57, 104, 183, 0.26);
}
.support-tickets-index-page__table-subtext {
  color: rgba(230, 233, 244, 0.6);
}

.support-ticket-page__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.support-ticket-page__hero-icon {
  line-height: 1;
}
.support-ticket-page__hero-copy {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}
.support-ticket-page__hero-text {
  max-width: 26rem;
}
.support-ticket-page .support-ticket-status-panel {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  border: 1px solid rgba(0, 123, 255, 0.08);
}
.support-ticket-page .support-ticket-status-panel__badge {
  display: flex;
  justify-content: flex-start;
}
.support-ticket-page .support-ticket-status-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--font-size-large);
  line-height: 1.4;
  background: transparent !important;
  animation: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.support-ticket-page .support-ticket-status-line__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--medium-gray-dark);
}
.support-ticket-page .support-ticket-status-line__value {
  font-size: var(--font-size-xlarge);
  font-weight: 800;
}
.support-ticket-page .support-ticket-status-line.status-open .support-ticket-status-line__value {
  color: var(--accent-purple-dark);
}
.support-ticket-page .support-ticket-status-line.status-pending .support-ticket-status-line__value {
  color: var(--accent-amber-dark);
}
.support-ticket-page .support-ticket-status-line.status-resolved .support-ticket-status-line__value {
  color: var(--accent-green-dark-02);
}
.support-ticket-page .support-ticket-status-line.status-closed .support-ticket-status-line__value {
  color: var(--dark-gray);
}
.support-ticket-page .support-ticket-status-panel__title {
  font-size: var(--font-size-xlarge);
  font-weight: 700;
  color: var(--accent-blue-account);
  margin-bottom: 0.5rem;
}
.support-ticket-page .support-ticket-status-panel__text {
  font-size: var(--font-size-large);
  line-height: 1.5;
  color: var(--dark-gray);
}
.support-ticket-page .support-ticket-meta-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}
.support-ticket-page .support-ticket-meta-card {
  padding: 1rem;
  border-radius: 1rem;
  background: #edf4ff;
  border: 1px solid rgba(0, 123, 255, 0.08);
  font-size: var(--font-size-large);
  line-height: 1.45;
  color: var(--dark-gray);
}
.support-ticket-page .support-ticket-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.support-ticket-page .support-ticket-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(0, 123, 255, 0.18);
  background: #fff;
  color: var(--accent-blue-account);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: var(--font-size-medium);
  font-weight: 700;
  line-height: 1;
  transition: all 0.2s ease;
}
.support-ticket-page .support-ticket-copy-btn:hover {
  background: #f8fbff;
  border-color: rgba(0, 123, 255, 0.32);
}
.support-ticket-page .support-ticket-copy-btn.is-copied {
  color: var(--accent-green-dark-02);
  border-color: rgba(96, 169, 94, 0.35);
}
.support-ticket-page .support-ticket-meta-card--full {
  grid-column: 1/-1;
}
.support-ticket-page .support-ticket-meta-label {
  font-size: var(--font-size-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--medium-gray-dark);
  margin-bottom: 0.35rem;
  font-weight: 700;
}
.support-ticket-page .support-ticket-message {
  padding: 1.1rem 1.15rem;
  border-radius: 1rem;
  background: #fffdf8;
  border: 1px solid rgba(255, 184, 108, 0.3);
}
.support-ticket-page .support-ticket-message__title {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--accent-blue-account);
  margin-bottom: 0.75rem;
}
.support-ticket-page .support-ticket-message__body {
  font-size: var(--font-size-large);
  line-height: 1.5;
  color: var(--dark-gray);
  white-space: pre-wrap;
  word-break: break-word;
}
.support-ticket-page .ticket-reply-entry {
  position: relative;
  overflow: hidden;
}
.support-ticket-page .ticket-reply-entry__header {
  margin-bottom: 1rem;
}
.support-ticket-page .ticket-reply-entry__email {
  margin-bottom: 0;
}
.support-ticket-page .ticket-reply-status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.15rem 0.75rem 1.1rem;
  border-radius: 0 0 0 1.1rem;
  font-size: var(--font-size-large);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  text-transform: capitalize;
}
.support-ticket-page .ticket-reply-status-label__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}
.support-ticket-page .ticket-reply-entry__meta {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}
.support-ticket-page .ticket-reply-entry__date {
  margin-bottom: 0;
  line-height: 1.1;
  text-align: right;
}
.support-ticket-page .support-ticket-internal-notes {
  border-color: rgba(0, 123, 255, 0.12) !important;
}
.support-ticket-page .support-ticket-internal-notes__journal {
  display: grid;
  gap: 0.9rem;
}
.support-ticket-page .support-ticket-note-entry {
  background: #f7fbff;
  border-color: rgba(0, 123, 255, 0.14);
}
.support-ticket-page .support-ticket-note-entry__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.support-ticket-page .support-ticket-note-entry__dates {
  display: grid;
  gap: 0.25rem;
}
.support-ticket-page .support-ticket-note-entry__editor {
  border-top: 1px solid rgba(0, 123, 255, 0.12);
  padding-top: 0.85rem;
}
.support-ticket-page .support-ticket-note-entry__editor summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-blue-account);
  list-style: none;
}
.support-ticket-page .support-ticket-note-entry__editor summary::-webkit-details-marker {
  display: none;
}
.support-ticket-page .support-ticket-note-entry__editor summary::before {
  content: "+";
  display: inline-block;
  margin-right: 0.45rem;
  font-weight: 800;
}
.support-ticket-page .support-ticket-note-entry__editor[open] summary::before {
  content: "-";
}
.support-ticket-page .action-buttons {
  justify-content: center !important;
}

.support-ticket-body {
  margin: 0 1rem;
  font-size: var(--font-size-medium);
  line-height: 1.5;
}

.support-td {
  border: 2px solid rgba(62, 62, 62, 0.3);
}

.support-ticket-num {
  font-size: var(--font-size-large);
  word-break: break-word;
}

.support-ticket-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Badge */
.support-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.75em 0.95em;
  font-size: var(--font-size-medium);
  font-weight: 600;
  border-radius: 8px;
  text-transform: capitalize;
  color: #fff;
  letter-spacing: 0.3px;
}

.support-status-link {
  text-decoration: none;
}

.support-status-link:hover {
  text-decoration: none;
  color: #fff;
  filter: brightness(1.05);
}

/* Tiny dot icon */
.status-icon {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  display: inline-block;
  background-color: #fff; /* white center so it shows up */
  border: 2px solid transparent; /* color set per status below */
}

/* Open – new ticket */
.status-open {
  background-color: var(--accent-purple);
  animation: statusPulse 1.6s ease-in-out infinite;
}

.status-icon-open {
  border-color: var(--accent-purple);
}

/* Pending – waiting for user or in progress */
.status-pending {
  background-color: var(--accent-amber-dark) !important;
}

.status-icon-pending {
  border-color: var(--accent-amber);
}

/* Resolved – support solved the issue */
.status-resolved {
  background-color: var(--accent-green) !important;
}

.status-icon-resolved {
  border-color: var(--accent-green);
}

/* Closed – archived & locked */
.status-closed {
  background-color: var(--medium-gray-dark) !important;
}

.status-icon-closed {
  border-color: var(--medium-gray-dark);
}

/* Soft pulse for OPEN badges */
@keyframes statusPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(171, 126, 255, 0.45);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(0, 123, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}
@media (min-width: 768px) {
  .support-tickets-index-page .pt-4 {
    padding-top: 1.5rem !important;
  }
  .support-tickets-index-page__hero {
    gap: 1rem;
  }
  .support-tickets-index-page__actions {
    flex-direction: row;
  }
  .support-ticket-page .action-buttons {
    justify-content: space-between !important;
  }
  .support-ticket-page .support-ticket-status-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .support-ticket-page .support-ticket-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .support-ticket-page .support-ticket-note-entry__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .support-ticket-page .support-ticket-note-entry__dates {
    text-align: right;
  }
}
@media (max-width: 575.98px) {
  .support-tickets-index-page__actions .btn {
    width: 100%;
  }
  .support-ticket-page .ticket-reply-entry {
    padding-top: 4.9rem;
  }
  .support-ticket-page .ticket-reply-entry__header {
    gap: 0.85rem;
  }
}
.accordion-results {
  max-width: 800px;
  margin: 0 auto;
}

/* ride_checklist.scss */
.add-common-items-label {
  margin-bottom: -15px;
}

.ride-checklist-page {
  color: var(--light-text);
  padding-bottom: 6rem;
}

/* Back link */
.rc-back-link {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.rc-back-link-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-xlarge);
  color: var(--accent-amber);
}

.rc-back-link-inner i {
  font-size: 1rem;
}

/* Alert */
.rc-alert {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: var(--font-size-xlarge);
}

.rc-alert-error {
  background-color: rgba(194, 45, 45, 0.18);
  border: 1px solid var(--accent-red-dark);
  color: var(--accent-red-light);
}

/* Form layout */
.ride-checklist-form {
  margin-top: 1rem;
}

/* Sections */
.rc-section {
  background-color: var(--dark-secondary);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--dark-gray-light);
}

.rc-section-header {
  margin-bottom: 0.75rem;
}

.rc-section-header h2 {
  font-size: var(--font-size-xlarge);
  margin: 0;
}

.rc-section-header p {
  margin: 0.25rem 0 0;
  font-size: var(--font-size-large);
  color: var(--medium-gray);
}

.rc-section-header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Field groups */
.rc-field-group {
  margin-bottom: 0.9rem;
}

.rc-field-group-tight {
  margin-bottom: 2rem !important;
}

.rc-label {
  display: block;
  font-size: var(--font-size-large);
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--accent-green);
}

.rc-required {
  color: var(--accent-red-med-light);
}

/* Inputs / selects */
.rc-input,
.rc-select {
  width: 100%;
  border-radius: 0.65rem;
  border: 1px solid var(--dark-gray-light);
  background-color: var(--dark-bg);
  color: var(--light-text);
  padding: 0.55rem 0.7rem;
  font-size: var(--font-size-small);
  outline: none;
}

.rc-input::placeholder,
.rc-select::placeholder {
  color: var(--medium-gray-dark);
}

.rc-input:focus,
.rc-select:focus {
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 1px rgba(255, 184, 108, 0.35);
}

/* Help text */
.rc-help-text {
  font-size: var(--font-size-small);
  margin-top: 0.25rem;
  color: var(--medium-gray);
}

/* Toggle row (archive) */
.rc-toggle-row {
  margin-top: 0.5rem;
}

.rc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.rc-toggle input {
  display: none;
}

.rc-toggle-pill {
  width: 2.4rem;
  height: 1.2rem;
  border-radius: 999px;
  background-color: var(--dark-gray-light);
  position: relative;
  transition: background-color 0.18s ease-out;
}

.rc-toggle-pill::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--light-text);
  transition: transform 0.18s ease-out;
}

.rc-toggle input:checked + .rc-toggle-pill {
  background-color: var(--accent-amber);
}

.rc-toggle input:checked + .rc-toggle-pill::before {
  transform: translateX(1.1rem);
}

.rc-toggle-label {
  font-size: var(--font-size-small);
}

/* Buttons (totally custom, no .btn) */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.45rem 0.95rem;
  font-size: var(--font-size-small);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.08s ease-out, box-shadow 0.08s ease-out;
  white-space: nowrap;
}

.rc-btn-sm {
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
}

.rc-btn-primary {
  background: linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-amber-dark) 100%);
  color: #1b130a;
  box-shadow: 0 0.12rem 0.45rem rgba(0, 0, 0, 0.45);
}

.rc-btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-amber-med-light) 0%, var(--accent-amber-dark) 100%);
  transform: translateY(-1px);
  box-shadow: 0 0.18rem 0.6rem rgba(0, 0, 0, 0.55);
}

.rc-btn-outline {
  background-color: transparent;
  border-color: var(--accent-purple);
  color: var(--accent-purple-light);
}

.rc-btn-outline:hover {
  background-color: rgba(109, 114, 195, 0.18);
}

.rc-btn-ghost {
  background-color: transparent;
  border-color: var(--dark-gray-light);
  color: var(--light-text);
}

.rc-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.rc-btn-danger {
  border-color: var(--accent-red);
  color: var(--accent-red-light);
}

.rc-btn-danger:hover {
  background-color: rgba(255, 77, 77, 0.13);
}

.rc-btn i {
  font-size: 0.9em;
}

/* Items container & rows */
.rc-items-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Base styles */
/* Base row */
.rc-item-row {
  background-color: var(--dark-bg);
  border-radius: 0.9rem;
  border: 1px solid var(--dark-gray-light);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ===== Pattern: A → B → C → A → B → C ===== */
/* Green subtle tint */
.rc-item-row:nth-of-type(3n + 1) {
  border-color: var(--accent-green);
  background-color: rgba(125, 206, 130, 0.1);
  /* var(--accent-green) @ 10% */
}

/* Purple subtle tint */
.rc-item-row:nth-of-type(3n + 2) {
  border-color: var(--accent-purple);
  background-color: rgba(109, 114, 195, 0.1);
  /* var(--accent-purple) @ 10% */
}

/* Amber subtle tint */
.rc-item-row:nth-of-type(3n) {
  border-color: var(--accent-amber-dark);
  background-color: rgba(222, 128, 28, 0.1);
  /* var(--accent-amber-dark) @ 10% */
}

.ck-item-padding {
  padding: 1.4rem 1.1rem;
}

/* Main / side layout (mobile first = stacked) */
.rc-item-main {
  flex: 1 1 auto;
}

.rc-item-side {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Chip-style toggles */
.rc-chip-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.rc-chip-toggle input {
  display: none;
}

.rc-chip {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--dark-gray-light);
  font-size: 1.2rem;
  color: var(--medium-gray);
  background-color: var(--dark-secondary);
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.rc-chip-toggle input:checked + .rc-chip {
  background-color: rgb(141, 147, 253);
  border-color: var(--accent-purple);
  color: var(--white);
}

/* Actions row */
.rc-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.rc-item-sort {
  width: 100%;
  text-align: center;
}

.rc-item-moved {
  animation: rcMovedFlash 1.6s ease-out;
}

@keyframes rcMovedFlash {
  0% {
    box-shadow: 0 0 0 0px rgb(255, 255, 255);
    background-color: rgb(219, 219, 219);
  }
  60% {
    box-shadow: 0 0 0 4px rgb(255, 255, 255);
    background-color: rgba(213, 213, 213, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(218, 218, 218, 0);
    background-color: inherit;
  }
}
/* Small mt utility used above */
.mt-2 {
  margin-top: 0.5rem;
}

/* ---------- Larger screens (tablet / desktop) ---------- */
@media (min-width: 768px) {
  .ride-checklist-form {
    margin-top: 1.5rem;
  }
  .rc-section {
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
  }
  .rc-item-row {
    flex-direction: row;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    flex-wrap: wrap;
  }
  .rc-item-main {
    flex: 1 1 65%;
    padding-right: 0.75rem;
  }
  .rc-item-side {
    position: absolute;
    bottom: 0;
    right: 0;
    flex: 0 0 35%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .rc-chip {
    margin-right: 1rem;
  }
  .rc-item-sort {
    flex: 0 0 100%;
    order: 50;
    /* ensure it appears after main content */
    margin-top: 0.4rem;
  }
  .rc-field-group-tight {
    max-width: 450px;
  }
  .rc-actions {
    justify-content: flex-end;
  }
}
/* Wider desktop tweaks */
@media (min-width: 992px) {
  .ride-checklist-page {
    max-width: 880px;
    margin: 0 auto 3rem auto;
  }
}
.add-common-items-btn-container {
  text-align: right;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.rc-add-btn-container {
  text-align: right;
  margin-top: 1.5rem;
  margin-bottom: 4rem;
}

/*  Add Item Button */
.rc-fab {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, var(--accent-purple-light) 0%, var(--accent-purple) 65%);
  color: #1b130a;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 4000;
  /* below fixed nav (Bootstrap nav is usually 1030) */
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, filter 0.1s ease-out;
}

.rc-fab i {
  font-size: 2rem;
}

.rc-fab:focus-visible {
  outline: 2px solid var(--accent-blue-light);
  outline-offset: 3px;
}

.rc-fab:hover {
  top: 12px;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.7);
  filter: brightness(1.05);
}

.rc-fab:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Slightly adjust for larger screens */
@media (min-width: 768px) {
  .rc-fab {
    bottom: 5rem;
    right: 2rem;
  }
}
/* --- FAB row: make rc-fab behave like a normal flex item --- */
.ck-fab-row .rc-fab,
.ck-fab-row .ck-overview-fab {
  position: static !important;
  /* kill any old fixed/absolute */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

/* Your .rc-fab:hover has `top: 12px;` which breaks layout */
.ck-fab-row .rc-fab:hover,
.ck-fab-row .ck-overview-fab:hover {
  top: auto !important;
}

/* If ck-overview-fab is styled as fixed anywhere, neutralize it too */
.ck-fab-row .ck-overview-fab {
  margin: 0 !important;
}

/* Double-bounce every 5 seconds */
.bounce-5s {
  animation: fabDoubleBounce 5s ease-in-out infinite;
}

.bounce-15s {
  animation: fabDoubleBounce 15s ease-in-out infinite;
}

/* Keyframes: two small bounces, then rest */
@keyframes fabDoubleBounce {
  0% {
    transform: translateY(0);
  }
  3% {
    transform: translateY(-7px);
  }
  6% {
    transform: translateY(0);
  }
  9% {
    transform: translateY(-5px);
  }
  12% {
    transform: translateY(0);
  }
  /* No movement for the remainder of the 5 seconds */
  100% {
    transform: translateY(0);
  }
}
.checklist-item-row,
.rc-item-row {
  transform-origin: top center;
}

.rc-item-enter {
  animation: checklistItemEnter 2.1s ease-out forwards;
}

.rc-item-exit {
  animation: checklistItemEnter 2.1s ease-in reverse forwards;
}

@keyframes checklistItemEnter {
  0% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  11% {
    opacity: 0.2;
    transform: scaleY(0.05);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.riding-chk-item .flex-grow-1 {
  min-width: 0;
}

.riding-chk-item-desc,
.riding-chk-item-label {
  overflow-wrap: anywhere;
}

/* Wrapper spacing between cards */
.riding-chk-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 3rem;
}

/* Card shell */
.riding-chk-card {
  background: var(--dark-secondary);
  /* dark panel */
  border-radius: 18px;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

@media (max-width: 768px) {
  .riding-chk-card {
    padding: 0.9rem 0.7rem;
  }
}
.riding-chk-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.75);
  border-color: rgba(222, 128, 28, 0.7);
  /* amber accent */
  background-color: #191c22;
}

/* Layout inside card — GRID everywhere */
.riding-chk-card-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas: "main    image" "actions actions";
  column-gap: 1rem;
  row-gap: 0.75rem;
  align-items: start;
}

.riding-chk-card-image {
  grid-area: image;
  justify-self: end;
  align-self: start;
  /* ✅ TOP RIGHT */
  max-width: 80px;
  margin-left: 0;
  order: unset;
  cursor: pointer;
}

.riding-chk-card-image-insights {
  grid-area: image;
  justify-self: end;
  align-self: start;
  /* ✅ TOP RIGHT */
  max-width: 120px;
  margin-left: 0;
  order: unset;
  cursor: pointer;
}

.riding-chk-card-actions {
  grid-area: actions;
  display: flex;
  justify-content: center;
  /* centered under both */
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* Mobile-only: spacing tweaks (NO layout change) */
@media (max-width: 576px) {
  .riding-chk-card-inner {
    row-gap: 1rem;
  }
}
/* Left side: title + meta */
.riding-chk-card-main {
  min-width: 0;
}

.riding-chk-title {
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  font-weight: 600;
  color: #de801c;
  /* amber title, like your screenshot */
}

.riding-chk-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.riding-chk-meta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

/* Circular icon button (Edit) */
.btn-template-icon {
  border: none;
  outline: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--accent-purple, #6366f1);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.btn-template-icon i {
  font-size: 1rem;
}

.btn-template-icon:hover,
.btn-template-icon:focus {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
  filter: brightness(1.08);
}

.btn-template-icon:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}

/* Modal footer layout */
.riding-chk-modal-footer {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.riding-chk-modal-footer .d-grid {
  justify-items: end;
}

.riding-chk-modal-primary {
  flex: 1 1 auto;
  justify-content: center;
}

/* ================================
   Checklist Details Modal (2 cols)
   Item | Packed (right edge)
   ================================ */
.riding-chk-items-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* li rows: 2 columns now */
.riding-chk-modal-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  /* ✅ item | packed */
  align-items: center;
  column-gap: 0.75rem;
}

/* Header row styling (keep your look) */
.riding-chk-modal-header-row {
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Left column */
.riding-chk-item-header,
.riding-chk-item-main {
  min-width: 0;
}

/* Packed header: right aligned so it sits against right side */
.packed-column-header {
  width: 64px;
  min-width: 64px;
  font-size: 0.85rem;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* ✅ against the right */
  text-align: right;
  padding-right: 6px;
}

/* Packed cell (you still use .packed-check in markup) */
.packed-check {
  width: 64px;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* ✅ icon against the right */
  line-height: 1;
  padding-right: 6px;
}

/* Mobile tighter */
@media (max-width: 575.98px) {
  .riding-chk-modal-row {
    grid-template-columns: 1fr 52px;
    column-gap: 0.5rem;
  }
  .packed-column-header,
  .packed-check {
    width: 52px;
    min-width: 52px;
    padding-right: 4px;
  }
}
/* Icons */
.packed-check-icon {
  display: block;
  line-height: 1;
  color: #de801c;
  font-size: 1.1rem;
}

.chk-empty-icon {
  opacity: 0.35;
  font-size: 1.05rem;
}

/* both check columns (cells) */
.packed-check {
  width: 64px;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* check icon styling */
.packed-check-icon {
  display: block;
  line-height: 1;
  color: #de801c;
  font-size: 1.1rem;
}

/* Optional: tighten spacing on long descriptions */
.riding-chk-item-main .font-size-small {
  margin-top: 0.15rem;
}

.use-toggle-wrapper {
  cursor: pointer;
  margin-bottom: -13px;
}

.use-checklist-row {
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}

/* Make the whole card clickable by making the label own the padding */
.use-checklist-row {
  position: relative;
  padding: 0 !important;
  /* overrides .rc-item-row padding */
}

.use-checklist-label {
  display: flex;
  width: 100%;
  padding: 1rem 0.8rem;
  /* moved from .rc-item-row */
  cursor: pointer;
}

.use-checklist-row:hover {
  transform: translateY(-1px);
}

.use-checklist-row.is-packed {
  opacity: 0.65;
}

.use-checklist-checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.1rem;
  flex-shrink: 0;
}

.use-checklist-checkbox-wrapper {
  position: relative;
}

/* Hide the native box but keep it clickable + accessible */
.use-checklist-checkbox {
  position: absolute;
  inset: 0;
  /* fill wrapper */
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  pointer-events: auto;
  cursor: pointer;
}

.use-check-visual {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.75rem;
  border: 2px solid var(--accent-amber);
  background: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.use-check-visual-icon {
  font-size: 1.1rem;
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.16s ease-out, opacity 0.16s ease-out;
}

/* Checked state – bright, satisfying click visual */
.use-checklist-checkbox:checked + .use-check-visual {
  border-color: var(--accent-green);
  background: radial-gradient(circle at 30% 20%, #2ecc71, #145a32);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.7);
  transform: scale(1.03);
}

.use-checklist-checkbox:checked + .use-check-visual .use-check-visual-icon {
  opacity: 1;
  transform: scale(1);
}

.use-checklist-text {
  min-width: 0;
}

.use-checklist-title {
  line-height: 1.3;
}

.use-checklist-notes {
  line-height: 1.3;
}

.use-checklist-row {
  cursor: pointer;
}

/* If you have any overlay/pseudo-element on the card, don’t let it intercept clicks */
.use-checklist-row::before,
.use-checklist-row::after,
.rc-item-row::before,
.rc-item-row::after {
  pointer-events: none;
}

.use-checklist-label {
  display: flex;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Make the use page packed toggle look like the modal packed-check */
.use-packed-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
}

/* Hide the native checkbox but keep it accessible + still triggers change events */
.use-checklist-checkbox-hidden {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ==============================
   Template Card Enter/Exit Anim
   (same style as checklistItemEnter)
   ============================== */
.riding-chk-card {
  transform-origin: top center;
}

/* Enter (optional, if you ever want it) */
.riding-chk-card.card-enter {
  animation: templateCardEnter 700ms ease-out forwards;
}

/* Exit (what you want for delete) */
.riding-chk-card.card-exit {
  animation: templateCardEnter 700ms ease-in reverse forwards;
  pointer-events: none;
}

/* Same "type" as checklistItemEnter:
   scaleY collapse + opacity ramp */
@keyframes templateCardEnter {
  0% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  11% {
    opacity: 0.2;
    transform: scaleY(0.05);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
#checklistsWrapper.is-empty {
  pointer-events: none;
  min-height: 1px;
  /* keeps it from collapsing weirdly */
}

.ck-overview-list {
  max-height: calc(100svh - 220px);
  overflow: auto;
  padding-right: 0.25rem;
}

.ck-overview-group {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.9rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(0, 0, 0, 0.18);
}

.ck-overview-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ck-overview-item-btn {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 20, 20, 0.65);
  color: var(--font-color-white);
  border-radius: 0.75rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ck-overview-item-btn:hover {
  transform: translateY(-1px);
}

.ck-overview-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.85;
  font-size: 0.85rem;
}

.ck-fab-row {
  padding: 0 0 0 1.5rem;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 28px;
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(6rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 901;
  /* above most page content */
}

/* optional: make Save visually distinct (tweak to your theme) */
.rc-fab-save {
  /* keep your rc-fab base sizing */
  /* example subtle differentiation: */
  outline: 2px solid rgba(255, 255, 255, 0.15);
}

.ck-chip {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.ck-chip-required {
  border-color: rgba(96, 169, 94, 0.5);
  color: var(--accent-green-dark);
}

.ck-chip-notes {
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 0.9;
}

.ck-jump-highlight {
  animation: ckJumpOutline 7.1s ease-in-out forwards, ckJumpPulse 1.2s ease-in-out 3;
}

/* Outline + base glow (in → out) */
@keyframes ckJumpOutline {
  0% {
    outline: 0 solid var(--accent-amber);
    box-shadow: 0 0 0 0 rgba(255, 191, 0, 0);
  }
  70% {
    outline: 12px solid var(--accent-amber);
    box-shadow: 0 0 0 6px rgba(255, 191, 0, 0.18);
  }
  100% {
    outline: 0 solid var(--accent-amber);
    box-shadow: 0 0 0 0 rgba(255, 191, 0, 0);
  }
}
/* Subtle glow pulse */
@keyframes ckJumpPulse {
  0% {
    box-shadow: 0 0 0 10px rgba(255, 191, 0, 0.58);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(255, 191, 0, 0.88);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 191, 0, 0.58);
  }
}
/* =========================================
   Ride Checklists mobile toggle styling
   ========================================= */
[data-rc-view=templates] {
  background-color: var(--accent-green-dark);
  border-color: var(--accent-green);
  color: #fff;
}
[data-rc-view=templates]:hover {
  background-color: #447a42;
  border-color: var(--accent-green-dark);
  color: #fff;
}
[data-rc-view=templates].active {
  background-color: var(--white);
  color: var(--accent-green-dark);
  border-color: var(--accent-green-dark);
  box-shadow: none;
}
[data-rc-view=templates].active:hover {
  background-color: #447a42;
  color: var(--accent-green-dark);
}

.rc-btn-center {
  display: flex;
  justify-content: center;
}

.ck-packed-float {
  position: fixed;
  bottom: calc(6rem + env(safe-area-inset-bottom));
  left: 100px;
  transform: translateX(-50%);
  z-index: 1040;
  pointer-events: none;
}

.ck-packed-inner {
  pointer-events: auto;
  background: rgba(20, 20, 25, 0.95);
  color: var(--accent-purple-light);
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

/* Scroll-aware fade behavior (opt-in) */
.fab-fade-on-bottom {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fab-fade-on-bottom.is-faded {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.all-packed-reminder {
  margin-top: 3rem;
  padding: 2rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(168, 213, 163, 0.1215686275);
  color: var(--accent-green-light);
  text-align: center;
  gap: 0.25rem;
  font-size: var(--font-size-xxlarge) !important;
  font-weight: 500;
  /* animation baseline */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.all-packed-reminder.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ✅ IMPORTANT: collapse layout when hidden */
.all-packed-reminder.d-none {
  display: none;
}

/* Right-side chevron button */
.use-item-accordion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.use-item-accordion-btn:hover {
  opacity: 1;
}

.use-item-accordion-btn i {
  transition: transform 160ms ease;
}

/* Rotate chevron when expanded */
.use-checklist-row.is-expanded .use-item-accordion-btn i {
  transform: rotate(180deg);
}

/* Details panel styling */
.use-item-details {
  padding: 0 12px 12px 12px;
  /* match your card padding */
}

.use-item-details-inner {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-left: 1rem;
  /* lines up under text after big checkbox */
}

.use-item-meta-label {
  white-space: nowrap;
  opacity: 0.8;
  font-size: var(--font-size-large);
}

.use-item-notes {
  opacity: 0.9;
  line-height: 1.35;
}

.ck-packed-toast {
  position: fixed;
  left: 50%;
  bottom: 146px;
  /* above your FAB row */
  transform: translateX(-50%) translateY(12px);
  z-index: 1060;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: var(--accent-purple);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  transition: opacity 140ms ease, transform 140ms ease;
  /* you asked for xlarge */
}

.ck-packed-toast.is-showing {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ck-packed-toast.is-packed {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.ck-packed-toast.is-unpacked {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

/* If advanced sections are collapsed/hidden, don't show the underline */
.rc-advanced-hidden.form-group::after,
.rc-advanced-gone.form-group::after,
.form-group.rc-advanced-hidden::after,
.form-group.rc-advanced-gone::after {
  width: 0 !important;
}

/* Prevent underline from being clipped inside checklist rows */
.rc-field-group-tight,
.rc-item-main .form-group {
  overflow: visible;
}

/* =========================================================
   USE CHECKLIST — FLAT LIST STYLE (like reference image)
   No per-item cards. Accordion for details stays.
   ========================================================= */
/* Container: tight list like the screenshot */
#useChecklistItemsContainer.rc-items-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* ✅ no “card spacing” */
  border-radius: 14px;
}

/* Kill all card styling on rows */
.use-checklist-row.rc-item-row,
.use-checklist-row.checklist-item-row {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Each item header becomes a simple row */
.use-item-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  /* small hover rounding */
}

/* Subtle hover like native checklist */
.use-checklist-row:hover .use-item-header {
  background: rgba(0, 0, 0, 0.18);
}

/* Label takes all space left of chevron */
.use-checklist-label {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* LEFT: circle checkbox (like screenshot) */
.use-packed-check {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* icons */
.use-packed-check .packed-check-icon,
.use-packed-check .chk-empty-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* unchecked = show empty circle vibe (your minus icon becomes subtle) */
.use-packed-check .chk-empty-icon {
  opacity: 0;
  /* ✅ hide the minus so it looks like a plain circle */
}

/* checked = green filled circle + white check */
.use-checklist-row.is-packed .use-packed-check {
  background: rgba(46, 204, 113, 0.95) !important;
  border-color: rgba(46, 204, 113, 0.95) !important;
}

.use-checklist-row.is-packed .use-packed-check .packed-check-icon {
  color: #0b1b10;
  /* dark check like your theme */
}

/* TEXT */
.use-checklist-text {
  min-width: 0;
}

.use-checklist-title {
  font-size: var(--font-size-xxlarge);
  /* close to screenshot */
  font-weight: 500 !important;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
}

/* Packed item text becomes dimmer */
.use-checklist-row.is-packed .use-checklist-title {
  opacity: 0.85;
}

/* RIGHT: chevron (small, simple) */
.use-item-accordion-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.use-item-accordion-btn:hover {
  opacity: 0.95;
}

.use-item-accordion-btn i {
  transition: transform 160ms ease;
}

/* rotate chevron on expand */
.use-checklist-row.is-expanded .use-item-accordion-btn i {
  transform: rotate(180deg);
}

/* DETAILS PANEL — looks like part of list (not a card) */
.use-item-details {
  padding: 0 8px 10px 46px;
  /* indent under text (circle + gap) */
}

.use-item-details-inner {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.use-item-meta-label {
  white-space: nowrap;
  opacity: 0.8;
}

.use-item-meta-value {
  opacity: 0.92;
}

/* notes wrap nicely */
.use-item-notes {
  opacity: 0.92;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Optional: thin separators between rows (like list) */
.use-checklist-row + .use-checklist-row .use-item-header {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mobile tighten */
@media (max-width: 575.98px) {
  .use-item-header {
    padding: 10px 6px;
  }
  .use-checklist-title {
    font-size: var(--font-size-xlarge);
  }
}
/* =========================================================
   FIX: details (category/notes) must always stack under title
   and never affect chevron layout on desktop
   ========================================================= */
/* Ensure the header row never reflows weirdly */
.use-item-header {
  justify-content: space-between;
  /* label left, chevron right */
}

/* Label area must be allowed to shrink without pushing chevron */
.use-checklist-label {
  min-width: 0;
}

/* Keep chevron pinned to the far right always */
.use-item-accordion-btn {
  margin-left: auto;
  flex: 0 0 auto;
}

/* DETAILS: always full-width under text area (same on desktop + mobile) */
.use-item-details {
  padding: 0 8px 10px 46px;
  /* keep your indent */
  width: 100%;
}

/* The inner details block should NOT try to sit beside anything */
.use-item-details-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* ✅ always stack rows */
  gap: 6px;
}

/* Each meta row stays on one line, wraps nicely if long */
.use-item-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* If your category value is long, don’t let it push layout */
.use-item-meta-value,
.use-item-notes {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* OPTIONAL: if you want Category shown even when no notes:
   ensure the category row has a consistent height/spacing */
.use-item-meta-row:only-child {
  margin-bottom: 0;
  /* no weird extra space */
}

.ride-checklist-simple-page {
  max-width: 820px;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 7rem;
  color: var(--light-text);
}

/* =========================
   Header
   ========================= */
.ride-checklist-simple-header {
  margin-bottom: 1rem;
}

.ride-checklist-simple-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.ride-checklist-simple-back-link,
.ride-checklist-simple-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--light-text);
  opacity: 0.82;
  transition: opacity 0.18s ease, color 0.18s ease;
}

.ride-checklist-simple-back-link:hover,
.ride-checklist-simple-edit-link:hover {
  opacity: 1;
  color: var(--white);
}

.ride-checklist-simple-title-wrap {
  padding: 0.25rem 0 0.15rem 0;
}

.ride-checklist-simple-kicker {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-amber);
  margin-bottom: 0.25rem;
}

.ride-checklist-simple-title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  font-weight: 500;
  color: var(--white);
}

.ride-checklist-simple-meta {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
}

/* =========================
   Sticky progress bar area
   ========================= */
.ride-checklist-simple-sticky-progress {
  position: sticky;
  top: 3.6rem;
  z-index: 9;
  margin-bottom: 1.6rem;
  padding: 0.9rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 20, 27, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.ride-checklist-simple-progress-top-row,
.ride-checklist-simple-progress-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.ride-checklist-simple-progress-top-row {
  margin-bottom: 0.55rem;
}

.ride-checklist-simple-progress-label,
.ride-checklist-simple-progress-value {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--white);
}

.ride-checklist-simple-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 0.85rem;
}

.ride-checklist-simple-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #8f95ff 0%, #77c58d 100%);
  transition: width 220ms ease;
}

.ride-checklist-simple-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ride-checklist-simple-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  user-select: none;
  min-height: 40px;
}

.ride-checklist-simple-toggle-action {
  margin-right: auto;
}

.ride-checklist-simple-toggle-box-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.ride-checklist-simple-toggle-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ride-checklist-simple-toggle-box {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 184, 108, 0.9);
  background: rgba(255, 255, 255, 0.02);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ride-checklist-simple-toggle-box::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: transparent;
  transition: transform 0.16s ease, background-color 0.16s ease, opacity 0.16s ease;
  opacity: 0;
  transform: scale(0.7);
}

.ride-checklist-simple-toggle-input:checked + .ride-checklist-simple-toggle-box {
  border-color: var(--accent-green);
  background: rgba(125, 206, 130, 0.14);
  box-shadow: 0 0 0 3px rgba(125, 206, 130, 0.12);
}

.ride-checklist-simple-toggle-input:checked + .ride-checklist-simple-toggle-box::after {
  opacity: 1;
  transform: scale(1);
  background: var(--accent-green);
}

.ride-checklist-simple-toggle-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--light-text);
  line-height: 1.2;
}

/* =========================
   Sections
   ========================= */
.ride-checklist-simple-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ride-checklist-simple-section-heading-wrap {
  margin-bottom: 0.8rem;
}

.ride-checklist-simple-section-heading-wrap-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.9rem;
}

.ride-checklist-simple-section-heading-copy {
  min-width: 0;
}

.ride-checklist-simple-section-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent-amber);
  margin-bottom: 0.2rem;
}

.ride-checklist-simple-section-title {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--white);
}

.ride-checklist-simple-sort-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border: 1px solid rgba(255, 184, 108, 0.52);
  border-radius: 999px;
  padding: 0.34rem 0.72rem;
  background: rgba(255, 184, 108, 0.07);
  color: var(--accent-amber-light);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.ride-checklist-simple-sort-toggle i {
  font-size: 0.86rem;
}

.ride-checklist-simple-sort-toggle:hover,
.ride-checklist-simple-sort-toggle:focus-visible {
  border-color: rgba(255, 184, 108, 0.88);
  background: rgba(255, 184, 108, 0.14);
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(255, 184, 108, 0.1);
  outline: none;
}

.ride-checklist-simple-sort-toggle[aria-pressed=true] {
  border-color: rgba(255, 215, 151, 0.82);
  background: rgba(255, 184, 108, 0.18);
  color: var(--white);
}

/* =========================
   Lists
   ========================= */
.ride-checklist-simple-list {
  display: flex;
  flex-direction: column;
}

.ride-checklist-simple-list-packed {
  opacity: 1;
}

/* =========================
   Item row
   ========================= */
.ride-checklist-simple-item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.ride-checklist-simple-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ride-checklist-simple-item.is-moving-out,
.ride-checklist-simple-item.is-moving-in {
  pointer-events: none;
}

.ride-checklist-simple-item.is-moving-out {
  opacity: 0;
  transform: translateY(8px);
}

.ride-checklist-simple-item.is-moving-in {
  opacity: 0;
  transform: translateY(-8px);
  transition-duration: 0.22s;
}

.ride-checklist-simple-item.is-moving-in.is-moving-visible {
  opacity: 1;
  transform: translateY(0);
}

.ride-checklist-simple-item-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 68px;
  padding: 0.55rem 0;
}

.ride-checklist-simple-item-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  cursor: pointer;
}

.ride-checklist-simple-item-check-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
}

.ride-checklist-simple-item-checkbox {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ride-checklist-simple-item-check-visual {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 18, 18, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}

.ride-checklist-simple-item-checkbox:checked + .ride-checklist-simple-item-check-visual,
.ride-checklist-simple-item.is-packed .ride-checklist-simple-item-check-visual {
  border-color: rgba(255, 215, 151, 0.96);
  background: linear-gradient(145deg, rgba(255, 250, 224, 0.96) 0%, rgba(255, 218, 152, 0.94) 48%, rgba(228, 143, 58, 0.86) 100%);
  box-shadow: 0 0 0 3px rgba(255, 184, 108, 0.12), 0 0 18px rgba(255, 184, 108, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.ride-checklist-simple-item.is-remaining .ride-checklist-simple-item-check-visual {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(18, 18, 18, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.ride-checklist-simple-item-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.ride-checklist-simple-item-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ride-checklist-simple-item-title {
  display: block;
  min-width: 0;
  color: var(--white);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.2;
  font-weight: 400;
  overflow-wrap: anywhere;
  transition: color 0.16s ease, opacity 0.16s ease;
}

.ride-checklist-simple-item-meta-row {
  margin-top: 0.22rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ride-checklist-simple-item-category,
.ride-checklist-simple-item-required {
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  line-height: 1.2;
  font-weight: 650;
  border: 1px solid transparent;
}

.ride-checklist-simple-item-category {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.08);
}

.ride-checklist-simple-item-category[data-category=Safety] {
  color: #ffb8bd;
  background: rgba(170, 65, 75, 0.22);
  border-color: rgba(255, 128, 128, 0.28);
}

.ride-checklist-simple-item-category[data-category=Clothing] {
  color: #d7d7d2;
  background: rgba(150, 150, 140, 0.16);
  border-color: rgba(215, 215, 210, 0.18);
}

.ride-checklist-simple-item-category[data-category=Repair] {
  color: #e9b77f;
  background: rgba(124, 78, 41, 0.3);
  border-color: rgba(233, 183, 127, 0.25);
}

.ride-checklist-simple-item-category[data-category=Tools] {
  color: #91d6ce;
  background: rgba(59, 142, 132, 0.24);
  border-color: rgba(145, 214, 206, 0.24);
}

.ride-checklist-simple-item-category[data-category="Bike & Components"] {
  color: #a8c8ff;
  background: rgba(90, 152, 247, 0.18);
  border-color: rgba(168, 200, 255, 0.22);
}

.ride-checklist-simple-item-category[data-category="Hydration & Fuel"] {
  color: #b7dda7;
  background: rgba(96, 169, 94, 0.22);
  border-color: rgba(183, 221, 167, 0.22);
}

.ride-checklist-simple-item-category[data-category=Navigation] {
  color: #f5c06e;
  background: rgba(222, 128, 28, 0.2);
  border-color: rgba(245, 192, 110, 0.25);
}

.ride-checklist-simple-item-category[data-category=Electronics] {
  color: #a6e6ff;
  background: rgba(76, 168, 208, 0.18);
  border-color: rgba(166, 230, 255, 0.22);
}

.ride-checklist-simple-item-category[data-category=Storage] {
  color: #d1c1ff;
  background: rgba(159, 163, 237, 0.18);
  border-color: rgba(209, 193, 255, 0.22);
}

.ride-checklist-simple-item-category[data-category=Other] {
  color: #d6b28a;
  background: rgba(141, 95, 56, 0.22);
  border-color: rgba(214, 178, 138, 0.22);
}

.ride-checklist-simple-item-category[data-category=Uncategorized] {
  color: #bdbdbd;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
}

.ride-checklist-simple-item-required {
  color: var(--accent-amber);
  background: rgba(255, 184, 108, 0.08);
}

.ride-checklist-simple-item.is-packed .ride-checklist-simple-item-title {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.ride-checklist-simple-item.is-remaining .ride-checklist-simple-item-title {
  color: var(--white);
  text-decoration: none;
}

.ride-checklist-simple-item.is-packed .ride-checklist-simple-item-category,
.ride-checklist-simple-item.is-packed .ride-checklist-simple-item-required {
  opacity: 0.88;
}

.ride-checklist-simple-item-accordion-btn {
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.48);
  transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.ride-checklist-simple-item-accordion-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.04);
}

.ride-checklist-simple-item.is-expanded .ride-checklist-simple-item-accordion-btn i {
  transform: rotate(180deg);
}

/* =========================
   Details / notes accordion
   ========================= */
.ride-checklist-simple-item-details {
  padding: 0 0 0.7rem 0;
}

.ride-checklist-simple-item-details-inner {
  margin-left: 48px;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ride-checklist-simple-item-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
}

.ride-checklist-simple-item-detail-row + .ride-checklist-simple-item-detail-row {
  margin-top: 0.55rem;
}

.ride-checklist-simple-item-detail-label {
  flex: 0 0 84px;
  min-width: 84px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  font-weight: 600;
}

.ride-checklist-simple-item-detail-value,
.ride-checklist-simple-item-detail-notes {
  min-width: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ride-checklist-simple-item-detail-row-notes {
  align-items: flex-start;
}

.ride-checklist-simple-source-list {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ride-checklist-simple-item,
  .ride-checklist-simple-item.is-moving-in {
    transition: none !important;
    will-change: auto;
  }
  .ride-checklist-simple-item.is-moving-out,
  .ride-checklist-simple-item.is-moving-in,
  .ride-checklist-simple-item.is-moving-in.is-moving-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
   Responsive
   ========================= */
@media (max-width: 767.98px) {
  .ride-checklist-simple-page {
    padding-top: 0.75rem;
  }
  .ride-checklist-simple-title {
    font-size: 2rem;
  }
  .ride-checklist-simple-sticky-progress {
    top: calc(4.4rem + env(safe-area-inset-top));
    margin-left: -0.1rem;
    margin-right: -0.1rem;
    border-radius: 14px;
    padding: 0.8rem 0.8rem;
  }
  .ride-checklist-simple-controls-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
  .ride-checklist-simple-toggle,
  .ride-checklist-simple-toggle-action {
    width: 100%;
    margin-right: 0;
  }
  .ride-checklist-simple-section-title {
    font-size: 1.6rem;
  }
  .ride-checklist-simple-section-heading-wrap-action {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .ride-checklist-simple-item-main {
    min-height: 62px;
  }
  .ride-checklist-simple-item-title {
    font-size: 1.15rem;
  }
  .ride-checklist-simple-item-details-inner {
    margin-left: 0;
  }
  .ride-checklist-simple-item-detail-row {
    flex-direction: column;
    gap: 0.25rem;
  }
  .ride-checklist-simple-item-detail-label {
    flex: 0 0 auto;
    min-width: 0;
  }
}
/* bike_form.scss */
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.bike-form-page {
  padding-bottom: 6rem;
  color: var(--light-text);
}

.bike-form {
  max-width: 900px;
  margin: 0 auto;
}

/* Top “Bike Information” card */
.bike-form-card {
  background: var(--bike-form-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  padding: 1.25rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  margin-bottom: 1.25rem;
}

.bike-form-section-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-blue-sky);
  margin-bottom: 0.75rem;
}

/* Labels + inputs */
.bike-form-label {
  color: var(--light-text);
  font-size: var(--font-size-xlarge);
  opacity: 0.85;
  margin-bottom: 0.35rem;
}

.bike-input {
  background: rgba(20, 22, 30, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--light-text) !important;
  border-radius: 0.6rem !important;
  padding: 0.75rem 0.9rem !important;
}

.bike-input:focus {
  box-shadow: 0 0 0 0.18rem rgba(127, 178, 255, 0.18) !important;
  border-color: rgba(240, 127, 255, 0.4) !important;
}

.bike-form-group {
  position: relative;
}

.bike-form-group::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 4px;
  background: var(--accent-blue-sky);
  border-radius: 999px;
  transition: width 0.45s ease, left 0.45s ease;
  transform: translateX(-50%);
}

.bike-form-group.filled::after {
  width: 84%;
}

#riderForm .form-group::after {
  bottom: -6px;
  height: 4px;
  background: var(--accent-blue-sky);
  border-radius: 999px;
  transition: width 0.45s ease, left 0.45s ease;
}

#riderForm .form-group.filled::after {
  width: 84%;
}

.bike-form select.bike-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10'><path d='M1 2 L8 8 L15 2' fill='none' stroke='%2387CEFA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px !important;
}

.bike-form select.bike-input.dropdown-open {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10'><path d='M1 8 L8 2 L15 8' fill='none' stroke='%2387CEFA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.bike-textarea {
  resize: vertical;
  min-height: 80px;
  color: var(--light-text) !important;
}

/* Placeholder text */
.bike-input::placeholder,
.bike-textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
  /* IMPORTANT: Firefox */
}

/* Accordion styling to match the screenshot vibe */
.bike-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  margin-bottom: 1.25rem;
}

.bike-acc-item {
  background: var(--bike-form-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  margin-bottom: 0.9rem;
}

.bike-acc-btn {
  background: var(--bike-form-bg) !important;
  color: var(--light-text) !important;
  padding: 1rem 1rem !important;
  gap: 0.75rem;
}

.bike-acc-btn::after {
  filter: brightness(1.2);
  opacity: 0.85;
}

.bike-acc-icon {
  width: 34px;
  height: 34px;
  border-radius: 0.6rem;
  background: rgba(127, 178, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bike-acc-icon i {
  color: var(--accent-blue-sky);
}

.bike-acc-title {
  font-weight: 800;
  font-size: var(--font-size-xlarge);
  line-height: 1.1;
}

.bike-acc-subtitle {
  margin-left: auto;
  font-size: 0.92rem;
  opacity: 0.65;
  display: none;
  /* hide on mobile */
}

@media (min-width: 768px) {
  .bike-acc-subtitle {
    display: inline;
  }
}
.bike-acc-body {
  padding: 1rem 1rem 1.1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Make accordion chevrons white */
.bike-acc-btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(135,206,250)' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  opacity: 0.9;
}

.bike-acc-btn.collapsed::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(135,206,250)' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  opacity: 0.85;
}

.last-acc-item.accordion-item:last-of-type {
  border-bottom-right-radius: 0.9rem;
  border-bottom-left-radius: 0.9rem;
}

.bike-field {
  margin-bottom: 0.85rem;
}

/* Actions */
.bike-form-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
}

.bike-btn-cancel {
  min-width: 160px;
  border-radius: 0.75rem;
}

.bike-btn-save {
  min-width: 220px;
  border-radius: 0.75rem;
  background: rgba(127, 178, 255, 0.22);
  border: 1px solid rgba(127, 178, 255, 0.35);
  color: var(--light-text);
  font-weight: 800;
}

.bike-btn-save:hover {
  background: rgba(127, 178, 255, 0.28);
  border-color: rgba(127, 178, 255, 0.45);
}

/* bike_form.scss (ADD/UPDATE) */
/* Spacing belongs to the ITEM container, not child rows */
.bike-part-block {
  margin-bottom: 1.5rem;
}

/* Optional: last block in a section can be tight */
.bike-acc-body > .bike-part-block:last-child {
  margin-bottom: 0;
}

/* Indent helper blocks like rim dimensions / tire width+weight */
.bike-part-row-child {
  /* ✅ add vertical separation so next item label isn't too close */
  margin-top: 0.75rem;
  padding-left: 1rem;
  margin-left: 0.25rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

/* When only the MEASUREMENT belongs to the item above (fork travel, rotor size, etc.) */
.bike-part-measure-child {
  /* ✅ same idea for measure-only children */
  margin-top: 0.75rem;
  padding-left: 1rem;
  margin-left: 0.25rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

.bike-form-label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  /* space between icon and label */
}

.bike-form-label-icon {
  width: 32px;
  height: auto;
  flex-shrink: 0;
  color: var(--light-text);
}

.bike-icon-size-32 {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

.bike-form-label {
  margin: 0;
  line-height: 1.2;
}

.bd-section-icon {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

.bd-label-icon {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.bd-img-01 {
  width: 50px !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* Bike Details modal layout */
.bike-details-modal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bike-details-body {
  margin-top: 0.75rem;
}

/* Section card */
.bike-details-modal .bd-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  padding: 1rem;
  margin-top: 0.9rem;
}

/* Section title */
.bike-details-modal .bd-section-title {
  font-size: var(--font-size-xxlarge);
  font-weight: 800;
  color: var(--accent-blue-sky-muted);
  margin-bottom: 0.75rem;
}

/* Optional subtitles (Front/Rear) */
.bike-details-modal .bd-subtitle {
  font-size: var(--font-size-large);
  font-weight: 700;
  opacity: 0.75;
  margin: 0.25rem 0 0.5rem;
}

/* Rows: label/value */
.bike-details-modal .bd-grid {
  display: grid;
  gap: 0.6rem;
}

.bike-details-modal .bd-row {
  display: grid;
  grid-template-columns: 170px 1fr !important;
  gap: 0.75rem;
  align-items: start;
  padding: 0.5rem 0.25rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

@media (min-width: 992px) {
  .bike-details-modal .bd-row {
    grid-template-columns: 250px 1fr !important;
  }
}
.bike-details-modal .bd-row:first-child {
  border-top: none;
}

.bike-details-modal .bd-label {
  opacity: 0.9;
  font-weight: 700;
  font-size: var(--font-size-large);
}

.bike-details-modal .bd-value {
  opacity: 0.95;
  color: var(--accent-blue-sky) !important;
  /* soft blue-gray */
}

.bd-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  margin-top: 0.15rem;
  white-space: nowrap;
}

/* “Chips” for units / specs */
.bike-details-modal .bd-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  margin-top: 0.15rem;
  white-space: nowrap;
}

/* Empty info message */
.bike-details-modal .bd-empty {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.8;
}

/* Responsive: label/value stack like mobile */
@media (max-width: 768px) {
  .bike-details-modal .bd-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .bike-details-modal .bd-label {
    opacity: 0.8;
    font-size: var(--font-size-large);
  }
}
.bike-part-meta-btn {
  color: var(--light-text);
  background-color: rgba(90, 104, 132, 0.95);
  opacity: 0.8;
  width: 41px;
  height: 41px;
}

.bike-part-meta-btn:hover {
  opacity: 1;
  background-color: rgb(117, 135, 172) !important;
}

/* =========================================================
   Bike Service Modal — CLEAN (dark + grid row layout)
   ========================================================= */
/* Modal shell (dark) */
#bikeServiceModal .modal-content {
  background: #1f2327;
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#bikeServiceModal .modal-header,
#bikeServiceModal .modal-footer {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Search input */
#bikeServiceModal #bikeServiceSearch {
  background: #14181c;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

#bikeServiceModal #bikeServiceSearch::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.bike-single-container {
  max-width: 800px;
  margin: 0 auto 12rem auto;
}

/* =========================================================
   Bike Service Modal — exact chevron color (rgb(135,206,250))
   IMPORTANT: remove Bootstrap's filter so it doesn't recolor
   ========================================================= */
#bikeServiceModal .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2387CEFA' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  filter: none !important;
  /* <- stop Bootstrap/dark-theme filter tint */
  opacity: 0.9;
  /* Pin bootstrap chevron to far right */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* Expanded state can also apply filters in Bootstrap — kill it */
#bikeServiceModal .accordion-button:not(.collapsed)::after {
  filter: none !important;
}

/* Section headers (Components / Wheels...) */
#bikeServiceModal .font-color-blue-sky.opacity-75 {
  color: rgb(135, 206, 250) !important;
}

/* Avoid tiny horizontal scroll */
#bikeServiceModal .modal-body,
#bikeServiceModal #bikeServiceList {
  overflow-x: hidden;
}

/* Accordion base */
#bikeServiceModal .accordion-item {
  background: transparent;
  border: 0;
}

/* Button row */
#bikeServiceModal .accordion-button {
  background: #14181c;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  /* pinned chevron */
  position: relative;
}

#bikeServiceModal .accordion-button:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

#bikeServiceModal .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 200, 255, 0.35);
}

/* =========================
   NEW: Grid row layout
   ========================= */
#bikeServiceModal .svc-row {
  display: grid;
  grid-template-columns: 1fr 115px 115px 34px;
  /* part | installed | serviced | chevron-space */
  align-items: center;
  column-gap: 10px;
  width: 100%;
}

#bikeServiceModal .svc-part {
  min-width: 0;
  /* critical for ellipsis */
}

/* value line truncates nicely */
#bikeServiceModal .svc-part .svc-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bikeServiceModal .svc-date {
  justify-self: end;
  text-align: right;
  white-space: normal;
  /* allow the two lines */
}

/* spacer div at end */
#bikeServiceModal .svc-chevron-spacer {
  width: 34px;
}

/* Expanded notes panel */
#bikeServiceModal .accordion-body {
  background: #0f1317;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  margin-top: -8px;
  padding-top: 12px;
}

#bikeServiceModal .bike-service-notes {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-size-large);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Two-line date support (works with formatDateShort output) */
#bikeServiceModal .svc-date-md {
  line-height: 1.05;
}

#bikeServiceModal .svc-date-y {
  line-height: 1.05;
  opacity: 0.75;
  font-size: 0.85em;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  #bikeServiceModal .svc-row {
    grid-template-columns: 1fr 78px 78px 28px;
    column-gap: 8px;
  }
  #bikeServiceModal .accordion-button::after {
    right: 10px;
  }
  #bikeServiceModal .svc-chevron-spacer {
    width: 28px;
  }
  /* only stack on small screens */
  #bikeServiceModal .svc-date-md,
  #bikeServiceModal .svc-date-y {
    display: block;
  }
  #bikeServiceModal .svc-date {
    font-size: 1.2rem;
    line-height: 1.05;
  }
  .bike-service-category {
    font-size: var(--font-size-xlarge);
  }
  .svc-part .fw-semibold.d-flex.align-items-center.gap-2 {
    font-size: var(--font-size-large);
  }
}
/* Chevron animation */
#bikeServiceModal .accordion-button::after {
  /* keep your SVG + positioning from before */
  transition: transform 180ms ease, opacity 180ms ease;
  transform-origin: 50% 50%;
}

/* Expanded (not collapsed) = rotate up */
#bikeServiceModal .accordion-button:not(.collapsed)::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Collapsed = default (down) */
#bikeServiceModal .accordion-button.collapsed::after {
  transform: translateY(-50%) rotate(0deg);
}

.bike-service-icon-img {
  width: 46px;
  height: auto;
}

.bike-service-icon-img-sub {
  width: 38px;
  height: auto;
}

/* Make unit chips (deg, etc.) match your dark inputs */
.bike-acc-body .bike-unit-pill {
  height: 44px;
  /* match Bootstrap inputs */
  min-width: 64px;
  /* keeps 'deg' from looking tiny */
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  user-select: none;
}

/* Optional: when user focuses the row, make the unit chip feel "connected" */
.bike-acc-body .form-group:focus-within .bike-unit-pill {
  border-color: rgba(135, 206, 250, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(135, 206, 250, 0.12);
}

/* Optional: remove Bootstrap's default background on input-group-text */
.bike-acc-body .input-group-text.bike-unit-pill {
  background-clip: padding-box;
}

#bikesWrapper .riding-chk-card {
  min-height: 150px;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

#bikesWrapper .riding-chk-card-inner {
  row-gap: 0.95rem;
}

#bikesWrapper .riding-chk-card-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92px;
}

.bike-card-share-control {
  position: relative;
  overflow: visible;
}

.bike-card-share-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.25rem);
  z-index: 5;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.94);
  color: var(--accent-green);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.bike-card-share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 768px) {
  #bikesWrapper .riding-chk-card {
    min-height: 145px;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
}
@media (max-width: 576px) {
  #bikesWrapper .riding-chk-card-actions {
    width: 100%;
    margin-top: 0.15rem;
  }
  #bikesWrapper .riding-chk-card-actions .btn-group {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  #bikesWrapper .riding-chk-card-actions .btn-ride-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 50px;
    padding: 0.68rem 0.35rem;
    font-size: 1.45rem;
    line-height: 1.1;
  }
  #bikesWrapper .riding-chk-card-actions .btn-ride-preset i {
    margin-right: 0 !important;
  }
}
.btn-ride-preset.is-copied {
  background-color: var(--accent-green-dark) !important;
}

.btn-ride-preset.is-copy-error {
  background-color: var(--accent-red-dark) !important;
}

.bike-share-page {
  padding-bottom: 4rem;
}

.bike-share-report-bar {
  display: flex;
  justify-content: flex-end;
  max-width: 860px;
  margin: 1rem auto 0;
  padding: 0 1rem;
}

.bike-share-report-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 139, 139, 0.55);
  border-radius: 8px;
  background: transparent;
  color: var(--accent-red-light);
  font-weight: 800;
}

.bike-share-report-button:hover,
.bike-share-report-button:focus-visible {
  border-color: rgba(255, 139, 139, 0.9);
  color: #fff;
}

.bike-share-report-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bike-share-report-modal .modal-body {
  color: var(--light-text);
}

.bike-share-message-modal .modal-body {
  color: var(--light-text);
}

.bike-share-message-modal__details {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.bike-share-message-modal__close {
  min-width: 86px;
  padding: 0.48rem 1rem;
  border: 1px solid rgba(135, 206, 250, 0.6);
  border-radius: 6px;
  background: rgba(135, 206, 250, 0.08);
  color: var(--accent-blue-sky);
  font-weight: 800;
}

.bike-share-message-modal__close:hover,
.bike-share-message-modal__close:focus-visible {
  border-color: rgba(135, 206, 250, 0.95);
  color: #fff;
}

.bike-share-hero {
  width: 100%;
  padding: clamp(2rem, 5vw, 4rem) 1rem 2rem;
}

.bike-share-hero__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 860px;
  margin: 0 auto;
}

.bike-share-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border: 2px solid rgba(135, 206, 250, 0.7);
  border-radius: 50%;
  color: var(--accent-blue-sky);
  background: rgba(45, 45, 45, 0.55);
  font-size: 2rem;
}

.bike-share-hero__icon--muted {
  color: var(--accent-amber);
  border-color: rgba(255, 184, 108, 0.75);
}

.bike-share-eyebrow {
  color: var(--accent-amber);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bike-share-title {
  margin: 0.25rem 0;
  color: var(--accent-blue-sky);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
}

.bike-share-summary {
  color: var(--light-text);
  font-size: 1.1rem;
  opacity: 0.82;
}

.bike-share-signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 860px;
  margin: 1.5rem auto;
  padding: 1rem;
  border: 1px solid rgba(125, 206, 130, 0.35);
  border-radius: 8px;
  background: rgba(96, 169, 94, 0.12);
}

.bike-share-signup h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin: 0 0 0.3rem;
  color: var(--accent-green);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.22;
}

.bike-share-signup__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  white-space: nowrap;
}

.bike-share-signup__credit i {
  font-size: 0.98em;
  line-height: 1;
}

.bike-share-signup p {
  margin: 0;
  color: var(--light-text);
  font-size: 1rem;
  line-height: 1.45;
  opacity: 0.82;
}

.bike-share-signup__button {
  flex: 0 0 auto;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  white-space: nowrap;
}

.bike-share-details {
  max-width: 860px;
  margin: 0 auto;
}

.bike-share-section__title {
  margin-bottom: 0.75rem;
}

.bike-share-section__grid {
  display: grid;
  gap: 0;
}

.bike-share-empty {
  max-width: 860px;
  margin: 1.5rem auto;
}

@media (max-width: 700px) {
  .bike-share-hero__inner,
  .bike-share-signup {
    align-items: flex-start;
    flex-direction: column;
  }
  .bike-share-hero__icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    font-size: 1.7rem;
  }
  .bike-share-signup__button {
    width: 100%;
    text-align: center;
  }
  .bike-share-signup h2 {
    font-size: 1.18rem;
  }
  .bike-share-signup p {
    font-size: 0.98rem;
  }
  .bike-share-report-bar {
    justify-content: center;
  }
  .bike-share-report-button {
    min-width: 132px;
    justify-content: center;
  }
}
.ai-budget-currency-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  /* tighter spacing */
  flex-wrap: nowrap;
  /* ALWAYS same row */
}

.ai-budget-currency-row .ai-field {
  min-width: 0;
}

/* Budget: capped at 180px, no flex-grow */
.ai-budget-currency-row .ai-budget {
  flex: 0 0 auto;
  max-width: 180px;
}

.ai-budget-currency-row .ai-budget .form-select {
  max-width: 180px;
}

/* Currency: fixed and tight to budget */
.ai-budget-currency-row .ai-currency {
  flex: 0 0 auto;
}

/* Currency select wrapper */
.currency-select-wrap {
  position: relative;
  width: 120px;
  max-width: 120px;
}

.currency-select {
  width: 100%;
  padding-left: 2rem;
}

.currency-icon {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--dark-secondary);
  opacity: 0.85;
  pointer-events: none;
}

.ai-alert {
  background-color: #fffae9;
  color: #594301;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  padding: 15px;
}

[data-ai-section=bike-upgrades] {
  overflow-wrap: anywhere;
}

[data-ai-section=bike-upgrades] .bike-upgrade-parts {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

[data-ai-section=bike-upgrades] .bike-upgrade-part {
  list-style: none;
  padding-left: 0.1rem;
}

[data-ai-section=bike-upgrades] .bike-upgrade-options-label {
  margin-top: 0.25rem;
}

[data-ai-section=bike-upgrades] .bike-upgrade-options {
  line-height: 1.45;
  list-style: disc;
  margin: 0.25rem 0 0.35rem 0;
  padding-left: 1.25rem;
}

[data-ai-section=bike-upgrades] .bike-upgrade-options li {
  margin-bottom: 0.35rem;
  padding-left: 0.15rem;
}

[data-ai-section=bike-upgrades] .bike-upgrade-options li:last-child {
  margin-bottom: 0;
}

[data-ai-section=bike-upgrades] .bike-upgrade-option-name {
  color: var(--accent-blue-very-light);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  [data-ai-section=bike-upgrades] {
    font-size: 1.05rem;
    line-height: 1.5;
  }
  [data-ai-section=bike-upgrades] .bike-upgrade-options {
    padding-left: 1.1rem;
  }
}
.ai-result-nav-button {
  align-items: center;
  appearance: none;
  background: #202e3a;
  border: 1px solid rgba(135, 206, 250, 0.85);
  border-radius: 8px;
  color: var(--accent-blue-sky);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  margin-right: 0.65rem;
  order: 1;
  position: relative;
  width: 34px;
}

.ai-result-nav-button[hidden] {
  display: none !important;
}

.ai-result-nav-button:hover,
.ai-result-nav-button:focus {
  background: #26394a;
  color: var(--accent-blue-very-light);
}

.ai-result-nav-badge {
  align-items: center;
  background: var(--accent-red);
  border: 1px solid var(--dark-secondary);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: 0 0.25rem;
  position: absolute;
  right: -7px;
  top: -7px;
}

.ai-result-modal {
  background: linear-gradient(180deg, rgba(35, 48, 61, 0.98), rgba(30, 34, 42, 0.98));
  border: 1px solid rgba(135, 206, 250, 0.35);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  color: var(--light-text);
  overflow: hidden;
}

.ai-result-modal .modal-header {
  background: rgba(135, 206, 250, 0.07);
  border-bottom: 1px solid rgba(135, 206, 250, 0.2);
  padding: 0.9rem 1rem;
}

.ai-result-modal .modal-title {
  align-items: center;
  color: var(--accent-blue-sky);
  display: flex;
  font-size: 1.25rem;
  line-height: 1.2;
}

.ai-result-modal .modal-body {
  padding: 1rem;
}

.ai-result-modal .btn-close {
  height: 0.8rem;
  opacity: 0.72;
  width: 0.8rem;
}

.ai-result-modal__empty {
  color: var(--light-text);
  opacity: 0.78;
  text-align: center;
}

.ai-result-modal__item {
  background: rgba(14, 18, 24, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--accent-green);
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 1rem;
}

.ai-result-modal__item:last-child {
  margin-bottom: 0;
}

.ai-result-modal__item--error {
  border-left-color: var(--accent-red);
}

.ai-result-modal__item-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.ai-result-modal__item-header h3 {
  color: var(--light-text);
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.5rem 0;
}

.ai-result-modal__item-header span {
  color: var(--accent-blue-sky);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ai-result-modal__item--error .ai-result-modal__item-header span {
  color: var(--accent-red-light);
}

.ai-result-modal__item p {
  color: var(--light-text);
  margin: 0;
}

.ai-result-modal__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 1rem;
}

.ai-result-action {
  align-items: center;
  appearance: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  justify-content: center;
  line-height: 1.1;
  min-height: 2.35rem;
  min-width: 7rem;
  padding: 0.58rem 0.85rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.ai-result-action:hover,
.ai-result-action:focus {
  text-decoration: none;
  transform: translateY(-1px);
}

.ai-result-action--primary {
  background: var(--accent-blue-sky);
  border: 1px solid rgba(202, 223, 255, 0.35);
  color: #142230;
}

.ai-result-action--primary:hover,
.ai-result-action--primary:focus {
  background: var(--accent-blue-very-light);
  color: #142230;
}

.ai-result-action--secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--light-text);
}

.ai-result-action--secondary:hover,
.ai-result-action--secondary:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}

.ai-result-toast-container {
  top: 4.75rem !important;
  z-index: 1085;
}

.ai-result-toast {
  background: linear-gradient(180deg, rgba(36, 48, 60, 0.99), rgba(30, 35, 43, 0.99));
  border: 1px solid rgba(135, 206, 250, 0.38);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  color: var(--light-text);
  max-width: min(360px, 100vw - 2rem);
  overflow: hidden;
}

.ai-result-toast--error {
  border-color: rgba(255, 77, 77, 0.48);
}

.ai-result-toast__header {
  background: rgba(135, 206, 250, 0.08);
  border-bottom: 1px solid rgba(135, 206, 250, 0.18);
  color: var(--accent-blue-sky);
  padding: 0.75rem 0.85rem;
}

.ai-result-toast__header strong {
  font-size: 0.98rem;
  line-height: 1.2;
}

.ai-result-toast .btn-close {
  height: 0.75rem;
  opacity: 0.7;
  width: 0.75rem;
}

.ai-result-toast--error .ai-result-toast__header {
  color: var(--accent-red-light);
}

.ai-result-toast__body p {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 0.9rem 0;
}

.ai-result-toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .ai-result-toast-container {
    left: 0 !important;
    right: 0 !important;
    top: 4.25rem !important;
  }
  .ai-result-toast {
    margin-left: auto;
    margin-right: auto;
  }
}
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

.admin-page {
  color: var(--gray-light);
}

.ip-blocks-page__fail2ban-card {
  overflow-x: clip;
}

.ip-blocks-page__fail2ban-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  color: rgba(245, 247, 250, 0.82);
  font-size: var(--font-size-medium);
  font-weight: 700;
}

.ip-blocks-page__status-pill,
.ip-blocks-page__state-badge {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  display: inline-flex;
  font-size: var(--font-size-medium);
  font-weight: 800;
  line-height: 1.1;
  min-height: 28px;
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
}

.ip-blocks-page__status-pill--fresh,
.ip-blocks-page__state-badge--ready {
  background: rgba(125, 206, 130, 0.12);
  border-color: rgba(125, 206, 130, 0.42);
  color: var(--accent-green);
}

.ip-blocks-page__status-pill--stale,
.ip-blocks-page__status-pill--missing,
.ip-blocks-page__status-pill--invalid,
.ip-blocks-page__status-pill--unavailable,
.ip-blocks-page__state-badge--muted {
  background: rgba(255, 184, 108, 0.12);
  border-color: rgba(255, 184, 108, 0.42);
  color: var(--accent-amber);
}

.ip-blocks-page__state-badge--blocked {
  background: rgba(135, 206, 250, 0.12);
  border-color: rgba(135, 206, 250, 0.42);
  color: var(--accent-blue-sky);
}

.ip-blocks-page__inline-form {
  display: inline-flex;
  margin: 0;
}

.ip-blocks-page__fail2ban-table code,
.ip-blocks-page__fail2ban-path code,
.ip-blocks-page__ip {
  overflow-wrap: anywhere;
  white-space: normal;
}

.ip-blocks-page__fail2ban-alert {
  color: #1d1500 !important;
  font-weight: 800;
  text-shadow: none;
}

.ip-blocks-page__fail2ban-errors {
  background: rgba(255, 139, 139, 0.1);
  border: 1px solid rgba(255, 139, 139, 0.28);
  border-radius: 8px;
  color: var(--accent-red-light);
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
}

.ip-blocks-page__fail2ban-path {
  color: rgba(245, 247, 250, 0.74);
  font-size: var(--font-size-medium);
  overflow-wrap: anywhere;
}

.ip-blocks-page__block-all-btn {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  min-height: 38px;
}

@media (max-width: 767.98px) {
  .ip-blocks-page__fail2ban-table,
  .ip-blocks-page__fail2ban-table thead,
  .ip-blocks-page__fail2ban-table tbody,
  .ip-blocks-page__fail2ban-table tr,
  .ip-blocks-page__fail2ban-table th,
  .ip-blocks-page__fail2ban-table td {
    display: block;
    width: 100%;
  }
  .ip-blocks-page__fail2ban-table thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .ip-blocks-page__fail2ban-table tr {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 0.8rem;
    padding: 0.75rem;
  }
  .ip-blocks-page__fail2ban-table td {
    border: 0;
    padding: 0.45rem 0;
  }
  .ip-blocks-page__fail2ban-table td:last-child,
  .ip-blocks-page__fail2ban-table .btn,
  .ip-blocks-page__inline-form {
    width: 100%;
  }
}
.reported-items-admin-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.reported-items-admin-list {
  display: grid;
  gap: 1rem;
}

.reported-item-admin-card {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(38, 39, 43, 0.96);
  color: var(--light-text);
}

.reported-item-admin-card__actions,
.reported-item-admin-card__notify-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reported-item-admin-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.reported-item-admin-card__grid > div,
.reported-item-admin-card__note {
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.reported-item-admin-card__grid span,
.reported-item-admin-card__note span {
  display: block;
  color: var(--accent-amber);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.reported-item-admin-card__grid strong,
.reported-item-admin-card__grid small {
  display: block;
  overflow-wrap: anywhere;
}

.reported-item-admin-card__note {
  margin-bottom: 1rem;
}

.reported-item-admin-card__note p {
  margin: 0.25rem 0 0;
}

.reported-item-admin-card__actions {
  padding-top: 0.5rem;
  margin-bottom: 1rem;
}

.reported-item-admin-card__actions form {
  margin: 0;
}

.reported-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0.62rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--light-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.reported-action-btn i {
  font-size: 1.05rem;
}

.reported-action-btn:hover,
.reported-action-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.reported-action-btn--neutral {
  border-color: rgba(135, 206, 250, 0.5);
  color: var(--accent-blue-sky);
}

.reported-action-btn--success {
  border-color: rgba(125, 206, 130, 0.5);
  color: var(--accent-green);
}

.reported-action-btn--danger {
  border-color: rgba(255, 139, 139, 0.55);
  color: var(--accent-red-light);
}

.reported-action-btn--warning {
  border-color: rgba(255, 184, 108, 0.58);
  color: var(--accent-amber);
}

.reported-item-admin-card__inline-form {
  margin: 0;
}

.reported-item-admin-card__notify {
  display: grid;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.reported-item-admin-card__notify textarea {
  min-height: 110px;
}

.reported-item-admin-card__notify-actions {
  justify-content: space-between;
}

.reported-items-admin-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(125, 206, 130, 0.26);
  border-radius: 8px;
  background: rgba(125, 206, 130, 0.08);
  color: var(--light-text);
}

.reported-items-admin-empty i {
  color: var(--accent-green);
}

@media (max-width: 768px) {
  .reported-items-admin-page__header,
  .reported-item-admin-card__notify-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .reported-item-admin-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .reported-action-btn {
    width: 100%;
  }
}
.admin-page h1,
.admin-page h2,
.admin-page h3,
.admin-page h4,
.admin-page h5,
.admin-page h6,
.admin-page p,
.admin-page span,
.admin-page div,
.admin-page label,
.admin-page li,
.admin-page td,
.admin-page th,
.admin-page strong {
  color: inherit;
}

.admin-page .card,
.admin-page .card-body,
.admin-page .list-group-item,
.admin-page .table,
.admin-page .table thead th,
.admin-page .table tbody td {
  color: var(--gray-light);
}

.admin-page .text-muted {
  color: var(--gray-light) !important;
  opacity: 0.85;
}

.admin-page .system-health-pressure-alert {
  --bs-alert-color: #1d1500;
  --bs-alert-bg: #fff0b8;
  --bs-alert-border-color: #ffd966;
  color: #1d1500 !important;
  background: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
  font-weight: 800;
  text-shadow: none;
}

.admin-page .system-health-pressure-alert strong {
  color: #1d1500 !important;
}

.admin-page .form-control,
.admin-page .form-select {
  color: var(--gray-light);
}

.admin-page .form-select.form-input-default {
  background: rgba(20, 22, 30, 0.6) !important;
  color: var(--light-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.admin-page .form-select.form-input-default option {
  background: #161922;
  color: var(--light-text);
}

.referral-codes-page .card-body,
.referral-codes-page .card-body p,
.referral-codes-page .card-body span,
.referral-codes-page .card-body label,
.referral-codes-page .card-body div,
.referral-codes-page .table tbody td,
.referral-codes-page .table thead th {
  color: var(--light-text);
}

.referral-codes-page__mobile-card {
  font-size: var(--font-size-large);
  line-height: 1.5;
}

.referral-codes-page__mobile-card-header,
.referral-codes-page__mobile-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.referral-codes-page__mobile-card-header {
  margin-bottom: 1rem;
}

.referral-codes-page__mobile-code {
  font-size: var(--font-size-xlarge);
  font-weight: 700;
  color: var(--light-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.referral-codes-page__mobile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.referral-codes-page__mobile-stat {
  min-width: 0;
}

.referral-codes-page__mobile-label {
  display: block;
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.2rem;
}

.referral-codes-page__mobile-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.referral-codes-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.referral-codes-page__actions form {
  margin: 0;
}

.referral-codes-page__actions .btn-outline-danger {
  background: rgba(140, 51, 74, 0.92);
  border: 1px solid rgba(228, 126, 153, 0.7);
  color: #fff;
}

.referral-codes-page__actions .btn-outline-danger:hover,
.referral-codes-page__actions .btn-outline-danger:active {
  background: rgba(168, 58, 89, 0.98) !important;
  border-color: rgba(245, 153, 177, 0.9);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(120, 34, 62, 0.22);
}

.referral-codes-page__actions--table {
  min-width: 220px;
}

@media (min-width: 768px) {
  .referral-codes-page__actions--table {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    min-width: 150px;
  }
  .referral-codes-page__actions--table .btn,
  .referral-codes-page__actions--table form {
    width: 100%;
    max-width: 132px;
  }
  .referral-codes-page__actions--table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    border-radius: 0.95rem;
    font-size: var(--font-size-large);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
  }
  .referral-codes-page__actions--table .btn:hover,
  .referral-codes-page__actions--table .btn:active {
    transform: none;
  }
  .referral-codes-page__actions--table .btn-outline-light {
    background: rgba(124, 131, 238, 0.92);
    border: 1px solid rgba(171, 177, 255, 0.75);
    color: #fff;
  }
  .referral-codes-page__actions--table .btn-outline-light:hover,
  .referral-codes-page__actions--table .btn-outline-light:active {
    background: rgba(102, 109, 223, 0.98) !important;
    border-color: rgba(188, 193, 255, 0.9);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(76, 82, 170, 0.22);
  }
  .referral-codes-page__actions--table .btn:disabled,
  .referral-codes-page__actions--table .btn[aria-disabled=true] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
  }
}
@media (max-width: 575.98px) {
  .referral-codes-page__mobile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .referral-codes-page__mobile-footer {
    flex-direction: column;
  }
  .referral-codes-page__mobile-footer .btn,
  .referral-codes-page__actions form,
  .referral-codes-page__actions a,
  .referral-codes-page__actions button {
    width: 100%;
  }
  .referral-codes-page__actions {
    width: 100%;
    justify-content: stretch;
  }
}
.referral-codes-page .form-control.form-input-default,
.referral-codes-page .form-control.form-input-default:focus,
.referral-codes-page .form-control.form-input-default:hover,
.referral-codes-page .form-control.form-input-default:active {
  background: rgba(20, 22, 30, 0.6) !important;
  color: var(--light-text) !important;
}

.referral-codes-page .referral-code-input:-webkit-autofill,
.referral-codes-page .referral-code-input:-webkit-autofill:hover,
.referral-codes-page .referral-code-input:-webkit-autofill:focus,
.referral-codes-page .referral-code-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--light-text) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(20, 22, 30, 0.96) inset !important;
  box-shadow: 0 0 0 1000px rgba(20, 22, 30, 0.96) inset !important;
  caret-color: var(--light-text);
  transition: background-color 5000s ease-in-out 0s;
}

.admin-page .form-control::placeholder {
  color: var(--gray-light);
  opacity: 0.7;
}

.system-alerts-admin-page {
  overflow-x: clip;
}

.system-alerts-admin-page__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.system-alerts-admin-page__title-group {
  min-width: 0;
}

.system-alerts-admin-page__title-group p {
  color: rgba(245, 247, 250, 0.86);
  font-size: var(--font-size-large);
}

.system-alerts-admin-page__new-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
}

.system-alerts-admin-panel {
  background: rgba(42, 44, 50, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.25rem;
}

.system-alerts-admin-table-wrap {
  overflow-x: auto;
}

.system-alerts-admin-table {
  min-width: 900px;
}

.system-alerts-admin-table thead th {
  color: var(--light-text);
  font-size: var(--font-size-medium);
  font-weight: 800;
  white-space: nowrap;
}

.system-alerts-admin-table tbody td {
  color: var(--light-text);
  font-size: var(--font-size-large);
  line-height: 1.45;
  vertical-align: middle;
}

.system-alerts-admin-table__title {
  max-width: 280px;
  overflow-wrap: anywhere;
}

.system-alerts-admin-table__message {
  max-width: 280px;
  overflow-wrap: anywhere;
}

.system-alerts-admin-mobile-list {
  display: grid;
  gap: 1rem;
}

.system-alerts-admin-mobile-card {
  background: linear-gradient(180deg, rgba(47, 50, 58, 0.98), rgba(33, 36, 43, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--light-text);
  padding: 1rem;
}

.system-alerts-admin-mobile-card,
.system-alerts-admin-mobile-card div,
.system-alerts-admin-mobile-card span,
.system-alerts-admin-mobile-card strong,
.system-alerts-admin-mobile-card p {
  color: inherit;
}

.system-alerts-admin-mobile-card__header {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.system-alerts-admin-mobile-card__title-wrap {
  min-width: 0;
}

.system-alerts-admin-mobile-card__title-wrap h2 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.system-alerts-admin-mobile-card__title-wrap p {
  color: rgba(245, 247, 250, 0.78);
  font-size: 1rem;
  line-height: 1.35;
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
}

.system-alerts-admin-mobile-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.system-alerts-admin-mobile-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.system-alerts-admin-mobile-card__stat {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  min-width: 0;
  padding: 0.75rem;
}

.system-alerts-admin-mobile-card__stat span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-medium);
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.system-alerts-admin-mobile-card__stat strong {
  color: #f8fafc;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.system-alerts-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.system-alerts-admin-actions form {
  margin: 0;
}

.system-alerts-admin-actions .btn {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  line-height: 1.15;
  min-height: 40px;
  text-align: center;
  white-space: normal;
}

.system-alerts-admin-actions--table {
  justify-content: flex-end;
  min-width: 270px;
}

.system-alerts-admin-actions--table .btn,
.system-alerts-admin-actions--table form {
  min-width: 86px;
}

.system-alerts-admin-actions--mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.system-alerts-admin-actions--mobile .btn,
.system-alerts-admin-actions--mobile form {
  width: 100%;
}

.system-alerts-admin-actions .btn.is-loading {
  cursor: wait;
  opacity: 0.68;
}

.system-alerts-admin-empty {
  color: rgba(245, 247, 250, 0.86);
  font-size: var(--font-size-large);
}

.system-alert-activation-modal {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.system-alert-activation-modal .modal-title {
  color: var(--light-text);
  font-weight: 800;
}

.system-alert-activation-modal__date-input {
  -webkit-appearance: auto;
  appearance: auto;
  background: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 6px solid var(--accent-green);
  border-radius: 6px;
  color: #111827;
  color-scheme: light;
  cursor: pointer;
  font-size: 1.05rem;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  width: 100%;
}

.system-alert-activation-modal__date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  display: block;
  opacity: 1;
}

.system-alert-activation-modal__date-input:focus {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 0.18rem rgba(123, 214, 177, 0.22);
  outline: 0;
}

.system-alert-activation-modal__help {
  color: rgba(245, 247, 250, 0.76);
  font-size: 0.98rem;
  line-height: 1.4;
}

.system-alert-activation-modal__error {
  color: var(--accent-red-light);
  font-size: 0.98rem;
  font-weight: 800;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .system-alerts-admin-mobile-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .system-alerts-admin-mobile-card__stat--wide {
    grid-column: 1/-1;
  }
  .system-alerts-admin-actions--mobile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .system-alerts-admin-page__header {
    align-items: stretch;
  }
  .system-alerts-admin-page__new-button {
    width: 100%;
  }
  .system-alerts-admin-panel {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding: 0.75rem;
  }
}
.user-alerts-admin-table {
  min-width: 1040px;
}

.system-alerts-admin-mobile-card__stat small {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

.user-alert-form-page {
  overflow-x: clip;
}

.user-alert-form-page__target-summary {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 6px solid var(--accent-green);
  border-radius: 8px;
  color: var(--light-text);
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem 1rem;
}

.user-alert-form-page__target-summary strong,
.user-alert-form-page__target-summary span {
  overflow-wrap: anywhere;
}

.admin-user-view-page {
  overflow-x: clip;
}

.admin-user-view-page__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.admin-user-view-page__title {
  min-width: 0;
}

.admin-user-view-page__title p {
  color: rgba(245, 247, 250, 0.86);
  font-size: var(--font-size-large);
  overflow-wrap: anywhere;
}

.admin-user-view-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.admin-user-view-page__actions .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
  white-space: normal;
}

.admin-user-view-page__counts .card {
  background: rgba(42, 44, 50, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--light-text);
}

.admin-user-view-page__counts .card-body {
  padding: 0.9rem 0.75rem;
}

.admin-user-view-page__counts .small {
  color: rgba(245, 247, 250, 0.72);
  font-weight: 800;
  line-height: 1.2;
}

.admin-user-view-page__counts .fs-2 {
  color: #fff;
  font-size: 1.75rem !important;
  line-height: 1.1;
}

.admin-user-view-page__record-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.admin-user-view-page__record-grid .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
  white-space: normal;
}

.admin-user-view-page .card {
  border-radius: 8px;
}

.admin-user-view-page .card-body {
  min-width: 0;
}

.admin-user-view-page .card-body p {
  display: grid;
  gap: 0.25rem 0.75rem;
  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
  line-height: 1.35;
  margin-bottom: 0.65rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-user-view-page .card-body p strong {
  overflow-wrap: normal;
}

.admin-user-view-page .card-body h3 {
  color: inherit;
  font-weight: 800;
}

.admin-user-view-page__table-wrap {
  overflow-x: auto;
}

.admin-user-view-page__mobile-table {
  table-layout: fixed;
}

.admin-user-view-page__mobile-table th,
.admin-user-view-page__mobile-table td {
  overflow-wrap: anywhere;
}

.admin-user-view-page .admin-dark-list-row {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-width: 0;
}

.admin-user-view-page .admin-dark-list-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-suspension-modal__user-summary {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 6px solid var(--accent-amber);
}

.account-suspension-modal__channels {
  display: grid;
  gap: 0.55rem;
}

.account-suspension-modal__channel {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  margin: 0;
  min-height: 32px;
  padding-left: 0;
}

.account-suspension-modal__channels .form-check-input {
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0;
}

.account-suspension-modal__channels .form-check-label {
  cursor: pointer;
  line-height: 1.25;
  user-select: none;
}

.account-suspension-modal__result-list {
  display: grid;
  gap: 0.35rem;
  padding-left: 1.15rem;
}

.account-suspension-modal input:not([type=checkbox]),
.account-suspension-modal textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--light-text);
}

.account-suspension-modal input:not([type=checkbox]):focus,
.account-suspension-modal textarea:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 0.2rem rgba(255, 184, 108, 0.15);
  color: #fff;
}

@media (max-width: 767.98px) {
  .admin-user-view-page__header {
    align-items: stretch;
  }
  .admin-user-view-page__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
  }
  .admin-user-view-page__actions .btn {
    width: 100%;
  }
  .admin-user-view-page__counts > [class*=col-] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .admin-user-view-page__record-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-user-view-page .card-body p {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-user-view-page__table-wrap {
    overflow-x: visible;
  }
  .admin-user-view-page__mobile-table,
  .admin-user-view-page__mobile-table thead,
  .admin-user-view-page__mobile-table tbody,
  .admin-user-view-page__mobile-table tr,
  .admin-user-view-page__mobile-table th,
  .admin-user-view-page__mobile-table td {
    display: block;
    width: 100%;
  }
  .admin-user-view-page__mobile-table thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .admin-user-view-page__mobile-table tr {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 0.8rem;
    padding: 0.75rem;
  }
  .admin-user-view-page__mobile-table td {
    border: 0;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    padding: 0.45rem 0;
  }
  .admin-user-view-page__mobile-table td::before {
    color: rgba(255, 255, 255, 0.72);
    content: attr(data-label);
    font-weight: 800;
  }
  .admin-user-view-page .admin-dark-list-row {
    display: grid;
    gap: 0.35rem;
  }
  .admin-user-view-page__modal-footer {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-user-view-page__modal-footer .btn,
  .admin-user-view-page__modal-footer form {
    width: 100%;
  }
}
.admin-users-page {
  overflow-x: clip;
}

.admin-users-page__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-users-page__title-group {
  min-width: 0;
}

.admin-users-page__title-group p {
  color: rgba(245, 247, 250, 0.82) !important;
  font-size: var(--font-size-large);
}

.admin-users-page__top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.admin-users-page__top-actions .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

.admin-users-search-panel,
.admin-users-list-panel {
  background: rgba(42, 44, 50, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--light-text);
  padding: 1.25rem;
}

.admin-users-search-panel {
  margin-bottom: 1.25rem;
}

.admin-users-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-users-search-form .form-control {
  flex: 1 1 260px;
  min-width: 0;
}

.admin-users-search-form .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
}

.admin-users-search-form__clear {
  min-width: 86px;
}

.admin-users-list-panel__meta {
  color: rgba(245, 247, 250, 0.78);
  font-size: var(--font-size-medium);
  font-weight: 700;
  margin-bottom: 1rem;
}

.admin-users-table-wrap {
  overflow-x: auto;
}

.admin-users-table {
  min-width: 980px;
}

.admin-users-table thead th {
  color: var(--light-text);
  font-size: var(--font-size-medium);
  font-weight: 800;
  white-space: nowrap;
}

.admin-users-table tbody td {
  color: var(--light-text);
  font-size: var(--font-size-large);
  line-height: 1.45;
  vertical-align: middle;
}

.admin-users-table__account,
.admin-users-table__name,
.admin-users-table__email {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-users-table__email {
  color: var(--accent-blue-very-light);
  text-decoration: none;
}

.admin-users-table__email:hover,
.admin-users-table__email:focus {
  color: #fff;
  text-decoration: underline;
}

.admin-users-mobile-list {
  display: grid;
  gap: 1rem;
}

.admin-users-mobile-card {
  background: linear-gradient(180deg, rgba(47, 50, 58, 0.98), rgba(33, 36, 43, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--light-text);
  padding: 1rem;
}

.admin-users-mobile-card,
.admin-users-mobile-card div,
.admin-users-mobile-card span,
.admin-users-mobile-card strong,
.admin-users-mobile-card a {
  color: inherit;
}

.admin-users-mobile-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.admin-users-mobile-card__identity {
  min-width: 0;
}

.admin-users-mobile-card__identity h2 {
  color: #fff;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.22;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-users-mobile-card__identity a {
  color: var(--accent-blue-very-light);
  display: inline-block;
  font-size: 0.98rem;
  line-height: 1.3;
  margin-top: 0.3rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.admin-users-mobile-card__identity a:hover,
.admin-users-mobile-card__identity a:focus {
  color: #fff;
  text-decoration: underline;
}

.admin-users-mobile-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-users-mobile-card__stat {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  min-width: 0;
  padding: 0.75rem;
}

.admin-users-mobile-card__stat span {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: var(--font-size-medium);
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.admin-users-mobile-card__stat strong {
  color: #f8fafc;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.admin-users-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.admin-users-actions .btn {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  line-height: 1.15;
  min-height: 40px;
  text-align: center;
}

.admin-users-actions--table {
  justify-content: flex-end;
  min-width: 170px;
}

.admin-users-actions--mobile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-users-empty {
  color: rgba(245, 247, 250, 0.86) !important;
  font-size: var(--font-size-large);
}

.admin-users-restore-modal .modal-title {
  font-weight: 800;
}

.admin-users-restore-modal .modal-body,
.admin-users-restore-modal .modal-body p,
.admin-users-restore-modal .modal-body label,
.admin-users-restore-modal .modal-body div {
  color: var(--light-text);
}

.admin-users-restore-modal__footer {
  gap: 0.75rem;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .admin-users-mobile-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-users-mobile-card__stat--wide {
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .admin-users-page__header {
    align-items: stretch;
  }
  .admin-users-page__top-actions,
  .admin-users-page__top-actions .btn,
  .admin-users-search-form .btn,
  .admin-users-search-form__clear {
    width: 100%;
  }
  .admin-users-search-panel,
  .admin-users-list-panel {
    padding: 0.85rem;
  }
}
@media (max-width: 575.98px) {
  .admin-users-mobile-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-users-mobile-card__header .badge {
    justify-self: flex-start;
  }
  .admin-users-actions--mobile {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-users-restore-modal__footer .btn {
    width: 100%;
  }
}
.admin-dark-list-row {
  background-color: var(--bs-dark);
  color: var(--bs-light);
  border-color: var(--bs-secondary-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1rem;
  transition: background-color 0.2s ease;
}

.admin-dark-list-row:hover {
  background-color: #3a3a3a;
}

.admin-dark-list-row .secondary-text {
  color: rgba(255, 255, 255, 0.7);
}

.admin-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.admin-search-form .form-control {
  min-width: 0;
  flex: 1 1 100%;
}

.admin-search-form .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .admin-search-form .form-control {
    flex: 1 1 220px;
  }
  .admin-search-form .btn {
    width: auto;
  }
}
.route-stats-page h1 {
  font-size: var(--font-size-xxlarge);
  line-height: 1.1;
}
.route-stats-page__filters .btn {
  font-size: var(--font-size-medium);
}
.route-stats-page__view-toggle {
  margin-left: auto;
}
.route-stats-page__summary-card {
  font-size: var(--font-size-large);
  line-height: 1.55;
}
.route-stats-page__summary-card strong {
  font-size: var(--font-size-large);
  font-weight: 700;
}
.route-stats-page__table-card {
  overflow: hidden;
}
.route-stats-page .route-stats-mobile-card {
  font-size: var(--font-size-large);
  line-height: 1.5;
}
.route-stats-page .route-stats-mobile-card__header,
.route-stats-page .route-stats-mobile-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.route-stats-page .route-stats-mobile-card__header {
  margin-bottom: 1rem;
}
.route-stats-page .route-stats-mobile-card__route,
.route-stats-page .route-stats-table__route code {
  font-size: var(--font-size-medium);
  color: var(--accent-blue-account);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.route-stats-page .route-stats-mobile-card__hits {
  text-align: right;
}
.route-stats-page .route-stats-mobile-card__hits-label,
.route-stats-page .route-stats-mobile-card__label {
  display: block;
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}
.route-stats-page .route-stats-mobile-card__hits-value,
.route-stats-page .route-stats-mobile-card__stat strong,
.route-stats-page .route-stats-mobile-card__last-visit {
  font-size: var(--font-size-large);
}
.route-stats-page .route-stats-mobile-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.route-stats-page .route-stats-mobile-card__stat {
  min-width: 0;
}
.route-stats-page .route-stats-mobile-card__footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.route-stats-page .route-stats-table thead th {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.route-stats-page .route-stats-table tbody td {
  font-size: var(--font-size-large);
  line-height: 1.45;
}
.route-stats-page--quick .route-stats-page__extended {
  display: none;
}
.route-stats-page--quick .route-stats-mobile-card__grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 767.98px) {
  .route-stats-page__view-toggle {
    margin-left: 0;
  }
}
.db-admin-page .db-admin-config-card {
  position: relative;
  padding-top: 1.5rem;
}
.db-admin-page .db-admin-intro-panel {
  background: linear-gradient(135deg, rgba(122, 182, 243, 0.12), rgba(109, 114, 195, 0.1), rgba(45, 45, 45, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}
.db-admin-page .db-admin-intro-panel p,
.db-admin-page .db-admin-intro-panel .small,
.db-admin-page .db-admin-summary-card .small,
.db-admin-page .text-muted {
  color: rgba(245, 247, 250, 0.76) !important;
}
.db-admin-page .db-admin-summary-card {
  background: linear-gradient(180deg, rgba(60, 60, 60, 0.96), rgba(48, 48, 48, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  min-height: 170px;
}
.db-admin-page .db-admin-form-section-title {
  color: var(--accent-amber);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.db-admin-page input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.3);
  opacity: 1;
  cursor: pointer;
}
.db-admin-page input[type=number] {
  color-scheme: dark;
}
.db-admin-page input[type=number]::-webkit-outer-spin-button,
.db-admin-page input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
  filter: invert(1) brightness(1.25);
}
.db-admin-page input[type=time],
.db-admin-page input[type=number] {
  padding-right: 2.75rem;
}
.db-admin-page .form-select,
.db-admin-page .form-control {
  background-color: #1f2027;
  color: var(--light-text);
  border-color: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}
.db-admin-page .form-select:focus,
.db-admin-page .form-control:focus {
  background-color: #1f2027;
  color: var(--light-text);
  border-color: rgba(122, 182, 243, 0.65);
  box-shadow: 0 0 0 0.2rem rgba(122, 182, 243, 0.2);
}
.db-admin-page .db-admin-offsite-group {
  background: linear-gradient(180deg, rgba(122, 182, 243, 0.08), rgba(109, 114, 195, 0.06));
  border: 1px solid rgba(122, 182, 243, 0.18);
}
.db-admin-page .db-admin-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.db-admin-page .db-admin-section-title-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.db-admin-page .db-admin-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--light-text) !important;
  text-decoration: none;
  line-height: 1;
  z-index: 2;
}
.db-admin-page .db-admin-help-trigger i {
  font-size: 1.6rem;
}
.db-admin-page .db-admin-summary-value {
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}
.db-admin-page .db-admin-summary-title {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.db-admin-page .db-admin-deleted-items-card .form-select {
  min-height: 3rem;
}
.db-admin-page .db-admin-deleted-items-stat,
.db-admin-page .db-admin-deleted-items-latest {
  background: rgba(27, 32, 40, 0.38);
  border-color: rgba(123, 214, 177, 0.18) !important;
}
.db-admin-page .db-admin-deleted-items-action {
  display: grid;
  gap: 0.85rem;
}
.db-admin-page .db-admin-deleted-items-action__button {
  min-height: 3.4rem;
  font-size: 1.08rem;
  font-weight: 800;
}
.db-admin-page .db-admin-deleted-items-bulk {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 193, 7, 0.22);
}
.db-admin-page .db-admin-deleted-items-bulk__copy {
  min-width: 0;
}
.db-admin-page .db-admin-deleted-items-bulk__form {
  display: flex;
}
.db-admin-page .db-admin-deleted-items-bulk__button {
  min-height: 3.1rem;
  width: 100%;
  font-weight: 800;
}
.db-admin-page .db-admin-mobile-card-table {
  width: 100%;
}
.db-admin-page .db-admin-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.db-admin-page .db-admin-jobs-table th,
.db-admin-page .db-admin-jobs-table td {
  vertical-align: middle;
}
.db-admin-page .db-admin-jobs-table td {
  overflow-wrap: anywhere;
}
.db-admin-page .db-admin-jobs-table .badge {
  white-space: nowrap;
}
.db-admin-page .db-admin-manual-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.db-admin-page .db-admin-manual-actions__form {
  width: 100%;
  display: flex;
  justify-content: center;
}
.db-admin-page .db-admin-manual-actions__button {
  width: 100%;
  max-width: 100%;
  min-height: 4.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border-radius: 1.85rem;
}
.db-admin-page .db-admin-action-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(123, 214, 177, 0.28);
  background: linear-gradient(135deg, rgba(61, 112, 103, 0.28), rgba(24, 28, 34, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.db-admin-page .db-admin-action-progress__icon-wrap {
  width: 64px;
  height: 56px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-admin-page .db-admin-action-progress__icon {
  font-size: 2.2rem;
  color: #94f0cf;
  filter: drop-shadow(0 0 14px rgba(76, 214, 168, 0.3));
  animation: db-admin-database-pulse 1.6s ease-in-out infinite;
}
.db-admin-page .db-admin-action-progress__text {
  min-width: 0;
}
.db-admin-page .db-admin-action-progress__title {
  color: #d8fff1;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.db-admin-page .db-admin-action-progress__subtitle {
  color: rgba(226, 247, 239, 0.82);
  font-size: 0.95rem;
  margin-top: 0.2rem;
}
.db-admin-page .db-admin-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}
.db-admin-page .form-acc-btn {
  color: var(--accent-amber) !important;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 1.2rem 1.35rem !important;
}
.db-admin-page .form-acc-btn:not(.collapsed) {
  color: var(--accent-amber) !important;
}
.db-admin-page .form-acc-btn::after {
  filter: brightness(0) saturate(100%) invert(78%) sepia(47%) saturate(1418%) hue-rotate(332deg) brightness(102%) contrast(101%);
}
.db-admin-page .db-admin-sub-accordion-btn {
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0.95rem 1.15rem !important;
}
.db-admin-page .db-admin-restore-summary-tile {
  background: rgba(64, 69, 83, 0.48);
}
.db-admin-page .db-admin-restore-summary-tile .small {
  color: rgba(241, 244, 248, 0.86) !important;
}
.db-admin-page .db-admin-restore-summary-tile .fw-bold {
  color: #f7fafc !important;
}
.db-admin-page .db-admin-restore-summary-tile .text-success {
  color: #34d27b !important;
}
.db-admin-page .db-admin-restore-summary-tile .text-danger {
  color: #ff8c9f !important;
}
.db-admin-page .db-admin-restore-latest-panel {
  background: rgba(64, 69, 83, 0.38);
}
.db-admin-page .db-admin-restore-latest-panel__title {
  color: #f4f7fb !important;
}
.db-admin-page .db-admin-restore-latest-panel,
.db-admin-page .db-admin-restore-latest-panel div,
.db-admin-page .db-admin-restore-latest-panel span {
  color: var(--light-text);
}
.db-admin-page .db-admin-restore-latest-panel code {
  color: #ff6db2;
  font-size: 0.95em;
}
.db-admin-page .db-admin-restore-mobile-card {
  background: linear-gradient(180deg, rgba(46, 49, 58, 0.98), rgba(34, 36, 43, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--light-text);
  font-size: var(--font-size-large);
  line-height: 1.5;
}
.db-admin-page .db-admin-restore-mobile-card,
.db-admin-page .db-admin-restore-mobile-card div,
.db-admin-page .db-admin-restore-mobile-card span,
.db-admin-page .db-admin-restore-mobile-card strong,
.db-admin-page .db-admin-restore-mobile-card label {
  color: inherit;
}
.db-admin-page .db-admin-restore-mobile-card__header,
.db-admin-page .db-admin-restore-mobile-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.db-admin-page .db-admin-restore-mobile-card__header {
  margin-bottom: 1rem;
}
.db-admin-page .db-admin-restore-mobile-card__title {
  font-size: var(--font-size-xlarge);
  font-weight: 700;
  color: #f7fafc !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.db-admin-page .db-admin-restore-mobile-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.db-admin-page .db-admin-restore-mobile-card__label {
  display: block;
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(241, 244, 248, 0.88) !important;
  margin-bottom: 0.2rem;
}
.db-admin-page .db-admin-restore-mobile-card__stat strong,
.db-admin-page .db-admin-restore-mobile-card__stat div,
.db-admin-page .db-admin-restore-mobile-card__stat span {
  color: #f1f5f9 !important;
}
.db-admin-page .db-admin-restore-mobile-card__update {
  margin-bottom: 1rem;
}
.db-admin-page .db-admin-restore-mobile-card__update-card {
  background: rgba(55, 60, 72, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1rem;
}
.db-admin-page .db-admin-restore-mobile-card__update-title {
  color: #f4f7fb !important;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}
.db-admin-page .db-admin-restore-mobile-card__update .form-select,
.db-admin-page .db-admin-restore-mobile-card__update .form-control {
  background-color: rgba(20, 22, 30, 0.88);
  color: var(--light-text);
  border-color: rgba(255, 255, 255, 0.1);
}
.db-admin-page .db-admin-restore-mobile-card__update .form-select:focus,
.db-admin-page .db-admin-restore-mobile-card__update .form-control:focus {
  background-color: rgba(20, 22, 30, 0.96);
  color: var(--light-text);
}
.db-admin-page .db-admin-restore-mobile-card__update .btn {
  width: 100%;
}
.db-admin-page .db-admin-restore-mobile-card__actions {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.db-admin-page .db-admin-restore-mobile-card__actions form {
  margin: 0;
  width: 100%;
}
.db-admin-page .db-admin-restore-mobile-card__actions .btn,
.db-admin-page .db-admin-restore-mobile-card__actions form .btn {
  width: 100%;
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  white-space: normal;
  border-radius: 1.3rem;
}
.db-admin-page .db-admin-restore-mobile-card__actions .btn-outline-primary {
  background: rgba(26, 95, 209, 0.2);
  border-color: rgba(78, 146, 255, 0.55);
  color: #8ec0ff !important;
}
.db-admin-page .db-admin-restore-mobile-card__actions .btn-outline-primary:hover,
.db-admin-page .db-admin-restore-mobile-card__actions .btn-outline-primary:active {
  background: rgba(31, 112, 240, 0.28) !important;
  border-color: rgba(111, 171, 255, 0.8);
  color: #d9ebff !important;
}
.db-admin-page .db-admin-restore-mobile-card__actions .btn-outline-danger {
  background: rgba(167, 46, 69, 0.2);
  border-color: rgba(232, 105, 131, 0.55);
  color: #ff8da2 !important;
}
.db-admin-page .db-admin-restore-mobile-card__actions .btn-outline-danger:hover,
.db-admin-page .db-admin-restore-mobile-card__actions .btn-outline-danger:active {
  background: rgba(193, 54, 82, 0.28) !important;
  border-color: rgba(245, 137, 159, 0.8);
  color: #ffe1e7 !important;
}
.db-admin-page .db-admin-restore-mobile-card__actions .btn:disabled,
.db-admin-page .db-admin-restore-mobile-card__actions .btn[aria-disabled=true] {
  opacity: 0.72;
  box-shadow: none;
  cursor: not-allowed;
}
.db-admin-page .db-admin-restore-log-entry {
  background: rgba(55, 60, 72, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  padding: 0.85rem 0.95rem;
}
.db-admin-page .db-admin-restore-log-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.db-admin-page .db-admin-modal-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(33, 52, 85, 0.34), rgba(22, 27, 35, 0.96));
  border: 1px solid rgba(108, 166, 255, 0.22);
}
.db-admin-page .db-admin-modal-progress__spinner {
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
}
.db-admin-page .db-admin-modal-progress__title {
  color: #edf6ff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.db-admin-page .db-admin-modal-progress__text {
  color: rgba(232, 241, 250, 0.86);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.db-admin-page .db-admin-restore-mobile-card--unavailable {
  background: linear-gradient(180deg, rgba(42, 45, 53, 0.9), rgba(31, 33, 39, 0.92));
  border-style: dashed;
}
@media (min-width: 768px) {
  .db-admin-page .db-admin-restore-mobile-card__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@keyframes db-admin-database-pulse {
  0%, 100% {
    transform: translateY(0) scaleX(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-2px) scaleX(1.03);
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .db-admin-page .db-admin-jobs-table {
    min-width: 760px;
  }
}
.app-events-admin-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.app-events-summary-card {
  background: rgba(20, 28, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.app-events-summary-card--new {
  border-color: rgba(255, 96, 96, 0.45);
}

.app-events-filter-panel .form-label-default {
  margin-bottom: 0.35rem;
}

.app-events-admin-page__result-meta,
.app-events-pagination {
  color: rgba(255, 255, 255, 0.78);
}

.app-events-admin-page__result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-events-admin-page__delete-all {
  white-space: nowrap;
}

.app-events-timezone-label,
.app-events-timezone-note {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  font-weight: 600;
}

.app-events-table th,
.app-events-table td {
  vertical-align: middle;
}

.app-events-alert-config-panel__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-events-alert-config-panel__info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(135, 206, 250, 0.45);
  border-radius: 999px;
  background: rgba(135, 206, 250, 0.08);
  color: var(--accent-blue-sky);
  line-height: 1;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.app-events-alert-config-panel__info-button i {
  font-size: 1rem;
}

.app-events-alert-config-panel__info-button:hover,
.app-events-alert-config-panel__info-button:focus-visible {
  background: rgba(135, 206, 250, 0.16);
  border-color: rgba(135, 206, 250, 0.8);
  color: #fff;
  transform: translateY(-1px);
}

.app-event-alert-digest-info-modal__intro {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1rem;
}

.app-event-alert-digest-info-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.app-event-alert-digest-info-modal__item {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.app-event-alert-digest-info-modal__item strong {
  display: block;
  color: #f5f7fb;
  margin-bottom: 0.25rem;
}

.app-event-alert-digest-info-modal__item p {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  overflow-wrap: anywhere;
}

.app-events-record-title {
  color: #f5f7fb;
  font-weight: 700;
  line-height: 1.25;
  max-width: 42rem;
  overflow-wrap: anywhere;
}

.app-events-record-source,
.app-events-record-path {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.app-event-status,
.app-event-severity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.app-event-status--new {
  background: rgba(255, 77, 77, 0.18);
  color: #ffb3b3;
  border: 1px solid rgba(255, 77, 77, 0.38);
}

.app-event-status--pending {
  background: rgba(255, 193, 7, 0.16);
  color: #ffe08a;
  border: 1px solid rgba(255, 193, 7, 0.34);
}

.app-event-status--worked_on {
  background: rgba(66, 153, 225, 0.16);
  color: #a9d6ff;
  border: 1px solid rgba(66, 153, 225, 0.34);
}

.app-event-status--fixed {
  background: rgba(72, 187, 120, 0.16);
  color: #a8f0c0;
  border: 1px solid rgba(72, 187, 120, 0.34);
}

.app-event-severity--info {
  background: rgba(98, 182, 255, 0.14);
  color: #b8dcff;
}

.app-event-severity--warning {
  background: rgba(255, 193, 7, 0.14);
  color: #ffe08a;
}

.app-event-severity--error,
.app-event-severity--critical {
  background: rgba(255, 77, 77, 0.14);
  color: #ffb3b3;
}

.app-events-mobile-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.app-events-mobile-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.app-events-mobile-card__grid span,
.app-event-detail-page__facts span,
.app-event-detail-page__count span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.app-events-mobile-card__grid strong,
.app-event-detail-page__facts strong,
.app-event-detail-page__count strong {
  color: #f5f7fb;
  overflow-wrap: anywhere;
}

.app-event-detail-page__count {
  min-width: 8rem;
  text-align: right;
}

.app-event-detail-page__count strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.app-event-detail-page__facts code {
  display: block;
  color: #d7e7ff;
  overflow-wrap: anywhere;
  white-space: normal;
}

.app-event-detail-list {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  margin-bottom: 0;
}

.app-event-detail-list dt {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 700;
}

.app-event-detail-list dd {
  color: #f5f7fb;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.app-event-code-block {
  max-height: 30rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  color: #d7e7ff;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.app-event-status-history {
  display: grid;
  gap: 0.85rem;
}

.app-event-status-history__item {
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}

@media (max-width: 767.98px) {
  .app-events-admin-page__header {
    flex-direction: column;
  }
  .app-events-admin-page__header .btn {
    width: 100%;
  }
  .app-events-admin-page__result-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .app-events-admin-page__delete-all {
    width: 100%;
  }
  .app-event-detail-page__count {
    width: 100%;
    text-align: left;
  }
  .app-event-detail-list {
    grid-template-columns: 1fr;
  }
  .app-event-alert-digest-info-modal__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .db-admin-page .db-admin-action-progress {
    align-items: flex-start;
  }
  .db-admin-page .db-admin-action-progress__icon-wrap {
    width: 56px;
    height: 50px;
    flex-basis: 56px;
  }
  .db-admin-page .db-admin-top-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .db-admin-page .db-admin-section-header {
    align-items: flex-start;
  }
  .db-admin-page .db-admin-section-title-group {
    width: 100%;
  }
  .db-admin-page .db-admin-help-trigger {
    top: 0.9rem;
    right: 0.9rem;
  }
  .db-admin-page .db-admin-summary-card {
    min-height: auto;
  }
  .db-admin-page .db-admin-mobile-card-table {
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }
  .db-admin-page .db-admin-mobile-card-table thead {
    display: none;
  }
  .db-admin-page .db-admin-mobile-card-table tbody,
  .db-admin-page .db-admin-mobile-card-table tr,
  .db-admin-page .db-admin-mobile-card-table td {
    display: block;
    width: 100%;
  }
  .db-admin-page .db-admin-mobile-card-table tr {
    box-sizing: border-box;
    margin-bottom: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: rgba(46, 49, 58, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
  }
  .db-admin-page .db-admin-mobile-card-table tr:last-child {
    margin-bottom: 0;
  }
  .db-admin-page .db-admin-mobile-card-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: right;
    overflow-wrap: anywhere;
    color: #f7fafc !important;
    font-weight: 700;
  }
  .db-admin-page .db-admin-mobile-card-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--accent-amber);
    font-weight: 800;
    text-align: left;
  }
  .db-admin-page .db-admin-mobile-card-table td:first-child {
    color: var(--accent-blue-very-light) !important;
    font-size: 1.05rem;
  }
  .db-admin-page .db-admin-retention-snapshot-table tr {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(55, 60, 72, 0.98), rgba(38, 41, 50, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .db-admin-page .db-admin-retention-snapshot-table tr::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--db-retention-accent, var(--accent-amber));
  }
  .db-admin-page .db-admin-retention-snapshot-table td::before,
  .db-admin-page .db-admin-retention-snapshot-table td:first-child {
    color: var(--db-retention-accent, var(--accent-amber)) !important;
  }
  .db-admin-page .db-admin-retention-snapshot-table tr:nth-child(1) {
    --db-retention-accent: var(--accent-green);
    border-color: rgba(125, 206, 130, 0.32);
  }
  .db-admin-page .db-admin-retention-snapshot-table tr:nth-child(2) {
    --db-retention-accent: var(--accent-blue-sky);
    border-color: rgba(135, 206, 250, 0.34);
  }
  .db-admin-page .db-admin-retention-snapshot-table tr:nth-child(3) {
    --db-retention-accent: var(--accent-purple-med-light);
    border-color: rgba(159, 163, 237, 0.34);
  }
  .db-admin-page .form-acc-btn {
    font-size: 1.4rem;
    padding: 1rem 1.05rem !important;
  }
  .db-admin-page .db-admin-sub-accordion-btn {
    font-size: 1rem;
    padding: 0.9rem 1rem !important;
  }
  .db-admin-page .db-admin-restore-mobile-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ./public/scss/form_default.scss */
:root {
  --white: #fff;
  --dark-bg: #1e1e1e;
  --dark-secondary: #2d2d2d;
  --light-gray: #d0d0d0;
  --light-text: #e0e0e0;
  --medium-gray: #a0a0a0;
  --medium-gray-dark: #797878;
  --dark-gray-light: #555555;
  --dark-gray: #3a3a3a;
  --info-blue: #cadfff;
  --accent-blue-very-light: #cadfff;
  --accent-blue-sky: rgb(135, 206, 250);
  --accent-blue-sky-muted-02: rgb(121, 188, 230);
  --accent-blue-sky-muted: rgba(135, 206, 250, 0.7);
  --accent-blue-light: #5a98f7;
  --accent-blue: #2c7dfa;
  --accent-blue-account: #007bff;
  --accent-blue-dark: #2265ca;
  --accent-yellow-light: #fff9cc;
  --accent-yellow: #f3d547;
  --accent-yellow-dark: #d4b92a;
  --accent-red-light: #ffb3b3;
  --accent-red-med-light: #ff8080;
  --accent-red: #ff4d4d;
  --accent-red-dark: #c22d2d;
  --accent-teal: #4ecdc4;
  --accent-purple-light: #c6c9f9;
  --accent-purple-med-light: #9fa3ed;
  --accent-purple: #6d72c3;
  --accent-purple-dark: #5f63aa;
  --accent-amber-light: #ffe8d1;
  --accent-mauve-light: rgb(235, 182, 227);
  --accent-mauve-med-light: rgb(238, 132, 221);
  --accent-mauve: rgb(170, 95, 158);
  --accent-amber-med-light: #fcc387;
  --accent-amber: #ffb86c;
  --accent-amber-dark: #de801c;
  --accent-green-light: #a8d5a3;
  --accent-green: #7dce82;
  --accent-green-dark: #60a95e;
  --accent-green-dark-02: #4f8a4d;
  --accent-gold: #f6c02d;
  --bike-form-bg: rgba(65, 75, 94, 0.55);
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.4rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 2.5rem;
  --font-size-xxxxlarge: 3rem;
  --font-size-xxxxxlarge: 4rem;
  --font-size-xxxxxxlarge: 5rem;
  --font-size-6large: 6rem;
  --font-size-7large: 7rem;
}

/* =========================
   Shared Form Page Layout
   ========================= */
.form-page {
  padding-bottom: 6rem;
  color: var(--light-text);
}

.form-default {
  max-width: 900px;
  margin: 0 auto;
}

/* =========================
   Card / Section
   ========================= */
.form-card {
  background: var(--bike-form-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  padding: 1.25rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  margin-bottom: 1.25rem;
}

.form-section-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-blue-sky);
  margin-bottom: 0.75rem;
}

/* =========================
   Labels / Inputs
   ========================= */
.form-label-default {
  color: var(--light-text);
  font-size: var(--font-size-xlarge);
  opacity: 0.85;
  margin-bottom: 0.35rem;
}

.form-input-default {
  background: rgba(20, 22, 30, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--light-text) !important;
  border-radius: 0.6rem !important;
  padding: 0.75rem 0.9rem !important;
}

.form-input-default:focus {
  box-shadow: 0 0 0 0.18rem rgba(127, 178, 255, 0.18) !important;
  border-color: rgba(240, 127, 255, 0.4) !important;
}

.form-input-default::placeholder {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.form-textarea-default {
  resize: vertical;
  min-height: 100px;
}

/* =========================
   Accordion Shared
   ========================= */
.form-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  margin-bottom: 1.25rem;
}

.form-acc-item {
  background: var(--bike-form-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  margin-bottom: 0.9rem;
}

.form-acc-btn {
  background: var(--bike-form-bg) !important;
  color: var(--light-text) !important;
  padding: 1rem !important;
}

.form-acc-body {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================
   Buttons
   ========================= */
.form-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  #pressure-calculator .pressure-calculator-form-grid,
  #suspension-pressure-calculator .pressure-calculator-form-grid {
    max-width: 580px;
    width: 100%;
  }
  #pressure-calculator .pressure-calculator-compact-control,
  #suspension-pressure-calculator .pressure-calculator-compact-control {
    max-width: 190px;
  }
  #pressure-calculator .pressure-calculator-short-select,
  #suspension-pressure-calculator .pressure-calculator-short-select {
    max-width: 190px;
  }
}
main.pressure-tool-main {
  overflow-x: visible;
}

#pressure-calculator .pressure-calculator-unit-select,
#suspension-pressure-calculator .pressure-calculator-unit-select,
#tirePressureModal .pressure-calculator-unit-select {
  flex: 0 0 76px;
  max-width: 76px;
  min-width: 76px;
}

#pressure-calculator .pressure-calculator-result-panel,
#suspension-pressure-calculator .pressure-calculator-result-panel {
  position: sticky;
  top: 72px;
  z-index: 95;
}

#pressure-calculator .pressure-calculator-result-heading,
#suspension-pressure-calculator .pressure-calculator-result-heading,
#tirePressureModal .pressure-calculator-result-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem;
}

#pressure-calculator .pressure-calculator-heading-main,
#suspension-pressure-calculator .pressure-calculator-heading-main,
#tirePressureModal .pressure-calculator-heading-main {
  min-width: 0;
}

#pressure-calculator .pressure-calculator-profile-label,
#suspension-pressure-calculator .pressure-calculator-profile-label,
#tirePressureModal .pressure-calculator-profile-label {
  font-size: var(--font-size-medium);
  font-weight: 700;
  line-height: 1.25;
}

#pressure-calculator .pressure-calculator-source-badges,
#suspension-pressure-calculator .pressure-calculator-source-badges,
#tirePressureModal .pressure-calculator-source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

#pressure-calculator .pressure-calculator-source-chip,
#suspension-pressure-calculator .pressure-calculator-source-chip,
#tirePressureModal .pressure-calculator-source-chip {
  align-items: center;
  background: rgba(135, 206, 250, 0.16);
  border: 1px solid rgba(135, 206, 250, 0.48);
  border-radius: 999px;
  color: var(--accent-blue-sky);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.1;
  min-height: 1.85rem;
  padding: 0.35rem 0.7rem;
}

#tirePressureModal .tire-pressure-modal-result-panel,
#pressure-calculator .pressure-calculator-compact-result-panel,
#suspension-pressure-calculator .pressure-calculator-compact-result-panel {
  background: #2b2b2b;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.28);
  padding: 0.5rem 0.75rem;
}

#tirePressureModal .tire-pressure-modal-result-panel {
  position: sticky;
  top: 0;
  z-index: 10;
}

#pressure-calculator .pressure-calculator-compact-result-panel,
#suspension-pressure-calculator .pressure-calculator-compact-result-panel {
  position: sticky;
  top: 72px;
  z-index: 95;
}

main.pressure-tool-main .pressure-calculator-compact-result-panel.is-fixed {
  left: var(--pressure-result-left, 0);
  margin-bottom: 0 !important;
  max-width: var(--pressure-result-width, 100%);
  position: fixed !important;
  top: calc(var(--bc-header-height) + env(safe-area-inset-top) + 0.35rem) !important;
  width: var(--pressure-result-width, 100%);
}

main.pressure-tool-main .pressure-calculator-result-spacer {
  display: none;
}

main.pressure-tool-main .pressure-calculator-result-spacer.is-active {
  display: block;
  height: var(--pressure-result-height, 0);
}

#tirePressureModal .tire-pressure-modal-result-panel .pressure-calculator-result-heading,
#pressure-calculator .pressure-calculator-compact-result-panel .pressure-calculator-result-heading,
#suspension-pressure-calculator .pressure-calculator-compact-result-panel .pressure-calculator-result-heading {
  align-items: center;
  gap: 0.65rem;
}

#tirePressureModal .tire-pressure-modal-result-panel .pressure-calculator-profile-label,
#pressure-calculator .pressure-calculator-compact-result-panel .pressure-calculator-profile-label,
#suspension-pressure-calculator .pressure-calculator-compact-result-panel .pressure-calculator-profile-label {
  line-height: 1.1;
}

#tirePressureModal .tire-pressure-modal-result-panel .pressure-calculator-source-badges,
#tirePressureModal .tire-pressure-modal-setup-summary,
#pressure-calculator .pressure-calculator-compact-result-panel .pressure-calculator-source-badges,
#pressure-calculator .pressure-calculator-compact-setup-summary,
#suspension-pressure-calculator .pressure-calculator-compact-result-panel .pressure-calculator-source-badges,
#suspension-pressure-calculator .pressure-calculator-compact-setup-summary {
  display: none;
}

#tirePressureModal .tire-pressure-modal-pressure-card,
#pressure-calculator .pressure-calculator-compact-pressure-card,
#suspension-pressure-calculator .pressure-calculator-compact-pressure-card {
  padding: 0.5rem 0.75rem;
}

#tirePressureModal .tire-pressure-modal-pressure-card .font-size-medium,
#pressure-calculator .pressure-calculator-compact-pressure-card .font-size-medium,
#suspension-pressure-calculator .pressure-calculator-compact-pressure-card .font-size-medium {
  font-size: 0.82rem;
  line-height: 1.1;
}

#tirePressureModal .tire-pressure-modal-result-panel .display-5,
#pressure-calculator .pressure-calculator-compact-result-panel .display-5,
#suspension-pressure-calculator .pressure-calculator-compact-result-panel .display-5 {
  font-size: 2.05rem;
  line-height: 1.05;
}

#pressure-calculator .pressure-calculator-safety-card,
#suspension-pressure-calculator .pressure-calculator-safety-card {
  background: rgba(255, 184, 108, 0.12);
  border: 1px solid rgba(255, 184, 108, 0.45);
  box-shadow: inset 3px 0 0 rgba(255, 184, 108, 0.75), 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
}

#pressure-calculator .pressure-calculator-safety-card p,
#suspension-pressure-calculator .pressure-calculator-safety-card p {
  color: var(--light-text);
  font-size: var(--font-size-medium);
  line-height: 1.4;
}

#pressure-calculator .pressure-calculator-safety-card i,
#suspension-pressure-calculator .pressure-calculator-safety-card i {
  flex: 0 0 auto;
}

#suspension-pressure-calculator .suspension-section-card {
  background: #33373a;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.12);
}

#suspension-pressure-calculator .suspension-section-card-fork {
  box-shadow: inset 3px 0 0 rgba(116, 207, 252, 0.7);
}

#suspension-pressure-calculator .suspension-section-card-shock {
  box-shadow: inset 3px 0 0 rgba(255, 184, 108, 0.75);
}

#suspension-pressure-calculator .suspension-section-title {
  font-size: var(--font-size-large);
  line-height: 1.2;
  margin: 0 0 0.85rem 0;
}

#suspension-pressure-calculator .suspension-section-heading {
  margin-bottom: 0.85rem;
}

#suspension-pressure-calculator .suspension-section-heading .suspension-section-title {
  margin-bottom: 0;
}

#suspension-pressure-calculator .suspension-section-title-fork,
#suspension-pressure-calculator .suspension-section-card-fork .form-label {
  color: #8fd4ff;
}

#suspension-pressure-calculator .suspension-section-title-shock,
#suspension-pressure-calculator .suspension-section-card-shock .form-label,
#suspension-pressure-calculator .suspension-section-card-shock .form-check-label {
  color: var(--accent-amber);
}

#suspension-pressure-calculator .suspension-component-name {
  padding-top: 0 !important;
  padding-bottom: 0.15rem !important;
  margin-top: -0.15rem;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  #pressure-calculator .pressure-calculator-result-panel,
  #suspension-pressure-calculator .pressure-calculator-result-panel {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }
  #pressure-calculator .pressure-calculator-result-panel .display-5,
  #suspension-pressure-calculator .pressure-calculator-result-panel .display-5,
  #tirePressureModal .pressure-calculator-result-panel .display-5 {
    font-size: 2rem;
  }
  #pressure-calculator .pressure-calculator-result-panel .font-size-medium,
  #suspension-pressure-calculator .pressure-calculator-result-panel .font-size-medium,
  #tirePressureModal .pressure-calculator-result-panel .font-size-medium {
    font-size: 0.95rem;
    line-height: 1.35;
  }
  #tirePressureModal .tire-pressure-modal-result-panel,
  #pressure-calculator .pressure-calculator-compact-result-panel,
  #suspension-pressure-calculator .pressure-calculator-compact-result-panel {
    padding: 0.45rem 0.55rem;
  }
  #tirePressureModal .tire-pressure-modal-pressure-card,
  #pressure-calculator .pressure-calculator-compact-pressure-card,
  #suspension-pressure-calculator .pressure-calculator-compact-pressure-card {
    padding: 0.45rem 0.5rem;
  }
  #tirePressureModal .tire-pressure-modal-pressure-card .font-size-medium,
  #pressure-calculator .pressure-calculator-compact-pressure-card .font-size-medium,
  #suspension-pressure-calculator .pressure-calculator-compact-pressure-card .font-size-medium {
    font-size: 0.75rem;
    line-height: 1;
  }
  #tirePressureModal .tire-pressure-modal-result-panel .display-5,
  #pressure-calculator .pressure-calculator-compact-result-panel .display-5,
  #suspension-pressure-calculator .pressure-calculator-compact-result-panel .display-5 {
    font-size: 1.75rem;
    line-height: 1;
  }
}