/* FillItUp.uk – Main Stylesheet */

:root {
    --fi-brand:      #1b4965;   /* deep petroleum blue – replaces garish Bootstrap default */
    --fi-brand-dark: #133550;
    --fi-brand-light:#e8f0f7;
    --fi-amber:      #fca311;
    --fi-success:    #198754;
    --fi-dark:       #212529;
    --fi-card-shadow:0 2px 12px rgba(0,0,0,0.07);
    --fi-radius:     0.75rem;

    /* fuel-type palette */
    --fi-unleaded:   #1b6ca8;   /* blue */
    --fi-diesel:     #455a64;   /* slate */
    --fi-premium:    #6a1b9a;   /* purple */
    --fi-lpg:        #00838f;   /* teal */
}

/* ==================== Bootstrap colour override ==================== */
/* Re-map Bootstrap's "primary" to our brand colour so existing
   btn-primary / text-primary / bg-primary still work everywhere. */
.btn-primary, .bg-primary { background-color: var(--fi-brand) !important; border-color: var(--fi-brand) !important; }
.btn-primary:hover         { background-color: var(--fi-brand-dark) !important; border-color: var(--fi-brand-dark) !important; }
.btn-outline-primary       { color: var(--fi-brand) !important; border-color: var(--fi-brand) !important; }
.btn-outline-primary:hover { background-color: var(--fi-brand) !important; color: #fff !important; }
.text-primary              { color: var(--fi-brand) !important; }
.border-primary            { border-color: var(--fi-brand) !important; }
.navbar.bg-primary         { background-color: var(--fi-brand) !important; }
.form-control:focus        { border-color: var(--fi-brand); box-shadow: 0 0 0 .2rem rgba(27,73,101,.2); }

/* ==================== Base ==================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--fi-dark);
    background: #f8f9fa;
}

/* ==================== Hero ==================== */
.hero-section {
    background: linear-gradient(135deg, #e8f0f7 0%, #fff 60%);
    border-bottom: 1px solid #e9ecef;
}

/* ==================== Phone Mockup ==================== */
.phone-mockup {
    width: 260px;
    background: #1c1c1e;
    border-radius: 2.5rem;
    padding: 1rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3),
                inset 0 0 0 2px rgba(255,255,255,0.08);
}
.phone-mockup::before {
    content: '';
    display: block;
    width: 80px; height: 10px;
    background: #333;
    border-radius: 10px;
    margin: 0 auto 0.75rem;
}
.phone-screen {
    background: #fff;
    border-radius: 1.75rem;
    min-height: 420px;
    overflow: hidden;
}

/* ==================== Station Cards ==================== */
.station-card {
    /* NO translateY – prevents the card "jumping" on hover */
    transition: box-shadow 0.15s ease;
    box-shadow: var(--fi-card-shadow);
}
.station-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}

/* ==================== Fuel-type badge colours ==================== */
.badge-unleaded { background-color: var(--fi-unleaded) !important; color: #fff; }
.badge-diesel   { background-color: var(--fi-diesel)   !important; color: #fff; }
.badge-premium  { background-color: var(--fi-premium)  !important; color: #fff; }
.badge-lpg      { background-color: var(--fi-lpg)      !important; color: #fff; }

/* ==================== Fuel filter pills ==================== */
.fuel-filter { cursor: pointer; transition: opacity 0.2s; user-select: none; }
.fuel-filter.fuel-off { opacity: 0.35; }

/* ==================== Search tabs ==================== */
.search-tab { cursor: pointer; border-bottom: 2px solid transparent; padding-bottom: 6px; }
.search-tab.active { border-color: var(--fi-brand); color: var(--fi-brand) !important; font-weight: 600; }

/* ==================== Radius Buttons ==================== */
.radius-btn { min-width: 52px; border-radius: 2rem !important; transition: all 0.15s; }

/* ==================== Skeleton ==================== */
.skeleton {
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.2s ease-in-out infinite;
    border-radius: 0.5rem;
}
@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==================== Footer ==================== */
footer .footer-links li { margin-bottom: 4px; }
footer a:hover { color: var(--fi-amber) !important; }

/* Bootstrap text-muted is near-black in dark contexts — override */
footer.bg-dark .text-muted,
footer.bg-dark p.text-muted,
footer.bg-dark small.text-muted {
    color: rgba(255,255,255,0.55) !important;
}
footer.bg-dark .border-secondary { border-color: rgba(255,255,255,0.15) !important; }

/* App Store / Play Store badge buttons */
.store-btn { background: #1a1a1a; color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.store-btn:hover { background: #2a2a2a; color: #fff; }
.store-btn .store-label-sub { color: rgba(255,255,255,0.55); font-size: 0.65rem; }
.store-btn .store-label-main { color: #fff; font-weight: 600; font-size: 1rem; }

/* ==================== Scroll-to-top ==================== */
#scrollTopBtn {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000;
    border-radius: 50%; width: 44px; height: 44px;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#scrollTopBtn.show { display: flex; }

/* ==================== Responsive ==================== */
@media (max-width: 576px) {
    .hero-section { padding-top: 2rem; padding-bottom: 2rem; }
    .display-4    { font-size: 1.9rem; }
}