:root {
  --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #f1f5f9 100%);
  --text-main: #0f172a; /* Slate 900 / Navy */
  --text-muted: #334155; /* Slate 700 */
  --text-light: #64748b; /* Slate 500 */
  
  --primary-blue: #1d4ed8; /* Royal Blue (Blue 700) - Much closer to the cube */
  --primary-blue-hover: #1e40af; /* Deeper Royal Blue (Blue 800) */
  --primary-blue-glow: rgba(29, 78, 216, 0.15);
  --primary-blue-gradient: linear-gradient(135deg, #1d4ed8, #0284c7); /* Royal Blue to Sky Blue */
  --primary-blue-light: #eff6ff; /* Blue 50 */
  --border-light: rgba(29, 78, 216, 0.15);
  
  --header-bg: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  --header-border: #bae6fd; /* Sky 200 */
  
  --panel-bg: rgba(255, 255, 255, 0.75);
  --panel-border: rgba(29, 78, 216, 0.12);
  --panel-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
  
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border: #cbd5e1;
  --input-focus-border: #1d4ed8;
  
  /* Accessibility-friendly Status Colors for Light Background */
  --color-success: #059669; /* Emerald 600 */
  --color-pending: #b45309; /* Amber 700 */
  --color-error: #be123c; /* Rose 700 - Highly accessible crimson */
  --color-info: #1d4ed8; /* Royal Blue 700 */
}

/* Smooth transitions for theme toggle */
body, .site-header, .form-section, .instructions, .redeem-image, .footer, .product-card, .order-badge, .info-panel, .zus-instructions, input, button {
  transition: background 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Mode Color Variables */
body.dark-mode {
  --bg-gradient: linear-gradient(135deg, #0f172a 0%, #0f294a 50%, #0f172a 100%);
  --text-main: #f8fafc; /* Slate 50 */
  --text-muted: #cbd5e1; /* Slate 300 */
  --text-light: #94a3b8; /* Slate 400 */
  
  --primary-blue: #3b82f6; /* Blue 500 */
  --primary-blue-hover: #60a5fa; /* Blue 400 */
  --primary-blue-glow: rgba(59, 130, 246, 0.2);
  --primary-blue-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
  --primary-blue-light: rgba(59, 130, 246, 0.15);
  --border-light: rgba(255, 255, 255, 0.08);
  
  --header-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --header-border: rgba(59, 130, 246, 0.25);
  
  --panel-bg: rgba(30, 41, 59, 0.7);
  --panel-border: rgba(59, 130, 246, 0.15);
  --panel-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  
  --input-bg: rgba(15, 23, 42, 0.85);
  --input-border: rgba(59, 130, 246, 0.3);
  --input-focus-border: #3b82f6;
  
  /* Dark Mode Status Adjustments */
  --color-success: #10b981; /* Emerald 500 */
  --color-pending: #fbbf24; /* Amber 400 */
  --color-error: #f43f5e; /* Rose 500 */
  --color-info: #3b82f6;
}

/* Theme Toggle Button Styling */
.site-header {
  position: relative;
}

.theme-toggle-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  transition: all 0.3s ease;
  z-index: 10;
}

.theme-toggle-btn:hover {
  background: var(--primary-blue-glow);
  transform: scale(1.08);
}

.theme-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* Toggle Sun/Moon display based on body theme state */
body.dark-mode .moon-icon {
  display: none;
}
body:not(.dark-mode) .sun-icon {
  display: none;
}

body.dark-mode .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .product-card,
body.dark-mode .info-panel,
body.dark-mode .brand-instructions {
  background: rgba(15, 23, 42, 0.65);
}

body.dark-mode .logo-img {
  filter: drop-shadow(0 0 15px rgba(2, 132, 199, 0.45));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg-gradient);
  min-height: 100vh;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
}

/* Custom Highlight Color for text selection */
::selection {
  background: var(--primary-blue-glow);
  color: var(--primary-blue-hover);
}

.site-header {
  text-align: center;
  padding: 48px 20px 32px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
}

.logo {
  margin-bottom: 20px;
}

.logo-img {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(2, 132, 199, 0.15));
}

.site-header h1 {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0f172a 20%, #0284c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

.site-header p {
  color: var(--text-muted);
  font-size: 1rem;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px;
  flex: 1;
  width: 100%;
}

.lang-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 32px;
}

.lang-toggle button {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #cbd5e1;
  padding: 8px 20px;
  border-radius: 40px;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.lang-toggle button:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: #ffffff;
}

.lang-toggle button.active {
  background: var(--primary-blue-gradient);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px var(--primary-blue-glow);
}

.form-section {
  background: var(--panel-bg);
  backdrop-filter: blur(10px);
  border-radius: 32px;
  padding: 32px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  margin-bottom: 32px;
}

.form-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--primary-blue-hover);
}

.redeem-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.redeem-form input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.98rem;
  color: var(--text-main);
  font-family: 'Poppins', sans-serif;
  transition: all 0.3s ease;
}

.redeem-form input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--primary-blue-glow);
}

.redeem-form input::placeholder {
  color: var(--text-light);
}

.redeem-form button {
  background: var(--primary-blue-gradient);
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.redeem-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px var(--primary-blue-glow);
}

.instructions {
  background: var(--panel-bg);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 28px;
  margin-bottom: 32px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.instructions h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--primary-blue-hover);
}

.instructions ul {
  list-style: none;
  padding: 0;
}

.instructions li {
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.instructions code {
  background: var(--primary-blue-light);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--primary-blue-hover);
  border: 1px solid var(--border-light);
}

.redeem-image {
  background: var(--panel-bg);
  border-radius: 24px;
  padding: 20px;
  text-align: center;
  margin-bottom: 32px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.redeem-image img {
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.purchase-btn {
  text-align: center;
  margin-bottom: 32px;
}

.purchase-btn a {
  display: inline-block;
  background: var(--primary-blue-gradient);
  padding: 14px 32px;
  border-radius: 40px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.purchase-btn a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px var(--primary-blue-glow);
}

.footer {
  text-align: center;
  padding: 40px 20px;
  background: transparent;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  font-size: 14px;
  color: var(--text-light);
  transition: all 0.3s ease;
}

.footer-container {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-help {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
}

.footer-help a {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-help a:hover {
  color: var(--primary-blue-hover);
  text-decoration: underline;
}

.footer-copyright {
  font-size: 0.85rem;
  color: #888888;
}

.footer-copyright a {
  color: #888888;
  text-decoration: none;
}

.footer-copyright a:hover {
  text-decoration: underline;
}

.footer-powered {
  font-size: 0.75rem;
  color: #b0b0b0;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .site-header h1 {
    font-size: 1.5rem;
  }
  .form-section {
    padding: 24px;
  }
  .container {
    padding: 24px 16px;
  }
  .category-selector {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    gap: 8px !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding-bottom: 12px !important;
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  .category-selector::-webkit-scrollbar {
    display: none !important;
  }
  .category-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 20px !important;
  }
}

/* --- NEW SECTION STYLES --- */

.section-separator {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--header-border), transparent);
  margin: 40px 0;
}

.instant-section {
  text-align: center;
}

.instant-section p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.product-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.product-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01);
  width: 100%;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.product-info-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.product-icon {
  font-size: 2.2rem;
  user-select: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06));
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

.product-icon img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
}

.product-card:hover .product-icon {
  transform: scale(1.12) rotate(3deg);
}

.product-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.2px;
}

.product-qty-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 6px 12px;
}

body.dark-mode .product-qty-selector {
  background: rgba(255, 255, 255, 0.03);
}

.qty-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.qty-btn:hover {
  background: rgba(15, 23, 42, 0.08);
}

body.dark-mode .qty-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.qty-input {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  background: transparent;
  border: none;
  width: 45px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-price {
  padding: 10px 20px;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  min-width: 100px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  user-select: none;
  background: var(--primary-blue-gradient);
}

/* Brand Card Hover Accents (price badge color is unified above for a consistent look) */

/* KFC (Red Theme) */
.product-kfc:hover {
  border-color: rgba(220, 38, 38, 0.3);
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.08);
}

/* Chagee (Amber/Tea Theme) */
.product-chagee:hover {
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 12px 24px rgba(217, 119, 6, 0.08);
}

/* Foodpanda (Pink Theme) */
.product-foodpanda:hover {
  border-color: rgba(236, 72, 153, 0.3);
  box-shadow: 0 12px 24px rgba(236, 72, 153, 0.08);
}

/* Zus Coffee (Blue/Navy Theme) */
.product-zus:hover {
  border-color: rgba(29, 78, 216, 0.3);
  box-shadow: 0 12px 24px rgba(29, 78, 216, 0.08);
}

/* Tealive (Purple Theme) */
.product-tealive:hover {
  border-color: rgba(147, 51, 234, 0.3);
  box-shadow: 0 12px 24px rgba(147, 51, 234, 0.08);
}

/* Luckin Coffee (Blue/Navy Theme) */
.product-luckin:hover {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
}

/* Llao Llao (Green Theme) */
.product-llaollao:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 12px 24px rgba(16, 185, 129, 0.08);
}

/* Gigi Coffee (Light Blue Theme) */
.product-gigi:hover {
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.08);
}

/* Shein (Black Theme) */
.product-shein:hover {
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

/* Beutea (Rose/Pink Theme) */
.product-beutea:hover {
  border-color: rgba(244, 63, 94, 0.3);
  box-shadow: 0 12px 24px rgba(244, 63, 94, 0.08);
}

/* Baskin Robin (Pink/Blue Theme) */
.product-baskin:hover {
  border-color: rgba(236, 72, 153, 0.3);
  box-shadow: 0 12px 24px rgba(236, 72, 153, 0.08);
}

/* My News (Orange Theme) */
.product-mynews:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.08);
}

/* Turnitin (Blue Theme) */
.product-turnitin:hover {
  border-color: rgba(29, 78, 216, 0.3);
  box-shadow: 0 12px 24px rgba(29, 78, 216, 0.08);
}

/* Any Other (Gray Theme) */
.product-anyother:hover {
  border-color: rgba(100, 116, 139, 0.3);
  box-shadow: 0 12px 24px rgba(100, 116, 139, 0.08);
}

/* Any Other Few Stock (Gray Theme) */
.product-anyotherfew:hover {
  border-color: rgba(100, 116, 139, 0.3);
  box-shadow: 0 12px 24px rgba(100, 116, 139, 0.08);
}

/* IGCSE (Purple/Educational Theme) */
.product-igcse:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 12px 24px rgba(139, 92, 246, 0.08);
}

/* E-Commerce (Blue/Cyan Theme) */
.product-ecom:hover {
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.08);
}

/* Canva (Purple/Teal Theme) */
.product-canva:hover {
  border-color: rgba(125, 42, 232, 0.3);
  box-shadow: 0 12px 24px rgba(125, 42, 232, 0.08);
}

/* SMS Dashboard Customization */
.sms-section {
  border: 1px solid rgba(2, 132, 199, 0.3);
  box-shadow: 0 15px 35px -10px rgba(2, 132, 199, 0.08);
  text-align: center;
}

.sms-section h2 {
  color: var(--primary-blue-hover);
  font-size: 1.8rem;
  letter-spacing: 1px;
}

/* Shared Action Button Styles */
.action-btn {
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
  margin-top: 12px;
}

.action-btn:hover {
  transform: translateY(-2px);
}

/* Specific Button Colors */


.check-btn {
  background: var(--primary-blue-gradient);
}

.check-btn:hover {
  box-shadow: 0 10px 25px -5px var(--primary-blue-glow);
}

.reject-btn {
  background: linear-gradient(135deg, #e11d48, #be123c);
  margin-top: 16px;
}

.reject-btn:hover {
  box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.15);
}

.result-msg {
  margin-top: 16px; 
  text-align: center; 
  font-size: 14px;
  color: var(--text-main);
  font-weight: 500;
}

/* Back Button Style */
.back-btn {
  background: rgba(226, 232, 240, 0.8);
  border: 1px solid #cbd5e1;
  color: var(--text-muted);
  margin-top: 16px;
}

.back-btn:hover {
  background: rgba(203, 213, 225, 0.8);
  box-shadow: 0 10px 25px -5px rgba(148, 163, 184, 0.15);
}

body.dark-mode .back-btn {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--text-muted);
}

body.dark-mode .back-btn:hover {
  background: rgba(51, 65, 85, 0.8);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Side-by-side secondary actions */
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-row .action-btn {
  flex: 1;
  width: auto;
  margin-top: 0;
}

/* Buy More Services - understated secondary button */
.buy-more-btn {
  background: transparent;
  border: 2px solid #10b981;
  color: #059669;
  box-shadow: none;
  font-size: 0.95rem;
}

.buy-more-btn:hover {
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 6px 15px rgba(16, 185, 129, 0.15);
}

body.dark-mode .buy-more-btn {
  color: #34d399;
  border-color: #34d399;
}

body.dark-mode .buy-more-btn:hover {
  background: rgba(52, 211, 153, 0.1);
}

/* Red clickable tutorial link */
.tutorial-link {
  display: block;
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-error);
  text-decoration: none;
  cursor: pointer;
}

.tutorial-link:hover {
  text-decoration: underline;
}

/* Refactored Classes to replace Inline Styles in index.html */

.hint-text {
  text-align: center;
  color: var(--text-light);
  font-size: 0.85rem;
  margin-top: 15px;
}

/* Review Banner Button */
.review-btn {
  display: block;
  padding: 14px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); /* Vibrant purple instead of orange */
  color: white !important;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  margin-bottom: 15px;
  box-shadow: 0 6px 15px rgba(139, 92, 246, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.review-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #a855f7, #7e22ce);
}

/* Review Badge - premium amber card variant */
.review-badge {
  display: block;
  margin-top: 20px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 14px;
  color: #b45309;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.review-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}

body.dark-mode .review-badge {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

.hint-text .info-icon {
  color: var(--primary-blue);
  margin-right: 4px;
}

.order-badge {
  background: rgba(2, 132, 199, 0.06);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 15px;
  display: inline-block;
  border: 1px solid rgba(2, 132, 199, 0.15);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.order-badge strong {
  color: var(--text-main);
  letter-spacing: 0.5px;
}

.order-badge button {
  background: none;
  border: none;
  color: var(--primary-blue);
  cursor: pointer;
  margin-left: 10px;
  font-weight: bold;
}

.order-badge button:hover {
  color: var(--primary-blue-hover);
  text-decoration: underline;
}

.info-panel {
  background: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(2, 132, 199, 0.15);
  text-align: left;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.info-panel p {
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  word-break: break-word;
  gap: 6px;
}

.info-panel strong {
  color: var(--text-main);
}

.info-panel button {
  background: none;
  border: none;
  color: var(--primary-blue);
  cursor: pointer;
  font-size: 1rem;
  margin-left: 5px;
  transition: transform 0.2s ease;
}

.info-panel button:hover {
  transform: scale(1.1);
  color: var(--primary-blue-hover);
}

#timerDisplay {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: -10px;
  margin-bottom: 20px;
  font-weight: 500;
}

.brand-instructions {
  margin-top: 35px;
  text-align: left;
  background: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(2, 132, 199, 0.15);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.brand-instructions h3 {
  color: var(--primary-blue-hover);
  margin-bottom: 15px;
  font-size: 1.1rem;
  font-weight: 600;
}

.brand-instructions .zus-warning {
  color: var(--color-error) !important;
  font-size: 0.85rem;
  margin-bottom: 15px;
  font-weight: bold;
}

.brand-instructions ul {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  padding-left: 0;
  list-style: none;
}

.brand-instructions li {
  margin-bottom: 10px;
}

/* --- SMART CHECKOUT FOOTER --- */

.checkout-footer-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 150%);
  width: calc(100% - 48px);
  max-width: 600px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(29, 78, 216, 0.15);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  z-index: 1000;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.checkout-footer-bar.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

body.dark-mode .checkout-footer-bar {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.checkout-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
}

.checkout-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-icon-wrapper {
  position: relative;
  background: rgba(29, 78, 216, 0.1);
  color: var(--primary-blue);
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

body.dark-mode .cart-icon-wrapper {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary-blue);
}

.cart-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-error);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.dark-mode .cart-badge {
  border-color: #0f172a;
}

@keyframes popScale {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

.checkout-text-details {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.subtotal-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.subtotal-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  background: linear-gradient(135deg, var(--text-main) 30%, var(--primary-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.dark-mode .subtotal-price {
  background: linear-gradient(135deg, #ffffff 30%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.checkout-btn-main {
  background: var(--primary-blue-gradient);
  border: none;
  border-radius: 16px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px var(--primary-blue-glow);
}

.checkout-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--primary-blue-glow);
}

.checkout-btn-main:active {
  transform: translateY(0);
}

.arrow-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.checkout-btn-main:hover .arrow-icon {
  transform: translateX(4px);
}

/* --- CLOSE CHECKOUT BUTTON --- */
.close-checkout-btn {
  background: rgba(15, 23, 42, 0.06);
  border: none;
  font-size: 1.5rem;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: all 0.2s ease;
  margin-left: 12px;
  font-family: 'Poppins', sans-serif;
  user-select: none;
}

.close-checkout-btn:hover {
  background: rgba(15, 23, 42, 0.12);
  color: var(--text-main);
  transform: scale(1.05);
}

body.dark-mode .close-checkout-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

body.dark-mode .close-checkout-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Adjustments to page layout when checkout is active to prevent footer blocking */
body {
  padding-bottom: 100px;
}

/* --- DARK MODE UI/UX OVERRIDES & CONTRAST FIXES --- */

body.dark-mode {
  color: #ffffff;
  background-color: #121212 !important;
  background-image: none !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode li,
body.dark-mode .hint-text,
body.dark-mode .hint-text strong {
  color: #ffffff !important;
}

/* Dark Mode Redemption Section Solid Background Contrast */
body.dark-mode #redemption-card {
  background-color: #1e293b;
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Dark Mode Header H1 Bright Gradient */
body.dark-mode .site-header h1 {
  background: linear-gradient(135deg, #ffffff 20%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dark Mode Button Overrides - Charcoal (#333333) with White Text & Bright Hover */
body.dark-mode .order-badge button {
  background: #333333;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

body.dark-mode .order-badge button:hover {
  background: #444444;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

/* Dark Mode Main Redeem Button Override - Royal Blue Gradient */
body.dark-mode .redeem-form button {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3);
}

body.dark-mode .redeem-form button:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* Language Toggle Buttons in Dark Mode - Charcoal + Border visibility */
body.dark-mode .lang-toggle button {
  background: #27272a !important;
  color: #ffffff !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode .lang-toggle button:hover {
  background: #3f3f46 !important;
  border-color: #71717a !important;
}

body.dark-mode .lang-toggle button.active {
  background: var(--primary-blue-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Professional Footer in Dark Mode */
body.dark-mode .footer {
  background: #121212 !important;
  border-top: 1px solid #333333 !important;
}

body.dark-mode .footer-help {
  color: #aaaaaa !important;
}

body.dark-mode .footer-help a {
  color: #ffffff !important;
  text-decoration: underline;
}

body.dark-mode .footer-help a:hover {
  color: #60a5fa !important;
}

body.dark-mode .footer-copyright,
body.dark-mode .footer-copyright a {
  color: #aaaaaa !important;
}

body.dark-mode .footer-powered {
  color: #888888 !important;
}

/* Other general dark mode adjustments */
body.dark-mode .qty-btn {
  color: #ffffff;
}

body.dark-mode .product-qty-selector {
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .instructions {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .redeem-image {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Guided Redemption Flow Button & Select Box Custom Overrides */
.selector-label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  color: var(--text-main);
}

#service-select {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: 2px solid #cbd5e1; /* Soft gray border exactly matching the mockup */
  background: #ffffff;
  color: #0f172a;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
}

body.dark-mode #service-select {
  background-color: #1e293b;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.confirm-btn {
  background: var(--primary-blue-gradient) !important;
  color: #ffffff !important; /* Changed to white text as requested */
  font-weight: 700 !important;
  margin-bottom: 12px;
}

#service-select option {
  color: #000000 !important; /* Forces dropdown options to render black text */
  background-color: #ffffff !important; /* Forces white background for option list */
}

body.dark-mode .confirm-btn {
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  color: #ffffff !important; /* White text in dark mode */
}

/* Selector box focus outline highlight - Black in bright mode, White in dark mode */
#service-select:focus {
  outline: none !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18) !important;
}

body.dark-mode #service-select:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}

/* Mobile responsive layout overrides for product cards */
@media (max-width: 640px) {
  .product-card {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .product-info-left {
    flex: 1 1 100% !important;
  }
  .product-qty-selector {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  .product-price {
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }
}

/* --- CATEGORY SELECTOR UI --- */
.category-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
}

.category-tab {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--input-border);
  padding: 10px 24px;
  border-radius: 40px;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-tab:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: #ffffff;
  transform: translateY(-1px);
}

.category-tab.active {
  background: var(--primary-blue-gradient);
  border-color: transparent;
  color: white !important;
  box-shadow: 0 4px 12px var(--primary-blue-glow);
}

body.dark-mode .category-tab {
  background: #27272a !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

body.dark-mode .category-tab:hover {
  background: #3f3f46 !important;
  border-color: #71717a !important;
  color: #ffffff !important;
}

body.dark-mode .category-tab.active {
  background: var(--primary-blue-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* --- IGCSE CONFIGURATION MODAL --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end; /* Drawer slide up from bottom on mobile */
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.show .modal-card {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .modal-overlay {
    align-items: center; /* Center horizontally/vertically on desktop */
  }
  .modal-card {
    border-radius: 24px;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  }
  .modal-overlay.show .modal-card {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modal-logo-square {
  width: 44px;
  height: 44px;
  background: var(--primary-blue-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.modal-subtitle {
  font-size: 0.82rem;
  color: var(--text-light);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--text-light);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-main);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.option-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-light);
  text-transform: uppercase;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-btn {
  background: #ffffff;
  border: 1px solid var(--input-border);
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

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

.chip-btn.active {
  background: #0f172a; /* Sleek slate black matching xAI Grok tier button style */
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

/* Selected Preview Box */
.selected-preview-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-title-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-light);
}

.preview-stock-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-success);
}

.preview-product-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.preview-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

/* Quantity Selector Row inside Modal */
.modal-quantity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.qty-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}

.modal-qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.modal-qty-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  font-weight: 600;
  width: 38px;
  height: 38px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.modal-qty-btn:hover {
  background: #f1f5f9;
  color: var(--text-main);
}

#modal-qty-input {
  border: none;
  border-left: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  width: 48px;
  height: 38px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  background: none;
  font-family: inherit;
}

#modal-qty-input:focus {
  outline: none;
}

/* Chrome, Safari, Edge, Opera number controls removal */
#modal-qty-input::-webkit-outer-spin-button,
#modal-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#modal-qty-input[type=number] {
  -moz-appearance: textfield;
}

.modal-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--panel-border);
}

.modal-cta-btn {
  width: 100%;
  background: linear-gradient(135deg, #f05a3e, #e04622); /* Bold accent gradient */
  color: white;
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  box-shadow: 0 10px 25px -5px rgba(240, 90, 62, 0.3);
}

.modal-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -5px rgba(240, 90, 62, 0.4);
}

.modal-cta-btn:active {
  transform: translateY(0);
}

/* Dark Mode Overrides for Modal */
body.dark-mode .modal-card {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal-logo-square {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .chip-btn {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
}

body.dark-mode .chip-btn:hover {
  border-color: var(--primary-blue-hover);
  background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .chip-btn.active {
  background: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

body.dark-mode .selected-preview-box {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal-qty-selector {
  border-color: rgba(255, 255, 255, 0.15);
  background: #0f172a;
}

body.dark-mode .modal-qty-btn {
  color: #ffffff;
}

body.dark-mode .modal-qty-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode #modal-qty-input {
  border-left-color: rgba(255, 255, 255, 0.15);
  border-right-color: rgba(255, 255, 255, 0.15);
}

/* Modal slide up animation keyframes */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* --- GROK GRID CARD --- */
.grok-grid-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-light) !important;
  background: #ffffff !important;
  cursor: pointer;
  min-height: 280px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.grok-grid-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

body.dark-mode .grok-grid-card {
  background: #18181b !important;
  border-color: #3f3f46 !important;
}

.grok-grid-image {
  background: #eff6ff; /* light blue */
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
}

body.dark-mode .grok-grid-image {
  background: #1e1e24;
  border-color: #3f3f46;
}

.grok-big-icon {
  font-size: 4rem;
  color: #3b82f6; /* blue */
}

.grok-grid-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.grok-grid-tags {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.grok-tag-red {
  color: #ef4444; /* red */
}

.grok-tag-gray {
  color: #64748b;
}

.grok-grid-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.grok-grid-subtitle {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 16px;
}

.grok-grid-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

body.dark-mode .grok-grid-bottom {
  border-color: #3f3f46;
}

.grok-grid-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  font-family: monospace;
}

.grok-grid-add-btn {
  width: 32px;
  height: 32px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.grok-grid-add-btn svg {
  width: 18px;
  height: 18px;
}

.grok-grid-add-btn:hover {
  background: #1e293b;
}

body.dark-mode .grok-grid-add-btn {
  background: #ffffff;
  color: #000000;
}

body.dark-mode .grok-grid-add-btn:hover {
  background: #e2e8f0;
}

/* Mobile Responsive Styling for the Smart Checkout Footer */
@media (max-width: 640px) {
  .checkout-footer-bar {
    width: calc(100% - 16px); /* Use more horizontal space on mobile */
    bottom: 12px; /* Position closer to the bottom */
    border-radius: 16px;
  }

  .checkout-footer-content {
    padding: 8px 10px; /* Reduce padding inside the footer */
    gap: 8px;
  }

  .checkout-info {
    gap: 8px; /* Reduce gap between icon and details */
  }

  .cart-icon-wrapper {
    width: 36px; /* Slightly smaller cart icon container */
    height: 36px;
  }

  .cart-icon-wrapper svg {
    width: 18px;
    height: 18px;
  }

  .checkout-text-details {
    display: flex;
    flex-direction: column;
  }

  .subtotal-label {
    font-size: 0.68rem; /* Make text labels slightly smaller */
  }

  .subtotal-price {
    font-size: 0.95rem;
  }

  .checkout-actions {
    gap: 6px;
  }

  .checkout-btn-main {
    padding: 8px 14px; /* More compact CTA button */
    font-size: 0.85rem;
    height: 36px;
  }

  .checkout-btn-main svg.arrow-icon {
    width: 14px;
    height: 14px;
  }

  .close-checkout-btn {
    width: 32px; /* Smaller close button to fit nicely inside the bar */
    height: 32px;
    font-size: 1.25rem;
    margin-left: 0; /* Clear left margin to prevent layout push */
  }
}