/* ==========================================================================
   Public lives listing page (/lives) — SZP-146
   Visual reference: SENZA "Lives & Webinaires" mockup.
   ========================================================================== */

:root {
    --lives-purple: #6a4cff;
    --lives-purple-dark: #4b2fd6;
    --lives-navy: #141235;
    --lives-yellow: #ffc63f;
    --lives-lavender: #ece9ff;
    --lives-ink: #1c1b33;
    --lives-muted: #6f6e8a;
    --lives-radius: 18px;
}

/* --------------------------------------------------------------------------
   Intro section
   -------------------------------------------------------------------------- */
.lives-intro {
    background: linear-gradient(180deg, var(--lives-lavender) 0%, #f6f5ff 100%);
    padding: 70px 0 90px;
    position: relative;
    overflow: hidden;
}

.lives-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--lives-purple);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(106, 76, 255, 0.12);
}

.lives-intro__badge .fa-circle {
    font-size: 8px;
    color: #ff4d4f;
}

.lives-intro__title {
    margin: 22px 0 14px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--lives-ink);
}

.lives-intro__highlight {
    color: var(--lives-purple);
    background: linear-gradient(180deg, transparent 60%, rgba(255, 198, 63, 0.6) 60%);
}

.lives-intro__subtitle {
    max-width: 560px;
    color: var(--lives-muted);
    font-size: 17px;
    margin-bottom: 18px;
}

.lives-intro__breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--lives-muted);
}

.lives-intro__breadcrumb a {
    color: var(--lives-muted);
}

.lives-intro__breadcrumb a:hover {
    color: var(--lives-purple);
}

.lives-intro__breadcrumb .breadcrumb-separator {
    font-size: 11px;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Layout area
   -------------------------------------------------------------------------- */
.lives-area {
    padding: 0 0 80px;
    margin-top: -48px;
}

.lives-results__head {
    display: flex;
    justify-content: flex-end;
    margin: 28px 0 18px;
}

.lives-results__count {
    color: var(--lives-muted);
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Featured hero
   -------------------------------------------------------------------------- */
.live-hero {
    /* position + z-index keep the hero above the intro section: .lives-intro is
       positioned (relative), so it would otherwise paint over the hero pulled up by
       .lives-area's negative margin. */
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--lives-navy);
    border-radius: var(--lives-radius);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(20, 18, 53, 0.25);
}

.live-hero__media {
    position: relative;
    min-height: 360px;
}

/* Absolute positioning prevents the image's intrinsic height from driving the grid
   row height (which would create a circular height dependency and blow up the hero). */
.live-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-hero__content {
    padding: 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.live-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: rgba(255, 198, 63, 0.16);
    color: var(--lives-yellow);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 7px 14px;
    border-radius: 999px;
}

.live-hero__title {
    color: #fff;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

.live-hero__subtitle {
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.live-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 6px 0;
}

.live-hero__meta li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-hero__meta-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.5);
}

.live-hero__meta-value {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

/* Countdown */
.live-countdown {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-countdown__timer {
    display: flex;
    gap: 10px;
}

.live-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 54px;
}

.live-countdown__unit strong {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.live-countdown__unit small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
}

.live-countdown__live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ff4d4f;
    color: #fff;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
}

.live-countdown__live .fa-circle {
    font-size: 8px;
    animation: lives-pulse 1.2s infinite;
}

/* --------------------------------------------------------------------------
   Buttons & badges
   -------------------------------------------------------------------------- */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--lives-yellow);
    color: var(--lives-ink);
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 12px;
    cursor: pointer;
    align-self: flex-start;
    /* Animate only compositor-safe properties: a CTA must never reflow on hover, so the lift
       cue relies on shadow and brightness, not on geometry. */
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-cta:hover {
    box-shadow: 0 10px 22px rgba(255, 198, 63, 0.35);
    filter: brightness(1.03);
    color: var(--lives-ink);
}

.live-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
}

.live-hero__media .live-badge {
    top: 18px;
    left: 18px;
}

.live-badge--live {
    background: #ff4d4f;
    color: #fff;
}

.live-badge--live .fa-circle {
    font-size: 8px;
    animation: lives-pulse 1.2s infinite;
}

.live-badge--next {
    background: rgba(20, 18, 53, 0.82);
    color: #fff;
}

.live-badge--next .fa-circle {
    font-size: 8px;
    color: #ff4d4f;
}

.live-badge--finished {
    background: rgba(20, 18, 53, 0.82);
    color: #fff;
}

/* Brand purple, on purpose louder than the navy "Terminé" it replaces: an available replay is an
   invitation, not a closed door. */
.live-badge--replay {
    background: var(--lives-purple);
    color: #fff;
    box-shadow: 0 6px 18px rgba(106, 76, 255, 0.4);
}

.live-badge--replay .fa-play {
    font-size: 9px;
}

/* Same badge, but in the page flow instead of pinned over a media. */
.live-badge--static {
    position: static;
    margin: 0 auto 22px;
}

@keyframes lives-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   Host row
   -------------------------------------------------------------------------- */
.live-host {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-host__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.live-host__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lives-purple);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.live-hero__content .live-host__name {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.live-host__name {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 14px;
    color: var(--lives-ink);
}

.live-host__name small {
    color: var(--lives-muted);
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Cards grid
   -------------------------------------------------------------------------- */
.lives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.lives-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--lives-muted);
    padding: 40px 0;
}

.live-card {
    background: #fff;
    border-radius: var(--lives-radius);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(20, 18, 53, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.live-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(20, 18, 53, 0.14);
}

.live-card__header {
    position: relative;
    height: 130px;
    padding: 16px;
}

.live-card__theme {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--lives-ink);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 11px;
    border-radius: 999px;
}

.live-card__icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.live-card__date {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--lives-ink);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
}

.live-card__header .live-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
}

.live-badge--upcoming {
    background: rgba(255, 255, 255, 0.92);
    color: var(--lives-ink);
}

.live-card__body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.live-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--lives-purple);
    font-size: 13px;
    margin: 0;
}

.live-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--lives-ink);
}

.live-card__host {
    margin-top: auto;
}

.live-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.live-card__format {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lives-muted);
    font-size: 13px;
}

.live-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lives-lavender);
    color: var(--lives-purple);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Bottom incentive banner
   -------------------------------------------------------------------------- */
.lives-cta {
    margin-top: 50px;
    background: linear-gradient(135deg, var(--lives-purple), var(--lives-purple-dark));
    border-radius: var(--lives-radius);
    padding: 38px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.lives-cta__title {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 6px;
}

.lives-cta__subtitle {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Pagination (restyle of render_live_pager output)
   -------------------------------------------------------------------------- */
.lives-results .pagination__wrap .list-wrap {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
}

.lives-results .pagination__wrap .list-wrap li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--lives-ink);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(20, 18, 53, 0.08);
    cursor: pointer;
}

.lives-results .pagination__wrap .list-wrap li.active a {
    background: var(--lives-purple);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .lives-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .live-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .lives-grid {
        grid-template-columns: 1fr;
    }

    .live-hero__content {
        padding: 26px;
    }

    .lives-cta {
        padding: 28px;
    }
}

/* ==========================================================================
   Public live detail page (/lives/{slug}) — SZP-145, redesigned by SZP-224
   Visual reference: SENZA "Optin Live" mockup.
   ========================================================================== */

.live-show {
    --live-show-ink: #0e0e2c;
    --live-show-primary: #4e4eea;
    --live-show-primary-dark: #3535c9;
    --live-show-primary-light: #9d9dff;
    --live-show-muted: #5b5b78;
    --live-show-muted-light: #c7c7da;
    --live-show-tint: #f4f3ff;
    --live-show-line: #dedef5;
    --live-show-yellow: #ffc736;
    --live-show-yellow-dark: #f5b916;
    color: var(--live-show-ink);
}

.live-show__container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.live-show__container--narrow {
    max-width: 800px;
}

.live-show__eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--live-show-primary);
}

.live-show__eyebrow--light {
    color: var(--live-show-primary-light);
}

.live-show__section-title {
    margin: 12px 0 32px;
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 36px);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--live-show-ink);
}

/* -------------------------------------------------------------------- Hero */
.live-show__hero {
    position: relative;
    overflow: hidden;
    background: var(--live-show-ink);
    color: #fff;
}

.live-show__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 85% 30%, rgba(78, 78, 234, .35), transparent 70%);
    pointer-events: none;
}

.live-show__hero > .live-show__container {
    position: relative;
}

.live-show__hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 48px;
    align-items: start;
    padding-top: 64px;
    padding-bottom: 56px;
}

.live-show__hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 560px;
}

.live-show__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(78, 78, 234, .18);
    border: 1px solid rgba(138, 138, 255, .35);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
}

.live-show__chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b3b;
    animation: lives-pulse 1.6s infinite;
}

.live-show__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--live-show-muted-light);
}

.live-show__category i {
    color: var(--live-accent);
}

.live-show__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
}

.live-show__subtitle {
    margin: 0;
    max-width: 480px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--live-show-muted-light);
}

.live-show__hero-speakers {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-show__hero-avatars {
    display: flex;
    flex-shrink: 0;
}

.live-show__hero-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--live-show-ink);
}

.live-show__hero-avatar + .live-show__hero-avatar {
    margin-left: -12px;
}

.live-show__hero-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--live-show-primary);
    color: #fff;
    font-weight: 700;
}

.live-show__hero-speaker-names {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.4;
    color: var(--live-show-muted-light);
}

.live-show__hero-speaker-names strong {
    color: #fff;
}

.live-show__hero-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    justify-self: end;
    width: 100%;
    max-width: 440px;
}

.live-show__hero-aside .live-badge--static {
    margin: 0;
}

/* --------------------------------------------------------------- Countdown */
.live-show__countdown {
    justify-content: center;
    width: 100%;
}

.live-show__countdown .live-countdown__timer {
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.live-show__countdown .live-countdown__unit {
    flex: 1 1 0;
    min-width: 0;
    max-width: 76px;
    padding: 10px 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
}

.live-show__countdown--dark .live-countdown__unit {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}

.live-show__countdown .live-countdown__unit strong {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.live-show__countdown .live-countdown__unit small {
    margin-top: 5px;
    font-size: 10px;
    letter-spacing: .14em;
    color: #9a9ab8;
}

/* ------------------------------------------------------------ Booking block */
.live-show__booking {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    padding: 26px;
    border-radius: 18px;
    background: #fff;
    color: var(--live-show-ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    scroll-margin-top: 120px;
}

.live-show__booking-title {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--live-show-ink);
}

.live-show__booking-meta {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b85;
}

.live-show__booking-meta strong {
    color: var(--live-show-ink);
}

.live-show__booking-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
    color: #6b6b85;
}

/* -------------------------------------------------------- Registration form */
.live-registration__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.live-registration__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.live-registration__field .mb-3 {
    margin-bottom: 0 !important;
}

.live-registration__field input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #e1e1ec;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: var(--live-show-ink);
    box-shadow: none;
}

.live-registration__field input::placeholder {
    color: #8a8aa3;
}

.live-registration__field input:focus {
    outline: none;
    border-color: var(--live-show-primary);
    box-shadow: 0 0 0 3px rgba(78, 78, 234, .15);
}

.live-registration__field input.is-invalid {
    border-color: #dc3545;
}

.live-registration__field .invalid-feedback {
    margin-top: 4px;
    font-size: 12px;
}

.live-registration__submit {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 15px;
    border: 0;
    border-radius: 10px;
    background: var(--live-show-yellow);
    color: var(--live-show-ink);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease;
}

.live-registration__submit:hover {
    background: var(--live-show-yellow-dark);
    color: var(--live-show-ink);
}

.live-registration__alert {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff4e5;
    font-size: 13px;
    color: #8a4b00;
}

.live-registration__feedback {
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    color: var(--live-show-muted);
}

.live-registration__feedback-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 40px;
}

.live-registration__feedback--success .live-registration__feedback-icon {
    color: #0fa968;
}

.live-registration__feedback--info .live-registration__feedback-icon {
    color: var(--live-show-primary);
}

.live-registration__feedback-title {
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 17px;
    color: var(--live-show-ink);
}

/* --------------------------------------------------- Quoi / Quand / Où */
.live-show__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 64px;
}

.live-show__fact {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
}

.live-show__fact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--live-show-primary);
    box-shadow: 0 8px 24px rgba(78, 78, 234, .45);
    font-size: 18px;
    color: #fff;
}

.live-show__fact-label {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--live-show-primary-light);
}

.live-show__fact-title {
    margin: 6px 0 0;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: #fff;
}

.live-show__fact-text {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--live-show-muted-light);
}

/* --------------------------------------------------------------- Programme */
.live-show__program {
    padding: 80px 0;
    background: var(--live-show-tint);
}

/* Wider than the narrow column it sits in, as on the mock-up. */
.live-show__objectives {
    position: relative;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    width: min(1060px, calc(100vw - 48px));
    margin-bottom: 40px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--live-show-line);
    border-radius: 16px;
    background: #fff;
    transform: translateX(-50%);
}

.live-show__objectives-media {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.live-show__objectives-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px;
}

.live-show__objectives-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--live-show-ink);
}

.live-show__objectives-title span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-show-primary);
}

.live-show__objectives-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.live-show__objectives-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.live-show__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: #22c55e;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.live-show__parts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.live-show__part {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--live-show-line);
}

.live-show__part-number {
    padding-left: 14px;
    border-left: 2px solid var(--live-show-line);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #8a8aa3;
}

.live-show__part--highlight .live-show__part-number {
    border-left-color: var(--live-accent);
    color: var(--live-accent);
}

.live-show__part-title {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--live-show-ink);
}

.live-show__part-description {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--live-show-muted);
}

.live-show__part-points {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--live-show-muted);
}

.live-show__part-points i {
    margin-right: 6px;
    font-size: 11px;
    color: var(--live-accent);
}

.live-show__bonus {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding: 20px 24px;
    border: 1px solid var(--live-show-line);
    border-radius: 14px;
    background: #fff;
}

.live-show__bonus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--live-show-yellow);
    color: var(--live-show-ink);
}

.live-show__bonus-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--live-show-ink);
}

.live-show__bonus-text p {
    margin: 0;
    font-size: 14px;
    color: var(--live-show-muted);
}

.live-show__program-cta {
    display: flex;
    justify-content: center;
    margin-top: 36px;
    padding: 20px 24px;
    border: 1px solid var(--live-show-line);
    border-radius: 14px;
    background: #fff;
}

.live-show__program-cta-btn {
    padding: 13px 22px;
    border-radius: 10px;
    background: var(--live-show-primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    color: #fff;
}

.live-show__program-cta-btn:hover {
    background: var(--live-show-primary-dark);
    color: #fff;
}

/* ------------------------------------------------------------- Intervenants */
.live-show__speakers {
    padding: 88px 0;
}

.live-show__speakers .live-show__eyebrow {
    margin-bottom: 28px;
}

.live-show__speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
    max-width: 900px;
}

.live-speaker {
    --live-speaker-color: #5b4cf5;
    --live-speaker-bg: #edebff;
    --live-speaker-glow: rgba(91, 76, 245, .28);
    overflow: hidden;
    border: 1px solid #ececf3;
    border-radius: 16px;
    background: #fff;
}

.live-speaker--guest {
    --live-speaker-color: #d94fb0;
    --live-speaker-bg: #ffedf8;
    --live-speaker-glow: rgba(217, 79, 176, .28);
}

.live-speaker__media {
    display: flex;
    justify-content: center;
    padding: 32px 0 28px;
    background: var(--live-speaker-bg);
}

.live-speaker__photo {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--live-speaker-color);
    box-shadow: 0 18px 40px var(--live-speaker-glow);
}

.live-speaker__photo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-weight: 700;
    font-size: 48px;
    color: var(--live-speaker-color);
}

.live-speaker__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
}

.live-speaker__role {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--live-speaker-color);
}

.live-speaker__name {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    color: var(--live-show-ink);
}

.live-speaker__job {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--live-show-primary);
}

.live-speaker__presentation {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--live-show-muted);
}

.live-speaker__kpis {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--live-show-muted);
}

.live-speaker__kpis i {
    margin-right: 6px;
    font-size: 11px;
    color: var(--live-speaker-color);
}

/* -------------------------------------------------------------- Réassurance */
.live-show__trust {
    background: #ece9ff;
}

.live-show__trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 110px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 34px 24px;
    list-style: none;
}

.live-show__trust-list li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.live-show__trust-list img {
    display: block;
    width: auto;
    height: 29px;
}

.live-show__trust-list strong {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--live-show-ink);
}

.live-show__trust-list small {
    display: block;
    margin-top: 5px;
    font-size: 14.5px;
    color: var(--live-show-muted);
}

/* --------------------------------------------------------------------- FAQ */
.live-show__faq {
    padding: 88px 0;
    background: var(--live-show-tint);
}

.live-show__faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 40px;
}

.live-show__faq .live-show__section-title {
    margin-bottom: 0;
}

.live-show__faq .sz-faq__item {
    border-bottom: 1px solid var(--live-show-line);
}

.live-show__faq .sz-faq__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 0;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    color: var(--live-show-ink);
    cursor: pointer;
}

.live-show__faq .sz-faq__sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--live-show-primary);
    font-size: 16px;
    color: var(--live-show-primary);
}

.live-show__faq .sz-faq__panel {
    display: none;
}

.live-show__faq .sz-faq__panel.is-open {
    display: block;
}

.live-show__faq-answer {
    margin: 0;
    padding: 0 40px 18px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--live-show-muted);
}

/* --------------------------------------------------------------- CTA final */
.live-show__final-cta {
    position: relative;
    overflow: hidden;
    padding: 88px 0;
    background: var(--live-show-ink);
    color: #fff;
}

.live-show__final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 70% at 15% 80%, rgba(78, 78, 234, .35), transparent 70%);
    pointer-events: none;
}

.live-show__final-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 48px;
    align-items: center;
}

.live-show__final-grid > .live-show__booking {
    justify-self: end;
}

.live-show__final-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.live-show__final-title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -.02em;
    line-height: 1.12;
    color: #fff;
}

.live-show__final-title span {
    color: var(--live-show-primary-light);
}

.live-show__final-subtitle {
    margin: 0;
    font-size: 16px;
    color: var(--live-show-muted-light);
}

.live-show__final-arguments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #d5d5e6;
}

.live-show__final-arguments li {
    display: flex;
    gap: 10px;
}

.live-show__final-arguments span {
    color: #7cf29a;
}

.live-show__final-content .live-show__countdown {
    justify-content: flex-start;
    max-width: 320px;
}

.live-show__final-content .live-show__countdown .live-countdown__timer {
    justify-content: flex-start;
}

.live-show__final-content .live-badge--static {
    margin: 0;
}

/* ----------------------------------------------- Lead modal (alerts, landing pages) */
/* The shared .Modal-area clips its content (overflow: hidden) and pins the box 150px from the top,
   so a tall form is cut off on short screens. Scroll the overlay instead, and center the box with
   auto margins so it stays reachable from the top once it is taller than the viewport. */
.live-registration-modal {
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    padding: 20px 0;
}

.live-registration-modal .container {
    position: relative;
    top: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.live-registration-modal .Modal-wrap {
    max-height: none;
    overflow: visible;
}

.live-registration-modal__wrap {
    text-align: center;
}

.live-registration-modal__intro {
    color: var(--lives-muted);
    margin-bottom: 22px;
}

.live-registration-form {
    text-align: left;
}

.live-registration-modal__feedback {
    padding: 20px 0;
}

.live-registration-modal__feedback-icon {
    font-size: 46px;
    display: block;
    margin-bottom: 14px;
}

.live-registration-modal__feedback--success .live-registration-modal__feedback-icon {
    color: #0fa968;
}

.live-registration-modal__feedback--info .live-registration-modal__feedback-icon {
    color: var(--lives-purple);
}

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 991px) {
    .live-show__hero-aside,
    .live-show__final-grid > .live-show__booking {
        justify-self: center;
    }

    .live-show__trust-list {
        gap: 24px 48px;
    }
}

@media (max-width: 699px) {
    .live-show__hero-grid {
        padding: 40px 20px;
    }

    .live-show__part {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .live-show__booking {
        padding: 22px 18px;
    }

    .live-registration__row {
        grid-template-columns: 1fr;
    }

    .live-show__program-cta-btn {
        white-space: normal;
        text-align: center;
    }
}

/* ==========================================================================
   Public replays listing (/replays) — SZP-179
   Visual reference: SENZA "Replays" mockup, proposal 1 (segmented tabs and
   floating filter bar). Reuses the tokens and the card of the /lives page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tab bar, shared by /lives and /replays
   -------------------------------------------------------------------------- */
.lives-tabs {
    display: inline-flex;
    gap: 4px;
    margin-top: 24px;
    padding: 5px;
    background: rgba(255, 255, 255, .75);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(20, 18, 53, .08);
}

.lives-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lives-muted);
    text-decoration: none;
}

.lives-tabs__item--active {
    background: var(--lives-purple);
    color: #fff;
    box-shadow: 0 6px 16px rgba(106, 76, 255, .3);
}

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.lives-filters {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: var(--lives-radius);
    box-shadow: 0 20px 44px rgba(20, 18, 53, .12);
    padding: 20px 22px;
}

.lives-filters__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.lives-filters__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.lives-filters__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--lives-muted);
}

.lives-filters__control {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 14px;
    background: #f7f6fd;
    border: 1px solid #eae8f6;
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--lives-ink);
    overflow: hidden;
}

.lives-filters__control > i {
    color: var(--lives-purple);
}

/* The control is the styled box; the real field inside it is stripped of its own chrome so the
   native input and select blend into the mockup's appearance. */
.lives-filters__control input,
.lives-filters__control select {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    appearance: none;
}

.lives-filters__control input::placeholder {
    color: var(--lives-muted);
}

.lives-filters__control--select > i:last-child {
    color: var(--lives-muted);
    font-size: 11px;
}

.lives-filters__control--filled {
    background: #fff;
    border-color: var(--lives-purple);
    box-shadow: 0 0 0 3px rgba(106, 76, 255, .1);
    font-weight: 600;
}

.lives-filters__submit {
    height: 44px;
    padding: 0 22px;
    border: none;
    border-radius: 12px;
    background: var(--lives-purple);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.lives-filters__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #f0eff8;
    flex-wrap: wrap;
}

.lives-filters__hint {
    font-size: 12.5px;
    color: var(--lives-muted);
}

.lives-filters__tools {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.lives-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lives-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.lives-filters__reset:hover {
    color: var(--lives-purple);
}

.lives-sortbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lives-muted);
}

.lives-sortbar label {
    margin: 0;
}

.lives-sortbar select {
    border: 1px solid #eae8f6;
    background: #fff;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lives-ink);
}

/* --------------------------------------------------------------------------
   Results — replay variants of the shared listing blocks
   -------------------------------------------------------------------------- */

/* /lives keeps its right-aligned counter; only the replays page pushes it to the left, so the
   shared .lives-results__head rule is left untouched. */
.lives-results__head--replays {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.live-card--replay .live-card__header {
    display: grid;
    place-items: center;
}

.live-card__play {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--lives-navy);
    display: inline-grid;
    place-items: center;
    font-size: 17px;
    box-shadow: 0 8px 20px rgba(20, 18, 53, .25);
    border: none;
    padding-left: 3px;
}

.live-badge--replay {
    background: rgba(20, 18, 53, .82);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.lives-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed #ddd9f0;
    border-radius: var(--lives-radius);
    padding: 46px 30px;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 12px;
}

.lives-empty__icon {
    color: var(--lives-purple);
    opacity: .45;
    font-size: 44px;
}

.lives-empty__title {
    font-size: 19px;
    font-weight: 800;
    margin: 0;
    color: var(--lives-ink);
}

.lives-empty__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.lives-empty__ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lives-lavender);
    color: var(--lives-purple);
    font-weight: 700;
    font-size: 13px;
    padding: 11px 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

@media (max-width: 1199px) {
    .lives-filters__row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .lives-filters__row {
        grid-template-columns: 1fr;
    }

    .lives-tabs {
        display: flex;
        width: 100%;
    }

    .lives-tabs__item {
        flex: 1;
        justify-content: center;
        padding: 9px 12px;
    }

    .lives-filters__foot {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   Live thank-you page (/lives/{slug}/merci) — SZP-211
   ========================================================================== */

.live-thank-you {
    --live-thank-you-accent: #4e4eea;
    --live-thank-you-accent-dark: #3535c9;
    --live-thank-you-ink: #0e0e2c;
    --live-thank-you-text: #3a3a58;
    --live-thank-you-muted: #5b5b78;
    --live-thank-you-border: #e4e2fb;
    --live-thank-you-soft: #f6f5ff;
    background: #f4f3ff;
    color: var(--live-thank-you-ink);
    padding: 48px 24px 56px;
}

.live-thank-you__card {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(46, 40, 140, 0.1);
    overflow: hidden;
}

.live-thank-you__confirmation {
    padding: 48px 48px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

.live-thank-you__logo {
    height: 44px;
    width: auto;
    margin-bottom: 10px;
}

.live-thank-you__confirmed-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #e7f8ee;
    color: #128a43;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-thank-you__confirmed-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.live-thank-you .live-thank-you__title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 5vw, 40px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--live-thank-you-ink);
}

.live-thank-you__intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.live-thank-you .live-thank-you__appointment {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--live-thank-you-text);
}

.live-thank-you__appointment strong {
    color: var(--live-thank-you-ink);
}

.live-thank-you .live-thank-you__email-sent {
    margin: 0;
    font-size: 14px;
    color: #6b6b85;
}

.live-thank-you__live-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--live-thank-you-accent);
    background: #f1f0ff;
    padding: 8px 14px;
    border-radius: 10px;
}

.live-thank-you__section {
    padding: 0 48px;
}

.live-thank-you__section--todo {
    margin-top: 36px;
}

.live-thank-you__section--timeline {
    margin-top: 44px;
}

/* --- Welcome video --- */

.live-thank-you .live-thank-you__video-title,
.live-thank-you .live-thank-you__timeline-title {
    margin: 0 0 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    color: var(--live-thank-you-ink);
}

.live-thank-you .live-thank-you__timeline-title {
    margin-bottom: 24px;
    font-size: 22px;
}

.live-thank-you__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: var(--live-thank-you-ink);
}

.live-thank-you__video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: radial-gradient(70% 90% at 70% 40%, #4e4eea 0%, #2a2a8c 55%, #0e0e2c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-thank-you__video-portrait {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 38%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.85);
    opacity: 0.95;
}

.live-thank-you__video-caption {
    position: absolute;
    left: 7%;
    bottom: 10%;
    /* Stops short of the portrait, which sits on the right 46% of the poster. */
    max-width: 45%;
    text-align: left;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-thank-you__video-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(15px, 2.6vw, 22px);
}

.live-thank-you__video-role {
    font-size: clamp(11px, 1.8vw, 14px);
    color: #d8d8ff;
}

.live-thank-you__video-play {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;
    color: var(--live-thank-you-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.live-thank-you__video-poster:hover .live-thank-you__video-play,
.live-thank-you__video-poster:focus-visible .live-thank-you__video-play {
    transform: scale(1.06);
}

.live-thank-you__video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- To do now --- */

.live-thank-you__todo {
    background: var(--live-thank-you-soft);
    border: 1px solid var(--live-thank-you-border);
    border-radius: 22px;
    padding: 24px 28px;
}

.live-thank-you__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--live-thank-you-accent);
    font-weight: 700;
    margin-bottom: 6px;
}

.live-thank-you .live-thank-you__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: live-thank-you-step;
}

.live-thank-you .live-thank-you__step {
    counter-increment: live-thank-you-step;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px 0 18px 56px;
    border-bottom: 1px solid var(--live-thank-you-border);
}

.live-thank-you .live-thank-you__step:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.live-thank-you__step::before {
    content: counter(live-thank-you-step);
    position: absolute;
    left: 0;
    top: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--live-thank-you-accent);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-thank-you__step-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--live-thank-you-ink);
}

.live-thank-you__step-text {
    font-size: 14px;
    color: var(--live-thank-you-muted);
    line-height: 1.55;
    margin-top: -6px;
}

.live-thank-you__calendar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.live-thank-you .live-thank-you__calendar-link {
    padding: 11px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dadaf0;
    color: var(--live-thank-you-ink);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}

.live-thank-you .live-thank-you__calendar-link:hover {
    border-color: var(--live-thank-you-accent);
    color: var(--live-thank-you-accent);
}

.live-thank-you .live-thank-you__whatsapp-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    background: #25d366;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.live-thank-you .live-thank-you__whatsapp-link:hover {
    background: #1ebe5a;
    color: #fff;
}

/* --- Survey (LiveSurvey component, one of the numbered steps) --- */

.live-thank-you__survey-form {
    background: #fff;
    border: 1px solid var(--live-thank-you-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.live-thank-you__survey-question {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.live-thank-you .live-thank-you__survey-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--live-thank-you-ink);
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}

.live-thank-you__survey-optional {
    font-weight: 400;
    color: #8a8aa3;
}

.live-thank-you__survey-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The radio stays in the accessibility tree and keyboard reachable, only its native dot is hidden. */
.live-thank-you__survey-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.live-thank-you .live-thank-you__survey-choice label {
    display: inline-block;
    margin: 0;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #dadaf0;
    background: #fff;
    color: var(--live-thank-you-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.live-thank-you .live-thank-you__survey-choice input:checked + label {
    background: var(--live-thank-you-accent);
    border-color: var(--live-thank-you-accent);
    color: #fff;
}

.live-thank-you .live-thank-you__survey-choice input:focus-visible + label {
    box-shadow: 0 0 0 3px rgba(78, 78, 234, 0.25);
}

.live-thank-you .live-thank-you__survey-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e1e1ec;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
    outline: none;
}

.live-thank-you .live-thank-you__survey-textarea:focus {
    border-color: var(--live-thank-you-accent);
    box-shadow: 0 0 0 3px rgba(78, 78, 234, 0.15);
}

.live-thank-you .live-thank-you__survey-submit {
    align-self: flex-start;
    padding: 13px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--live-thank-you-accent);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.live-thank-you .live-thank-you__survey-submit:hover {
    background: #3f3fd6;
}

/* Greyed out while a required question is unanswered, as on the mockup. Purely visual: the server
   validation still rejects an incomplete submission (e.g. sent with the Enter key). */
.live-thank-you .live-thank-you__survey-question--required:not(:has(input:checked)) ~ .live-thank-you__survey-submit {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* An optional step that does not apply is rendered hidden: keep it out of the layout and the counter. */
.live-thank-you .live-thank-you__step[hidden] {
    display: none;
}

.live-thank-you__survey-error,
.live-thank-you__survey-error ul {
    color: #c62828;
    font-size: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.live-thank-you__survey-thanks {
    background: #e7f8ee;
    color: #128a43;
    border-radius: 12px;
    padding: 16px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.live-thank-you__survey-thanks-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* --- Timeline --- */

.live-thank-you .live-thank-you__timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: live-thank-you-timeline;
}

.live-thank-you .live-thank-you__timeline-step {
    counter-increment: live-thank-you-timeline;
    position: relative;
    padding: 5px 0 28px 56px;
}

.live-thank-you__timeline-step::before {
    content: counter(live-thank-you-timeline);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--live-thank-you-accent);
    color: var(--live-thank-you-accent);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Vertical line joining a step to the next one. */
.live-thank-you__timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 4px;
    width: 2px;
    background: #dadaf0;
}

.live-thank-you__timeline-step .live-thank-you__step-text {
    margin-top: 6px;
}

.live-thank-you__timeline-gift {
    font-size: 14px;
    color: var(--live-thank-you-text);
    margin-top: 8px;
    line-height: 1.55;
    background: #fff7e0;
    border-radius: 10px;
    padding: 10px 12px;
}

/* --- Social networks --- */

.live-thank-you__socials {
    padding: 36px 48px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    border-top: 1px solid #eeedf8;
    margin-top: 12px;
}

.live-thank-you .live-thank-you__socials-text {
    margin: 0;
    font-size: 15px;
    color: var(--live-thank-you-text);
    max-width: 420px;
    line-height: 1.5;
}

.live-thank-you__socials-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.live-thank-you .live-thank-you__social-link {
    padding: 11px 18px;
    border-radius: 999px;
    background: #f1f0ff;
    color: var(--live-thank-you-ink);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}

.live-thank-you .live-thank-you__social-link:hover {
    background: var(--live-thank-you-accent);
    color: #fff;
}

@media (max-width: 639px) {
    .live-thank-you {
        padding: 16px 12px 32px;
    }

    .live-thank-you__confirmation {
        padding: 32px 20px 28px;
    }

    .live-thank-you__section {
        padding: 0 16px;
    }

    .live-thank-you__todo {
        padding: 18px 16px;
    }

    .live-thank-you__socials {
        padding: 28px 20px 32px;
    }
}