/* =========================================================
   The Black Perch — Food Delivery design system
   Dark UI, orange primary, rounded pill cards.
   Layered on top of Bootstrap 5 (not forked).
   ========================================================= */

:root {
    --bp-primary:   #ffd168;
    --bp-primary-dk:#f5b942;
    --bp-dark:      #3f2d16;
    --bp-muted:     #9CA3AF;
    --bp-bg:        #010101;
    --bp-card:      #0d0d0f;
    --bp-card-2:    #16161a;
    --bp-line:      #232327;
    --bp-green:     #22C55E;
    --bp-star:      #7f5923;
    --bp-blue:      #1877F2;
    --bp-radius:    20px;
    --bp-radius-sm: 14px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
    background: var(--bp-bg);
    color: #fff;
    font-family: 'Nunito Sans', 'Poppins', system-ui, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 84px; /* room for bottom nav on mobile */
}
@media (min-width: 992px) { body { padding-bottom: 0; } }

h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', 'Nunito Sans', sans-serif; font-weight: 600; color:#fff; }
a { color: var(--bp-primary); text-decoration: none; }
a:hover { color: var(--bp-primary-dk); }
.text-muted-2 { color: var(--bp-muted) !important; }
.text-primary-2 { color: var(--bp-primary) !important; }
.text-dark-2 { color: var(--bp-dark) !important; }
.fw-semibold { font-weight: 600 !important; }
.bg-card { background: var(--bp-card) !important; }
.bg-card-2 { background: var(--bp-card-2) !important; }
.bg-primary-2 { background: var(--bp-primary) !important; color: var(--bp-dark) !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 8px; }

/* Centered "phone" stage used by splash / auth / onboarding screens */
.phone-stage {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.phone-card {
    width: 100%; max-width: 480px;
    background: var(--bp-card);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    overflow: hidden;
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--bp-radius-sm); font-weight: 600; }
.btn-lg { border-radius: var(--bp-radius); }
.btn-primary-2 {
    background: var(--bp-primary); color: var(--bp-dark);
    border: none; border-radius: var(--bp-radius);
    padding: .85rem 1.5rem; font-weight: 700;
    width: 100%; transition: background .2s ease, transform .1s ease;
}
.btn-primary-2:hover { background: var(--bp-primary-dk); color: var(--bp-dark); }
.btn-primary-2:active { transform: scale(.99); }
.btn-outline-primary-2 {
    background: transparent; color: var(--bp-primary);
    border: 1.5px solid var(--bp-primary); border-radius: var(--bp-radius);
    padding: .8rem 1.5rem; font-weight: 700; width: 100%;
    transition: all .2s ease;
}
.btn-outline-primary-2:hover { background: var(--bp-primary); color: var(--bp-dark); }
/* Segmented pill toggle (Eat In / Take Away, Rider) — order-toggle-wrap design.
   A sliding gold thumb glides between the two slots (switch feel); buttons are
   transparent labels whose text color flips when active. */
@media (min-width: 481px) {
    .order-toggle-wrap{
        width:50%;
    }
}
@media (max-width: 480px) {
    .order-toggle-wrap{
        width:100%;
    }
}
.order-toggle-wrap{
    position:relative; display:flex;
    background:var(--bp-card-2); border:1px solid var(--bp-line);
    border-radius:999px; padding:5px;
}
.order-toggle-thumb{
    position:absolute; top:5px; bottom:5px; left:5px;
    width:calc(50% - 5px); border-radius:999px;
    background:var(--bp-primary);
    box-shadow:0 2px 8px rgba(0,0,0,.28);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:0; pointer-events:none;
}
.order-toggle-wrap .order-toggle-btn{
    position:relative; z-index:1;
    flex:1 1 0; text-align:center; user-select:none; font-family:inherit;
    font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
    padding:11px 14px; border-radius:999px; border:none; background:transparent; color:var(--bp-muted);
    cursor:pointer; transition:color .25s ease;
}
.order-toggle-wrap .order-toggle-btn:hover{ color:#fff; }
.order-toggle-wrap .order-toggle-btn.active{ color:var(--bp-dark); font-weight:700; }
.order-toggle-wrap .order-toggle-btn:focus-visible{ outline:2px solid var(--bp-primary); outline-offset:2px; }
.order-note{ font-size:.78rem; color:var(--bp-muted); line-height:1.4; }
.btn-icon {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bp-card-2); border: 1px solid var(--bp-line); color: #fff;
    transition: background .2s ease;
}
.btn-icon:hover { background: #222227; color: var(--bp-primary); }

/* ---------- Brand / logo ---------- */
.bp-logo { display:inline-flex; align-items:center; }
.bp-logo-img {
    height: 40px; width: auto; display: block;
    border-radius: 10px; object-fit: contain;
}
.bp-logo-lg { justify-content: center; }
.bp-logo-img-lg { height: 180px; width: 180px; }
@media (min-width: 992px) { .bp-logo-img-lg { height: 220px; width: 220px; } }

/* ---------- Top app bar ---------- */
.app-bar {
    display:flex; align-items:center; gap:1rem;
    padding: 1rem; position: sticky; top: 0; z-index: 1020;
}
.app-bar h1 { font-size: 1.3rem; margin: 0; }
.app-bar .spacer { flex: 1; }

/* ---------- Search input ---------- */
.search-input {
    position: relative;
}
.search-input input {
    background: var(--bp-card); border: 1px solid var(--bp-line); color:#fff;
    border-radius: var(--bp-radius); padding: .85rem 1rem .85rem 2.8rem; width:100%;
}
.search-input input::placeholder { color: var(--bp-muted); }
.search-input input:focus { outline:none; border-color: var(--bp-primary); box-shadow:0 0 0 3px rgba(255,209,104,.2); background: var(--bp-card); color:#fff; }
.search-input i { position:absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--bp-muted); }

/* ---------- Live-search dropdown ---------- */
.search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--bp-card); border: 1px solid var(--bp-line); border-radius: var(--bp-radius);
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .16s ease, opacity .16s ease;
}
.search-results.open { max-height: 60vh; overflow-y: auto; opacity: 1; visibility: visible; }
.search-results .sr-item {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem;
    color: #fff; text-decoration: none; border-bottom: 1px solid var(--bp-line);
}
.search-results .sr-item:last-child { border-bottom: 0; }
.search-results .sr-item:hover { background: rgba(255,209,104,.08); }
.search-results .sr-item img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #222; }
.search-results .sr-info { min-width: 0; flex: 1 1 auto; }
.search-results .sr-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results .sr-meta { font-size: .76rem; color: var(--bp-muted); }
.search-results .sr-meta .bi { color: var(--bp-primary); font-size: .68rem; }
.search-results .sr-empty { padding: .8rem; color: var(--bp-muted); font-size: .85rem; text-align: center; }

/* ---------- Category pills ---------- */
.cat-scroll { display:flex; gap: .75rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; }
.cat-scroll::-webkit-scrollbar { display:none; }
.cat-pill {
    flex: 0 0 auto; min-width: 92px;
    background: var(--bp-card); border:1px solid var(--bp-line);
    border-radius: var(--bp-radius); padding: .9rem .5rem; text-align:center;
    color:#fff; transition: all .2s ease;
}
.cat-pill:hover, .cat-pill.active { background: var(--bp-primary); border-color: var(--bp-primary); color: var(--bp-dark); }
.cat-pill i { font-size: 1.5rem; display:block; margin-bottom:.35rem; }
.cat-pill .n { font-size:.7rem; color: var(--bp-muted); }
.cat-pill:hover .n, .cat-pill.active .n { color: var(--bp-dark); opacity:.7; }

/* ---------- Restaurant / food cards ---------- */
.rest-card {
    background: var(--bp-card); 
    border:1px solid var(--bp-line);
    border-radius: var(--bp-radius); overflow:hidden; height:100%;
    transition: transform .2s ease, border-color .2s ease;
}
.rest-card:hover { transform: translateY(-3px); border-color: var(--bp-primary); }
.rest-card .thumb { height: 150px; object-fit: cover; width:100%; }
.rest-card .body { padding: 1rem; }
.tag-chip {
    display:inline-block; font-size:.7rem; padding:.2rem .6rem;
    background: var(--bp-card-2); border-radius: 20px; color: var(--bp-muted);
    margin-right:.3rem; margin-bottom:.2rem;
}
.rating-badge {
    display:inline-flex; align-items:center; gap:.25rem;
    font-size:.8rem; font-weight:600; color: var(--bp-primary);
}
.rating-badge .bi { color: var(--bp-star); }

/* food list row (category page) */
.food-row {
    display:flex; gap:1rem; align-items:center;
    background: var(--bp-card); border:1px solid var(--bp-line);
    border-radius: var(--bp-radius); padding:.75rem;
    transition: border-color .2s ease;
}
.food-row:hover { border-color: var(--bp-primary); }
.food-row .thumb { width:84px; height:84px; border-radius: var(--bp-radius-sm); object-fit:cover; flex:0 0 auto; }

/* ---------- Product detail ---------- */
.product-hero { 
    position: relative; 
}
.product-hero img { 
    width:100%; 
    height:340px; 
    object-fit:cover;    
    border-radius: 28px 28px 0 0;
    background: var(--bp-card);
 }
.product-hero .float-btn {
    position:absolute; top:1rem;
    width:44px; height:44px; border-radius:50%; border:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.5); color:#fff; backdrop-filter: blur(4px);
}
.qty-stepper { display:inline-flex; align-items:center; background: var(--bp-card-2); border-radius: var(--bp-radius); overflow:hidden; }
.qty-stepper button { width:44px; height:44px; border:0; background:transparent; color:#fff; font-size:1.2rem; }
.qty-stepper .val { width:44px; text-align:center; font-weight:700; }

/* sticky add-to-cart bar */
.sticky-buy {
    background: var(--bp-card); border-top:1px solid var(--bp-line);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    display:flex; gap:1rem; align-items:center;
}
@media (min-width:992px){ .sticky-buy { position: sticky; } }
.sticky-buy .total { flex:1; }
.sticky-buy .total small { display:block; font-size:.7rem; color:var(--bp-muted); }
.sticky-buy .total b { font-size:1.2rem; color: var(--bp-primary); }

/* ---------- Forms ---------- */
.form-control-2, .form-select-2 {
    background: var(--bp-card); border:1px solid var(--bp-line); color:#fff;
    border-radius: var(--bp-radius-sm); padding: .9rem 1rem; width:100%;
}
.form-control-2::placeholder { color: var(--bp-muted); }
.form-control-2:focus, .form-select-2:focus {
    outline:none; background: var(--bp-card); color:#fff;
    border-color: var(--bp-primary); box-shadow: 0 0 0 3px rgba(255,209,104,.18);
}
.form-label-2 { font-size:.85rem; color: var(--bp-muted); margin-bottom:.4rem; font-weight:600; }
.input-pwd { position:relative; }
.input-pwd .toggle { position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:0; color: var(--bp-muted); }

/* divider "or Login With" */
.or-divider { display:flex; align-items:center; gap:1rem; color: var(--bp-muted); font-size:.85rem; margin:1.25rem 0; }
.or-divider::before, .or-divider::after { content:''; flex:1; height:1px; background: var(--bp-line); }

/* social buttons */
.btn-fb { background:#1877F2; color:#fff; border-radius: var(--bp-radius); padding:.85rem; font-weight:600; width:100%; border:0; }
.btn-fb:hover { background:#1664d6; color:#fff; }
.btn-google { background:#fff; color:#3f2d16; border-radius: var(--bp-radius); padding:.85rem; font-weight:600; width:100%; border:1px solid #e5e5e5; }
.btn-google:hover { background:#f2f2f2; }

/* OTP boxes */
.otp-row { display:flex; gap:.75rem; justify-content:center; }
.otp-box {
    width:60px; height:64px; text-align:center; font-size:1.5rem; font-weight:700;
    background: var(--bp-card); border:1px solid var(--bp-line); color:#fff;
    border-radius: var(--bp-radius-sm);
}
.otp-box:focus { outline:none; border-color: var(--bp-primary); box-shadow:0 0 0 3px rgba(255,209,104,.18); }

/* ---------- Onboarding ---------- */
.onboard-screen { min-height:100vh; display:flex; flex-direction:column; padding: 2rem 1.25rem 1.25rem; max-width:520px; margin:0 auto; }
.onboard-art { flex:1; display:flex; align-items:center; justify-content:center; min-height: 280px; }
.onboard-art .art { width: 100%; max-width: 340px; }
.dots { display:flex; gap:.5rem; justify-content:center; margin-bottom:1rem; }
.dots span { width:8px; height:8px; border-radius:50%; background: var(--bp-line); }
.dots span.on { background: var(--bp-primary); width:22px; border-radius:6px; }
.home-indicator { width:140px; height:5px; border-radius:3px; background:#fff; opacity:.5; margin:1rem auto 0; }

/* ---------- Splash ---------- */
.splash {
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 50% 35%, rgba(255,209,104,.08), transparent 60%),
      var(--bp-bg);
    position:relative; overflow:hidden;
}
.splash::before {
    content:''; position:absolute; inset:0; opacity:.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath fill='%23ffffff' d='M20 10c-4 6-2 14 4 18 6-2 10-8 8-14-3-5-8-7-12-4zm38 8c-5 1-8 6-6 11 5 2 11-1 12-7-1-4-3-5-6-4zM14 38c-6 0-10 5-8 11 4 3 11 1 12-5 1-3-1-6-4-6zm52 6c-4 2-5 7-2 11 5 1 9-2 9-7-1-3-4-5-7-4zM40 50c-8 0-14 6-14 14 0 1 0 2 1 3h26c1-1 1-2 1-3 0-8-6-14-14-14z'/%3E%3C/svg%3E");
}

/* welcome hero panel */
.welcome-hero {
    background: var(--bp-primary);
    border-bottom-left-radius: 36px; border-bottom-right-radius: 36px;
    padding: 3rem 1.5rem 3.5rem; text-align:center; position:relative; overflow:hidden;
}
.welcome-hero::before {
    content:''; position:absolute; inset:0; opacity:.18;
    /* background-image: radial-gradient(circle at 30% 30%, #fff 2px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 2px, transparent 2px); */
    background-size: 40px 40px;
}

/* ---------- List group (more / settings) ---------- */
.list-group-item-2 {
    background: var(--bp-card); border:1px solid var(--bp-line); color:#fff;
    border-radius: var(--bp-radius-sm) !important; margin-bottom:.6rem;
    display:flex; align-items:center; gap:1rem; padding:1rem;
}
.list-group-item-2 .ic { width:38px; height:38px; border-radius:10px; background: var(--bp-card-2); display:flex; align-items:center; justify-content:center; color: var(--bp-primary); }
.list-group-item-2 .chev { margin-left:auto; color: var(--bp-muted); }
.badge-notif { background: var(--bp-primary); color: var(--bp-dark); border-radius:10px; font-size:.7rem; padding:.1rem .45rem; margin-left:auto; }

/* ---------- Bottom nav ---------- */
.bp-bottom-nav {
    position: fixed; bottom:0; left:0; right:0; z-index:1040;
    background: var(--bp-card); border-top:1px solid var(--bp-line);
    display:flex; justify-content:space-around; align-items:center;
    padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
}
.bp-bottom-nav a {
    color: var(--bp-muted); text-align:center; font-size:.65rem; flex:1;
    display:flex; flex-direction:column; align-items:center; gap:.15rem;
}
.bp-bottom-nav a i { font-size:1.3rem; }
.bp-bottom-nav a.active { color: var(--bp-primary); }
.bp-bottom-nav .nav-home {
    width:52px; height:52px; border-radius:50%; background: var(--bp-primary); color: var(--bp-dark) !important;
    display:flex; align-items:center; justify-content:center; margin-top:-26px;
    box-shadow: 0 6px 18px rgba(255,209,104,.4); flex:0 0 auto;
}
.bp-bottom-nav .nav-home i { font-size:1.5rem; }
@media (min-width:992px){ .bp-bottom-nav { display:none; } }

/* desktop top nav (replaces bottom nav on lg) */
.bp-topnav {
    background: var(--bp-card); border-bottom:1px solid var(--bp-line);
    padding:.75rem 1rem; display:none;
}
@media (min-width:992px){ .bp-topnav { display:flex; align-items:center; gap:1.5rem; } }
.bp-topnav .links { display:flex; gap:1.25rem; margin-left:1.5rem; }
.bp-topnav .links a { color:#cfcfd4; font-weight:600; font-size:.9rem; }
.bp-topnav .links a.active { color: var(--bp-primary); }
.bp-topnav .spacer { flex:1; }


/* desktop sidebar layout */
@media (min-width:992px){
    .app-shell { 
        display:flex; 
        align-items:flex-start; 
    }
    .bp-sidebar {
        position: sticky; top:0; height:100vh; width:240px; flex:0 0 auto;
        background: var(--bp-card); border-right:1px solid var(--bp-line);
        padding:1.25rem 1rem; display:flex; flex-direction:column; gap:.4rem;
    }
    .bp-sidebar a.side-link { color:#cfcfd4; padding:.7rem .85rem; border-radius:12px; font-weight:600; font-size:.92rem; display:flex; gap:.7rem; align-items:center; }
    .bp-sidebar a.side-link:hover, .bp-sidebar a.side-link.active { background: var(--bp-card-2); color: var(--bp-primary); }
    .bp-sidebar a.side-link i { font-size:1.15rem; }
    .app-main { 
        flex:1; 
        min-width:0;
        max-width: 1100px; 
        margin:20px auto 0 auto;
        border-radius: 28px;
    }
    .hide-lg { display:none !important; }
}
.bp-sidebar { display:none; }
.show-lg { display:none; }
@media (min-width:992px){ .show-lg { display:block; } }

/* utility */
.section-title { display:flex; align-items:center; justify-content:space-between; margin:1.25rem 0 .9rem; }
.section-title h2 { font-size:1.15rem; margin:0; }
.section-title a { font-size:.85rem; }
.glass-card { background: var(--bp-card); border:1px solid var(--bp-line); border-radius: var(--bp-radius); }
.divider-line { height:1px; background: var(--bp-line); margin:1rem 0; }

/* simple toast/alert */
.bp-toast {
    background: var(--bp-green); color:#fff; border-radius: var(--bp-radius-sm);
    padding: .9rem 1.1rem; margin-bottom:1rem; display:flex; gap:.6rem; align-items:center;
}