/* =========================================================================
   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: calc(124px + max(var(--dock, 0px), var(--cookie, 0px))) !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;
}

/* 1b) Footer — robust: normal document flow, ALWAYS visible ------------------
   The theme's default footer is a FIXED "sticky-footer reveal": the footer sits
   behind the page (position:fixed; z-index:1; visibility:hidden) and the theme's
   main.min.js toggles a .visible class + reserves a margin on .site-content equal
   to the footer height as you approach the bottom. That reveal threshold is
   measured once from the page height, so it goes STALE whenever the height
   changes — the new full-width dark process section, and gtranslate translating
   the whole page to English — making the footer vanish mid-scroll or never appear
   at all. Two scripts (theme + pw-dock-js) also fought over the same margin.
   Fix: take the footer out of the fixed-reveal entirely — normal flow, always
   visible, no reserved margin. The floating flags + LINE button stay clear of it
   via --dock, recomputed from the footer's live position in pw-dock-js. */
.with-sticky-footer .site-footer,
.site-footer.sticky,
.site-footer {
  position: static !important;
  visibility: visible !important;
  z-index: auto !important;
}
.with-sticky-footer .site-content,
.site-content {
  margin-bottom: 0 !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); }
}
.pw-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;
}
.pw-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;
}
.pw-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 */
.pw-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: calc(155px + max(var(--dock, 0px), var(--cookie, 0px))) !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-right, below the language flags -------
   On the right edge the label must open to the LEFT, so the flex row is
   reversed (icon anchored right, label slides out left). */
.pw-line-fab {
  position: fixed; right: 22px; bottom: calc(30px + max(var(--dock, 0px), var(--cookie, 0px))); z-index: 9991;
  display: inline-flex; flex-direction: row-reverse; 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-left: 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-left: 20px; }
@keyframes pw-line-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) {
  .pw-line-fab { right: 14px; bottom: calc(26px + max(var(--dock, 0px), var(--cookie, 0px))); 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; }
  .pw-widget.button.-large,
  a.button.-small.btn-optional { animation: none; }
  .pw-widget.button.-large::after { display: none; }
  .pw-line-fab { animation: none; }
}

/* ── Quote-invitation section: 2 columns (left wider), button under checklist ─
   The 3rd column (button) was merged into the "รู้ราคาได้เลย" column in the
   HTML; give the text column more room and stack cleanly on mobile. */
@media (min-width: 768px) {
  .elementor-511 .elementor-element.elementor-element-644e789 { width: 58% !important; }
  .elementor-511 .elementor-element.elementor-element-ae345f4 { width: 42% !important; }
}
@media (max-width: 767px) {
  .elementor-511 .elementor-element.elementor-element-644e789,
  .elementor-511 .elementor-element.elementor-element-ae345f4 { width: 100% !important; }
}
/* stack the column's widgets vertically — the checklist items are width-initial
   and were sitting side-by-side now that the column is wider */
.elementor-511 .elementor-element-ae345f4 > .elementor-widget-wrap { flex-direction: column; align-items: flex-start; }
.elementor-511 .elementor-element-ae345f4 .elementor-widget-divider { width: 100%; }
/* space the button below the checklist; align it with the left-aligned list */
.elementor-511 .elementor-element-ae345f4 .pw-quote-btn { margin-top: 26px; }
.elementor-511 .elementor-element-ae345f4 .pw-quote-btn .pw-widget-holder { text-align: left; }

/* ── Hero: "ดูแลตลอดอายุ + รีดีไซน์ฟรีทุก 3 ปี" highlight chips (coral) ── */
.pw-hero-usp-wrap { width: 100%; margin-top: 10px; }
.pw-hero-usp { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pw-hero-usp .chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.80); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid #FD775C; color: #161519; font-weight: 600; font-size: 15px; line-height: 1.25;
  padding: 8px 18px 8px 8px; border-radius: 30px; box-shadow: 0 8px 22px rgba(253,119,92,.20);
}
.pw-hero-usp .chip .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FD775C; color: #fff; flex: none; }
.pw-hero-usp .chip .ic svg { width: 16px; height: 16px; }
@media (max-width: 1024px) { .pw-hero-usp { justify-content: center; } }
@media (max-width: 767px)  { .pw-hero-usp .chip { font-size: 13.5px; padding: 7px 15px 7px 7px; } }

/* hero chip animation: fade-up entrance (staggered), hover lift, periodic
   "refresh" spin on the Redesign chip icon */
@keyframes pwChipIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pwSpinPause { 0%, 68% { transform: rotate(0); } 84%, 100% { transform: rotate(360deg); } }
.pw-hero-usp .chip { animation: pwChipIn .6s cubic-bezier(.2,.7,.2,1) both; transition: transform .2s ease, box-shadow .2s ease; }
.pw-hero-usp .chip:nth-child(2) { animation-delay: .13s; }
.pw-hero-usp .chip:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(253,119,92,.30); }
.pw-hero-usp .chip:last-child .ic svg { animation: pwSpinPause 5.5s ease-in-out infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .pw-hero-usp .chip, .pw-hero-usp .chip:last-child .ic svg { animation: none !important; }
  .pw-hero-usp .chip:hover { transform: none; }
}
/* running light around the chip border (border beam) */
@property --pw-beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.pw-hero-usp .chip { position: relative; }
.pw-hero-usp .chip::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--pw-beam),
    rgba(253,119,92,0) 0deg, rgba(253,119,92,0) 280deg,
    #FD775C 312deg, #fff2ee 340deg, #FD775C 356deg, rgba(253,119,92,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: pw-beam-run 2.8s linear infinite;
}
.pw-hero-usp .chip:nth-child(2)::after { animation-delay: -1.4s; }
@keyframes pw-beam-run { to { --pw-beam: 360deg; } }
@media (prefers-reduced-motion: reduce) { .pw-hero-usp .chip::after { animation: none; } }

/* ── Project showcase: pinned horizontal scroll of phone mockups ────────────
   pw-showcase-js pins the section and drives the horizontal track from the
   vertical scroll. No-JS / reduced-motion falls back to a swipeable row. */
.pw-vp { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.pw-hshow { display: flex; flex-wrap: nowrap; gap: 30px; will-change: transform; padding: 6px 4px 16px; }
.pw-phone { flex: 0 0 auto; width: clamp(200px, 22vw, 280px); margin: 0; text-align: center; }
.pw-phone a { display: block; text-decoration: none; color: inherit; }
.pw-phone img { width: 100%; height: auto; display: block; border-radius: 26px; box-shadow: 0 18px 44px rgba(17,16,19,.20); }
.pw-phone .cap { display: block; margin-top: 15px; font-size: 15px; font-weight: 600; color: #161519; transition: color .2s; }
.pw-phone a:hover .cap { color: #FD775C; }
/* pinned mode — JS adds .on once it takes over */
.pw-pin.on > .pw-showcase { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.pw-pin.on .pw-vp { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .pw-pin.on > .pw-showcase { position: static; height: auto; }
  .pw-pin.on .pw-vp { overflow-x: auto; }
}
/* mobile: swipeable strip — wider gap between phones + scroll-snap paging */
@media (max-width: 767px) {
  .pw-showcase .elementor-element-e2facea .elementor-heading-title,
  .pw-showcase .elementor-element-9161427 .elementor-heading-title { font-size: 23px !important; line-height: 1.22 !important; }
  .pw-phone { width: 150px; scroll-snap-align: center; }
  .pw-phone .cap { margin-top: 8px; font-size: 13px; }
  .pw-hshow { gap: 26px; padding: 2px 10px 8px; }
  .pw-vp { scroll-snap-type: x mandatory; scroll-padding: 0 12px; }
}
/* mobile arrow controls for the swipeable showcase (desktop uses the pinned scroll) */
.pw-arrows { display: none; }
@media (max-width: 767px) {
  .pw-arrows { display: flex; justify-content: center; gap: 44px; margin-top: 16px; }
  .pw-arw {
    width: 46px; height: 46px; border-radius: 50%; padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 24px; line-height: 0; display: grid; place-items: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .1s ease;
  }
  .pw-arw:active { transform: scale(.9); background: rgba(255, 255, 255, .22); }
}

/* 9) Mobile: swipe hint + centered CTA / footer logo / footer LINE QR ---------
   On phones the showcase is a swipeable strip (pw-showcase-js turns pinning off),
   so a hint invites the swipe; the quote CTA, the footer logo and the footer LINE
   QR are centered. */
.pw-swipe-hint { display: none; }
@media (max-width: 767px) {
  .pw-swipe-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 4px 12px; color: rgba(255, 255, 255, .72);
    font-size: 13px; font-weight: 600; letter-spacing: .2px;
    animation: pwSwipeSway 1.7s ease-in-out infinite;
  }
  .pw-swipe-hint .c { font-size: 17px; line-height: 1; }

  /* center the "ประเมินราคา" CTA in the quote-invitation column */
  .elementor-511 .elementor-element-ae345f4 .pw-quote-btn { width: 100%; }
  .elementor-511 .elementor-element-ae345f4 .pw-quote-btn .pw-widget-holder { text-align: center; }

  /* center the hero USP chips + subtitle (the column carries a desktop-only right padding) */
  .elementor-511 .elementor-element-0d79b85 { padding-left: 20px !important; padding-right: 20px !important; }

  /* center the footer logo + LINE QR */
  .site-footer .widget_pw_widget_logo .branding,
  .site-footer .footer-logo { text-align: center; }
  .site-footer .footer-logo .-unlink { display: inline-block; }
  .site-footer .widget_media_image .wp-block-image,
  .site-footer figure.wp-block-image { text-align: center; }
  .site-footer figure.wp-block-image.is-resized > a { display: inline-block; }
}
@keyframes pwSwipeSway { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .pw-swipe-hint { animation: none; } }