/**
 * MyBledi Global Mobile Fixes
 * Shared responsive fixes loaded across all pages.
 * Addresses: safe-area insets, touch targets, overflow, accessibility.
 */

/* ─── SAFE AREA SUPPORT ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ─── PREVENT HORIZONTAL OVERFLOW GLOBALLY ─── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── TOUCH TARGET MINIMUM SIZE ─── */
@media (max-width: 768px) {
  a, button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
    /* Only enforce min-height, don't break layouts with min-width */
  }

  /* Fix nav padding for mobile */
  nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ensure footer links are tappable */
  footer a, .footer a, .footer-links a {
    padding: 0.35rem 0;
    display: inline-block;
  }
}

/* ─── MOBILE TYPOGRAPHY FIXES ─── */
@media (max-width: 480px) {
  /* Prevent font inflation on mobile browsers */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Ensure inputs are large enough for touch */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px;
  }
}

/* ─── GRID FIXES FOR VERY SMALL SCREENS ─── */
@media (max-width: 360px) {
  /* Benefits grid: force 1 column on very small screens */
  .benefits-grid {
    grid-template-columns: 1fr !important;
  }

  /* Profiles grid: force 1 column */
  .profiles-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats: force 1 column */
  .stats-row {
    grid-template-columns: 1fr !important;
  }

  /* City pills: smaller on tiny screens */
  .city-pill {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  /* Price cards: reduce padding */
  .pricing-card {
    padding: 1.5rem !important;
  }

  /* Trust bar: stack vertically */
  .trust-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .trust-item {
    display: flex !important;
  }
}

/* ─── LANDING PAGE SPECIFIC MOBILE FIXES ─── */
@media (max-width: 480px) {
  /* Hero: reduce ebook promo card size */
  .ebook-promo {
    padding: 1.5rem 1.25rem;
  }
  .ebook-promo-mockup {
    width: 90px;
    height: 120px;
  }
  .ebook-promo h3 {
    font-size: 0.9rem;
  }

  /* Footer: make links wrap nicely */
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
}

/* ─── EBOOK PAGE MOBILE FIXES ─── */
@media (max-width: 600px) {
  .lead-form {
    flex-direction: column;
  }
  .lead-form input[type="email"] {
    width: 100%;
    min-width: unset;
  }
  .lead-form .btn-lead {
    width: 100%;
    text-align: center;
  }
  .chapter-item {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .chapter-badge {
    margin-left: 0;
  }
}

/* ─── ANNUAIRE MOBILE FIXES ─── */
@media (max-width: 480px) {
  /* Filter buttons: horizontal scroll instead of wrap */
  .filter-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .filter-group::-webkit-scrollbar {
    display: none;
  }

  /* Cards: full width */
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pro card: reduce padding */
  .pro-card {
    padding: 1.25rem;
  }
}

/* ─── CALCULATEUR MOBILE FIXES ─── */
@media (max-width: 480px) {
  /* Ensure results sections don't overflow */
  .result-card, .budget-card {
    overflow-x: auto;
  }

  /* Tables: allow horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── MODAL/POPUP MOBILE FIXES ─── */
@media (max-width: 768px) {
  /* Ensure modals are properly positioned on mobile */
  .modal, [role="dialog"] {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* ─── BETA BANNER FIX ─── */
/* The beta banner was added in normal document flow but the nav is position:fixed
   at top:0. This caused the banner to be hidden behind the nav while still pushing
   content down, creating a ~42px misalignment gap on all pages with the banner.
   Fix: make the banner fixed above the nav, adjust nav and body spacing via JS. */
#beta-banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 110 !important;
}

/* ─── EXCHANGE RATE WIDGET ─── */
/* EUR/DZD rate widget in navbar. Always visible on all viewports. */
/* Desktop: "Taux : 1€ = X DZD (officiel) = Y DZD (parallèle)" */
/* Mobile: compact pill showing just numbers, no labels */
.exchange-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-light, #4a4a4a);
  background: rgba(0, 98, 51, 0.06);
  border: 1px solid rgba(0, 98, 51, 0.15);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  cursor: default;
  white-space: nowrap;
  transition: background 0.2s;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  line-height: 1.3;
}
.exchange-widget:hover {
  background: rgba(0, 98, 51, 0.1);
}
.exchange-widget__label {
  font-weight: 600;
  color: #006233;
  font-size: 0.7rem;
}
.exchange-widget__rates {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.exchange-widget__rate {
  font-weight: 600;
}
.exchange-widget__rate small {
  font-size: 0.62rem;
  font-weight: 400;
  opacity: 0.8;
}
.exchange-widget__rate em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.62rem;
  opacity: 0.75;
}
.exchange-widget__official {
  color: var(--ink, #1a1a1a);
}
.exchange-widget__sep {
  color: var(--ink-faint, #888);
  font-size: 0.7rem;
  font-weight: 400;
}
.exchange-widget__parallel {
  color: #c4704b; /* terracotta — signals unofficial/market rate */
}
.exchange-widget--loading {
  opacity: 0.5;
  font-style: normal;
  letter-spacing: 0.03em;
}
.exchange-widget--unavailable {
  opacity: 0.45;
  font-size: 0.7rem;
}

/* Tablet/small desktop: wrap rates onto two lines inside the pill */
@media (max-width: 1024px) {
  .exchange-widget {
    white-space: normal;
    max-width: 230px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 0.68rem;
  }
  .exchange-widget__rates {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Mobile (≤768px): compact pill — hide "Taux:" label, hide "(officiel)"/"(parallèle)" */
/* and "DZD" text. Show just "148 | 279" style numbers. Always visible. */
@media (max-width: 768px) {
  #exchange-widget-container {
    order: -1; /* move widget before hamburger in flex layout */
  }
  .exchange-widget {
    padding: 0.2rem 0.45rem;
    font-size: 0.65rem;
    gap: 0.15rem;
    border-radius: 5px;
    max-width: none;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .exchange-widget__label {
    display: none; /* hide "Taux :" label on mobile */
  }
  .exchange-widget__rates {
    flex-direction: row;
    gap: 0.2rem;
    align-items: center;
  }
  .exchange-widget__rate small {
    display: none; /* hide "DZD" on mobile */
  }
  .exchange-widget__rate em {
    display: none; /* hide "(officiel)" / "(parallèle)" on mobile */
  }
  .exchange-widget__sep {
    display: inline;
    font-size: 0.55rem;
  }
}

/* Small phones (≤400px): even more compact but STILL VISIBLE */
@media (max-width: 400px) {
  .exchange-widget {
    padding: 0.15rem 0.35rem;
    font-size: 0.6rem;
    gap: 0.1rem;
  }
}

/* Tiny screens (≤320px): absolute minimum, still visible */
@media (max-width: 320px) {
  .exchange-widget {
    padding: 0.12rem 0.25rem;
    font-size: 0.55rem;
  }
}

/* ─── PRINT STYLES (hide mobile-only elements) ─── */
@media print {
  #bledi-chat-widget,
  #pwa-install-banner,
  #pwa-ios-tooltip,
  .mobile-menu-overlay,
  .mobile-menu-toggle {
    display: none !important;
  }
}