/**
 * Baby Juul App V6.03 - Styles
 * Extracted from V5.2 for better maintainability
 */

/* ============================================================================
   FONTS
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Capucine Basic';
  src: url('../fonts/CapucineBasic.woff2') format('woff2'),
       url('../fonts/CapucineBasic.woff') format('woff'),
       url('../fonts/CapucineBasic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */
html {
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
  /* Background is set by JavaScript based on theme */
  background-attachment: fixed;
}

body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
  /* Background is set by JavaScript based on theme */
  background-attachment: fixed;
}

script[type="text/babel"] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

.status-bar-area {
  display: none !important;
}

/* iOS 26.1 status bar color support */
@supports (color: var(--status-bar-color)) {
  :root {
    --status-bar-color: #ef4444;
  }
  .status-bar-area {
    background-color: var(--status-bar-color) !important;
  }
}

#root {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0;
  padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  max-width: 100vw;
  box-sizing: border-box;
}

input, textarea {
  font-size: 16px !important;
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 0px;
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
.dark {
  background: transparent;
}

.dark .bg-gray-50 { background: #1f2937; }
.dark .bg-white { background: #374151; }
.dark .text-gray-800 { color: #f9fafb; }
.dark .text-gray-700 { color: #d1d5db; }
.dark .text-gray-600 { color: #9ca3af; }
.dark .text-gray-500 { color: #6b7280; }
.dark .border-gray-300 { border-color: #4b5563; }
.dark .border-gray-200 { border-color: #374151; }

/* Background is controlled by JavaScript based on selected theme */
/* System preference is only used for initial load in index.html */

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
.btn-success {
  animation: btn-success-glow 1.5s ease-out;
  background: linear-gradient(45deg, #22c55e, #16a34a) !important;
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.7), 0 0 50px rgba(34, 197, 94, 0.4);
}

@keyframes btn-success-glow {
  0% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
  25% { transform: scale(1.1); box-shadow: 0 0 30px rgba(34,197,94,0.8), 0 0 60px rgba(34,197,94,0.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 35px rgba(34,197,94,0.9), 0 0 70px rgba(34,197,94,0.6); }
  75% { transform: scale(1.06); box-shadow: 0 0 25px rgba(34,197,94,0.7), 0 0 50px rgba(34,197,94,0.4); }
  100% { transform: scale(1.05); box-shadow: 0 0 20px rgba(34,197,94,0.6), 0 0 40px rgba(34,197,94,0.3); }
}

/* Info-knop in Vandaag: subtiele aanduiding dat er uitleg is (één keer klikken) */
.info-btn-highlight {
  box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.5), 0 0 12px rgba(192, 132, 252, 0.25);
  animation: info-btn-glow 2s ease-in-out infinite;
}
.dark .info-btn-highlight {
  animation-name: info-btn-glow-dark;
}
@keyframes info-btn-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.5), 0 0 12px rgba(192, 132, 252, 0.25); }
  50% { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.7), 0 0 16px rgba(192, 132, 252, 0.35); }
}
@keyframes info-btn-glow-dark {
  0%, 100% { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.4), 0 0 14px rgba(192, 132, 252, 0.2); }
  50% { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.55), 0 0 18px rgba(192, 132, 252, 0.3); }
}

@supports (-webkit-touch-callout: none) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  input, textarea {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* Collapsible content */
.collapsible-content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.collapsible-content.expanded {
  max-height: 5000px !important;
  opacity: 1 !important;
  padding-top: 1rem !important;
  transition: max-height 0.4s ease-in, opacity 0.3s ease-in, padding 0.3s ease-in;
}

.collapsible-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.collapsible-header:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.dark .collapsible-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.chevron-icon {
  transition: transform 0.3s ease;
}

.chevron-icon.expanded {
  transform: rotate(180deg);
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Laatste voeding timer styling removed - snake effect was too thin */

@keyframes fade-in-up-subtitle {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 0.9; transform: translateY(0); }
}

@keyframes fade-in-up-version {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 0.6; transform: translateY(0); }
}

@keyframes rotate-border {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotate-glow-border {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.8;
    filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.6)) drop-shadow(0 0 16px rgba(168, 85, 247, 0.4));
  }
  50% {
    transform: rotate(180deg) scale(1.02);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(244, 114, 182, 0.9)) drop-shadow(0 0 24px rgba(168, 85, 247, 0.7)) drop-shadow(0 0 36px rgba(96, 165, 250, 0.5));
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.8;
    filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.6)) drop-shadow(0 0 16px rgba(168, 85, 247, 0.4));
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-subtle {
  0%, 100% { transform: translateY(0px) rotate(-8deg); }
  50% { transform: translateY(-8px) rotate(-6deg); }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.4), 0 0 40px rgba(139, 92, 246, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(236, 72, 153, 0.8), 0 0 80px rgba(139, 92, 246, 0.6);
    transform: scale(1.05);
  }
}

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

@keyframes bubble-pop {
  0% { opacity: 0; transform: scale(0.3) translateY(10px); filter: blur(4px); }
  50% { transform: scale(1.1) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes bubble-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes energy-flow {
  0% { transform: translateX(-100%) skewX(-20deg); opacity: 0; }
  10% { opacity: 0.8; }
  50% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateX(300%) skewX(-20deg); opacity: 0; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Logo rotating border */
.logo-rotating-border {
  animation: rotate-glow-border 3s linear infinite;
  background: conic-gradient(from 0deg, #f472b6, #ec4899, #a78bfa, #8b5cf6, #60a5fa, #3b82f6, #a78bfa, #f472b6);
  border-radius: 50%;
  position: absolute;
  inset: -6px;
  z-index: 0;
  padding: 6px;
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff calc(100% - 6px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff calc(100% - 6px));
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.5), 0 0 40px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Slide down animation */
.slide-down {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
              margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

.slide-down > * {
  min-height: 0;
  overflow: hidden;
}

.slide-down.expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  margin-top: 1rem;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   SYNC ANIMATIONS
   ============================================================================ */
.sync-pulse {
  animation: sync-pulse 2s ease-in-out infinite;
}

@keyframes sync-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    transform: scale(1.02);
  }
}

@keyframes glowing-border-blue {
  0% { border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
  50% { border-color: rgba(59, 130, 246, 0.8); box-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 0 25px rgba(59, 130, 246, 0.3); }
  100% { border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
}

@keyframes glowing-border-orange {
  0% { border-color: rgba(251, 146, 60, 0.3); box-shadow: 0 0 5px rgba(251, 146, 60, 0.3); }
  50% { border-color: rgba(251, 146, 60, 0.8); box-shadow: 0 0 15px rgba(251, 146, 60, 0.6), 0 0 25px rgba(251, 146, 60, 0.3); }
  100% { border-color: rgba(251, 146, 60, 0.3); box-shadow: 0 0 5px rgba(251, 146, 60, 0.3); }
}

@keyframes glowing-border-red {
  0% { border-color: rgba(239, 68, 68, 0.3); box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }
  50% { border-color: rgba(239, 68, 68, 0.8); box-shadow: 0 0 15px rgba(239, 68, 68, 0.6), 0 0 25px rgba(239, 68, 68, 0.3); }
  100% { border-color: rgba(239, 68, 68, 0.3); box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }
}

.time-indicator-glow {
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  border: 2px solid;
}

.time-indicator-glow-blue {
  animation: glowing-border-blue 2s ease-in-out infinite;
  border-color: rgba(59, 130, 246, 0.3);
}

.time-indicator-glow-orange {
  animation: glowing-border-orange 2s ease-in-out infinite;
  border-color: rgba(251, 146, 60, 0.3);
}

.time-indicator-glow-red {
  animation: glowing-border-red 2s ease-in-out infinite;
  border-color: rgba(239, 68, 68, 0.3);
}

/* ============================================================================
   HEADER & NAVIGATION
   ============================================================================ */
.header-buttons-container {
  flex-wrap: nowrap !important;
  overflow-x: visible !important;
  gap: 0.75rem !important;
}

.header-buttons-container button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: 44px !important;
  min-height: 44px !important;
  touch-action: manipulation !important;
}

@media screen and (max-width: 480px) {
  .header-buttons-container {
    gap: 0.5rem !important;
  }
  .header-buttons-container button {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .header-buttons-container button .hidden {
    display: none !important;
  }
  .header-buttons-container button .sm\:hidden {
    display: block !important;
  }
  .header-buttons-container button .sm\:inline {
    display: none !important;
  }
}

/* Simple header bar */
.baby-juul-header-bar {
  position: relative !important;
  width: 100% !important;
  height: 2.5rem !important;
  background: transparent !important;
  backdrop-filter: blur(20px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* iOS Bottom Navigation Bar */
.ios-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: calc(65px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-top: 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  z-index: 10000 !important;
  min-height: 65px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Dark mode navigation bar */
.dark .ios-bottom-nav,
.ios-bottom-nav.dark {
  background: rgba(0, 0, 0, 0.85) !important;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -0.5px 0 rgba(255, 255, 255, 0.1), 0 -1px 3px rgba(0, 0, 0, 0.5) !important;
}

.dark .ios-bottom-nav .ios-nav-button-icon,
.ios-bottom-nav.dark .ios-nav-button-icon {
  color: rgba(255, 255, 255, 1) !important;
}

.dark .ios-bottom-nav .ios-nav-button-icon svg,
.ios-bottom-nav.dark .ios-nav-button-icon svg {
  color: rgba(255, 255, 255, 1) !important;
  stroke: rgba(255, 255, 255, 1) !important;
}

.dark .ios-bottom-nav .ios-nav-button-label,
.ios-bottom-nav.dark .ios-nav-button-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Light mode navigation bar */
.ios-bottom-nav:not(.dark) {
  background: rgba(255, 255, 255, 0.85) !important;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.1), 0 -1px 3px rgba(0, 0, 0, 0.1) !important;
}

.ios-bottom-nav:not(.dark) .ios-nav-button-icon {
  color: rgba(0, 0, 0, 0.8) !important;
}

.ios-bottom-nav:not(.dark) .ios-nav-button-icon svg {
  color: rgba(0, 0, 0, 0.8) !important;
  stroke: rgba(0, 0, 0, 0.8) !important;
}

.ios-bottom-nav:not(.dark) .ios-nav-button-label {
  color: rgba(0, 0, 0, 0.7) !important;
}

.ios-nav-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}

.ios-nav-button:active {
  opacity: 0.6 !important;
}

.ios-nav-button-icon {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.ios-nav-button-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.ios-bottom-nav.dark .ios-nav-button-icon {
  color: rgba(255, 255, 255, 1) !important;
}

.ios-bottom-nav.dark .ios-nav-button-icon svg {
  color: rgba(255, 255, 255, 1) !important;
  stroke: rgba(255, 255, 255, 1) !important;
}

.ios-bottom-nav.dark .ios-nav-button-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================================
   USER MENU
   ============================================================================ */
.user-menu-container {
  position: relative;
  overflow: visible;
}

.user-menu-dropdown {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  max-width: calc(100vw - 2rem) !important;
  width: 320px !important;
  min-width: 280px !important;
  margin: 0 !important;
  z-index: 10001 !important;
  border: 2px solid !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

@media screen and (max-width: 428px) {
  .user-menu-dropdown {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 280px !important;
    z-index: 10001 !important;
  }
}

@media screen and (max-width: 390px) {
  .user-menu-dropdown {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 260px !important;
    z-index: 10001 !important;
  }
}

@media screen and (max-width: 375px) {
  .user-menu-dropdown {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 240px !important;
    z-index: 10001 !important;
  }
}

/* ============================================================================
   RESPONSIVE - iPhone 7, 8, SE (375px width)
   ============================================================================ */
@media screen and (max-width: 375px) and (min-width: 320px) {
  .recommendations-scrollable {
    max-height: 250px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .text-4xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.25rem !important; }
  .text-2xl { font-size: 1rem !important; }
  .text-xl { font-size: 0.875rem !important; }
  .text-lg { font-size: 0.8125rem !important; }
  .text-base { font-size: 0.75rem !important; }
  .text-sm { font-size: 0.6875rem !important; }
  .p-6 { padding: 1rem !important; }
  .p-4 { padding: 0.75rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-2 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
  .space-y-4 > * + * { margin-top: 2rem !important; }
  .space-y-6 > * + * { margin-top: 2.5rem !important; }
  .space-y-8 > * + * { margin-top: 3rem !important; }
  .space-y-10 > * + * { margin-top: 3.5rem !important; }
  .space-y-3 > * + * { margin-top: 1rem !important; }
  .px-3 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .mb-6 { margin-bottom: 1rem !important; }
  .mb-4 { margin-bottom: 0.75rem !important; }
  .mb-3 { margin-bottom: 1rem !important; }
  .mb-2 { margin-bottom: 0.375rem !important; }
  .gap-4 { gap: 0.5rem !important; }
  .gap-6 { gap: 0.75rem !important; }
  .gap-3 { gap: 0.375rem !important; }
  .flex.items-center.space-x-2 { flex-wrap: wrap !important; gap: 0.375rem !important; }
  .flex.items-center.space-x-2 button { padding: 0.25rem 0.5rem !important; font-size: 0.6875rem !important; }
  .space-x-2 > input { flex: 1 !important; min-width: 0 !important; padding: 0.5rem !important; }
  .space-x-2 > button { flex-shrink: 0 !important; padding: 0.5rem 0.75rem !important; font-size: 0.75rem !important; }
  .flex.items-center.justify-between { flex-wrap: wrap !important; gap: 0.375rem !important; }
  .pt-16 { padding-top: 2rem !important; }
  .rounded-xl { border-radius: 0.5rem !important; }
  .shadow-md { box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.06) !important; }
  .w-6 { width: 1rem !important; }
  .h-6 { height: 1rem !important; }
  .w-5 { width: 0.875rem !important; }
  .h-5 { height: 0.875rem !important; }
  .w-4 { width: 0.75rem !important; }
  .h-4 { height: 0.75rem !important; }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.375rem !important; }
  .grid-cols-4 > div { padding: 0.5rem !important; min-width: 0 !important; }
  .grid-cols-4 .text-base { font-size: 0.875rem !important; }
  .grid-cols-4 .text-xs { font-size: 0.6875rem !important; }
  .grid-cols-4 p { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  * { max-width: 100% !important; word-wrap: break-word !important; }
  img, video { max-width: 100% !important; height: auto !important; }
  button, input, select, textarea { max-width: 100% !important; }
}

/* ============================================================================
   RESPONSIVE - iPhone 7/8/SE Zoomed Mode (320px width)
   ============================================================================ */
@media screen and (max-width: 320px) {
  .recommendations-scrollable {
    max-height: 200px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .text-4xl { font-size: 1.25rem !important; }
  .text-3xl { font-size: 1.125rem !important; }
  .text-2xl { font-size: 0.875rem !important; }
  .text-xl { font-size: 0.8125rem !important; }
  .text-lg { font-size: 0.75rem !important; }
  .text-base { font-size: 0.6875rem !important; }
  .text-sm { font-size: 0.625rem !important; }
  .p-6 { padding: 0.75rem !important; }
  .p-4 { padding: 0.5rem !important; }
  .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .py-3 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
  .py-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .space-y-4 > * + * { margin-top: 2rem !important; }
  .space-y-6 > * + * { margin-top: 2.5rem !important; }
  .space-y-8 > * + * { margin-top: 3rem !important; }
  .space-y-10 > * + * { margin-top: 3.5rem !important; }
  .space-y-3 > * + * { margin-top: 1rem !important; }
  .px-3 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
  .mb-6 { margin-bottom: 0.75rem !important; }
  .mb-4 { margin-bottom: 0.5rem !important; }
  .mb-3 { margin-bottom: 0.375rem !important; }
  .mb-2 { margin-bottom: 0.25rem !important; }
  .gap-4 { gap: 0.375rem !important; }
  .gap-6 { gap: 0.5rem !important; }
  .gap-3 { gap: 0.25rem !important; }
  .flex.items-center.space-x-2 { flex-wrap: wrap !important; gap: 0.125rem !important; }
  .flex.items-center.space-x-2 button { padding: 0.125rem 0.375rem !important; font-size: 0.625rem !important; }
  .space-x-2 > input { flex: 1 !important; min-width: 0 !important; padding: 0.375rem !important; font-size: 0.75rem !important; }
  .space-x-2 > button { flex-shrink: 0 !important; padding: 0.375rem 0.5rem !important; font-size: 0.6875rem !important; }
  .flex.items-center.justify-between { flex-wrap: wrap; gap: 0.25rem; }
  .pt-16 { padding-top: 1.5rem !important; }
  .rounded-xl { border-radius: 0.375rem !important; }
  .shadow-md { box-shadow: 0 1px 2px -1px rgba(0,0,0,0.1) !important; }
  .w-8 { width: 1.25rem !important; }
  .h-8 { height: 1.25rem !important; }
  .w-6 { width: 0.875rem !important; }
  .h-6 { height: 0.875rem !important; }
  .w-5 { width: 0.75rem !important; }
  .h-5 { height: 0.75rem !important; }
  .w-4 { width: 0.625rem !important; }
  .h-4 { height: 0.625rem !important; }
  input, textarea, select { font-size: 12px !important; padding: 0.375rem !important; }
  .bg-white, .bg-gray-50 { padding: 0.5rem !important; }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.25rem !important; }
  .grid-cols-4 > div { padding: 0.375rem !important; min-width: 0 !important; }
  .grid-cols-4 .text-base { font-size: 0.75rem !important; }
  .grid-cols-4 .text-xs { font-size: 0.625rem !important; }
  .grid-cols-4 p { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  * { max-width: 100% !important; word-wrap: break-word !important; }
  img, video { max-width: 100% !important; height: auto !important; }
  button, input, select, textarea { max-width: 100% !important; }
}

/* ============================================================================
   GLOBAL ZOOM PROTECTION
   ============================================================================ */
@media screen {
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  img, svg {
    max-width: 100% !important;
    height: auto !important;
  }
  table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  td, th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}