/* ==========================================================================
   BanarasBhraman Popup
   --------------------------------------------------------------------------
   Consumes the theme's design tokens, with fallbacks so the plugin still
   renders sensibly under a different theme. The overlay, modal and floating
   WhatsApp button live under one [hidden] wrapper toggled by popup.js, so
   they always appear and disappear together. The floating Call Now button
   is a separate, permanent fixture — see the theme's call-float.php.
   ========================================================================== */

#bb-popup-widget[hidden] {
  display: none;
}

.bb-popup__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--bb-z-overlay, 300);
  background-color: var(--bb-color-overlay, rgb(20 16 14 / 0.56));
}

.bb-popup {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--bb-z-modal, 500);
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--bb-space-6, 1.5rem);
  background-color: var(--bb-color-surface, #fff);
  border-radius: var(--bb-radius-lg, 0.75rem);
  box-shadow: var(--bb-shadow-lg, 0 12px 28px rgb(0 0 0 / 0.2));
}

.bb-popup__close {
  position: absolute;
  inset-block-start: var(--bb-space-3, 0.75rem);
  inset-inline-end: var(--bb-space-3, 0.75rem);
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--bb-color-text-muted, #5A4B43);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.bb-popup__close:hover {
  color: var(--bb-color-text, #14100E);
}

.bb-popup__heading {
  margin: 0 var(--bb-space-6, 1.5rem) var(--bb-space-2, 0.5rem) 0;
  color: var(--bb-color-text, #14100E);
  font-size: var(--bb-text-lg, 1.25rem);
}

.bb-popup__intro {
  margin: 0 0 var(--bb-space-4, 1rem);
  color: var(--bb-color-text-muted, #5A4B43);
  font-size: var(--bb-text-sm, 0.875rem);
}

.bb-popup__form {
  display: grid;
  gap: var(--bb-space-3, 0.75rem);
}

.bb-popup__row {
  display: grid;
  gap: var(--bb-space-1, 0.25rem);
  margin: 0;
}

.bb-popup__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bb-popup__control {
  width: 100%;
  min-height: var(--bb-size-touch-target, 2.75rem);
  padding: var(--bb-space-2, 0.5rem) var(--bb-space-3, 0.75rem);
  background-color: var(--bb-color-surface, #fff);
  border: var(--bb-border-width, 1px) solid var(--bb-color-border-strong, #CFC5BF);
  border-radius: var(--bb-radius-md, 0.5rem);
  color: var(--bb-color-text, #14100E);
  font-size: var(--bb-text-sm, 0.875rem);
}

@media (hover: none) {
  .bb-popup__control { font-size: 1rem; }
}

.bb-popup__control:focus-visible {
  outline: var(--bb-border-width-thick, 2px) solid var(--bb-color-focus, #D03000);
  outline-offset: 1px;
  border-color: transparent;
}

textarea.bb-popup__control {
  min-height: auto;
  resize: vertical;
}

.bb-popup__field-error {
  color: var(--bb-color-danger-600, #A3231B);
  font-size: var(--bb-text-xs, 0.75rem);
}

.bb-popup__errors {
  padding: var(--bb-space-3, 0.75rem) var(--bb-space-4, 1rem);
  background-color: var(--bb-color-danger-100, #FBE7E5);
  border-radius: var(--bb-radius-md, 0.5rem);
  color: var(--bb-color-danger-600, #A3231B);
  font-size: var(--bb-text-sm, 0.875rem);
}

.bb-popup__success {
  padding: var(--bb-space-4, 1rem) var(--bb-space-5, 1.25rem);
  background-color: var(--bb-color-success-100, #E3F3E9);
  border-radius: var(--bb-radius-md, 0.5rem);
  color: var(--bb-color-success-600, #1B6E3C);
  font-size: var(--bb-text-sm, 0.875rem);
  font-weight: var(--bb-font-weight-medium, 500);
}

.bb-popup__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bb-popup__actions {
  display: flex;
  gap: var(--bb-space-2, 0.5rem);
}

.bb-popup__action {
  flex: 1 1 0;
}

/* Submit / Call Us / WhatsApp Now carry the theme's .bb-btn class too (so
   they pick up any theme refinements for free), but every actual visual
   property is declared again here, scoped under #bb-popup-widget for
   higher specificity than a plain .bb-btn rule — this plugin is meant to be
   dropped onto a site with no BanarasBhraman theme/CSS at all and still
   look like a real, styled button, not a bare browser default. */
#bb-popup-widget .bb-popup__submit,
#bb-popup-widget .bb-popup__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-2, 0.5rem);
  min-height: var(--bb-size-touch-target, 2.75rem);
  padding: var(--bb-space-3, 0.75rem) var(--bb-space-6, 1.5rem);
  border: var(--bb-border-width, 1px) solid transparent;
  border-radius: var(--bb-radius-md, 0.5rem);
  background-color: var(--bb-color-brand, #D84000);
  color: var(--bb-color-text-on-brand, #fff);
  font-size: var(--bb-text-sm, 0.875rem);
  font-weight: var(--bb-font-weight-semibold, 600);
  line-height: var(--bb-leading-none, 1);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

#bb-popup-widget .bb-popup__submit:hover,
#bb-popup-widget .bb-popup__action:hover {
  background-color: var(--bb-color-brand-hover, #B03200);
  color: var(--bb-color-text-on-brand, #fff);
}

#bb-popup-widget .bb-popup__submit {
  width: 100%;
}

#bb-popup-widget .bb-popup__action.bb-btn--secondary {
  background-color: transparent;
  border-color: var(--bb-color-border-strong, #CFC5BF);
  color: var(--bb-color-text, #14100E);
}

#bb-popup-widget .bb-popup__action.bb-btn--secondary:hover {
  background-color: var(--bb-color-brand-subtle, #FFF4ED);
  border-color: var(--bb-color-brand-border, #F7B183);
  color: var(--bb-color-brand-text, #B03200);
}

#bb-popup-widget .bb-popup__action.bb-btn--whatsapp {
  background-color: var(--bb-color-white, #fff);
  border-color: var(--bb-color-border-strong, #CFC5BF);
  color: var(--bb-color-black, #000);
}

#bb-popup-widget .bb-popup__action.bb-btn--whatsapp:hover {
  background-color: var(--bb-color-grey-100, #F2EEEB);
  color: var(--bb-color-black, #000);
}

.bb-popup__submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bb-popup__submit.is-loading::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: bb-popup-spin 0.7s linear infinite;
}

@keyframes bb-popup-spin {
  to { transform: rotate(360deg); }
}

/* ---- Call Now / WhatsApp floating buttons ---- */

.bb-popup-cta {
  position: fixed;
  inset-block-end: var(--bb-space-5, 1.25rem);
  z-index: var(--bb-z-toast, 600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-space-16, 4rem);
  height: var(--bb-space-16, 4rem);
  border-radius: var(--bb-radius-circle, 50%);
  box-shadow: var(--bb-shadow-lg, 0 12px 28px rgb(0 0 0 / 0.2));
  color: var(--bb-color-white, #fff);
  text-decoration: none;
}

.bb-popup-cta--whatsapp {
  inset-inline-end: var(--bb-space-5, 1.25rem);
  background-color: var(--bb-color-whatsapp, #128C4B);
}

.bb-popup-cta--whatsapp:hover {
  background-color: var(--bb-color-whatsapp-hover, #0E7340);
}

@media (prefers-reduced-motion: reduce) {
  .bb-popup__submit.is-loading::before { animation-duration: 1.6s; }
}