/*
 * Elevent integration overrides.
 * Keep as late-loading CSS so we can patch plugin/theme styles
 * without editing compiled/minified files.
 */

main#content {
  margin-top: 0 !important;
}

/* Hamburger: explicit color so it's always visible on white header */
.main-header .navbar-toggler .bi {
  color: var(--rtf-plum, #4d2936) !important;
}

/* Elevent header widgets — compact on mobile, normal on desktop */
.elevent-header-widgets {
  font-size: 0.8rem;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .elevent-header-widgets {
    font-size: 1rem;
    margin-left: 1rem;
  }
}

/* 1) Calendar/home cards: preserve full image without aggressive crop */
.cards .card .card-image {
  background-size: contain;
  background-position: center top;
  background-color: #111;
}

.event-grid .fwpl-result .event-image img {
  height: 175px;
  object-fit: contain;
  object-position: center;
  background: #111;
}

/* 2) Single event heading: keep info block top-aligned on desktop */
@media (min-width: 768px) {
  .single-event-elevent .event-heading {
    align-items: flex-start;
  }

  .single-event-elevent .event-heading-right {
    justify-content: flex-start;
    padding-top: 1rem;
  }

  .event-heading-right {
    padding: 1rem 6rem 2rem 2rem;
  }
}

/* 3) Reduce excessive gap between site header and event content */
.single-event-elevent {
  margin-top: 0.5rem;
}

#event-details-wrapper {
  padding-top: 1rem;
}

/* 4) Ticket section below Event Details */
.event-ticket-section {
  margin: 0 0 2rem 0;
}

.event-ticket-divider {
  border: none;
  border-top: 1px solid var(--rtf-light);
  margin: 1.5rem 0 1rem 0;
  opacity: 0.4;
}

.event-ticket-heading {
  font-weight: 500;
  margin-bottom: 0.75rem;
  font-size: inherit;
}

.event-ticket-widget {
  margin: 1rem 0;
}

/* 5) Membership upsell strip — full-width horizontal at bottom of event page */
.event-membership-upsell {
  width: 1320px;
  padding: 3rem 1.5rem;
  margin: -50px auto 0 auto;
  text-align: center;
  background-color: #4d2936;
  color: #FFFFFF;
}

@media (max-width: 1320px) {
  .event-membership-upsell {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .event {
    margin: 0;
  }

  /* Remove the 90px top margin injected via Customizer/plugin on mobile */
  main#content {
    margin-top: 0 !important;
  }
}

.event-membership-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  color: var(--rtf-light);
}

.event-membership-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.event-membership-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 140px;
}

.event-membership-tier-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  text-align: center;
}

/* 6) "Max: 25" color fix — match standard site pink (#FF40B4) */
elevent-ticket-widget [part="max"],
elevent-ticket-widget .max-tickets,
elevent-ticket-widget .max-label {
  color: var(--rtf-neon-pink, #FF40B4) !important;
}

/* 7) Ticket status badge on calendar cards */
.card-ticket-badge {
  padding: 0.5rem;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 130px;
  width: 100%;
  border: 1px solid var(--rtf-light);
  color: var(--rtf-card-text-color);
  opacity: 0.75;
}

/* 8) Elevent ticket widget inside card-footer: match the ticket button style */
.card-elevent-widget {
  display: inline-block;
  max-width: 130px;
  width: 100%;
  vertical-align: top;
  overflow: hidden;
}

.card-elevent-widget elevent-ticket-widget {
  display: block;
  width: 100%;
}

/* Contain any block-level content the widget injects (error boxes, etc.) */
.card-elevent-widget elevent-ticket-widget > *,
.card-elevent-widget > * {
  max-width: 130px !important;
  width: 100% !important;
  font-size: 0.75rem;
  line-height: 1.2;
  box-sizing: border-box;
}

button.btn.elevent-add-to-cart-btn {
    padding: 0.5rem;
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    max-width: 130px;
    width: 100%;
    border: 1px solid #f1f1f1;
    background-color: transparent;
    color: #FF40B4;
    text-decoration: none;
}

.elevent-quantity-selector-quantity {
    color: #ffffff;
}

.elevent-purchase-max-msg, .elevent-sold-out-msg, .elevent-text-danger {
    color: #FF40B4 !important;
}

/* Elevent cart/checkout/session modal — match Rooftop Films dark theme */
.elevent-cart-modal .elevent-modal-box,
.elevent-session-modal .elevent-modal-box,
.elevent-error-modal .elevent-modal-box {
  background-color: #4d2936 !important;
  color: #ffffff !important;
  font-family: inherit !important;
}

/* ── Sign-in modal ─────────────────────────────────────────────────────────
   Real class is elevent-signin-modal (not elevent-session-modal)
   ──────────────────────────────────────────────────────────────────────── */
.elevent-signin-modal .elevent-modal-box {
  background-color: #4d2936 !important;
  color: #ffffff !important;
  font-family: inherit !important;
}

/* Heading strip: elevent-bg-primary adds its own bg/color — reset it, halve the size.
   Scoped globally (not just elevent-signin-modal) because it also appears
   inside the checkout flow modal. */
#elevent-login-header,
.elevent-login-header {
  background-color: transparent !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

/* Labels and misc text */
.elevent-signin-modal label,
.elevent-signin-modal p:not(.elevent-text-danger),
.elevent-signin-modal strong {
  color: #ffffff !important;
}

/* Close X */
.elevent-signin-modal .elevent-close-modal-link {
  color: #ffffff !important;
  opacity: 0.8 !important;
  background: none !important;
  border: none !important;
}

/* Email input */
.elevent-signin-modal .elevent-textbox,
.elevent-signin-modal input[type="email"] {
  background-color: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
  font-family: inherit !important;
}
.elevent-signin-modal .elevent-textbox::placeholder,
.elevent-signin-modal input[type="email"]::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

/* "Continue with Elevent" button */
.elevent-signin-modal .elevent-btn-signin {
  background-color: transparent !important;
  color: #FF40B4 !important;
  border: 1px solid #FF40B4 !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Facebook button has inline !important styles — CSS can't win; JS handles it.
   We just ensure no extra pink border leaks through. */
.elevent-signin-modal .btn:not(.elevent-btn-signin):not(.elevent-cancel-signin-btn) {
  border: none !important;
}

/* Cancel button */
.elevent-signin-modal .elevent-cancel-signin-btn {
  background-color: transparent !important;
  color: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Google button is a Google GSI iframe — can't be styled, wrap it */
.elevent-signin-modal #gSignInWrapper {
  opacity: 0.9;
}

/* Cart item rows — override the near-white backgrounds */
.elevent-list-item {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
}

.elevent-list-item-heading {
  background-color: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

.elevent-list-item-title,
.elevent-item-name,
.elevent-item-price,
.elevent-item-quantity {
  color: #ffffff !important;
}

/* All text inside modal — exclude Google Sign-In button (iframe/shadow DOM) */
.elevent-modal-box__content,
.elevent-modal-box__content * {
  color: #ffffff !important;
}

/* Undo for Google GSI button: revert so Google's own styles win */
#gSignInWrapper,
#gSignInWrapper * {
  color: #000000 !important;
}

/* Donation custom amount: fix layout + styling */
.elevent-currency-field-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
}

.elevent-currency-field-symbol-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  background-color: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 3px !important;
  /* kill Elevent's own border-radius override */
  -webkit-border-radius: 3px !important;
}

.elevent-currency-field-symbol {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  background-color: transparent !important;
}

.elevent-currency-field-container .elevent-textbox,
.elevent-currency-field-container input[type="number"] {
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: 3px !important;
}

.elevent-currency-field-button-container {
  flex-shrink: 0 !important;
}

.elevent-currency-field-button-container .elevent-custom-donation-btn {
  padding: 0.45rem 1.1rem !important;
  white-space: nowrap !important;
  border-radius: 3px !important;
}

/* Form fields: off-white warm background, dark text, comfortable padding */
.elevent-modal-box input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.elevent-modal-box textarea,
.elevent-modal-box select {
  color: #1a1a1a !important;
  background-color: rgba(255,248,245,0.96) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 2px !important;
  padding: 0.5rem 0.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.95rem !important;
}

.elevent-modal-box input::placeholder,
.elevent-modal-box textarea::placeholder {
  color: rgba(0,0,0,0.35) !important;
}

/* Focus: pink outline */
.elevent-modal-box input:focus,
.elevent-modal-box textarea:focus,
.elevent-modal-box select:focus {
  outline: 2px solid #FF40B4 !important;
  outline-offset: 0 !important;
  border-color: transparent !important;
}

/* Checkboxes: accent pink */
.elevent-modal-box input[type="checkbox"],
.elevent-modal-box input[type="radio"] {
  accent-color: #FF40B4;
}

/* Labels: smaller, consistent spacing */
.elevent-modal-box .elevent-label,
.elevent-modal-box label {
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.2rem !important;
  display: block !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Form section heading (applied via JS) */
.rtf-form-section-heading {
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  padding-top: 1.25rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 1rem !important;
}

/* Side-by-side field groups (applied via JS) */
.rtf-field-group {
  display: flex !important;
  gap: 0.6rem !important;
  margin-bottom: 0.6rem !important;
}
.rtf-field-group > * {
  flex: 1 !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

/* Order summary: more padding between rows */
.elevent-modal-box .elevent-list-item-heading {
  padding: 0.4rem 0.75rem !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
.elevent-modal-box .elevent-list-item {
  padding: 0.6rem 0.75rem !important;
}

/* Grand Total row (applied via JS) */
.rtf-grand-total-row {
  border-top: 1px solid rgba(255,255,255,0.25) !important;
  padding-top: 0.5rem !important;
  margin-top: 0.25rem !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
}

/* Continue to Payment: filled pink primary (applied via JS) */
.rtf-btn-payment-primary {
  background-color: #FF40B4 !important;
  color: #ffffff !important;
  border-color: #FF40B4 !important;
  font-weight: 600 !important;
}

/* Buttons inside modal */
.elevent-modal-box .btn:not(.rtf-cart-btn--ghost),
.elevent-modal-box button:not(.elevent-modal__close):not(.rtf-cart-btn--ghost) {
  background-color: transparent !important;
  color: #FF40B4 !important;
  border: 1px solid #FF40B4 !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: normal !important;
}

.elevent-modal-box .btn-primary,
.elevent-modal-box .btn-dark {
  background-color: #FF40B4 !important;
  color: #ffffff !important;
  border-color: #FF40B4 !important;
}

/* Close button — white so it's visible on dark background */
.elevent-modal__close,
.elevent-modal__closeIcon,
.elevent-modal__closeLabel {
  color: #ffffff !important;
  opacity: 0.8 !important;
  background: none !important;
  border: none !important;
}

/* Elevent injects .elevent-close-modal-link { color:#000 !important } dynamically —
   beat it with higher specificity (2 classes vs 1) */
.elevent-modal-box .elevent-close-modal-link {
  color: #ffffff !important;
  opacity: 0.8 !important;
  background: none !important;
  border: none !important;
}

/* Cart action buttons — three tiers */
.rtf-cart-btn--primary {
  background-color: #FF40B4 !important;
  color: #ffffff !important;
  border: 1px solid #FF40B4 !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.rtf-cart-btn--secondary {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  padding: 0.6rem 1.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.rtf-cart-btn--ghost,
.elevent-modal-box .rtf-cart-btn--ghost {
  background-color: transparent !important;
  color: rgba(255,255,255,0.5) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.25rem !important;
  font-size: 0.8rem !important;
  text-decoration: underline !important;
  width: auto !important;
  align-self: center !important;
}

/* Desktop: equalise button heights in footer row */
@media (min-width: 769px) {
  .elevent-modal-box__footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  .elevent-modal-box__footer .rtf-cart-btn--primary,
  .elevent-modal-box__footer .rtf-cart-btn--secondary {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile: fix layout, prevent overflow */
@media (max-width: 768px) {
  /* Push modal below sticky navbar (~72px: 56px logo + 8px padding × 2) */
  .elevent-modal {
    top: 72px !important;
    height: calc(100dvh - 72px) !important;
    min-height: unset !important;
    overflow-y: auto !important;
  }

  /* Modal fits screen, no overflow */
  .elevent-modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: unset !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: calc(100dvh - 72px) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .elevent-modal-box__content {
    padding: 1rem !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .elevent-modal-box__footer {
    padding: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Cart item row: convert floats to flex so columns wrap */
  .elevent-cart-modal .elevent-list-item .elevent-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* All columns: clear floats, stack cleanly */
  .elevent-cart-modal .elevent-list-item [class^="elevent-col"],
  .elevent-cart-modal .elevent-list-item [class*=" elevent-col"] {
    float: none !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove button: always full-width on its own line */
  .elevent-cart-modal .elevent-list-item .btn,
  .elevent-cart-modal .elevent-list-item button {
    float: none !important;
    display: block !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 0.5rem !important;
    box-sizing: border-box !important;
  }

  /* Action buttons: stack vertically, full width */
  .elevent-modal-box__footer .btn,
  .elevent-modal-box__footer button,
  .elevent-modal-box__content > .btn,
  .elevent-modal-box__content > button {
    display: block !important;
    width: 100% !important;
    margin: 0.5rem 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

.event-share {
	margin-top: 0 !important;
}

/* 8) Membership grid — Support page & event page upsell */
.elevent-membership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.elevent-membership-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.elevent-membership-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin: 0;
}

@media (max-width: 600px) {
  .elevent-membership-grid {
    grid-template-columns: 1fr;
  }
}