/* ============ KS Tel Dropdown — definitive CSS ============ */

/* Base + gating (aperto solo con data-open="1") */
.ks-tel-dd,
.ks-tel-dd * { box-sizing: border-box; }

.ks-tel-dd {
  --ks-dd-bg: #fff;
  --ks-dd-bd: rgba(20,25,25,.14);
  --ks-dd-shadow: 0 12px 30px rgba(0,0,0,.12);

  display: none !important;   /* chiuso di default */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;

  background: var(--ks-dd-bg);
  border: 1px solid var(--ks-dd-bd);
  border-radius: 10px;
  box-shadow: var(--ks-dd-shadow);
  padding: 10px 12px;
  line-height: 1.2;           /* evita line-height ereditati */
  z-index: 9999;
  white-space: nowrap;
}

.ks-tel-dd[data-open="1"] {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
}

/* Contenuto riga */
.ks-tel-dd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}

.ks-tel-dd-number {
  flex: 1 1 auto;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  color: #141919;
  letter-spacing: .2px;
}

.ks-tel-dd-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--ks-dd-bd);
  background: #f7f8f8;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  font-weight: 600;
}
.ks-tel-dd-copy:hover { background: #eff1f1; }
.ks-tel-dd-copy:active { transform: translateY(1px); }
.ks-tel-dd-copy svg { width: 18px; height: 18px; display: block; }

/* Caret comune */
.ks-tel-dd::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 12px; height: 12px;
  background: var(--ks-dd-bg);
  border-left: 1px solid var(--ks-dd-bd);
  border-top: 1px solid var(--ks-dd-bd);
  transform: rotate(45deg);
  box-shadow: -3px -3px 10px rgba(0,0,0,0.02);
}

/* ============ CTA nel contenuto (wrap) ============ */
/* Evita che il popup rompa il bottone */
.ks-tel-dd-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* Popup assoluto sotto la CTA (allineato a destra) */
.ks-tel-dd-wrap .ks-tel-dd {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: max-content;
}

.ks-tel-dd-wrap .ks-tel-dd::after { right: 20px; left: auto; }

/* ============ CTA header (menu Salient) ============ */
/* Qui il popup è figlio diretto del <li> menu (no wrap) e si allinea a sinistra */
.nectar-regular-menu-item > .ks-tel-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: max-content;
}

.nectar-regular-menu-item > .ks-tel-dd::after { left: 20px; right: auto; }

/* Anti-influenze globali */
.ks-tel-dd button.ks-tel-dd-copy {
  background-image: none;
  box-shadow: none;
  text-transform: none;
}