/* ManaMobile — Mobile Responsive Styles */

/* ── Hamburger ──────────────────────────────────────────────────── */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: #333; border-radius: 2px; }

/* ── Tablet: 768px and below ───────────────────────────────────── */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .header { overflow: visible; }
  .header-nav { display: none; width: 100%; flex-direction: column; padding: 12px 0; background: #fff; position: absolute; top: 64px; left: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-bottom: 1px solid #f0f0f0; }
  .header-nav.open { display: flex; }
  .header-nav a { display: block; padding: 12px 20px; font-size: 1rem; color: #333; text-decoration: none; border-bottom: 1px solid #f5f5f5; }
  .header-nav a.btn-header { text-align: center; margin: 8px 20px; padding: 12px; border-bottom: none; }

  .hero { padding: 36px 16px 20px; }
  .hero h1 { font-size: 1.6rem; line-height: 1.3; }
  .hero p { font-size: 0.95rem; }
  .hero-badge { font-size: 0.72rem; padding: 3px 12px; }
  .hero-compare { font-size: 0.82rem; padding: 12px 14px; }

  .feature-strip { gap: 16px; padding: 24px 0; }
  .country-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .country-card { padding: 20px 12px; }
  .country-card .flag { font-size: 2.2rem; }
  .country-card .name { font-size: 0.9rem; }

  .plan-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .plan-card { padding: 18px 12px; }
  .plan-card .data { font-size: 1.3rem; }
  .plan-card .price { font-size: 1.1rem; }

  .btn-buy { width: 100%; display: block; text-align: center; padding: 16px 24px; font-size: 1.05rem; }
  .compare-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { font-size: 0.8rem; min-width: 520px; }
  .compare-table th, .compare-table td { padding: 10px 8px; white-space: nowrap; }
  .steps { flex-direction: column; gap: 14px; }
  .step { padding: 22px 16px; }
  .faq-item { padding: 16px 0; }
  .faq-q { font-size: 0.85rem; }
  .footer { padding: 24px 16px; font-size: 0.72rem; }
  .section-title { font-size: 1.3rem; }
  .section-sub { font-size: 0.85rem; margin-bottom: 24px; }
}

/* ── Phone: 480px and below ────────────────────────────────────── */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.35rem; }
  .hero p { font-size: 0.9rem; }
  .hero { padding: 28px 12px 16px; }

  .country-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { padding: 20px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .plan-card .data { font-size: 1.2rem; }
  .plan-card .price { margin-top: 0; font-size: 1.1rem; }
  .plan-card .perday { width: 100%; margin-top: 6px; }
  .plan-card .badge-popular { top: 8px; right: 8px; }

  .feature-strip { flex-direction: column; gap: 10px; }
  .btn-buy { padding: 16px 20px; }
  .airalo-badge { padding: 12px 16px; font-size: 0.75rem; }
  .container { padding: 0 12px; }
}