/*
 * Cyclograde Modern Design System
 * Based on homepage1.scala.html design and GoodUI principles
 * - Visual hierarchy and clarity
 * - Consistency across pages
 * - Card-based design
 * - Clear CTAs and progress indicators
 * - Whitespace and readability
 */

/* ===============================
   HERO SECTIONS
   =============================== */

/* Modern SaaS Hero (homepage1 style) */
.hero-section-modern {
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, white) 0%, color-mix(in srgb, var(--secondary-light) 50%, white) 100%);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.hero-section-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-blue-light) 0%, transparent 70%);
    opacity: 0.3;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-icon {
    color: white;
}

.hero-title-row {
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--foreground);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-title-row .hero-title {
    margin-bottom: 0;
}

.hero-title .icon-text {
    align-items: flex-end;
    display: inline-flex;
    gap: 0.5rem;
    line-height: 1.2;
}

.hero-bike-block {
    align-items: center;
    display: flex;
    gap: 0.5em;
}

.hero-bike-block img {
    display: block;
    line-height: 1;
}

.hero-bike-block img.hero-icon-bike {
    height: 4.5rem;
    width: auto;
}

.hero-subtitle {
    font-size: 1.4rem;
    color: var(--foreground);
    margin-bottom: 2rem;
    max-width: 600px;
    line-height: 1.6;
}

.hero-action-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-action-text {
    font-size: 1.2rem;
    color: var(--foreground);
    line-height: 1.5;
}

/* Page Header Hero (for secondary pages) */
.page-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, white) 0%, color-mix(in srgb, var(--secondary-light) 50%, white) 100%);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--accent-blue-light) 0%, transparent 70%);
    opacity: 0.2;
    z-index: 0;
}

.page-header-content {
    position: relative;
    z-index: 1;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--gray-dark);
    max-width: 600px;
    margin: 0 auto;
}

/* Compact Page Header (for pages that need less vertical space) */
.page-header-compact {
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, white) 0%, color-mix(in srgb, var(--secondary-light) 50%, white) 100%);
    border-radius: 12px;
    padding: 0.5rem 1.25rem;
    margin-bottom: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header-compact::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -3%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--accent-blue-light) 0%, transparent 70%);
    opacity: 0.2;
    z-index: 0;
}

.page-header-compact .page-header-content {
    position: relative;
    z-index: 1;
}

.page-header-compact .page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.15rem;
}

.page-header-compact .page-subtitle {
    font-size: 1rem;
    color: var(--gray-dark);
    max-width: 600px;
    margin: 0 auto;
}

/* ===============================
   FEATURE CARDS
   =============================== */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.feature-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
}

.feature-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--gray);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.feature-icon.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.feature-icon.secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
}

.feature-icon.tertiary {
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
}

.feature-icon.warning {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.feature-icon.info {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.feature-description {
    color: var(--gray-dark);
    line-height: 1.6;
}

/* ===============================
   CONTENT SECTIONS
   =============================== */

.content-section {
    background: white;
    border-radius: 20px;
    padding: 1.5rem 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.content-section.compact {
    background: transparent;
    padding: 0.25rem 0;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0.5rem;
}

.content-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.content-section-title i {
    color: var(--secondary);
}

.content-section p {
    color: var(--gray-dark);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.content-section p:last-child {
    margin-bottom: 0;
}

/* Showcase Section */
.showcase-section {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin: 1rem 0;
}

.showcase-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.showcase-description {
    color: var(--gray-dark);
    margin-bottom: 2rem;
    max-width: 600px;
}

/* Custom: center grid-item captions under showcase images (safe, preserves Bulma aspect ratios) */
.fixed-grid .grid-item {
    text-align: center;
}
.fixed-grid .grid-item figure {
    margin: 0 auto;
    display: block;
}
.fixed-grid .grid-item figure {
    line-height: 0;
}

.fixed-grid .grid-item figure img {
    display: block;
    width: 100%;
    height: auto;
}
.fixed-grid .grid-item span {
    margin-top: 0.5rem;
    display: inline-block;
}

.fixed-grid .grid-item .showcase-caption {
    display: block;
    margin-top: 0.9rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--foreground);
}

.showcase-also {
    margin-top: 1rem;
    color: var(--gray-dark);
    font-style: italic;
}

/* ===============================
   CTA SECTIONS
   =============================== */

.cta-section {
    text-align: center;
    padding: 3rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 20px;
    margin-top: 3rem;
}

.cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.cta-description {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.cta-button {
    background: white;
    color: var(--primary-dark);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: var(--primary-dark);
}

/* Vibrant CTA variant: pastel tones respecting site palette */
.cta-section.vibrant {
    /* Single pastel background (soft green derived from --primary-light) */
    background: rgba(129,199,132,0.12);
    box-shadow: 0 6px 16px rgba(34, 34, 34, 0.04);
    border: 1px solid rgba(129,199,132,0.18);
}

.cta-section.vibrant .cta-title {
    color: var(--foreground);
    text-shadow: none;
}

.cta-section.vibrant .cta-description,
.cta-section.vibrant .cta-note {
    color: rgba(51,51,51,0.95);
}

.cta-section.vibrant .cta-button {
    background: rgba(255,255,255,0.96);
    color: var(--primary-dark);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.cta-section.vibrant .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Align CTA button and adjacent message vertically */
.cta-actions {
    display: flex;
    justify-content: center; /* center the group horizontally in the enclosing box */
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    margin: 0.5rem 0;
}

.cta-actions-grid {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1.5rem;
    align-items: center;
    margin: 0.5rem auto 0;
}

.cta-messages {
    display: flex;
    flex-direction: column; /* stack each message on its own line */
    align-items: flex-start; /* keep messages to the right of the button */
    gap: 0.2rem;
}

.cta-messages .cta-comment {
    color: rgba(51,51,51,0.95);
    font-size: 1rem;
    line-height: 1.2;
}

/* Responsive: on small screens, stack vertically with button on top */
@media (max-width: 640px) {
    .cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .cta-messages {
        align-items: center;
        text-align: center;
    }
}

/* Note / helper text below CTA button */
.cta-note {
    color: inherit;
    margin-top: 1.5rem;
    font-size: 0.98rem;
    opacity: 0.95;
}

/* ===============================
   BADGES & TAGS
   =============================== */

.precision-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-tint);
    color: var(--primary-dark);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ===============================
   FORM SECTIONS (for newtrack, login, etc.)
   =============================== */

.form-section {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    border: 1px solid var(--gray);
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-step-number {
    width: 40px;
    height: 40px;
    background: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.form-section-description {
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Modern Input Styling */
.modern-input {
    border: 2px solid var(--gray);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.modern-input:not(:placeholder-shown) {
    border-color: var(--primary);
}

.modern-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
    outline: none;
}

.modern-input.is-danger {
    border-color: var(--danger);
    box-shadow: none;
}

.modern-input.is-danger:focus,
.modern-input.is-danger:focus-visible {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3);
    outline: none;
}

.modern-select {
    border: 2px solid var(--gray);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background-color: white;
    transition: border-color 0.3s ease;
}

.modern-select:focus-within {
    border-color: var(--secondary);
    outline: none;
}

/* ===============================
   BUTTONS
   =============================== */

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 35%, transparent);
    color: white;
}

.btn-primary.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--secondary) 35%, transparent);
    color: white;
}

.btn-light {
    background: var(--gray-light);
    color: var(--foreground);
    border: 1px solid var(--gray);
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-light:hover {
    background: var(--gray);
    color: var(--foreground);
}

/* ===============================
   DATA TABLES
   =============================== */

.modern-table-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    margin-bottom: 2rem;
}

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

.modern-table thead {
    background: linear-gradient(135deg, var(--gray-light) 0%, var(--gray) 100%);
}

.modern-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--foreground);
    border-bottom: 2px solid var(--gray);
}

.modern-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray);
    color: var(--foreground);
}

.modern-table tbody tr:hover {
    background-color: rgba(76, 175, 80, 0.05);
}

.modern-table tbody tr:last-child td {
    border-bottom: none;
}

.track-title-link {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 500;
}

.track-title-link:hover {
    color: var(--primary-dark);
}

.speed-profile-name,
.track-name {
    color: var(--primary);
    font-weight: 500;
}

.modern-table th.track-actions-header {
    text-align: right;
}

.modern-table td.track-actions-cell {
    position: relative;
    text-align: right;
}

.track-actions-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.track-actions-menu {
    position: relative;
    display: inline-block;
}

.track-actions-toggle {
    min-width: 2.2rem;
}

.track-actions-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 30;
    min-width: auto;
    width: max-content;
    background: var(--background);
    border: 1px solid var(--gray);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.track-actions-delete-zone {
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--gray);
}

.track-actions-dropdown .button {
    justify-content: flex-start;
}

/* ===============================
   STATS / INFO BOXES
   =============================== */

.stats-box {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stats-box.borderless {
    background: transparent;
    box-shadow: none;
    border-left: none;
    padding: 0.5rem 0;
}

.stats-box.secondary {
    border-left-color: var(--secondary);
}

.stats-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
}

.stats-box.secondary .stats-icon {
    background: var(--secondary-tint);
    color: var(--secondary);
}

.stats-content h4 {
    font-size: 0.875rem;
    color: var(--gray-dark);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.stats-content p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}

/* ===============================
   TRACK STATISTICS BOX
   =============================== */

.track-info-box {
    background: white;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    margin: 1rem 0;
    border: 1px solid var(--gray);
}

/* stat cards */
.stats-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}

.stats-section--divider {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray);
}

.stats-section--meta {
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 100px;
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-dark);
    font-weight: 500;
}

.stat-card-header i {
    font-size: 0.72rem;
    color: var(--primary);
}

.stat-card-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.2;
}

/* icon color variants */
.stat-icon--elevation { color: #9c27b0 !important; }
.stat-icon--time      { color: var(--secondary) !important; }
.stat-icon--speed     { color: #ff9800 !important; }
.stat-icon--estimated { color: #00bcd4 !important; }

/* meta chips (bottom info row) */
.stat-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.78rem;
    white-space: nowrap;
}

.stat-meta i {
    font-size: 0.7rem;
    color: var(--primary);
}

.stat-meta-label {
    color: var(--gray-dark);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-meta-value {
    font-weight: 600;
    color: var(--foreground);
}

@media (max-width: 768px) {
    .track-info-box {
        padding: 0.5rem 0.75rem;
    }

    .stats-section {
        gap: 0.9rem;
    }

    .stat-card-value {
        font-size: 1rem;
    }

    .stat-meta {
        font-size: 0.72rem;
        padding: 0.2rem 0.45rem;
    }
}

/* ===============================
   INFO CARDS
   =============================== */

.info-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray);
    margin-bottom: 1.5rem;
}

.info-card-included {
  margin-bottom: 1.5rem;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.info-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.1rem;
}

.info-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.info-card-content {
    color: var(--gray-dark);
    line-height: 1.7;
}

.info-card-content-black {
    line-height: 1.7;
}

.info-card-content a {
    color: var(--primary);
    font-weight: 500;
}

.info-card-content a:hover {
    color: var(--primary-dark);
}

.apropos-story-content .info-card-title {
    margin: 2rem 0 0.75rem;
}

.apropos-story-content .info-card-title:first-of-type {
    margin-top: 0;
}

.apropos-image-block {
    margin: 1rem 0 2rem;
}

.apropos-image {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--gray);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.apropos-image-time {
    max-width: 300px;
    height: auto;
}

.apropos-image-gra {
    max-width: 420px;
}

.apropos-image-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.apropos-image-block figcaption {
    margin-top: 0.5rem;
    text-align: center;
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.help-prepare-image-block {
    margin-top: 0.9rem;
}

.help-prepare-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.help-prepare-image {
    display: block;
    height: 260px;
    width: auto;
    border: 1px solid var(--gray);
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.help-prepare-image-single {
    height: auto;
    width: 100%;
    max-width: 320px;
}

.help-prepare-image-sticker {
    max-width: 200px;
}

@media (max-width: 768px) {
    .apropos-story-content .info-card-title {
        margin-top: 1.5rem;
    }

    .apropos-image-block {
        margin-bottom: 1.5rem;
    }

    .apropos-image-gra {
        max-width: 100%;
    }

    .help-prepare-image {
        height: auto;
        width: 100%;
        max-width: 100%;
    }
}

/* ===============================
   LOGIN / AUTH FORMS
   =============================== */

.auth-container {
    max-width: 450px;
    margin: 2rem auto;
}

.auth-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    display: block;
    width: auto;
    max-width: 220px;
    height: auto;
    margin: 0 auto 1rem;
}

.auth-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.auth-title-row .auth-title {
    margin-bottom: 0;
}

.auth-title-icon {
    color: var(--primary);
    font-size: 1.25rem;
    line-height: 1;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: var(--gray-dark);
}

.auth-form .field {
    margin-bottom: 1.5rem;
}

.auth-form label {
    display: block;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.auth-form .input-icon-wrapper {
    position: relative;
}

.auth-form .input-icon-wrapper i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-dark);
}

.auth-form .input-icon-wrapper input {
    padding-left: 3rem;
}

/* ===============================
   IMAGE DISPLAY
   =============================== */

.image-showcase {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.image-showcase img {
    width: 100%;
    height: auto;
    display: block;
}

.image-rounded {
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ===============================
   LISTS
   =============================== */

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: var(--foreground);
    line-height: 1.5;
}

.feature-list li i {
    color: var(--primary);
    margin-top: 0.25rem;
}

.numbered-list {
    counter-reset: list-counter;
    list-style: none;
    padding: 0;
}

.numbered-list li {
    counter-increment: list-counter;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray);
}

.numbered-list li:last-child {
    border-bottom: none;
}

.numbered-list li::before {
    content: counter(list-counter);
    background: var(--secondary);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ===============================
   PLOT DISPLAY AREA
   =============================== */

.plot-display {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 2rem 0;
}

.plot-display img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Submit row: side-by-side button + generation status */
.submit-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.submit-row__status {
    flex: 1;
    min-width: 240px;
    margin: 0;
    padding: 1rem 1.5rem;
}

.submit-row__status .status-message-container {
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
}

/* ===============================
   MAP CONTAINER
   =============================== */

.map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ===============================
   RESPONSIVE ADJUSTMENTS
   =============================== */

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .page-title {
        font-size: 1.75rem;
    }

    .hero-section-modern,
    .page-header {
        padding: 1.25rem 1.25rem;
    }

    .page-header-compact {
        padding: 0.5rem 1rem;
    }

    .page-header-compact .page-title {
        font-size: 1.25rem;
    }

    .page-header-compact .page-subtitle {
        font-size: 0.85rem;
    }

    .content-section,
    .showcase-section {
        padding: 1.5rem;
    }

    .feature-grid {
        gap: 1.5rem;
    }

    .feature-grid--2x2 {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: 1.5rem;
    }

    .cta-section {
        padding: 2rem 1.5rem;
    }

    .cta-title {
        font-size: 1.5rem;
    }
}

/* ===============================
   UTILITY CLASSES
   =============================== */

.text-gradient {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.text-center { text-align: center; }
.text-muted { color: var(--gray-dark); }

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* Better focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Custom focus indicator for SVG slider to prevent default black border while maintaining accessibility */
svg#speedSlider:focus {
    outline: none;
}

svg#speedSlider:focus-visible {
    outline: 2px dashed var(--primary);
    outline-offset: 4px;
}

/* Vertical separator for columns (used in userspeeds page) */
.column-with-left-separator {
    border-left: 2px solid var(--gray);
    padding-left: 2rem !important;
}

@media (max-width: 768px) {
    .column-with-left-separator {
        border-left: none;
        border-top: 2px solid var(--gray);
        padding-left: 0.75rem !important;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }
}

/* ===============================
   SPEED PROFILE GRAPH
   =============================== */

.speed-graph-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.speed-graph {
    width: 100%;
    max-width: 550px;
    height: auto;
    min-height: 220px;
}

.speed-graph .speed-point-group {
    cursor: pointer;
}

.speed-graph .speed-point-visible {
    /* No transform on hover - keep point stable */
}

.speed-graph .speed-tooltip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.speed-graph .speed-point-group:hover .speed-tooltip {
    opacity: 1;
}

.speed-graph-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--gray-dark);
}

.speed-graph-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.speed-graph-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--secondary);
}

.speed-graph-legend .legend-dot.flat {
    background-color: var(--primary);
}

.speed-graph-legend .legend-dot.descent {
    background-color: var(--secondary);
}

.speed-graph-legend .legend-dot.climb {
    background-color: #FF9800;
}

/* ===============================
   ENHANCED FORM ELEMENTS
   =============================== */

/* ---- Shared Base Styles ---- */

/* Base checkbox container styles (shared by .modern-checkbox and .tooltip.bordered) */
.checkbox-container-base,
.modern-checkbox,
.tooltip.bordered {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 2px solid var(--gray);
    border-radius: var(--form-border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.checkbox-container-base:hover,
.modern-checkbox:hover,
.tooltip.bordered:hover {
    border-color: var(--primary-light);
    background: rgba(76, 175, 80, 0.03);
    box-shadow: 0 4px 12px var(--primary-tint);
}

.checkbox-container-base:has(input:checked),
.modern-checkbox.is-checked,
.modern-checkbox:has(input:checked),
.tooltip.bordered:has(input:checked) {
    border-color: var(--primary);
    background: rgba(76, 175, 80, 0.08);
}

/* Base custom checkbox input styles */
.modern-checkbox input[type="checkbox"],
.tooltip.bordered label.checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 2px solid var(--gray);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.modern-checkbox input[type="checkbox"]:hover,
.tooltip.bordered label.checkbox input[type="checkbox"]:hover {
    border-color: var(--primary-light);
}

.modern-checkbox input[type="checkbox"]:checked,
.tooltip.bordered label.checkbox input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-color: var(--primary);
}

/* Shared checkbox checkmark (::after pseudo-element) */
.modern-checkbox input[type="checkbox"]:checked::after,
.tooltip.bordered label.checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: var(--checkbox-checkmark-left);
    top: var(--checkbox-checkmark-top);
    width: var(--checkbox-checkmark-width);
    height: var(--checkbox-checkmark-height);
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* Accessibility: Focus-visible states for custom form controls */
.modern-checkbox input[type="checkbox"]:focus-visible,
.tooltip.bordered label.checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.radio-card-wrapper .card-header input[type="radio"]:focus-visible,
label.radio .card .card-header input[type="radio"]:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* ---- Enhanced Select Dropdown ---- */

.select.modern-select {
    border: none;
    padding: 0;
    height: auto;
}

.select.modern-select select {
    border: 2px solid var(--primary);
    border-radius: var(--form-border-radius);
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1rem;
    background-color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 280px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: auto;
    line-height: 1.5;
}

.select.modern-select select:hover {
    border-color: var(--secondary-light);
    box-shadow: 0 4px 12px var(--secondary-tint);
}

.select.modern-select select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
    outline: none;
}

.select.modern-select::after {
    border-color: var(--primary);
    border-width: 2px;
    right: 1.25rem;
}

/* ---- Checkbox Icon and Label Styles ---- */

.modern-checkbox .checkbox-icon,
.tooltip.bordered label.checkbox .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-container-size);
    height: var(--icon-container-size);
    border-radius: var(--icon-border-radius);
    background: var(--primary-tint);
    color: var(--primary);
    flex-shrink: 0;
}

.modern-checkbox .checkbox-label {
    font-weight: 500;
    color: var(--foreground);
    flex: 1;
}

.modern-checkbox .checkbox-help {
    font-size: 0.85rem;
    color: var(--gray-dark);
    margin-top: 0.25rem;
}

/* Tooltip enhanced for checkboxes */
.tooltip.bordered.modern-checkbox {
    position: relative;
}

.tooltip.bordered.modern-checkbox .tooltiptext {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    margin-left: 0;
}

/* Enhanced Radio Button Cards */
/* Supports both .radio-card-wrapper class and label.radio elements */
.radio-card-wrapper,
label.radio {
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.radio-card-wrapper .card,
label.radio .card {
    border: 2px solid var(--gray);
    border-radius: var(--card-border-radius);
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.radio-card-wrapper:hover .card,
label.radio:hover .card {
    border-color: var(--primary-light);
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.12);
    transform: translateY(-4px);
}

.radio-card-wrapper.is-selected .card,
.radio-card-wrapper:has(input:checked) .card,
label.radio:has(input:checked) .card {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.2);
    background: rgba(76, 175, 80, 0.03);
}

.radio-card-wrapper .card-header,
label.radio .card .card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 0.75rem;
    background: transparent;
    box-shadow: none;
}

.radio-card-wrapper .card-header input[type="radio"],
label.radio .card .card-header input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 2px solid var(--gray);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.radio-card-wrapper .card-header input[type="radio"]:hover,
label.radio .card .card-header input[type="radio"]:hover {
    border-color: var(--primary-light);
}

.radio-card-wrapper .card-header input[type="radio"]:checked,
label.radio .card .card-header input[type="radio"]:checked {
    border-color: var(--primary);
    background: white;
}

.radio-card-wrapper .card-header input[type="radio"]:checked::after,
label.radio .card .card-header input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: var(--radio-dot-offset);
    top: var(--radio-dot-offset);
    width: var(--checkbox-dot-size);
    height: var(--checkbox-dot-size);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
}

.radio-card-wrapper .radio-card-title {
    font-weight: 600;
    color: var(--foreground);
    font-size: 1rem;
}

.radio-card-wrapper:has(input:checked) .radio-card-title {
    color: var(--primary-dark);
}

label.radio:has(input:checked) .card .card-header {
    color: var(--primary-dark);
}

.radio-card-wrapper .card-content,
label.radio .card .card-content {
    padding: 0.5rem 1.25rem 1.25rem;
}

.radio-card-wrapper .card-content .content,
label.radio .card .card-content .content {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
}

.radio-card-wrapper .card-image,
label.radio .card .card-image {
    margin: 0.5rem 1rem;
    border-radius: 10px;
    overflow: hidden;
}

.radio-card-wrapper .card-image figure {
    margin: 0;
}

/* Grid cell spacing for radio cards */
.grid .cell .radio-card-wrapper,
.grid .cell > label.radio {
    height: 100%;
}

.grid .cell > label.radio .card {
    height: 100%;
}

/* Tooltip-specific styles (non-duplicated) */
.tooltip.bordered {
    width: 100%;
}

/* ---- Plot Style Grid ---- */
/* Cap card width so they don't stretch beyond their 4-col desktop size on narrower layouts */
.plot-style-grid .plot-style-item {
    max-width: 280px;
}

.tooltip.bordered label.checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
}

.tooltip.bordered label.checkbox .fixed-width-label-200 {
    font-weight: 500;
    color: var(--foreground);
    flex: 1;
    width: auto;
}

.tooltip.bordered label.checkbox input[type="checkbox"] {
    margin-left: auto;
}

.tooltip.bordered .tooltiptext {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    margin-left: 0;
    white-space: normal;
}

/* ---- Time Display Radio Group ---- */

.time-display-radios {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.time-display-radios label.radio.tooltip.bordered {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    flex: 1;
    min-width: 160px;
}

.time-display-radios label.radio.tooltip.bordered .fixed-width-label-200 {
    font-weight: 500;
    color: var(--foreground);
    flex: 1;
    width: auto;
}

.time-display-radios label.radio.tooltip.bordered input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 2px solid var(--gray);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
}

.time-display-radios label.radio.tooltip.bordered input[type="radio"]:hover {
    border-color: var(--primary-light);
}

.time-display-radios label.radio.tooltip.bordered input[type="radio"]:checked {
    background: white;
    border-color: var(--primary);
}

.time-display-radios label.radio.tooltip.bordered input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--checkbox-dot-size);
    height: var(--checkbox-dot-size);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.time-display-radios label.radio.tooltip.bordered input[type="radio"]:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* ===============================
   FORM VALIDATION ERROR STYLING
   =============================== */

/* Fix Issue 1: Ensure validation error messages use consistent font size with the website */
.validation-error.help {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* Additional styling for better visibility */
.validation-error.help.is-danger {
    color: var(--danger);
    font-weight: 500;
}

/* ===============================
   LOADING SPINNER FOR FORMS
   =============================== */

/* Fix Issue 3: Loading spinner for form submissions - less intrusive inline version */
.form-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--primary-tint);
    border: 2px solid var(--primary-light);
    border-radius: 10px;
    margin-top: 1rem;
}

.form-loading-spinner {
    color: var(--primary);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.form-loading-spinner div {
    transform-origin: 16px 16px;
}

.form-loading-spinner div:after {
    top: 1.6px;
    left: 14.4px;
    width: 3.2px;
    height: 8.8px;
}

.form-loading-message {
    color: var(--primary-dark);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

/* ===============================
   NOTIFICATION POSITIONING
   =============================== */

.notification-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: 600px;
    width: 90%;
}

/* ===============================
   UTILITY SPACING CLASSES
   =============================== */

/* Additional margin utilities for specific use cases not covered by mb-1 through mb-5, mt-1 through mt-5 */
/* Note: Use mt-1 (0.5rem), mt-2 (1rem), mt-3 (1.5rem), mt-4 (2rem), mt-5 (3rem) when possible */
.mt-0-375rem { margin-top: 0.375rem; }  /* ~6px at 16px base */
.mt-0-625rem { margin-top: 0.625rem; }  /* ~10px at 16px base */
.pb-0-3em { padding-bottom: 0.3em; }

/* ===============================
   LINK STYLES
   =============================== */

.link-primary {
    color: var(--primary);
}

.link-primary:hover {
    color: var(--primary-dark);
}

/* ===============================
   TEXT ALIGNMENT
   =============================== */

.text-right { text-align: right; }
.text-left { text-align: left; }

/* ===============================
   WIDTH UTILITIES
   =============================== */

.w-100 { width: 100%; }

/* ===============================
   BUTTON UTILITIES
   =============================== */

.btn-justify-center {
    justify-content: center;
}

/* ===============================
   ICON UTILITIES
   =============================== */

.icon-large {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.icon-medium {
    font-size: 1rem;
}

/* ===============================
   FORM STEP NUMBER VARIANTS
   =============================== */

.form-step-number.small {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
}

.form-step-number.secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
}

.form-step-number.gray {
    background: var(--gray-dark);
}

/* ===============================
   CARD DESCRIPTION TEXT
   =============================== */

.card-description-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-dark);
}

/* ===============================
   SPEED SLIDER CONTAINER
   =============================== */

.speed-slider-container {
    padding: 1.5rem;
    background: white;
    border: 2px solid var(--gray);
    border-radius: 12px;
}

.speed-slider-label {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--foreground);
}

.speed-slider-value {
    color: var(--primary);
    font-size: 1.1rem;
}

.speed-slider-svg-container {
    position: relative;
    height: 75px;
}

.speed-slider-svg {
    width: 100%;
    height: 75px;
    cursor: pointer;
}

.speed-slider-point {
    cursor: grab;
}

/* ===============================
   SECTION HEADINGS
   =============================== */

.section-heading {
    margin: 0;
    font-weight: 600;
}

/* ===============================
   CTA SECTION VARIANT
   =============================== */

.cta-section.secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
}

/* ===============================
   DIVIDER STYLES
   =============================== */

.divider-top {
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray);
}

.hr-spacious {
    margin: 2rem 0;
}

/* ===============================
   FORM SECTION VARIANTS
   =============================== */

.form-section.highlighted {
    border: 2px solid var(--primary);
    background: rgba(76, 175, 80, 0.03);
}

/* Fix file upload box alignment - ensure CTA and filename have same width */
.file.is-boxed.has-name .file-name {
    max-width: none;
}

/* ===============================
   BUTTON SIZE VARIANTS
   =============================== */

.btn-large {
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

/* ===============================
   SECTION PADDING UTILITIES
   =============================== */

.section {
    padding-top: 0.2rem; /* Override Bulma default (3rem) to keep navbar closer to top */
}

.section-compact {
    padding: 0.05rem 1rem 1rem 1rem; /* Minimal top padding for tightest spacing after navbar */
}

/* ===============================
   ALERT / NOTIFICATION BOXES
   =============================== */

.alert-box {
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.alert-box.danger {
    background-color: var(--danger-tint);  /* Using --danger color */
    border: 1px solid var(--danger);
    color: #c0392b;
}

.alert-box.success {
    background-color: var(--primary-tint);  /* Using --primary color for success */
    border: 1px solid var(--primary);
    color: var(--primary-dark);
}

.alert-box.info {
    background-color: var(--secondary-tint);  /* Using --secondary color for info */
    border: 1px solid var(--secondary);
    color: var(--secondary-dark);
}

.alert-box.warning {
    background-color: rgba(243, 156, 18, 0.1);
    border: 1px solid #f39c12;
    color: #d68910;
}

/* ===============================
   LINK UTILITIES
   =============================== */

.link-bold {
    font-weight: 500;
}

/* ===============================
   TABLE UTILITIES
   =============================== */

.table-centered {
    display: flex;
    justify-content: center;
}

.table-narrow {
    max-width: 500px;
    border: 1px solid var(--gray);
}

.table-header-center {
    text-align: center;
    border-bottom: 2px solid var(--gray);
}

.table-cell-center {
    text-align: center;
    padding: 0.5rem;
}

.table-row-light {
    border-bottom: 1px solid var(--gray-light);
}

.input-narrow-centered {
    max-width: 120px;
    margin: 0 auto;
}

/* ===============================
   ERROR PAGE STYLES
   =============================== */

.page-header.error {
    background: linear-gradient(135deg, var(--danger-tint) 0%, rgba(255, 152, 0, 0.1) 100%);
}

.error-code {
    font-size: 6rem;
    font-weight: 800;
    color: var(--danger);
    line-height: 1;
    margin-bottom: 1rem;
}

.page-title.error {
    color: var(--danger);
}

/* ===============================
   MAP CONTAINER
   =============================== */

.map-full {
    width: 100%;
    height: 700px;
    margin-bottom: 0;
}

/* Map + side panel layout */
.map-with-side-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0;
}

.map-with-side-panel .map-full {
    flex: 1;
    min-width: 320px;
    width: auto;
}

.map-with-side-panel > .map-wrapper {
    flex: 1;
    min-width: 320px;
    position: relative;
}

.map-with-side-panel > .map-wrapper .map-full {
    width: 100%;
}

.places-side-panel {
    width: 280px;
    flex-shrink: 0;
    height: 700px;
    overflow-y: auto;
    background: white;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    font-size: 12px;
}

.places-side-panel .control-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.places-side-panel .place-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0;
    padding: 5px 6px;
    background: #f9f9f9;
    border-radius: 4px;
}

.places-side-panel .place-number {
    background-color: #209cee;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: bold;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.places-side-panel .place-number[onclick],
.places-side-panel button.place-number {
    cursor: pointer;
}

.places-side-panel button.place-number:hover {
    background-color: #1a8cd8;
}

.places-side-panel .place-icon {
    color: #666;
    font-size: 12px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* showtrack: read-only name span */
.places-side-panel .place-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.places-side-panel .place-secondary {
    font-size: 10px;
    color: #888;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* edittrack: name display span */
.places-side-panel .place-name-display {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* edittrack: action buttons */
.places-side-panel .edit-btn {
    background-color: #4a90d9;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
}

.places-side-panel .edit-btn:hover {
    background-color: #3a7bc8;
}

.places-side-panel .delete-btn {
    background-color: #f14668;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
}

.places-side-panel .delete-btn:hover {
    background-color: #d93a57;
}

@media (max-width: 960px) {
    .map-with-side-panel {
        flex-direction: column;
    }

    /* Reset flex so the map uses its intrinsic height: 700px (flex: 1 in
       column mode collapses height to 0 when the container is auto-height) */
    .map-with-side-panel .map-full {
        flex: none;
        width: 100%;
        height: 700px;
    }

    .map-with-side-panel > .map-wrapper {
        flex: none;
        width: 100%;
    }

    .places-side-panel {
        width: 100%;
        height: auto;
        max-height: 300px;
        flex-shrink: 1;
    }
}

.elevation-profile-container {
    width: 100%;
    margin-bottom: 1em;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    background: var(--background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Custom elevation chart theme — neutral grey */
.cyclograde-theme {
    --ele-bg: rgba(180, 180, 180, 0.15);
    --ele-axis: var(--gray-dark);
    --ele-area: #9e9e9e;
    --ele-brush: rgba(120, 120, 120, 0.25);
    --ele-line: #757575;
}

/* ===============================
   WELCOME PAGE STYLES
   =============================== */

.welcome-icon {
    font-size: 5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.welcome-message-box {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--primary-tint);
    border-radius: 12px;
}

.welcome-message-text {
    color: var(--foreground);
    line-height: 1.7;
}

.icon-text-primary {
    color: var(--primary);
    margin-right: 0.5rem;
}

/* ===============================
   PRICING TABLE ICONS
   =============================== */

.icon-check-primary {
    color: var(--primary);
}

.icon-times-danger {
    color: var(--danger);
}

/* ===============================
   MAP VARIANTS
   =============================== */

.map-medium {
    width: 100%;
    height: 500px;
    margin-bottom: 2rem;
}

/* ===============================
   IMAGE UTILITIES
   =============================== */

.img-half {
    width: 50%;
    height: auto;
}

.img-full {
    width: 100%;
    height: auto;
}

.img-cover-300 {
    object-fit: cover;
    height: 300px;
    width: 100%;
}

/* ===============================
   TEXT SIZE UTILITIES
   =============================== */

.text-sm {
    font-size: 0.9rem;
}

/* ===============================
   PADDING UTILITIES
   =============================== */

.pb-0-3em,
.pb-03em {  /* legacy alias */
    padding-bottom: 0.3em;
}

/* ===============================
   TABLE COLUMN WIDTHS
   =============================== */

.w-40 { width: 40%; }
.w-60 { width: 60%; }


.status-message-container {
    text-align: center;
    padding: 2rem;
    background: var(--primary-tint);
    border: 2px solid var(--primary-light);
    border-radius: 10px;
}

.status-message-primary {
    font-size: 1.1rem;
    color: var(--primary);
}

.status-message-muted {
    font-size: 0.9rem;
    color: var(--gray-dark);
    margin-top: 0.5rem;
}

.status-icon {
    margin-right: 0.5rem;
}

/* ===============================
   HELP PAGE STYLES
   =============================== */

/* Navigation menu */
.help-nav-box {
    background-color: var(--gray-light);
    border-left: 4px solid var(--secondary);
}

.help-nav-title {
    margin-bottom: 1rem;
    color: var(--secondary);
    font-weight: 600;
}

.help-menu-item {
    text-decoration: none;
    display: block;
    height: 100%;
}

.help-menu-card {
    display: flex;
    align-items: start;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    transition: all 0.2s;
    border: 1px solid var(--gray);
}

.help-menu-item:hover .help-menu-card {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
    border-color: var(--secondary);
}

.help-menu-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--secondary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.help-menu-content {
    flex: 1;
}

.help-menu-item-title {
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.help-menu-item-desc {
    font-size: 0.9em;
    color: var(--gray-dark);
}

/* Section spacing utilities */
.section-intro {
    margin-bottom: 1.5rem;
}

.section-tip {
    margin-top: 1.5rem;
}

/* Image modal/lightbox */
.image-clickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.image-clickable:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.image-modal-content {
    margin: auto;
    display: block;
    max-width: 95%;
    max-height: 95vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: zoomIn 0.3s;
}

@keyframes zoomIn {
    from {
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.2s;
}

.image-modal-close:hover,
.image-modal-close:focus {
    color: #bbb;
}

/* ===============================
   CONTEXTUAL HELP MODAL
   =============================== */

/* Help Button */
.help-button {
    background: transparent;
    border: none;
    color: #ff6b35; /* Orange color for better visibility */
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    margin-left: 0.5rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.help-button:hover {
    color: #ff4500; /* Darker orange on hover */
    transform: scale(1.1);
}

.help-button:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Help Modal */
.help-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease;
}

.help-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-modal-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease;
}

.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray);
}

.help-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-modal-title i {
    color: var(--primary);
}

.help-modal-close {
    background: transparent;
    border: none;
    color: var(--gray);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.25rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-modal-close:hover {
    color: var(--gray-dark);
}

.help-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    color: var(--gray-dark);
    line-height: 1.6;
}

.help-modal-body p {
    margin-bottom: 1rem;
}

.help-modal-body ul,
.help-modal-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.help-modal-body li {
    margin-bottom: 0.5rem;
}

.help-modal-body strong {
    color: var(--gray-dark);
    font-weight: 600;
}

.help-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray);
    text-align: right;
}

.help-modal-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.help-modal-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .help-modal-content {
        max-width: 95%;
        max-height: 90vh;
    }

    .help-modal-header,
    .help-modal-body,
    .help-modal-footer {
        padding: 1rem;
    }
}

/* ===============================
   PROFILE PLOT ZOOM CONTROLS
   =============================== */

.plot-expand-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.plot-controls-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Responsive adjustments for showtrack button bar */
@media (max-width: 768px) {
    .plot-expand-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}



#plotfile {
    width: 100%;
    display: block;
}

.plotfile-wrapper {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
}

.plotfile-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.landing-logo-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.85rem 0 0.35rem;
}

.landing-logo-bar a {
    display: inline-flex;
    align-items: center;
}

.landing-logo-bar img {
    display: block;
    width: 150px;
    height: auto;
}

.landing-page-promo,
.landing-page-cta {
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.9rem;
}

.landing-page-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    background: white;
    border: 1px solid color-mix(in srgb, var(--secondary) 16%, white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.landing-page-promo-copy,
.landing-page-cta-copy {
    flex: 1 1 420px;
}

.landing-page-promo-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-dark, var(--secondary));
}

.landing-page-promo-text,
.landing-page-cta-text {
    margin: 0;
    color: var(--foreground);
    line-height: 1.55;
}

.landing-page-promo-text {
    font-size: 0.98rem;
}

.landing-page-promo-actions,
.landing-page-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-page-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 18%, white) 0%, color-mix(in srgb, var(--accent-blue-light) 40%, white) 100%);
    border: 1px solid color-mix(in srgb, var(--secondary) 24%, white);
}

/* Every group of the catalogue is its own table under its own heading, and a table sizes its
   columns from its own rows — so the name column started in one place under June and another under
   the editions already ridden, and at ten months the page was ten different grids. Fixed widths
   give every group one geometry, whatever happens to be in it. */
.catalogue-table {
    table-layout: fixed;
}

.catalogue-table th:nth-child(1), .catalogue-table td:nth-child(1) { width: 15%; }
.catalogue-table th:nth-child(2), .catalogue-table td:nth-child(2) { width: 40%; }
.catalogue-table th:nth-child(3), .catalogue-table td:nth-child(3) { width: 27%; }
.catalogue-table th:nth-child(4), .catalogue-table td:nth-child(4) { width: 18%; }

/* A line, not a card. The promo card this replaces stacked to 582px on a 390px phone — 69% of the
   first screen — pushing every word of the page below the fold for a visitor arriving from a
   search result. It stays a line at every width: there is nothing here to stack. */
.landing-page-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.landing-page-hint a {
    font-weight: 600;
}

/* Costs nothing, asks for nothing — the line that has to be read before a signup button is worth
   reading at all. */
.landing-page-cta-note {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    color: var(--gray-dark);
}

.landing-page-cta-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--foreground);
}

.landing-page-cta-text {
    font-size: 0.96rem;
    max-width: 44rem;
}

.plotfile-target {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--foreground);
}

.plotfile-expand-btn {
    background: var(--background, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 7px;
    padding: 0.3rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--foreground);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s ease;
}

.plotfile-expand-btn:hover {
    background: var(--hover-background, #f5f5f5);
    opacity: 1;
}

.leaflet-control-zoom-level {
    background: rgba(255, 255, 255, 0.75);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    color: #555;
    pointer-events: none;
    box-shadow: none;
    border: none;
}

@media (max-width: 768px) {
    .landing-logo-bar {
        padding-top: 0.65rem;
    }

    .landing-logo-bar img {
        width: 132px;
    }

    .landing-page-promo,
    .landing-page-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    /* The 420px basis is a width, for the side-by-side layout above this breakpoint. Once the
       block stacks, the main axis is vertical and the same number becomes a minimum height: three
       lines of text in a 420px box, and a call to action 582px tall on a 390px phone — the exact
       figure this page was reshaped to get rid of, reappearing at the bottom instead of the top. */
    .landing-page-promo-copy,
    .landing-page-cta-copy {
        flex: 0 1 auto;
    }

    .landing-page-promo-actions,
    .landing-page-cta-actions {
        width: 100%;
    }

    .landing-page-promo-actions .button,
    .landing-page-cta-actions .button {
        width: 100%;
        justify-content: center;
    }
}

.plot-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plot-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: white;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--foreground);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: background-color 0.2s ease;
}

.plot-lightbox-close:hover {
    background-color: var(--gray-light);
}

.plot-lightbox-img {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

/* ============================================================
   Climbs Section (showtrack page)
   ============================================================ */

.climbs-section {
    margin: 1rem 0;
}

.climbs-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.climbs-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-dark);
    margin: 0;
}

.climbs-section-title i {
    color: var(--primary);
    font-size: 0.9rem;
}

.climbs-count-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    line-height: 1.4;
    color: white;
}

.climbs-count-badge--cat4 {
    background: var(--difficulty-cat4);
}

.climbs-count-badge--cat3 {
    background: var(--difficulty-cat3);
}

.climbs-count-badge--cat2 {
    background: var(--difficulty-cat2);
}

.climbs-count-badge--cat1 {
    background: var(--difficulty-cat1);
}

.climbs-count-badge--hc {
    background: var(--difficulty-hc);
}

.climbs-empty {
    font-size: 0.85rem;
    color: var(--gray-dark);
    font-style: italic;
    padding: 0.4rem 0;
}

.climbs-summary {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.6rem 0 0.9rem;
    border-bottom: 1px solid var(--gray);
    margin-bottom: 0.9rem;
}

.climbs-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.climbs-summary-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-dark);
}

.climbs-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
}

.climbs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.climb-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border: 1px solid var(--gray);
    border-top: 4px solid transparent;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 320px;
    overflow: hidden;
}

.climb-card--cat4 {
    border-top-color: var(--difficulty-cat4);
}

.climb-card--cat3 {
    border-top-color: var(--difficulty-cat3);
}

.climb-card--cat2 {
    border-top-color: var(--difficulty-cat2);
}

.climb-card--cat1 {
    border-top-color: var(--difficulty-cat1);
}

.climb-card--hc {
    border-top-color: var(--difficulty-hc);
}

.climb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem 0.4rem;
    background: var(--gray-light);
    border-bottom: 1px solid var(--gray);
}

.climb-card-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--foreground);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.climb-card-summit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--secondary-dark);
    background: var(--secondary-tint);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
}

.climb-card-summit i {
    font-size: 0.65rem;
}

.climb-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0.4rem 0.6rem 0.5rem;
}

.climb-stat {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.3rem 0.2rem;
}

.climb-stat + .climb-stat {
    border-left: none;
}

.climb-stat:nth-child(odd) {
    border-right: 1px solid var(--gray);
    padding-right: 0.5rem;
}

.climb-stat:nth-child(even) {
    padding-left: 0.5rem;
}

.climb-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-dark);
    font-weight: 500;
}

.climb-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.2;
}

.climb-stat-value--slope-easy   { color: var(--primary-dark); }
.climb-stat-value--slope-medium { color: #e65100; }
.climb-stat-value--slope-hard   { color: #c62828; }

.climb-stat-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--gray);
    margin: 0.1rem 0;
}

@media (max-width: 768px) {
    .climbs-grid {
        gap: 0.7rem;
    }
    .climb-card {
        min-width: 160px;
        max-width: 100%;
        flex: 1 1 160px;
    }
    .climb-card-stats {
        padding: 0.3rem 0.4rem 0.4rem;
    }
    .climb-stat-value {
        font-size: 0.85rem;
    }
}

/* ===============================
   SIMPLE CLIMBS LIST VIEW
   =============================== */

.climbs-view-btn {
    margin-left: auto;
    flex-shrink: 0;
}

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

.climb-row {
    border-radius: 8px;
    border: 1px solid var(--gray);
    overflow: hidden;
}

.climb-row-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--gray-light);
}

.climb-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    white-space: nowrap;
}

.climb-row--cat4  .climb-row-badge { background: var(--difficulty-cat4); }
.climb-row--cat3  .climb-row-badge { background: var(--difficulty-cat3); }
.climb-row--cat2  .climb-row-badge { background: var(--difficulty-cat2); }
.climb-row--cat1  .climb-row-badge { background: var(--difficulty-cat1); }
.climb-row--hc    .climb-row-badge { background: var(--difficulty-hc); }

.climb-row-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    flex-shrink: 0;
    white-space: nowrap;
}

.climb-row-stats {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    align-items: center;
}

.climb-row-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--foreground);
    white-space: nowrap;
}

.climb-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 5px;
    flex-shrink: 0;
}

.climb-stat-icon--distance  { background: #dbeafe; color: #1d4ed8; }
.climb-stat-icon--slope     { background: #ffedd5; color: #c2410c; }
.climb-stat-icon--elevation { background: #dcfce7; color: #15803d; }
.climb-stat-icon--time      { background: #ede9fe; color: #6d28d9; }

.climb-stat-icon i {
    font-size: 0.7rem;
    line-height: 1;
}

.climb-row-bar-track {
    height: 7px;
    background: var(--gray);
}

.climb-row-bar {
    height: 100%;
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
}

.climb-row--cat4  .climb-row-bar { background: var(--difficulty-cat4); }
.climb-row--cat3  .climb-row-bar { background: var(--difficulty-cat3); }
.climb-row--cat2  .climb-row-bar { background: var(--difficulty-cat2); }
.climb-row--cat1  .climb-row-bar { background: var(--difficulty-cat1); }
.climb-row--hc    .climb-row-bar { background: var(--difficulty-hc); }

/* ===============================
   FILTER BAR (published tracks catalogue)
   =============================== */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    padding: 1rem 1.25rem;
    background: var(--gray-light);
    border-radius: var(--radius);
    border: 1px solid var(--gray);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-dark);
}

/* Pill buttons for kind filter */
.filter-pills {
    display: flex;
    gap: 0.35rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--gray);
    background: var(--background);
    color: var(--foreground);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.filter-pill input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.filter-pill:focus-within {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.filter-pill:hover {
    border-color: var(--secondary);
    color: var(--secondary-dark);
    background: rgba(33, 150, 243, 0.06);
}

.filter-pill.is-active,
.filter-pill:has(input:checked) {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
    font-weight: 600;
}

.filter-pill.is-active:hover,
.filter-pill:has(input:checked):hover {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

/* Styled select for geo filters */
.filter-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.filter-select-icon {
    position: absolute;
    left: 0.65rem;
    color: var(--gray-dark);
    pointer-events: none;
    z-index: 1;
    font-size: 0.75rem;
}

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.4rem 2.2rem 0.4rem 1.9rem;
    border: 1px solid var(--gray);
    border-radius: var(--form-border-radius);
    background: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    color: var(--foreground);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 160px;
}

.filter-select:hover,
.filter-select:focus {
    border-color: var(--secondary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        gap: 1rem;
    }

    .filter-pills {
        flex-wrap: wrap;
    }

    .filter-select {
        min-width: 100%;
    }
}