/* ── Shared Popup Styles ─────────────────────────────────
 * Used by: Advertise popup (#bs-adv-popup)
 *          Price Alert popup (#bs-price-alert-popup)
 * Dark mode overrides are in bs-dark-mode.css.
 *
 * All selectors scoped under popup IDs for specificity
 * over Elementor/hello-elementor global button styles.
 * ─────────────────────────────────────────────────────── */

/* ── Overlay ─────────────────────────────────────────── */
#bs-adv-popup,
#bs-price-alert-popup {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#bs-adv-popup.is-open,
#bs-price-alert-popup.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── Modal card ──────────────────────────────────────── */
#bs-adv-popup .bs-adv-modal,
#bs-price-alert-popup .bs-adv-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  position: relative;
  overflow: hidden;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s ease;
}
#bs-adv-popup.is-open .bs-adv-modal,
#bs-price-alert-popup.is-open .bs-adv-modal {
  transform: translateY(0) scale(1);
}

/* ── Close button ────────────────────────────────────── */
#bs-adv-popup button.bs-adv-close,
#bs-price-alert-popup button.bs-adv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #888;
  line-height: 0;
  z-index: 2;
  transition: color 0.15s ease;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
  letter-spacing: normal;
  text-transform: none;
}
#bs-adv-popup button.bs-adv-close:hover,
#bs-price-alert-popup button.bs-adv-close:hover {
  background: none;
  color: #171717;
}

/* ── Header area ─────────────────────────────────────── */
#bs-adv-popup .bs-adv-header,
#bs-price-alert-popup .bs-adv-header {
  background: linear-gradient(135deg, #e6f6fc 0%, #e8f1f8 50%, #fdf8e4 100%);
  padding: 28px 28px 20px;
  position: relative;
  overflow: hidden;
}
#bs-adv-popup .bs-adv-header-blocks,
#bs-price-alert-popup .bs-adv-header-blocks {
  position: absolute;
  top: -8px;
  right: -4px;
  opacity: 0.18;
  pointer-events: none;
}
#bs-adv-popup .bs-adv-header-top,
#bs-price-alert-popup .bs-adv-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
}
#bs-adv-popup .bs-adv-block-icon,
#bs-price-alert-popup .bs-adv-block-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
#bs-adv-popup .bs-adv-title,
#bs-price-alert-popup .bs-adv-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #171717;
}
#bs-adv-popup .bs-adv-subtitle,
#bs-price-alert-popup .bs-adv-subtitle {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.55;
  position: relative;
}

/* ── Body ────────────────────────────────────────────── */
#bs-adv-popup .bs-adv-body,
#bs-price-alert-popup .bs-adv-body {
  padding: 20px 28px 26px;
}

/* ── Service pills (advertise only) ──────────────────── */
#bs-adv-popup .bs-adv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
#bs-adv-popup .bs-adv-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #f5f5f5;
  color: #666;
}
#bs-adv-popup .bs-adv-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Form row ────────────────────────────────────────── */
#bs-adv-popup .bs-adv-form-row,
#bs-price-alert-popup .bs-adv-form-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#bs-adv-popup input.bs-adv-email,
#bs-price-alert-popup input.bs-adv-email {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #171717;
  outline: none;
  transition: border-color 0.15s ease;
  box-shadow: none;
}
#bs-adv-popup input.bs-adv-email:focus,
#bs-price-alert-popup input.bs-adv-email:focus {
  border-color: #1DB0E1;
  box-shadow: none;
}
#bs-adv-popup input.bs-adv-email::placeholder,
#bs-price-alert-popup input.bs-adv-email::placeholder {
  color: #aaa;
}
#bs-adv-popup button.bs-adv-submit,
#bs-price-alert-popup button.bs-adv-submit {
  white-space: nowrap;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: #1DB0E1;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: none;
  letter-spacing: normal;
  text-transform: none;
  min-width: 0;
  line-height: normal;
}
#bs-adv-popup button.bs-adv-submit:hover,
#bs-price-alert-popup button.bs-adv-submit:hover {
  background: #1899c5;
  color: #fff;
}

/* ── Success / error states ──────────────────────────── */
#bs-adv-popup .bs-adv-message,
#bs-price-alert-popup .bs-adv-message {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  display: none;
}
#bs-adv-popup .bs-adv-message.is-success,
#bs-price-alert-popup .bs-adv-message.is-success {
  display: block;
  color: #0f6e56;
}
#bs-adv-popup .bs-adv-message.is-error,
#bs-price-alert-popup .bs-adv-message.is-error {
  display: block;
  color: #a32d2d;
}

/* ── PR link (advertise only) ────────────────────────── */
#bs-adv-popup .bs-adv-pr-link {
  margin: 16px 0 0;
  font-size: 13px;
  color: #888;
  text-align: center;
}
#bs-adv-popup .bs-adv-pr-link a {
  color: #1DB0E1;
  text-decoration: none;
}
#bs-adv-popup .bs-adv-pr-link a:hover {
  text-decoration: underline;
}

/* ── Honeypot (spam protection, hidden from real users) ── */
#bs-adv-popup .bs-adv-hp,
#bs-price-alert-popup .bs-adv-hp {
  position: absolute;
  left: -9999px;
}