/* ================================================================
   IPTV Starter Theme — Mobile Responsive (loaded last)
   Breakpoints: 1024 | 768 | 480 | 360
   ================================================================ */

/* ── 1. Global ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { overflow-x: hidden; }

img, video, iframe { max-width: 100%; height: auto; }

.container { padding: 0 16px; }

/* ── 2. Typography scale ────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-title       { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.25 !important; }
  .section-subtitle    { font-size: 15px !important; margin-bottom: 32px !important; }
  .section             { padding: 52px 0 !important; }
  .page-hero-title     { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.2 !important; }
  .page-hero-subtitle  { font-size: 15px !important; }
}

@media (max-width: 480px) {
  .section-title       { font-size: clamp(20px, 5.5vw, 26px) !important; }
  .section             { padding: 40px 0 !important; }
  .container           { padding: 0 14px !important; }
}

/* ── 3. Buttons ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn       { padding: 13px 24px !important; font-size: 14px !important; }
  .btn-lg    { padding: 14px 28px !important; font-size: 15px !important; }
  .hero-buttons { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .hero-buttons .btn { text-align: center !important; justify-content: center !important; }
}

/* ── 4. Header / Nav ────────────────────────────────────────────── */
/* sn-* classes from header.php inline style — just reinforce */
@media (max-width: 900px) {
  .site-nav .sn-links  { display: none !important; }
  .site-nav .sn-hamburger { display: flex !important; }
}
@media (max-width: 480px) {
  .site-nav .sn-inner  { height: 58px !important; padding: 0 14px !important; }
  .site-nav .sn-logo   { font-size: 0.95rem !important; gap: 6px !important; }
  .site-nav .sn-logo img,
  .site-nav .sn-logo .custom-logo { height: 30px !important; }
  body { padding-top: 58px !important; }
}

/* ── 5. Hero section ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero                { padding: 80px 16px 52px !important; min-height: auto !important; }
  .hero-inner          { grid-template-columns: 1fr !important; text-align: center !important; gap: 32px !important; }
  .hero-title          { font-size: clamp(26px, 7vw, 38px) !important; }
  .hero-description    { margin: 0 auto !important; max-width: 520px !important; }
  .hero-buttons        { justify-content: center !important; }
  .hero-trust          { justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; }
  .hero-visual         { max-width: 380px !important; margin: 0 auto !important; }
}

@media (max-width: 480px) {
  .hero                { padding: 72px 14px 44px !important; }
  .hero-title          { font-size: clamp(24px, 6.5vw, 32px) !important; }
  .hero-badge          { font-size: 12px !important; padding: 6px 14px !important; }
}

/* ── 6. Pricing cards ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .plans-grid,
  .pricing-grid        { grid-template-columns: 1fr !important; max-width: 440px !important; margin-left: auto !important; margin-right: auto !important; }
  .pricing-card.featured,
  .plan-box.featured   { transform: none !important; }
}

@media (max-width: 480px) {
  .plans-grid,
  .pricing-grid        { max-width: 100% !important; }
  .pricing-card,
  .plan-box            { padding: 24px 20px !important; }
  .plan-price-big      { font-size: 48px !important; }
  .plan-duration       { font-size: 22px !important; }
  .pricing-tabs        { flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; }
  .pricing-tab         { padding: 8px 14px !important; font-size: 13px !important; }
}

/* ── 7. Pricing page screen tabs ────────────────────────────────── */
@media (max-width: 600px) {
  .pricing-tabs        { gap: 6px !important; padding: 0 !important; }
  .pricing-tab         { flex: 1 !important; text-align: center !important; min-width: 0 !important; }
}

/* ── 8. Comparison table ────────────────────────────────────────── */
@media (max-width: 768px) {
  .compare-wrapper     { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 12px !important; }
  .compare-table       { min-width: 520px !important; font-size: 12px !important; }
  .compare-table th,
  .compare-table td    { padding: 10px 8px !important; }
  .compare-row-label   { min-width: 130px !important; }
}

@media (max-width: 480px) {
  .compare-table       { min-width: 440px !important; font-size: 11px !important; }
}

/* ── 9. Benefits grid ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .benefits-grid       { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; margin-top: 32px !important; }
  .benefit-card        { padding: 22px 18px !important; }
}

@media (max-width: 480px) {
  .benefits-grid       { grid-template-columns: 1fr !important; max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ── 10. Features grid ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .features-grid       { grid-template-columns: 1fr !important; gap: 24px !important; }
  .feature-card        { padding: 24px !important; }
}

/* ── 11. Steps / How it works ───────────────────────────────────── */
@media (max-width: 768px) {
  .steps-grid          { grid-template-columns: 1fr !important; gap: 28px !important; }
  .steps-grid::before  { display: none !important; }
  .proef-steps-grid    { flex-direction: column !important; align-items: center !important; }
  .proef-step-arrow    { transform: rotate(90deg) !important; padding: 4px 0 !important; }
}

/* ── 12. Testimonials ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .testimonials-grid   { grid-template-columns: 1fr !important; max-width: 440px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ── 13. Security / About / Two-col grids ───────────────────────── */
@media (max-width: 768px) {
  .security-grid,
  .about-grid,
  .proef-why-inner,
  .ik2-hero-grid       { grid-template-columns: 1fr !important; gap: 28px !important; }
  .install-layout      { grid-template-columns: 1fr !important; }
  .install-sidebar     { position: static !important; }
}

/* ── 14. Stats bar ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-grid          { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .stat-number         { font-size: 28px !important; }
}

@media (max-width: 480px) {
  .stats-grid          { grid-template-columns: 1fr 1fr !important; }
  .ik2-stats           { padding: 24px 0 !important; }
}

/* ── 15. Knowledge / Blog grid ──────────────────────────────────── */
@media (max-width: 768px) {
  .kb-grid,
  .knowledge-grid      { grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px) {
  .kb-grid             { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 16. Footer ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid         { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center !important; }
  .footer-bottom       { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px !important; }
  .footer-bottom-links { justify-content: center !important; flex-wrap: wrap !important; }
  .footer-payment-icons { justify-content: center !important; flex-wrap: wrap !important; }
  .footer-social       { justify-content: center !important; }
  .site-footer         { padding: 40px 0 !important; }
}

/* ── 17. Gratis-proef page ──────────────────────────────────────── */
@media (max-width: 768px) {
  .proef-hero          { padding: 80px 16px 52px !important; }
  .proef-hero h1       { font-size: clamp(26px, 7vw, 38px) !important; }
  .proef-trust-grid    { gap: 20px !important; }
  .proef-why-inner     { grid-template-columns: 1fr !important; }
  .gp-form             { padding: 28px 20px !important; }
}

@media (max-width: 480px) {
  .proef-hero h1       { font-size: clamp(22px, 6vw, 28px) !important; }
  .proef-cta-btn       { padding: 14px 28px !important; font-size: 15px !important; }
  .proef-trust-grid    { gap: 14px !important; }
  .proef-trust-item strong { font-size: 18px !important; }
}

/* ── 18. Abonnementen page ──────────────────────────────────────── */
@media (max-width: 768px) {
  .abbo-hero           { padding: 60px 16px 40px !important; }
  .abbo-trust-row      { gap: 10px !important; }
  .abbo-trust-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}

@media (max-width: 480px) {
  .abbo-trust-grid     { grid-template-columns: 1fr !important; }
  .abbo-trust-row span { font-size: 12px !important; }
}

/* ── 19. IPTV Kopen page ────────────────────────────────────────── */
@media (max-width: 768px) {
  .ik2-hero            { padding: 80px 16px 48px !important; }
  .ik2-hero-title      { font-size: clamp(24px, 6vw, 34px) !important; line-height: 1.2 !important; }
  .ik2-hero-btns       { flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
  .ik2-hero-trust      { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; font-size: 13px !important; }
  .ik2-stats           { padding: 28px 0 !important; }
}

/* ── 20. Installatiegids page ───────────────────────────────────── */
@media (max-width: 768px) {
  .install-steps       { padding: 0 !important; }
  .install-step        { padding: 20px 16px !important; }
  .install-nav         { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .install-nav-link    { font-size: 12px !important; padding: 7px 10px !important; }
}

/* ── 21. Plan WhatsApp button mobile ────────────────────────────── */
@media (max-width: 480px) {
  .plan-wa-btn,
  a[href*="wa.me"][style*="plan"] { font-size: 12px !important; padding: 9px !important; }
}

/* ── 22. Floating WhatsApp button ───────────────────────────────── */
@media (max-width: 480px) {
  .wa-float { bottom: 16px !important; right: 16px !important; padding: 13px !important; border-radius: 50% !important; }
  .wa-float span { display: none !important; }
}

/* ── 23. Checkout page ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-checkout .col2-set { width: 100% !important; float: none !important; }
  .woocommerce-checkout #order_review { width: 100% !important; float: none !important; margin-top: 28px !important; }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100% !important; float: none !important; }
  .iptv-checkout-grid { grid-template-columns: 1fr !important; }
}

/* ── 24. WooCommerce general ────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: 1fr !important; }
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce .cart-collaterals .cross-sells { width: 100% !important; float: none !important; }
}

/* ── 25. Over Ons page ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .about-hero-title    { font-size: clamp(24px, 6vw, 36px) !important; }
  .about-grid          { grid-template-columns: 1fr !important; }
  .about-values-grid   { grid-template-columns: 1fr !important; }
  .about-quote p       { font-size: 15px !important; }
  .ao-team-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}

@media (max-width: 480px) {
  .ao-team-grid        { grid-template-columns: 1fr !important; }
}

/* ── 26. Privacy / Terms / AV pages ────────────────────────────── */
@media (max-width: 768px) {
  .pb-hero             { padding: 80px 16px 48px !important; }
  .pb-hero-title       { font-size: clamp(24px, 6vw, 36px) !important; }
  .pb-content          { padding: 32px 20px !important; }
  .pb-section h2       { font-size: 18px !important; }
}

/* ── 27. Fix horizontal overflow ────────────────────────────────── */
@media (max-width: 768px) {
  .logos-track         { gap: 24px !important; }
  .trust-items         { gap: 16px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .trust-item          { font-size: 12px !important; }
  .hero-engines        { flex-wrap: wrap !important; gap: 8px !important; }
  .engine-pills        { flex-wrap: wrap !important; justify-content: center !important; }
  .cta-features        { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
}

/* ── 28. 360px micro fixes ──────────────────────────────────────── */
@media (max-width: 360px) {
  .container           { padding: 0 12px !important; }
  .section-title       { font-size: 20px !important; }
  .btn                 { font-size: 13px !important; padding: 12px 20px !important; }
  .plan-price-big      { font-size: 42px !important; }
  .hero-title          { font-size: 22px !important; }
}