[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

h1, h2, h3, .font-display { font-family: 'Poppins', 'Inter', ui-sans-serif, sans-serif; letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-outline,
.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.35rem;
    border-radius: .625rem;
    font-weight: 600;
    font-size: .925rem;
    line-height: 1.25rem;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
}
.btn-primary { background: #ea580c; color: #fff; box-shadow: 0 6px 16px -6px rgba(234, 88, 12, .55); }
.btn-primary:hover { background: #c2410c; }
.btn-primary:focus-visible, .btn-outline:focus-visible, .btn-dark:focus-visible { outline: 3px solid rgba(249, 115, 22, .4); outline-offset: 2px; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: #94a3b8; box-shadow: none; cursor: not-allowed; }

.btn-outline { border: 1px solid #cbd5e1; color: #0b1426; background: #fff; }
.btn-outline:hover { border-color: #ea580c; color: #c2410c; }

.btn-dark { background: #0b1426; color: #fff; }
.btn-dark:hover { background: #1e293b; }

/* ---------- Navigation ---------- */
.nav-link {
    position: relative;
    padding: .5rem .85rem;
    font-size: .925rem;
    font-weight: 500;
    color: #334155;
    border-radius: .5rem;
    transition: color .2s;
}
.nav-link:hover { color: #0b1426; }
.nav-link.is-active { color: #ea580c; }
.nav-link.is-active::after {
    content: '';
    position: absolute;
    left: .85rem; right: .85rem; bottom: -1px;
    height: 2px;
    background: #ea580c;
    border-radius: 2px;
}

.footer-heading { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; margin-bottom: 1.1rem; }
.footer-link { transition: color .2s; }
.footer-link:hover { color: #fff; }

/* ---------- Hero ---------- */
.hero {
    background-color: #0b1426;
    background-image:
        linear-gradient(100deg, rgba(6, 13, 26, .96) 0%, rgba(6, 13, 26, .85) 40%, rgba(6, 13, 26, .35) 100%),
        url('../images/hero.jpg');
    background-size: cover;
    background-position: center 60%;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ea580c;
}
.eyebrow::before { content: ''; width: 1.5rem; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- Media ---------- */
.img-frame { background: linear-gradient(135deg, #e2e8f0, #f1f5f9); overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }

.bike-card { transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.bike-card:hover { border-color: #fed7aa; box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .28); transform: translateY(-3px); }
.bike-card img { transition: transform .6s ease; }
.bike-card:hover img { transform: scale(1.04); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
}

/* ---------- Forms ---------- */
.form-label { display: block; font-size: .875rem; font-weight: 500; color: #1e293b; margin-bottom: .375rem; }
.form-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: .625rem;
    padding: .65rem .875rem;
    background: #fff;
    color: #0b1426;
    font-size: .925rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color: #94a3b8; }
.form-input:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .18); }
.form-input.is-invalid { border-color: #e11d48; }
.form-error { margin-top: .35rem; font-size: .8rem; color: #e11d48; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: .875rem;
    font-weight: 500;
    color: #334155;
    transition: all .2s;
}
.chip:hover { border-color: #fb923c; color: #c2410c; }
.chip.active { background: #0b1426; border-color: #0b1426; color: #fff; }

input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: #ea580c; }

/* ---------- Date picker (flatpickr) ---------- */
.date-input { cursor: pointer; padding-right: 2.5rem; background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.flatpickr-calendar { font-family: 'Inter', ui-sans-serif, sans-serif; border-radius: .875rem; border: 1px solid #e2e8f0; box-shadow: 0 20px 40px -16px rgba(15, 23, 42, .3); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { height: 44px; padding-top: 4px; }
.flatpickr-current-month { font-size: 1rem; font-weight: 600; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { padding: 14px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #ea580c; }
span.flatpickr-weekday { color: #64748b; font-weight: 600; font-size: .75rem; }
.flatpickr-day { border-radius: .5rem; color: #0b1426; }
.flatpickr-day:hover, .flatpickr-day:focus { background: #fff7ed; border-color: #fff7ed; }
.flatpickr-day.today { border-color: #fb923c; }
.flatpickr-day.today:hover { background: #fff7ed; color: #0b1426; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: #ea580c; border-color: #ea580c; color: #fff; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #cbd5e1; }
.flatpickr-time { border-top: 1px solid #e2e8f0 !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { font-weight: 600; color: #0b1426; }
.flatpickr-confirm {
    height: auto; margin: 0 .6rem .6rem; padding: .6rem 1rem; border-radius: .6rem;
    background: #ea580c; color: #fff !important; font-weight: 600; font-size: .875rem; cursor: pointer; transition: background .2s;
}
.flatpickr-confirm:hover { background: #c2410c; }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #fff7ed; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12); }

@media print {
    header, footer, .no-print, .whatsapp-fab { display: none !important; }
    body { background: #fff; }
}