/* Responsive CSS - Pari Betting Theme */

/* Extra Small Devices (phones, < 576px) */
@media (max-width: 575.98px) {
  .header-inner { height: 50px; }
  .site-logo img { height: 32px; }
  .header-right .btn-outline-yellow,
  .header-right .btn-yellow { padding: 4px 10px; font-size: 11px; }
  
  .hero-slider { min-height: 180px; }
  .hero-slide-content { bottom: 16px; left: 16px; }
  .hero-slide-content h2 { font-size: 16px; }
  .hero-slide-content p { font-size: 11px; }
  
  .category-icons { gap: 8px; padding: 12px; }
  .category-icon-item .icon-circle { width: 48px; height: 48px; }
  .category-icon-item .icon-circle img { width: 24px; height: 24px; }
  .category-icon-item span { font-size: 10px; }
  
  .match-card { min-width: 250px; padding: 12px; }
  .match-card-team { font-size: 12px; }
  .odds-btn { font-size: 11px; padding: 6px 2px; min-width: 50px; }
  
  .casino-games-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .casino-games { padding: 0 12px 12px; }
  
  .news-card-image { height: 150px; }
  .news-card-body { padding: 12px; }
  .news-card-title { font-size: 14px; }
  
  .section-title { padding: 12px; }
  .section-title h2 { font-size: 15px; }
  
  .site-footer { padding: 24px 12px 90px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .footer-col h5 { font-size: 13px; }
  .footer-col ul li a { font-size: 12px; }
  
  .single-post-header h1 { font-size: 18px; }
  .single-post-content { font-size: 14px; }
}

/* Small Devices (landscape phones, 576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .casino-games-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-slider { min-height: 220px; }
  .match-card { min-width: 270px; }
}

/* Medium Devices (tablets, 768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .casino-games-grid { grid-template-columns: repeat(4, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-slider { min-height: 300px; margin: 16px; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
  .header-nav .nav-menu { gap: 16px; }
  .header-nav .nav-menu li a { font-size: 12px; }
}

/* Large Devices (desktops, 992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .casino-games-grid { grid-template-columns: repeat(5, 1fr); }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-slider { min-height: 380px; }
  .container { padding: 0 24px; }
}

/* Extra Large Devices (large desktops, >= 1200px) */
@media (min-width: 1200px) {
  .casino-games-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .news-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hero-slider { min-height: 420px; }
  .hot-matches .matches-scroll { gap: 16px; }
  .match-card { min-width: 320px; }
  .category-icons { gap: 16px; padding: 20px 16px; }
  .category-icon-item .icon-circle { width: 64px; height: 64px; }
  .category-icon-item .icon-circle img { width: 32px; height: 32px; }
}

/* Touch Device Adjustments */
@media (hover: none) {
  .match-card:hover,
  .game-card:hover,
  .news-card:hover { transform: none; }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-slider { min-height: 150px; }
  .bottom-tab-bar { padding: 4px 0; }
  .tab-item { padding: 4px 4px; }
  .tab-item i { font-size: 16px; }
  .tab-item span { font-size: 9px; }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-tab-bar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  @media (min-width: 768px) {
    body { padding-bottom: 0; }
  }
}

/* Print styles */
@media print {
  .app-banner,
  .bottom-tab-bar,
  .site-header,
  .mobile-menu-overlay { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .site-footer { background: #fff; border-top: 1px solid #ccc; }
}