/**
 * SkipTheQueue — premium warm palette (loads AFTER Tailwind CDN).
 * Maps legacy red/pink utilities to orange/beige system without renaming template classes.
 */
:root {
  --stq-accent: #e68a4e;
  --stq-accent-hover: #d4783e;
  --stq-accent-active: #c26a34;
  --stq-price: #d84343;
  --stq-bg-page: #f7f3ed;
  --stq-card: #ffffff;
  --stq-text: #1c1c1c;
  --stq-text-secondary: #757575;
  --stq-border: #eaeaea;
  --stq-search-bg: #f1f1f1;
  --stq-pill-idle: #ede8e0;
  --stq-pill-idle-hover: #e5dfd4;
  --stq-heart-on: #ffb300;
  --stq-shadow-soft: 0 4px 24px rgba(28, 28, 28, 0.06), 0 2px 8px rgba(28, 28, 28, 0.04);
  --stq-shadow-soft-lg: 0 12px 40px rgba(28, 28, 28, 0.08), 0 4px 16px rgba(28, 28, 28, 0.05);
}

/* --- Page shell --- */
body.stq-ui {
  background-color: var(--stq-bg-page) !important;
  color: var(--stq-text) !important;
}

body.stq-ui .bg-\[\#FFFAFA\],
body.stq-ui .min-h-screen.bg-\[\#FFFAFA\] {
  background-color: var(--stq-bg-page) !important;
}

/* --- Primary CTA (was brand red) --- */
body.stq-ui .bg-\[\#E31E24\] {
  background-color: var(--stq-accent) !important;
}

body.stq-ui .hover\:bg-\[\#B9151C\]:hover {
  background-color: var(--stq-accent-hover) !important;
}

body.stq-ui .active\:bg-\[\#B9151C\]:active {
  background-color: var(--stq-accent-active) !important;
}

/* Admin / legacy maroon → accent */
body.stq-ui .bg-\[\#BE1E2D\] {
  background-color: var(--stq-accent) !important;
  color: #fff !important;
}

body.stq-ui .text-\[\#BE1E2D\] {
  color: var(--stq-accent) !important;
}

body.stq-ui .hover\:bg-\[\#991B1B\]:hover {
  background-color: var(--stq-accent-hover) !important;
}

body.stq-ui .hover\:text-red-900:hover {
  color: var(--stq-text) !important;
}

body.stq-ui [class*="from-[#BE1E2D]"][class*="to-[#991B1B]"] {
  background-image: linear-gradient(to right, var(--stq-accent), var(--stq-accent-active)) !important;
}

body.stq-ui a[class*="from-[#BE1E2D]"]:hover,
body.stq-ui button[class*="from-[#BE1E2D]"]:hover {
  background-image: linear-gradient(to right, var(--stq-accent-hover), var(--stq-accent-active)) !important;
}

/* --- Light pink surfaces → warm beige --- */
body.stq-ui .bg-\[\#FFF5F5\] {
  background-color: var(--stq-pill-idle) !important;
}

body.stq-ui .bg-\[\#FDF8F8\] {
  background-color: #f2ebe4 !important;
}

/* --- Default text accent (prices & links); refined per-region below --- */
body.stq-ui .text-\[\#E31E24\] {
  color: var(--stq-price) !important;
}

body.stq-ui .text-\[\#B9151C\] {
  color: #8b5e3c !important;
}

/* Nav cart: icon + label neutral (not red) */
body.stq-ui nav.stq-nav-glass a.nav-cart-link:not(#stqStickyCartTarget) {
  color: #525252 !important;
  background-color: var(--stq-pill-idle) !important;
  border-color: var(--stq-border) !important;
}

body.stq-ui nav.stq-nav-glass a.nav-cart-link:not(#stqStickyCartTarget):hover {
  background-color: var(--stq-pill-idle-hover) !important;
  color: #525252 !important;
}

body.stq-ui nav.stq-nav-glass .cart-badge.bg-\[\#E31E24\] {
  background-color: var(--stq-accent) !important;
  color: #fff !important;
}

/* Avatar initial */
body.stq-ui #userMenuBtn span.text-\[\#E31E24\] {
  color: var(--stq-accent) !important;
}

/* Tracker + accent links */
body.stq-ui #activeOrderTracker .tracker-bar-right {
  color: var(--stq-accent) !important;
}

body.stq-ui .stq-nav-link.hover\:text-\[\#E31E24\]:hover,
body.stq-ui .hover\:text-\[\#E31E24\]:hover {
  color: var(--stq-accent) !important;
}

body.stq-ui footer a.hover\:text-\[\#E31E24\]:hover {
  color: var(--stq-accent) !important;
}

/* Logout / destructive text: warm brown, not bright red */
body.stq-ui .stq-dropdown a.text-\[\#E31E24\],
body.stq-ui #mobileMenu a.text-\[\#E31E24\] {
  color: #8b5e3c !important;
}

/* Sticky cart total = price */
body.stq-ui #stqStickyCart .text-\[\#E31E24\] {
  color: var(--stq-price) !important;
  font-weight: 600 !important;
}

/* Menu / card prices: medium weight */
body.stq-ui .text-lg.font-bold.text-\[\#E31E24\],
body.stq-ui .font-bold.text-\[\#E31E24\] {
  font-weight: 600 !important;
  color: var(--stq-price) !important;
}

/* --- Favorites heart --- */
body.stq-ui .favorite-btn[data-is-favorite="1"],
body.stq-ui .favorite-btn[data-is-favorite="1"].bg-\[\#E31E24\] {
  background-color: var(--stq-heart-on) !important;
  color: #1c1408 !important;
  border-color: rgba(255, 179, 0, 0.45) !important;
}

body.stq-ui .favorite-btn[data-is-favorite="1"]:hover {
  background-color: #f5a623 !important;
}

body.stq-ui .favorite-btn[data-is-favorite="0"] {
  background-color: var(--stq-bg-page) !important;
  color: var(--stq-text-secondary) !important;
  border-color: var(--stq-border) !important;
}

body.stq-ui .favorite-btn[data-is-favorite="0"]:hover {
  background-color: var(--stq-pill-idle-hover) !important;
  color: var(--stq-text) !important;
}

/* --- Borders & hovers (red-* → warm neutral) --- */
body.stq-ui .border-red-100,
body.stq-ui .border-red-100\/60,
body.stq-ui .border-red-100\/70,
body.stq-ui .border-red-100\/80 {
  border-color: var(--stq-border) !important;
}

body.stq-ui .border-red-200,
body.stq-ui .border-red-300 {
  border-color: #ddd5cb !important;
}

body.stq-ui .hover\:border-\[\#E31E24\]\/30:hover {
  border-color: rgba(230, 138, 78, 0.35) !important;
}

body.stq-ui .hover\:bg-red-50:hover,
body.stq-ui .hover\:bg-red-50\/80:hover {
  background-color: rgba(237, 232, 224, 0.92) !important;
}

body.stq-ui .ring-\[\#E31E24\]\/10 {
  --tw-ring-color: rgba(230, 138, 78, 0.12) !important;
}

body.stq-ui .focus\:ring-\[\#BE1E2D\]:focus {
  --tw-ring-color: rgba(230, 138, 78, 0.42) !important;
}

body.stq-ui .focus\:ring-\[\#E31E24\]\/30:focus {
  --tw-ring-color: rgba(230, 138, 78, 0.3) !important;
}

/* --- Status / alert reds → soft warm --- */
body.stq-ui .bg-red-50 {
  background-color: #f5efe8 !important;
}

body.stq-ui .bg-red-100 {
  background-color: #ede5dc !important;
}

body.stq-ui .text-red-800 {
  color: #5d4a42 !important;
}

body.stq-ui .text-red-600 {
  color: #8b6a5c !important;
}

body.stq-ui .bg-red-600 {
  background-color: #b07a68 !important;
}

body.stq-ui .hover\:bg-red-700:hover {
  background-color: #9a6a5a !important;
}

body.stq-ui .text-red-500 {
  color: var(--stq-text-secondary) !important;
}

body.stq-ui .hover\:text-red-700:hover {
  color: #5c5c5c !important;
}

body.stq-ui .bg-red-50.rounded-full .text-red-500,
body.stq-ui .bg-red-50 .text-red-500 {
  color: #908880 !important;
}

/* --- Gradients (remove pink item placeholders) --- */
body.stq-ui .from-red-50.to-rose-100 {
  background: linear-gradient(to bottom right, #f0ebe3, #e5dfd6) !important;
}

body.stq-ui [class*="FFE4E4"][class*="FFD0D0"],
body.stq-ui [class*="FFE4E4"][class*="FFD4D4"] {
  background: linear-gradient(to bottom right, #ede8e0, #e3ddd4) !important;
}

/* --- Home hero gradient --- */
body.stq-ui [class*="via-[#FFF8F8]"][class*="to-[#FFECEC]"] {
  background-image: linear-gradient(to bottom, #fff, #faf6f0, #f0eae1) !important;
}

/* --- College cards --- */
body.stq-ui .group:hover .group-hover\:text-\[\#E31E24\] {
  color: var(--stq-accent) !important;
}

/* --- Section headers (e.g. Favorites) --- */
body.stq-ui .bg-white.shadow-sm.border-b {
  border-bottom-color: var(--stq-border) !important;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04) !important;
}

/* --- Menu toolbar --- */
body.stq-ui .menu-sticky-toolbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: var(--stq-border) !important;
  box-shadow: 0 1px 0 rgba(28, 28, 28, 0.04) !important;
}

body.stq-ui #menu-search-input {
  background-color: var(--stq-search-bg) !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body.stq-ui #menu-search-input:focus {
  border-color: rgba(230, 138, 78, 0.35) !important;
  --tw-ring-color: rgba(230, 138, 78, 0.25) !important;
}

/* Category pills: inactive = beige; active uses global orange from bg-[#E31E24] */
body.stq-ui a.category-pill.bg-\[\#FFF5F5\] {
  background-color: var(--stq-pill-idle) !important;
  border-color: var(--stq-border) !important;
  color: var(--stq-text) !important;
}

body.stq-ui a.category-pill.bg-\[\#FFF5F5\]:hover {
  background-color: var(--stq-pill-idle-hover) !important;
}

/* --- Cards --- */
body.stq-ui .stq-menu-card,
body.stq-ui .rounded-2xl.border.border-red-100\/60.shadow-md {
  border-radius: 18px !important;
  box-shadow: var(--stq-shadow-soft) !important;
  border-color: var(--stq-border) !important;
}

body.stq-ui .stq-menu-card {
  border-color: var(--stq-border) !important;
}

body.stq-ui .stq-menu-card .p-4 {
  padding: 1.15rem 1.25rem !important;
}

/* --- Quantity steppers --- */
body.stq-ui .stq-qty-plus.bg-\[\#E31E24\] {
  background-color: var(--stq-accent) !important;
}

body.stq-ui .stq-qty-minus.border-\[\#E31E24\]\/25 {
  border-color: rgba(230, 138, 78, 0.28) !important;
  color: var(--stq-accent) !important;
}

/* --- Notifications --- */
body.stq-ui #cartNotification {
  background-color: var(--stq-accent) !important;
}

body.stq-ui #errorNotification {
  background-color: #9a6b5c !important;
  color: #fff !important;
}

body.stq-ui #successNotification .bg-\[\#FFF5F5\] {
  background-color: var(--stq-pill-idle) !important;
}

body.stq-ui #successNotification .text-\[\#E31E24\] {
  color: var(--stq-accent) !important;
}

/* --- Focus rings (forms) --- */
body.stq-ui .focus\:ring-\[\#E31E24\]:focus,
body.stq-ui .focus\:ring-\[\#BE1E2D\]:focus,
body.stq-ui .focus\:ring-\[\#E31E24\]\/30:focus {
  --tw-ring-color: rgba(230, 138, 78, 0.35) !important;
}

body.stq-ui .focus\:border-\[\#E31E24\]:focus,
body.stq-ui .focus\:border-\[\#BE1E2D\]:focus {
  border-color: rgba(230, 138, 78, 0.55) !important;
}

body.stq-ui .focus-visible\:outline-\[\#E31E24\]:focus-visible {
  outline-color: var(--stq-accent) !important;
}

/* --- Canteen dark theme: cool brown (less blood-red) --- */
body.stq-ui [class*="from-[#1a0505]"][class*="to-[#3b1111]"] {
  background-image: linear-gradient(to bottom right, #1f1a16, #2a241f, #352e28) !important;
}

body.stq-ui .text-red-200 {
  color: #e8e0d8 !important;
}

body.stq-ui .text-red-300 {
  color: #d4cbc2 !important;
}

body.stq-ui .text-red-300\/60 {
  color: rgba(212, 203, 194, 0.65) !important;
}

body.stq-ui .text-red-400 {
  color: #a8a29e !important;
}

body.stq-ui [class*="from-[#1a0505]"] .text-red-400 {
  color: #c4b8ad !important;
}

body.stq-ui .hover\:text-red-300:hover {
  color: #e8dfd6 !important;
}

body.stq-ui .bg-red-500\/20 {
  background-color: rgba(230, 138, 78, 0.14) !important;
}

body.stq-ui .border-red-500\/30 {
  border-color: rgba(230, 138, 78, 0.28) !important;
}

body.stq-ui .hover\:bg-red-500\/30:hover {
  background-color: rgba(230, 138, 78, 0.22) !important;
}

body.stq-ui .placeholder-red-300::placeholder {
  color: rgba(212, 203, 194, 0.55) !important;
}

body.stq-ui input.peer:checked + span[class*="BE1E2D"] {
  background-color: var(--stq-accent) !important;
  border-color: var(--stq-accent) !important;
  color: #fff !important;
}

/* --- PWA prompt (inline styles also updated in base) --- */
body.stq-ui .pwa-install-prompt .text-red-100 {
  color: rgba(255, 255, 255, 0.88) !important;
}

body.stq-ui .pwa-install-prompt .text-\[\#E31E24\] {
  color: var(--stq-accent) !important;
}

/* --- Footer --- */
body.stq-ui footer.border-red-100 {
  border-color: var(--stq-border) !important;
}

/* --- Typography tweaks --- */
body.stq-ui .text-gray-500 {
  color: var(--stq-text-secondary) !important;
}

body.stq-ui .text-gray-600 {
  color: #666 !important;
}

/* Checkboxes / radio accent (was red) */
body.stq-ui input[type="checkbox"].text-\[\#E31E24\],
body.stq-ui input[type="radio"].text-\[\#E31E24\] {
  color: var(--stq-accent) !important;
}

/* --- Micro-interactions --- */
body.stq-ui button,
body.stq-ui a.touch-manipulation,
body.stq-ui .stq-card-press,
body.stq-ui .stq-menu-card,
body.stq-ui .category-pill {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

@media (hover: hover) {
  body.stq-ui .shadow-md:hover,
  body.stq-ui .shadow-stq:hover {
    box-shadow: var(--stq-shadow-soft-lg) !important;
  }
}

body.stq-ui button:active,
body.stq-ui a.touch-manipulation:active {
  transform: scale(0.98);
}

body.stq-ui .active\:scale-95:active,
body.stq-ui .active\:scale-\[0\.97\]:active,
body.stq-ui .active\:scale-\[0\.98\]:active {
  transform: scale(0.97);
}

/* --- Arbitrary opacity text on hearts / placeholders --- */
body.stq-ui .text-\[\#E31E24\]\/35,
body.stq-ui .text-\[\#E31E24\]\/40 {
  color: rgba(117, 117, 117, 0.45) !important;
}

body.stq-ui .text-\[\#E31E24\]\/30 {
  color: rgba(230, 138, 78, 0.35) !important;
}

body.stq-ui .text-\[\#E31E24\]\/90 {
  color: rgba(216, 67, 67, 0.9) !important;
}

body.stq-ui .bg-red-500 {
  background-color: #b07a68 !important;
}

/* --- Register / admin light pages: gradient corners --- */
body.stq-ui .from-green-50.to-red-50 {
  background: linear-gradient(to bottom right, #f0fdf4, #faf6f0) !important;
}

body.stq-ui .to-red-50 {
  --tw-gradient-to: #faf6f0 !important;
}

body.stq-ui .from-gray-50.to-red-50 {
  background: linear-gradient(to bottom right, #f9fafb, #faf6f0) !important;
}

body.stq-ui .text-red-900 {
  color: #3d3834 !important;
}