:root {
    --bg: #170f31;
    --bg-2: #241847;
    --card: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.12);
    --green: #ff8a3d;
    --green-dark: #ee6a12;
    --text: #fbf5ff;
    --text-dim: #b9aee0;
    --accent: #45d3ff;
    --pink: #ff5da2;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

html {
    height: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 50% 0%, #35205f 0%, var(--bg) 60%);
    color: var(--text);
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow-x: hidden;
    animation: bodyFadeIn 0.5s ease both;
    overscroll-behavior-y: contain;
}

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

/* Twinkling starfield background */
.stars-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
    will-change: opacity;
}
.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
}

/* Soft glowing orb, echoes the "scooter beam" from the original mockup */
.glow-orb {
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(255,138,61,0.22) 0%, rgba(255,93,162,0.1) 45%, rgba(255,138,61,0) 70%);
    z-index: 0;
    pointer-events: none;
    animation: orbPulse 5s ease-in-out infinite;
}
@keyframes orbPulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.container, .wide-container, .top-nav {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

/* Home dashboard: guarantee the page is always taller than the screen,
   in both toolbar-shown and toolbar-hidden states. Mobile browsers
   auto-hide their address bar while scrolling, which grows the visible
   viewport; if the page's content happens to fit exactly once that
   happens, there's nothing left to scroll and the browser snaps the
   scroll position back to the top. Extra bottom padding keeps the page
   comfortably taller than the screen no matter which state the browser
   chrome is in, so it never hits that "just barely fits" edge case. */
.home-container {
    padding-bottom: 180px;
}

.wide-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    perspective: 900px;
}

.brand-inner {
    position: relative;
    display: inline-block;
    animation: logoEntrance 0.9s cubic-bezier(.22,1.4,.4,1) both;
    transform-style: preserve-3d;
}

.brand img {
    max-width: 240px;
    width: 100%;
    height: auto;
    display: block;
    filter:
        drop-shadow(0 2px 0 rgba(120,40,0,0.35))
        drop-shadow(0 10px 10px rgba(0,0,0,0.35))
        drop-shadow(0 18px 30px rgba(255,138,61,0.35));
    animation: floaty3d 4.5s ease-in-out infinite;
    animation-delay: 0.9s;
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    will-change: transform;
}

.brand img:hover {
    animation-play-state: paused;
    transform: perspective(900px) rotateY(0deg) rotateX(0deg) scale(1.08);
    transition: transform 0.35s ease;
}

@keyframes logoEntrance {
    0% { opacity: 0; transform: perspective(900px) scale(0.4) translateY(30px) rotateY(-35deg) rotateX(10deg); }
    55% { opacity: 1; transform: perspective(900px) scale(1.08) translateY(-6px) rotateY(10deg) rotateX(-4deg); }
    75% { transform: perspective(900px) scale(0.96) translateY(0) rotateY(-4deg) rotateX(1deg); }
    100% { opacity: 1; transform: perspective(900px) scale(1) translateY(0) rotateY(0) rotateX(0); }
}

/* Continuous gentle 3D tilt + bob, like the logo is a floating toy */
@keyframes floaty3d {
    0%   { transform: perspective(900px) translateY(0)    rotateY(-9deg) rotateX(3deg)  rotateZ(-1deg); }
    25%  { transform: perspective(900px) translateY(-9px) rotateY(0deg)  rotateX(-2deg) rotateZ(0.5deg); }
    50%  { transform: perspective(900px) translateY(-2px) rotateY(9deg)  rotateX(3deg)  rotateZ(1deg); }
    75%  { transform: perspective(900px) translateY(-10px) rotateY(0deg) rotateX(-2deg) rotateZ(-0.5deg); }
    100% { transform: perspective(900px) translateY(0)    rotateY(-9deg) rotateX(3deg)  rotateZ(-1deg); }
}

/* Soft pulsing halo behind the logo */
.brand-inner::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(69,211,255,0.22) 0%, rgba(255,138,61,0.12) 45%, transparent 75%);
    border-radius: 50%;
    z-index: 0;
    animation: haloPulse 3.4s ease-in-out 0.9s infinite;
}
@keyframes haloPulse {
    0%, 100% { transform: scale(0.92); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 1; }
}

h1, h2, h3 { color: #fff; margin-top: 0; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.card {
    background: #221a42;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    animation: fadeUp 0.5s ease both;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ride-card {
    text-align: center;
    cursor: default;
    position: relative;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.ride-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 14px 34px rgba(255,138,61,0.16);
    border-color: rgba(255,138,61,0.4);
}
.ride-card.selected {
    border-color: var(--green);
    background: linear-gradient(180deg, rgba(255,138,61,0.14), #221a42 65%);
    box-shadow: 0 0 0 1px rgba(255,138,61,0.35), 0 14px 30px rgba(255,138,61,0.18);
}
.ride-card .selected-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--green-dark);
    color: #06210f;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ride-card.selected .selected-badge {
    opacity: 1;
    transform: scale(1);
}
.ride-card .icon {
    font-size: 40px;
    display: inline-block;
    animation: floaty 3.2s ease-in-out infinite;
}
.ride-card:nth-of-type(2) .icon { animation-delay: .3s; }
.ride-card:nth-of-type(3) .icon { animation-delay: .6s; }
.ride-card h3 { margin: 8px 0 4px; }
.ride-card .price { color: var(--green); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.ride-card .avail { color: var(--text-dim); font-size: 13px; margin-bottom: 14px; }

/* Stagger ride cards on the home page */
.ride-card:nth-of-type(1) { animation-delay: 0.05s; }
.ride-card:nth-of-type(2) { animation-delay: 0.15s; }
.ride-card:nth-of-type(3) { animation-delay: 0.25s; }

.btn {
    display: inline-block;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.15s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, filter 0.2s ease;
    position: relative;
    overflow: hidden;
}
.btn:active { transform: scale(0.96); }

.btn-green {
    background: linear-gradient(180deg, #ffab5e, var(--green-dark));
    color: #06210f;
    box-shadow: 0 4px 16px rgba(255,138,61,0.3);
}
.btn-green:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,138,61,0.4); }

.btn-disabled {
    background: #3a2c60;
    color: #6b7d8f;
    cursor: not-allowed;
}
.btn-disabled:hover { transform: none; }
.btn-disabled:active { transform: none; }

.btn-outline {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text);
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }

.btn-red {
    background: linear-gradient(180deg, #f87171, #dc2626);
    color: #2b0808;
    box-shadow: 0 4px 16px rgba(220,38,38,0.25);
}
.btn-red:hover { filter: brightness(1.08); transform: translateY(-2px); }

.btn-small {
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
}

label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin: 14px 0 6px;
}

input[type=text], input[type=tel], input[type=password], input[type=file], select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    background: #221a42;
    color: var(--text);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type=text]:focus, input[type=tel]:focus, input[type=password]:focus, select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(255,138,61,0.15);
}

input::placeholder { color: #5c7285; }

.checkbox-row {
    display: flex;
    gap: 10px;
    background: #221a42;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 14px;
    margin: 16px 0;
    font-size: 13px;
    color: var(--text-dim);
    align-items: flex-start;
    transition: border-color 0.2s ease;
}
.checkbox-row:has(input:checked) { border-color: rgba(255,138,61,0.4); }

.checkbox-row input { margin-top: 3px; accent-color: var(--green); }

.pay-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.pay-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.pay-tab:hover { border-color: rgba(255,138,61,0.5); transform: translateY(-1px); }
.pay-tab.active { border-color: var(--green); color: var(--green); background: rgba(255,138,61,0.08); box-shadow: 0 0 0 3px rgba(255,138,61,0.08); }

.qr-box { text-align: center; animation: fadeUp 0.35s ease both; }
.qr-box img {
    width: 220px;
    max-width: 80%;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    transition: transform 0.25s ease;
}
.qr-box img:hover { transform: scale(1.03); }
.qr-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #221a42;
    border: 1px solid var(--card-border);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    margin-top: 6px;
}
.copy-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s ease, transform 0.15s ease;
}
.copy-btn:hover { color: #7dd3fc; }
.copy-btn:active { transform: scale(0.92); }
.copy-btn.copied { color: var(--green); }

.status-box {
    text-align: center;
    padding: 24px 12px;
    animation: fadeUp 0.4s ease both;
}
.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--card-border);
    border-top-color: var(--green);
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: spin 0.9s linear infinite;
    box-shadow: 0 0 16px rgba(255,138,61,0.15);
}
@keyframes spin { to { transform: rotate(360deg); } }

.pulse-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 6px;
    animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.success-box { text-align: center; padding: 20px 8px; animation: fadeUp 0.45s ease both; }
.success-icon {
    font-size: 48px;
    margin-bottom: 8px;
    display: inline-block;
    animation: popIn 0.55s cubic-bezier(.26,1.4,.6,1) both;
}
@keyframes popIn {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(6deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Live ride meter (ride.php) */
.meter-box {
    background: radial-gradient(circle at 50% 0%, rgba(255,138,61,0.12), transparent 70%);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 26px 16px;
    margin: 18px 0 24px;
}
.meter-label {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.meter-timer {
    font-size: 44px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    animation: meterGlow 2s ease-in-out infinite;
}
@keyframes meterGlow {
    0%, 100% { text-shadow: 0 0 12px rgba(255,138,61,0.15); }
    50% { text-shadow: 0 0 22px rgba(255,138,61,0.35); }
}
.meter-amount-label {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 16px;
}
.meter-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--green);
    margin-top: 2px;
}

/* Amount due box (payment.php) */
.amount-due-box {
    text-align: center;
    background: rgba(255,138,61,0.07);
    border: 1px solid rgba(255,138,61,0.3);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    animation: fadeUp 0.4s ease both;
}
.amount-due-label {
    color: var(--text-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.amount-due-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--green);
    margin: 4px 0;
}
.amount-due-sub {
    color: var(--text-dim);
    font-size: 13px;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.data-table th, table.data-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--card-border);
}
table.data-table th { color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; }
table.data-table tr { transition: background 0.15s ease; }
table.data-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.badge-pending { background: rgba(250,204,21,0.15); color: #facc15; }
.badge-active { background: rgba(52,211,153,0.15); color: #34d399; }
.badge-done { background: rgba(148,163,184,0.15); color: #94a3b8; }

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.top-nav a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    margin-left: 14px;
    position: relative;
    transition: color 0.2s ease;
}
.top-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 0; height: 1px;
    background: var(--green);
    transition: width 0.2s ease;
}
.top-nav a:hover { color: var(--text); }
.top-nav a:hover::after { width: 100%; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stat-box {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px;
    animation: fadeUp 0.45s ease both;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-box:hover { transform: translateY(-3px); border-color: rgba(255,138,61,0.35); }
.stat-grid .stat-box:nth-child(1) { animation-delay: 0.03s; }
.stat-grid .stat-box:nth-child(2) { animation-delay: 0.09s; }
.stat-grid .stat-box:nth-child(3) { animation-delay: 0.15s; }
.stat-grid .stat-box:nth-child(4) { animation-delay: 0.21s; }
.stat-grid .stat-box:nth-child(5) { animation-delay: 0.27s; }
.stat-box .num { font-size: 24px; font-weight: 700; color: var(--green); }
.stat-box .lbl { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.error-msg {
    background: rgba(248,113,113,0.12);
    border: 1px solid rgba(248,113,113,0.35);
    color: #fca5a5;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}
.home-heading {
    text-align: center;
    margin-bottom: 18px;
}
.home-heading h1 {
    font-size: 22px;
    margin-bottom: 4px;
}
.home-heading p {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0;
}
.info-msg {
    background: rgba(69,211,255,0.1);
    border: 1px solid rgba(69,211,255,0.3);
    color: #7dd3fc;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}

.section-title {
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #fff;
}

a { color: var(--accent); }

.tag-note {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: -6px;
    margin-bottom: 6px;
}

.app-pay-note {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0 0 6px;
    padding: 0 4px;
}
.app-pay-note strong { color: var(--green); }

/* Quantity stepper on the home page */
.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 4px;
}
.qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: #221a42;
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-btn:hover { border-color: var(--green); color: var(--green); transform: scale(1.05); }
.qty-btn:active { transform: scale(0.92); }
.qty-value {
    font-size: 22px;
    font-weight: 800;
    min-width: 28px;
    text-align: center;
}

/* Bottom CTA button - lives as a normal, in-flow block at the end of
   the page content. Deliberately NOT position:fixed or position:sticky:
   both of those are pinned to the browser's visible viewport, which
   resizes as the mobile address bar/toolbar hides and shows while
   scrolling, and that resize is what made the button visibly jump or
   flicker. A plain in-flow element scrolls with the page like any other
   content and has nothing to snap to, so it can't move on its own. */
.cta-bar {
    margin-top: 24px;
}
.cta-bar .btn {
    max-width: 480px;
    margin: 0 auto;
}

/* Itemized booking summary list */
.item-list {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
}
.item-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 14px;
}
.item-list li:last-child { border-bottom: none; }
.item-list .item-name { color: var(--text); }
.item-list .item-amount { color: var(--green); font-weight: 600; }

/* Direct pay-app buttons on payment.php */
.app-pay-row {
    display: flex;
    margin: 18px 0 8px;
}
.app-pay-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.app-pay-btn:active { transform: scale(0.96); }
.app-pay-btn.telebirr { background: linear-gradient(180deg, #6dd15c, #4caf39); color: #06210f; }
.app-pay-btn.cbe { background: linear-gradient(180deg, #7c3aed, #5b21b6); color: #fff; }
.app-pay-btn:hover { filter: brightness(1.08); }
.skyline {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(23,15,49,0) 0%, rgba(23,15,49,0.9) 100%),
        repeating-linear-gradient(90deg,
            #1c1240 0 40px,
            #1c1240 40px calc(40px + 1px),
            transparent calc(40px + 1px) 80px
        );
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 35%);
    mask-image: linear-gradient(180deg, transparent 0%, black 35%);
    opacity: 0.9;
}

/* Small ambient bounce for emoji within button labels */
.btn span.emoji {
    display: inline-block;
    animation: floaty 2.4s ease-in-out infinite;
}