/* Member V2 — matches design artifact */

:root {
  --mv2-bg:            #FAF4E8;
  --mv2-nav-bg:        #faf4e8cc;
  --mv2-surface:       #FFFFFF;
  --mv2-border:        #e2d6b8;
  --mv2-gold:          #d3bc9b;
  --mv2-gold-btn:      #d3bc9b;
  --mv2-gold-light:    #f1e8d3;
  --mv2-text:          #1A1A1A;
  --mv2-text-muted:    #7A7164;
  --mv2-text-light:    #A09884;
  --mv2-text-gold:     #8a6f47;
  --mv2-radius:        16px;
  --mv2-radius-sm:     10px;
  --mv2-sidebar-w:     350px;
  --tw-gradient-from: rgb(0 0 0 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* =========================================================
   Page shell
   ========================================================= */

.mv2-page {
  background: var(--mv2-bg);
  min-height: 100vh;
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
  color: var(--mv2-text);
}

/* =========================================================
   Navbar
   ========================================================= */
.mv2-navbar-wrapper {
  background: var(--mv2-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mv2-border);
  position: sticky;
  top: 0;
  z-index: 200;
}

.mv2-navbar {
  padding: 0 28px;
  height: 64px;
  gap: 4px;
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mv2-navbar-logo {
  margin-right: 12px;
}
.mv2-navbar-logo img {
  width: 96px;
}

.mv2-navbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.mv2-navbar-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.mv2-navbar-link i { font-size: 16px; }
.mv2-navbar-link:hover {
  background: rgb(0 0 0 / 0.05);
  color: var(--mv2-text);
}
.mv2-navbar-link.active {
  background: #e8ddc2;
  color: var(--mv2-text);
  font-weight: 600;
}

.mv2-navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.mv2-navbar-admin-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-navbar-admin-btn:hover { background: rgb(0 0 0 / 0.05); color: var(--mv2-text); }

.mv2-navbar-schedule-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--mv2-text);
  text-decoration: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
  transition: background 0.15s, box-shadow 0.15s;
}
.mv2-navbar-schedule-btn:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}

.mv2-navbar-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  color: var(--mv2-text-muted);
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-navbar-bell:hover { background: var(--mv2-gold-light); }
.mv2-bell-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  background: #4A90D9;
  border-radius: 50%;
  border: 1.5px solid var(--mv2-bg);
}

.mv2-user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 50px;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  cursor: pointer;
  text-decoration: none;
  color: var(--mv2-text);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.mv2-user-menu:hover { background: var(--mv2-gold-light); color: var(--mv2-text); }

.mv2-user-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mv2-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.mv2-user-avatar-sm img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* =========================================================
   Main two-column layout
   ========================================================= */
.mv2-event-area {
  max-width: 80rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 1fr var(--mv2-sidebar-w);
  gap: 28px;
  align-items: start;
}

.mv2-content-area {
  max-width: 80rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  gap: 28px;
  align-items: start;
}

.mv2-feed {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

/* When there's no sidebar to render (e.g. an admin with no real Member
   record on this site viewing "Preview as member" — see
   ApplicationController#require_member!, which always nils @current_member
   out for admins), letting .mv2-feed's flex:1 fill the entire
   .mv2-content-area on its own stretches each course card edge-to-edge
   across up to 80rem — capping and centering it here keeps the single
   column readable instead. */
.mv2-feed-solo {
  max-width: 640px;
  margin: 0 auto;
}

/* =========================================================
   Sidebar (profile card)
   ========================================================= */

.mv2-sidebar-sticky {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: var(--mv2-sidebar-w);
  /* Without this, once the sidebar's own content (cards) is taller than the
     viewport, the overflow is simply unreachable — a sticky element doesn't
     scroll with the page, and without overflow-y it doesn't scroll internally
     either. Capping the height and letting it scroll internally fixes that. */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mv2-border) transparent;
}
.mv2-sidebar-sticky::-webkit-scrollbar {
  width: 6px;
}
.mv2-sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--mv2-border);
  border-radius: 3px;
}

/* courses#index only: the sidebar's "Up next" card always refers to one
   specific course (@primary_course), but the main feed can scroll through
   several unrelated course cards below it — pinning the sidebar there made
   it look like it was still describing whatever card was currently in
   view. Falls back to scrolling with the page instead, same as the
   sidebar already does on mobile (see the max-width: 860px override below). */
.mv2-sidebar-static {
  position: static;
  max-height: none;
  overflow-y: visible;
}

.mv2-profile-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  padding: 20px;
  border: 1px solid var(--mv2-border);
}

.mv2-profile-avatar-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.mv2-avatar-initials {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-color: var(--mv2-gold);
  background-image: linear-gradient(to bottom right, #ECE1CC, #b89968);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.mv2-avatar-photo {
  width: 128px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

.mv2-profile-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.mv2-profile-since {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0;
}

/* Membership badge next to the member's name — clicking it goes to the
   membership management/cancel page (member_membership_path). */
.mv2-membership-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--mv2-text-gold);
  background: var(--mv2-gold-light);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 6px;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
}
.mv2-membership-badge:hover {
  background: var(--mv2-gold);
  color: #fff;
}

.mv2-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mv2-btn-gold {
  display: block;
  padding: 11px 16px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-gold:hover { background: #b89968; color: #fff; }

.mv2-btn-outline {
  display: block;
  padding: 11px 16px;
  border-radius: 50px;
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid var(--mv2-border);
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-outline:hover { background: var(--mv2-gold-light); color: var(--mv2-text); }

/* Ready to Connect card */
.mv2-connect-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  padding: 20px;
  border: 1px solid var(--mv2-border);
}
.mv2-connect-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 8px;
}
.mv2-connect-divider {
  border: none;
  border-top: 1px solid var(--mv2-border);
  margin: 0 0 12px;
}
.mv2-connect-text {
  font-size: 13px;
  color: var(--mv2-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* =========================================================
   Main feed / content column
   ========================================================= */

/* Sentence case on purpose, unlike mv2-feed-label just below — the
   episode page's "← Back to course" link in the agreed mockup is a plain,
   quiet link, not an all-caps section eyebrow like "EPISODES"/"LEARN". */
.mv2-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mv2-text-muted);
  text-decoration: none;
  margin: 0 0 6px;
}
.mv2-back-link:hover { color: var(--mv2-text-gold); }

.mv2-feed-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv2-text-muted);
  margin: 0 0 6px;
}
.mv2-feed-title {
  font-size: 38px;
  font-weight: 800;
  color: var(--mv2-text);
  margin: 0 0 6px;
  line-height: 1.1;
}
.mv2-feed-subtitle {
  font-size: 15px;
  color: var(--mv2-text-muted);
  margin: 0;
}

.mv2-feed-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}
/* "See past and all future events" footer link */
.mv2-see-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--mv2-radius);
  border: 1.5px dashed var(--mv2-border);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mv2-see-all-link:hover {
  background: var(--mv2-surface);
  color: var(--mv2-text);
  border-color: var(--mv2-gold);
}
.mv2-see-all-link i { font-size: 13px; }

/* ── Survey tag on event card ── */
.mv2-tag-survey {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: #fff3cd;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-survey i { font-size: 11px; }

/* ── Completed survey collapsible toggle ── */
.mv2-completed-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.mv2-completed-toggle:focus { outline: none; box-shadow: none; }
.mv2-completed-toggle .mv2-event-row { padding-right: 16px; }
.mv2-completed-chevron {
  font-size: 14px;
  color: var(--mv2-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  align-self: center;
  margin-left: auto;
  margin-right: 8px;
}
.mv2-completed-toggle[aria-expanded="true"] .mv2-completed-chevron {
  transform: rotate(180deg);
}

.mv2-tag-complete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-complete i { font-size: 11px; }

.mv2-survey-thankyou {
  padding: 14px 24px 4px;
  font-size: 14px;
  color: var(--mv2-text-muted);
}
.mv2-survey-thankyou p { margin: 0; }

.mv2-survey-answers {
  padding: 8px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mv2-answer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-answer-row:last-child { border-bottom: none; }
.mv2-answer-qblock {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mv2-answer-q {
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-answer-a {
  font-size: 14px;
  font-weight: 700;
  color: var(--mv2-text);
}
.mv2-answer-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--mv2-gold-btn);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}
.mv2-answer-edit:hover { text-decoration: underline; color: #a8864e; }

/* ── Survey progress steps (inline in event card) ── */
.mv2-survey-progress-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mv2-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--mv2-border);
  color: var(--mv2-text-muted);
  background: var(--mv2-surface);
  flex-shrink: 0;
}
.mv2-step.done    { background: var(--mv2-gold-btn); border-color: var(--mv2-gold-btn); color: #fff; }
.mv2-step.current { border-color: var(--mv2-gold-btn); color: var(--mv2-gold-btn); }
.mv2-step-line {
  flex: 1;
  min-width: 12px;
  max-width: 32px;
  height: 1.5px;
  background: var(--mv2-border);
}
.mv2-step-line.done { background: var(--mv2-gold-btn); }
.mv2-survey-progress-text {
  font-size: 11px;
  color: var(--mv2-text-muted);
  margin-left: 6px;
  white-space: nowrap;
}

/* ── Survey footer in event card row ── */
.mv2-survey-footer-desc {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0;
  flex: 1;
}

/* Survey pages — full-width, no sidebar */
.mv2-survey-full-area {
  max-width: 80rem;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ── Survey page layout (2-col: progress panel + form) ── */
.mv2-survey-page-card {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  border-radius: var(--mv2-radius);
  overflow: hidden;
  border: 1px solid var(--mv2-border);
  background: var(--mv2-surface);
  min-height: 500px;
}

.mv2-survey-progress-panel {
  background: #2D2D44;
  display: flex;
  flex-direction: column;
}
.mv2-survey-event-banner {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  opacity: 0.7;
}
.mv2-survey-progress-inner {
  padding: 28px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mv2-survey-progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv2-gold-light);
  margin: 0;
}
.mv2-survey-progress-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-gold-btn);
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mv2-survey-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mv2-survey-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid rgb(255 255 255 / 0.3);
  color: rgb(255 255 255 / 0.5);
  flex-shrink: 0;
}
.mv2-survey-step.done    { background: var(--mv2-gold-btn); border-color: var(--mv2-gold-btn); color: #fff; }
.mv2-survey-step.current { border-color: var(--mv2-gold-btn); color: #fff; }
.mv2-survey-step-connector {
  flex: 1;
  min-width: 16px;
  max-width: 36px;
  height: 2px;
  background: rgb(255 255 255 / 0.2);
  border-radius: 1px;
}
.mv2-survey-step-connector.done { background: var(--mv2-gold-btn); }
.mv2-survey-encouragement {
  font-size: 13px;
  color: rgb(255 255 255 / 0.65);
  line-height: 1.65;
  margin: 0;
}

.mv2-survey-form-panel {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ── Survey completion screen ── */
.mv2-complete-panel {
  background: linear-gradient(160deg, #2c3149 0%, #1e2235 100%);
}
.mv2-complete-panel-inner {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.mv2-complete-panel-icon {
  font-size: 40px;
  color: #4ade80;
  line-height: 1;
}
.mv2-complete-form-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px;
}
.mv2-complete-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.mv2-complete-check-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.mv2-complete-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--mv2-text);
  margin: 0 0 10px;
}
.mv2-complete-subtitle {
  font-size: 14px;
  color: var(--mv2-text-muted);
  margin: 0 0 8px;
  line-height: 1.6;
}
.mv2-complete-subtitle:last-child { margin-bottom: 0; }
.mv2-complete-answers-card {
  background: #fafaf8;
  border: 1.5px solid var(--mv2-border);
  border-radius: 14px;
  overflow: hidden;
}
.mv2-complete-answers-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv2-text-muted);
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid var(--mv2-border);
  background: #fff;
}
.mv2-complete-answer-list {
  display: flex;
  flex-direction: column;
}
.mv2-complete-answer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-complete-answer-item:last-child { border-bottom: none; }
.mv2-complete-answer-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mv2-complete-answer-q {
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-complete-answer-a {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mv2-star { font-size: 13px; color: var(--mv2-gold-btn); }
.mv2-star-empty { color: #d4c5a5; }
.mv2-star-label { font-size: 13px; color: var(--mv2-text-muted); font-weight: 400; margin-left: 4px; }
.mv2-complete-change-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mv2-gold-btn);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1.5px solid var(--mv2-gold-btn);
  border-radius: 50px;
  transition: background 0.15s, color 0.15s;
}
.mv2-complete-change-btn:hover {
  background: var(--mv2-gold-btn);
  color: #fff;
}
.mv2-complete-footer {
  display: flex;
}

/* =========================================================
   Survey / Rating form elements
   ========================================================= */

/* Error box */
.mv2-survey-error-box {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #c0392b;
  font-size: 14px;
}

/* Rated member card (top of rating form) */
.mv2-rated-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: var(--mv2-radius-sm);
  margin-bottom: 24px;
  text-align: center;
}
.mv2-rated-member-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  flex-shrink: 0;
}
.mv2-rated-member-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0;
}

/* Question block */
.mv2-survey-question-block {
  margin-bottom: 24px;
}
.mv2-survey-question-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mv2-text);
  margin: 0 0 10px;
  line-height: 1.5;
}
.mv2-survey-question-hint {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: -6px 0 10px;
  line-height: 1.5;
}

/* Select and textarea */
.mv2-survey-select-wrap { position: relative; }
.mv2-survey-select {
  border-radius: var(--mv2-radius-sm) !important;
  border-color: var(--mv2-border) !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  background-color: #fff !important;
}
.mv2-survey-select:focus {
  border-color: var(--mv2-gold) !important;
  box-shadow: 0 0 0 3px rgb(211 188 155 / 0.2) !important;
}
.mv2-survey-textarea {
  border-radius: var(--mv2-radius-sm) !important;
  border-color: var(--mv2-border) !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  resize: vertical;
  width: 100%;
}
.mv2-survey-textarea:focus {
  border-color: var(--mv2-gold) !important;
  box-shadow: 0 0 0 3px rgb(211 188 155 / 0.2) !important;
}

/* Action row */
.mv2-survey-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--mv2-border);
}

/* Style the existing form inside mv2 */
.mv2-survey-form-panel .survey_question {
  font-size: 16px;
  font-weight: 500;
  color: var(--mv2-text);
  line-height: 1.5;
}
.mv2-survey-form-panel .form-control,
.mv2-survey-form-panel .form-select {
  border-radius: var(--mv2-radius-sm);
  border-color: var(--mv2-border);
  font-size: 14px;
}
.mv2-survey-form-panel .btn-survey-back {
  padding: 10px 28px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-survey-form-panel .btn-survey-back:hover { background: var(--mv2-gold-light); }
.mv2-survey-form-panel .btn-survey-next {
  padding: 10px 28px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-survey-form-panel .btn-survey-next:hover { background: #a8864e; }

@media (max-width: 900px) {
  .mv2-survey-page-card { grid-template-columns: 1fr; }
  .mv2-survey-event-banner { height: 120px; }
  .mv2-survey-form-panel { padding: 24px; }
}

.mv2-view-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--mv2-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 4px;
}
.mv2-view-all:hover { color: var(--mv2-gold); }

/* =========================================================
   Event row
   ========================================================= */

.mv2-event-list {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mv2-event-row-link-content {
  text-decoration: none;
}

/* The <a> wrapper that makes the top content clickable */
.mv2-event-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: #fff;
  border-radius: var(--mv2-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(31 27 22 / 0.04), 0 4px 16px rgb(31 27 22 / 0.04);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.mv2-event-row-link:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D3BC9B 0%, #ECE1CC 50%, #D3BC9B 100%);
  border-radius: var(--mv2-radius) var(--mv2-radius) 0 0;
}

.mv2-event-row-link:hover {
  box-shadow: 0 2px 4px rgb(31 27 22 / 0.06), 0 8px 24px rgb(31 27 22 / 0.08);
  transform: translateY(-1px);
}
.mv2-event-row-link:hover .mv2-event-row-title {
  color: var(--mv2-text-gold);
}

.mv2-event-row {
  display: flex;
  gap: 16px;
  padding: 20px 24px 12px;
}

.backdrop-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.3));
}

.mv2-event-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--mv2-radius-sm);
  overflow: hidden;
  background: var(--mv2-gold-light);
}
.mv2-event-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mv2-event-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mv2-gold-light);
}
.mv2-thumb-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.mv2-thumb-month-lg {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mv2-text-muted);
}
.mv2-thumb-day-lg {
  font-size: 28px;
  font-weight: 800;
  color: var(--mv2-text);
  line-height: 1;
}
.mv2-thumb-weekday-lg {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mv2-text-muted);
}
.mv2-event-thumb-date {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 4px 6px;
  text-align: center;
  color: #fff;
  line-height: 1;
  z-index: 1;
}
.mv2-thumb-month {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mv2-thumb-day {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
}
.mv2-thumb-weekday {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.mv2-event-row-body {
  flex: 1;
  min-width: 0;
}
.mv2-event-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.mv2-tag-series {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--mv2-gold-light);
  color: var(--mv2-text-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-series::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mv2-gold);
  flex-shrink: 0;
}
.mv2-tag-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-tag-category i { font-size: 13px; }

.mv2-event-row-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.mv2-event-row-meta {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mv2-event-row-meta i { font-size: 13px; }
.mv2-meta-dot { color: var(--mv2-border); }

.mv2-event-row-desc {
  font-size: 14px;
  color: var(--mv2-text-muted);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mv2-event-row-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 16px;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: var(--mv2-radius);
}
.mv2-going-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-going-count i { font-size: 15px; }

.mv2-view-details-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mv2-text-muted);
  text-decoration: none;
  font-weight: 500;
}
.mv2-view-details-link:hover { color: var(--mv2-text-gold); }
.mv2-view-details-link i { font-size: 11px; }

/* Featured card — same row layout, taller banner-style thumbnail instead of the small square */
.mv2-featured-row {
  flex-direction: column;
  padding: 0;
}
.mv2-featured-thumb {
  width: 100%;
  height: 220px;
  border-radius: var(--mv2-radius) var(--mv2-radius) 0 0;
}
.mv2-featured-row .mv2-event-row-body {
  padding: 20px 24px 0;
}
.mv2-featured-row .mv2-event-row-desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
@media (max-width: 640px) {
  .mv2-featured-thumb { height: 160px; }
}

.mv2-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mv2-btn-cal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 50px;
  background: var(--mv2-surface);
  border: 1.5px solid var(--mv2-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--mv2-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-cal:hover { background: var(--mv2-gold-light); color: var(--mv2-text); }

.mv2-btn-rsvp {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-rsvp:hover { background: #a8864e; color: #fff; }
.mv2-btn-survey-pending { background: #1d4ed8; }
.mv2-btn-survey-pending:hover { background: #1e40af; }

.mv2-btn-going {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-not-going {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #fef2f2;
  color: #c0392b;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-requesting {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #fef9ec;
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-invited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: default;
}
.mv2-btn-past {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 50px;
  background: #f5f5f5;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  border: none;
}

.mv2-event-divider {
  margin: 0 24px;
  border: none;
  border-top: 1px solid var(--mv2-border);
}

/* =========================================================
   Events page — pill tabs
   ========================================================= */

.mv2-tabs-bar {
  display: inline-flex;
  background: var(--mv2-gold-light);
  border-radius: 50px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 24px;
  border: 1px solid var(--mv2-border);
  width: max-content;
}
.mv2-tab-pill {
  padding: 8px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.mv2-tab-pill.active {
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.1);
}

/* Connections card */
.mv2-connections-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  padding: 20px;
  border: 1px solid var(--mv2-border);
}
.mv2-connections-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mv2-connections-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 50px;
  background: var(--mv2-gold-light);
  color: var(--mv2-gold);
  font-size: 12px;
  font-weight: 700;
}
.mv2-connections-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0;
}
.mv2-connections-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mv2-conn-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--mv2-bg);
  background: var(--mv2-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mv2-conn-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv2-conn-avatar span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* Tab completion percentage badge */
.mv2-tab-pct {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--mv2-text-muted);
  background: rgb(0 0 0 / 0.06);
  border-radius: 50px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.mv2-tab-pill.active .mv2-tab-pct {
  background: var(--mv2-gold-light);
  color: var(--mv2-gold);
}

/* Tab pills as links (for profile tabs) */
a.mv2-tab-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   Event Modal
   ========================================================= */

.mv2-modal .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.mv2-modal .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
/* turbo-frame fills the modal-body as a flex column */
#event_modal_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Floating close button overlaid on the banner */
.mv2-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--mv2-text);
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.15);
}
.mv2-modal-close:hover { background: #fff; }

/* Full-bleed banner */
.mv2-modal-banner-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #111;
}
.mv2-modal-banner-blur {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  filter: blur(18px);
  opacity: 0.7;
}
.mv2-modal-banner {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  display: block;
}
.mv2-modal-banner-placeholder {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #f0e4d0, #ddd0b8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv2-modal-banner-placeholder i {
  font-size: 52px;
  color: var(--mv2-gold);
  opacity: 0.4;
}

/* Full-page event banner (events#show) — same letterbox treatment as the modal
   banner above, just taller: the whole photo stays visible (object-fit: contain)
   instead of being cropped to fill the width, with a blurred copy of itself
   filling whatever gap is left on the sides or top/bottom. */
.event-hero-banner-wrap {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: #111;
}
.event-hero-banner-blur {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(30px);
  opacity: 0.7;
}
.event-hero-banner-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  display: block;
  margin: 0 auto;
}

/* No-cover header: beige block with badge + date + time */
.mv2-modal-no-cover-header {
  background: #f0e8d8;
  padding: 28px 28px 24px;
}
.mv2-modal-no-cover-header .mv2-modal-tag-row {
  margin-bottom: 16px;
}
.mv2-modal-no-cover-date {
  font-size: 18px;
  font-weight: 700;
  color: #2c1f0e;
  margin: 0 0 4px;
}
.mv2-modal-no-cover-time {
  font-size: 14px;
  color: #7a6450;
  margin: 0;
}

/* Scrollable content area */
.mv2-modal-body {
  padding: 20px 28px 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* Scroll shadow: appears at bottom when more content is below, fades away at end */
  background:
    linear-gradient(var(--mv2-surface) 30%, transparent) top    / 100% 32px no-repeat local,
    linear-gradient(transparent, var(--mv2-surface) 70%) bottom / 100% 32px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.10), transparent) bottom / 100% 14px no-repeat scroll;
}

/* Sticky RSVP footer — always visible at bottom of modal */
.mv2-modal-rsvp-sticky {
  flex-shrink: 0;
  padding: 12px 28px 16px;
  background: var(--mv2-surface);
}

/* Tag row: badge + location + date/time */
.mv2-modal-tag-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.mv2-modal-meta-item {
  font-size: 13px;
  color: var(--mv2-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.mv2-modal-meta-item i { font-size: 13px; }

/* Title & subtitle */
.mv2-modal-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--mv2-text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.mv2-modal-subtitle {
  font-size: 15px;
  color: var(--mv2-text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Description */
.mv2-modal-description {
  font-size: 15px;
  color: #4a4a4a;
  line-height: 1.65;
  margin-bottom: 4px;
}
.mv2-modal-description p { margin-bottom: 8px; }

/* Dividers */
.mv2-modal-hr {
  border: none;
  border-top: 1px solid var(--mv2-border);
  margin: 18px 0;
}

/* Going count */
.mv2-modal-going {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--mv2-text);
}
.mv2-modal-going i { font-size: 18px; color: var(--mv2-text-muted); }

/* RSVP section */
.mv2-modal-rsvp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.mv2-modal-rsvp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv2-text-muted);
  margin: 0;
}
.mv2-modal-rsvp-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mv2-rsvp-yes {
  display: block;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mv2-rsvp-yes:hover { background: var(--mv2-gold-light); border-color: var(--mv2-gold); color: var(--mv2-text); }
.mv2-rsvp-yes--active {
  background: #f0fdf4;
  border-color: #16a34a;
  color: #16a34a;
}
.mv2-rsvp-yes--active:hover { background: #dcfce7; border-color: #16a34a; color: #16a34a; }
.mv2-rsvp-yes--pending {
  background: #fef9ec;
  border-color: #d97706;
  color: #b45309;
  cursor: default;
}
.mv2-modal-invited-note {
  margin-top: 10px;
  font-size: 13px;
  color: #1d4ed8;
}
.mv2-rsvp-no {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: #c0392b;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-rsvp-no:hover { background: #fef2f2; color: #c0392b; }
.mv2-rsvp-no--disabled { opacity: 0.35; cursor: not-allowed; }
.mv2-rsvp-no--active {
  background: #fef2f2;
  border-color: #c0392b;
  color: #c0392b;
  cursor: default;
}
.mv2-modal-rsvp-confirmed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  color: #16a34a;
  font-size: 15px;
  font-weight: 600;
}
.mv2-modal-past-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1.5px solid var(--mv2-border);
  color: var(--mv2-text-muted);
  font-size: 14px;
}
.mv2-btn-share-feedback {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-share-feedback:hover { background: #a8864e; color: #fff; }

.mv2-modal-survey-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--mv2-gold-light);
  border: 1.5px solid var(--mv2-gold);
  flex-wrap: wrap;
}
.mv2-modal-survey-banner-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mv2-modal-survey-banner-text i {
  font-size: 20px;
  color: var(--mv2-gold-btn);
  flex-shrink: 0;
}
.mv2-modal-survey-banner-text strong {
  display: block;
  font-size: 14px;
  color: var(--mv2-text);
}
.mv2-modal-survey-banner-text span {
  font-size: 12px;
  color: var(--mv2-text-muted);
}

.mv2-modal-survey-done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgb(220 252 231 / 0.6);
  border: 1.5px solid rgb(34 197 94 / 0.35);
  flex-wrap: wrap;
}
.mv2-modal-survey-done-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mv2-modal-survey-done-text i {
  font-size: 20px;
  color: #16a34a;
  flex-shrink: 0;
}
.mv2-modal-survey-done-text strong {
  display: block;
  font-size: 14px;
  color: var(--mv2-text);
}
.mv2-modal-survey-done-text span {
  font-size: 12px;
  color: var(--mv2-text-muted);
}
.mv2-btn-edit-feedback {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 50px;
  background: transparent;
  color: #16a34a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid #16a34a;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mv2-btn-edit-feedback:hover { background: #16a34a; color: #fff; }

.mv2-modal-series-note {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
}
.mv2-modal-series-note i { flex-shrink: 0; margin-top: 2px; }
.mv2-modal-signin { font-size: 14px; color: var(--mv2-text-muted); padding: 8px 0 4px; }

/* Subscribe card button */
.mv2-btn-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 50px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mv2-btn-subscribe:hover { background: #a8864e; color: #fff; }

/* Series subscribe panel in modal */
.mv2-series-subscribe-panel {
  background: #faf8f5;
  border: 1px solid #e8e0d4;
  border-radius: 14px;
  padding: 20px 20px 16px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.mv2-series-subscribe-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
}
.mv2-series-subscribe-desc {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0;
  line-height: 1.55;
}
.mv2-rsvp-subscribe {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 12px 24px;
}
.mv2-series-subscribe-divider {
  font-size: 11px;
  color: var(--mv2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mv2-rsvp-single {
  font-size: 12px;
  color: var(--mv2-text-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.mv2-modal-subscribed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f0fdf4;
  border-bottom: 1px solid #bbf7d0;
  padding: 14px 20px;
}

.mv2-modal-subscribed-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mv2-modal-subscribed-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mv2-modal-subscribed-title {
  font-size: 14px;
  font-weight: 700;
  color: #15803d;
  line-height: 1.3;
}

.mv2-modal-subscribed-subtitle {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
  margin-top: 2px;
}

.mv2-series-leave-link {
  font-size: 13px;
  color: #374151;
  text-decoration: underline;
  white-space: nowrap;
  flex-shrink: 0;
}

.mv2-series-leave-link:hover { color: #111827; }

/* Series info bar — shown for unsubscribed members on series events */
.mv2-modal-series-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--mv2-surface);
  border-bottom: 1px solid var(--mv2-border);
  padding: 14px 20px;
  flex-shrink: 0;
}
.mv2-modal-series-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.mv2-modal-series-bar-left > i {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--mv2-text-muted);
}
.mv2-modal-series-bar-text {
  min-width: 0;
  overflow: hidden;
}
.mv2-modal-series-bar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mv2-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv2-modal-series-bar-sub {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin-top: 1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv2-btn-subscribe {
  flex-shrink: 0;
  white-space: nowrap;
}

.mv2-series-session-note {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin: 10px 0 4px;
  text-align: center;
}

/* =========================================================
   Empty states
   ========================================================= */

.mv2-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  border: 1px solid var(--mv2-border);
}
.mv2-empty i { font-size: 32px; color: var(--mv2-text-light); display: block; margin-bottom: 10px; }
.mv2-empty h4 { font-size: 15px; font-weight: 600; color: var(--mv2-text-muted); margin: 0 0 6px; }
.mv2-empty p  { font-size: 13px; color: var(--mv2-text-light); margin: 0; }

/* =========================================================
   Flash messages
   ========================================================= */

.mv2-flash-area {
  max-width: 80rem;
  margin: 12px auto 0;
  padding: 0 24px;
}

/* Always prevent schedule button from wrapping */
.mv2-navbar-schedule-btn { white-space: nowrap; }

/* =========================================================
   Responsive
   ========================================================= */

/* ── Tablet: hide schedule btn text, tighten spacing ── */
@media (max-width: 860px) {
  .mv2-navbar-schedule-btn .mv2-schedule-label { display: none; }
  .mv2-navbar-schedule-btn { padding: 8px 12px; }
  .mv2-navbar-nav .mv2-navbar-link span { display: none; }
  .mv2-navbar-link { padding: 8px 10px; }
}

/* ── Content collapses to single column on tablet ── */
@media (max-width: 900px) {
  .mv2-content-area {
    flex-direction: column;
    padding: 16px;
  }
  .mv2-event-area {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .mv2-feed-title { font-size: 28px; }
}

/* ── Slide-in drawer (mobile) ── */

/* Backdrop */
.mv2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: 150; /* below navbar (200) when closed — never blocks hamburger */
  opacity: 0;
  pointer-events: none;
  /* closing: ease-in — fades out quickly */
  transition: opacity 0.18s ease-in;
}
.mv2-drawer-backdrop.open {
  z-index: 400; /* above navbar when drawer is actually open */
  opacity: 1;
  pointer-events: auto;
  /* opening: ease-out — fades in smoothly */
  transition: opacity 0.28s ease-out;
}

/* Drawer panel */
.mv2-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--mv2-surface);
  z-index: 401;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  will-change: transform;
  box-shadow: 4px 0 32px rgb(0 0 0 / 0.14);
  pointer-events: none; /* natural position overlaps page; don't capture events until open */
  /* closing: ease-in, short — accelerates away, snappy */
  transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1);
}
.mv2-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
  /* opening: ease-out, slightly longer — glides in, settles naturally */
  transition: transform 0.28s cubic-bezier(0, 0, 0.2, 1);
}

/* Prevent body scroll when drawer is open */
body.mv2-drawer-open {
  overflow: hidden;
}

/* Drawer header — profile block */
.mv2-drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--mv2-border);
  background: var(--mv2-bg);
}
.mv2-drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mv2-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv2-drawer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv2-drawer-avatar-initials {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.mv2-drawer-user-info {
  flex: 1;
  min-width: 0;
}
.mv2-drawer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv2-drawer-since {
  font-size: 12px;
  color: var(--mv2-text-muted);
  margin: 0;
}
.mv2-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.mv2-drawer-close:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}

/* Drawer nav links */
.mv2-drawer-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  overflow-y: auto;
}
.mv2-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv2-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  min-height: 50px;
}
.mv2-drawer-link:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}
.mv2-drawer-link.active {
  background: #e8ddc2;
  color: var(--mv2-text);
  font-weight: 600;
}
.mv2-drawer-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--mv2-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: var(--mv2-text-muted);
}
.mv2-drawer-link.active .mv2-drawer-link-icon,
.mv2-drawer-link:hover .mv2-drawer-link-icon {
  background: rgb(0 0 0 / 0.06);
  color: var(--mv2-text);
}

/* Drawer footer — sign out etc */
.mv2-drawer-footer {
  padding: 10px;
  border-top: 1px solid var(--mv2-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv2-drawer-footer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-drawer-footer-link:hover {
  background: var(--mv2-gold-light);
  color: var(--mv2-text);
}
.mv2-drawer-signout {
  color: #c0392b;
}
.mv2-drawer-signout:hover {
  background: #fdecea;
  color: #c0392b;
}

/* ── Mobile: hamburger nav ── */
@media (max-width: 900px) {
  .mv2-navbar { padding: 0 16px; height: 56px; }
  .mv2-navbar-nav { display: none; }

  .mv2-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--mv2-border);
    background: var(--mv2-surface);
    color: var(--mv2-text);
    font-size: 18px;
    cursor: pointer;
    order: -1;
    flex-shrink: 0;
  }

  .mv2-navbar-schedule-btn span { display: none; }
  .mv2-navbar-schedule-btn { padding: 8px 10px; }

  .mv2-sidebar-sticky { width: 100%; position: static; max-height: none; overflow-y: visible; }
  .mv2-event-row { padding: 14px 16px 0; }
  .mv2-event-row-footer { padding: 12px 16px 14px; }
  .mv2-event-divider { margin: 0 16px; }
  .mv2-content-area { flex-direction: column; padding: 16px; gap: 16px; }
  .mv2-feed-title { font-size: 22px; }
  .mv2-modal-rsvp-buttons { grid-template-columns: 1fr; }
  .mv2-tabs-bar { max-width: 100%; overflow-x: auto; }
  .mv2-feed-header { flex-wrap: wrap; gap: 8px; }
}

/* Hide hamburger + drawer on desktop */
@media (min-width: 861px) {
  .mv2-hamburger { display: none; }
  .mv2-drawer { display: none !important; }
  .mv2-drawer-backdrop { display: none !important; }
}

/* =========================================================
   Location type badges (event card + modal)
   ========================================================= */
.mv2-tag-in-person,
.mv2-tag-in-person-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-in-person {
  padding: 5px 12px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.mv2-tag-in-person-sm {
  padding: 3px 8px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.mv2-tag-online,
.mv2-tag-online-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mv2-tag-online {
  padding: 5px 12px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.mv2-tag-online-sm {
  padding: 3px 8px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.mv2-tag-membership,
.mv2-tag-membership-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--mv2-gold-light);
  color: var(--mv2-text-gold);
  border: 1px solid var(--mv2-gold);
}
.mv2-tag-membership {
  padding: 5px 12px;
}
.mv2-tag-membership-sm {
  padding: 3px 8px;
}

/* =========================================================
   Add to calendar + Join Zoom buttons (event card footer)
   ========================================================= */
.mv2-btn-calendar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.mv2-btn-calendar:hover {
  background: var(--mv2-gold-light);
  border-color: var(--mv2-gold);
  color: var(--mv2-text);
}
.mv2-btn-join-zoom-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 50px;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-btn-join-zoom-sm:hover { background: #15803d; color: #fff; }

/* =========================================================
   Join Zoom button (modal — full width)
   ========================================================= */
.mv2-btn-join-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-btn-join-zoom:hover { background: #15803d; color: #fff; }

/* =========================================================
   Get Tickets button (modal)
   ========================================================= */
.mv2-btn-get-tickets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--mv2-gold-btn);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.mv2-btn-get-tickets:hover { background: #a8864e; color: #fff; }

/* =========================================================
   Clear RSVP link (inline in modal label row)
   ========================================================= */
.mv2-modal-clear-rsvp {
  font-size: 12px;
  font-weight: 500;
  color: var(--mv2-text-muted);
  text-decoration: underline;
  letter-spacing: 0;
  text-transform: none;
}
.mv2-modal-clear-rsvp:hover { color: var(--mv2-text); }

/* =========================================================
   "I want to cancel" section (modal)
   ========================================================= */
.mv2-modal-cancel-section {
  margin-top: 16px;
  text-align: center;
}
.mv2-btn-cancel-rsvp {
  font-size: 13px;
  color: #c0392b;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mv2-btn-cancel-rsvp:hover { color: #922b21; }

/* =========================================================
   In-person location notice (modal)
   ========================================================= */
.mv2-modal-location-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 14px;
  margin-bottom: 12px;
}

/* =========================================================
   Match survey standalone pages  (/surveys/:token)
   ========================================================= */
.sl-survey-shell {
  min-height: 100vh;
  background: #FAF4E8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 80px;
}
.sl-survey-wrap {
  width: 100%;
  max-width: 560px;
}
.sl-survey-logo {
  text-align: center;
  margin-bottom: 32px;
}
/* Progress bar */
.sl-survey-progress-bar-wrap {
  height: 8px;
  background: #e2d6b8;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sl-survey-progress-bar {
  height: 100%;
  background: #d3bc9b;
  border-radius: 50px;
  transition: width 0.4s ease;
}
.sl-survey-step-label {
  font-size: 13px;
  color: #7A7164;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.sl-survey-intro {
  font-size: 15px;
  color: #1A1A1A;
  margin-bottom: 24px;
  line-height: 1.6;
}
/* Question card */
.sl-survey-question-card {
  background: #fff;
  border: 1.5px solid #e2d6b8;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.sl-survey-question-text {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 6px;
  line-height: 1.4;
}
.sl-survey-question-hint {
  font-size: 13px;
  color: #7A7164;
  margin: 0;
  line-height: 1.5;
}
/* Scale label */
.sl-survey-scale-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7A7164;
  margin-bottom: 10px;
}
/* Pill buttons (1-5, 1-10, NPS) */
.sl-survey-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.sl-survey-pill-input {
  display: none;
}
.sl-survey-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 50px;
  border: 1.5px solid #e2d6b8;
  background: #fff;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.sl-survey-pill:hover {
  background: #f1e8d3;
  border-color: #d3bc9b;
}
.sl-survey-pill-input:checked + .sl-survey-pill {
  background: #d3bc9b;
  border-color: #d3bc9b;
  color: #fff;
}
/* Scale end labels */
.sl-survey-scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #7A7164;
  margin-bottom: 20px;
}
/* Yes / No pills */
.sl-survey-yesno-group {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.sl-survey-yesno-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid #e2d6b8;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sl-survey-pill-input:checked + .sl-survey-yesno-yes {
  background: #dcfce7;
  border-color: #86efac;
  color: #16a34a;
}
.sl-survey-pill-input:checked + .sl-survey-yesno-no {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #c0392b;
}
.sl-survey-yesno-yes:hover { background: #f0fdf4; border-color: #86efac; }
.sl-survey-yesno-no:hover  { background: #fef2f2; border-color: #fca5a5; }
/* Textarea / input */
.sl-survey-textarea,
.sl-survey-input {
  width: 100%;
  border: 1.5px solid #e2d6b8;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1A1A1A;
  background: #fff;
  margin-bottom: 20px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
}
.sl-survey-textarea:focus,
.sl-survey-input:focus {
  border-color: #d3bc9b;
  box-shadow: 0 0 0 3px rgb(211 188 155 / 0.2);
}
/* Submit button */
.sl-survey-submit-wrap {
  margin-top: 24px;
}
.sl-survey-btn {
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 50px;
  background: #d3bc9b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.sl-survey-btn:hover { background: #a8864e; color: #fff; }
.sl-survey-btn--outline {
  background: transparent;
  border: 1.5px solid #d3bc9b;
  color: #8a6f47;
}
.sl-survey-btn--outline:hover { background: #f1e8d3; color: #8a6f47; }
/* Completion screen */
.sl-survey-wrap--complete {
  text-align: center;
  padding-top: 20px;
}
.sl-survey-complete-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.sl-survey-complete-title {
  font-size: 28px;
  font-weight: 800;
  color: #1A1A1A;
  margin-bottom: 12px;
}
.sl-survey-complete-body {
  font-size: 15px;
  color: #7A7164;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .sl-survey-shell { padding: 24px 12px 60px; }
  .sl-survey-question-text { font-size: 16px; }
  .sl-survey-pill { min-width: 42px; height: 42px; font-size: 14px; }

  /* Modal: near-full-screen sheet on phones */
  .mv2-modal .modal-dialog {
    margin: 8px auto;
    max-width: calc(100% - 16px);
  }
  .mv2-modal .modal-content {
    border-radius: 16px;
    max-height: calc(100dvh - 16px);
  }
  .mv2-modal-no-cover-header { padding: 20px 16px 16px; }
  .mv2-modal-no-cover-date { font-size: 16px; }
  .mv2-modal-no-cover-time { font-size: 13px; }
  .mv2-modal-body { padding: 16px 16px 8px; }
  .mv2-modal-title { font-size: 22px; }
  .mv2-modal-rsvp-sticky { padding: 12px 16px; }
}

/* =========================================================
   Series name tag (event card + modal)
   ========================================================= */
.mv2-tag-series-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--mv2-text-muted);
}
.mv2-tag-series-name i { font-size: 13px; }

/* =========================================================
   Facilitated by line (modal)
   ========================================================= */
.mv2-modal-facilitated-by {
  font-size: 14px;
  color: var(--mv2-text-muted);
  margin: 0 0 16px;
}
.mv2-modal-facilitated-by strong { color: var(--mv2-text); }

/* =========================================================
   Join Zoom primary CTA (inside modal body)
   ========================================================= */
.mv2-btn-join-zoom-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  background: #16a34a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin: 0 0 20px;
  transition: background 0.15s;
}
.mv2-btn-join-zoom-body:hover { background: #15803d; color: #fff; }

.mv2-btn-add-to-calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.mv2-btn-add-to-calendar:hover {
  background: var(--mv2-gold-light);
  border-color: var(--mv2-gold);
  color: var(--mv2-text);
}

/* Membership subscribe checkout embed */
.mv2-membership-checkout-card {
  text-align: center;
}
.mv2-membership-checkout-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mv2-text);
  margin: 0 0 4px;
}
.mv2-membership-checkout-subtitle {
  font-size: 13px;
  color: var(--mv2-text-muted);
  margin: 0 0 16px;
}
.mv2-membership-checkout-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--mv2-text-muted);
  font-size: 14px;
}
.mv2-membership-checkout-spinner i {
  animation: mv2-spin 1s linear infinite;
}
@keyframes mv2-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================
   Course library / player — new components for the gated
   video course feature (courses#index/show, course_episodes#show).
   Reuses mv2-* tokens; adds only what didn't already exist
   (a card layout with a progress bar, and a locked state).
   ========================================================= */
.mv2-course-card {
  background: var(--mv2-surface);
  border-radius: var(--mv2-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(31 27 22 / 0.04), 0 4px 16px rgb(31 27 22 / 0.04);
  position: relative;
  margin-bottom: 20px;
}
.mv2-course-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, #D3BC9B 0%, #ECE1CC 50%, #D3BC9B 100%);
}
.mv2-course-body { padding: 20px 22px 22px; }
.mv2-course-name { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--mv2-text); }
.mv2-course-name-locked { font-size: 15px; font-weight: 500; color: var(--mv2-text-muted); }
.mv2-course-desc {
  font-size: 13.5px; color: var(--mv2-text-muted); line-height: 1.55; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Full, untruncated description on the episode show page — deliberately NOT
   .mv2-course-desc, whose 2-line clamp exists for the compact course-card
   preview (courses/index.html.erb) and was silently chopping the real
   episode description down to "…" on the actual detail page too, since both
   used to share the one class. Trix's own default typography (headings,
   lists, links — see actiontext.css's `= require trix`) applies inside
   .trix-content for free. */
.mv2-episode-desc {
  font-size: 13.5px; color: var(--mv2-text-muted); line-height: 1.6; margin: 0 0 14px;
}
.mv2-episode-desc p:last-child { margin-bottom: 0; }
.mv2-course-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mv2-course-progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--mv2-gold-light); overflow: hidden; }
.mv2-course-progress-fill { height: 100%; border-radius: 3px; background: var(--mv2-gold-btn); }
.mv2-course-progress-text { font-size: 12px; color: var(--mv2-text-muted); font-weight: 600; white-space: nowrap; }
.mv2-course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Shown only when the course has no cover image uploaded yet — a calm
   branded placeholder (icon + optional caption on a flat tint), not a
   literal "course cover" label standing in for real artwork. */
.mv2-course-card-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--mv2-gold-light); color: var(--mv2-text-gold); font-size: 12.5px; font-weight: 600;
}
.mv2-course-card-cover i { font-size: 34px; color: var(--mv2-gold-btn); }
/* A published course this member doesn't have access to yet — a desaturated
   version of the same placeholder rather than a second, different look. */
.mv2-course-card-cover.muted { background: var(--mv2-border); }
.mv2-course-card-cover.muted i { color: #8a8368; }

/* "1 episode free" upsell badge on a locked course's teaser card — a
   different color from mv2-tag-series ("Included with membership") so the
   two states read as clearly distinct at a glance. */
.mv2-tag-free {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 20px;
  background: #E4ECFB; color: #2952A3; margin-bottom: 10px;
}
.mv2-upgrade-note {
  font-size: 12.5px; color: var(--mv2-text-muted); font-weight: 600; text-decoration: none;
}
.mv2-upgrade-note:hover { color: var(--mv2-text-gold); }

.mv2-episode-list-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13.5px;
  border-top: 1px solid var(--mv2-border); text-decoration: none; color: var(--mv2-text);
}
.mv2-episode-list-item:first-child { border-top: none; }
.mv2-episode-list-item:hover { background: var(--mv2-gold-light); }
.mv2-episode-list-item.active { background: var(--mv2-gold-light); }
/* A locked episode in this list is a <div>, not a link — see
   courses/show.html.erb and course_episodes/show.html.erb, where only
   free_preview or already-accessible episodes render as real link_to's.
   This is the "can't click it" half; the lock icon itself is
   .mv2-lock-note below. */
.mv2-episode-list-item.locked { cursor: not-allowed; opacity: 0.55; }
.mv2-episode-list-item.locked:hover { background: none; }
.mv2-lock-note { font-size: 12px; color: var(--mv2-text-muted); flex-shrink: 0; }
.mv2-episode-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--mv2-gold-light); color: var(--mv2-text-muted);
}
.mv2-episode-list-item.active .mv2-episode-num { background: var(--mv2-gold-btn); color: #fff; }
.mv2-episode-num.done { background: #dcfce7; color: #16a34a; }
.mv2-episode-title { flex: 1; font-weight: 500; }
.mv2-episode-list-item.active .mv2-episode-title { font-weight: 700; color: var(--mv2-text-gold); }
.mv2-episode-duration { font-size: 12px; color: var(--mv2-text-muted); flex-shrink: 0; }

.mv2-video-wrap {
  aspect-ratio: 16/9; border-radius: var(--mv2-radius); overflow: hidden; background: #000;
  position: relative;
}
.mv2-video-wrap video { width: 100%; height: 100%; display: block; }

/* Custom "at rest" play button — shown until the member actually starts
   playback, then removed for good (see hls_player_controller.js#play) so
   the browser's own <video controls> can take over for scrubbing/volume.
   Covers the whole player so the native control bar doesn't peek out from
   underneath and look like a second, competing set of controls. */
.mv2-video-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: rgb(0 0 0 / 0.15);
}
.mv2-video-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgb(0 0 0 / 0.45); border: 2px solid rgb(255 255 255 / 0.85);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; padding-left: 3px; /* optical centering for the play glyph */
  transition: transform 0.15s ease, background 0.15s ease;
}
.mv2-video-play-overlay:hover .mv2-video-play-btn { background: rgb(0 0 0 / 0.6); transform: scale(1.06); }

/* Traceability watermark — see the comment in course_episodes/show.html.erb
   for why this exists alongside (not instead of) the real HLS/signed-URL
   protection. pointer-events: none so it never intercepts clicks meant for
   the native <video> controls underneath it. */
.mv2-video-watermark {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  transform: rotate(-18deg) scale(1.3);
}
.mv2-video-watermark span {
  align-self: center; justify-self: center; white-space: nowrap;
  font-size: 11px; color: rgb(255 255 255 / 0.16);
}

.mv2-exercise-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px;
  background: var(--mv2-surface); border: 1px solid var(--mv2-border); border-radius: 12px; font-size: 13.5px;
}
.mv2-exercise-note b { display: block; margin-bottom: 2px; }

.mv2-locked-card {
  background: var(--mv2-surface); border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius);
  padding: 48px 32px; text-align: center;
}

/* Course detail page — cover banner + sidebar "Up next" card (see the agreed
   prototype's cover-big / member-col-side blocks in
   docs/course_feature_prototype.html). Reuses mv2-profile-card as the sidebar
   card shell, same as the dashboard sidebar's profile/connections cards. */
.mv2-course-cover {
  height: 170px; border-radius: var(--mv2-radius); margin: 14px 0 20px; overflow: hidden;
  background: var(--mv2-gold-light);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--mv2-text-gold); font-size: 13px; font-weight: 600;
}
.mv2-course-cover i { font-size: 38px; color: var(--mv2-gold-btn); }
.mv2-upnext-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mv2-text-muted); font-weight: 700; margin-bottom: 12px;
}
/* Sidebar can list more than one upcoming episode (courses#index) or just
   the single next one (courses#show) — margin only applies between rows,
   so the single-row case is unaffected. */
.mv2-upnext-row { display: flex; align-items: center; gap: 12px; }
.mv2-upnext-row + .mv2-upnext-row { margin-top: 12px; }
.mv2-upnext-row .mv2-episode-num { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; }
.mv2-upnext-title { font-size: 13.5px; font-weight: 700; color: var(--mv2-text); }
.mv2-upnext-meta { font-size: 12px; color: var(--mv2-text-muted); margin-top: 2px; }
.mv2-upnext-card .mv2-btn-gold { width: 100%; justify-content: center; margin-top: 14px; }
.mv2-locked-icon { font-size: 32px; margin-bottom: 12px; }
.mv2-locked-title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--mv2-text); }
.mv2-locked-body { font-size: 14px; color: var(--mv2-text-muted); margin: 0 0 20px; }