.elementor-169 .elementor-element.elementor-element-6476645{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 35px;--row-gap:0px;--column-gap:35px;}.elementor-169 .elementor-element.elementor-element-be787f8{--display:flex;}.elementor-169 .elementor-element.elementor-element-e951c8e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-169 .elementor-element.elementor-element-8956c1b{--display:flex;}.elementor-169 .elementor-element.elementor-element-8f08b05{--display:flex;}.elementor-169 .elementor-element.elementor-element-86a7c86{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-169 .elementor-element.elementor-element-1224e79{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-169 .elementor-element.elementor-element-b60b5e2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-169 .elementor-element.elementor-element-6974232{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-169 .elementor-element.elementor-element-8d342a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-169 .elementor-element.elementor-element-6476645{--content-width:90%;}.elementor-169 .elementor-element.elementor-element-be787f8{--width:50%;}.elementor-169 .elementor-element.elementor-element-e951c8e{--width:50%;}.elementor-169 .elementor-element.elementor-element-86a7c86{--content-width:80%;}.elementor-169 .elementor-element.elementor-element-b60b5e2{--content-width:89%;}.elementor-169 .elementor-element.elementor-element-6974232{--width:50%;}.elementor-169 .elementor-element.elementor-element-8d342a1{--width:50%;}}/* Start custom CSS for shortcode, class: .elementor-element-2351233 *//* ============================================
   MINDSET MMA — UPCOMING SESSIONS WIDGET CSS
   Paste into: the Elementor widget's Custom CSS
   (or Site Settings > Custom CSS as a separate block)
   ============================================ */


/* ----- BRAND TOKENS (same as schedule) ----- */
:root {
  --mm-bg: #0a0a0a;
  --mm-card: #141414;
  --mm-card-hover: #1c1c1c;
  --mm-border: #2a2a2a;
  --mm-accent: #DBAD02;
  --mm-accent-hover: #f0c211;
  --mm-white: #ffffff;
  --mm-grey: #a0a0a0;
  --mm-muted: #666666;
  --mm-radius: 8px;
  --mm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}


/* =============================================
   CONTAINER & PARENT BACKGROUND FIX
   ============================================= */

.cmp-upcoming,
.elementor-shortcode .cmp-upcoming,
.elementor-widget-shortcode .cmp-upcoming,
.elementor-widget-shortcode .elementor-widget-container {
  background: var(--mm-bg) !important;
  font-family: var(--mm-font) !important;
  padding: 1.5rem !important;
  border-radius: var(--mm-radius) !important;
}

.cmp-upcoming-title {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 1rem 0 !important;
}

.cmp-upcoming-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}


/* =============================================
   SESSION ITEMS
   ============================================= */

.cmp-upcoming-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.875rem 1rem !important;
  border: 1px solid var(--mm-border) !important;
  border-left: 3px solid var(--mm-accent) !important;
  border-radius: var(--mm-radius) !important;
  background: var(--mm-card) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.cmp-upcoming-item:hover {
  background: var(--mm-card-hover) !important;
  border-left-color: var(--mm-accent-hover) !important;
  box-shadow: none !important;
}


/* =============================================
   DATE BADGE
   ============================================= */

.cmp-upcoming-date-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  padding: 8px 6px !important;
  border-radius: 6px !important;
  background: var(--mm-accent) !important;
  color: #0a0a0a !important;
  text-align: center !important;
  line-height: 1.1 !important;
  flex-shrink: 0 !important;
}

.cmp-upcoming-date-day {
  font-family: var(--mm-font) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  opacity: 0.8 !important;
  color: #0a0a0a !important;
}

.cmp-upcoming-date-num {
  font-family: var(--mm-font) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
}

.cmp-upcoming-date-month {
  font-family: var(--mm-font) !important;
  font-size: 0.55rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  opacity: 0.75 !important;
  color: #0a0a0a !important;
}


/* =============================================
   INFO BLOCK
   ============================================= */

.cmp-upcoming-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.cmp-upcoming-name {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-bottom: 3px !important;
}

.cmp-upcoming-meta {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
}

.cmp-upcoming-meta span {
  color: var(--mm-grey) !important;
}


/* =============================================
   SPOTS
   ============================================= */

.cmp-upcoming-spots {
  font-family: var(--mm-font) !important;
  font-size: 0.72rem !important;
  margin-top: 3px !important;
}

.cmp-upcoming-spots-available {
  color: #34d399 !important;
}

.cmp-upcoming-spots-low {
  color: var(--mm-accent) !important;
  font-weight: 600 !important;
}

.cmp-upcoming-spots-full {
  color: #ef4444 !important;
  font-weight: 600 !important;
}


/* =============================================
   ACTIONS & BUTTONS
   ============================================= */

.cmp-upcoming-actions {
  flex-shrink: 0 !important;
}

.cmp-upcoming-book-btn {
  background: var(--mm-accent) !important;
  color: #0a0a0a !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.cmp-upcoming-book-btn:hover {
  background: var(--mm-accent-hover) !important;
  color: #0a0a0a !important;
}

.cmp-upcoming-book-btn.cmp-btn-disabled {
  background: var(--mm-border) !important;
  color: var(--mm-muted) !important;
  cursor: not-allowed !important;
}

.cmp-upcoming-waitlist-btn {
  background: transparent !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 1rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.cmp-upcoming-waitlist-btn:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-accent) !important;
}

.cmp-upcoming-login-link {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.78rem !important;
  text-decoration: none !important;
}

.cmp-upcoming-login-link:hover {
  color: var(--mm-accent-hover) !important;
  text-decoration: underline !important;
}


/* =============================================
   EMPTY STATE
   ============================================= */

.cmp-upcoming-empty {
  padding: 1.5rem !important;
  text-align: center !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.9rem !important;
  border: 1px dashed var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  background: transparent !important;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .cmp-upcoming {
    padding: 1rem !important;
  }

  .cmp-upcoming-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  .cmp-upcoming-date-badge {
    flex-direction: row !important;
    gap: 6px !important;
    min-width: unset !important;
    padding: 5px 10px !important;
  }

  .cmp-upcoming-date-num {
    font-size: 0.95rem !important;
  }

  .cmp-upcoming-actions {
    width: 100% !important;
  }

  .cmp-upcoming-book-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================
   MINDSET MMA — BOOKING MODAL CSS
   Paste into: Elementor > Site Settings > Custom CSS
   (or widget-level custom CSS)
   ============================================ */


/* ----- BRAND TOKENS (same as schedule/upcoming) ----- */
:root {
  --mm-bg: #0a0a0a;
  --mm-card: #141414;
  --mm-card-hover: #1c1c1c;
  --mm-border: #2a2a2a;
  --mm-accent: #DBAD02;
  --mm-accent-hover: #f0c211;
  --mm-white: #ffffff;
  --mm-grey: #a0a0a0;
  --mm-muted: #666666;
  --mm-radius: 8px;
  --mm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}


/* =============================================
   OVERLAY
   ============================================= */

.cmp-modal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}


/* =============================================
   MODAL CONTAINER
   ============================================= */

.cmp-booking-modal {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  font-family: var(--mm-font) !important;
  max-width: 480px !important;
  width: 90% !important;
  overflow: hidden !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
}


/* =============================================
   HEADER
   ============================================= */

.cmp-booking-modal-header {
  background: var(--mm-bg) !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-booking-modal-header h3 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

.cmp-booking-modal-close {
  background: transparent !important;
  border: none !important;
  color: var(--mm-muted) !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: color 0.2s ease !important;
}

.cmp-booking-modal-close:hover {
  color: var(--mm-accent) !important;
}


/* =============================================
   BODY
   ============================================= */

.cmp-booking-modal-body {
  padding: 1.25rem !important;
  background: var(--mm-card) !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.9rem !important;
}


/* ----- Session info block ----- */
.cmp-booking-session-info {
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-booking-session-info h4 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  margin: 0 0 0.35rem 0 !important;
}

.cmp-booking-session-info p {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  margin: 0 0 0.2rem 0 !important;
  line-height: 1.4 !important;
}

.cmp-booking-session-info .cmp-session-availability {
  margin-top: 0.5rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.cmp-booking-session-info .cmp-session-availability.available {
  color: #34d399 !important;
}

.cmp-booking-session-info .cmp-session-availability.low {
  color: var(--mm-accent) !important;
}

.cmp-booking-session-info .cmp-session-availability.full {
  color: #ef4444 !important;
}


/* =============================================
   BOOKING OPTIONS (radio cards)
   ============================================= */

.cmp-booking-options {
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-booking-option {
  background: var(--mm-bg) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 6px !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.4rem !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.cmp-booking-option:last-child {
  margin-bottom: 0 !important;
}

.cmp-booking-option:hover {
  border-color: var(--mm-accent) !important;
  background: var(--mm-card-hover) !important;
}

.cmp-booking-option.selected {
  border-color: var(--mm-accent) !important;
  background: rgba(219, 173, 2, 0.08) !important;
}

.cmp-booking-option label {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  cursor: pointer !important;
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.cmp-booking-option input[type="radio"] {
  accent-color: var(--mm-accent) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.cmp-booking-option label span {
  color: var(--mm-white) !important;
}


/* =============================================
   PAYMENT INFO
   ============================================= */

.cmp-payment-info {
  margin-bottom: 0 !important;
}

.cmp-payment-info h4 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 0.6rem 0 !important;
}


/* ----- Alert banners ----- */
.cmp-alert {
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 0.7rem 1rem !important;
  border-radius: 6px !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
}

.cmp-alert:last-child {
  margin-bottom: 0 !important;
}

.cmp-alert-warning {
  background: rgba(219, 173, 2, 0.1) !important;
  border: 1px solid rgba(219, 173, 2, 0.3) !important;
  color: var(--mm-accent) !important;
}

.cmp-alert-success {
  background: rgba(52, 211, 153, 0.1) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #34d399 !important;
}

.cmp-alert-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.cmp-alert-info {
  background: rgba(96, 165, 250, 0.1) !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
  color: #60a5fa !important;
}


/* =============================================
   FOOTER
   ============================================= */

.cmp-booking-modal-footer {
  background: var(--mm-bg) !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  border-top: 1px solid var(--mm-border) !important;
}

/* Cancel button */
.cmp-btn-secondary,
.cmp-booking-modal-footer .cmp-booking-modal-close {
  background: transparent !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cmp-btn-secondary:hover,
.cmp-booking-modal-footer .cmp-booking-modal-close:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-white) !important;
}

/* Confirm button */
.cmp-confirm-booking,
.cmp-booking-modal-footer .cmp-btn-primary {
  background: var(--mm-accent) !important;
  color: #0a0a0a !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.cmp-confirm-booking:hover,
.cmp-booking-modal-footer .cmp-btn-primary:hover {
  background: var(--mm-accent-hover) !important;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .cmp-booking-modal {
    width: 95% !important;
    max-width: none !important;
  }

  .cmp-booking-modal-footer {
    flex-direction: column-reverse !important;
  }

  .cmp-confirm-booking,
  .cmp-booking-modal-footer .cmp-btn-primary,
  .cmp-btn-secondary,
  .cmp-booking-modal-footer .cmp-booking-modal-close {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-fc86cb6 *//* ============================================
   MINDSET MMA — MY BOOKINGS CSS
   Paste into: Elementor > Site Settings > Custom CSS
   (or widget-level custom CSS)
   ============================================ */


/* ----- BRAND TOKENS (same across all components) ----- */
:root {
  --mm-bg: #0a0a0a;
  --mm-card: #141414;
  --mm-card-hover: #1c1c1c;
  --mm-border: #2a2a2a;
  --mm-accent: #DBAD02;
  --mm-accent-hover: #f0c211;
  --mm-white: #ffffff;
  --mm-grey: #a0a0a0;
  --mm-muted: #666666;
  --mm-radius: 8px;
  --mm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}


/* =============================================
   CONTAINER & PARENT BACKGROUND FIX
   ============================================= */

.cmp-my-bookings,
.cmp-my-bookings *,
.elementor-shortcode .cmp-my-bookings,
.elementor-widget-shortcode .cmp-my-bookings,
.elementor-widget-shortcode .elementor-widget-container {
  background-color: transparent !important;
  box-shadow: none !important;
}

.cmp-my-bookings {
  background: var(--mm-bg) !important;
  font-family: var(--mm-font) !important;
  padding: 1.5rem !important;
  border-radius: var(--mm-radius) !important;
}

/* Re-apply backgrounds we need */
.cmp-booking-card,
.cmp-booking-item {
  background: var(--mm-card) !important;
}


/* =============================================
   HEADER
   ============================================= */

.cmp-bookings-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

.cmp-bookings-header h2 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

/* Download Calendar button */
.cmp-bookings-header .cmp-btn-secondary {
  background: transparent !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.45rem 1rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  transition: all 0.2s ease !important;
}

.cmp-bookings-header .cmp-btn-secondary:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-accent) !important;
}

.cmp-bookings-header .cmp-btn-secondary .dashicons {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}


/* =============================================
   SECTIONS (Upcoming / Waitlist / Past)
   ============================================= */

.cmp-bookings-section {
  margin-bottom: 1.5rem !important;
}

.cmp-bookings-section:last-child {
  margin-bottom: 0 !important;
}

.cmp-bookings-section h3 {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding-bottom: 0.5rem !important;
  margin: 0 0 0.75rem 0 !important;
  border-bottom: 1px solid var(--mm-border) !important;
}


/* =============================================
   EMPTY STATE
   ============================================= */

.cmp-no-bookings {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  padding: 1.25rem !important;
  text-align: center !important;
  border: 1px dashed var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  background: transparent !important;
  margin: 0 !important;
}


/* =============================================
   BOOKING CARDS (for when bookings exist)
   ============================================= */

.cmp-booking-card {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-left: 3px solid var(--mm-accent) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.cmp-booking-card:hover {
  background: var(--mm-card-hover) !important;
  border-left-color: var(--mm-accent-hover) !important;
}

.cmp-booking-card:last-child {
  margin-bottom: 0 !important;
}

/* Booking card content */
.cmp-booking-card h4,
.cmp-booking-card .cmp-booking-name {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 0 0.15rem 0 !important;
}

.cmp-booking-card p,
.cmp-booking-card .cmp-booking-meta {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  margin: 0 0 0.15rem 0 !important;
}

.cmp-booking-card .cmp-booking-location {
  color: var(--mm-muted) !important;
  font-size: 0.75rem !important;
}

/* Status badges */
.cmp-booking-status {
  font-family: var(--mm-font) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  display: inline-block !important;
}

.cmp-booking-status-confirmed {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
}

.cmp-booking-status-waitlisted {
  background: rgba(219, 173, 2, 0.12) !important;
  color: var(--mm-accent) !important;
}

.cmp-booking-status-cancelled {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

.cmp-booking-status-completed {
  background: rgba(160, 160, 160, 0.12) !important;
  color: var(--mm-grey) !important;
}

/* Cancel / action buttons inside booking cards */
.cmp-booking-card .cmp-btn,
.cmp-booking-cancel-btn {
  background: transparent !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cmp-booking-card .cmp-btn:hover,
.cmp-booking-cancel-btn:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}


/* =============================================
   BOOKING ITEMS (actual booking rows)
   ============================================= */

.cmp-bookings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.cmp-booking-item {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-left: 3px solid var(--mm-accent) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

/* Strip rogue borders/padding from all children */
.cmp-booking-item *,
.cmp-booking-item p,
.cmp-booking-item div {
  border: none !important;
  box-shadow: none !important;
}

/* Re-apply the outer card border */
.cmp-booking-item {
  border: 1px solid var(--mm-border) !important;
  border-left: 3px solid var(--mm-accent) !important;
}

.cmp-booking-item:hover {
  background: var(--mm-card-hover) !important;
  border-left-color: var(--mm-accent-hover) !important;
  border-top: 1px solid var(--mm-border) !important;
  border-right: 1px solid var(--mm-border) !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

/* ----- Date badge ----- */
.cmp-booking-date {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  padding: 6px 4px !important;
  border-radius: 6px !important;
  background: var(--mm-accent) !important;
  text-align: center !important;
  line-height: 1.1 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

.cmp-booking-day {
  font-family: var(--mm-font) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
}

.cmp-booking-month {
  font-family: var(--mm-font) !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #0a0a0a !important;
  opacity: 0.75 !important;
}

/* ----- Details ----- */
.cmp-booking-details {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.cmp-booking-details h4 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 0 0.15rem 0 !important;
  padding: 0 !important;
}

.cmp-booking-item .cmp-booking-meta {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.78rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
}

.cmp-booking-item .cmp-booking-meta span {
  color: var(--mm-grey) !important;
}

.cmp-booking-item .cmp-booking-location {
  color: var(--mm-muted) !important;
}

.cmp-booking-attendee {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.72rem !important;
  margin: 0.15rem 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.cmp-booking-attendee strong {
  color: var(--mm-grey) !important;
  font-weight: 600 !important;
}

/* ----- Actions ----- */
.cmp-booking-item .cmp-booking-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

/* Cancel button */
.cmp-booking-item .cmp-btn,
.cmp-booking-item .cmp-cancel-booking {
  background: transparent !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cmp-booking-item .cmp-btn:hover,
.cmp-booking-item .cmp-cancel-booking:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Locked / cannot cancel state */
.cmp-booking-locked {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  font-style: italic !important;
}


/* =============================================
   PAST BOOKINGS (slightly muted)
   ============================================= */

.cmp-bookings-section:last-child .cmp-booking-card,
.cmp-bookings-section:last-child .cmp-booking-item {
  opacity: 0.6 !important;
  border-left-color: var(--mm-border) !important;
}

.cmp-bookings-section:last-child .cmp-booking-card:hover,
.cmp-bookings-section:last-child .cmp-booking-item:hover {
  opacity: 0.85 !important;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .cmp-my-bookings {
    padding: 1rem !important;
  }

  .cmp-bookings-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .cmp-bookings-header .cmp-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  .cmp-booking-card,
  .cmp-booking-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1rem !important;
  }

  .cmp-booking-date {
    flex-direction: row !important;
    gap: 6px !important;
    min-width: unset !important;
    padding: 5px 10px !important;
  }

  .cmp-booking-day {
    font-size: 0.95rem !important;
  }

  .cmp-booking-item .cmp-booking-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    padding-top: 0.25rem !important;
    border-top: 1px solid var(--mm-border) !important;
    margin-top: 0.25rem !important;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-5e39ce4 *//* ============================================
   MINDSET MMA — MY FAMILY MEMBERS CSS
   Paste into: Elementor > Site Settings > Custom CSS
   (or widget-level custom CSS)
   ============================================ */


/* ----- BRAND TOKENS (same across all components) ----- */
:root {
  --mm-bg: #0a0a0a;
  --mm-card: #141414;
  --mm-card-hover: #1c1c1c;
  --mm-border: #2a2a2a;
  --mm-accent: #DBAD02;
  --mm-accent-hover: #f0c211;
  --mm-white: #ffffff;
  --mm-grey: #a0a0a0;
  --mm-muted: #666666;
  --mm-radius: 8px;
  --mm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}


/* =============================================
   CONTAINER & PARENT BACKGROUND FIX
   ============================================= */

.cmp-my-family,
.cmp-my-family *,
.elementor-shortcode .cmp-my-family,
.elementor-widget-shortcode .cmp-my-family,
.elementor-widget-shortcode .elementor-widget-container {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Re-apply the backgrounds we want */
.cmp-my-family {
  background: var(--mm-bg) !important;
  font-family: var(--mm-font) !important;
  padding: 1.5rem !important;
  border-radius: var(--mm-radius) !important;
}


/* =============================================
   HEADER
   ============================================= */

.cmp-family-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

.cmp-family-header h2 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

/* Add Family Member button */
#cmp-add-family-member,
.cmp-family-header .cmp-btn-primary {
  background: var(--mm-accent) !important;
  color: #0a0a0a !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

#cmp-add-family-member:hover,
.cmp-family-header .cmp-btn-primary:hover {
  background: var(--mm-accent-hover) !important;
}


/* =============================================
   DESCRIPTION
   ============================================= */

.cmp-family-description {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin: 0 0 1.25rem 0 !important;
}


/* =============================================
   EMPTY STATE
   ============================================= */

.cmp-no-family {
  border: 1px dashed var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  background: transparent !important;
}

.cmp-no-family p {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}


/* =============================================
   FAMILY MEMBER CARDS (for when members exist)
   ============================================= */

.cmp-family-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.cmp-family-card {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-left: 3px solid var(--mm-accent) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.cmp-family-card:hover {
  background: var(--mm-card-hover) !important;
  border-left-color: var(--mm-accent-hover) !important;
}

.cmp-family-card .cmp-family-name,
.cmp-family-card h4 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 0 0.15rem 0 !important;
}

.cmp-family-card .cmp-family-meta,
.cmp-family-card p {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}

.cmp-family-card .cmp-family-info {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Action buttons (edit / remove) */
.cmp-family-card .cmp-family-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
}

.cmp-family-card .cmp-btn,
.cmp-family-edit-btn,
.cmp-family-remove-btn {
  background: transparent !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cmp-family-edit-btn:hover,
.cmp-family-card .cmp-btn:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-accent) !important;
}

.cmp-family-remove-btn:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}


/* =============================================
   FAMILY MEMBER ROW (actual member cards)
   ============================================= */

.cmp-family-member {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-left: 3px solid var(--mm-accent) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.cmp-family-member:hover {
  background: var(--mm-card-hover) !important;
  border-left-color: var(--mm-accent-hover) !important;
}

.cmp-family-member:last-child {
  margin-bottom: 0 !important;
}


/* ----- Avatar ----- */
.cmp-family-avatar {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(219, 173, 2, 0.12) !important;
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}


/* ----- Member info ----- */
.cmp-family-member-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.cmp-family-member-info h3 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 0 0.15rem 0 !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.cmp-family-member-meta {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.78rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
}

.cmp-family-member-meta span {
  color: var(--mm-grey) !important;
}

.cmp-family-relationship {
  color: var(--mm-muted) !important;
}

.cmp-family-dob {
  color: var(--mm-muted) !important;
}


/* ----- Actions (edit / remove) ----- */
.cmp-family-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
}

.cmp-edit-family-member,
.cmp-family-actions .cmp-btn-secondary {
  background: transparent !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cmp-edit-family-member:hover,
.cmp-family-actions .cmp-btn-secondary:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-accent) !important;
}

.cmp-delete-family-member,
.cmp-family-actions .cmp-btn-danger {
  background: transparent !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cmp-delete-family-member:hover,
.cmp-family-actions .cmp-btn-danger:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}


/* =============================================
   FAMILY MEMBER MODAL (add/edit form)
   ============================================= */

/* Overlay */
.cmp-modal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Modal container */
.cmp-my-family .cmp-modal,
.cmp-modal {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  font-family: var(--mm-font) !important;
  max-width: 500px !important;
  width: 90% !important;
  overflow: hidden !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
}

/* Header */
.cmp-modal-header {
  background: var(--mm-bg) !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-modal-header h3 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}

.cmp-modal-close {
  background: transparent !important;
  border: none !important;
  color: var(--mm-muted) !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: color 0.2s ease !important;
}

.cmp-modal-close:hover {
  color: var(--mm-accent) !important;
}

/* Body */
.cmp-modal-body {
  padding: 1.25rem !important;
  background: var(--mm-card) !important;
}

/* Footer */
.cmp-modal-footer {
  background: var(--mm-bg) !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  border-top: 1px solid var(--mm-border) !important;
}

/* Cancel button */
.cmp-modal-cancel,
.cmp-modal-footer .cmp-btn-secondary {
  background: transparent !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.cmp-modal-cancel:hover,
.cmp-modal-footer .cmp-btn-secondary:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-white) !important;
}

/* Save button */
#cmp-save-family-member,
.cmp-modal-footer .cmp-btn-primary {
  background: var(--mm-accent) !important;
  color: #0a0a0a !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

#cmp-save-family-member:hover,
.cmp-modal-footer .cmp-btn-primary:hover {
  background: var(--mm-accent-hover) !important;
}


/* =============================================
   FORM FIELDS
   ============================================= */

.cmp-form-row {
  margin-bottom: 1rem !important;
}

.cmp-form-row:last-child {
  margin-bottom: 0 !important;
}

.cmp-form-row label {
  display: block !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.35rem !important;
}

.cmp-form-row label .required {
  color: #ef4444 !important;
}

.cmp-form-row input[type="text"],
.cmp-form-row input[type="email"],
.cmp-form-row input[type="date"],
.cmp-form-row select,
.cmp-form-row textarea {
  width: 100% !important;
  background: var(--mm-bg) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 6px !important;
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  padding: 0.6rem 0.85rem !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.cmp-form-row input:focus,
.cmp-form-row select:focus,
.cmp-form-row textarea:focus {
  border-color: var(--mm-accent) !important;
}

.cmp-form-row select {
  appearance: auto !important;
  cursor: pointer !important;
}

.cmp-form-row textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

/* Placeholder */
.cmp-form-row input::placeholder,
.cmp-form-row textarea::placeholder {
  color: var(--mm-muted) !important;
}

/* Description / help text */
.cmp-form-row .description,
.cmp-form-row p.description {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  margin: 0.3rem 0 0 0 !important;
  line-height: 1.3 !important;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .cmp-my-family {
    padding: 1rem !important;
  }

  .cmp-family-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #cmp-add-family-member,
  .cmp-family-header .cmp-btn-primary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .cmp-family-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1rem !important;
  }

  .cmp-family-card .cmp-family-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    padding-top: 0.25rem !important;
    border-top: 1px solid var(--mm-border) !important;
    margin-top: 0.25rem !important;
  }

  .cmp-family-member {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1rem !important;
  }

  .cmp-family-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.7rem !important;
  }

  .cmp-family-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    padding-top: 0.25rem !important;
    border-top: 1px solid var(--mm-border) !important;
    margin-top: 0.25rem !important;
  }

  .cmp-my-family .cmp-modal,
  .cmp-modal {
    width: 95% !important;
    max-width: none !important;
  }

  .cmp-modal-footer {
    flex-direction: column-reverse !important;
  }

  .cmp-modal-footer .cmp-btn-primary,
  .cmp-modal-footer .cmp-btn-secondary,
  .cmp-modal-cancel,
  #cmp-save-family-member {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2463a05 *//* ============================================
   MINDSET MMA — MY MEMBERSHIP CSS
   Paste into: Elementor > Site Settings > Custom CSS
   (or widget-level custom CSS)
   ============================================ */


/* ----- BRAND TOKENS (same across all components) ----- */
:root {
  --mm-bg: #0a0a0a;
  --mm-card: #141414;
  --mm-card-hover: #1c1c1c;
  --mm-border: #2a2a2a;
  --mm-accent: #DBAD02;
  --mm-accent-hover: #f0c211;
  --mm-white: #ffffff;
  --mm-grey: #a0a0a0;
  --mm-muted: #666666;
  --mm-radius: 8px;
  --mm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}


/* =============================================
   CONTAINER & PARENT BACKGROUND FIX
   ============================================= */

.cmp-my-membership,
.elementor-shortcode .cmp-my-membership,
.elementor-widget-shortcode .cmp-my-membership,
.elementor-widget-shortcode .elementor-widget-container {
  background: var(--mm-bg) !important;
  font-family: var(--mm-font) !important;
  padding: 1.5rem !important;
  border-radius: var(--mm-radius) !important;
}

.cmp-my-membership h2 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 1.25rem 0 !important;
}


/* =============================================
   GRID LAYOUT
   ============================================= */

.cmp-membership-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}


/* =============================================
   MEMBERSHIP CARD
   ============================================= */

.cmp-membership-card {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  overflow: hidden !important;
}

/* ----- Card header ----- */
.cmp-membership-header {
  background: var(--mm-bg) !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-membership-header h3 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

/* Status badges */
.cmp-membership-status {
  font-family: var(--mm-font) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
}

.cmp-membership-status.active {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
}

.cmp-membership-status.inactive {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

.cmp-membership-status.paused,
.cmp-membership-status.suspended {
  background: rgba(219, 173, 2, 0.12) !important;
  color: var(--mm-accent) !important;
}

/* ----- Card body / stats ----- */
.cmp-membership-body {
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--mm-card) !important;
}

/* Nuclear: kill white on everything inside the card */
.cmp-membership-card,
.cmp-membership-card *,
.cmp-membership-body,
.cmp-membership-body *,
.cmp-membership-stat,
.cmp-membership-stat * {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Then re-apply the backgrounds we actually want */
.cmp-membership-card {
  background: var(--mm-card) !important;
}

.cmp-membership-header {
  background: var(--mm-bg) !important;
}

.cmp-membership-stat {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 0 !important;
  border-bottom: 1px solid var(--mm-border) !important;
  background: transparent !important;
}

.cmp-membership-stat:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.cmp-membership-stat:first-child {
  padding-top: 0 !important;
}

.cmp-stat-label {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
}

.cmp-stat-value {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* Credit balance emphasis */
.cmp-credit-balance {
  color: var(--mm-accent) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}


/* =============================================
   QUICK LINKS
   ============================================= */

.cmp-membership-links {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.25rem !important;
}

.cmp-membership-links h3 {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 0.75rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-membership-links ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cmp-membership-links li {
  margin: 0 !important;
  padding: 0 !important;
}

.cmp-membership-links a {
  display: block !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 0.55rem 0.75rem !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
}

.cmp-membership-links a:hover {
  color: var(--mm-white) !important;
  background: var(--mm-bg) !important;
  padding-left: 1rem !important;
}


/* =============================================
   CREDIT HISTORY / RECENT CREDIT ACTIVITY
   ============================================= */

.cmp-credit-history {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

.cmp-credit-history h3 {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 0.75rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

/* Table */
.cmp-credit-table,
.cmp-credit-history table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--mm-font) !important;
  background: transparent !important;
}

.cmp-credit-table thead,
.cmp-credit-history thead {
  background: transparent !important;
}

.cmp-credit-table th,
.cmp-credit-history th {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
  background: transparent !important;
}

.cmp-credit-table td,
.cmp-credit-history td {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  padding: 0.6rem 0.75rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
  background: transparent !important;
}

.cmp-credit-table tr,
.cmp-credit-history tr {
  background: transparent !important;
  transition: background 0.15s ease !important;
}

.cmp-credit-table tbody tr:hover,
.cmp-credit-history tbody tr:hover {
  background: var(--mm-card-hover) !important;
}

.cmp-credit-table tr:last-child td,
.cmp-credit-history tr:last-child td {
  border-bottom: none !important;
}

/* Positive / negative amount colours */
.cmp-positive {
  color: #34d399 !important;
  font-weight: 600 !important;
}

.cmp-negative {
  color: #ef4444 !important;
  font-weight: 600 !important;
}


/* =============================================
   REFERRAL SECTION
   ============================================= */

.cmp-referral-section {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.25rem !important;
}

.cmp-referral-section h3 {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 0.4rem 0 !important;
}

.cmp-referral-section > p {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.4 !important;
}

/* ----- Code block ----- */
.cmp-referral-code {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: var(--mm-bg) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 6px !important;
  padding: 0.6rem 0.85rem !important;
}

.cmp-referral-code code {
  color: var(--mm-accent) !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  flex: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Copy button */
.cmp-referral-code .cmp-btn,
#cmp-copy-referral {
  background: transparent !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.cmp-referral-code .cmp-btn:hover,
#cmp-copy-referral:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-accent) !important;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .cmp-my-membership {
    padding: 1rem !important;
  }

  .cmp-membership-grid {
    grid-template-columns: 1fr !important;
  }

  .cmp-referral-code {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }

  .cmp-referral-code .cmp-btn,
  #cmp-copy-referral {
    width: 100% !important;
    justify-content: center !important;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-d9bcd84 *//* ============================================
   MINDSET MMA — REFER A FRIEND CSS
   Paste into: Elementor > Site Settings > Custom CSS
   (or widget-level custom CSS)
   ============================================ */


/* ----- BRAND TOKENS (same across all components) ----- */
:root {
  --mm-bg: #0a0a0a;
  --mm-card: #141414;
  --mm-card-hover: #1c1c1c;
  --mm-border: #2a2a2a;
  --mm-accent: #DBAD02;
  --mm-accent-hover: #f0c211;
  --mm-white: #ffffff;
  --mm-grey: #a0a0a0;
  --mm-muted: #666666;
  --mm-radius: 8px;
  --mm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}


/* =============================================
   CONTAINER & NUCLEAR BACKGROUND FIX
   ============================================= */

.cmp-refer-friend,
.cmp-refer-friend *,
.elementor-shortcode .cmp-refer-friend,
.elementor-widget-shortcode .cmp-refer-friend,
.elementor-widget-shortcode .elementor-widget-container {
  background-color: transparent !important;
  box-shadow: none !important;
}

.cmp-refer-friend {
  background: var(--mm-bg) !important;
  font-family: var(--mm-font) !important;
  padding: 1.5rem !important;
  border-radius: var(--mm-radius) !important;
}


/* =============================================
   HEADER
   ============================================= */

.cmp-referral-header {
  margin-bottom: 1.5rem !important;
}

.cmp-referral-header h2 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 0.4rem 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.cmp-referral-header h2 .dashicons {
  color: var(--mm-accent) !important;
  font-size: 1.4rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
}

.cmp-referral-subtitle {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}


/* =============================================
   STATS CARDS (top row)
   ============================================= */

.cmp-referral-stats-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

.cmp-stat-card {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.cmp-stat-icon {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.cmp-stat-referrals .cmp-stat-icon {
  background: rgba(219, 173, 2, 0.12) !important;
}

.cmp-stat-credits .cmp-stat-icon {
  background: rgba(52, 211, 153, 0.12) !important;
}

.cmp-stat-rank .cmp-stat-icon {
  background: rgba(96, 165, 250, 0.12) !important;
}

.cmp-stat-icon .dashicons {
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
}

.cmp-stat-referrals .cmp-stat-icon .dashicons {
  color: var(--mm-accent) !important;
}

.cmp-stat-credits .cmp-stat-icon .dashicons {
  color: #34d399 !important;
}

.cmp-stat-rank .cmp-stat-icon .dashicons {
  color: #60a5fa !important;
}

.cmp-stat-info {
  display: flex !important;
  flex-direction: column !important;
}

.cmp-stat-card .cmp-stat-value {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.cmp-stat-card .cmp-stat-label {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}


/* =============================================
   REFERRAL GRID (code + leaderboard)
   ============================================= */

.cmp-referral-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}


/* ----- Referral code section ----- */
.cmp-referral-code-section {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.25rem !important;
}

.cmp-referral-code-section h3 {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 1rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

/* Code display */
.cmp-referral-code-display {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: var(--mm-bg) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 6px !important;
  padding: 0.6rem 0.85rem !important;
  margin-bottom: 1rem !important;
}

.cmp-referral-code-display code,
code.cmp-referral-code {
  color: var(--mm-accent) !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  flex: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Copy buttons */
.cmp-copy-code-btn,
#cmp-copy-code,
#cmp-copy-link {
  background: transparent !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.cmp-copy-code-btn:hover,
#cmp-copy-code:hover,
#cmp-copy-link:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-accent) !important;
}

/* Link display */
.cmp-referral-link-display {
  margin-bottom: 1rem !important;
}

.cmp-referral-link-display label {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
}

.cmp-link-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: var(--mm-bg) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.6rem !important;
}

.cmp-link-input-group input {
  background: transparent !important;
  border: none !important;
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.75rem !important;
  flex: 1 !important;
  min-width: 0 !important;
  outline: none !important;
  padding: 0.2rem 0 !important;
}

/* Share buttons */
.cmp-share-buttons h4 {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 0.5rem 0 !important;
}

.cmp-share-icons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}

.cmp-share-btn {
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.cmp-share-btn-email {
  background: rgba(160, 160, 160, 0.12) !important;
  color: var(--mm-grey) !important;
  border: 1px solid var(--mm-border) !important;
}

.cmp-share-btn-email:hover {
  border-color: var(--mm-grey) !important;
  color: var(--mm-white) !important;
}

.cmp-share-btn-whatsapp {
  background: rgba(37, 211, 102, 0.12) !important;
  color: #25d366 !important;
  border: 1px solid rgba(37, 211, 102, 0.25) !important;
}

.cmp-share-btn-whatsapp:hover {
  background: rgba(37, 211, 102, 0.2) !important;
  color: #25d366 !important;
}

.cmp-share-btn-facebook {
  background: rgba(66, 103, 178, 0.12) !important;
  color: #4267b2 !important;
  border: 1px solid rgba(66, 103, 178, 0.25) !important;
}

.cmp-share-btn-facebook:hover {
  background: rgba(66, 103, 178, 0.2) !important;
  color: #4267b2 !important;
}

.cmp-share-btn-twitter {
  background: rgba(160, 160, 160, 0.12) !important;
  color: var(--mm-grey) !important;
  border: 1px solid var(--mm-border) !important;
}

.cmp-share-btn-twitter:hover {
  background: rgba(160, 160, 160, 0.2) !important;
  color: var(--mm-white) !important;
}


/* ----- Leaderboard / stats section ----- */
.cmp-referral-stats-section {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.25rem !important;
}

.cmp-referral-stats-section h3 {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 0.75rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-no-data {
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  padding: 1.25rem !important;
  border: 1px dashed var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  margin: 0 !important;
}


/* =============================================
   HOW IT WORKS
   ============================================= */

.cmp-how-it-works {
  background: var(--mm-card) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  padding: 1.25rem !important;
}

.cmp-how-it-works h3 {
  color: var(--mm-accent) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 1rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.cmp-steps {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.cmp-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cmp-step::before {
  display: none !important;
}

.cmp-step-number {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mm-accent) !important;
  color: #0a0a0a !important;
  font-family: var(--mm-font) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.cmp-step-content {
  flex: 1 !important;
  padding-top: 0.15rem !important;
}

.cmp-step-content h4 {
  color: var(--mm-white) !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  margin: 0 0 0.2rem 0 !important;
}

.cmp-step-content p {
  color: var(--mm-grey) !important;
  font-family: var(--mm-font) !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .cmp-refer-friend {
    padding: 1rem !important;
  }

  .cmp-referral-stats-cards {
    grid-template-columns: 1fr !important;
  }

  .cmp-referral-grid {
    grid-template-columns: 1fr !important;
  }

  .cmp-stat-card {
    padding: 1rem !important;
  }

  .cmp-referral-code-display {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }

  .cmp-link-input-group {
    flex-direction: column !important;
  }

  .cmp-link-input-group input {
    text-align: center !important;
  }

  .cmp-share-icons {
    justify-content: center !important;
  }

  .cmp-step {
    gap: 0.75rem !important;
  }

  .cmp-step-number {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.75rem !important;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-c2b3f04 *//* =============================================================
   Mindset MMA — CMP Manage Subscription override
   Targets: .cmp-manage-sub and all descendants
   ============================================================= */

/* ── Root tokens (scoped so they don't bleed) ── */
.cmp-manage-sub {
    --cmp-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cmp-bg:         #141414;
    --cmp-bg-card:    #1c1c1c;
    --cmp-border:     #2a2a2a;
    --cmp-text:       #ffffff;
    --cmp-text-light: #a0a0a0;
    --cmp-white:      #1c1c1c;   /* overrides the plugin's #fff card backgrounds */
    --cmp-gold:       #DBAD02;
    --cmp-gold-dark:  #0a0a0a;
    --cmp-danger:     #e05252;

    max-width: 720px;
    margin: 0 auto;
    font-family: var(--cmp-font);
    color: var(--cmp-text);
    background-color: transparent;
}

/* ── Headings ── */
.cmp-manage-sub__title {
    color: var(--cmp-text);
    font-weight: 700;
}

.cmp-manage-sub__section-title {
    color: var(--cmp-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}

/* ── Plan card ── */
.cmp-manage-sub__plan-card {
    background-color: var(--cmp-bg-card) !important;
    border-color: var(--cmp-border) !important;
    border-left-color: var(--cmp-gold) !important; /* overrides the inline blue */
}

.cmp-manage-sub__plan-name {
    color: var(--cmp-text);
}

/* ── Status pills — remap all variants to gold/dark palette ── */
.cmp-manage-sub__status--active,
.cmp-manage-sub__status--trialing {
    background-color: rgba(219, 173, 2, 0.15);
    color: var(--cmp-gold);
}

.cmp-manage-sub__status--pending_cancel {
    background-color: rgba(224, 82, 82, 0.12);
    color: #f08080;
}

.cmp-manage-sub__status--cancelled,
.cmp-manage-sub__status--expired {
    background-color: rgba(224, 82, 82, 0.12);
    color: var(--cmp-danger);
}

.cmp-manage-sub__status--on_hold,
.cmp-manage-sub__status--inactive {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--cmp-text-light);
}

/* ── Price ── */
.cmp-manage-sub__amount {
    color: var(--cmp-gold);
    font-weight: 700;
}

.cmp-manage-sub__period {
    color: var(--cmp-text-light);
}

/* ── Stats strip ── */
.cmp-manage-sub__stats {
    border-top-color: var(--cmp-border);
}

.cmp-manage-sub__stat-label {
    color: var(--cmp-text-light);
}

.cmp-manage-sub__stat-value {
    color: var(--cmp-gold);
    font-weight: 700;
}

/* ── Timeline card ── */
.cmp-manage-sub__timeline-card {
    background-color: var(--cmp-bg-card) !important;
    border-color: var(--cmp-border) !important;
}

.cmp-manage-sub__timeline-item + .cmp-manage-sub__timeline-item {
    border-top-color: var(--cmp-border);
}

/* Timeline icon states */
.cmp-manage-sub__timeline-item--completed .cmp-manage-sub__timeline-icon {
    background-color: rgba(219, 173, 2, 0.12);
    color: var(--cmp-gold);
}

.cmp-manage-sub__timeline-item--current .cmp-manage-sub__timeline-icon {
    background-color: rgba(219, 173, 2, 0.2);
    color: var(--cmp-gold);
}

.cmp-manage-sub__timeline-item--upcoming .cmp-manage-sub__timeline-icon {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--cmp-text-light);
}

.cmp-manage-sub__timeline-item--cancelled .cmp-manage-sub__timeline-icon {
    background-color: rgba(224, 82, 82, 0.12);
    color: var(--cmp-danger);
}

.cmp-manage-sub__timeline-content strong {
    color: var(--cmp-text);
}

.cmp-manage-sub__timeline-content p {
    color: var(--cmp-text-light);
}

/* ── Actions card ── */
.cmp-manage-sub__actions-card {
    background-color: var(--cmp-bg-card) !important;
    border-color: var(--cmp-border) !important;
}

/* Cancel / danger outline button */
.cmp-btn-outline-danger {
    background: transparent;
    color: var(--cmp-danger);
    border-color: var(--cmp-danger);
    font-family: var(--cmp-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, color 0.2s ease;
}

.cmp-btn-outline-danger:hover,
.cmp-btn-outline-danger:focus {
    background-color: var(--cmp-danger);
    color: #ffffff;
    border-color: var(--cmp-danger);
}

/* Primary action button (if used elsewhere on the page) */
.cmp-manage-sub .cmp-btn-primary,
.cmp-manage-sub .cmp-btn {
    background-color: var(--cmp-gold);
    color: var(--cmp-gold-dark);
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease;
}

.cmp-manage-sub .cmp-btn-primary:hover,
.cmp-manage-sub .cmp-btn:hover {
    opacity: 0.85;
    color: var(--cmp-gold-dark);
}

/* ── Notice banners ── */
.cmp-manage-sub__notice--warning {
    background-color: rgba(224, 82, 82, 0.1);
    border-color: rgba(224, 82, 82, 0.3);
    color: #f08080;
}

.cmp-manage-sub__notice--neutral {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--cmp-border);
    color: var(--cmp-text-light);
}

.cmp-manage-sub__notice--success {
    background-color: rgba(219, 173, 2, 0.1);
    border-color: rgba(219, 173, 2, 0.3);
    color: var(--cmp-gold);
}

/* ── Result message area ── */
.cmp-manage-sub__result {
    background-color: rgba(219, 173, 2, 0.1);
    border: 1px solid rgba(219, 173, 2, 0.3);
    color: var(--cmp-gold);
}/* End custom CSS */