/*
 * Clinique nav dropdown + "Vezi prețurile" placements.
 *
 * Standalone on purpose: the theme's own dropdown stylesheet is not in the
 * mirror (WoodMart splits CSS per feature and no menu here ever had a
 * submenu), so there is nothing to inherit. Palette taken from the live
 * clinique-light theme — #1E6B5A brand green, #1d2b32 ink — and the panel is
 * white so it also reads on the dark header of the pages that keep the
 * original theme.
 */

/* ── desktop dropdown ───────────────────────────────────────────────────── */

/* Flex row, because the theme's nav link is a block element and the caret
   would otherwise wrap onto its own line — which also dragged the panel far
   below the header, since `top: 100%` follows the item's height. */
.wd-nav-main > li.smx-has-dd {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Same button reset as the mobile toggle: the theme paints bare <button>
   elements as green pills, which would put a blob in the header. */
.wd-nav-main > li.smx-has-dd > .smx-dd-caret {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.smx-dd-caret::before,
.smx-dd-caret::after {
  content: none !important;
}

.smx-dd-caret > span {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.75;
  transition: transform 0.18s ease;
}

.wd-nav-main > li.smx-has-dd.smx-dd-open > .smx-dd-caret > span {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.smx-dd-caret:focus-visible {
  outline: 2px solid #1e6b5a;
  outline-offset: 2px;
  border-radius: 3px;
}

ul.smx-dd {
  position: absolute;
  /* Anchored a few pixels under the item rather than to the header's padded
     bottom, so the panel reads as attached to "Clinique". */
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  min-width: 230px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(14, 32, 41, 0.18);
  text-align: left;
  /* Hidden by default, but kept in the layout tree so the panel can animate
     and so screen readers reach it through the caret's aria-controls. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.wd-nav-main > li.smx-has-dd:hover > ul.smx-dd,
.wd-nav-main > li.smx-has-dd:focus-within > ul.smx-dd,
.wd-nav-main > li.smx-has-dd.smx-dd-open > ul.smx-dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Bridges the gap between the nav item and the panel, so moving the pointer
   down does not pass through dead space and close it. */
.wd-nav-main > li.smx-has-dd > ul.smx-dd::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

ul.smx-dd > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.smx-dd > li > a {
  display: block;
  padding: 9px 18px;
  color: #1d2b32 !important;
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

ul.smx-dd > li > a:hover,
ul.smx-dd > li > a:focus {
  background: #eef3f5;
  color: #1e6b5a !important;
}

ul.smx-dd > li > a .nav-link-text::after {
  /* The mirrored theme draws an underline animation on nav links via
     ::after; neutralise it inside the panel. */
  display: none !important;
}

/* ── mobile accordion ───────────────────────────────────────────────────── */

/* The mobile nav item is a flex row, so the submenu must be told to occupy a
   full line of its own — otherwise it lays out BESIDE the label and overlaps
   the neighbouring items. */
.wd-nav-mobile > li.smx-has-dd-m {
  position: relative;
  flex-wrap: wrap;
}

/* The theme styles bare <button> elements (green pill, radius, shadow), which
   turned this toggle into a large green blob over the menu. Everything is
   reset explicitly rather than hoping to out-specify it. */
.smx-dd-toggle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 52px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.smx-dd-toggle::before,
.smx-dd-toggle::after {
  content: none !important;
}

.smx-dd-toggle > span {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.wd-nav-mobile > li.smx-dd-open > .smx-dd-toggle > span {
  transform: rotate(-135deg) translate(-3px, -3px);
}

ul.smx-dd-m {
  display: none;
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  padding: 0 0 6px 14px;
  list-style: none;
  border: 0 !important;
}

.wd-nav-mobile > li.smx-dd-open > ul.smx-dd-m {
  display: block;
}

ul.smx-dd-m > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  border: 0 !important;
}

ul.smx-dd-m > li > a {
  display: block !important;
  padding: 11px 0 !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  opacity: 0.85;
  text-decoration: none !important;
}

/* ── in-page CTAs ───────────────────────────────────────────────────────── */

.smx-price-cta-wrap {
  margin: 16px 0 6px;
  text-align: center;
}

.smx-price-note {
  margin: 10px 0 0;
  font-size: 0.86rem;
  opacity: 0.7;
}

/* Deliberately a text link, not a button: the booking page has one job and a
   second button would compete with it. */
.smx-price-underform {
  margin: 16px 0 4px;
  text-align: center;
  font-size: 0.92rem;
  opacity: 0.85;
}

.smx-price-link {
  color: #1e6b5a !important;
  font-weight: 600;
  text-decoration: underline !important;
  cursor: pointer;
}

.smx-price-link:hover {
  color: #164f42 !important;
}

@media (max-width: 768px) {
  .smx-price-cta-wrap {
    margin: 14px 0 4px;
  }
}