:root {
    --primary: #5d3ebc;
    --primary-light: #7a57d1;
    --yellow: #ffd700;
    --dark: #333;
    --light: #f8f9fa;
    --radius: 14px;
    --shadow: 0 4px 16px rgba(0,0,0,0.1);
}

body {
    background: var(--light);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.2px;
}

.navbar {
    background: var(--primary) !important;
    padding: 10px 0;
}

.navbar .navbar-brand {
    font-weight: 700;
    font-size: 22px;
}

.navbar .nav-link {
    color: #fff !important;
    opacity: 0.9;
    transition: 0.2s;
}

.navbar .nav-link:hover {
    opacity: 1;
}

.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .2s;
    background: #fff;
}

.card:hover {
    transform: translateY(-5px);
}

.card-img-top {
    border-radius: var(--radius) var(--radius) 0 0;
    height: 180px;
    object-fit: cover;
}

.nav-cart {
    position: relative;
    font-weight: 600;
}
.nav-cart-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--yellow);
    color: #000;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 30px;
    animation: pop 0.3s ease;
}
@keyframes pop {
    from { transform: scale(0.4); }
    to { transform: scale(1); }
}

.btn-primary,
.btn-success {
    background: var(--primary) !important;
    border: none;
    border-radius: var(--radius);
    padding: 10px 16px;
}
.btn-primary:hover,
.btn-success:hover {
    background: var(--primary-light) !important;
}

.btn-animated {
    transition: 0.1s ease-in-out;
}
.btn-animated:active {
    transform: scale(0.94);
}

.form-control,
.form-select {
    border-radius: var(--radius);
    border: 1px solid #ddd;
    padding: 10px;
}

textarea.form-control {
    resize: none;
}

footer {
    margin-top: 50px;
    background: var(--primary) !important;
}

.restaurant-header {
    background: #fff;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.checkout-box {
    background: #fff;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
    .mobile-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--primary);
        padding: 10px 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
        display: flex;
        justify-content: space-around;
        z-index: 9999;
    }

    .mobile-menu a {
        color: #fff;
        font-size: 14px;
        text-align: center;
        text-decoration: none;
    }

    .mobile-menu i {
        font-size: 22px;
        margin-bottom: 3px;
        display: block;
    }
}



/* Home slider: auto fit any uploaded image into a fixed banner area */
.home-slider-inner{
  position: relative;
  overflow: hidden;
  height: 340px;
}
@media (max-width: 992px){
  .home-slider-inner{ height: 280px; }
}
@media (max-width: 576px){
  .home-slider-inner{ height: 210px; border-radius: 14px !important; }
}
.home-slider-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.home-slider-placeholder {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    height: 220px;
    border-radius: var(--radius);
}
.category-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.category-strip::-webkit-scrollbar {
    height: 6px;
}
.category-strip::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 999px;
}
.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    text-decoration: none;
    color: var(--dark);
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15,23,42,0.05);
}
.category-chip .icon {
    font-size: 16px;
}
.category-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.restaurant-card .card-title {
    font-size: 15px;
}


/* ===== PRO V3 Dark Navy Theme ===== */
:root{
  --primary:#0b2a55;
  --primary-light:#123d7a;
  --accent:#ffffff;
  --dark:#0b1220;
  --muted:#6b7280;
  --radius:18px;
}

body{
  background: #f6f8fc;
  color: var(--dark);
}

.y-nav{
  background: linear-gradient(90deg, #061a35, var(--primary)) !important;
  box-shadow: 0 10px 30px rgba(2,8,23,.18);
}

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover{
  background: var(--primary-light);
  border-color: var(--primary-light);
}

.y-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(2,8,23,.08);
}

.carousel-inner{
  border-radius: var(--radius) !important;
}

.category-chip{
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
}
.category-chip.active{
  background: var(--primary);
  border-color: var(--primary);
}

.restaurant-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(2,8,23,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.restaurant-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(2,8,23,.10);
}

.nav-cart-badge{
  background: #fff;
  color: var(--primary);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  margin-left: 8px;
  border: 1px solid rgba(255,255,255,.35);
}

.y-steps{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.y-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  color: var(--dark);
  font-weight: 600;
  font-size: 14px;
}
.y-step span{
  width:26px;height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,42,85,.10);
  color: var(--primary);
  font-weight:800;
}
.y-step.active{
  border-color: rgba(11,42,85,.25);
  background: linear-gradient(180deg, #ffffff, #f3f7ff);
}


.y-fav-btn{
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 16px rgba(2,8,23,.06);
}
.y-fav-btn:hover{ transform: translateY(-1px); }


/* ===== PRO V5+ Restaurant Thumbnails ===== */
.restaurant-thumb{height:120px; overflow:hidden; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background:#e5e7eb;}
.restaurant-thumb img{height:100%; object-fit:cover; display:block;}
.thumb-placeholder{height:100%; background: linear-gradient(135deg, rgba(6,26,53,.25), rgba(11,42,85,.10));}
.restaurant-card .card-body{padding-top:12px;}


/* PRO V6: Slider spacing + restaurant card images */
.home-slider .carousel-inner img{height:220px; object-fit:cover;}
@media (max-width: 768px){
  .home-slider .carousel-inner img{height:160px;}
}


/* ===== PRO V7 Badges ===== */
.campaign-badge{
  position:absolute; top:10px; left:10px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
  background: rgba(15, 23, 42, .92);
  color:#fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.restaurant-thumb{ position:relative; }

.free-badge{
  background: #16a34a !important;
  color:#fff !important;
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  font-size:12px;
}
.free-row td{ background: rgba(22,163,74,.06); }


/* ===== PRO V8 Cart Qty Control ===== */
.qty-control{display:flex; align-items:center; gap:8px; max-width:180px;}
.qty-control .qty-input{width:78px; text-align:center; border-radius:12px;}
.qty-control .btn{border-radius:12px; width:36px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;}


/* PRO V9 - Product thumbnails in cart */
.prod-thumb{width:46px;height:46px;border-radius:14px;overflow:hidden;flex:0 0 46px;border:1px solid rgba(15,23,42,.12);background:#fff;}
.prod-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.prod-thumb-placeholder{width:100%;height:100%;background: linear-gradient(135deg, rgba(6,26,53,.12), rgba(11,42,85,.06));}


.autosave-status{min-height:16px}


/* PRO V10 - Recommendations */
.reco-item{padding:8px;border-radius:16px;border:1px solid rgba(15,23,42,.10);}
.reco-item:hover{background: rgba(2,6,23,.02);}


/* PRO V11 - small chips */
.eta-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.12);background:#fff;font-size:12px;font-weight:700;}


/* PRO V12 - Toast */
.toast-host{position:fixed; right:16px; bottom:16px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:auto;}
.toast-item{pointer-events:auto; opacity:0; transform:translateY(8px); transition:all .22s ease; padding:10px 12px; border-radius:14px; background:#0b1f3a; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18); font-weight:700; font-size:13px; max-width:320px;}
.toast-item.show{opacity:1; transform:translateY(0);}
.toast-success{background:#0b3a22;}
.toast-danger{background:#3a0b0b;}


/* PRO V12 - Remove animation */
tr.row-removing{opacity:0; transform:translateX(8px); transition:opacity .2s ease, transform .2s ease;}


/* PRO V12 - Skeleton loading */
.preview-card[data-loading="1"]{position:relative;}
.preview-card[data-loading="1"]::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(0,0,0,.04), rgba(255,255,255,.0));
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}
#cartForm.is-loading{opacity:.94;}
#cartForm.is-loading .qty-control button, #cartForm.is-loading .qty-control input{pointer-events:auto; opacity:.9;}


/* PRO V13 - Toast undo button */
.toast-item{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.toast-item .toast-text{flex:1; line-height:1.2;}
.toast-item .toast-action{pointer-events:auto; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px; padding:6px 10px; font-weight:800; font-size:12px;}
.toast-item .toast-action:hover{background:rgba(255,255,255,.28);}


/* PRO V14 - Toast countdown bar + swipe */
.toast-item{position:relative; overflow:hidden;}
.toast-item.dragging{transition:none !important;}
.toast-bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.65); transform-origin:left; animation: toastbar linear forwards;}
@keyframes toastbar{from{transform:scaleX(1);}to{transform:scaleX(0);}}


/* PRO V15 - Toast premium (progress circle + animation) */
.toast-premium{backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.toast-left{display:flex; align-items:center; gap:10px; flex:1;}
.toast-circle{width:26px; height:26px; flex:0 0 auto; opacity:.92}
.toast-circle svg{width:26px;height:26px;transform:rotate(-90deg)}
.toast-circle path{fill:none; stroke-width:3.2; stroke-linecap:round}
.toast-circle path.bg{stroke:rgba(255,255,255,.25)}
.toast-circle path.fg{stroke:rgba(255,255,255,.95); stroke-dasharray:95.5; stroke-dashoffset:0}
.toast-circle path.fg.anim{animation: toastcircle linear forwards}
@keyframes toastcircle{from{stroke-dashoffset:0;}to{stroke-dashoffset:95.5;}}
.toast-item.toast-premium.show{animation: toastIn .22s cubic-bezier(.2,.9,.2,1.1)}
@keyframes toastIn{0%{transform:translateY(14px) scale(.96); opacity:0;}100%{transform:translateY(0) scale(1); opacity:1;}}

/* PRO V15 - Menu card image */
.menu-thumb{width:120px; height:64px; border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.08)}
.menu-thumb img{width:100%; height:100%; object-fit:cover; display:block}