/* =============================================================
   Siam Outlet – Custom overrides
   Load AFTER style.css and responsive.css
   ============================================================= */

/* =============================================================
   RESPONSIVE FIXES — Global + Tablet & Mobile (≤1199px)
   ============================================================= */

/* ----------------------------------------------------------
   Global: prevent horizontal overflow on ALL screens
   ---------------------------------------------------------- */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ----------------------------------------------------------
   index.html — Banner section
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  /* Show banner text on all screens (it was d-none d-md-block, keep as-is)
     Just ensure the large background text doesn't overflow */
  .banner-title {
    font-size: clamp(3rem, 14vw, 18rem) !important;
  }
}
@media (max-width: 767px) {
  .banner-title {
    font-size: clamp(2.5rem, 20vw, 8rem) !important;
  }
  .absolute-middle-center.text-center.fw-600 {
    font-size: 28px !important;
    white-space: normal !important;
    width: 90%;
  }
}

/* ----------------------------------------------------------
   index.html — "Problem" section big text
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .fs-200 {
    font-size: 120px !important;
  }
}
@media (max-width: 767px) {
  .fs-200 {
    font-size: 60px !important;
  }
  /* hide the decorative huge "Problem" text on very small screens */
  section .fs-200.text-nowrap {
    white-space: normal !important;
    word-break: break-word;
  }
}

/* ----------------------------------------------------------
   index.html — Pain-point section (2-col → stack)
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  /* Neutralise all outside-box negative margins on tablet/mobile */
  .outside-box-left-15,
  .outside-box-left-20,
  .outside-box-left-25,
  .outside-box-left-35,
  .outside-box-left-40 {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Solutions section — hide decorative spinning circle that extends
     beyond viewport (causes horizontal scroll on tablet) */
  .right-minus-150px,
  .right-minus-100px {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   index.html — "Growth Partner" large marquee text
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .fs-300 {
    font-size: 80px !important;
  }
}

/* ----------------------------------------------------------
   index.html — KPI / stats table
   (col-8 / col-4 rows — keep layout but shrink padding)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .col-8.last-paragraph-no-margin.ps-30px {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ----------------------------------------------------------
   index.html — Testimonial slider min-height
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .testimonial-slider .swiper-slide > .row,
  .testimonial-slider .cover-background {
    min-height: 280px !important;
  }
}

/* ----------------------------------------------------------
   index.html — Partner logos section negative margin fix
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  section[style*="margin-top: -60px"],
  section[style*="margin-top:-60px"],
  .row[style*="margin-top: -60px"],
  .row[style*="margin-top:-60px"] {
    margin-top: -20px !important;
  }
  .row[style*="margin-top: -100px"],
  .row[style*="margin-top:-100px"] {
    margin-top: -30px !important;
  }
}

/* ----------------------------------------------------------
   index.html — Footer 2-col → stack on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  footer .col-lg-7,
  footer .col-md-7 {
    margin-bottom: 32px;
  }
  footer .col-lg-4,
  footer .col-md-5 {
    align-items: center !important;
    text-align: center !important;
  }
  footer .justify-content-md-end {
    justify-content: center !important;
  }
}

/* ----------------------------------------------------------
   service.html — Section 2 Peace of Mind sticky heading
   (col-lg-5 / col-lg-7 — collapses via Bootstrap lg breakpoint)
   Ensure sticky doesn't get stuck on mobile
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .position-sticky {
    position: relative !important;
    top: auto !important;
  }
}

/* ----------------------------------------------------------
   service.html — Feature table rows (col-md-6 / col-md-6)
   Stack label + content on small screens
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .feature-table-row .row.g-0 > [class*="col-md-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .feature-label {
    font-size: 17px !important;
  }
  .feature-sublabel {
    font-size: 15px !important;
  }
  /* reduce list font inside feature table */
  .feature-table-row ul[style*="font-size: 18px"] {
    font-size: 16px !important;
  }
  .feature-table-row p[style*="font-size: 18px"] {
    font-size: 16px !important;
  }
}

/* ----------------------------------------------------------
   service.html — Performance Dashboard (col-xl-5 + col-lg-6)
   Stack on mobile: image above, bars below
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  .col-xl-5.col-lg-6 + .col-lg-6.progress-bar-style-01 {
    margin-top: 32px;
  }
}
@media (max-width: 767px) {
  .progress-bar-percent {
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    padding: 2px 6px !important;
  }
}

/* ----------------------------------------------------------
   service.html — Section 4 KPI dashboard image
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  section img[src*="Performance Dashboard"] {
    max-width: 100% !important;
  }
}

/* ----------------------------------------------------------
   pricing.html — Page title font size
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .page-title-extra-large span[style*="font-size: 40px"],
  .page-title-extra-large span[style*="font-size:40px"] {
    font-size: 26px !important;
  }
}

/* ----------------------------------------------------------
   pricing.html — Section 3 service items: image + text
   Remove white-space: nowrap on list items on small screens
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .pricing-service-item li[style*="white-space: nowrap"] {
    white-space: normal !important;
  }
  /* Stack image above text on very small screens */
  .pricing-service-item.d-flex {
    flex-direction: column !important;
  }
  .pricing-service-item figure {
    margin-right: 0 !important;
    margin-bottom: 16px !important;
  }
  .pricing-service-img {
    width: 100px !important;
    height: 100px !important;
  }
  /* Logo visibility logic for responsive */
  header .navbar-brand .default-logo {
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    display: none !important;
  }
  header .navbar-brand .mobile-logo {
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    display: inline-block !important;
  }
}

/* ----------------------------------------------------------
   pricing.html — Section 4 "ทำไมค่าบริการ" heading
   Large font sizes need to be scaled down
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  h2 span[style*="font-size: 46px"],
  h2 span[style*="font-size: 64px"] {
    font-size: 28px !important;
  }
  h2 span[style*="font-size: 86px"] {
    font-size: 40px !important;
  }
  /* CTA gold bar — allow wrapping */
  .border-radius-100px[style*="white-space: nowrap"] {
    white-space: normal !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 1199px) {
  /* CTA gold bar — allow wrapping on tablet too */
  .border-radius-100px[style*="white-space: nowrap"] {
    white-space: normal !important;
  }
}

/* ----------------------------------------------------------
   customer-review.html — Stacked carousel
   Already has its own @media (handled in page <style>)
   Extra: ensure section doesn't overflow
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .stacked-carousel {
    max-width: 100% !important;
  }
}

/* ----------------------------------------------------------
   learning-center.html — Article grid
   (Uses Bootstrap grid classes — already responsive)
   Ensure images don't overflow
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .expertise-card img {
    height: 180px !important;
  }
}

/* ----------------------------------------------------------
   privacy-policy.html — Content padding on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .privacy-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ----------------------------------------------------------
   Shared: section heading that uses large clamp or fixed px
   Ensure readability on very small screens
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* footer heading indented second line */
  h2.fw-500.ls-minus-1px[style*="padding-left: 1.5em"] {
    padding-left: 0.5em !important;
  }
  /* reduce footer heading font on small phones */
  h2.fw-500.ls-minus-1px {
    font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
  }
  /* "วัดผลได้" section large text */
  .outside-box-left-35 .fs-200 {
    font-size: 60px !important;
  }
}

/* ----------------------------------------------------------
   Shared: navbar — flex-nowrap override on mobile
   Allow menu items to wrap in mobile dropdown
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  /* Prevent header items from wrapping to a new line on mobile */
  header .container-fluid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
  }
  
  header .navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Reset column widths and allow flex layout to control sizing */
  header .col-auto {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }

  /* 1. Logo container (left) */
  header .col-auto.me-lg-0 {
    order: 1 !important;
  }

  /* 2. "Add LINE" Button container (middle) */
  header .col-auto.text-end {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 15px !important;
  }

  /* 3. Hamburger Menu container (right) */
  header .menu-order {
    order: 3 !important;
    position: static !important;
  }
  
  header .navbar-toggler {
    float: none !important;
    margin: 0 !important;
  }

  /* Shrink the Add LINE button on mobile to fit nicely */
  header .header-button .btn,
  header .header-button .btn.btn-medium,
  header .header-button .btn.btn-rounded.btn-medium {
    padding: 5px 10px !important;
    font-size: 11px !important;
    min-width: auto !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
  }
  header .header-button .btn > span,
  header .header-button .btn.btn-switch-text.btn-medium > span {
    padding: 5px 10px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  header .header-button .btn i {
    font-size: 10px !important;
  }
  header .header-button {
    max-width: 130px !important;
    overflow: hidden;
  }

  .navbar-nav.flex-nowrap {
    flex-wrap: wrap !important;
  }
  .navbar-nav .nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .navbar-nav .nav-item .text-secondary {
    display: none !important;
  }
  .navbar-nav .nav-link {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  /* Logo visibility logic for responsive header */
  header .navbar-brand .default-logo,
  header .navbar-brand .alt-logo {
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    display: none !important;
  }
  header .navbar-brand .mobile-logo {
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    display: inline-block !important;
  }
  /* Fix toggler collapse behavior */
  header .navbar-collapse {
    display: none !important;
  }
  header .navbar-collapse.show {
    display: block !important;
  }
  .navbar-toggler {
    display: inline-flex !important;
  }
}

/* ----------------------------------------------------------
   Shared: CTA button section — stack buttons on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .d-flex.flex-wrap.justify-content-center.align-items-center.gap-4 > a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ----------------------------------------------------------
   Cookie consent banner
   ---------------------------------------------------------- */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  background: #ffffff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 16px 24px;
  display: none;
}
.cookie-consent-banner.is-visible {
  display: block;
}
.cookie-consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-consent-text {
  flex: 1;
  min-width: 280px;
  font-size: 14px;
  line-height: 1.6;
  color: #717580;
}
.cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}
.btn-cookie-settings {
  border-color: #aaa;
  color: #232323;
  font-size: 14px;
}
.btn-cookie-accept {
  font-size: 14px;
}
.cookie-consent-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #717580;
  padding: 0 4px;
  line-height: 1;
}
@media (max-width: 767px) {
  .cookie-consent-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-consent-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ----------------------------------------------------------
   Logo grayscale hover effect (Trusted brands / Partnership)
   ---------------------------------------------------------- */
.logo-grayscale {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  transition: filter 0.4s ease, -webkit-filter 0.4s ease;
}
.logo-grayscale:hover {
  filter: grayscale(0%) !important;
  -webkit-filter: grayscale(0%) !important;
}

/* ----------------------------------------------------------
   Pain-point slider – constrain image size
   ---------------------------------------------------------- */
.pain-point-slider .swiper-slide img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}