/* VinAsia Popup – plugin overrides
   Brings the popup in line with the dark/gold website theme,
   tightens spacing on mobile and gives the popup a crisp close. */

/* Defaults; overlay element supplies --vapop-ink / --vapop-accent
   from admin settings via inline custom properties. */
.va-popup-overlay {
  --vapop-ink: #071415;
  --vapop-panel: #0c2022;
  --vapop-accent: #c9923f;
  --vapop-cream: #f3ead6;
  --vapop-line: rgba(201, 146, 63, 0.22);
}

.va-popup-overlay {
  z-index: 99999;
  background: rgba(7, 20, 21, 0.78);
  /* Quick, predictable open/close. */
  transition: opacity 0.14s ease !important;
}

/* Crisp close: snap overlay out without lingering. */
.va-popup-overlay.is-closing {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.08s ease !important;
}

.va-popup-overlay.is-closing .va-popup {
  transform: translateY(6px) scale(0.985) !important;
  transition: transform 0.08s ease !important;
}

.va-popup {
  background: var(--vapop-panel) !important;
  color: var(--vapop-cream) !important;
  border: 1px solid var(--vapop-line) !important;
  border-radius: 14px !important;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease !important;
  max-width: 480px !important;
}

/* Header: dark + gold accent line */
.va-popup__header {
  background: var(--vapop-ink) !important;
  border-bottom: 1px solid var(--vapop-line);
  padding: 26px 30px 22px !important;
}

.va-popup__title {
  color: var(--vapop-cream) !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.va-popup__badge {
  background: var(--vapop-accent) !important;
  color: var(--vapop-ink) !important;
  font-weight: 700;
}

.va-popup__close {
  background: rgba(243, 234, 214, 0.08) !important;
  color: rgba(243, 234, 214, 0.7) !important;
  width: 32px !important;
  height: 32px !important;
  top: 14px !important;
  right: 14px !important;
}

.va-popup__close:hover {
  background: rgba(201, 146, 63, 0.18) !important;
  color: var(--vapop-cream) !important;
}

/* Body */
.va-popup__body {
  padding: 22px 30px !important;
  background: var(--vapop-panel);
}

.va-popup__intro {
  color: rgba(243, 234, 214, 0.88) !important;
  font-size: 0.95rem !important;
  line-height: 1.7;
  margin-bottom: 18px !important;
}

/* Events */
.va-popup__event {
  background: rgba(201, 146, 63, 0.08) !important;
  border-left: 3px solid var(--vapop-accent) !important;
  padding: 11px 14px !important;
}

.va-popup__event-date {
  color: var(--vapop-accent) !important;
  min-width: 54px !important;
  font-size: 1rem !important;
}

.va-popup__event-name {
  color: var(--vapop-cream) !important;
}

.va-popup__event-time {
  color: rgba(243, 234, 214, 0.55) !important;
}

/* Footer / buttons */
.va-popup__footer {
  padding: 16px 30px 22px !important;
  background: var(--vapop-panel);
  gap: 8px !important;
}

.va-popup__footer .btn,
.va-popup__footer a.btn {
  background: transparent !important;
  color: var(--vapop-cream) !important;
  border: 1px solid var(--vapop-accent) !important;
  border-radius: 0 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 20px !important;
  box-shadow: none !important;
}

.va-popup__footer .btn:hover {
  background: var(--vapop-accent) !important;
  color: var(--vapop-ink) !important;
  transform: none !important;
}

.va-popup__dismiss {
  color: rgba(243, 234, 214, 0.42) !important;
  font-size: 0.75rem !important;
}

.va-popup__dismiss:hover {
  color: var(--vapop-cream) !important;
}

/* ── Mobile sizing ─────────────────────────────────────── */
@media (max-width: 640px) {
  .va-popup-overlay {
    padding: 10px !important;
    align-items: flex-start;
  }
  .va-popup {
    max-width: 94vw !important;
    max-height: calc(100vh - 20px);
    margin-top: 8px;
    border-radius: 10px !important;
  }
  .va-popup__header {
    padding: 18px 18px 16px !important;
  }
  .va-popup__title {
    font-size: 1.05rem !important;
    line-height: 1.25;
    letter-spacing: 0.06em;
    padding-right: 36px;
  }
  .va-popup__badge {
    font-size: 0.62rem !important;
    padding: 4px 10px !important;
    margin-bottom: 10px !important;
  }
  .va-popup__close {
    width: 28px !important;
    height: 28px !important;
    top: 10px !important;
    right: 10px !important;
  }
  .va-popup__body {
    padding: 16px 18px !important;
  }
  .va-popup__intro {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
    line-height: 1.55;
  }
  .va-popup__events {
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .va-popup__event {
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  .va-popup__event-date {
    font-size: 0.85rem !important;
    min-width: 44px !important;
  }
  .va-popup__event-name {
    font-size: 0.78rem !important;
  }
  .va-popup__event-time {
    font-size: 0.7rem !important;
  }
  .va-popup__footer {
    padding: 12px 18px 18px !important;
  }
  .va-popup__footer .btn {
    font-size: 0.78rem !important;
    padding: 10px 14px !important;
    letter-spacing: 0.12em;
  }
  .va-popup__dismiss {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 380px) {
  .va-popup__title {
    font-size: 0.95rem !important;
  }
  .va-popup__intro {
    font-size: 0.8rem !important;
  }
}