/* ==========================================================================
   Why Choose Service — Elementor widget additions
   why-choose-service.css is an unchanged copy of the original; this file
   only adds what the widget needs on top of it. Every rule stays under
   .why-choose-service and the breakpoints are the original ones.
   ========================================================================== */

/* ---- Elementor's global image reset ---------------------------------------
   Elementor's frontend.css has `.elementor img { border: none; border-radius:
   0; box-shadow: none; height: auto; max-width: 100% }` (specificity 0,1,1),
   which beats the original single-class rules: the patient photo would lose
   its parallax headroom, white rim, curved edge and shadow. Restore them. */
.why-choose-service .why-choose-service__patient-image {
  max-width: none;
  height: 112%;
  border: 6px solid rgba(255, 255, 255, 0.85);
  border-top: 0;
  border-left: 0;
  border-radius: 0 46% 64% 0 / 0 34% 58% 0;
  box-shadow: 0 30px 60px -30px rgba(11, 35, 64, 0.35);
}

.why-choose-service .why-choose-service__implant-image {
  max-width: none;
  height: 100%;
  border-radius: 48% 0 0 52% / 40% 0 0 60%;
}

/* ---- Style-tab hooks; the fallbacks are the original values -------------- */
.why-choose-service .why-choose-service__icon svg {
  width: var(--wcs-icon-glyph, 48%);
  height: var(--wcs-icon-glyph, 48%);
}

.why-choose-service .why-choose-service__description {
  margin: var(--wcs-desc-margin, 0 auto);
}

@media (hover: hover) and (pointer: fine) {
  .why-choose-service .why-choose-service__card:hover,
  .why-choose-service .why-choose-service__card:focus-within {
    transform: translateY(var(--wcs-card-lift, -7px));
  }
}

/* ---- Cards per row (desktop, optional) ------------------------------------
   The original puts every card in one row from 1024px up. With a column
   count set, cards take that share of the row and the rest wrap onto a
   centred row; tablet and mobile keep the original rules. */
@media (min-width: 1024px) {
  .why-choose-service.why-choose-service--cols .why-choose-service__item {
    flex: 0 1 calc((100% - var(--wcs-card-gap) * (var(--wcs-cols) - 1)) / var(--wcs-cols));
  }
}

/* ---- Custom icons (icon library / uploaded SVG) ---------------------------
   The original icons are stroked; library and uploaded icons are filled
   shapes, so they get a fill instead of the stroke. Font icons are sized
   like the SVGs and get the same hover micro-interactions. */
.why-choose-service .why-choose-service__icon--custom svg {
  fill: currentColor;
  stroke: none;
}

.why-choose-service .why-choose-service__icon--custom i {
  font-size: calc(var(--wcs-icon-size) * 0.4);
  line-height: 1;
  transition: transform 0.7s var(--wcs-ease);
}

@media (hover: hover) and (pointer: fine) {
  .why-choose-service .why-choose-service__card[data-wcs-icon-motion="tilt"]:hover i  { transform: rotate(-8deg); }
  .why-choose-service .why-choose-service__card[data-wcs-icon-motion="scale"]:hover i { transform: scale(1.1); }
  .why-choose-service .why-choose-service__card[data-wcs-icon-motion="spin"]:hover i  { transform: rotate(45deg); }
  .why-choose-service .why-choose-service__card[data-wcs-icon-motion="lift"]:hover i  { transform: translateY(-2px); }
}

/* ---- Optional parts left empty --------------------------------------------
   A card without an icon starts with its title. */
.why-choose-service .why-choose-service__card > .why-choose-service__card-title:first-child {
  margin-top: 0;
}

/* Editor-only empty state */
.why-choose-service-empty {
  padding: 48px 24px;
  border: 2px dashed rgba(11, 35, 64, 0.2);
  font: 500 15px/1.5 "DM Sans", system-ui, sans-serif;
  color: #4A5770;
  text-align: center;
}