/* =============================================
   GROWUPHOST - GLOBAL MOBILE RESPONSIVE FIX
   Fixes smooth scrolling, overflow, font sizes
   across all pages on phone screens
   ============================================= */

/* Base fix - prevent horizontal scroll on all pages */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

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

/* ---- CONTAINER ---- */
@media (max-width: 575px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- HERO SECTIONS ---- */
@media (max-width: 767px) {
  .effect-section .p-100px-tb {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .effect-section h1,
  .effect-section .display-4 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  .effect-section .lead {
    font-size: 15px !important;
  }
  .effect-section img.max-width-120 {
    max-width: 100% !important;
    margin-top: 30px;
  }
}

/* ---- SECTION PADDING ---- */
@media (max-width: 767px) {
  .section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .p-100px-tb { padding-top: 50px !important; padding-bottom: 50px !important; }
  .p-50px-tb  { padding-top: 30px !important; padding-bottom: 30px !important; }
  .p-40px-tb  { padding-top: 24px !important; padding-bottom: 24px !important; }
  .p-30px-tb  { padding-top: 20px !important; padding-bottom: 20px !important; }
  .m-50px-t   { margin-top: 30px !important; }
}

/* ---- HEADINGS ---- */
@media (max-width: 575px) {
  h1, .h1, .display-4 { font-size: 26px !important; line-height: 1.3 !important; }
  h2, .h2              { font-size: 22px !important; }
  h3, .h3              { font-size: 20px !important; }
  .display-5           { font-size: 22px !important; }
}

/* ---- PRICING CARDS (old .pricing-card style) ---- */
@media (max-width: 767px) {
  .pricing-card {
    margin: 10px 0 !important;
  }
  .row.flex-nowarp {
    flex-wrap: wrap !important;
  }
  .row.flex-nowarp .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 8px !important;
    margin-bottom: 20px;
  }
}

/* ---- NEW PLAN CARDS — slider below ---- */

/* ---- VPS TABLE ---- */
@media (max-width: 767px) {
  #dedicatedtable .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #dedicatedtable table {
    min-width: 600px;
  }
}

/* ---- FEATURE CARDS (col-sm-6 col-lg-4) ---- */
@media (max-width: 575px) {
  .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .card.media.flex-row {
    padding: 12px !important;
  }
}

/* ---- SECTION NAV PILLS ---- */
@media (max-width: 575px) {
  .section-nav {
    gap: 6px !important;
    padding: 10px !important;
    margin-top: 0 !important;
  }
  .section-nav a {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ---- CALL TO ACTION BAR ---- */
@media (max-width: 767px) {
  .jnst-mnwrapr {
    padding: 16px !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .jnst-mncol {
    width: 100%;
    justify-content: center;
  }
  .jnst-mncol a {
    font-size: 18px !important;
    margin: 0 8px !important;
  }
  .jnst-mncol span {
    font-size: 14px !important;
  }
}

/* ---- DOMAIN SEARCH ---- */
@media (max-width: 575px) {
  #domain-search-header input {
    padding-left: 40px !important;
    font-size: 14px !important;
  }
  .domain_form2 .form-input2 {
    width: 65% !important;
    font-size: 14px !important;
  }
  .button-search-2 {
    width: 30% !important;
    font-size: 13px !important;
  }
}

/* ---- PRIORITY SECTION IMAGE ---- */
@media (max-width: 767px) {
  .col-md-5 img.max-width-80 {
    max-width: 100% !important;
    margin-top: 20px;
  }
  .col-md-7.text-left,
  .col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ---- APP LOGOS ---- */
@media (max-width: 575px) {
  .app-logo {
    margin-top: 20px !important;
  }
}

/* ---- FOOTER CTA SECTION ---- */
@media (max-width: 767px) {
  .p-30px-tb.theme-bg .row {
    flex-direction: column;
    text-align: center !important;
  }
  .p-30px-tb.theme-bg .col-lg-7,
  .p-30px-tb.theme-bg .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
  }
  .p-30px-tb.theme-bg h3 {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }
}

/* ---- FAQ ACCORDION ---- */
@media (max-width: 767px) {
  .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .accordion-07 .acco-group .acco-heading {
    font-size: 14px !important;
    padding: 12px 40px 12px 14px !important;
  }
}

/* ---- WHY GROWUPHOST GRID ---- */
@media (max-width: 767px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .why-title {
    font-size: 28px !important;
  }
}

/* ---- SUPPORT SECTION ---- */
@media (max-width: 767px) {
  .timeline {
    flex-direction: column !important;
    align-items: center;
    gap: 24px !important;
  }
  .timeline::before {
    display: none !important;
  }
  .timeline-item {
    width: 100% !important;
    max-width: 280px;
  }
  .support-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

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

/* ---- HERO SECTION (home) ---- */
@media (max-width: 767px) {
  .hero-section {
    padding: 70px 0 40px !important;
  }
  .hero-info {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .hero-card {
    width: 100% !important;
  }
}

/* ---- HOSTING HERO (shared hosting) ---- */
@media (max-width: 575px) {
  .hosting-hero {
    padding: 70px 0 40px !important;
  }
  .hero-features {
    grid-template-columns: 1fr !important;
  }
}

/* ---- SMOOTH SCROLLING ---- */
html {
  scroll-behavior: smooth;
}

/* ---- TOUCH IMPROVEMENTS ---- */
a, button, .m-btn, .order-btn, .new-order-btn, .hero-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- PREVENT TEXT OVERFLOW ---- */
@media (max-width: 575px) {
  p, li, span, h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ============================================================
   PRICING TABLE — MOBILE SWIPE SLIDER
   shared-hosting  /  reseller-hosting  /  offshore-hosting
   ============================================================ */

.plans-swipe-hint { display: none; }

@media (max-width: 767px) {

  /* Override body overflow-x:hidden only for the slider wrapper */
  .price-slider-wrap {
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 8px 0 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .price-slider-wrap::-webkit-scrollbar { display: none !important; }

  /* Row: horizontal flex, no wrap, no Bootstrap gutters */
  .price-slider-wrap .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: max-content !important;
    align-items: stretch !important;
  }

  /* Each card: 80vw so next card peeks on right */
  .price-slider-wrap .new-plan-col,
  .price-slider-wrap .plan-col {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    padding: 0 8px !important;
    margin-bottom: 0 !important;
  }

  /* Last card: add right padding so it doesn't stick to edge */
  .price-slider-wrap .new-plan-col:last-child,
  .price-slider-wrap .plan-col:last-child {
    padding-right: 24px !important;
  }

  .plans-swipe-hint {
    display: block !important;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    padding: 6px 0 4px;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 400px) {
  .price-slider-wrap .new-plan-col,
  .price-slider-wrap .plan-col {
    flex: 0 0 86vw !important;
    width: 86vw !important;
    max-width: 86vw !important;
  }
}