/* TeIAS Vending custom styles */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01"; }

.logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #dc2626 130%);
  color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 4px 10px -3px rgba(29,78,216,.5);
}

.nav-link {
  padding: .45rem .75rem; border-radius: .6rem; color: #475569; font-weight: 500;
  transition: all .15s ease; white-space: nowrap;
}
.nav-link:hover { background: #eff6ff; color: #1d4ed8; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.1rem; border-radius: .7rem; font-weight: 600;
  background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(29,78,216,.6); transition: all .15s ease;
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-red {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.1rem; border-radius: .7rem; font-weight: 600;
  background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(220,38,38,.6); transition: all .15s ease;
}
.btn-red:hover { filter: brightness(1.07); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: .7rem; font-weight: 600;
  background: #fff; color: #1d4ed8; border: 1px solid #bfdbfe; transition: all .15s ease;
}
.btn-ghost:hover { background: #eff6ff; }

.btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: .7rem; font-weight: 600;
  background: #eff6ff; color: #1d4ed8; transition: all .15s ease;
}
.btn-soft:hover { background: #dbeafe; }

.card {
  background: #fff; border-radius: 1rem; border: 1px solid #eef2f7;
  box-shadow: 0 6px 24px -16px rgba(15,37,87,.25);
}

.input {
  width: 100%; padding: .65rem .9rem; border-radius: .7rem; border: 1px solid #cbd5e1;
  background: #fff; transition: all .15s ease; font-family: inherit;
}
.input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }

.label { display:block; font-size: .85rem; font-weight: 600; color:#334155; margin-bottom:.35rem; }

.alert { padding: .75rem 1rem; border-radius: .7rem; font-size: .9rem; font-weight: 500; }
.alert-error { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.alert-warn { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }

/* Stepper */
.stepper { display:inline-flex; align-items:center; gap:.5rem; }
.stepper button {
  width: 30px; height: 30px; border-radius: 9px; font-weight: 800; font-size: 18px;
  display:inline-flex; align-items:center; justify-content:center; border: none; cursor: pointer;
  transition: all .12s ease;
}
.stepper .dec { background:#fee2e2; color:#dc2626; }
.stepper .dec:hover { background:#fecaca; }
.stepper .inc { background:#dbeafe; color:#1d4ed8; }
.stepper .inc:hover { background:#bfdbfe; }
.stepper .dec:disabled, .stepper .inc:disabled { opacity:.35; cursor:not-allowed; }
.stepper .qty {
  min-width: 34px; text-align:center; font-weight:700; font-size:1.05rem; color:#0f2557;
}

/* Floating cart counter */
.cart-fab {
  position: fixed; bottom: 22px; left: 22px; z-index: 50;
  display:flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem;
  background: linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff;
  border-radius: 999px; box-shadow: 0 14px 30px -10px rgba(29,78,216,.7);
  font-weight: 700; transition: transform .15s ease;
}
.cart-fab.azad { background: linear-gradient(135deg,#dc2626,#ef4444); box-shadow:0 14px 30px -10px rgba(220,38,38,.7); }
.cart-fab .num { font-size:1.3rem; }

/* Calendar day card */
.day-card { transition: all .15s ease; }
.day-card.today { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.25); }
.day-card.past { opacity:.78; background:#f8fafc; }
.food-row { border-top:1px dashed #e2e8f0; }
.food-row:first-child { border-top:none; }

.star-rating { display:inline-flex; gap:.15rem; direction:ltr; }
.star { color:#cbd5e1; cursor:pointer; font-size:1.15rem; transition:color .1s; }
.star.on { color:#f59e0b; }
.star:hover { color:#fbbf24; }

/* Autocomplete */
.ac-wrap { position:relative; z-index:1; }
.ac-list {
  position:absolute; z-index:10000; top:calc(100% + 4px); right:0; left:0; max-height:260px; overflow:auto;
  background:#fff; border:1px solid #e2e8f0; border-radius:.7rem; box-shadow:0 16px 34px -10px rgba(15,37,87,.35);
}
.card { position: relative; }
.card.ac-active { z-index:500; }
.ac-item { padding:.55rem .8rem; cursor:pointer; font-weight:500; }
.ac-item:hover, .ac-item.active { background:#eff6ff; color:#1d4ed8; }
.ac-item small { color:#94a3b8; }

table.tbl { width:100%; border-collapse:collapse; }
table.tbl th, table.tbl td { padding:.6rem .7rem; text-align:right; border-bottom:1px solid #eef2f7; font-size:.9rem; }
table.tbl thead th { background:#f1f5f9; color:#334155; font-weight:700; position:sticky; top:0; }
table.tbl tbody tr:hover { background:#f8fafc; }
.tag { display:inline-flex; align-items:center; padding:.15rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; }
.tag-blue { background:#dbeafe; color:#1d4ed8; }
.tag-red { background:#fee2e2; color:#dc2626; }
.tag-green { background:#dcfce7; color:#166534; }

.week-pill { padding:.4rem .8rem; border-radius:.7rem; font-weight:600; font-size:.85rem; border:1px solid #e2e8f0; }
.week-pill.active { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.week-pill:hover:not(.active) { background:#eff6ff; }

.bg-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(29,78,216,.07) 1px, transparent 0);
  background-size: 22px 22px;
}
.hero-glow {
  background:
    radial-gradient(600px 200px at 80% -10%, rgba(59,130,246,.18), transparent),
    radial-gradient(500px 200px at 10% 110%, rgba(220,38,38,.12), transparent);
}