/* ============================================================
   iDeliver – Mobile-First Stylesheet
   ============================================================ */

:root {
    --primary:   #0d6efd;
    --secondary: #ffc107;
    --success:   #198754;
    --danger:    #dc3545;
    --dark:      #1e2a3a;
    --radius:    12px;
    --shadow:    0 2px 12px rgba(0,0,0,.08);
    --nav-h:     56px;
    --bottom-nav-h: 60px;
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f4f6f9;
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
img { max-width: 100%; }
a { text-decoration: none; }
.object-fit-cover { object-fit: cover; }
.cursor-pointer   { cursor: pointer; }
.font-monospace   { font-family: monospace; }

/* ── Main content area ────────────────────────────────────── */
.main-content {
    min-height: calc(100vh - var(--nav-h) - 280px);
    /* Extra bottom padding on mobile for bottom nav */
    padding-bottom: 0;
}
@media (max-width: 767px) {
    .main-content { padding-bottom: calc(var(--bottom-nav-h) + 8px); }
    body.has-bottom-nav footer { margin-bottom: var(--bottom-nav-h); }
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar { min-height: var(--nav-h); }
.navbar-brand { font-size: 1.1rem; }
@media (max-width: 767px) {
    .navbar .btn { font-size: .8rem; padding: .3rem .7rem; }
}

/* ── Auth pages ───────────────────────────────────────────── */
.auth-page {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    min-height: 100vh;
}
.auth-card { border-radius: var(--radius) !important; }
@media (max-width: 575px) {
    .auth-page .container-fluid { padding: 12px; }
    .auth-card .card-body { padding: 1.5rem !important; }
}

/* ── Hero section ─────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    padding: 3rem 0;
}
@media (max-width: 767px) {
    .hero-section { padding: 2rem 0; }
    .hero-section h1 { font-size: 1.6rem !important; }
    .hero-section .lead { font-size: .95rem; }
    .hero-section form { flex-direction: column !important; }
    .hero-section form input,
    .hero-section form button { width: 100% !important; max-width: 100% !important; }
}

/* ── Cards ────────────────────────────────────────────────── */
.card { border-radius: var(--radius) !important; }
.vendor-card, .product-card, .category-card {
    transition: transform .2s, box-shadow .2s;
    border-radius: var(--radius) !important;
}
@media (hover: hover) {
    .vendor-card:hover, .product-card:hover, .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,.12) !important;
    }
}
@media (max-width: 575px) {
    .card-body { padding: 1rem; }
}

/* ── Tables ───────────────────────────────────────────────── */
.table th {
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.table td { vertical-align: middle; }
@media (max-width: 767px) {
    .table-responsive { font-size: .82rem; }
    .table td, .table th { padding: .5rem .6rem; }
}

/* ── Buttons ──────────────────────────────────────────────── */
@media (max-width: 575px) {
    .btn-lg { font-size: 1rem; padding: .6rem 1.2rem; }
    /* Full-width buttons on small screens where appropriate */
    .btn-mobile-full { width: 100% !important; }
}

/* ── Forms ────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .form-control, .form-select { font-size: .95rem; }
    .input-group-text { font-size: .9rem; }
}

/* ── Payment options ──────────────────────────────────────── */
.payment-option { cursor: pointer; transition: all .2s; border-radius: var(--radius) !important; }
.payment-option:hover { border-color: var(--primary) !important; }
@media (max-width: 575px) {
    .payment-option { padding: .75rem !important; }
    .payment-option .fs-2 { font-size: 1.5rem !important; }
}

/* ── Order tracker ────────────────────────────────────────── */
.order-tracker { padding: 0 4px; overflow-x: auto; }
.tracker-line {
    position: absolute; top: 15px; left: 5%; right: 5%;
    height: 3px; background: #dee2e6; z-index: 0;
}
.tracker-step { flex: 1; z-index: 1; min-width: 60px; }
.tracker-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: #dee2e6; border: 3px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6; margin: 0 auto;
}
.tracker-step.active .tracker-dot { background: #0d6efd; box-shadow: 0 0 0 2px #0d6efd; }
.tracker-step.active small { color: #0d6efd; font-weight: 600; }
@media (max-width: 575px) {
    .tracker-step small { font-size: .65rem; }
    .tracker-dot { width: 22px; height: 22px; }
}

/* ── Customer / Vendor / Rider sidebar ────────────────────── */
.list-group-item-action.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
/* Hide sidebar on mobile — replaced by bottom nav */
@media (max-width: 991px) {
    .col-lg-3 > .card.border-0.shadow-sm:has(.list-group),
    .col-lg-2 > .card.border-0.shadow-sm:has(.list-group) {
        display: none;
    }
}

/* ── Admin layout (sidebar + content) ────────────────────── */
.admin-layout {
    display: flex;
    min-height: calc(100vh - var(--nav-h));
}
.admin-content {
    flex: 1;
    min-width: 0; /* prevent overflow */
    overflow-x: hidden;
}

/* ── Admin sidebar ────────────────────────────────────────── */
.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--dark);
    min-height: calc(100vh - var(--nav-h));
}
.admin-sidebar .nav-link {
    color: rgba(255,255,255,.75);
    padding: .55rem 1rem;
    border-radius: 6px;
    margin: 2px 8px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.admin-sidebar .nav-link i { width: 18px; text-align: center; flex-shrink: 0; }

/* Mobile admin sidebar — slide-in drawer */
@media (max-width: 991px) {
    .admin-sidebar {
        position: fixed;
        top: var(--nav-h);
        left: -240px;
        height: calc(100vh - var(--nav-h));
        z-index: 1040;
        transition: left .25s ease;
        overflow-y: auto;
        min-height: unset;
        box-shadow: 4px 0 20px rgba(0,0,0,.3);
        width: 240px;
    }
    .admin-sidebar.open { left: 0; }
    .admin-sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1039;
    }
    .admin-sidebar-overlay.show { display: block; }
    #adminMenuToggle {
        display: flex !important;
        align-items: center; justify-content: center;
        width: 38px; height: 38px;
        background: rgba(255,255,255,.15);
        border: none; border-radius: 8px;
        color: #fff; font-size: 1.1rem; cursor: pointer;
        margin-right: .5rem; flex-shrink: 0;
    }
    /* Content takes full width on mobile */
    .admin-content { width: 100%; }
}

/* ── Bottom navigation (mobile) ───────────────────────────── */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    background: #fff;
    border-top: 1px solid #e9ecef;
    z-index: 1030;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #6c757d; font-size: .65rem; gap: 3px;
    padding: 6px 4px; text-decoration: none;
    transition: color .15s;
}
.bottom-nav a i { font-size: 1.2rem; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--primary); }
.bottom-nav a .bn-badge {
    position: absolute; top: 4px; right: calc(50% - 18px);
    background: var(--danger); color: #fff;
    font-size: .55rem; border-radius: 10px;
    padding: 1px 4px; min-width: 16px; text-align: center;
}
@media (max-width: 767px) {
    .bottom-nav { display: flex; }
}

/* ── Stat cards ───────────────────────────────────────────── */
@media (max-width: 575px) {
    .row.g-3 > [class*="col-6"] .card { padding: .75rem !important; }
    .row.g-3 > [class*="col-6"] .fs-2 { font-size: 1.5rem !important; }
    .row.g-3 > [class*="col-6"] .fs-5 { font-size: 1rem !important; }
}

/* ── Modals ───────────────────────────────────────────────── */
@media (max-width: 575px) {
    .modal-dialog { margin: .5rem; }
    .modal-body { padding: 1rem; }
    .modal-footer { padding: .75rem 1rem; }
}

/* ── Vendor store product grid ────────────────────────────── */
@media (max-width: 575px) {
    .product-card .card-body { padding: .75rem; }
    .product-card h6 { font-size: .85rem; }
}

/* ── Checkout ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Stack order summary below form on mobile */
    #checkoutForm { order: 1; }
    .col-lg-5 .sticky-top { position: static !important; }
}

/* ── Active delivery card (rider) ─────────────────────────── */
@media (max-width: 575px) {
    .card-header.bg-success { font-size: .9rem; }
    .card-header.bg-success .badge { font-size: .7rem; }
}

/* ── Badges ───────────────────────────────────────────────── */
.badge { font-weight: 500; }

/* ── Floating cart ────────────────────────────────────────── */
#floatingCart { position: fixed; bottom: 80px; right: 16px; z-index: 1050; }
@media (min-width: 768px) { #floatingCart { bottom: 24px; right: 24px; } }

/* ── Star rating ──────────────────────────────────────────── */
.star-rating span { font-size: 1.5rem; cursor: pointer; color: #ccc; transition: color .1s; }
.star-rating span.active { color: #ffc107; }

/* ── Status pills ─────────────────────────────────────────── */
.status-pill {
    display: inline-block; padding: 3px 10px;
    border-radius: 20px; font-size: .78rem; font-weight: 600;
}

/* ── Rider status toggle ──────────────────────────────────── */
.rider-status-toggle { width: 60px; height: 30px; }

/* ── Notification dot ─────────────────────────────────────── */
.notif-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger); display: inline-block;
}

/* ── Touch-friendly tap targets ───────────────────────────── */
@media (max-width: 767px) {
    .btn { min-height: 40px; }
    .form-control, .form-select { min-height: 44px; }
    .list-group-item { padding: .75rem 1rem; }
    .nav-link { padding: .6rem .8rem; }
    /* Larger close buttons */
    .btn-close { width: 1.2em; height: 1.2em; }
}

/* ── Scrollable tabs on mobile ────────────────────────────── */
@media (max-width: 767px) {
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; font-size: .82rem; padding: .5rem .75rem; }
    .nav-pills { flex-wrap: nowrap; overflow-x: auto; }
    .nav-pills .nav-link { white-space: nowrap; font-size: .82rem; }
}

/* ── Filter bars ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .d-flex.gap-2.flex-wrap .btn { font-size: .75rem; padding: .3rem .6rem; }
}

/* ── Footer ───────────────────────────────────────────────── */
footer { margin-top: 2rem; }
@media (max-width: 767px) {
    footer .row > div { margin-bottom: 1rem; }
    footer h5, footer h6 { font-size: 1rem; }
}

/* ── Utility ──────────────────────────────────────────────── */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 575px) {
    .hide-xs { display: none !important; }
}
@media (min-width: 576px) {
    .show-xs-only { display: none !important; }
}