/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/* =========================================================
   Custom theme variables
   Define site-wide custom colors here so they can be reused
   throughout the stylesheet and easily swapped per project.
   ========================================================= */
:root {
  --light-color: #f0f0f0;
}

/* Detailing Page CSS */

/* Header CSS */
.header-search-form .elementor-search-form .elementor-search-form__toggle {
  background: var(--light-color);
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
}

.header-search-form
  .elementor-search-form
  .elementor-search-form__toggle:hover {
  background: var(--light-color);
  border-radius: 100px;
  opacity: 0.85;
}

.header-search-form .elementor-search-form .elementor-search-form__toggle i,
.header-search-form .elementor-search-form .elementor-search-form__toggle svg {
  color: var(--e-global-color-accent);
  fill: var(--e-global-color-accent);
}

.detailing-header-menu .elementor-menu-toggle {
  background: var(--light-color);
}

.detailing-header-menu .elementor-menu-toggle i,
.detailing-header-menu .elementor-menu-toggle svg {
  color: var(--e-global-color-accent);
  fill: var(--e-global-color-accent);
}

/* Footer CSS */
.detailing-footer-social-media .elementor-icon-box-icon a {
  border-color: #393939 !important;
}

.detailing-footer-contact ul li span.elementor-icon-list-text {
  color: var(--e-global-color-accent);
}

/* =========================================================
   .btn-dark — opt-in button class for the dark-theme button style.
   Accent fill, white border, white text. On hover the background
   fills in from both sides simultaneously, meeting in the middle
   to become white with accent text.
   Add "btn-dark" in the Elementor widget's CSS Classes field.
   ========================================================= */
.btn-dark .elementor-button,
.elementor-button.btn-dark {
  background-color: var(--e-global-color-accent) !important;
  background-image:
    linear-gradient(to right, var(--light-color), var(--light-color)),
    linear-gradient(to left, var(--light-color), var(--light-color)) !important;
  background-repeat: no-repeat !important;
  background-position:
    left center,
    right center !important;
  background-size:
    0% 100%,
    0% 100% !important;
  color: var(--light-color) !important;
  border: 1px solid var(--light-color) !important;
  transition:
    background-size 0.4s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out !important;
}

/* On hover each half grows to 51% so they overlap by 2% in the middle,
   which hides the hairline seam that sub-pixel rounding would otherwise
   draw where the two gradients meet. */
.btn-dark .elementor-button:hover,
.btn-dark .elementor-button:focus,
.elementor-button.btn-dark:hover,
.elementor-button.btn-dark:focus {
  background-size:
    51% 100%,
    51% 100% !important;
  color: var(--e-global-color-accent) !important;
  border-color: var(--light-color) !important;
}

/* Inner text / icon spans inherit the button's color so the
   hover transition reaches the label and any SVG/icon-font icons */
.btn-dark .elementor-button .elementor-button-text,
.btn-dark .elementor-button .elementor-button-content-wrapper,
.btn-dark .elementor-button .elementor-button-icon,
.btn-dark .elementor-button .elementor-button-icon i,
.btn-dark .elementor-button .elementor-button-icon svg,
.elementor-button.btn-dark .elementor-button-text,
.elementor-button.btn-dark .elementor-button-content-wrapper,
.elementor-button.btn-dark .elementor-button-icon,
.elementor-button.btn-dark .elementor-button-icon i,
.elementor-button.btn-dark .elementor-button-icon svg {
  color: inherit !important;
  fill: currentColor !important;
  transition: color 0.3s ease-in-out !important;
}

/* =========================================================
   Icon Spin Utilities — pick-one-and-go hover animations for
   the icon inside an Elementor Icon Box widget.

   Usage: Add ONE of the classes below in the Icon Box widget's
   CSS Classes field (Advanced tab). Each hover on the icon box
   plays the spin once.

     .icon-spin-2d          — classic 360° flat rotation (Z axis)
     .icon-spin-wobble      — 2D back-and-forth wobble, no full spin
     .icon-spin-pendulum    — 2D pendulum with damped overshoot
     .icon-spin-flip-y      — 3D horizontal coin flip (Y axis)
     .icon-spin-flip-x      — 3D vertical flip (X axis)
     .icon-spin-tumble      — 3D X + Y simultaneously
     .icon-spin-cube        — 3D X first, then Y (like a die rolling)
     .icon-spin-diagonal    — 3D rotation on a diagonal axis

   Swap between them to audition each effect.
   ========================================================= */

/* Shared setup: 3D-capable icon context, smooth default transitions */
[class*="icon-spin-"] .elementor-icon-box-icon {
  perspective: 600px;
}

[class*="icon-spin-"] .elementor-icon {
  display: inline-block;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

/* ---- 1. .icon-spin-2d — classic flat 360° spin ------------ */
.icon-spin-2d:hover .elementor-icon {
  animation: iconSpin2D 0.7s ease-in-out;
}
@keyframes iconSpin2D {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---- 2. .icon-spin-wobble — short back-and-forth ---------- */
.icon-spin-wobble:hover .elementor-icon {
  animation: iconSpinWobble 0.55s ease-in-out;
}
@keyframes iconSpinWobble {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ---- 3. .icon-spin-pendulum — damped pendulum swing ------- */
.icon-spin-pendulum:hover .elementor-icon {
  animation: iconSpinPendulum 1.2s ease-in-out;
}
@keyframes iconSpinPendulum {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(28deg);
  }
  40% {
    transform: rotate(-22deg);
  }
  60% {
    transform: rotate(14deg);
  }
  80% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ---- 4. .icon-spin-flip-y — Y-axis horizontal coin flip --- */
.icon-spin-flip-y:hover .elementor-icon {
  animation: iconSpinFlipY 0.8s ease-in-out;
}
@keyframes iconSpinFlipY {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* ---- 5. .icon-spin-flip-x — X-axis vertical flip ---------- */
.icon-spin-flip-x:hover .elementor-icon {
  animation: iconSpinFlipX 0.8s ease-in-out;
}
@keyframes iconSpinFlipX {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

/* ---- 6. .icon-spin-tumble — 3D X + Y simultaneously ------- */
.icon-spin-tumble:hover .elementor-icon {
  animation: iconSpinTumble 1s ease-in-out;
}
@keyframes iconSpinTumble {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* ---- 7. .icon-spin-cube — X first, then Y (sequential) ---- */
.icon-spin-cube:hover .elementor-icon {
  animation: iconSpinCube 1.3s ease-in-out;
}
@keyframes iconSpinCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(360deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* ---- 8. .icon-spin-diagonal — 3D rotation on diagonal axis  */
.icon-spin-diagonal:hover .elementor-icon {
  animation: iconSpinDiagonal 1s ease-in-out;
}
@keyframes iconSpinDiagonal {
  from {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

/* Respect reduced-motion preferences for all spin variants */
@media (prefers-reduced-motion: reduce) {
  [class*="icon-spin-"]:hover .elementor-icon {
    animation: none !important;
  }
}

/* =========================================================
   .card-lift — hover lift + white drop shadow for cards
   Apply this class to the OUTER container of a card.
   On hover the container rises slightly and gains a soft
   white glow so it lifts off the dark background.
   ========================================================= */
.card-lift {
  transition:
    transform 0.35s ease-in-out,
    box-shadow 0.35s ease-in-out;
  will-change: transform;
}

.card-lift:hover {
  transform: translateY(-8px);
  box-shadow:
    0 14px 30px rgba(255, 255, 255, 0.25),
    0 4px 12px rgba(255, 255, 255, 0.15);
}

/* Icon in the top row spins 360° while the card is lifted */
.card-lift .elementor-widget-icon .elementor-icon {
  display: inline-block;
  transform-origin: center center;
  transition: transform 0.8s ease-in-out;
}

.card-lift:hover .elementor-widget-icon .elementor-icon {
  transform: rotate(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .card-lift,
  .card-lift:hover {
    transition: none;
    transform: none;
  }
  .card-lift .elementor-widget-icon .elementor-icon,
  .card-lift:hover .elementor-widget-icon .elementor-icon {
    transition: none;
    transform: none;
  }
}

/* =========================================================
   .icon-accent-pop — accent badge pops in behind the icon
   Designed for light/white cards using an Elementor Icon Box
   widget. On hover, a rounded accent-colored badge scales in
   behind the icon box's icon and the icon flips to white for
   contrast against the accent fill. Stack with .card-lift for
   the full "card rises + icon activates" effect.
   ========================================================= */
.icon-accent-pop .elementor-icon-box-icon {
  position: relative;
}

.icon-accent-pop .elementor-icon-box-icon::before {
  content: "";
  position: absolute;
  inset: -12px -16px;
  background-color: var(--e-global-color-accent);
  border-radius: 12px;
  transform: scale(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}

.icon-accent-pop .elementor-icon-box-icon .elementor-icon {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease-in-out;
}

/* Absolute-positioned number heading flips to white on hover */
.icon-accent-pop
  .elementor-widget-heading.elementor-absolute
  .elementor-heading-title {
  transition:
    color 0.35s ease-in-out,
    -webkit-text-stroke-color 0.35s ease-in-out;
}

.icon-accent-pop:hover .elementor-icon-box-icon::before {
  transform: scale(1);
}

.icon-accent-pop:hover .elementor-icon-box-icon .elementor-icon {
  color: #ffffff;
}

.icon-accent-pop:hover
  .elementor-widget-heading.elementor-absolute
  .elementor-heading-title {
  color: #ffffff;
  -webkit-text-stroke-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .icon-accent-pop .elementor-icon-box-icon::before,
  .icon-accent-pop:hover .elementor-icon-box-icon::before,
  .icon-accent-pop .elementor-icon-box-icon .elementor-icon,
  .icon-accent-pop:hover .elementor-icon-box-icon .elementor-icon,
  .icon-accent-pop
    .elementor-widget-heading.elementor-absolute
    .elementor-heading-title,
  .icon-accent-pop:hover
    .elementor-widget-heading.elementor-absolute
    .elementor-heading-title {
    transition: none;
  }
  .icon-accent-pop:hover .elementor-icon-box-icon::before {
    transform: scale(1);
  }
}

/* =========================================================
   .price-card-reveal — hover reveal for pricing cards
   Apply this class to the OUTER container of a pricing card
   that holds a .our-pricing-image image widget plus a
   .car-wash-price-table price-table widget.
   On hover:
     1. The card rises and its default light-color glow
        intensifies immediately.
     2. The feature-list check circles cascade one-by-one
        from the dark background into accent on a light disc.
     3. The divider line between each feature wipes left-to-
        right in --light-color, timed with the icon cascade.
   ========================================================= */

/* --- 1. Card lift + glow ---
   The card carries a soft light-color glow at rest. On hover
   it lifts and the glow strengthens right away (no delay).
   !important is used so Elementor's own box-shadow on the
   inner widgets can't win the cascade. overflow: visible on
   the wrapper keeps the glow from being clipped. */
.price-card-reveal {
  position: relative;
  overflow: visible !important;
  transition:
    transform 0.4s ease-in-out,
    box-shadow 0.3s ease-in-out;
  box-shadow:
    0 0 24px 2px rgba(240, 240, 240, 0.28),
    0 0 10px rgba(240, 240, 240, 0.2) !important;
}

.price-card-reveal:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 36px 2px rgba(240, 240, 240, 0.45),
    0 0 14px rgba(240, 240, 240, 0.3) !important;
}

/* --- 2. Staggered check-icon cascade to accent ---
   The SVG is a single-path icon where the check mark is a
   cut-out of the outer circle, so the "secondary color" is
   whatever sits behind the SVG element. At rest that's the
   dark card background. On hover we paint a light disc just
   inside the SVG's bounding box using a radial gradient —
   sized slightly smaller than the path circle so no light
   leaks past the accent-filled edge. The cut-out check mark
   then reads in --light-color over an accent circle. */
.price-card-reveal .elementor-price-table__features-list li svg {
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(240, 240, 240, 0) 92%,
    rgba(240, 240, 240, 0) 92%
  );
  box-shadow: 0 0 0 0 transparent;
  transition:
    color 0.35s ease-in-out,
    fill 0.35s ease-in-out,
    background 0.35s ease-in-out,
    box-shadow 0.35s ease-in-out;
}

.price-card-reveal:hover
  .elementor-price-table__features-list
  li:nth-child(1)
  svg {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
  background: radial-gradient(
    circle closest-side,
    rgba(240, 240, 240, 1) 92%,
    rgba(240, 240, 240, 0) 92%
  ) !important;
  box-shadow: 0 0 0 1.5px var(--light-color) !important;
  transition-delay: 0.05s;
}
.price-card-reveal:hover
  .elementor-price-table__features-list
  li:nth-child(2)
  svg {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
  background: radial-gradient(
    circle closest-side,
    rgba(240, 240, 240, 1) 92%,
    rgba(240, 240, 240, 0) 92%
  ) !important;
  box-shadow: 0 0 0 1.5px var(--light-color) !important;
  transition-delay: 0.15s;
}
.price-card-reveal:hover
  .elementor-price-table__features-list
  li:nth-child(3)
  svg {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
  background: radial-gradient(
    circle closest-side,
    rgba(240, 240, 240, 1) 92%,
    rgba(240, 240, 240, 0) 92%
  ) !important;
  box-shadow: 0 0 0 1.5px var(--light-color) !important;
  transition-delay: 0.25s;
}
.price-card-reveal:hover
  .elementor-price-table__features-list
  li:nth-child(4)
  svg {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
  background: radial-gradient(
    circle closest-side,
    rgba(240, 240, 240, 1) 92%,
    rgba(240, 240, 240, 0) 92%
  ) !important;
  box-shadow: 0 0 0 1.5px var(--light-color) !important;
  transition-delay: 0.35s;
}
.price-card-reveal:hover
  .elementor-price-table__features-list
  li:nth-child(5)
  svg {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
  background: radial-gradient(
    circle closest-side,
    rgba(240, 240, 240, 1) 92%,
    rgba(240, 240, 240, 0) 92%
  ) !important;
  box-shadow: 0 0 0 1.5px var(--light-color) !important;
  transition-delay: 0.45s;
}

/* --- 3. Divider line wipe cascade ---
   Elementor draws each divider as a `::before` on
   li:not(:first-child), 2px tall, sitting at top: 0 of the
   li (above the feature text, centered in the 15px gap).
   We don't touch that native divider — it shows at rest in
   the color set in the widget's Divider > Color control.
   We overlay an ::after at the same top: 0 position with the
   same 2px height, scaled to 0 on the X axis. On hover the
   ::after wipes from scaleX(0) to scaleX(1) left→right,
   covering the native divider with --light-color. Cascade
   delays match the icon per row so the line above icon N
   lights as icon N lands. li:nth-child(1) has no divider
   above it, so the cascade starts at :nth-child(2).
   Selectors chain `.car-wash-price-table` (the price-table
   widget's CSS class) to raise specificity above Elementor's
   own rule on `li::before`. */
.price-card-reveal
  .car-wash-price-table
  .elementor-price-table__features-list
  li {
  position: relative;
}

.price-card-reveal
  .car-wash-price-table
  .elementor-price-table__features-list
  li:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease-in-out;
  pointer-events: none;
  z-index: 2;
}

.price-card-reveal:hover
  .car-wash-price-table
  .elementor-price-table__features-list
  li:nth-child(2)::after {
  transform: scaleX(1);
  transition-delay: 0.15s;
}
.price-card-reveal:hover
  .car-wash-price-table
  .elementor-price-table__features-list
  li:nth-child(3)::after {
  transform: scaleX(1);
  transition-delay: 0.25s;
}
.price-card-reveal:hover
  .car-wash-price-table
  .elementor-price-table__features-list
  li:nth-child(4)::after {
  transform: scaleX(1);
  transition-delay: 0.35s;
}
.price-card-reveal:hover
  .car-wash-price-table
  .elementor-price-table__features-list
  li:nth-child(5)::after {
  transform: scaleX(1);
  transition-delay: 0.45s;
}

/* --- 4. Period clock icon (car-time-icon-1.svg) — recolor via CSS mask.
   The native <img> can't be tinted directly, so we hide it and
   render the same artwork as a CSS mask on ::before in --light-color.
   No hover color change — the icon stays light on hover. */
.price-card-reveal .elementor-price-table__period img {
  display: none;
}

.price-card-reveal .elementor-price-table__period {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.price-card-reveal .elementor-price-table__period::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  background-color: var(--light-color);
  -webkit-mask: url("/wp-content/uploads/2026/04/car-time-icon-1.svg") no-repeat
    center / contain;
  mask: url("/wp-content/uploads/2026/04/car-time-icon-1.svg") no-repeat
    center / contain;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .price-card-reveal,
  .price-card-reveal:hover,
  .price-card-reveal .elementor-price-table__features-list li svg,
  .price-card-reveal:hover .elementor-price-table__features-list li svg,
  .price-card-reveal .elementor-price-table__features-list li::after,
  .price-card-reveal:hover
    .elementor-price-table__features-list
    li::after {
    transition: none;
    transform: none;
  }
}

/* Home CSS */

.detailing-explore-btn .elementor-button .elementor-button-text {
  position: relative;
}

.detailing-explore-btn .elementor-button .elementor-button-text:before,
.car-wash-price-table
  .elementor-price-table
  .elementor-price-table__footer
  a:before {
  content: "";
  position: absolute;
  top: auto;
  left: 0;
  bottom: 3px;
  background: #fff;
  width: 100%;
  height: 1px;
  transition: all 0.3s ease-in-out;
}

.detailing-explore-btn .elementor-button:hover .elementor-button-text:before {
  background: #000;
}

.detailing-service-img .elementor-widget-container img {
  aspect-ratio: 1 / 0.5;
  object-fit: cover;
}

.workshop-gallery-img1 a img {
  aspect-ratio: 1 / 0.6;
  object-fit: cover;
}

.workshop-gallery-img2 a img {
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
}

.car-wash-price-table
  .elementor-price-table
  .elementor-price-table__feature-inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.car-wash-price-table
  .elementor-price-table
  .elementor-price-table__feature-inner
  svg {
  margin-right: 0;
  margin-left: 10px;
}

.car-wash-price-table .elementor-price-table .elementor-price-table__footer a {
  position: relative;
}

.car-wash-price-table
  .elementor-price-table
  .elementor-price-table__footer
  a:before {
  bottom: 2px;
}

.car-wash-price-table
  .elementor-price-table
  .elementor-price-table__footer
  a:hover:before {
  background: var(--e-global-color-accent);
}

/* Price Listing */

.car-wash-price-table .elementor-price-table {
  padding: 30px;
}

.car-wash-price-table .elementor-price-table__price {
  justify-content: start;
}

.car-wash-price-table .elementor-price-table {
  text-align: left;
}

.car-wash-price-table .elementor-price-table__period {
  padding-top: 25px;
}

.car-wash-price-table .elementor-price-table__period img {
  padding-right: 10px;
}

.our-pricing-image .elementor-widget-container img {
  aspect-ratio: 1 / 0.5;
  object-fit: cover;
}

/* What Say Testimonial */

.what-say-testimonial .swiper-slide .elementor-testimonial__image {
  position: relative;
}

.what-say-testimonial .swiper-slide .elementor-testimonial__image:before {
  content: "";
  position: absolute;
  top: 6px;
  right: -6px;
  background: url("/wp-content/uploads/2026/01/car-quota-icon.svg") no-repeat
    center center;
  background-size: cover;
  width: 31px;
  height: 31px;
}

/* Light-color border hugging the circular avatar,
   plus an outer light-color ring separated by a small gap.
   The outline respects the 50% border-radius on the img so
   the ring stays perfectly circular. */
.what-say-testimonial .swiper-slide .elementor-testimonial__image img {
  box-sizing: border-box;
  border: 2px solid var(--light-color);
  outline: 2px solid var(--light-color);
  outline-offset: 6px;
}

.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__content
  .elementor-testimonial__text {
  background-color: #000;
  border-radius: 20px;
  padding: 80px 80px 40px;
  margin-top: -50px;
  position: relative;
  z-index: -1;
}

.what-say-testimonial .elementor-swiper-button {
  background-color: var(--light-color);
  background-image: none;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  transition: all 0.3s ease-in-out;
}

.what-say-testimonial .elementor-swiper-button:hover {
  background-color: var(--light-color);
  opacity: 0.85;
}

.what-say-testimonial .elementor-swiper-button i,
.what-say-testimonial .elementor-swiper-button svg {
  color: var(--e-global-color-accent);
  fill: var(--e-global-color-accent);
}

.what-say-testimonial .elementor-swiper-button.elementor-swiper-button-prev {
  left: -55px !important;
}

.what-say-testimonial .elementor-swiper-button.elementor-swiper-button-next {
  right: -55px !important;
}

/* =========================================================
   Testimonial Review — Hover Animation
   Hovering a review slide triggers:
     1. A small nudge + scale on the quote icon
     2. The black content text card lifts slightly and glows
     3. The role/title under the name shifts to accent color
   ========================================================= */

/* The slide itself becomes the hover target, so the text card
   (which sits behind the avatar via z-index: -1) can still respond. */
.what-say-testimonial .swiper-slide {
  cursor: default;
}

/* Quote icon nudges + scales on hover */
.what-say-testimonial .swiper-slide .elementor-testimonial__image:before {
  transform-origin: center center;
  transition: transform 0.5s ease-in-out;
}

.what-say-testimonial .swiper-slide:hover .elementor-testimonial__image:before {
  transform: rotate(-15deg) scale(1.1);
}

/* Content text card — lift when hovering the review */
.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__content
  .elementor-testimonial__text {
  transition: transform 0.45s ease-in-out;
  isolation: isolate;
}

.what-say-testimonial
  .swiper-slide:hover
  .elementor-testimonial__content
  .elementor-testimonial__text {
  transform: translateY(-6px);
}

/* --- Light-color trace around the text card ---
   Two pseudos paint a full 2px light-color border; a conic-gradient mask
   reveals a growing arc on each side. The left pseudo traces bottom-middle
   → bottom-left → left → top-left → top-middle (clockwise in CSS conic
   terms, starting at 180deg). The right pseudo mirrors via the opposite
   end of the same conic sweep, so both meet at the top middle.
   Requires @property support for animated <angle> custom properties —
   Chrome 85+, Safari 16.4+, Firefox 128+. */
@property --ws-trace {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__content
  .elementor-testimonial__text::before,
.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__content
  .elementor-testimonial__text::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--light-color);
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  --ws-trace: 0deg;
  transition: --ws-trace 0.7s ease-in-out;
}

/* Left half — clockwise from bottom (180deg) through left to top */
.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__content
  .elementor-testimonial__text::before {
  -webkit-mask: conic-gradient(
    from 180deg at 50% 50%,
    #000 0 var(--ws-trace),
    transparent var(--ws-trace)
  );
  mask: conic-gradient(
    from 180deg at 50% 50%,
    #000 0 var(--ws-trace),
    transparent var(--ws-trace)
  );
}

/* Right half — same 180deg start, but the opaque slice lives at the end of
   the sweep, so it grows counterclockwise from bottom through right to top */
.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__content
  .elementor-testimonial__text::after {
  -webkit-mask: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0 calc(360deg - var(--ws-trace)),
    #000 calc(360deg - var(--ws-trace))
  );
  mask: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0 calc(360deg - var(--ws-trace)),
    #000 calc(360deg - var(--ws-trace))
  );
}

.what-say-testimonial
  .swiper-slide:hover
  .elementor-testimonial__content
  .elementor-testimonial__text::before,
.what-say-testimonial
  .swiper-slide:hover
  .elementor-testimonial__content
  .elementor-testimonial__text::after {
  --ws-trace: 180deg;
}

/* Testimonial name/title subtle accent shift on hover */
.what-say-testimonial .swiper-slide .elementor-testimonial__cite cite,
.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__cite
  .elementor-testimonial__name,
.what-say-testimonial
  .swiper-slide
  .elementor-testimonial__cite
  .elementor-testimonial__title {
  transition:
    color 0.4s ease-in-out,
    letter-spacing 0.4s ease-in-out;
}

.what-say-testimonial
  .swiper-slide:hover
  .elementor-testimonial__cite
  .elementor-testimonial__title {
  color: var(--e-global-color-accent);
  letter-spacing: 0.5px;
}

/* Respect reduced-motion preference — skip transforms, snap trace in */
@media (prefers-reduced-motion: reduce) {
  .what-say-testimonial
    .swiper-slide:hover
    .elementor-testimonial__image:before,
  .what-say-testimonial
    .swiper-slide:hover
    .elementor-testimonial__content
    .elementor-testimonial__text {
    transform: none;
  }
  .what-say-testimonial
    .swiper-slide
    .elementor-testimonial__content
    .elementor-testimonial__text::before,
  .what-say-testimonial
    .swiper-slide
    .elementor-testimonial__content
    .elementor-testimonial__text::after {
    transition: none;
  }
}

.detailing-faq-style .e-n-accordion-item .e-n-accordion-item-title-icon span i {
  color: var(--e-global-color-accent);
}

/*  Detailing Blog */

.detailing-featured-img .elementor-widget-container img {
  aspect-ratio: 1 / 0.7;
  object-fit: cover;
}

.detailing-featured-btn .elementor-button .elementor-button-text {
  color: var(--e-global-color-accent);
  transition: all 0.3s ease-in-out;
}

.detailing-featured-btn .elementor-button:hover .elementor-button-text {
  color: var(--e-global-color-accent);
  opacity: 0.8;
}

/* =========================================================
   Blog Post Loop Grid — Hover Animation
   Scope: add .blog-post-hover to the loop-grid widget's
          Advanced > CSS Classes field.
   Each card (.e-loop-item) is the hover trigger. On hover:
     1. Featured image gently zooms inside its rounded crop
     2. Date badge pops up slightly
     3. Title shifts to accent color with a small slide right
     4. Read More: text slides right, underline grows from left,
        and an arrow slides in after the text
   Everything is scale/color/slide — no overlays covering
   content, so the image and copy stay fully legible.
   ========================================================= */

.blog-post-hover .e-loop-item {
  cursor: pointer;
}

/* --- 1. Featured image — zoom inside its rounded container --- */
.blog-post-hover
  .e-loop-item
  .detailing-featured-img
  .elementor-widget-container {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

.blog-post-hover .e-loop-item .detailing-featured-img img {
  transition: transform 0.55s ease-in-out;
  will-change: transform;
}

.blog-post-hover .e-loop-item:hover .detailing-featured-img img {
  transform: scale(1.06);
}

/* --- 2. Date badge — subtle pop, anchored at its top-left origin
       so it doesn't drift off the image corner --- */
.blog-post-hover
  .e-loop-item
  .elementor-widget-post-info
  .elementor-widget-container {
  transform-origin: left top;
  transition: transform 0.4s ease-in-out;
}

.blog-post-hover
  .e-loop-item:hover
  .elementor-widget-post-info
  .elementor-widget-container {
  transform: scale(1.06);
}

/* --- 2.5. Text content card — light-color background fills in on hover
       so the accent-colored title + Read More stay legible against the
       otherwise matching dark background. Uses a pseudo that grows
       downward from the bottom of the image and extends slightly beyond
       the text container on L/R/B to feel like a floating caption card. --- */
.blog-post-hover .e-loop-item .e-con-full.e-child {
  position: relative;
  isolation: isolate;
}

.blog-post-hover .e-loop-item .e-con-full.e-child::before {
  content: "";
  position: absolute;
  inset: 0 -12px -12px -12px;
  background-color: var(--light-color);
  border-radius: 10px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.4s ease-in-out;
  z-index: -1;
  pointer-events: none;
}

.blog-post-hover .e-loop-item:hover .e-con-full.e-child::before {
  transform: scaleY(1);
}

/* --- 3. Title — color shift + slide --- */
.blog-post-hover
  .e-loop-item
  .elementor-widget-theme-post-title
  .elementor-heading-title {
  display: inline-block;
  transition:
    color 0.35s ease-in-out,
    transform 0.35s ease-in-out;
}

.blog-post-hover
  .e-loop-item:hover
  .elementor-widget-theme-post-title
  .elementor-heading-title {
  color: var(--e-global-color-accent) !important;
  transform: translateX(4px);
}

/* --- 4. Read More button --- */
/* Text shifts right + color to accent */
.blog-post-hover
  .e-loop-item
  .elementor-widget-button
  .elementor-button
  .elementor-button-text {
  position: relative;
  display: inline-block;
  transition:
    color 0.35s ease-in-out,
    transform 0.35s ease-in-out;
}

.blog-post-hover
  .e-loop-item:hover
  .elementor-widget-button
  .elementor-button
  .elementor-button-text {
  color: var(--e-global-color-accent) !important;
  transform: translateX(4px);
}

/* Underline grows left-to-right under the text */
.blog-post-hover
  .e-loop-item
  .elementor-widget-button
  .elementor-button
  .elementor-button-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background-color: var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease-in-out;
}

.blog-post-hover
  .e-loop-item:hover
  .elementor-widget-button
  .elementor-button
  .elementor-button-text::after {
  transform: scaleX(1);
}

/* Arrow slides in after the button text */
.blog-post-hover
  .e-loop-item
  .elementor-widget-button
  .elementor-button::after {
  content: "→";
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--e-global-color-accent);
  font-weight: 600;
  transition:
    max-width 0.4s ease-in-out,
    margin-left 0.4s ease-in-out,
    opacity 0.4s ease-in-out,
    transform 0.4s ease-in-out;
  transform: translateX(-4px);
}

.blog-post-hover
  .e-loop-item:hover
  .elementor-widget-button
  .elementor-button::after {
  max-width: 2em;
  margin-left: 0.6em;
  opacity: 1;
  transform: translateX(0);
}

/* Reduced motion — color shifts still happen, transforms do not */
@media (prefers-reduced-motion: reduce) {
  .blog-post-hover .e-loop-item:hover .detailing-featured-img img,
  .blog-post-hover
    .e-loop-item:hover
    .elementor-widget-post-info
    .elementor-widget-container,
  .blog-post-hover
    .e-loop-item:hover
    .elementor-widget-theme-post-title
    .elementor-heading-title,
  .blog-post-hover
    .e-loop-item:hover
    .elementor-widget-button
    .elementor-button
    .elementor-button-text,
  .blog-post-hover
    .e-loop-item:hover
    .elementor-widget-button
    .elementor-button::after {
    transform: none;
  }
  /* Snap the light-color card background in instead of scaling it */
  .blog-post-hover .e-loop-item .e-con-full.e-child::before {
    transition: none;
  }
  .blog-post-hover .e-loop-item:hover .e-con-full.e-child::before {
    transform: scaleY(1);
  }
}

/* =========================================================
   Gravity Form #1 - Pickup / Booking Form
   Styled to match dark theme + blue gradient accents
   ========================================================= */

#gform_wrapper_1 {
  color: var(--light-color);
  font-family: "DM Sans", sans-serif;
  /* Override Gravity Forms' built-in SVG icons so the spinner arrows
	   on number inputs render in our light color instead of dark navy */
  --gf-icon-ctrl-number: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='%23F0F0F0'/%3E%3C/svg%3E") !important;
  --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23F0F0F0'/%3E%3C/svg%3E") !important;
}

#gform_wrapper_1 .gform_heading {
  margin: 0;
  padding: 0;
}

#gform_wrapper_1 .gform_description {
  display: none;
}

/* Field spacing */
#gform_wrapper_1 .gform_fields {
  grid-row-gap: 22px;
}

#gform_wrapper_1 .gfield {
  margin: 0;
}

/* Labels — subtle, uppercase-feeling */
#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 .gform-field-label {
  color: var(--light-color);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  display: block;
}

/* Hide "Name" legend — First/Last carry their own placeholders */
#gform_wrapper_1 #field_1_1 > .gfield_label {
  display: none;
}

/* Name (First / Last) side-by-side */
#gform_wrapper_1 .ginput_container_name.gform-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#gform_wrapper_1 .ginput_container_name .gform-grid-col {
  width: 100%;
  padding: 0;
}

/* Base input / select / textarea — dark, glassy, bordered */
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 input[type="date"],
#gform_wrapper_1 input.datepicker,
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--light-color);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: none;
  outline: none;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  box-sizing: border-box;
  min-height: 52px;
}

#gform_wrapper_1 input::placeholder,
#gform_wrapper_1 textarea::placeholder {
  color: var(--light-color);
  opacity: 0.55;
  font-weight: 400;
}

/* Hover — slight lift */
#gform_wrapper_1 input:hover,
#gform_wrapper_1 select:hover,
#gform_wrapper_1 textarea:hover {
  border-color: color-mix(
    in srgb,
    var(--e-global-color-accent) 35%,
    transparent
  );
  background-color: rgba(255, 255, 255, 0.06);
}

/* Focus — accent glow */
#gform_wrapper_1 input:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
  border-color: var(--e-global-color-accent);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--e-global-color-accent) 18%, transparent);
}

/* Autofill override — Chrome paints its own yellow otherwise */
#gform_wrapper_1 input:-webkit-autofill,
#gform_wrapper_1 input:-webkit-autofill:hover,
#gform_wrapper_1 input:-webkit-autofill:focus,
#gform_wrapper_1 textarea:-webkit-autofill,
#gform_wrapper_1 select:-webkit-autofill {
  -webkit-text-fill-color: var(--light-color);
  -webkit-box-shadow: 0 0 0 1000px rgba(30, 38, 50, 1) inset;
  caret-color: var(--light-color);
  transition: background-color 9999s ease-in-out 0s;
}

/* Hide native number spinners */
#gform_wrapper_1 input[type="number"]::-webkit-outer-spin-button,
#gform_wrapper_1 input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#gform_wrapper_1 input[type="number"] {
  -moz-appearance: textfield;
}

/* Select dropdown — chevron tinted via CSS mask so it picks up --light-color */
#gform_wrapper_1 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  background-color: rgba(255, 255, 255, 0.04);
  padding-right: 42px;
  cursor: pointer;
  position: relative;
}

#gform_wrapper_1 .ginput_container select,
#gform_wrapper_1 .gfield_time_ampm {
  position: relative;
}

#gform_wrapper_1 .ginput_container:has(> select)::after,
#gform_wrapper_1 .gfield_time_ampm::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background-color: var(--light-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* Date picker — calendar icon, tinted with light color via CSS mask */
#gform_wrapper_1 .ginput_container_date {
  position: relative;
}

#gform_wrapper_1 .ginput_container_date::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: var(--light-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

#gform_wrapper_1 .ginput_container_date .datepicker {
  width: 100%;
  padding-right: 44px;
}

/* Half-width fields */
#gform_wrapper_1 .gfield--width-half {
  grid-column: span 6;
}

/* Time (HH / MM / AM-PM) — all three on one row */
#gform_wrapper_1 .gfield--type-time .ginput_complex {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 8px;
  align-items: center;
}

#gform_wrapper_1 .gfield--type-time .gfield_time_hour,
#gform_wrapper_1 .gfield--type-time .gfield_time_minute,
#gform_wrapper_1 .gfield--type-time .gfield_time_ampm {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  flex: none !important;
}

#gform_wrapper_1 .gfield_time_hour input,
#gform_wrapper_1 .gfield_time_minute input {
  width: 100%;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

#gform_wrapper_1 .hour_minute_colon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-color);
  font-size: 18px;
  font-weight: 600;
  padding: 0 2px;
  width: auto;
}

#gform_wrapper_1 .gfield_time_ampm {
  min-width: 78px;
}

#gform_wrapper_1 .gfield_time_ampm select {
  width: 100%;
  padding: 14px 32px 14px 14px;
  background-position: right 12px center;
}

/* Submit button — matches site blue gradient */
#gform_wrapper_1 .gform_footer {
  margin-top: 32px;
  padding: 0;
}

#gform_wrapper_1 #gform_submit_button_1,
#gform_wrapper_1 input#gform_submit_button_1.gform_button,
#gform_wrapper_1 input#gform_submit_button_1.button {
  background-color: var(--e-global-color-accent) !important;
  background-image:
    linear-gradient(to right, var(--light-color), var(--light-color)),
    linear-gradient(to left, var(--light-color), var(--light-color)) !important;
  background-repeat: no-repeat !important;
  background-position:
    left center,
    right center !important;
  background-size:
    0% 100%,
    0% 100% !important;
  color: var(--light-color) !important;
  border: 1px solid var(--light-color) !important;
  border-radius: 20px !important;
  padding: 22px 90px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition:
    background-size 0.4s ease-in-out,
    color 0.3s ease-in-out !important;
  min-height: auto !important;
  width: auto !important;
  text-align: center !important;
  font-family: "DM Sans", sans-serif !important;
}

/* 51% per half → 2% overlap in the middle, kills the seam where the
   two fills meet. */
#gform_wrapper_1 #gform_submit_button_1:hover,
#gform_wrapper_1 input#gform_submit_button_1.gform_button:hover,
#gform_wrapper_1 input#gform_submit_button_1.button:hover {
  background-size:
    51% 100%,
    51% 100% !important;
  color: var(--e-global-color-accent) !important;
  border-color: var(--light-color) !important;
}

#gform_wrapper_1 #gform_submit_button_1:focus-visible {
  outline: 2px solid var(--e-global-color-accent) !important;
  outline-offset: 3px !important;
}

/* Validation */
#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .gform_validation_errors {
  color: #ff7a7a;
  font-size: 13px;
  margin-top: 8px;
  background: transparent;
  border: none;
  padding: 0;
}

#gform_wrapper_1 .gfield_error input,
#gform_wrapper_1 .gfield_error select,
#gform_wrapper_1 .gfield_error textarea {
  border-color: #ff7a7a;
  box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.15);
}

/* Datepicker popup — skin to match */
#ui-datepicker-div.gform-datepicker,
#ui-datepicker-div {
  background: #0b1524;
  border: 1px solid
    color-mix(in srgb, var(--e-global-color-accent) 25%, transparent);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  padding: 10px;
  color: #fff;
}

#ui-datepicker-div .ui-datepicker-header {
  background: transparent;
  border: none;
  color: #fff;
  padding-bottom: 8px;
}

#ui-datepicker-div .ui-datepicker-title {
  color: #fff;
  font-weight: 600;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  cursor: pointer;
  color: var(--e-global-color-accent);
}

#ui-datepicker-div table {
  background: transparent;
}

#ui-datepicker-div th {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span {
  color: #fff;
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: center;
  padding: 6px;
  transition: background 0.2s ease;
}

#ui-datepicker-div td a:hover {
  background: color-mix(in srgb, var(--e-global-color-accent) 20%, transparent);
}

#ui-datepicker-div td .ui-state-active,
#ui-datepicker-div td a.ui-state-active {
  background: var(--light-color);
  color: var(--e-global-color-accent);
}

@media only screen and (max-width: 1420px) {
  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-prev {
    left: -45px !important;
  }

  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-next {
    right: -45px !important;
  }
}

@media only screen and (max-width: 1380px) {
  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-prev {
    left: -15px !important;
  }

  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-next {
    right: -15px !important;
  }
}

@media only screen and (max-width: 1024px) {
  .what-say-testimonial .elementor-main-swiper {
    padding-bottom: 80px;
  }

  .what-say-testimonial
    .swiper-slide
    .elementor-testimonial__content
    .elementor-testimonial__text {
    padding: 70px 40px 40px;
  }

  .what-say-testimonial .elementor-swiper-button {
    top: calc(100% - 25px) !important;
  }

  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-prev {
    left: calc(50% - 65px) !important;
  }

  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-next {
    right: calc(50% - 65px) !important;
  }

  /* Center the submit button on tablet + mobile */
  #gform_wrapper_1 .gform_footer {
    display: flex;
    justify-content: center;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-content .elementor-testimonial__content {
    padding: 60px 20px 30px;
  }
}

@media only screen and (max-width: 767px) {
  .car-wash-price-table .elementor-price-table {
    padding: 20px;
  }

  .what-say-testimonial .elementor-main-swiper {
    padding-bottom: 60px;
  }

  .what-say-testimonial .swiper-slide .elementor-testimonial__image:before {
    width: 25px;
    height: 25px;
  }

  .what-say-testimonial
    .swiper-slide
    .elementor-testimonial__content
    .elementor-testimonial__text {
    padding: 60px 20px 30px;
    margin-top: -40px;
  }

  .what-say-testimonial .elementor-swiper-button {
    top: calc(100% - 20px) !important;
    width: 40px;
    height: 40px;
  }

  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-prev {
    left: calc(50% - 50px) !important;
  }

  .what-say-testimonial .elementor-swiper-button.elementor-swiper-button-next {
    right: calc(50% - 50px) !important;
  }

  /* Gravity Form #1 - mobile stacking */
  #gform_wrapper_1 .gfield--width-half {
    grid-column: span 12;
  }

  #gform_wrapper_1 .ginput_container_name.gform-grid-row {
    grid-template-columns: 1fr;
  }

  #gform_wrapper_1 .gform_button,
  #gform_wrapper_1 input[type="submit"].gform_button {
    width: 100%;
  }
}