@import url("./paintkillers-card-surfaces.base.765f72c914e6.css");

/* 2026-08-19 structural fade fix: photo and copy now resolve into one identical card surface. */
:root {
  --pk-photo-card-surface: #111318;
}

/* The seam came from fading to #0d0f13 while the copy area used a different translucent surface.
   Give every photo card one opaque parent surface so both sides of the transition are pixel-identical. */
body .services-preview .service-link-card,
body .why-card:has(> .why-card-image),
body .why-card:has(> .ph-image-photo),
body .svc-packages .package-card {
  background: var(--pk-photo-card-surface) !important;
}

/* Homepage service cards: remove the artificial bottom shadow and let the fade bridge a few pixels
   past the physical image edge. The outer card still clips everything to its rounded frame.
   overflow stays hidden: with overflow visible the hover scale(1.05) pushed the photo out of the
   box and painted it over the ::after gradient, which made the fade look like it disappeared. */
body .services-preview .service-link-card .service-link-image {
  margin-bottom: -30px !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: var(--pk-photo-card-surface) !important;
}

body .services-preview .service-link-card .service-link-image::after {
  z-index: 4 !important;
  bottom: 0 !important;
  height: 78% !important;
  background: linear-gradient(
    180deg,
    rgba(17, 19, 24, 0) 0%,
    rgba(17, 19, 24, 0.16) 12%,
    rgba(17, 19, 24, 0.38) 28%,
    rgba(17, 19, 24, 0.62) 45%,
    rgba(17, 19, 24, 0.82) 60%,
    rgba(17, 19, 24, 0.94) 74%,
    rgba(17, 19, 24, 0.99) 86%,
    rgba(17, 19, 24, 1) 94%,
    rgba(17, 19, 24, 1) 100%
  ) !important;
}

/* The photo scales on hover. Keep the gradient above it so the fade never breaks. */
body .services-preview .service-link-card .service-link-image > img,
body .why-card > :is(.why-card-image, .ph-image-photo) > img,
body .svc-packages .package-image > img {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 640px) {
  body .services-preview .service-link-card .service-link-image {
    margin-bottom: -32px !important;
  }

  body .services-preview .service-link-card .service-link-image::after {
    height: 80% !important;
  }
}

/* Photo feature cards on the internal pages use the same structural bridge.
   Only cards that actually contain a photo are affected. Same overflow rationale as above. */
body .why-card > :is(.why-card-image, .ph-image-photo) {
  margin-bottom: -26px !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: var(--pk-photo-card-surface) !important;
}

body .why-card > :is(.why-card-image, .ph-image-photo)::after {
  z-index: 4 !important;
  bottom: 0 !important;
  height: 78% !important;
  background: linear-gradient(
    180deg,
    rgba(17, 19, 24, 0) 0%,
    rgba(17, 19, 24, 0.16) 12%,
    rgba(17, 19, 24, 0.38) 28%,
    rgba(17, 19, 24, 0.62) 45%,
    rgba(17, 19, 24, 0.82) 60%,
    rgba(17, 19, 24, 0.94) 74%,
    rgba(17, 19, 24, 0.99) 86%,
    rgba(17, 19, 24, 1) 94%,
    rgba(17, 19, 24, 1) 100%
  ) !important;
}

@media (max-width: 640px) {
  body .why-card > :is(.why-card-image, .ph-image-photo)::after {
    height: 80% !important;
  }
}

/* Booking CTA: the previous 5.6s cycle moved the button only about 4px, which read as
   "not moving" on desktop. Wider sway, longer cycle, same premium restraint. */
@keyframes pkCallSwayWide {
  0%, 54% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  58% {
    transform: translate3d(-9px, 0, 0) rotate(-0.9deg);
  }
  63% {
    transform: translate3d(8px, 0, 0) rotate(0.8deg);
  }
  68% {
    transform: translate3d(-6px, 0, 0) rotate(-0.6deg);
  }
  73% {
    transform: translate3d(5px, 0, 0) rotate(0.5deg);
  }
  78% {
    transform: translate3d(-3px, 0, 0) rotate(-0.3deg);
  }
  83% {
    transform: translate3d(2px, 0, 0) rotate(0.16deg);
  }
  88%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes pkCallSweepWide {
  0%, 52% {
    background-position: 145% 0, 0 0;
  }
  80% {
    background-position: -85% 0, 0 0;
  }
  100% {
    background-position: -85% 0, 0 0;
  }
}

body .hero .booking-nudge {
  animation:
    pkCallSwayWide 6.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite,
    pkCallGlow 2.35s ease-in-out infinite,
    pkCallSweepWide 6.6s ease-in-out infinite !important;
}

body .hero .booking-nudge::before {
  animation: pkCallHaloOne 3.3s cubic-bezier(.2, .72, .3, 1) infinite !important;
}

body .hero .booking-nudge::after {
  animation: pkCallHaloTwo 3.3s cubic-bezier(.2, .72, .3, 1) infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  body .hero .booking-nudge {
    animation: none !important;
  }

  body .hero .booking-nudge::before,
  body .hero .booking-nudge::after {
    animation: none !important;
    display: none !important;
  }
}

/* PPF "Защо PPF" tiles are icon/text cards, not photo cards. Keep their page-owned look and
   explicitly opt them out of the shared photo-card treatment. */
body:has(.svc-packages) .svc-why .why-card {
  padding-top: 34px !important;
  overflow: visible !important;
  border: 0 !important;
  transform: none !important;
  background: rgba(17, 19, 24, 0.74) !important;
  box-shadow:
    inset 0 0 0 1px rgba(245, 215, 110, 0.14),
    0 18px 40px -30px rgba(0, 0, 0, 0.92) !important;
}

body:has(.svc-packages) .svc-why .why-card:hover,
body:has(.svc-packages) .svc-why .why-card:active {
  border: 0 !important;
  transform: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(245, 215, 110, 0.14),
    0 18px 40px -30px rgba(0, 0, 0, 0.92) !important;
}

body:has(.svc-packages) .svc-why .why-card > :is(.why-card-image, .ph-image-photo)::after {
  display: none !important;
  content: none !important;
}

/* PPF packages have a page-specific technical grid on ::after and also had an explicit 1px
   image separator. Remove that separator. Mask the complete image+grid composite to transparent,
   revealing the exact same parent surface that continues behind the package copy. */
body .svc-packages .package-image {
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-color: var(--pk-photo-card-surface) !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.98) 60%,
    rgba(0, 0, 0, 0.84) 72%,
    rgba(0, 0, 0, 0.58) 84%,
    rgba(0, 0, 0, 0.26) 94%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.98) 60%,
    rgba(0, 0, 0, 0.84) 72%,
    rgba(0, 0, 0, 0.58) 84%,
    rgba(0, 0, 0, 0.26) 94%,
    transparent 100%
  ) !important;
}

body .svc-packages .package-body {
  margin-top: 0 !important;
  background: transparent !important;
}

/* Mobile performance: fixed attachment forces expensive repaint/compositing on phones.
   The visual backgrounds remain identical; only their attachment mode changes on mobile. */
@media (max-width: 980px) {
  body,
  body .hero,
  body .services-preview,
  body .homepage-process,
  body .svc-info,
  body .svc-packages,
  body .svc-why,
  body footer.footer--with-partner-logos {
    background-attachment: scroll !important;
  }
}

/* 2026-08-30 unified text-card skin
   Reuse the window-tint price-card finish on existing text-only surfaces.
   The selectors deliberately exclude photo cards, galleries, controls, forms and navigation. */
:root {
  --pk-text-card-border: rgba(245, 215, 110, 0.28);
  --pk-text-card-surface:
    radial-gradient(
      circle at 18% 12%,
      rgba(245, 215, 110, 0.07),
      transparent 58%
    ),
    rgba(17, 19, 24, 0.82);
  --pk-text-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  --pk-text-card-featured-border: rgba(245, 215, 110, 0.34);
  --pk-text-card-featured-surface:
    linear-gradient(
      100deg,
      rgba(245, 215, 110, 0.10),
      rgba(17, 19, 24, 0.86) 48%
    ),
    rgba(17, 19, 24, 0.86);
  --pk-text-card-featured-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
}

body .homepage-process .process-grid > .process-step,
body .svc-packages + .svc-why .why-grid > .why-card,
body .svc-info .process-grid > .process-step,
body .color-film-pricing .color-film-price-grid > .color-film-price-card,
body .ceramic-benefits-section .ceramic-benefits-grid > .ceramic-benefit-item,
body .tint-pricing-section .tint-price-grid > .tint-price-card,
body .svc-info.headlight-benefits-scope .compact-benefits > .compact-benefit,
body .svc-info.chrome-delete-scope .feature-grid-6 > .compact-benefit {
  box-sizing: border-box !important;
  border: 1px solid var(--pk-text-card-border) !important;
  border-radius: 18px !important;
  background: var(--pk-text-card-surface) !important;
  box-shadow: var(--pk-text-card-shadow) !important;
  animation: none !important;
  cursor: default !important;
  transform: none !important;
  transition: none !important;
}

/* These are information surfaces, not controls. Keep their appearance completely
   stable on mouse hover and touch press so they never suggest that they are clickable. */
body .homepage-process .process-grid > .process-step:is(:hover, :active),
body .svc-packages + .svc-why .why-grid > .why-card:is(:hover, :active),
body .svc-info .process-grid > .process-step:is(:hover, :active),
body .color-film-pricing .color-film-price-grid > .color-film-price-card:is(:hover, :active),
body .ceramic-benefits-section .ceramic-benefits-grid > .ceramic-benefit-item:is(:hover, :active),
body .tint-pricing-section .tint-price-grid > .tint-price-card:is(:hover, :active),
body .svc-info.headlight-benefits-scope .compact-benefits > .compact-benefit:is(:hover, :active),
body .svc-info.chrome-delete-scope .feature-grid-6 > .compact-benefit:is(:hover, :active) {
  border: 1px solid var(--pk-text-card-border) !important;
  background: var(--pk-text-card-surface) !important;
  box-shadow: var(--pk-text-card-shadow) !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

body .svc-info.headlight-benefits-scope .compact-benefits > .compact-benefit,
body .svc-info.chrome-delete-scope .feature-grid-6 > .compact-benefit {
  padding: 27px 25px 25px !important;
}

body .tint-pricing-section > .wrap > .tint-warranty-card {
  box-sizing: border-box !important;
  border: 1px solid var(--pk-text-card-featured-border) !important;
  border-radius: 18px !important;
  background: var(--pk-text-card-featured-surface) !important;
  box-shadow: var(--pk-text-card-featured-shadow) !important;
  animation: none !important;
  cursor: default !important;
  transform: none !important;
  transition: none !important;
}

body .tint-pricing-section > .wrap > .tint-warranty-card:is(:hover, :active) {
  border: 1px solid var(--pk-text-card-featured-border) !important;
  background: var(--pk-text-card-featured-surface) !important;
  box-shadow: var(--pk-text-card-featured-shadow) !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 620px) {
  body .homepage-process .process-grid > .process-step,
  body .svc-packages + .svc-why .why-grid > .why-card,
  body .svc-info .process-grid > .process-step,
  body .color-film-pricing .color-film-price-grid > .color-film-price-card,
  body .ceramic-benefits-section .ceramic-benefits-grid > .ceramic-benefit-item,
  body .tint-pricing-section .tint-price-grid > .tint-price-card,
  body .svc-info.headlight-benefits-scope .compact-benefits > .compact-benefit,
  body .svc-info.chrome-delete-scope .feature-grid-6 > .compact-benefit,
  body .tint-pricing-section > .wrap > .tint-warranty-card {
    border-radius: 15px !important;
  }

  body .svc-info.headlight-benefits-scope .compact-benefits > .compact-benefit,
  body .svc-info.chrome-delete-scope .feature-grid-6 > .compact-benefit {
    padding: 22px 20px 21px !important;
  }
}

/* 2026-08-22 single-outline frame alignment */
/* Match the clean homepage service-card frame on the 3 PPF packages and the
   9 photo cards on the colour-film, headlight-film and chrome-delete pages. */
body .svc-packages .package-card,
body .why-card:has(> .why-card-image),
body .why-card:has(> .ph-image-photo) {
  border: 1px solid rgba(245, 215, 110, 0.22) !important;
  box-shadow: 0 16px 38px -30px rgba(0, 0, 0, 0.92) !important;
}

/* PPF previously drew a second outline with ::after. Keep one frame only. */
body .svc-packages .package-card::after {
  content: none !important;
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body .svc-packages .package-card:hover,
  body .why-card:has(> .why-card-image):hover,
  body .why-card:has(> .ph-image-photo):hover {
    border-color: rgba(245, 215, 110, 0.55) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38) !important;
    transform: translateY(-6px) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  body .svc-packages .package-card:hover,
  body .why-card:has(> .why-card-image):hover,
  body .why-card:has(> .ph-image-photo):hover {
    border-color: rgba(245, 215, 110, 0.22) !important;
    box-shadow: 0 16px 38px -30px rgba(0, 0, 0, 0.92) !important;
    transform: translateY(0) !important;
  }

  body .svc-packages .package-card:active,
  body .why-card:has(> .why-card-image):active,
  body .why-card:has(> .ph-image-photo):active {
    border-color: rgba(245, 215, 110, 0.55) !important;
    box-shadow: 0 18px 42px -26px rgba(245, 215, 110, 0.32) !important;
    transform: translateY(-2px) !important;
  }
}