/* ============================================================================ */
/* GOOD FOOD NC - UNIFIED EXTERNAL CSS v4.0                                    */
/* Consolidated styles for 6 scripts with mobile-first optimization            */
/* ============================================================================ */
/*
  SCRIPTS COVERED:
  1. Master Script (banners, preloader, network alerts)
  2. Reload Executor (lockdown overlay, progress bar)
  3. Emergency Blocker (modal, overlay)
  4. Cart Scroll Lock (body lock mechanism)
  5. Existing Banner CSS (safe areas)
  6. Tilda-specific fixes
  
  TARGET: 98% mobile traffic
  PLATFORM: Tilda
  REQUIRES: 
*/

/* ============================================================================ */
/* 1. GLOBAL OPTIMIZATION                                                       */
/* ============================================================================ */

/* Performance optimizations for smooth animations */
.gfnc-banner,
.network-banner,
.banner-content,
#gfnc-preloader,
#reload-overlay,
#shop-block-modal,
.emergency-overlay {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent iOS rubber-band scrolling */
html, body {
  overscroll-behavior-y: none;
}

/* GPU acceleration for Tilda cart inputs */
.t-store__cartwin input,
.t-store__cartwin textarea,
.t-store__cartwin button {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ============================================================================ */
/* 2. Z-INDEX HIERARCHY (Proper stacking order)                                */
/* ============================================================================ */
/*
  1000000 → Reload Overlay (CRITICAL LOCKDOWN - highest priority)
  999999  → Network Banner (temporary connection alerts)
  999998  → Network Stripe (persistent offline indicator)
  99999   → Preloader (language selection on first visit)
  9999    → Emergency Modal Dialog
  9998    → Emergency Overlay Background
  9999    → Language Banner
  9998    → Work Hours Banner
*/

/* ============================================================================ */
/* 3. KEYFRAME ANIMATIONS (Clean, professional - NO BOUNCING)                  */
/* ============================================================================ */

/* Banner fade in (subtle) */
@keyframes bannerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Banner content slide up (smooth, no bounce) */
@keyframes slideUpSmooth {
  from { 
    transform: translateY(100%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

/* Network banner slide down from top */
@keyframes slideDown {
  from { 
    transform: translateY(-100%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

/* Network banner slide up (dismiss) */
@keyframes slideUp {
  from { 
    transform: translateY(0);
    opacity: 1;
  }
  to { 
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Network stripe fade in */
@keyframes fadeInStripe {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Network stripe fade out */
@keyframes fadeOutStripe {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Preloader logo fade in */
@keyframes fadeInLogo {
  from { 
    opacity: 0; 
    transform: translateY(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Preloader button slide in */
@keyframes slideInBtn {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Reload progress bar fill */
@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* General fade out */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Desktop variants for network banner (with centering transform) */
@media (min-width: 769px) {
  @keyframes slideDown {
    from { 
      transform: translateX(-50%) translateY(-100%);
      opacity: 0;
    }
    to { 
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideUp {
    from { 
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    to { 
      transform: translateX(-50%) translateY(-100%);
      opacity: 0;
    }
  }
}

/* ============================================================================ */
/* 4. PRELOADER (Language Selection - First Visit)                             */
/* ============================================================================ */

#gfnc-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: white;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

.preloader-logo {
  animation: fadeInLogo 0.8s ease-out;
  margin-bottom: 60px;
  max-width: 150px;
  height: auto;
}

.preloader-btn {
  width: 100%;
  max-width: 320px;
  padding: 18px 24px;
  margin: 8px 0;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: white;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  animation: slideInBtn 0.6s ease-out forwards;
}

.preloader-btn:hover {
  border-color: #1dc4e9;
  background: #f0f9ff;
  transform: translateY(-2px);
}

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

/* ============================================================================ */
/* 5. RELOAD OVERLAY (Critical Lockdown Screen)                                */
/* ============================================================================ */

#reload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  background: #fff;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: all;
  touch-action: none;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.reload-logo {
  max-width: 150px;
  height: auto;
  margin-bottom: 24px;
}

.reload-message {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.4;
}

.reload-progress-container {
  width: 80%;
  max-width: 300px;
  height: 4px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}

.reload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1de9b6 0%, #1dc4e9 100%);
  border-radius: 4px;
  animation: progressFill 1500ms ease-out;
  box-shadow: 0 0 10px rgba(29, 233, 182, 0.5);
}

/* Reload error state buttons */
.reload-retry-btn,
.reload-no-btn {
  width: 100%;
  max-width: 280px;
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin: 6px 0;
}

.reload-retry-btn {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
}

.reload-retry-btn:hover,
.reload-retry-btn:active {
  transform: scale(1.05);
}

.reload-no-btn {
  background: #f3f4f6;
  color: #374151;
}

.reload-no-btn:hover,
.reload-no-btn:active {
  transform: scale(1.05);
}

/* ============================================================================ */
/* 6. EMERGENCY MODAL & OVERLAY                                                 */
/* ============================================================================ */

.emergency-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
  transition: opacity 0.25s ease;
}

#shop-block-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #34D399 0%, #059669 100%);
  color: #fff;
  padding: 28px 22px;
  border-radius: 10px;
  font-family: "Montserrat", "Arial", sans-serif;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  max-width: 420px;
  width: 90%;
  line-height: 1.5;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

#shop-block-modal .close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  cursor: pointer;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  transition: opacity 0.2s ease;
}

#shop-block-modal .close-btn:hover {
  opacity: 0.8;
}

/* ============================================================================ */
/* 7. BOTTOM BANNERS (Language & Work Hours)                                   */
/* ============================================================================ */

/* Ensure fixed positioning even if banner is inside container */
body > .gfnc-banner {
  position: fixed !important;
}

.gfnc-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible !important;
  opacity: 0;
  animation: bannerFadeIn 0.25s ease-out forwards;
}

.gfnc-banner.hidden {
  display: none;
}

/* Banner content container */
.banner-content {
  max-width: 1200px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: visible;
  animation: slideUpSmooth 0.4s ease-out;
  will-change: transform;
}

.banner-text {
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.banner-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Close button (for both banners) */
.close-button {
  position: absolute;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  padding: 0;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.close-button svg {
  width: 18px;
  height: 18px;
  stroke: #374151;
  stroke-width: 2;
  stroke-linecap: round;
}

.close-button:hover {
  opacity: 0.7;
}

.close-button:active {
  opacity: 0.5;
}

/* ============================================================================ */
/* 8. LANGUAGE BANNER (Priority 1)                                             */
/* ============================================================================ */

#languageBanner {
  z-index: 9999;
  background: #e0f2fe; /* Flat light blue */
  /* No border-top */
}

#languageBanner .banner-text {
  color: #0c4a6e; /* Darker for better contrast on flat background */
}

#languageBanner .banner-icon {
  display: none !important;
}

/* Language selection buttons */
.lang-buttons {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.lang-btn {
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  min-width: 120px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ripple effect */
.lang-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.lang-btn:active::before {
  width: 300px;
  height: 300px;
}

.lang-btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  box-shadow: 
    0 4px 12px rgba(14, 165, 233, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.lang-btn-primary:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  transform: translateY(-2px);
}

.lang-btn-secondary {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.lang-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* ============================================================================ */
/* 9. WORK HOURS BANNER (Priority 2)                                           */
/* ============================================================================ */

#workHoursBanner {
  z-index: 9998;
  background: #d1fae5; /* Flat light green */
  /* No border-top */
}

#workHoursBanner .banner-text {
  color: #065f46;
}

/* Urgent state (closing soon) */
#workHoursBanner.urgent {
  background: #fed7aa; /* Flat peach/orange */
  /* No border-top */
}

#workHoursBanner.urgent .banner-text {
  color: #92400e;
}

/* Closed state */
#workHoursBanner.closed {
  background: #e5e7eb; /* Flat gray */
  /* No border-top */
}

#workHoursBanner.closed .banner-text {
  color: #374151;
}

/* Timer display */
.timer {
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 700;
  color: #dc2626;
  margin-left: 6px;
  white-space: nowrap;
}

/* Banner priority logic: Language banner hides work hours banner */
#languageBanner:not(.hidden) ~ #workHoursBanner {
  display: none !important;
}

/* ============================================================================ */
/* 10. NETWORK BANNER (Top - Temporary Alerts)                                 */
/* ============================================================================ */

.network-banner {
  position: fixed;
  top: 0;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  animation: slideDown 0.3s ease-out;
}

/* ============================================================================ */
/* 11. NETWORK STRIPE (Top - Persistent Offline Indicator)                     */
/* ============================================================================ */

#networkStripe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999998;
  background: rgba(239, 68, 68, 0.08);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  color: #991b1b;
  font-size: 11px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  min-height: 20px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeInStripe 0.3s ease-out forwards;
  pointer-events: none;
}

/* ============================================================================ */
/* 12. TILDA CART FIX (iOS Safari scroll-through prevention)                   */
/* ============================================================================ */

.t-store__cartwin.t-store__cartwin-opened,
.t-store__cartwin-opened .t-store__cartwin-wrapper {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
}

.t-store__cartwin.t-store__cartwin-opened {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.t-store__cartwin.t-store__cartwin-opened .t-store__cartwin-content {
  max-height: calc(100vh - 70px) !important;
  max-height: calc(100dvh - 70px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ============================================================================ */
/* 13. TILDA STICKY MENU COMPENSATION (Scroll offset)                          */
/* ============================================================================ */

@media screen and (max-width: 980px) {
  html {
    scroll-padding-top: 85px;
  }
  
  section[id]::before,
  div[id*="iskele-long-beach"]::before {
    content: '';
    display: block;
    height: 85px;
    margin-top: -85px;
    visibility: hidden;
    pointer-events: none;
  }
}

@media screen and (min-width: 981px) {
  html {
    scroll-padding-top: 0;
  }
}

/* ============================================================================ */
/* 14. DESKTOP STYLES (≥769px)                                                 */
/* ============================================================================ */

@media (min-width: 769px) {
  /* Bottom banners - centered, floating */
  .gfnc-banner {
    left: 50%;
    bottom: 24px;
    width: 50%;
    max-width: 800px;
    transform: translateX(-50%);
  }
  
  .banner-content {
    padding: 12px 60px 12px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Lighter shadow */
    /* No border */
  }
  
  .banner-icon {
    width: 14px;
    height: 14px;
  }
  
  /* Close button - centered inside banner */
  .close-button {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }
  
  .close-button:hover {
    opacity: 0.7;
    transform: translateY(-50%);
  }
  
  .close-button:active {
    opacity: 0.5;
    transform: translateY(-50%);
  }
  
  /* Language banner - horizontal layout */
  #languageBanner .banner-content {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  
  #languageBanner .banner-text {
    text-align: center;
    margin-bottom: 0;
  }
  
  .lang-buttons {
    flex-direction: row;
    margin-top: 0;
    gap: 12px;
  }
  
  /* Work hours banner - horizontal layout */
  #workHoursBanner .banner-content {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  
  #workHoursBanner .banner-text {
    text-align: left;
    margin-bottom: 0;
  }
  
  /* Network banner - centered at top */
  .network-banner {
    width: 50%;
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 12px 12px;
  }
}

/* ============================================================================ */
/* 15. MOBILE STYLES (≤768px) - PRIORITY FOR 98% TRAFFIC                       */
/* ============================================================================ */

@media (max-width: 768px) {
  /* Bottom banners - full width at bottom */
  .gfnc-banner {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    top: auto !important;
  }
  
  .banner-content {
    padding: 18px 16px 14px;
    border-radius: 0;
    /* No box-shadow on mobile for flat design */
  }
  
  .banner-icon {
    width: 12px;
    height: 12px;
  }
  
  /* Close button - floating above banner */
  .close-button {
    top: 0;
    right: 12px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95); /* White circle for visibility */
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 32px;
    height: 32px;
  }
  
  .close-button svg {
    width: 18px;
    height: 18px;
    stroke: #1f2937; /* Almost black for contrast with white background */
  }
  
  .close-button:hover,
  .close-button:active {
    opacity: 0.7;
    transform: translateY(-50%);
  }
  
  /* Language banner - vertical layout on mobile */
  #languageBanner .banner-content {
    flex-direction: column;
    align-items: center;
  }
  
  #languageBanner .banner-text {
    text-align: center;
    margin-bottom: 12px;
  }
  
  .lang-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    gap: 8px;
    margin-top: 0;
  }
  
  .lang-btn {
    width: 100%;
    padding: 12px 16px;
  }
  
  /* Work hours banner - HORIZONTAL on mobile (as requested) */
  #workHoursBanner .banner-content {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  
  #workHoursBanner .banner-text {
    text-align: left;
    margin-bottom: 0;
  }
  
  /* Network banner - full width at top */
  .network-banner {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 16px;
  }
  
  /* Network stripe - full width at top */
  #networkStripe {
    min-height: 20px !important;
    padding: 4px 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }
  
  /* Preloader - full screen with padding */
  #gfnc-preloader {
    padding: 20px;
  }
  
  /* Reload overlay - full screen */
  #reload-overlay {
    padding: 20px;
  }
}

/* ============================================================================ */
/* 16. iOS/ANDROID SAFE AREAS (Notch, Home Indicator, Dynamic Island)          */
/* ============================================================================ */

@media (max-width: 768px) {
  /* Bottom banners - safe area for home indicator */
  #workHoursBanner .banner-content,
  #languageBanner .banner-content {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Network banner - safe area for notch */
  .network-banner {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
    min-height: calc(44px + env(safe-area-inset-top, 0px)) !important;
  }
  
  /* Network stripe - safe area for notch */
  #networkStripe {
    padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 4px !important;
    padding-left: max(8px, env(safe-area-inset-left, 8px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 8px)) !important;
  }
  
  /* Reload overlay - safe areas all sides */
  #reload-overlay {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    min-height: -webkit-fill-available !important;
  }
  
  /* Preloader - safe areas all sides */
  #gfnc-preloader {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
    min-height: -webkit-fill-available !important;
  }
}

/* Fallback for older iOS (11.0-11.1) using constant() */
@supports (padding: constant(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    #workHoursBanner .banner-content,
    #languageBanner .banner-content {
      padding-bottom: calc(14px + constant(safe-area-inset-bottom)) !important;
    }
    
    .network-banner {
      padding-top: calc(16px + constant(safe-area-inset-top)) !important;
      min-height: calc(44px + constant(safe-area-inset-top)) !important;
    }
    
    #networkStripe {
      padding-top: calc(4px + constant(safe-area-inset-top)) !important;
    }
    
    #reload-overlay {
      padding-top: constant(safe-area-inset-top) !important;
      padding-bottom: constant(safe-area-inset-bottom) !important;
    }
    
    #gfnc-preloader {
      padding-top: constant(safe-area-inset-top) !important;
      padding-bottom: constant(safe-area-inset-bottom) !important;
    }
  }
}

/* Additional safe area support for browsers with max() support */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    #workHoursBanner .banner-content,
    #languageBanner .banner-content {
      padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px))) !important;
    }
    
    .network-banner {
      padding-top: max(16px, calc(16px + env(safe-area-inset-top, 0px))) !important;
    }
    
    #networkStripe {
      padding-top: max(4px, calc(4px + env(safe-area-inset-top, 0px))) !important;
    }
  }
}

/* ============================================================================ */
/* 17. TINY SCREENS (≤375px) - iPhone SE, small Androids                       */
/* ============================================================================ */

@media (max-width: 375px) {
  .banner-content {
    padding: 16px 14px 12px;
  }
  
  .banner-icon {
    width: 10px;
    height: 10px;
  }
  
  .close-button {
    width: 30px;
    height: 30px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95); /* Keep white background */
  }
  
  .close-button svg {
    width: 16px;
    height: 16px;
  }
  
  .lang-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  /* Timer on separate line for tiny screens */
  .timer {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
  
  .reload-message {
    font-size: 18px;
  }
  
  #shop-block-modal {
    font-size: 16px;
    padding: 24px 18px;
  }
}

/* ============================================================================ */
/* END OF UNIFIED CSS                                                           */
/* ============================================================================ */

/*
COMPATIBILITY:
- iOS Safari 11.2+ (env safe-area-inset)
- iOS Safari 11.0-11.1 (constant safe-area-inset)
- Android Chrome 69+
- All modern browsers
- Tilda platform optimized

TESTED ON:
- iPhone 14 Pro (notch)
- iPhone SE (no notch)
- iPhone 15 Pro Max (Dynamic Island)
- iPad Pro
- Android devices with notches (Samsung, Pixel)

NOTES:
- Requires 
- All z-indexes properly hierarchical
- Mobile-first optimization (98% traffic)
- No bouncing animations (professional food delivery brand)
- Clean, efficient CSS structure
*/