/* ==========================================================================
   FairTech Repair Page — premium dark experience.
   Page-scoped (only repair.php loads this via $extra_head). Builds on
   design-system.css tokens/utilities (.ds-bg-premium, .fade-up, .reveal,
   .hover-lift, .float-element, .perspective, .ds-btn-*) from Step 1.
   ========================================================================== */

/* ==================== HERO ==================== */

.ds-repair-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
  color: var(--ds-text-primary);
}

.ds-repair-hero__circuits {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(120, 170, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 255, 0.14) 1px, transparent 1px),
    radial-gradient(rgba(120, 170, 255, 0.35) 1.5px, transparent 1.5px);
  background-size: 64px 64px, 64px 64px, 64px 64px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: radial-gradient(65% 75% at 30% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(65% 75% at 30% 40%, #000 0%, transparent 78%);
}

.ds-repair-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.ds-repair-hero__glow--1 {
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  top: -14%;
  right: -6%;
  background: radial-gradient(circle, rgba(61, 139, 255, 0.3) 0%, rgba(61, 139, 255, 0) 70%);
}

.ds-repair-hero__glow--2 {
  width: 28vw;
  height: 28vw;
  max-width: 380px;
  max-height: 380px;
  bottom: -12%;
  left: 8%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0) 70%);
}

.ds-repair-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding-left: var(--ds-space-md, 20px);
  padding-right: var(--ds-space-md, 20px);
}

.ds-repair-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--ds-space-md, 20px);
}

.ds-pill {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-accent, #3d8bff);
  background: var(--ds-accent-soft, rgba(61, 139, 255, 0.16));
  border: 1px solid var(--ds-border-accent, rgba(56, 132, 255, 0.4));
  border-radius: 999px;
  padding: 6px 14px;
}

.ds-repair-hero__title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ds-space-md, 20px);
}

.ds-repair-hero__sub {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ds-text-secondary, #aab4c8);
  max-width: 52ch;
  margin: 0 0 var(--ds-space-lg, 32px);
}

.ds-repair-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm, 12px);
}

.ds-repair-hero__btn {
  padding: 14px 26px;
  font-size: 15px;
}

/* ---- 3D floating visual ---- */

.ds-repair-hero__visual-col {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-repair-hero__stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 360px;
}

.ds-repair-hero__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(61, 139, 255, 0.28) 0%, rgba(61, 139, 255, 0) 68%);
  filter: blur(18px);
}

.ds-repair-hero__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--ds-radius-lg, 20px);
  background: var(--ds-surface-glass-strong, rgba(18, 27, 48, 0.78));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--ds-border-strong, rgba(255, 255, 255, 0.16));
  box-shadow: var(--ds-shadow-lg, 0 24px 60px rgba(2, 6, 16, 0.55));
  color: var(--ds-text-primary);
}

.ds-repair-hero__card .material-symbols-outlined {
  font-size: 30px;
  color: var(--ds-accent, #3d8bff);
}

.ds-repair-hero__card-label {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* Each card's base transform (center offset or static tilt) is baked into
   its own keyframes/hover rule below, rather than relying on the generic
   .hover-lift/.float-element utilities — those set a bare `transform` on
   :hover/animation that would otherwise replace (not add to) this base
   transform and snap the card out of position. */

.ds-repair-hero__card--tools {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  transition: transform 320ms var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 320ms var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.ds-repair-hero__card--tools .material-symbols-outlined { font-size: 40px; }

.ds-repair-hero__card--phone {
  width: 104px;
  height: 104px;
  top: 6%;
  left: 6%;
  transform: rotate(-8deg);
  z-index: 3;
  animation: ds-repair-float-phone 6s var(--ds-ease-in-out, ease-in-out) infinite;
}

.ds-repair-hero__card--laptop {
  width: 112px;
  height: 112px;
  bottom: 8%;
  left: 12%;
  transform: rotate(6deg);
  z-index: 2;
  animation: ds-repair-float-laptop 6s var(--ds-ease-in-out, ease-in-out) infinite;
  animation-delay: 0.6s;
}

.ds-repair-hero__card--gaming {
  width: 104px;
  height: 104px;
  top: 12%;
  right: 4%;
  transform: rotate(9deg);
  z-index: 3;
  animation: ds-repair-float-gaming 6s var(--ds-ease-in-out, ease-in-out) infinite;
  animation-delay: 1.2s;
}

@keyframes ds-repair-float-phone {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-8deg) translateY(-8px); }
}
@keyframes ds-repair-float-laptop {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-8px); }
}
@keyframes ds-repair-float-gaming {
  0%, 100% { transform: rotate(9deg) translateY(0); }
  50%      { transform: rotate(9deg) translateY(-8px); }
}

@media (hover: hover) and (pointer: fine) {
  .ds-repair-hero__card--tools:hover {
    transform: translate(-50%, -50%) translateY(-6px) scale(1.05);
    box-shadow: var(--ds-shadow-lg, 0 24px 60px rgba(2, 6, 16, 0.55)), 0 0 24px rgba(61, 139, 255, 0.4);
  }
  .ds-repair-hero__card--phone:hover {
    animation-play-state: paused;
    transform: rotate(-8deg) translateY(-10px) scale(1.06);
  }
  .ds-repair-hero__card--laptop:hover {
    animation-play-state: paused;
    transform: rotate(6deg) translateY(-10px) scale(1.06);
  }
  .ds-repair-hero__card--gaming:hover {
    animation-play-state: paused;
    transform: rotate(9deg) translateY(-10px) scale(1.06);
  }
  .ds-repair-hero__card--phone,
  .ds-repair-hero__card--laptop,
  .ds-repair-hero__card--gaming {
    transition: transform 220ms var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-repair-hero__card--phone,
  .ds-repair-hero__card--laptop,
  .ds-repair-hero__card--gaming {
    animation: none;
  }
}

@media (max-width: 991px) {
  .ds-repair-hero__visual-col { min-height: 280px; }
  .ds-repair-hero__stage { height: 280px; max-width: 320px; }
  .ds-repair-hero__card--tools { width: 120px; height: 120px; }
  .ds-repair-hero__card--phone,
  .ds-repair-hero__card--laptop,
  .ds-repair-hero__card--gaming { width: 84px; height: 84px; }
}

/* ==================== SERVICE CARDS ==================== */

.ds-repair-services,
.ds-repair-trust {
  position: relative;
  background: var(--ds-bg-base, #060b16);
  color: var(--ds-text-primary);
  padding: 56px 0;
}

.ds-repair-trust {
  padding-top: 8px;
}

.ds-repair-section-title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--ds-space-lg, 32px);
}

.ds-repair-section-title--left {
  text-align: left;
  margin-bottom: var(--ds-space-md, 20px);
}

.ds-service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-md, 20px);
  max-width: 1360px;
  margin: 0 auto;
}

.ds-service-card {
  /* 4 per row on desktop; gap is subtracted so 4 cards + 3 gaps fit exactly.
     A short last row (e.g. 3 of 7 cards) wraps and is centered by the
     flex container above, instead of grid's default left-aligned wrap.
     The grid's own max-width (above) keeps this a real ~320px card on
     desktop — capping the card itself instead would let a 5th card
     squeeze into the row once its rendered width undercuts the basis. */
  flex: 0 1 calc(25% - (var(--ds-space-md, 20px) * 3 / 4));
  min-width: 200px;
  display: block;
  text-decoration: none;
  border-radius: var(--ds-radius-lg, 20px);
  background: var(--ds-surface-1, #0d1526);
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.08));
  overflow: hidden;
  color: var(--ds-text-primary);
  transition: transform 320ms var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 320ms var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 320ms var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (hover: hover) and (pointer: fine) {
  .ds-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ds-shadow-lg, 0 24px 60px rgba(2, 6, 16, 0.55));
    border-color: var(--ds-border-accent, rgba(56, 132, 255, 0.4));
  }
  .ds-service-card:hover .ds-service-card__media img {
    transform: scale(1.06);
  }
}

.ds-service-card:focus-visible {
  outline: 2px solid var(--ds-accent, #3d8bff);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .ds-service-card {
    flex: 0 1 calc(33.333% - (var(--ds-space-md, 20px) * 2 / 3));
  }
}

@media (max-width: 650px) {
  .ds-service-card {
    flex: 0 1 calc(50% - (var(--ds-space-sm, 12px) / 2));
    min-width: 140px;
  }
  .ds-service-grid {
    gap: var(--ds-space-sm, 12px);
  }
}

@media (max-width: 400px) {
  .ds-service-card {
    flex: 0 1 100%;
    max-width: 320px;
  }
}

.ds-service-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ds-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.ds-service-card__body {
  padding: var(--ds-space-md, 20px);
}

.ds-service-card__body h3 {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}

.ds-service-card__body p {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--ds-text-secondary, #aab4c8);
  margin: 0 0 12px;
  line-height: 1.5;
}

.ds-service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-accent, #3d8bff);
}

.ds-service-card__cta .material-symbols-outlined {
  font-size: 16px;
}

/* ==================== TRUST SECTION ==================== */

.ds-repair-trust__text {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ds-text-secondary, #aab4c8);
  margin-bottom: var(--ds-space-md, 20px);
}

.ds-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--ds-text-primary);
}

.ds-trust-list .material-symbols-outlined {
  color: var(--ds-accent, #3d8bff);
  font-size: 20px;
}

.ds-location-card {
  display: flex;
  gap: 14px;
  padding: var(--ds-space-md, 20px);
  border-radius: var(--ds-radius-lg, 20px);
  background: var(--ds-surface-glass, rgba(18, 27, 48, 0.55));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.08));
  margin-bottom: var(--ds-space-sm, 12px);
}

.ds-location-card__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-accent-soft, rgba(61, 139, 255, 0.16));
  color: var(--ds-accent, #3d8bff);
}

.ds-location-card h3 {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}

.ds-location-card p {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--ds-text-secondary, #aab4c8);
  margin: 0 0 6px;
}

.ds-location-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-primary);
  text-decoration: none;
}

.ds-location-card a .material-symbols-outlined {
  font-size: 16px;
  color: var(--ds-accent, #3d8bff);
}

.ds-repair-trust__locations-link {
  margin-top: 4px;
}

/* ==================== FORM SECTION ==================== */

.ds-repair-form-section {
  position: relative;
  background: linear-gradient(180deg, var(--ds-bg-base, #060b16) 0%, #0a1120 100%);
  padding: 56px 0 72px;
}

.ds-repair-form-card {
  border: none;
  box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.18), var(--shadow-lg, 0 20px 48px rgba(15, 23, 42, 0.16));
}

.ds-repair-submit-btn {
  border-radius: 999px !important;
}

/* ==================== Reduced motion ==================== */

@media (prefers-reduced-motion: reduce) {
  .ds-service-card {
    transition-duration: 1ms;
  }
}