/*
 * Auto Repair UAE shared luxury foundation
 * Version: 1.3.0
 * Loaded by the homepage and every opt-in design-system page.
 */

body.aruae-system-page {
  --aruae-ds-gold: #c9a227;
  --aruae-ds-gold-lt: #e3c874;
  --aruae-ds-gold-dk: #8a6f18;
  --aruae-ds-gold-glow: rgba(201, 162, 39, 0.16);
  --aruae-ds-ivory: #f3f1ea;
  --aruae-ds-panel: #131d33;
  --aruae-ds-panel-hi: #18243d;
  --aruae-ds-line: rgba(201, 162, 39, 0.18);
  --aruae-ds-line-soft: rgba(255, 255, 255, 0.075);
  --aruae-ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * One signature contour replaces the rejected multi-motif set.
 * It is intentionally limited to one anchor card in each homepage group.
 */
body.aruae-system-page .aruae-ds-motif {
  display: none !important;
}

body.aruae-home-system .aruae-home-v3 :is(
  .aruae-service-tile--navy,
  .aruae-package:nth-child(2)
),
body.aruae-system-page .aruae-ds-signature-contour {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.aruae-home-system .aruae-home-v3 :is(
  .aruae-service-tile--navy,
  .aruae-package:nth-child(2)
) > *,
body.aruae-system-page .aruae-ds-signature-contour > * {
  position: relative;
  z-index: 1;
}

body.aruae-home-system .aruae-home-v3 :is(
  .aruae-service-tile--navy,
  .aruae-package:nth-child(2)
)::after,
body.aruae-system-page .aruae-ds-signature-contour::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -25%;
  inset-inline-end: -8%;
  width: min(62%, 520px);
  aspect-ratio: 2 / 1;
  background: url("signature-contour.svg") right top / contain no-repeat;
  opacity: 0.58;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.5s var(--aruae-ds-ease), transform 0.75s var(--aruae-ds-ease);
}

body.aruae-home-system .aruae-home-v3 .aruae-service-tile--navy::after {
  top: -8%;
  inset-inline-end: -38%;
  width: 138%;
}

body.aruae-home-system .aruae-home-v3 .aruae-package:nth-child(2)::after {
  top: -17%;
  inset-inline-end: -20%;
  width: 92%;
}

body.aruae-home-system .aruae-home-v3 :is(
  .aruae-service-tile--navy,
  .aruae-package:nth-child(2)
):is(:hover, :focus-within)::after,
body.aruae-system-page .aruae-ds-signature-contour:is(:hover, :focus-within)::after {
  opacity: 0.78;
  transform: translate3d(-6px, 4px, 0);
}

/* Optical polish shared by the homepage and new page system */
body.aruae-system-page :is(.aruae-home-v3, .aruae-page-system) :is(h1, h2, h3) {
  text-wrap: balance;
}

body.aruae-system-page :is(.aruae-home-v3, .aruae-page-system) p {
  text-wrap: pretty;
}

body.aruae-home-system .aruae-home-v3 .aruae-btn:not(.aruae-btn--secondary):not(.aruae-btn--dark) {
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 28px -22px rgba(201, 162, 39, 0.72);
}

body.aruae-home-system .aruae-home-v3 .aruae-btn:not(.aruae-btn--secondary):not(.aruae-btn--dark)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.3) 48%, transparent 72%);
  pointer-events: none;
  transform: translateX(-135%);
  transition: transform 0.7s var(--aruae-ds-ease);
}

body.aruae-home-system .aruae-home-v3 .aruae-btn:not(.aruae-btn--secondary):not(.aruae-btn--dark):is(:hover, :focus-visible) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 14px 34px -14px rgba(201, 162, 39, 0.65);
}

body.aruae-home-system .aruae-home-v3 .aruae-btn:not(.aruae-btn--secondary):not(.aruae-btn--dark):is(:hover, :focus-visible)::before {
  transform: translateX(135%);
}

/* Restyle third-party contact controls into the navy and champagne system */
body.aruae-system-page .chaty-channel .chaty-svg {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(145deg, #18243d, #070c16) !important;
  border: 1px solid rgba(227, 200, 116, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px -12px rgba(0, 0, 0, 0.88) !important;
  color: var(--aruae-ds-gold-lt) !important;
  transition:
    transform 0.4s var(--aruae-ds-ease),
    border-color 0.4s var(--aruae-ds-ease),
    box-shadow 0.4s var(--aruae-ds-ease) !important;
}

body.aruae-system-page .chaty-channel:hover .chaty-svg,
body.aruae-system-page .chaty-channel:focus-within .chaty-svg {
  transform: translateY(-2px) !important;
  border-color: var(--aruae-ds-gold-lt) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 30px -12px rgba(201, 162, 39, 0.44) !important;
}

body.aruae-system-page .Whatsapp-channel .chaty-svg .color-element {
  fill: var(--aruae-ds-panel) !important;
}

body.aruae-system-page .Whatsapp-channel .chaty-svg svg path {
  fill: var(--aruae-ds-gold-lt) !important;
}

body.aruae-system-page .chaty-custom-channel-icon,
body.aruae-system-page .chaty-custom-channel-icon i {
  background: transparent !important;
  color: var(--aruae-ds-gold-lt) !important;
}

body.aruae-system-page .chaty-tooltip::after {
  background: #0e1729 !important;
  border: 1px solid rgba(227, 200, 116, 0.32) !important;
  border-radius: 2px !important;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.9) !important;
  color: var(--aruae-ds-gold-lt) !important;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.67rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

body.aruae-system-page .chaty-tooltip.pos-left::before {
  border-left-color: #0e1729 !important;
}

@media (max-width: 760px) {
  body.aruae-home-system .aruae-home-v3 :is(
      .aruae-service-tile--navy,
    .aruae-package:nth-child(2)
  )::after,
  body.aruae-system-page .aruae-ds-signature-contour::after {
    width: 78%;
    top: -12%;
    inset-inline-end: -16%;
    opacity: 0.42;
  }

  body.aruae-home-system .aruae-home-v3 .aruae-service-tile--navy::after {
    width: 118%;
    inset-inline-end: -34%;
  }
}

@media (max-width: 760px) {
  body.aruae-system-page .chaty-channel .chaty-svg {
    width: 46px !important;
    height: 46px !important;
  }

  body.aruae-system-page .chaty-tooltip::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.aruae-home-system .aruae-home-v3 :is(
      .aruae-service-tile--navy,
    .aruae-package:nth-child(2)
  )::after,
  body.aruae-system-page .aruae-ds-signature-contour::after,
  body.aruae-home-system .aruae-home-v3 .aruae-btn::before,
  body.aruae-system-page .chaty-channel .chaty-svg {
    transition-duration: 0.01ms !important;
  }
}