/*
 * ============================================================
 *  mobile-fixes.css — Vector Viral Mobile Optimization
 *  Fixes all responsive/mobile issues site-wide
 *  Author: Vector Viral Dev
 *  Last Updated: 2026-07-29
 * ============================================================
 */

/* ─── 1. GLOBAL OVERFLOW & BOX-SIZING ─────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

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

/* ─── 2. BUTTONS — fix min-width overflow on tiny screens ─── */
.gt-theme-btn {
  min-width: unset;
  width: auto;
  white-space: nowrap;
  padding: 14px 22px;
  font-size: 15px;
}

@media (max-width: 400px) {
  .gt-theme-btn {
    font-size: 13px;
    padding: 12px 16px;
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}

/* ─── 3. HERO SECTION — fix hardcoded inline padding/font ─── */
/* Override the inline style="padding: 180px 0 100px" */
.gt-hero-section {
  padding-top: 180px !important;
  padding-bottom: 100px !important;
}

@media (max-width: 991px) {
  .gt-hero-section {
    padding-top: 140px !important;
    padding-bottom: 70px !important;
    text-align: center;
  }
  .gt-hero-section .gt-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .gt-hero-section {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }
}

@media (max-width: 575px) {
  .gt-hero-section {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
  /* Override inline font-size: 56px on h1 in hero */
  .gt-hero-section h1 {
    font-size: 36px !important;
    line-height: 1.25 !important;
  }
  .gt-hero-section p {
    font-size: 14px !important;
  }
}

@media (max-width: 400px) {
  .gt-hero-section h1 {
    font-size: 28px !important;
  }
}

/* Hero buttons — stack vertically on mobile */
.hero-btns {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

@media (max-width: 575px) {
  .hero-btns {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
  }
  .hero-btns .gt-theme-btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}

/* Hero image — hide on very small screens to save space */
@media (max-width: 575px) {
  .hero-image {
    display: none;
  }
}

/* ─── 4. STATS BAR — wrap columns on mobile ──────────────── */
@media (max-width: 575px) {
  .gt-hero-section + section .row {
    gap: 8px 0;
  }
  .gt-hero-section + section h2 {
    font-size: 32px !important;
  }
}

/* ─── 5. SECTION PADDING — tighter on mobile ─────────────── */
.section-padding {
  padding: 120px 0;
}
@media (max-width: 1199px) {
  .section-padding {
    padding: 100px 0;
  }
}
@media (max-width: 991px) {
  .section-padding {
    padding: 80px 0;
  }
}
@media (max-width: 767px) {
  .section-padding {
    padding: 60px 0;
  }
}
@media (max-width: 575px) {
  .section-padding {
    padding: 50px 0;
  }
}
@media (max-width: 400px) {
  .section-padding {
    padding: 40px 0;
  }
}

/* ─── 6. HEADER — mobile menu refinements ────────────────── */
#header-sticky .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

/* Logo size on small screens */
@media (max-width: 575px) {
  .header-logo img {
    max-height: 36px;
    width: auto;
  }
}

/* Header right icons — adequate tap target size (48px) */
.header-right-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ─── 7. NAVIGATION — mobile menu tap targets ────────────── */
#mobile-menu li a {
  padding: 10px 0;
  display: block;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ─── 8. NEWSLETTER SECTION ──────────────────────────────── */
@media (max-width: 575px) {
  .gt-newsletter-wrapper {
    padding: 24px !important;
    flex-direction: column;
    align-items: flex-start;
  }
  .gt-newsletter-wrapper h4 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
  .gt-newsletter-wrapper form {
    width: 100%;
    max-width: 100%;
  }
  .gt-newsletter-wrapper .form-clt input {
    font-size: 14px;
    padding: 14px;
  }
  .gt-newsletter-wrapper .form-clt .gt-theme-btn {
    position: static !important;
    margin-top: 12px;
    width: 100%;
    max-width: 100%;
  }
}

/* ─── 9. FOOTER ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .gt-footer-widget-wrapper .row {
    gap: 30px 0;
  }
  .footer-bottom .footer-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .gt-footer-list {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

@media (max-width: 575px) {
  .gt-social-icon {
    gap: 10px;
    flex-wrap: wrap;
  }
  .gt-social-icon a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ─── 10. CARDS & GRIDS ──────────────────────────────────── */
/* Game, service, blog cards — ensure no overflow */
@media (max-width: 575px) {
  [style*="padding: 30px"],
  [style*="padding: 20px"] {
    padding: 16px !important;
  }
}

/* ─── 11. TABLES — horizontal scroll ────────────────────── */
table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

/* ─── 12. CONTACT & FORM ELEMENTS ───────────────────────── */
input,
textarea,
select {
  font-size: 16px !important; /* Prevents iOS zoom on focus (must be ≥16px) */
  max-width: 100%;
}

/* ─── 13. IFRAMES (maps, videos) ─────────────────────────── */
iframe {
  max-width: 100%;
}

/* ─── 14. PRELOADER ──────────────────────────────────────── */
@media (max-width: 575px) {
  .gt-preloader {
    overflow: hidden;
  }
}

/* ─── 15. BREADCRUMB ─────────────────────────────────────── */
.gt-breadcrumb-section {
  padding: 120px 0 60px;
}
@media (max-width: 991px) {
  .gt-breadcrumb-section {
    padding: 100px 0 50px;
  }
}
@media (max-width: 767px) {
  .gt-breadcrumb-section {
    padding: 80px 0 40px;
  }
}
@media (max-width: 575px) {
  .gt-breadcrumb-section {
    padding: 70px 0 30px;
  }
  .gt-breadcrumb-section h2 {
    font-size: 28px !important;
  }
}

/* ─── 16. GAME / SERVICE DETAIL PAGES ───────────────────── */
@media (max-width: 575px) {
  .gt-game-section .row,
  .gt-service-section .row {
    gap: 20px 0;
  }
}

/* ─── 17. OFFCANVAS / SIDEBAR MOBILE MENU ───────────────── */
.offcanvas__info {
  max-width: min(320px, 90vw);
}

@media (max-width: 400px) {
  .offcanvas__content {
    padding: 20px 16px;
  }
  .offcanvas__contact h4 {
    font-size: 16px;
  }
}

/* ─── 18. SOCIAL ICONS SIDEBAR ───────────────────────────── */
.offcanvas__info .social-icon a {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── 19. PRICING PAGE ───────────────────────────────────── */
@media (max-width: 575px) {
  .gt-pricing-wrapper,
  .gt-price-item {
    padding: 24px 16px !important;
  }
}

/* ─── 20. BLOG DETAIL ────────────────────────────────────── */
@media (max-width: 575px) {
  .gt-blog-wrapper .gt-blog-details {
    padding: 20px 0;
  }
  .gt-blog-wrapper img {
    border-radius: 4px;
  }
}

/* ─── 21. MATCH PAGE ─────────────────────────────────────── */
@media (max-width: 767px) {
  .gt-match-wrapper .row {
    gap: 16px 0;
  }
  .gt-match-card {
    overflow-x: auto;
  }
}

/* ─── 22. TEAM PAGE ──────────────────────────────────────── */
@media (max-width: 575px) {
  .gt-team-wrapper .gt-team-image img {
    width: 100%;
  }
}

/* ─── 23. GALLERY PAGE ───────────────────────────────────── */
@media (max-width: 575px) {
  .gt-gallery-section .row {
    gap: 12px 0;
  }
}

/* ─── 24. FAQ PAGE ───────────────────────────────────────── */
@media (max-width: 575px) {
  .accordion-button {
    font-size: 14px !important;
    padding: 16px 14px !important;
  }
  .accordion-body {
    padding-left: 14px !important;
    font-size: 13px;
  }
}

/* ─── 25. 404 PAGE ───────────────────────────────────────── */
@media (max-width: 575px) {
  .gt-error-section h2 {
    font-size: 80px !important;
  }
  .gt-error-section h3 {
    font-size: 18px !important;
  }
}

/* ─── 26. PORTFOLIO PAGE ─────────────────────────────────── */
@media (max-width: 575px) {
  .gt-portfolio-filter ul {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .gt-portfolio-filter ul li button {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ─── 27. CHECKOUT / SHOP CART ───────────────────────────── */
@media (max-width: 767px) {
  .gt-checkout-wrapper,
  .gt-cart-wrapper {
    padding: 20px 0;
  }
  .gt-cart-table {
    overflow-x: auto;
    display: block;
    width: 100%;
  }
}

/* ─── 28. SMOOTH SCROLLING ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Disable smooth scroll for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── 29. TOUCH TARGETS — minimum 44x44px ────────────────── */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  min-height: 44px;
}

/* ─── 30. SECTION TITLE TEXT ─────────────────────────────── */
@media (max-width: 400px) {
  .gt-section-title h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .gt-section-title h6 {
    font-size: 12px !important;
    letter-spacing: 1px;
  }
}