/* ===================================================
   MMStore — Modern Medical & Pharmacy Design System
   Clean, Responsive, Production-Ready (Desktop & Mobile)
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- DESIGN TOKENS ---------- */
:root {
  --green-50: #e8f5e9;
  --green-100: #c8e6c9;
  --green-200: #a5d6a7;
  --green-500: #43a047;
  --green-600: #2e7d32;
  --green-700: #1b5e20;
  --green-800: #144917;

  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  --white: #ffffff;
  --black: #000000;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .07), 0 2px 6px rgba(0, 0, 0, .04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .10), 0 4px 10px rgba(0, 0, 0, .05);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, .14);

  --transition: .22s cubic-bezier(.4, 0, .2, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.5;
  padding-bottom: calc(72px + var(--safe-bottom));
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font);
}

img {
  max-width: 100%;
  display: block;
}

input,
textarea,
select {
  font-family: var(--font);
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

main {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 20px 32px;
  flex: 1;
}

/* ---------- TOPBAR / HEADER ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.topbarInner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 16px;
  width: 100%;
}

.topbarLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar .menuIcon {
  font-size: 20px;
  color: var(--gray-800);
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.topbar .menuIcon:hover {
  background: var(--gray-100);
}

.logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.logoLink {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green-600);
  text-decoration: none;
}

.logoBadge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--green-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: var(--shadow-xs);
}

/* Desktop navigation links (hidden on mobile, visible on desktop) */
.desktopNav {
  display: none;
  align-items: center;
  gap: 4px;
}

.navLink {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.navLink i {
  font-size: 14px;
  color: var(--gray-500);
  transition: color var(--transition);
}

.navLink:hover {
  background: var(--green-50);
  color: var(--green-600);
}

.navLink:hover i {
  color: var(--green-600);
}

.navLink.active {
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 600;
}

.navLink.active i {
  color: var(--green-700);
}

/* Header right group */
.topbarRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Desktop header search */
.desktopSearch {
  display: none;
  position: relative;
  width: 280px;
}

.desktopSearch input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  background: var(--gray-100);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--gray-900);
  outline: none;
  transition: all var(--transition);
}

.desktopSearch input:focus {
  background: var(--white);
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(67, 160, 71, .15);
  width: 320px;
}

.desktopSearch .searchIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--gray-400);
  pointer-events: none;
}

.topbarLink {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  transition: all var(--transition);
}

.topbarLink:hover {
  background: var(--gray-100);
  color: var(--green-600);
}

/* Cart Icon */
.cartIcon {
  position: relative;
  font-size: 18px;
  color: var(--gray-800);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  transition: all var(--transition);
}

.cartIcon:hover,
.cartIcon.cartActive {
  background: var(--green-50);
  color: var(--green-600);
}

#cartBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red-500);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  padding: 0 4px;
  border: 2px solid var(--white);
}

/* Auth link / button in header */
.authLink {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 7px 14px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition);
}

.authLink:hover {
  background: var(--green-50);
  color: var(--green-600);
  border-color: var(--green-200);
}

/* ---------- HERO BANNER ---------- */
.heroBanner {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 60%, #388e3c 100%);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  color: var(--white);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.heroBanner::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.heroContent {
  max-width: 580px;
  position: relative;
  z-index: 2;
}

.heroPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

.heroTitle {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -.5px;
}

.heroDesc {
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
  line-height: 1.5;
  margin-bottom: 20px;
}

.heroActions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.heroBtn {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
  text-decoration: none;
}

.heroBtn.primary {
  background: var(--white);
  color: var(--green-700);
  box-shadow: var(--shadow-sm);
}

.heroBtn.primary:hover {
  background: var(--green-50);
  transform: translateY(-1px);
}

.heroBtn.secondary {
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .3);
}

.heroBtn.secondary:hover {
  background: rgba(255, 255, 255, .25);
}

/* ---------- SEARCH BAR ---------- */
.globalSearchContainer {
  position: relative;
  padding: 12px 20px 4px;
  background: var(--white);
}

.searchContainer {
  padding: 12px 20px 16px;
  background: var(--white);
  max-width: 1240px;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

.searchWrapper {
  position: relative;
}

.searchWrapper .searchIcon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--gray-400);
  pointer-events: none;
}

.searchBar {
  width: 100%;
  padding: 13px 16px 13px 44px;
  background: var(--gray-100);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--gray-900);
  transition: all var(--transition);
  outline: none;
}

.searchBar::placeholder {
  color: var(--gray-400);
}

.searchBar:focus {
  border-color: var(--green-500);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(67, 160, 71, .15);
}

/* Global search dropdown */
.globalSearchDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 250;
  display: none;
  margin-top: 4px;
}

.globalSearchDropdown.active {
  display: block;
}

.searchCategory {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.searchResultItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background var(--transition);
}

.searchResultItem:hover {
  background: var(--gray-50);
}

.searchResultItem .sri-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-600);
  font-size: 14px;
  flex-shrink: 0;
}

.searchResultItem .sri-info {
  flex: 1;
  min-width: 0;
}

.searchResultItem .sri-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchResultItem .sri-meta {
  font-size: 12px;
  color: var(--gray-500);
}

.searchNoResult {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
}

/* ---------- QUICK ACCESS CATEGORIES ---------- */
.quickAccess {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.quickAccess::-webkit-scrollbar {
  display: none;
}

.quickCard {
  flex: 1;
  min-width: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--gray-800);
  transition: all var(--transition);
  box-shadow: var(--shadow-xs);
}

.quickCard:hover {
  border-color: var(--green-500);
  box-shadow: var(--shadow-sm);
}

.quickCard:active {
  transform: scale(.97);
}

.quickCard i {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--green-50);
  color: var(--green-600);
  font-size: 18px;
  transition: all var(--transition);
}

.quickCard:hover i {
  background: var(--green-600);
  color: var(--white);
}

.quickCard p,
.quickCard .quickTitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
}

.quickCard .quickDesc {
  display: none;
  font-size: 11px;
  color: var(--gray-500);
}

/* ---------- SECTIONS & LISTINGS ---------- */
.section {
  margin-top: 16px;
  margin-bottom: 24px;
}

.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sectionHeader h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sectionHeader a {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition);
}

.sectionHeader a:hover {
  color: var(--green-700);
  text-decoration: underline;
}

/* ---------- RESPONSIVE GRID ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

/* ---------- CARDS ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}

.cardMediaContainer {
  position: relative;
  width: 100%;
  height: 140px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardMedImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.card:hover .cardMedImage {
  transform: scale(1.05);
}

.cardIconFallback {
  margin-bottom: 0 !important;
}

.ownerEditImgBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background var(--transition);
  z-index: 10;
}

.ownerEditImgBtn:hover {
  background: var(--green-600);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-200);
}

.cardIcon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-600);
  font-size: 20px;
  margin-bottom: 12px;
}

.cardTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
  line-height: 1.35;
}

.cardDesc {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cardMeta {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.cardPrice {
  font-size: 17px;
  font-weight: 700;
  color: var(--green-600);
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.cardBtn {
  width: 100%;
  padding: 10px 14px;
  background: var(--green-600);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cardBtn:hover {
  background: var(--green-700);
}

.cardBtn:active {
  transform: scale(.98);
}

/* Tag pills */
.cardTag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
  width: fit-content;
}

.cardTag.prescription {
  background: var(--amber-50);
  color: var(--amber-600);
  border: 1px solid var(--amber-100);
}

.cardTag.inStock {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-100);
}

.cardTag.outOfStock {
  background: var(--red-50);
  color: var(--red-600);
  border: 1px solid var(--red-100);
}

/* ---------- SIDE MENU (MOBILE DRAWER) ---------- */
.menuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.menuOverlay.active {
  opacity: 1;
  visibility: visible;
}

.sideMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 290px;
  height: 100%;
  background: var(--white);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.sideMenu.open {
  transform: translateX(0);
}

.sideMenuHeader {
  padding: 20px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sideMenuBrand {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-600);
  letter-spacing: -.3px;
}

.sideMenuClose {
  font-size: 18px;
  color: var(--gray-500);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.sideMenuClose:hover {
  background: var(--gray-100);
}

.sideMenu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  transition: background var(--transition), color var(--transition);
}

.sideMenu a:hover {
  background: var(--green-50);
  color: var(--green-700);
}

.sideMenu a i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--gray-500);
  transition: color var(--transition);
}

.sideMenu a:hover i {
  color: var(--green-600);
}

.sideMenuDivider {
  height: 1px;
  background: var(--gray-200);
  margin: 6px 20px;
}

/* ---------- BOTTOM NAV (MOBILE ONLY) ---------- */
.bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(62px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .04);
}

.bottomNav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  min-width: 64px;
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
}

.bottomNav a i {
  font-size: 18px;
}

.bottomNav a.active {
  color: var(--green-600);
  font-weight: 600;
}

/* ---------- MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 300;
  padding: 0;
}

.modal.active {
  display: flex;
}

.modalContent {
  background: var(--white);
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 24px calc(24px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: slideUp .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: var(--shadow-xl);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modalContent h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.modalContent .inputGroup {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modalContent .inputGroup label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.modalContent input,
.modalContent textarea,
.modalContent select {
  padding: 11px 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--gray-900);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition);
}

.modalContent input:focus,
.modalContent textarea:focus,
.modalContent select:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(67, 160, 71, .15);
}

.modalContent textarea {
  min-height: 70px;
  resize: vertical;
}

.modalActions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.modalActions button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}

.modalActions button:active {
  transform: scale(.98);
}

.confirmBtn {
  background: var(--green-600);
  color: var(--white);
}

.confirmBtn:hover {
  background: var(--green-700);
}

.cancelBtn {
  background: var(--gray-200);
  color: var(--gray-700);
}

.cancelBtn:hover {
  background: var(--gray-300);
}

/* ---------- CART VIEW ---------- */
.cartLayout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cartContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cartItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-xs);
  gap: 16px;
}

.cartItemInfo {
  flex: 1;
}

.cartItemInfo .cardTitle {
  margin-bottom: 2px;
}

.cartItemPrice {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-600);
  margin-top: 4px;
}

.cartItemActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qtyBtn {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  transition: all var(--transition);
  cursor: pointer;
}

.qtyBtn:hover {
  border-color: var(--green-500);
  color: var(--green-600);
  background: var(--green-50);
}

.qtyDisplay {
  font-size: 14px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.removeBtn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--red-100);
  background: var(--red-50);
  color: var(--red-600);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}

.removeBtn:hover {
  background: var(--red-500);
  color: var(--white);
}

.cartSummary {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-xs);
}

.cartSummary h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--gray-900);
}

.checkoutForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.checkoutForm input,
.checkoutForm textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: all var(--transition);
}

.checkoutForm input:focus,
.checkoutForm textarea:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(67, 160, 71, .15);
}

.checkoutForm textarea {
  min-height: 80px;
  resize: vertical;
}

.checkoutBtn {
  width: 100%;
  padding: 14px;
  background: var(--green-600);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  transition: all var(--transition);
  cursor: pointer;
}

.checkoutBtn:hover {
  background: var(--green-700);
}

.checkoutBtn:active {
  transform: scale(.98);
}

/* ---------- HISTORY CARDS ---------- */
.historyCard {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 14px;
}

.historyCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.historyId {
  font-size: 12px;
  font-family: monospace;
  color: var(--gray-500);
  font-weight: 700;
}

.statusBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.statusBadge.green {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-100);
}

.statusBadge.amber {
  background: var(--amber-50);
  color: var(--amber-600);
  border: 1px solid var(--amber-100);
}

.statusBadge.blue {
  background: var(--blue-50);
  color: var(--blue-600);
  border: 1px solid var(--blue-100);
}

.statusBadge.red {
  background: var(--red-50);
  color: var(--red-600);
  border: 1px solid var(--red-100);
}

.historyMeta {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.historyMeta i {
  color: var(--green-600);
  margin-top: 2px;
}

/* ---------- TOAST NOTIFICATIONS ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  background: var(--green-600);
  color: var(--white);
}

.toast.error {
  background: var(--red-500);
  color: var(--white);
}

.toast.info {
  background: var(--gray-800);
  color: var(--white);
}

/* ---------- SKELETON LOADER ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeletonCard {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px;
}

.skeletonCard .skLine {
  height: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.skeletonCard .skLine.w60 {
  width: 60%;
}

.skeletonCard .skLine.w40 {
  width: 40%;
}

.skeletonCard .skLine.w100 {
  width: 100%;
  height: 36px;
  margin-top: 14px;
}

/* ---------- EMPTY STATE ---------- */
.emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px dashed var(--gray-300);
  grid-column: 1 / -1;
}

.emptyState i {
  font-size: 44px;
  color: var(--gray-300);
  margin-bottom: 14px;
}

.emptyState h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.emptyState p {
  font-size: 13px;
  color: var(--gray-500);
  max-width: 280px;
}

/* ===================================================
   DESKTOP RESPONSIVE BREAKPOINTS (Tablet & Desktop)
   Fixing squished layout and adding modern broad view
   =================================================== */

@media (min-width: 768px) {

  /* Remove mobile bottom space and eliminate 640px limit */
  body {
    padding-bottom: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* Hide mobile bottom navigation bar on tablet/desktop */
  .bottomNav {
    display: none !important;
  }

  /* Center modals properly in middle of screen */
  .modal {
    align-items: center !important;
  }

  .modalContent {
    border-radius: var(--radius-lg) !important;
    max-width: 480px !important;
    padding: 28px !important;
    animation: scaleIn .22s cubic-bezier(.4, 0, .2, 1) !important;
  }

  @keyframes scaleIn {
    from {
      transform: scale(.95);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* 3 columns on tablet */
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  /* Expand quick access cards into modern horizontal tiles */
  .quickAccess {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    overflow: visible;
    padding: 0 0 24px;
    max-width: 1240px;
    margin: 0 auto;
  }

  .quickCard {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    padding: 16px 18px;
    gap: 14px;
    text-align: left;
  }

  .quickCard i {
    width: 48px;
    height: 48px;
    font-size: 20px;
    flex-shrink: 0;
  }

  .quickCard .quickDesc {
    display: block;
    margin-top: 2px;
  }
}

@media (min-width: 992px) {

  /* Show desktop navigation bar in header */
  .desktopNav {
    display: flex;
  }

  .desktopSearch {
    display: block;
  }

  .topbarLink.desktopOnly {
    display: inline-flex;
  }

  /* Hide mobile drawer toggle icon if desired on large screens */
  .topbar .menuIcon {
    display: none;
  }

  /* Hide the separate mobile search container on desktop homepage when topbar search is active */
  .globalSearchContainer.mobileOnly {
    display: none;
  }

  /* 4 columns on desktop */
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }

  /* Cart 2-column layout on desktop: Left items (65%), Right summary (35%) */
  .cartLayout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
  }

  .cartSummary {
    position: sticky;
    top: 86px;
  }
}

  /* Responsive adjustments for mid-size screens and mobile */
  @media (max-width: 991px) {
    .topbarInner {
      padding: 10px 14px;
      gap: 8px;
    }

    .logo {
      font-size: 17px;
    }

    .logoBadge {
      width: 28px;
      height: 28px;
      font-size: 13px;
    }

    .cartIcon {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }

    .authLink {
      padding: 6px 10px;
      font-size: 12px;
    }
  }

  @media (max-width: 640px) {
    .grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
    }

    .card {
      padding: 12px !important;
    }

    .cardMediaContainer {
      height: 110px !important;
      margin-bottom: 8px !important;
    }

    .cardTitle {
      font-size: 13px !important;
      min-height: 36px;
    }

    .cardPrice {
      font-size: 15px !important;
      margin-bottom: 8px !important;
    }

    .cardBtn {
      padding: 8px 10px !important;
      font-size: 12px !important;
    }

    .heroBanner {
      padding: 24px 18px !important;
    }

    .heroTitle {
      font-size: 20px !important;
    }

    .heroDesc {
      font-size: 12px !important;
      margin-bottom: 14px !important;
    }

    .heroBtn {
      padding: 8px 14px !important;
      font-size: 12px !important;
    }
  }