/* =========================================================================
   PremiumWebsite.co — custom UI overrides (loaded sitewide)
   ========================================================================= */

/* 1) Language switcher → floating round buttons, lifted above the footer ---- */
/* flags.js injects a child .gt_switcher_wrapper with INLINE position
   (bottom:15px;right:15px) — override the child, not just the wrapper */
.gtranslate_wrapper,
.gtranslate_wrapper .gt_switcher_wrapper {
  position: fixed !important;
  right: 20px !important;
  bottom: 92px !important;
  z-index: 9990 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 9px !important;
  width: auto !important;
  height: auto !important;
}
.gtranslate_wrapper a,
.gtranslate_wrapper img,
.gtranslate_wrapper > div {
  display: block !important;
  line-height: 0 !important;
}
.gtranslate_wrapper img {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(22, 21, 25, .22) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
  cursor: pointer !important;
}
.gtranslate_wrapper img:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 22px rgba(22, 21, 25, .32) !important;
}

/* 2) Eye-catching animation for the "ประเมินราคา" CTA buttons ---------------- */
@keyframes pw-cta-pulse {
  0%   { box-shadow: 0 8px 22px rgba(22,21,25,.20), 0 0 0 0 rgba(217,10,44,.50); }
  70%  { box-shadow: 0 8px 22px rgba(22,21,25,.20), 0 0 0 16px rgba(217,10,44,0); }
  100% { box-shadow: 0 8px 22px rgba(22,21,25,.20), 0 0 0 0 rgba(217,10,44,0); }
}
@keyframes pw-cta-shine {
  0%, 55% { transform: translateX(-160%) skewX(-18deg); }
  100%    { transform: translateX(430%)  skewX(-18deg); }
}
.ohio-widget.button.-large,
a.button.-small.btn-optional {
  position: relative !important;
  overflow: hidden !important;
  animation: pw-cta-pulse 2.4s ease-out infinite;
  transition: transform .2s ease !important;
  z-index: 1;
}
.ohio-widget.button.-large::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .45), transparent);
  pointer-events: none;
  z-index: 2;
  animation: pw-cta-shine 3.4s ease-in-out infinite;
}
.ohio-widget.button.-large:hover,
a.button.-small.btn-optional:hover {
  transform: translateY(-2px) scale(1.04) !important;
}

/* 3) Responsive: kill horizontal overflow site-wide ------------------------
   Causes found by audit: showcase slider stage extends past the viewport on
   tablet/phone, VC rows use -15px gutters, and an Elementor spacer uses 100vw
   (which includes the scrollbar, +20px on every size). Clip at the root —
   transform-based sliders are unaffected. */
html, body {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
/* keep the showcase slider tidy inside its own box as well */
.ohio-widget.slider, .slider-holder {
  overflow-x: clip;
}
/* the 100vw elementor spacer on the EN homepage */
.elementor-spacer, .elementor-spacer-inner {
  max-width: 100%;
}

/* 4) Small-screen polish ---------------------------------------------------- */
@media (max-width: 600px) {
  /* floating language flags: slightly smaller, lifted clear of the cookie bar */
  .gtranslate_wrapper,
  .gtranslate_wrapper .gt_switcher_wrapper { bottom: 155px !important; right: 14px !important; }
  .gtranslate_wrapper img { width: 38px !important; height: 38px !important; min-width: 38px !important; }
}

/* 5) Portfolio grid — reserve cover aspect-ratio ----------------------------
   Covers are uniform 1286×728 device mockups. The masonry/isotope layout
   positions cards absolutely and measures their height up-front; without a
   reserved height it runs BEFORE the cover images load (height ≈ 0) and never
   recalculates, so cards stack/overlap (worst on tablet/landscape widths).
   Reserving the aspect-ratio gives every card its correct height immediately,
   so the layout is right on the first pass — and it also kills layout shift. */
.portfolio-grid .portfolio-item .image-holder {
  aspect-ratio: 1286 / 728;
  overflow: hidden;
}
.portfolio-grid .portfolio-item .image-holder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* 6) Floating LINE chat button — bottom-left (clear of the bottom-right flags) -- */
.pw-line-fab {
  position: fixed; left: 22px; bottom: 24px; z-index: 9991;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0; border-radius: 28px; overflow: hidden;
  background: #06C755; color: #fff; text-decoration: none;
  box-shadow: 0 6px 20px rgba(6, 199, 85, .42);
  transition: transform .18s ease, box-shadow .18s ease, padding .2s ease;
  animation: pw-line-pop .5s ease both;
}
.pw-line-fab .ic { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.pw-line-fab .ic svg { width: 32px; height: 32px; display: block; }
.pw-line-fab .lbl {
  max-width: 0; opacity: 0; white-space: nowrap; font-weight: 600; font-size: 15px;
  transition: max-width .25s ease, opacity .2s ease, margin .25s ease; margin-right: 0;
}
.pw-line-fab:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(6, 199, 85, .55); }
.pw-line-fab:hover .lbl { max-width: 160px; opacity: 1; margin-right: 20px; }
@keyframes pw-line-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) {
  .pw-line-fab { left: 14px; bottom: 20px; height: 50px; border-radius: 25px; }
  .pw-line-fab .ic { width: 50px; height: 50px; }
  .pw-line-fab .ic svg { width: 29px; height: 29px; }
  .pw-line-fab:hover .lbl { max-width: 0; opacity: 0; margin-right: 0; } /* icon-only on phones */
}

/* 7) Hero-slide captions — keep every slide's caption the same size ----------
   The King of Bread slide was inserted with a custom Elementor element id that
   had no sizing rule, so its caption fell back to a huge default h2 (52px).
   Normalise all hero-slide captions to match the originals (16px, light, grey). */
.slider-wrap .elementor-widget-heading .elementor-heading-title,
.slider-wrap .elementor-widget-heading .elementor-heading-title a {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: -.5px !important;
  color: #7a7a7a !important;
}
.slider-wrap .elementor-widget-heading .elementor-widget-container { text-align: center !important; }

/* accessibility: honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gtranslate_wrapper img { transition: none !important; }
  .ohio-widget.button.-large,
  a.button.-small.btn-optional { animation: none; }
  .ohio-widget.button.-large::after { display: none; }
  .pw-line-fab { animation: none; }
}