:root {
    --pt-primary: #6366f1;
    --pt-primary-dark: #4f46e5;
    --pt-primary-darker: #4338ca;
    --pt-primary-light: #818cf8;
    --pt-primary-lighter: #a5b4fc;
    --pt-primary-bg: rgba(99,102,241,0.06);
    --pt-violet: #7c3aed;
    --pt-accent: #06b6d4;
    --pt-accent-light: #22d3ee;
    --pt-bg: #f6f7fb;
    --pt-card-bg: #ffffff;
    --pt-surface: #ffffff;
    --pt-surface-2: #f8fafc;
    --pt-surface-3: #f1f5f9;
    --pt-text: #0f172a;
    --pt-text-light: #64748b;
    --pt-text-muted: #94a3b8;
    --pt-success: #10b981;
    --pt-success-dark: #059669;
    --pt-success-darker: #047857;
    --pt-success-bg: rgba(16,185,129,0.08);
    --pt-danger: #ef4444;
    --pt-danger-dark: #dc2626;
    --pt-danger-darker: #b91c1c;
    --pt-danger-bg: rgba(239,68,68,0.08);
    --pt-warning: #f59e0b;
    --pt-warning-bg: rgba(245,158,11,0.08);
    --pt-border: #e5e9f0;
    --pt-border-soft: rgba(15,23,42,0.06);
    --pt-border-strong: #cbd5e1;
    --pt-ring: rgba(99,102,241,0.28);
    --pt-sidebar-bg: #0b1120;
    --pt-sidebar-bg-2: #111a2e;
    --pt-sidebar-hover: rgba(255,255,255,0.06);
    --pt-sidebar-active: rgba(99,102,241,0.25);
    --pt-radius: 16px;
    --pt-radius-lg: 20px;
    --pt-radius-xl: 26px;
    --pt-radius-sm: 12px;
    --pt-radius-xs: 8px;
    --pt-radius-full: 9999px;
    /* Layered, low-alpha shadows read as "premium" far better than one dark blur. */
    --pt-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --pt-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.03);
    --pt-shadow: 0 2px 4px rgba(15,23,42,0.03), 0 8px 20px -6px rgba(15,23,42,0.07);
    --pt-shadow-lg: 0 4px 8px rgba(15,23,42,0.03), 0 18px 36px -10px rgba(15,23,42,0.10);
    --pt-shadow-xl: 0 8px 16px rgba(15,23,42,0.04), 0 36px 64px -20px rgba(15,23,42,0.16);
    --pt-shadow-primary: 0 4px 12px -2px rgba(79,70,229,0.28), 0 2px 4px -2px rgba(79,70,229,0.2);
    --pt-shadow-primary-hover: 0 8px 22px -4px rgba(79,70,229,0.38), 0 4px 8px -4px rgba(79,70,229,0.24);
    --pt-shadow-success: 0 4px 12px -2px rgba(5,150,105,0.26), 0 2px 4px -2px rgba(5,150,105,0.18);
    --pt-shadow-success-hover: 0 8px 22px -4px rgba(5,150,105,0.36), 0 4px 8px -4px rgba(5,150,105,0.22);
    --pt-shadow-danger: 0 4px 12px -2px rgba(220,38,38,0.24), 0 2px 4px -2px rgba(220,38,38,0.16);
    --pt-shadow-danger-hover: 0 8px 22px -4px rgba(220,38,38,0.34), 0 4px 8px -4px rgba(220,38,38,0.2);
    --pt-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --pt-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --pt-transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --pt-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pt-bottomnav-height: 64px;
    --pt-content-max: 1200px;
    --pt-sidebar-width: 268px;
    --pt-topbar-height: 4rem;
    /* Shared height for inputs, selects and pickers so filter rows line up. */
    --pt-control-height: 48px;
}

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--pt-bg);
    color: var(--pt-text);
    margin: 0;
    height: auto;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

h1, h2, h3 {
    color: var(--pt-text);
    font-weight: 700;
    letter-spacing: -0.025em;
}

h4, h5, h6 {
    letter-spacing: -0.015em;
    font-weight: 650;
}

/* Prices, counts and dates line up in columns when digits are tabular. */
.ride-price,
.ips-qr-amount,
.badge,
.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--pt-primary);
    transition: color var(--pt-transition-fast);
}

a:hover {
    color: var(--pt-primary-dark);
}

/* ===== Buttons ===== */
.btn {
    border-radius: var(--pt-radius-sm);
    font-weight: 600;
    transition: all var(--pt-transition);
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.btn:active::after {
    opacity: 1;
    transition: opacity 0s;
}

.btn:active {
    transform: scale(0.97);
}

.btn-sm {
    min-height: 36px;
    font-size: 0.85rem;
}

/* Search/filter buttons sit in a row of 48px inputs, so they opt out of the
   shorter default button height to keep the row's baseline even. */
.btn.filter-submit {
    min-height: var(--pt-control-height);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pt-primary) 0%, var(--pt-primary-dark) 100%);
    border: none;
    box-shadow: var(--pt-shadow-primary);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--pt-primary-dark) 0%, var(--pt-primary-darker) 100%);
    box-shadow: var(--pt-shadow-primary-hover);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.97);
}

.btn-outline-primary {
    color: var(--pt-primary-dark);
    border: 1.5px solid rgba(99,102,241,0.35);
    background: rgba(99,102,241,0.04);
}

.btn-outline-primary:hover {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--pt-shadow-primary);
}

/* Bootstrap's stock success/danger are flat, dark and dated next to the
   gradient primary. Re-skin them on the design tokens so every solid button
   in the app shares one visual language. */
.btn-success {
    color: #fff;
    background: linear-gradient(135deg, var(--pt-success) 0%, var(--pt-success-dark) 100%);
    border: none;
    box-shadow: var(--pt-shadow-success);
}

.btn-success:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--pt-success-dark) 0%, var(--pt-success-darker) 100%);
    box-shadow: var(--pt-shadow-success-hover);
    transform: translateY(-1px);
}

.btn-success:active {
    transform: translateY(0) scale(0.97);
}

.btn-success:focus-visible {
    box-shadow: 0 0 0 3px rgba(16,185,129,0.32);
}

.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, var(--pt-danger) 0%, var(--pt-danger-dark) 100%);
    border: none;
    box-shadow: var(--pt-shadow-danger);
}

.btn-danger:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--pt-danger-dark) 0%, var(--pt-danger-darker) 100%);
    box-shadow: var(--pt-shadow-danger-hover);
    transform: translateY(-1px);
}

.btn-danger:active {
    transform: translateY(0) scale(0.97);
}

.btn-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(239,68,68,0.3);
}

/* A destructive secondary action should stay quiet until it is hovered. */
.btn-outline-danger {
    color: var(--pt-danger-dark);
    border: 1.5px solid rgba(239,68,68,0.28);
    background: rgba(239,68,68,0.04);
}

.btn-outline-danger:hover {
    background: linear-gradient(135deg, var(--pt-danger) 0%, var(--pt-danger-dark) 100%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--pt-shadow-danger);
}

.btn-outline-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(239,68,68,0.3);
}

.btn-outline-secondary {
    border: 1.5px solid var(--pt-border);
    color: var(--pt-text-light);
    background: #fff;
}

.btn-outline-secondary:hover {
    background: var(--pt-surface-3);
    border-color: var(--pt-border-strong);
    color: var(--pt-text);
    transform: translateY(-1px);
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--pt-ring);
    outline: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* ===== Form Controls ===== */
.form-control {
    border-radius: var(--pt-radius-sm);
    border: 1.5px solid var(--pt-border);
    transition: border-color var(--pt-transition-fast), box-shadow var(--pt-transition-fast), background-color var(--pt-transition-fast);
    min-height: 48px;
    font-size: 1rem;
    padding: 0.625rem 1rem;
    background-color: #fff;
    color: var(--pt-text);
    box-shadow: var(--pt-shadow-xs);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--pt-text-muted);
}

.form-control:hover {
    border-color: var(--pt-primary-lighter);
}

.form-control:focus {
    border-color: var(--pt-primary);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pt-text-light);
    margin-bottom: 0.375rem;
    letter-spacing: 0.005em;
}

.form-select {
    border-radius: var(--pt-radius-sm);
    border: 1.5px solid var(--pt-border);
    transition: border-color var(--pt-transition-fast), box-shadow var(--pt-transition-fast);
    padding: 0.625rem 1rem;
    font-size: 1rem;
    min-height: 48px;
    background-color: #fff;
    box-shadow: var(--pt-shadow-xs);
}

.form-select:hover {
    border-color: var(--pt-primary-lighter);
}

.form-select:focus {
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* Card action buttons: one pill shape and one height for every variant, so a
   footer of mixed outline/solid buttons still reads as a single control group. */
.ride-action-btn {
    min-width: 0;
    min-height: 38px;
    padding: 0 1.05rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--pt-radius-full);
    box-sizing: border-box;
    white-space: nowrap;
}

.ride-action-btn svg {
    flex-shrink: 0;
}

/* Footer actions sit in two groups (communication / commitment); wrap them
   into a full-width column on narrow phones instead of squeezing them. */
.ride-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ride-actions-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 400px) {
    .ride-actions,
    .ride-actions-group {
        width: 100%;
    }

    .ride-actions-group .ride-action-btn {
        flex: 1 1 auto;
    }
}

.content {
    padding-top: 0.75rem;
    padding-bottom: calc(var(--pt-bottomnav-height) + var(--pt-safe-bottom) + 2rem);
    animation: fadeInUp 0.3s ease-out;
    min-height: 0;
}

/* Prevent MudBlazor popover overlay from blocking touch scroll */
.mud-popover-provider,
.mud-popover-cascade-class-provider {
    pointer-events: none !important;
}

.mud-popover-provider .mud-popover-open,
.mud-popover-cascade-class-provider .mud-popover-open {
    pointer-events: auto !important;
}

/* Modeless overlays (MudSelect) already set pointer-events:none inline, and their
   close-on-outside-click works by briefly flipping that inline value to auto to
   hit-test with elementsFromPoint. An !important rule here would beat the inline
   style and leave the dropdown stuck open, so exclude them. */
.mud-overlay:not([data-modeless-ignore-element-id]) {
    pointer-events: none !important;
}

.mud-overlay.mud-overlay-dialog {
    pointer-events: auto !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== Card styling ===== */
.card {
    border: 1px solid var(--pt-border-soft);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    transition: box-shadow var(--pt-transition), transform var(--pt-transition), border-color var(--pt-transition);
    background: var(--pt-card-bg);
    animation: slideUp 0.35s ease-out backwards;
}

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

@media (hover: hover) {
    .card:hover {
        box-shadow: var(--pt-shadow-lg);
        transform: translateY(-2px);
        border-color: rgba(99,102,241,0.16);
    }
}

/* A flat tinted header reads far more current than a saturated purple bar. */
.card-header {
    background: linear-gradient(180deg, var(--pt-surface-2) 0%, #fff 100%);
    color: var(--pt-text);
    border-radius: var(--pt-radius) var(--pt-radius) 0 0 !important;
    font-weight: 650;
    border-bottom: 1px solid var(--pt-border-soft);
    padding: 1rem 1.25rem;
    letter-spacing: -0.015em;
}

.card-header .badge {
    flex-shrink: 0;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--pt-border-soft);
    border-radius: 0 0 var(--pt-radius) var(--pt-radius);
}

/* ===== Ride card specific ===== */
.ride-card {
    position: relative;
    overflow: hidden;
    border-left: none;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

/* Gradient accent rail replaces the old flat 4px left border. */
.ride-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--pt-primary-light) 0%, var(--pt-primary) 45%, var(--pt-violet) 100%);
    transition: width var(--pt-transition), opacity var(--pt-transition);
}

@media (hover: hover) {
    .ride-card:hover::before {
        width: 5px;
    }
}

.ride-card:active {
    transform: scale(0.985);
}

.ride-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pt-text);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.ride-route {
    font-size: 1.05rem;
    color: var(--pt-text);
    font-weight: 600;
    line-height: 1.4;
}

.ride-arrow {
    color: var(--pt-accent);
    font-weight: bold;
    margin: 0 0.4rem;
    display: inline-block;
    transition: transform var(--pt-transition);
}

.ride-card:hover .ride-arrow {
    transform: translateX(2px);
}

/* Fully booked rides — visible for context, but clearly inactive */
.ride-card-link-disabled {
    cursor: default;
    display: block;
}

.ride-card-full {
    background-color: var(--pt-surface-2);
    opacity: 0.65;
    cursor: default;
    filter: grayscale(0.85);
}

.ride-card-full::before {
    background: var(--pt-border-strong);
}

.ride-card-full:hover {
    box-shadow: var(--pt-shadow-sm);
    transform: none;
    border-color: var(--pt-border-soft);
}

.ride-card-full:hover::before {
    width: 4px;
}

.ride-card-full:active {
    transform: none;
}

.ride-card-full .ride-price,
.ride-card-full .ride-route {
    color: var(--pt-text-muted);
}

.ride-card-full:hover .ride-arrow {
    transform: none;
}

.badge-full {
    background-color: var(--pt-danger-bg);
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(185,28,28,0.16);
    border-radius: var(--pt-radius-full);
    font-weight: 600;
    padding: 0.15rem 0.625rem;
    font-size: 0.75rem;
}

/* ===== View counter ===== */
/* Reads as metadata rather than an action: quiet until the card it sits on is hovered. */
.view-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--pt-text-light);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--pt-transition-fast);
}

.view-count-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    opacity: 0.8;
    transition: opacity var(--pt-transition-fast);
}

.ride-card:hover .view-count {
    color: var(--pt-primary);
}

.ride-card:hover .view-count-icon {
    opacity: 1;
}

/* On the ride's own page the count stands alone next to the status badge, so it needs the
   same pill shape the badges beside it have to sit on the same line convincingly. */
.view-count-chip {
    background-color: var(--pt-surface-3);
    box-shadow: inset 0 0 0 1px var(--pt-border-soft);
    border-radius: var(--pt-radius-full);
    padding: 0.3rem 0.7rem;
}

/* ===== Status badges ===== */
.badge-pending {
    background-color: var(--pt-warning-bg);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(180,83,9,0.16);
    border-radius: var(--pt-radius-full);
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    font-size: 0.8rem;
}

.badge-accepted {
    background-color: var(--pt-success-bg);
    color: #047857;
    box-shadow: inset 0 0 0 1px rgba(4,120,87,0.16);
    border-radius: var(--pt-radius-full);
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    font-size: 0.8rem;
}

.badge-rejected {
    background-color: var(--pt-danger-bg);
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(185,28,28,0.16);
    border-radius: var(--pt-radius-full);
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    font-size: 0.8rem;
}

/* ===== Hero section ===== */
.hero {
    background:
        radial-gradient(circle at 82% 12%, rgba(34,211,238,0.32) 0%, transparent 48%),
        radial-gradient(circle at 12% 88%, rgba(168,85,247,0.38) 0%, transparent 52%),
        linear-gradient(145deg, var(--pt-primary) 0%, var(--pt-primary-dark) 45%, #6d28d9 100%);
    color: white;
    padding: 2.5rem 1.5rem 3.5rem;
    border-radius: 0 0 32px 32px;
    margin: -0.75rem -1rem 1.5rem -1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Faint grid gives the gradient depth instead of a flat slab of colour. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 72%);
    animation: none;
    border-radius: 0;
    width: auto;
    height: auto;
    top: 0;
    right: 0;
    z-index: -1;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -45%;
    left: 50%;
    transform: translateX(-50%);
    width: 620px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 62%);
    border-radius: 50%;
    animation: pulse-soft 8s infinite 1s;
    z-index: -1;
}

.hero h1 {
    color: white;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.5s ease-out;
    text-wrap: balance;
}

.hero p {
    opacity: 0.9;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    font-weight: 400;
    animation: fadeInUp 0.5s ease-out 0.1s backwards;
    line-height: 1.5;
    text-wrap: balance;
    margin-bottom: 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.9rem;
    border-radius: var(--pt-radius-full);
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.95);
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.5s ease-out;
}

@media (min-width: 768px) {
    /* On desktop the hero becomes a contained panel instead of a full-bleed slab. */
    .hero {
        padding: 3.25rem 2.5rem 3.75rem;
        margin: 0 0 1.75rem;
        border-radius: var(--pt-radius-xl);
        box-shadow: 0 20px 45px -22px rgba(79,70,229,0.55);
    }
    .hero h1 {
        font-size: 2.35rem;
    }
    .hero p {
        font-size: 1.1rem;
        max-width: 44ch;
        margin-inline: auto;
    }
}

/* ===== Search/filter bar ===== */
.search-bar {
    background: var(--pt-card-bg);
    padding: 1.25rem;
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-lg);
    margin-top: -1.5rem;
    position: relative;
    z-index: 10;
    border: 1px solid var(--pt-border-soft);
    animation: slideUp 0.4s ease-out 0.2s backwards;
}

@media (min-width: 768px) {
    .search-bar {
        padding: 1.5rem;
        margin-top: -3.25rem;
        margin-inline: 1.5rem;
    }
}

/* The same panel on pages with no hero to tuck under. */
.search-bar-flat {
    margin-top: 0;
}

@media (min-width: 768px) {
    .search-bar-flat {
        margin-top: 0;
        margin-inline: 0;
    }
}

/* ===== From/To pair with swap button ===== */
.city-swap-group {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.city-swap-field {
    flex: 1 1 0;
    min-width: 0;
}

.swap-cities-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: var(--pt-primary);
    border: 1.5px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    transition: border-color var(--pt-transition-fast), background-color var(--pt-transition-fast), color var(--pt-transition-fast);
}

.swap-cities-btn:hover:not(:disabled) {
    border-color: var(--pt-primary);
    background: var(--pt-primary-bg);
}

.swap-cities-btn:focus-visible {
    outline: none;
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.swap-cities-btn:disabled {
    color: var(--pt-text-muted);
    opacity: 0.6;
    cursor: not-allowed;
}

.swap-cities-btn svg {
    transition: transform var(--pt-transition);
}

.swap-cities-btn:hover:not(:disabled) svg {
    transform: rotate(180deg);
}

/* ===== Auth pages ===== */
.auth-container {
    max-width: 420px;
    margin: 1rem auto;
    padding: 0 0.5rem;
}

.auth-card {
    border-radius: var(--pt-radius-lg);
    padding: 2rem 1.5rem;
    background: white;
    box-shadow: var(--pt-shadow-xl);
    border: 1px solid var(--pt-border-soft);
    animation: scaleIn 0.3s ease-out;
}

@media (min-width: 768px) {
    .auth-container {
        margin: 3rem auto;
    }
    .auth-card {
        padding: 2.5rem;
    }
}

.auth-card h2 {
    text-align: center;
    margin-bottom: 1.75rem;
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.auth-brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.22);
}

.auth-logo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pt-text);
    letter-spacing: -0.02em;
}

/* Social sign-in buttons (neutral, brand mark only) */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    background: #fff;
    color: var(--pt-text);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius);
    font-weight: 600;
    box-shadow: var(--pt-shadow-xs);
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-social:hover {
    background: var(--pt-surface-2);
    border-color: var(--pt-border-strong);
    color: var(--pt-text);
    transform: translateY(-1px);
    box-shadow: var(--pt-shadow-sm);
}

.btn-social:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pt-ring);
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--pt-text-muted);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--pt-border);
}

.divider span {
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--pt-success);
}

.invalid {
    outline: none;
    border-color: var(--pt-danger) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
}

.validation-message {
    color: var(--pt-danger);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-weight: 500;
    animation: fadeIn 0.2s ease;
}

/* Error UI */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Blazor shows this banner by setting an inline display, so it still appears despite [hidden].
   The labels are generated content so they stay out of the HTML a crawler reads. */
#blazor-error-ui .message::before {
    content: "Došlo je do greške u aplikaciji.";
}

#blazor-error-ui .reload::before {
    content: "Osveži stranicu";
}

#blazor-error-ui .dismiss::before {
    content: "🗙";
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Došlo je do greške."
}

/* Loading */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--pt-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--pt-primary);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Učitavanje...");
}

/* ===== Spinner ===== */
.spinner-border {
    animation: spinner-border 0.65s linear infinite;
}

/* ===== Utility ===== */
.text-muted { color: var(--pt-text-light) !important; }

.section-title {
    font-size: 1.375rem;
    font-weight: 750;
    color: var(--pt-text);
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
    letter-spacing: -0.03em;
    animation: fadeInUp 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    line-height: 1.25;
}

/* Short gradient accent instead of a full-width rule under the heading. */
.section-title::before {
    content: '';
    width: 4px;
    height: 1.35em;
    flex-shrink: 0;
    border-radius: var(--pt-radius-full);
    background: linear-gradient(180deg, var(--pt-primary-light) 0%, var(--pt-primary) 50%, var(--pt-violet) 100%);
}

@media (min-width: 768px) {
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Star ratings ===== */
.star-rating .star.filled { color: #f59e0b; }
.star-rating .star.half { color: #f59e0b; opacity: 0.6; }
.star-rating .star.empty { color: #d1d5db; }
.star-input .star-select {
    color: #d1d5db;
    transition: color 0.15s, transform 0.2s;
    cursor: pointer;
}
.star-input .star-select.selected { color: #f59e0b; transform: scale(1.1); }
.star-input .star-select:hover { color: #f59e0b; transform: scale(1.15); }

/* ===== Alert ===== */
.alert {
    border-radius: var(--pt-radius-sm);
    border: none;
    font-weight: 500;
    animation: slideUp 0.25s ease-out;
}

.alert-success {
    background: var(--pt-success-bg);
    color: #047857;
}

.alert-danger {
    background: var(--pt-danger-bg);
    color: #b91c1c;
}

.alert-warning {
    background: var(--pt-warning-bg);
    color: #92400e;
}

.alert-info {
    background: rgba(6,182,212,0.08);
    color: #0e7490;
}

/* ===== Badge (global) ===== */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all var(--pt-transition-fast);
}

/* ===== Empty state ===== */
.text-center.py-5 .text-muted {
    font-size: 1rem;
}

/* ===== Mobile safe area for bottom nav ===== */
@media (max-width: 767.98px) {
    .content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .col-md-6.col-lg-4 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ===== Conversation card ===== */
.conversation-card {
    transition: background-color var(--pt-transition-fast), transform var(--pt-transition-fast);
    border-radius: var(--pt-radius) !important;
}

.conversation-card:hover {
    background-color: var(--pt-primary-bg) !important;
}

.conversation-card:active {
    transform: scale(0.985);
}

/* ── IPS QR payment modal ── */
.ips-qr-image {
    width: 100%;
    max-width: 280px;
    height: auto;
    image-rendering: pixelated;
    background: #fff;
    padding: 12px;
    border: 1px solid var(--pt-border, #e5e7eb);
    border-radius: var(--pt-radius, 12px);
}

.ips-qr-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pt-primary);
    letter-spacing: -0.03em;
    margin-top: 0.75rem;
}

.ips-qr-details dt {
    font-weight: 600;
    color: #6b7280;
}

.ips-qr-details dd {
    margin-bottom: 0.35rem;
    word-break: break-word;
}

/* =========================================================================
   MudBlazor <-> Bootstrap control alignment
   The date/time pickers sit next to .form-control inputs in every filter and
   form row. MudBlazor's outlined input is ~85px tall, which pushed those rows
   out of alignment; normalise it to the same 48px control height.
   ========================================================================= */
.mud-picker {
    min-width: 0;
}

.mud-input.mud-input-outlined {
    min-height: var(--pt-control-height);
}

.mud-input.mud-input-outlined > input.mud-input-root-outlined,
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined {
    height: var(--pt-control-height);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline-start: 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--pt-text);
}

/* MudSelect displays its value in a <div>, which — unlike an <input> — doesn't
   centre its text against the control height. MudBlazor also writes an inline
   display:inline on that div, so flex centring can't win over it; line-height
   is what's left to keep the value off the top edge. */
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined {
    line-height: var(--pt-control-height);
}

.mud-input.mud-input-outlined > input.mud-input-root-outlined::placeholder {
    color: var(--pt-text-muted);
    opacity: 1;
}

.mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-radius: var(--pt-radius-sm);
    border-width: 1.5px;
    border-color: var(--pt-border);
    box-shadow: var(--pt-shadow-xs);
    transition: border-color var(--pt-transition-fast), box-shadow var(--pt-transition-fast);
}

@media (hover: hover) and (pointer: fine) {
    .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
        border-color: var(--pt-primary-lighter);
    }
}

.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-width: 1.5px;
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.mud-input-adornment .mud-icon-root {
    color: var(--pt-text-muted);
    font-size: 1.15rem;
}

.mud-input-adornment .mud-icon-button {
    color: var(--pt-text-muted);
}

/* Clearable pickers render their reset button inside the input, just before the
   calendar adornment. Match it to the muted adornment icons so it reads as part
   of the control rather than a separate button sitting next to it. */
.mud-input .mud-input-clear-button {
    color: var(--pt-text-muted);
    padding: 0.25rem;
    flex-shrink: 0;
}

.mud-input .mud-input-clear-button .mud-icon-root {
    font-size: 1.05rem;
}

.mud-input .mud-input-clear-button:hover,
.mud-input .mud-input-clear-button:focus-visible {
    color: var(--pt-text);
    background-color: rgba(99,102,241,0.1);
}

.mud-input-control {
    margin-bottom: 0;
}

.mud-input-control.mud-input-control-margin-normal {
    margin-top: 0;
}

/* Select: replaces the native <select>, whose dropdown list is OS-rendered and
   therefore unstyleable. The trigger reuses the outlined-input rules above; the
   popover is themed here to match cards and the app's soft-shadow language. */
.pt-select .mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined {
    cursor: pointer;
}

.pt-select .mud-select-input {
    cursor: pointer;
}

.pt-select .mud-input-adornment-end .mud-icon-root {
    transition: transform var(--pt-transition-fast), color var(--pt-transition-fast);
}

.pt-select .mud-input.mud-input-outlined:focus-within .mud-input-adornment-end .mud-icon-root {
    color: var(--pt-primary);
}

.pt-select-popover.mud-popover {
    border-radius: var(--pt-radius-sm);
    border: 1px solid var(--pt-border);
    background-color: var(--pt-surface);
    box-shadow: var(--pt-shadow-lg);
    padding: 0.3125rem;
    overflow: hidden;
}

.pt-select-popover .mud-list {
    padding: 0;
    background-color: transparent;
}

.pt-select-popover .mud-list-item {
    border-radius: var(--pt-radius-xs);
    padding: 0.5rem 0.75rem;
    min-height: 40px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--pt-text);
    transition: background-color var(--pt-transition-fast), color var(--pt-transition-fast);
}

.pt-select-popover .mud-list-item + .mud-list-item {
    margin-top: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .pt-select-popover .mud-list-item:hover {
        background-color: var(--pt-surface-3);
    }
}

/* MudBlazor sets .mud-primary-text color and .mud-primary-hover background with
   !important, so the brand indigo has to match that priority to win. */
.pt-select-popover .mud-list .mud-list-item.mud-selected-item,
.pt-select-popover .mud-list .mud-list-item.mud-selected-item:hover {
    background-color: var(--pt-primary-bg) !important;
    color: var(--pt-primary-dark) !important;
    font-weight: 600;
}

.pt-select-popover .mud-list-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--pt-ring);
}

/* =========================================================================
   Empty states
   ========================================================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.25rem;
    border-radius: var(--pt-radius-lg);
    border: 1px dashed var(--pt-border-strong);
    background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.05) 0%, transparent 60%),
        var(--pt-surface);
    animation: fadeInUp 0.35s ease-out;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--pt-radius);
    display: grid;
    place-items: center;
    margin-bottom: 0.35rem;
    color: var(--pt-primary);
    background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(124,58,237,0.1) 100%);
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.14);
}

.empty-state-title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--pt-text);
    letter-spacing: -0.015em;
    margin: 0;
}

.empty-state-text {
    color: var(--pt-text-light);
    font-size: 0.925rem;
    margin: 0;
    max-width: 42ch;
}

.empty-state .btn {
    margin-top: 0.75rem;
}

/* =========================================================================
   Desktop refinements (>= 768px)
   Mobile keeps its existing app-like layout; everything below only tunes the
   wider viewport, which is where the UI felt dated.
   ========================================================================= */
@media (min-width: 768px) {
    body {
        background-image:
            radial-gradient(900px circle at 100% -10%, rgba(99,102,241,0.07) 0%, transparent 55%),
            radial-gradient(700px circle at 0% 8%, rgba(6,182,212,0.05) 0%, transparent 50%);
        background-attachment: fixed;
        background-repeat: no-repeat;
    }

    .content {
        width: 100%;
        max-width: var(--pt-content-max);
        margin-inline: auto;
        padding-top: 1.75rem;
        padding-bottom: 4rem;
    }

    /* Keep a page's .container-fluid flush with siblings that sit outside it. */
    .content > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .btn {
        min-height: 42px;
    }

    .btn-sm {
        min-height: 34px;
    }

    .card-body {
        padding: 1.5rem;
    }

    .card-header {
        padding: 1.125rem 1.5rem;
    }

    .card-footer {
        padding: 1rem 1.5rem;
    }

    /* Equal-height ride cards keep the grid tidy instead of ragged. */
    .row > [class*="col-"] > a > .card.h-100 {
        height: 100%;
    }

    .empty-state {
        padding: 4rem 2rem;
    }
}

@media (min-width: 1200px) {
    .content {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

/* Avatar placeholders (initial letter) — gradient instead of flat Bootstrap grey. */
.rounded-circle.bg-secondary {
    background: linear-gradient(135deg, var(--pt-primary-light) 0%, var(--pt-violet) 100%) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 6px rgba(79, 70, 229, 0.18);
}

/* Long-form / legal prose: cap the measure for comfortable reading. */
.legal-card {
    max-width: 820px;
}

.legal-content {
    max-width: 68ch;
}

.legal-content h5 {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.legal-content h5:first-of-type {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    color: var(--pt-text-light);
    line-height: 1.7;
}

.legal-content ul {
    padding-left: 1.15rem;
}

.legal-content li + li {
    margin-top: 0.3rem;
}

.legal-content strong {
    color: var(--pt-text);
}

/* Text selection */
::selection {
    background: rgba(99, 102, 241, 0.18);
    color: var(--pt-text);
}

/* Slim, unobtrusive scrollbars for scrollable panes (desktop pointers only) */
@media (hover: hover) and (pointer: fine) {
    .nav-scrollable,
    .messages-container,
    .conversation-list,
    .modal-body {
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
    }

    .nav-scrollable::-webkit-scrollbar,
    .messages-container::-webkit-scrollbar,
    .conversation-list::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .nav-scrollable::-webkit-scrollbar-thumb,
    .messages-container::-webkit-scrollbar-thumb,
    .conversation-list::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.45);
        border-radius: 999px;
    }

    .nav-scrollable::-webkit-scrollbar-thumb:hover,
    .messages-container::-webkit-scrollbar-thumb:hover,
    .conversation-list::-webkit-scrollbar-thumb:hover,
    .modal-body::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.65);
    }

    .nav-scrollable::-webkit-scrollbar-track,
    .messages-container::-webkit-scrollbar-track,
    .conversation-list::-webkit-scrollbar-track,
    .modal-body::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Segmented tabs (Moje vožnje / Moji zahtevi) ===== */
.segmented-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.25rem;
    background: var(--pt-surface-2);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-full);
}

.segmented-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--pt-radius-full);
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--pt-text-light);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented-tab:hover {
    color: var(--pt-text);
}

.segmented-tab.active {
    background: var(--pt-surface);
    color: var(--pt-primary);
    box-shadow: var(--pt-shadow-sm);
}

/* ── SEO landing pages (/prevoz/*, /alternativa-blablacar) ────────────────── */

.route-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--pt-text-muted);
}

.route-breadcrumb a {
    color: var(--pt-text-light);
    text-decoration: none;
}

.route-breadcrumb a:hover {
    color: var(--pt-primary);
    text-decoration: underline;
}

.route-intro {
    max-width: 68ch;
    margin-bottom: 1.5rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--pt-text-light);
}

.route-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.route-fact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 8.5rem;
    padding: 0.75rem 1rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    box-shadow: var(--pt-shadow-sm);
}

.route-fact-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pt-text-muted);
}

.route-fact-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pt-text);
}

.route-steps {
    max-width: 68ch;
    margin-bottom: 2rem;
    padding-left: 1.25rem;
    line-height: 1.7;
    color: var(--pt-text-light);
}

.route-steps li {
    margin-bottom: 0.4rem;
}

.route-section {
    max-width: 68ch;
    margin-bottom: 2rem;
    line-height: 1.7;
    color: var(--pt-text-light);
}

.route-section p {
    margin-bottom: 0.6rem;
}

.route-faq {
    max-width: 68ch;
    margin-bottom: 2rem;
}

.route-faq-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--pt-surface-3);
}

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

.route-faq-item h3 {
    margin-bottom: 0.4rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pt-text);
}

.route-faq-item p {
    margin: 0;
    line-height: 1.65;
    color: var(--pt-text-light);
}

.route-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 2rem;
    padding: 0;
    list-style: none;
}

.route-links a {
    color: var(--pt-primary);
    font-weight: 600;
    text-decoration: none;
}

.route-links a:hover {
    text-decoration: underline;
}

/* Server-rendered copy shown to crawlers and during WASM download; Blazor replaces it. */
.prerender h1,
.prerender h2,
.prerender h3 {
    color: var(--pt-text);
}

.prerender .hero h1 {
    color: #fff;
}

/* Landing-page hand-off into the main search with the corridor already filtered. */
.route-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
}

.route-cta-note {
    font-size: 0.85rem;
    color: var(--pt-text-muted);
}

/* Route index on the support page — internal links to the landing pages. */
.support-routes {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--pt-surface-3);
    font-size: 0.9rem;
}

.support-routes .section-title {
    margin-bottom: 0.35rem;
}

.support-routes-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.support-routes-links a {
    color: var(--pt-primary);
    font-weight: 600;
    text-decoration: none;
}

.support-routes-links a:hover {
    text-decoration: underline;
}

/* Corridor index on /o-nama: each card links to the landing page and into the prefiltered search. */
.about-routes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 2rem;
}

.about-route {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--pt-surface-3);
    border-radius: 12px;
    background: var(--pt-surface-2, transparent);
}

.about-route-title {
    font-weight: 700;
    color: var(--pt-text);
    text-decoration: none;
}

.about-route-title:hover {
    color: var(--pt-primary);
    text-decoration: underline;
}

.about-route-meta {
    font-size: 0.85rem;
    color: var(--pt-text-muted);
}

.about-route-link {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pt-primary);
    text-decoration: none;
}

.about-route-link:hover {
    text-decoration: underline;
}

.about-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 2.5rem;
}

/* Outbound links to the official social profiles (currently Instagram) on /o-nama. */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 2rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem 0.7rem 0.85rem;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-surface);
    color: var(--pt-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.social-link:hover {
    border-color: var(--pt-primary-light);
    box-shadow: 0 6px 18px rgba(15,23,42,0.07);
    transform: translateY(-1px);
    color: var(--pt-text);
}

.social-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pt-radius-xs);
    color: #fff;
    /* Instagram brand gradient. */
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}

.social-link-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.social-link-title {
    font-weight: 600;
}

.social-link-handle {
    font-size: 0.85rem;
    color: var(--pt-text-light);
}