/* ============================================
   MEHFIL RESTAURANT — THANK YOU PAGE
   ============================================ */

/* ---------- Section ---------- */
.mf-thankyou {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Header is position:fixed — clear it explicitly instead of relying on centering. */
    padding: 200px 0 var(--mf-space-5xl);
    background: var(--mf-bg-primary);
    overflow: hidden;
    text-align: center;
}

.mf-thankyou::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 640px;
    max-width: 140vw;
    max-height: 140vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--mf-gold-glow) 0%, rgba(11, 11, 15, 0) 70%);
    pointer-events: none;
}

.mf-thankyou__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 var(--mf-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Breadcrumb ---------- */
.mf-thankyou__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--mf-text-secondary);
    margin-bottom: var(--mf-space-xl);
}

.mf-thankyou__breadcrumb a {
    color: var(--mf-text-secondary);
    transition: color var(--mf-duration-fast) var(--mf-ease);
}

.mf-thankyou__breadcrumb a:hover {
    color: var(--mf-gold);
}

.mf-thankyou__breadcrumb-sep {
    color: var(--mf-gold);
    font-size: 0.6rem;
}

/* ---------- Icon ---------- */
.mf-thankyou__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 10vw, 96px);
    height: clamp(72px, 10vw, 96px);
    border-radius: var(--mf-radius-full);
    background: var(--mf-bg-card);
    border: 1.5px solid var(--mf-border-light);
    box-shadow: var(--mf-shadow-gold);
    color: var(--mf-gold);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--mf-space-lg);
}

/* ---------- Copy ---------- */
.mf-thankyou__subheading {
    margin-bottom: var(--mf-space-md);
    justify-content: center;
}

.mf-thankyou__title {
    font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mf-text-primary);
    margin-bottom: var(--mf-space-md);
}

.mf-thankyou__divider {
    margin: 0 0 var(--mf-space-lg);
}

.mf-thankyou__message {
    color: var(--mf-text-secondary);
    max-width: 480px;
    margin: 0 auto var(--mf-space-lg);
}

/* ---------- Event Intro ---------- */
.mf-thankyou__event-intro {
    color: var(--mf-text-secondary);
    max-width: 480px;
    margin: 0 auto var(--mf-space-xl);
}

.mf-thankyou__event-name {
    display: inline-block;
    margin-top: 0.4rem;
    font-family: var(--mf-font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw + 0.4rem, 1.5rem);
    color: var(--mf-gold-light);
}

/* Sits under the gold event name as a subtitle, so it reads as part
   of the same line of thought rather than a second announcement. */
.mf-thankyou__event-tagline {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mf-text-secondary);
}

/* ---------- Event Details Card ----------
   A ticket stub: two labelled details either side of a dashed tear
   line. The labels matter — previously the date and the venue were
   two identical lines of small text and nothing said which was which.
   Splitting the time onto its own line also stops the date wrapping
   around a pipe character on a narrow screen. */
.mf-thankyou__event {
    width: 100%;
    max-width: 600px;
    margin: 0 auto var(--mf-space-xl);

    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: stretch;

    background:
        radial-gradient(120% 150% at 50% 0%, rgba(212, 160, 74, 0.10), transparent 62%),
        var(--mf-bg-card);
    border: 1px solid rgba(212, 160, 74, 0.22);
    border-radius: var(--mf-radius-lg);
    padding: var(--mf-space-lg) var(--mf-space-md);
    transition: border-color var(--mf-duration-fast) var(--mf-ease),
                box-shadow var(--mf-duration-fast) var(--mf-ease);
}

.mf-thankyou__event:hover {
    border-color: rgba(212, 160, 74, 0.55);
    box-shadow: var(--mf-shadow-gold);
}

.mf-thankyou__event-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.15rem 0.95rem;
    text-align: left;
}

.mf-thankyou__event-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(212, 160, 74, 0.12);
    border: 1px solid rgba(212, 160, 74, 0.28);
    color: var(--mf-gold);
    font-size: 0.85rem;
}

.mf-thankyou__event-body {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
    min-width: 0;
}

.mf-thankyou__event-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mf-gold);
}

.mf-thankyou__event-value {
    font-family: var(--mf-font-display);
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mf-text-primary);
}

.mf-thankyou__event-meta {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--mf-text-secondary);
}

/* The tear line. Vertical between the two cells, horizontal once they
   stack — the perforation always runs along the split. */
.mf-thankyou__event-tear {
    width: 1px;
    align-self: stretch;
    background: repeating-linear-gradient(
        to bottom,
        rgba(212, 160, 74, 0.38) 0 5px,
        transparent 5px 11px
    );
}

/* ---------- Note ---------- */
.mf-thankyou__note {
    color: var(--mf-text-muted);
    max-width: 480px;
    margin: 0 auto var(--mf-space-2xl);
}

/* ---------- Actions ---------- */
.mf-thankyou__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

/* ---------- Responsive: Tablet ---------- */
@media (max-width: 992px) {
    .mf-thankyou {
        min-height: 60vh;
        padding-top: 180px;
    }
}

/* ---------- Responsive: Mobile ---------- */
@media (max-width: 768px) {
    .mf-thankyou {
        min-height: auto;
        padding: 160px 0 var(--mf-space-4xl);
    }

    .mf-thankyou__message,
    .mf-thankyou__event-intro,
    .mf-thankyou__note {
        max-width: 100%;
    }

    .mf-thankyou__event {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .mf-thankyou {
        padding-top: 130px;
    }

    .mf-thankyou__event-value {
        font-size: 0.97rem;
    }

    .mf-thankyou__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mf-thankyou__actions .mf-btn {
        width: 100%;
    }

    .mf-thankyou__icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }
}

/* Two cells side by side need about 560px; below that they stack and
   the tear line turns horizontal. */
@media (max-width: 680px) {
    .mf-thankyou__event {
        grid-template-columns: 1fr;
        justify-content: stretch;
        padding: var(--mf-space-md);
    }

    .mf-thankyou__event-cell {
        padding: 0.7rem 0.35rem;
    }

    .mf-thankyou__event-tear {
        width: auto;
        height: 1px;
        align-self: auto;
        background: repeating-linear-gradient(
            to right,
            rgba(212, 160, 74, 0.38) 0 5px,
            transparent 5px 11px
        );
    }
}