/* =====================

   CENTRALĂ TELEFONICĂ

   ===================== */

/* toggle invizibil */

.centrala-toggle {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

/* === BUTON PRINCIPAL === */

.telefon-centrala {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  background: var(--color-secondary);

  color: #fff;

  border: none;

  border-radius: 100px;

  cursor: pointer;

  transition: all 0.18s ease-in-out;
}

.telefon-centrala .material-symbols-outlined {
  font-size: 21px;

  line-height: 1;
}

.telefon-centrala:hover {
  background: var(--color-secondary);

  transform: translateY(-2px);
}

/* === PANOU LISTĂ === */

.centrala-panel--slim {
  position: absolute;

  top: calc(100% + 0.5rem);

  right: 0;

  width: 160px;

  background: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(10px);

  border-radius: 16px;

  border: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

  padding: 0.35rem 0.35rem 0.3rem;

  display: none;

  animation: centralaFade 0.15s ease;
}

/* afișare la click */

.centrala-toggle:checked ~ .centrala-panel--slim {
  display: block;
}

/* === ITEM === */

.centrala-item {
  display: flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.45rem 0.4rem;

  text-decoration: none;

  border-radius: 12px;

  transition: background 0.12s ease, transform 0.12s ease;
}

/* icon */

.centrala-icon {
  font-size: 23px;

  color: var(--color-secondary, #00c6ff);

  flex: 0 0 24px;
}

/* text bloc */

.centrala-text {
  display: flex;

  flex-direction: column;

  line-height: 1.05;

  gap: 0.2rem;
}

.centrala-number {
  color: var(--color-main-menu);

  font-weight: 600;

  font-size: 1.4rem;
}

.centrala-operator {
  color: rgb(0 39 61 / 76%);

  font-size: 1.2rem;
}

/* hover light, fără underline */

.centrala-item:hover,
.centrala-item:active,
.centrala-item:focus {
  background: #4fa6ff20;

  transform: translateX(1px);

  text-decoration: none;
}

/* animație apariție */

@keyframes centralaFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================= */

/*  Deschidere și la hover   */

/* ========================= */

@media (hover: hover) and (pointer: fine) {
  /* Hover pe container => arată panelul */

  .centrala-header:hover .centrala-panel--slim,
  .centrala-header:has(.centrala-panel--slim:hover) .centrala-panel--slim {
    display: block;

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
  }
}

/* Bridge invizibil între buton și panel */

.centrala-header {
  position: relative;
}

.centrala-header::after {
  content: "";

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  height: 14px; /* zona tampon */

  background: transparent;

  pointer-events: auto;
}

.centrala-panel--slim {
  transition: opacity 0.18s ease, transform 0.18s ease;

  opacity: 0;

  transform: translateY(8px);
}

.centrala-toggle:checked ~ .centrala-panel--slim {
  opacity: 1;

  transform: translateY(0);
}