/* Simple, clean styling just for the consultation popup
 * Goal: keep layout same as current HTML, only improve visual look
 */

/* Overlay */
#consultation-popup {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px);
}

/* Main popup card – match reference layout more closely */
#consultation-popup > div {
  max-width: 40rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75);
}

/* Inside popup, override utility colors to match reference palette */
#consultation-popup .bg-card,
#consultation-popup > div {
  background-color: hsl(220 40% 11%) !important;
}

#consultation-popup .text-foreground {
  color: hsl(0 0% 100%) !important;
}

#consultation-popup .text-muted-foreground {
  color: hsl(215 20% 69%) !important;
}

#consultation-popup .text-primary {
  color: hsl(188 100% 44%) !important;
}

#consultation-popup .bg-muted {
  background-color: hsl(220 30% 12%) !important;
}

#consultation-popup .bg-muted\/50 {
  background-color: hsla(220, 30%, 12%, 0.5) !important;
}

#consultation-popup .border-border {
  border-color: hsl(220 30% 16%) !important;
}

#consultation-popup .bg-whatsapp {
  background-color: hsl(145 100% 22%) !important;
}

#consultation-popup .bg-telegram {
  background-color: hsl(200 100% 31%) !important;
}

/* Question option buttons */
.consultation-opt {
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.2s ease-out,
    border-color 0.2s ease-out,
    color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    transform 0.18s ease-out;
}

.consultation-opt::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at top left, rgba(212, 169, 68, 0.16), transparent 65%);
  transition: opacity 0.25s ease-out;
}

.consultation-opt:hover::before {
  opacity: 1;
}

.consultation-opt:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55);
}

.consultation-circle {
  transition:
    border-color 0.2s ease-out,
    background-color 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.consultation-dot {
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
  transform: scale(0.6);
}

.consultation-opt[data-selected] .consultation-dot {
  transform: scale(1);
}

/* "Answer all questions" hint */
#popup-incomplete-hint {
  font-style: italic;
  opacity: 0.85;
}

/* WhatsApp / Telegram buttons */
.popup-cta-btn {
  transition:
    box-shadow 0.22s ease-out,
    transform 0.18s ease-out,
    opacity 0.18s ease-out;
}

.popup-cta-btn:not(.cursor-not-allowed):hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
}

@media (max-width: 640px) {
  #consultation-popup > div {
    border-radius: 0.9rem;
  }
}