/* ══ AUTODNA SERVICE PAGE STYLES (100% VECTOR SVG / TRUE FULL-SCREEN) ══ */

.page-service {
  background-color: #020202;
  color: #ffffff;
  overflow-x: hidden;
}

.service-main {
  position: relative;
  width: 100%;
  background-color: #020202;
  overflow: hidden;
  box-sizing: border-box;
}

.service-board {
  position: relative;
  width: 100%;
  margin: 0;
  background-color: #020202;
}

.service-board__img,
.service-board__svg,
.service-mobile-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ══ INTERACTIVE MULTI-VIEW SECTION (Component 8 - Instant 0ms Crossfade) ══ */
.service-board--multiview {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.service-views {
  position: relative;
  width: 100%;
}

.service-view-layer {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-view-layer:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.service-view-layer.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Interactive Tab Buttons over the tabs bar — Exact 1:1 match to Figma Component 8 */
.service-tab-btn {
  position: absolute;
  z-index: 20;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  border-radius: 2px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.service-tab-btn--shop {
  left: 24.583%;
  top: 26.500%;
  width: 10.139%;
  height: 6.235%;
}

.service-tab-btn--plan {
  left: 44.931%;
  top: 26.500%;
  width: 10.139%;
  height: 6.235%;
}

.service-tab-btn--paint {
  left: 65.278%;
  top: 26.500%;
  width: 10.139%;
  height: 6.235%;
}

.service-tab-btn:hover.service-tab-btn:hover {
  background: rgba(150, 133, 255, 0.15);
  box-shadow: 0 0 20px rgba(150, 133, 255, 0.5);
}

/* ══ INTERACTIVE HITAREAS/* ══ INTERACTIVE HITAREAS ON BOTTOM SECTION ═════════════════════════════ */
.service-hitarea {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.service-hitarea--official {
  left: 39.994%;
  top: 21.41%;
  width: 20.069%;
  height: 3.42%;
}

.service-hitarea--contact-btn {
  left: 40.002%;
  top: 72.86%;
  width: 20.069%;
  height: 3.42%;
}

.service-hitarea--official:hover,
.service-hitarea--contact-btn:hover {
  background: rgba(150, 133, 255, 0.15);
  box-shadow: 0 0 30px rgba(150, 133, 255, 0.5);
}

.service-hitarea--phone {
  left: 3.1%;
  top: 87.5%;
  width: 22%;
  height: 2.5%;
}

.service-hitarea--email {
  left: 3.1%;
  top: 90.5%;
  width: 22%;
  height: 2.5%;
}

.service-hitarea--socials {
  left: 42.0%;
  top: 93.6%;
  width: 16%;
  height: 2.5%;
  display: flex;
  justify-content: space-between;
}

.service-hitarea--socials a {
  display: block;
  width: 30%;
  height: 100%;
  cursor: pointer;
}

.service-hitarea--address {
  left: 72.0%;
  top: 87.5%;
  width: 25%;
  height: 4.5%;
}

/* ══ MOBILE (768px and down) ══════════════════════════════════════════ */
.service-mobile-layout {
  display: none;
}

@media (max-width: 768px) {
  .service-desktop-layout {
    display: none !important;
  }
  .service-mobile-layout {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background-color: #020202 !important;
    overflow: hidden !important;
  }
  .service-mobile-svg,
  .service-mobile-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ══ MOBILE HITAREAS ═══════════════════════════════════════════════════ */
.service-mob-hitarea {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  border-radius: 2px;
}

.service-mob-hitarea--official {
  left: 13.15%;
  top: 60.298%;
  width: 73.54%;
  height: 1.44%;
}

.service-mob-hitarea--contact-btn {
  left: 13.15%;
  top: 85.145%;
  width: 73.54%;
  height: 1.44%;
}

.service-mob-hitarea--phone {
  left: 5%;
  top: 90.5%;
  width: 90%;
  height: 1.2%;
}

.service-mob-hitarea--email {
  left: 5%;
  top: 92.1%;
  width: 90%;
  height: 1.2%;
}

.service-mob-hitarea--socials {
  left: 15%;
  top: 94.0%;
  width: 70%;
  height: 1.4%;
  display: flex;
  justify-content: space-around;
}

.service-mob-hitarea--socials a {
  display: block;
  width: 28%;
  height: 100%;
}

.service-mob-hitarea--address {
  left: 5%;
  top: 96.2%;
  width: 90%;
  height: 2.2%;
}