/* ==========================================================================
   Responsive Adaptations: 2880x1800 Retina, S24 Ultra, iPhone 17 Pro, Honor Pad 10 & iPad
   ========================================================================== */

/* ---------------------------------------------------------
   1. Ultra-High Resolution Displays (2880x1800, 4K, 5K Retina)
   --------------------------------------------------------- */
@media screen and (min-width: 2000px) {
  :root {
    --container-max: 1800px;
  }

  html {
    font-size: 18px;
  }

  .hero-content {
    max-width: 1280px;
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-main-grid {
    grid-template-columns: 1.6fr 1fr 1.3fr 1.3fr;
  }
}

/* ---------------------------------------------------------
   2. Tablets & Medium Slates: Honor PAD 10, iPad Pro, iPad Air
   (Aspect ratios ~ 16:10, 4:3, 5:3 in range 768px - 1180px)
   --------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1180px) {
  :root {
    --header-height: 72px;
  }

  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .hero-section {
    min-height: 85vh;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quote-calculator-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .calc-summary-card {
    position: static;
  }

  .footer-main-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  /* Touch optimization */
  .btn, .filter-pill, .material-chip, .upload-tab-btn {
    min-height: 48px;
  }
}

/* ---------------------------------------------------------
   3. Next-Gen Flagship Smartphones: Samsung Galaxy S24 Ultra & iPhone 17 Pro
   (High DPI, Tall 19.5:9 & 20:9 Aspect Ratios, Dynamic Island / Notch, Safe Area)
   --------------------------------------------------------- */
@media screen and (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  /* Safe Area Support for iPhone 17 Pro Dynamic Island & Home Indicator */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  .site-header {
    top: env(safe-area-inset-top, 0);
    height: var(--header-height);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .header-container {
    padding: 0 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Mobile Brand Logo Size */
  .brand-logo-img {
    height: 32px !important;
    max-width: 110px !important;
    object-fit: contain !important;
  }

  /* Mobile Header Action Cluster */
  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-shrink: 0 !important;
  }

  /* Mobile Vertical Language Capsule (Height: 40px, Matches Theme & Hamburger Exactly!) */
  .lang-toggle-capsule {
    width: 32px !important;
    height: 40px !important;
    padding: 2.5px 2px !important;
    border-radius: 10px !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .lang-flag-wrapper {
    width: 26px !important;
    height: 16px !important;
  }

  .flag-icon {
    width: 17px !important;
    height: 11px !important;
  }

  .lang-switch-track {
    border-radius: 10px !important;
  }

  .lang-switch-knob {
    top: 2.5px !important;
    left: 2px !important;
    width: 26px !important;
    height: 16px !important;
    border-radius: 7px !important;
  }

  html[lang="en"] .lang-switch-knob {
    transform: translateY(18px) !important;
  }

  /* Mobile-Specific Theme Toggle Button (%5 Scaled Down) */
  .theme-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    font-size: 1.05rem !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .theme-toggle-btn svg {
    width: 19px !important;
    height: 19px !important;
  }

  /* Mobile-Specific Hamburger Button (%5 Scaled Down) */
  .hamburger-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hamburger-line {
    width: 19px !important;
    height: 2px !important;
    margin: 1.8px 0 !important;
  }

  .hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(5.6px) rotate(45deg) !important;
  }

  .hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }

  .hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-5.6px) rotate(-45deg) !important;
  }

  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero-section {
    min-height: 100dvh;
    padding-top: calc(var(--header-height) + 1.5rem);
    padding-bottom: 3.5rem;
  }

  .hero-location-badge {
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
  }

  .hero-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .metric-card {
    padding: 0.85rem 0.6rem;
  }

  .metric-number {
    font-size: 1.35rem;
  }

  .metric-label {
    font-size: 0.72rem;
  }

  /* Mobile Quote Calculator Single-Column Layout (Eliminates Horizontal Overflow) */
  .quote-calculator-container {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  .calc-summary-card {
    position: static !important;
    width: 100% !important;
  }

  .calc-config-box {
    padding: 1.25rem !important;
  }

  .material-selector-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .material-chip {
    padding: 0.6rem 0.4rem !important;
  }

  /* Product Grid Single Column on Mobile */
  .product-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Touch Targets for Mobile Ergonomics */
  .btn {
    min-height: 50px;
    font-size: 1rem;
  }

  /* Mobile WhatsApp Floating Circle Icon - Pinned Perfectly On-Screen */
  .whatsapp-floating-bubble,
  .whatsapp-support-widget {
    position: fixed !important;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0)) !important;
    right: 1rem !important;
    left: auto !important;
    z-index: 1000 !important;
  }

  .whatsapp-trigger-btn {
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45) !important;
  }

  .whatsapp-trigger-btn svg {
    width: 28px !important;
    height: 28px !important;
  }

  .back-to-top-btn {
    position: fixed !important;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0)) !important;
    left: 1rem !important;
    right: auto !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 999 !important;
  }

  .whatsapp-chat-popup,
  .whatsapp-popup-card {
    position: absolute !important;
    width: min(320px, calc(100vw - 2rem)) !important;
    right: 0 !important;
    left: auto !important;
    bottom: 64px !important;
  }

  .kvkk-cookie-bar {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    width: calc(100vw - 2rem);
    padding: 1rem 1.25rem;
  }

  .product-detail-header-bar {
    flex-direction: row;
    padding: 0.75rem 1rem;
  }
}

/* Extra Small Mobile Screens (iPhone SE, Galaxy Fold outer screen, < 380px) */
@media screen and (max-width: 380px) {
  .brand-logo-img {
    height: 28px !important;
    max-width: 95px !important;
  }

  .header-actions {
    gap: 0.35rem !important;
  }

  .theme-toggle-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .hamburger-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .hamburger-line {
    width: 18px !important;
  }

  /* Contact page responsive adaptations */
  .contact-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-layout-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-assurances-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* Tablet range (641px to 1024px) */
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .contact-layout-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .contact-assurances-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------
   4. High DPI / Retina Crisp Rendering Support
   --------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .brand-logo-img,
  .flag-icon,
  .qr-code-svg-box svg {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Reduced Motion User Preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ambient-scroll-canvas {
    display: none;
  }
}