/* ── Events Calendar Pro ── Frontend Styles ───────────────────────────────── */

.ecp-wrapper {
  --ecp-card-bg: #1c1f2a;
  --ecp-card-bg-hover: #23273a;
  --ecp-card-border: #2a2e3d;
  --ecp-text: #ffffff;
  --ecp-text-dim: #9aa0b4;
  --ecp-pill-bg: #14171f;
  --ecp-pill-border: #2a2e3d;
  --ecp-accent: #4f46e5;
  --ecp-accent-hover: #6366f1;
  --ecp-popup-grad: linear-gradient(
    135deg,
    #4f46e5 0%,
    #a855f7 45%,
    #ec4899 75%,
    #f97316 100%
  );

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  color: var(--ecp-text);
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 18px;
  box-sizing: border-box;
}
.ecp-wrapper *,
.ecp-wrapper *::before,
.ecp-wrapper *::after {
  box-sizing: border-box;
}

/* ── Main title (above the filter bar) ─────────────────────────────────────
   Color inherits from the theme by default so it works on both light and
   dark page backgrounds. Override via Settings → Heading Color. */
.ecp-main-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 0 0 18px;
  line-height: 1.15;
}

/* ── Section subtitles (Upcoming Events / Past Events) ─────────────────────
   Same size as the main title per the client reference image. */
.ecp-section-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 32px 0 16px;
  line-height: 1.15;
}
.ecp-past-title {
  margin-top: 36px;
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */
.ecp-filter-bar {
  margin-bottom: 18px;
}
.ecp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ecp-filter {
  position: relative;
}

/* Selector specificity is intentionally bumped (`.ecp-wrapper button.xxx`)
   so the host theme's `button` rule can't beat us.
   Default look: solid purple pill (matches client reference image).
   Override via Settings → Filter Buttons (background / border / text). */
.ecp-wrapper button.ecp-filter-btn,
.ecp-wrapper .ecp-filter-btn {
  background: var(--ecp-accent) !important;
  background-color: var(--ecp-accent) !important;
  background-image: none !important;
  border: 1px solid var(--ecp-accent) !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: var(--ecp-btn-radius, 8px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition:
    background 0.2s,
    border-color 0.2s,
    opacity 0.2s;
}
.ecp-wrapper button.ecp-filter-btn:hover {
  background: var(--ecp-accent-hover) !important;
  background-color: var(--ecp-accent-hover) !important;
  border-color: var(--ecp-accent-hover) !important;
}
.ecp-wrapper .ecp-filter.active button.ecp-filter-btn,
.ecp-wrapper .ecp-filter.open button.ecp-filter-btn {
  background: var(--ecp-accent-hover) !important;
  background-color: var(--ecp-accent-hover) !important;
  border-color: var(--ecp-accent-hover) !important;
}
.ecp-arrow {
  font-size: 9px;
  opacity: 0.7;
}

.ecp-filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--ecp-card-bg);
  border: 1px solid var(--ecp-card-border);
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.ecp-filter.open .ecp-filter-menu {
  display: block;
}

.ecp-filter-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ecp-text);
  cursor: pointer;
  white-space: nowrap;
}
.ecp-filter-menu label:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Safari renders native radios oversized — fix the size explicitly so the
   label text doesn't get pushed off / wrap onto a second line. */
.ecp-filter-menu input[type="radio"] {
  accent-color: var(--ecp-accent);
  width: 14px !important;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Event list ────────────────────────────────────────────────────────────── */
.ecp-event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.ecp-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--ecp-card-bg);
  border: var(--ecp-card-border-width, 2px) solid var(--ecp-card-border);
  border-radius: var(--ecp-card-radius, 8px);
  padding: 18px 22px;
  transition:
    border-color 0.2s,
    transform 0.2s,
    background 0.2s;
  cursor: pointer;
}
.ecp-card:hover {
  background: var(--ecp-card-bg-hover);
  border-color: var(--ecp-accent-hover);
  transform: translateY(-1px);
}

/* ── Date badge ────────────────────────────────────────────────────────────── */
.ecp-date-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  min-width: 42px;
  padding-right: 18px;
  color: var(--ecp-text);
}
/* Vertical splitter sitting between the date badge and the card image */
.ecp-date-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--ecp-card-border);
  opacity: 0.6;
}
.ecp-date-day {
  font-size: 30px;
  font-weight: 800;
  display: inline-block;
  transform-origin: center;
  transition: transform 0.2s ease;
}
.ecp-date-month {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--ecp-text-dim);
  text-transform: uppercase;
  margin-top: 4px;
  display: inline-block;
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* Card hover: bump the whole date (day + month) up a touch for a "lift" feel */
.ecp-card:hover .ecp-date-day,
.ecp-card:hover .ecp-date-month {
  transform: scale(1.12);
}

/* ── Card image (square w/ rounded corners) ───────────────────────────────── */
.ecp-card-image {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: #2a2e3d;
  flex-shrink: 0;
  margin-left: 8px;
}
.ecp-no-image {
  background: linear-gradient(135deg, #4f46e5, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.ecp-no-image::after {
  content: "📅";
}

/* ── Card body ─────────────────────────────────────────────────────────────── */
.ecp-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Description snippet — short excerpt under the title, clamped to 2 lines */
.ecp-wrapper .ecp-card-snippet {
  font-size: 13px !important;
  color: var(--ecp-text-dim) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  background: transparent !important;
}

/* Topic / Event Type chip above the card title (purple) */
.ecp-wrapper .ecp-card-topic {
  align-self: flex-start;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ecp-accent);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.4;
  margin-bottom: 0;
}

/* Specificity bump (`.ecp-wrapper h3.ecp-card-title`) defeats theme h2/h3 colors. */
.ecp-wrapper h3.ecp-card-title,
.ecp-wrapper .ecp-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ecp-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  background: transparent !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ecp-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Pills (time / location) ───────────────────────────────────────────────── */
.ecp-wrapper .ecp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ecp-pill-bg) !important;
  background-color: var(--ecp-pill-bg) !important;
  border: 1px solid var(--ecp-pill-border) !important;
  color: var(--ecp-text-dim) !important;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.ecp-pill svg {
  opacity: 0.85;
}

.ecp-wrapper .ecp-date-month {
  color: var(--ecp-text-dim) !important;
}
.ecp-wrapper .ecp-date-day {
  color: var(--ecp-text) !important;
}

/* Hidden cards (set by JS when filter / search excludes them) */
.ecp-wrapper .ecp-card.ecp-card-hidden {
  display: none !important;
}

/* ── Register button ──────────────────────────────────────────────────────── */
.ecp-wrapper button.ecp-btn,
.ecp-wrapper .ecp-btn {
  background: var(--ecp-accent) !important;
  background-color: var(--ecp-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: var(--ecp-btn-radius, 8px) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none !important;
  text-shadow: none !important;
}
.ecp-wrapper button.ecp-btn:hover,
.ecp-wrapper .ecp-btn:hover {
  background: var(--ecp-accent-hover) !important;
  background-color: var(--ecp-accent-hover) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

.ecp-btn-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.ecp-btn-ghost:hover {
  background: #fff;
  color: var(--ecp-accent);
}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.ecp-no-events,
.ecp-no-results {
  text-align: center;
  color: var(--ecp-text-dim);
  padding: 30px 20px;
  font-size: 14px;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
#ecp-overlay.ecp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999998;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#ecp-overlay.ecp-overlay.active {
  display: block !important;
  animation: ecpFadeIn 0.2s ease;
}
@keyframes ecpFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Popup ────────────────────────────────────────────────────────────────── */
/* High-specificity selector + explicit values so Elementor / theme wrappers
   can't break fixed-positioning or stacking. The popup is also moved to <body>
   on init by JS to escape any transformed ancestor. */
#ecp-popup.ecp-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 999999;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  background: var(
    --ecp-popup-grad,
    linear-gradient(135deg, #4f46e5 0%, #a855f7 45%, #ec4899 75%, #f97316 100%)
  );
  color: #fff;
  margin: 0;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  /* Firefox: thin scrollbar with darker translucent thumb on transparent track */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.38) transparent;
}
#ecp-popup.ecp-popup * {
  box-sizing: border-box;
}

/* WebKit / Blink (Chrome, Safari, Edge): transparent track, slim thumb,
   so the gradient/image continues cleanly to the rounded right edge. */
#ecp-popup.ecp-popup::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#ecp-popup.ecp-popup::-webkit-scrollbar-track,
#ecp-popup.ecp-popup::-webkit-scrollbar-corner {
  background: transparent;
}
#ecp-popup.ecp-popup::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.38);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
#ecp-popup.ecp-popup::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.55);
  background-clip: padding-box;
}
/* Halftone-style dot overlay on top of the gradient.
   To swap in a custom texture, drop an image at images/popup-bg.jpg
   and change `background` above to: url(../images/popup-bg.jpg) center/cover. */
.ecp-popup::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 78% 22%,
      rgba(255, 255, 255, 0.18) 0,
      transparent 40%
    ),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1.2px, transparent 1.6px);
  background-size:
    auto,
    14px 14px;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
#ecp-popup.ecp-popup.active {
  display: block !important;
  animation: ecpPopupIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ecpPopupIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Close button — purple by default; theme `button{...}` rules and the host
   styles can't beat the higher specificity + !important here. */
#ecp-popup .ecp-popup-close,
.ecp-popup-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: #4f46e5 !important;
  background-color: #4f46e5 !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #4f46e5 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
  z-index: 11;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  text-shadow: none !important;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
#ecp-popup .ecp-popup-close:hover,
.ecp-popup-close:hover {
  background: #4338ca !important;
  background-color: #4338ca !important;
  border-color: #4338ca !important;
  transform: scale(1.05);
}

#ecp-popup .ecp-popup-inner {
  position: relative;
  z-index: 1;
  padding: 36px 32px 32px;
  color: #fff !important;
}

/* Force white text everywhere inside the popup (themes often override h2/h3/p). */
#ecp-popup .ecp-popup-inner,
#ecp-popup .ecp-popup-inner h2,
#ecp-popup .ecp-popup-inner h3,
#ecp-popup .ecp-popup-inner h4,
#ecp-popup .ecp-popup-inner p,
#ecp-popup .ecp-popup-inner li,
#ecp-popup .ecp-popup-inner span,
#ecp-popup .ecp-popup-inner small,
#ecp-popup .ecp-popup-inner strong,
#ecp-popup .ecp-popup-inner label {
  color: #fff !important;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

#ecp-popup .ecp-popup-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 40px 6px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px;
}
#ecp-popup .ecp-popup-topic {
  display: inline-block;
  font-size: 11px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.22);
  padding: 4px 11px !important;
  border-radius: 999px !important;
  margin-bottom: 18px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

#ecp-popup .ecp-popup-section-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 18px 0 8px !important;
  letter-spacing: -0.2px;
}

#ecp-popup .ecp-popup-list {
  list-style: disc !important;
  padding-left: 22px !important;
  margin: 0 0 4px !important;
  color: #fff !important;
  background: transparent !important;
}
#ecp-popup .ecp-popup-list li {
  margin: 5px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #fff !important;
  list-style: disc !important;
}
#ecp-popup .ecp-popup-list li::marker {
  color: #fff;
}
#ecp-popup .ecp-popup-list li strong {
  font-weight: 700 !important;
  color: #fff !important;
}

#ecp-popup .ecp-popup-description {
  font-size: 14px !important;
  color: #fff !important;
  line-height: 1.6 !important;
  margin: 6px 0 16px !important;
  background: transparent !important;
}

#ecp-popup .ecp-popup-form-intro {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 22px 0 14px !important;
}
#ecp-popup .ecp-popup-speaker-info p {
  font-weight: 700 !important;
  font-size: 14px !important;
}
#ecp-popup .ecp-popup-speaker-label {
  font-size: 10px !important;
  letter-spacing: 1px !important;
}
#ecp-popup .ecp-popup-speaker-bio {
  font-size: 12.5px !important;
}

/* ── Speaker block ────────────────────────────────────────────────────────── */
.ecp-popup-speaker {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, 0.13);
  padding: 12px 14px;
  border-radius: 12px;
  margin: 14px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ecp-popup-speaker-image {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.ecp-popup-speaker-info {
  flex: 1;
  min-width: 0;
}
.ecp-popup-speaker-info p {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.ecp-popup-speaker-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2px;
}
.ecp-popup-speaker-bio {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 3px;
}
/* Stack multiple speakers with breathing room between them */
.ecp-popup-speaker + .ecp-popup-speaker {
  margin-top: 10px;
}

/* Speaker social-link buttons (Title, URL, Target structured fields) */
.ecp-popup-speaker-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#ecp-popup .ecp-popup-social-link {
  display: inline-block;
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.3;
  transition:
    background 0.2s,
    transform 0.15s;
  border: none !important;
}
#ecp-popup .ecp-popup-social-link:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: translateY(-1px);
}

.ecp-popup-form-intro {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 22px 0 14px;
}

.ecp-popup-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ecp-form-missing {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.08);
  padding: 12px;
  border-radius: 10px;
  margin: 0;
}

/* ── HubSpot form override (rounded white-on-gradient look) ───────────────── */
/* Selector specificity is bumped with the #ecp-popup prefix so HubSpot's own
   stylesheet (and any theme styles) cannot beat us. We also pass css:'' to
   hbspt.forms.create() to suppress HubSpot's default styling entirely. */
#ecp-popup .ecp-hubspot-form,
#ecp-popup .ecp-hubspot-form * {
  color: #fff !important;
  box-sizing: border-box !important;
}

#ecp-popup .ecp-hubspot-form .hs-form-field {
  margin-bottom: 14px !important;
}

#ecp-popup .ecp-hubspot-form form,
#ecp-popup .ecp-hubspot-form fieldset {
  background: transparent !important;
}

#ecp-popup .ecp-hubspot-form label,
#ecp-popup .ecp-hubspot-form .hs-form-field > label {
  display: block !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
  background: transparent !important;
}
/* Spans INSIDE the label (the field name + the required *) stay inline so the
   asterisk sits at the END of the label text, not on a new line below it. */
#ecp-popup .ecp-hubspot-form .hs-form-field > label > span,
#ecp-popup .ecp-hubspot-form label > span {
  display: inline !important;
  margin: 0 !important;
}
#ecp-popup .ecp-hubspot-form .hs-form-required {
  display: inline !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-left: 3px !important;
  font-weight: 500 !important;
}

#ecp-popup .ecp-hubspot-form input[type="text"],
#ecp-popup .ecp-hubspot-form input[type="email"],
#ecp-popup .ecp-hubspot-form input[type="tel"],
#ecp-popup .ecp-hubspot-form input[type="number"],
#ecp-popup .ecp-hubspot-form input[type="url"],
#ecp-popup .ecp-hubspot-form input[type="password"],
#ecp-popup .ecp-hubspot-form select,
#ecp-popup .ecp-hubspot-form textarea {
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  color: #fff !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  height: auto !important;
}
#ecp-popup .ecp-hubspot-form textarea {
  border-radius: 16px !important;
  min-height: 90px !important;
}
#ecp-popup .ecp-hubspot-form input::placeholder,
#ecp-popup .ecp-hubspot-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}
#ecp-popup .ecp-hubspot-form input:focus,
#ecp-popup .ecp-hubspot-form select:focus,
#ecp-popup .ecp-hubspot-form textarea:focus {
  border-color: #fff !important;
}

#ecp-popup .ecp-hubspot-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 36px !important;
}
#ecp-popup .ecp-hubspot-form select option {
  color: #1c1f2a;
  background: #fff;
}

/* HubSpot 2-column rows */
#ecp-popup .ecp-hubspot-form fieldset.form-columns-2 .hs-form-field {
  width: 48% !important;
  float: left !important;
}
#ecp-popup
  .ecp-hubspot-form
  fieldset.form-columns-2
  .hs-form-field:first-child {
  margin-right: 4% !important;
}
#ecp-popup .ecp-hubspot-form fieldset.form-columns-2 .input {
  margin-right: 0 !important;
}
#ecp-popup .ecp-hubspot-form fieldset {
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}
#ecp-popup .ecp-hubspot-form .hs-form-field > .input {
  margin-right: 0 !important;
}
#ecp-popup .ecp-hubspot-form fieldset::after {
  content: "";
  display: table;
  clear: both;
}

/* Checkboxes */
#ecp-popup .ecp-hubspot-form .hs-form-booleancheckbox label,
#ecp-popup .ecp-hubspot-form .hs-fieldtype-booleancheckbox label,
#ecp-popup .ecp-hubspot-form .legal-consent-container label,
#ecp-popup .ecp-hubspot-form ul.inputs-list li label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 400 !important;
}
#ecp-popup .ecp-hubspot-form ul.inputs-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#ecp-popup .ecp-hubspot-form input[type="checkbox"],
#ecp-popup .ecp-hubspot-form input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #fff !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}
#ecp-popup .ecp-hubspot-form .legal-consent-container {
  margin: 14px 0 6px !important;
}
#ecp-popup .ecp-hubspot-form .legal-consent-container a,
#ecp-popup .ecp-hubspot-form a {
  color: #fff !important;
  text-decoration: underline !important;
}

/* Submit button — outlined white pill */
#ecp-popup .ecp-hubspot-form .hs-button,
#ecp-popup .ecp-hubspot-form input[type="submit"],
#ecp-popup .ecp-hubspot-form button[type="submit"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  padding: 10px 28px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition:
    background 0.2s,
    color 0.2s !important;
  text-transform: none !important;
  margin-top: 6px !important;
  width: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#ecp-popup .ecp-hubspot-form .hs-button:hover,
#ecp-popup .ecp-hubspot-form input[type="submit"]:hover,
#ecp-popup .ecp-hubspot-form button[type="submit"]:hover {
  background: #fff !important;
  color: #4f46e5 !important;
}

#ecp-popup .ecp-hubspot-form .hs-error-msgs label,
#ecp-popup .ecp-hubspot-form .hs-error-msg {
  color: #ffe1e1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Hide HubSpot free-tier "Create your own free forms" promo bar in the popup */
#ecp-popup .ecp-hubspot-form .hs_recaptcha,
#ecp-popup .ecp-hubspot-form .hubspot-link-info,
#ecp-popup .ecp-hubspot-form .grecaptcha-badge {
  background: transparent !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ecp-section-title {
    font-size: 22px;
  }
  .ecp-main-title {
    font-size: 26px;
  }

  /* ── MOBILE CARD: vertical stack (date → image → topic+title+pills → button) ── */
  .ecp-card {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 14px;
  }

  /* Date — top-left, no vertical splitter */
  .ecp-date-badge {
    align-self: flex-start;
    align-items: flex-start;
    padding-right: 0;
    min-width: auto;
    flex-direction: row;
    gap: 8px;
  }
  .ecp-date-badge::after {
    display: none;
  }
  .ecp-date-day {
    font-size: 28px;
  }
  .ecp-date-month {
    margin-top: 0;
    align-self: flex-end;
    padding-bottom: 4px;
  }

  /* Image — full width, taller, sits centered in the card */
  .ecp-card-image {
    width: 100%;
    height: 180px;
    margin-left: 0;
    border-radius: 12px;
  }

  /* Body — full width, normal text wrapping */
  .ecp-card-body {
    gap: 10px;
  }
  .ecp-card-title {
    font-size: 18px;
    white-space: normal;
  }
  .ecp-pill {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Register button — full width at the bottom */
  .ecp-wrapper button.ecp-btn,
  .ecp-wrapper .ecp-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 22px !important;
    font-size: 13px !important;
  }

  .ecp-popup-inner {
    padding: 30px 22px 24px;
  }
  .ecp-popup-title {
    font-size: 20px;
  }
  .ecp-hubspot-form fieldset.form-columns-2 .hs-form-field {
    width: 100% !important;
    float: none;
    margin-right: 0 !important;
  }
}