/*
 * MogosEvent Revamp — Design Tokens
 * Source: Figma "Mogo Event" file, node 1243:2980 ("09 / Design System Ref"), read 2026-09-01.
 * Isolated under /revamp/ — never loaded by the live "basic" theme.
 */

:root {
    --mv-navy-primary: #0D3875;
    --mv-navy-dark: #071E45;
    --mv-orange: #F15F22;
    --mv-orange-light: #FF7A3D;
    --mv-navy-tint: #EBF1FA;
    --mv-white: #FFFFFF;
    --mv-background: #F8FAFF;
    --mv-text-dark: #0A2240;
    --mv-text-soft: #4A6A8A;
    --mv-azure: #1A52A3;
}

body.mv-revamp {
    background: var(--mv-background);
    color: var(--mv-text-dark);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
}

.mv-revamp h1, .mv-revamp h2, .mv-revamp h3 {
    color: var(--mv-navy-primary);
    margin: 0;
    overflow-wrap: break-word;
}

.mv-h1 { font-size: 56px; font-weight: 800; line-height: 1.1; }
.mv-h2 { font-size: 36px; font-weight: 800; line-height: 1.15; }
.mv-h3 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.mv-body { font-size: 16px; font-weight: 400; color: var(--mv-text-dark); }
.mv-label { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mv-text-soft); }

.mv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.mv-btn:hover { opacity: 0.92; }
.mv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mv-btn:disabled:hover { opacity: 0.45; }
.mv-btn--primary { background: var(--mv-orange); color: var(--mv-white); }
.mv-btn--outline { background: transparent; color: var(--mv-navy-primary); border: 1px solid var(--mv-navy-primary); }

.mv-card {
    background: var(--mv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(13, 56, 117, 0.08), 0 4px 16px rgba(13, 56, 117, 0.06);
}

.mv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.mv-badge--category { background: var(--mv-navy-tint); color: var(--mv-orange); }
.mv-badge--verified { color: var(--mv-orange); font-weight: 600; }

/* Layout primitives — event_details.blade.php
 * Source: Figma "Mogo Event" file, nodes 1243:2435 ("03 / Event Detail", desktop)
 * and 1244:3432 ("MOB 03 — Event Detail", mobile), read 2026-09-01.
 */
*, *::before, *::after { box-sizing: border-box; }
body.mv-revamp { overflow-x: hidden; }

.mv-desktop-only { display: block; }
.mv-mobile-only { display: none; }

.mv-nav {
    position: relative;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--mv-navy-tint);
    padding: 16px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.mv-logo { display: flex; align-items: center; text-decoration: none; }
.mv-logo-img { height: 40px; width: auto; max-width: 170px; object-fit: contain; }

.mv-nav-menu { display: contents; }
.mv-nav-links { display: flex; gap: 32px; font-weight: 600; font-size: 15px; }
.mv-nav-links a { color: var(--mv-text-dark); text-decoration: none; }
.mv-nav-auth { display: flex; gap: 12px; align-items: center; }

.mv-nav-toggle-checkbox { display: none; }
.mv-nav-toggle-btn { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 24px; height: 20px; cursor: pointer; }
.mv-nav-toggle-btn span { display: block; height: 2px; border-radius: 1px; background: var(--mv-navy-primary); }

/* Utility bar + nav search + active link + scroll-to-sticky nav — shared partial,
 * templates/revamp/partials/nav.blade.php. Source: user-provided screenshots
 * (desktop, pre- and post-scroll states), not Figma-API-verified. The utility bar's
 * country/currency text is static display only (no real switcher logic exists yet,
 * matching the hero's own location/category display fields). On scroll past the
 * utility bar, it fades out and the main nav docks fixed-to-top with its own fade-in
 * (JS toggles .mv-nav--stuck / body.mv-has-stuck-nav; see partial's inline script).
 */
.mv-topbar {
    background: var(--mv-navy-dark);
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    padding: 8px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: opacity 0.25s ease;
}
.mv-topbar__side { display: flex; align-items: center; gap: 18px; }
.mv-topbar__side--right a { color: rgba(255,255,255,0.75); text-decoration: none; }
.mv-topbar__side--right a:hover { color: #fff; }
.mv-topbar__organizer-login { text-decoration: underline !important; }
.mv-topbar__flag { font-size: 14px; }

.mv-nav-link--active { color: var(--mv-orange) !important; font-weight: 800; }

.mv-nav-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mv-navy-tint);
    border: 1px solid #C5D8EE;
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    flex: 1 1 260px;
    max-width: 320px;
    margin: 0 8px;
}
.mv-nav-search i { color: var(--mv-text-soft); font-size: 15px; flex-shrink: 0; }
.mv-nav-search input {
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 13px;
    color: var(--mv-text-dark);
    width: 100%;
}
.mv-nav-search input::placeholder { color: var(--mv-text-soft); }

.mv-nav--stuck {
    position: fixed;
    top: 0; left: 0; right: 0;
    animation: mv-nav-fade-in 0.25s ease;
    box-shadow: 0 4px 20px rgba(13,56,117,0.12);
}
/* Once the nav is fixed to the very top, the topbar underneath it must
 * actually disappear from layout — leaving it visible-but-covered caused a
 * real bug: the fixed nav sat exactly on top of the still-present topbar,
 * so both were visible/overlapping at once depending on scroll position and
 * viewport, showing as duplicated/clipped text above the page. */
body.mv-has-stuck-nav .mv-topbar {
    display: none;
}
body.mv-has-stuck-nav { padding-top: var(--mv-nav-height, 73px); }
@keyframes mv-nav-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* event_details.blade.php's overlay nav sits transparently over the hero photo on
 * mobile (Figma "MOB 03") — the utility bar above it would show as a solid navy strip
 * floating over the photo, which isn't the source design, so this page hides it on
 * mobile only (desktop keeps both, same as Home/Events). */
@media (max-width: 900px) {
    body:has(.mv-nav--overlay) .mv-topbar { display: none; }
}

.mv-hero {
    position: relative;
    min-height: 260px;
    background-color: var(--mv-navy-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.mv-hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,34,64,0.85), rgba(10,34,64,0.55)); }
.mv-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 32px 40px 40px; color: #fff; }
.mv-breadcrumb { font-size: 13px; opacity: 0.85; margin-bottom: 12px; }
.mv-breadcrumb a { color: #fff; text-decoration: none; }
.mv-hero-subtitle { margin-top: 10px; font-size: 13px; opacity: 0.8; }
.mv-badge--hero { background: #FF4D2D; color: #fff; margin-bottom: 14px; }

.mv-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 40px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}
.mv-ticket-panel { position: sticky; top: 24px; }

.mv-detail-row { display: flex; align-items: flex-start; gap: 12px; }
.mv-detail-row > div { min-width: 0; }
.mv-detail-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; color: var(--mv-navy-primary); }

/* Ticket steppers */
.mv-ticket-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--mv-navy-tint); gap: 12px; }
.mv-ticket-row > div:first-child { min-width: 0; }
.mv-ticket-row__name { font-weight: 700; color: var(--mv-text-dark); font-size: 14px; overflow-wrap: break-word; }
.mv-ticket-row__price { color: var(--mv-orange); font-weight: 700; font-size: 13px; margin-top: 2px; }
.mv-stepper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mv-stepper__btn {
    width: 30px; height: 30px;
    border-radius: 999px;
    border: 1.5px solid #D6E2F5;
    background: #fff;
    color: var(--mv-navy-primary);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    padding: 0;
}
.mv-stepper__btn:hover { background: var(--mv-navy-tint); }
.mv-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mv-stepper__qty { min-width: 18px; text-align: center; font-weight: 700; color: var(--mv-text-dark); font-size: 14px; }

.mv-ticket-total-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 13px; color: var(--mv-text-soft); font-weight: 600; }
.mv-ticket-total-amount { color: var(--mv-navy-primary); font-weight: 800; font-size: 17px; }

@media (max-width: 900px) {
    .mv-desktop-only { display: none !important; }
    .mv-mobile-only { display: block !important; }

    .mv-nav { padding: 14px 20px; }
    .mv-nav--overlay {
        position: absolute;
        top: 0; left: 0; right: 0;
        background: transparent;
        border-bottom: none;
        padding: 18px 20px;
    }
    .mv-nav-toggle-btn { display: flex; }
    .mv-nav--overlay .mv-nav-toggle-btn span { background: #fff; }

    .mv-nav-menu {
        display: none;
        position: absolute;
        top: 60px; left: 20px; right: 20px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(13,56,117,0.18);
        padding: 20px;
        flex-direction: column;
        gap: 20px;
    }
    .mv-nav-toggle-checkbox:checked ~ .mv-nav-menu { display: flex; }
    .mv-nav-links,
    .mv-nav-auth { flex-direction: column; align-items: stretch; gap: 14px; }
    .mv-nav-auth .mv-btn { width: 100%; }

    .mv-topbar { padding: 8px 20px; font-size: 11px; flex-wrap: wrap; gap: 6px; }
    .mv-topbar__side { gap: 10px; }

    .mv-nav-search { order: 3; max-width: 100%; margin: 0; flex: 0 0 auto; height: 42px; }
    body.mv-has-stuck-nav { padding-top: 64px; }

    .mv-hero-inner { padding: 76px 20px 28px; }
    .mv-h2 { font-size: 26px; }

    .mv-layout { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
    .mv-ticket-panel { position: static; top: auto; }
}

@media (max-width: 480px) {
    .mv-hero { min-height: 200px; }
    .mv-h2 { font-size: 22px; }
}

/* Events listing — events.blade.php
 * Source: Figma node 1243:2216 ("MogosEvent — Search Events", desktop) and
 * 1244:3342 ("MOB 02 — Events Listing", mobile), read 2026-09-01.
 */
.mv-hero-search {
    background: #fff;
    border: 1.5px solid var(--mv-navy-tint);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.mv-hero-search__field {
    flex: 1 1 180px;
    background: var(--mv-navy-tint);
    border: 1px solid #C5D8EE;
    border-radius: 10px;
    height: 48px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    color: var(--mv-text-dark);
}
.mv-hero-search__field::placeholder { color: var(--mv-text-soft); }
.mv-hero-search__select {
    flex: 1 1 160px;
    background: var(--mv-navy-tint);
    border: 1px solid #C5D8EE;
    border-radius: 10px;
    height: 48px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    color: var(--mv-text-soft);
}

.mv-filters-bar {
    background: #fff;
    border-bottom: 1px solid var(--mv-navy-tint);
    padding: 16px 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mv-filters-bar::-webkit-scrollbar { display: none; }
.mv-filters-count { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--mv-text-soft); font-weight: 600; white-space: nowrap; padding-left: 10px; }

.mv-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid #C5D8EE;
    background: #fff;
    color: var(--mv-text-soft);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.mv-chip--active { background: var(--mv-orange); border-color: var(--mv-orange); color: #fff; }

.mv-events-section { max-width: 1200px; margin: 0 auto; padding: 36px 40px; display: flex; flex-direction: column; gap: 24px; }

.mv-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.mv-event-card {
    background: var(--mv-white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(13, 56, 117, 0.08), 0 4px 16px rgba(13, 56, 117, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.mv-event-card__image {
    height: 140px;
    background-color: var(--mv-navy-primary);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 12px;
    display: flex;
    align-items: flex-start;
}
.mv-event-card__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mv-event-card__title { font-weight: 800; color: var(--mv-navy-primary); font-size: 15px; line-height: 1.3; overflow-wrap: break-word; }
.mv-event-card__meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mv-text-soft); }
.mv-event-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.mv-event-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--mv-navy-tint); margin-top: auto; }
.mv-event-card__organizer { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mv-event-card__avatar { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; background: var(--mv-navy-primary); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mv-event-card__organizer-name { font-size: 12px; color: var(--mv-text-soft); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-event-card__price { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--mv-orange); }

.mv-event-card--featured {
    grid-column: 1 / -1;
    flex-direction: row;
}
.mv-event-card--featured .mv-event-card__image { height: auto; width: 280px; flex-shrink: 0; align-items: flex-end; }
.mv-event-card--featured .mv-event-card__body { flex-direction: row; align-items: center; gap: 24px; }
.mv-event-card--featured .mv-event-card__title { font-size: 18px; }
.mv-event-card--featured .mv-event-card__main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mv-event-card--featured .mv-event-card__footer { border: none; padding: 0; margin: 0; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }

.mv-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; }
.mv-pagination a, .mv-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #C5D8EE; color: var(--mv-navy-primary); text-decoration: none; font-weight: 700; font-size: 13px; }
.mv-pagination a:hover { background: var(--mv-navy-tint); }
.mv-pagination .mv-pagination__current { background: var(--mv-navy-primary); border-color: var(--mv-navy-primary); color: #fff; }
.mv-pagination .mv-pagination__disabled { opacity: 0.4; }

.mv-footer-cta {
    background: var(--mv-navy-dark);
    padding: 48px 40px;
}
.mv-footer-cta__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: #fff; }
.mv-footer-cta__title { font-size: 28px; font-weight: 800; margin: 0 0 8px; }
.mv-footer-cta__subtitle { font-size: 14px; opacity: 0.7; margin: 0; max-width: 480px; }

@media (max-width: 900px) {
    .mv-hero-search { display: none; }
    .mv-filters-bar { padding: 14px 20px; }
    .mv-events-section { padding: 24px 20px; }
    .mv-event-grid { grid-template-columns: 1fr; }
    .mv-event-card--featured { flex-direction: column; }
    .mv-event-card--featured .mv-event-card__image { width: 100%; height: 140px; }
    .mv-event-card--featured .mv-event-card__body { flex-direction: column; align-items: stretch; }
    .mv-event-card--featured .mv-event-card__footer { flex-direction: row; align-items: center; border-top: 1px solid var(--mv-navy-tint); padding-top: 10px; }
    .mv-footer-cta { padding: 36px 20px; text-align: center; }
    .mv-footer-cta__inner { justify-content: center; text-align: center; }
}

/* Home — home.blade.php (hero + stats bar only so far; see build-status comment
 * at the top of home.blade.php for what's still pending).
 * Source: Figma node 1243:1662 (hero, desktop) and 1243:1581 (stats bar, desktop),
 * read 2026-09-03. Mobile frame not yet pulled.
 */
.mv-hh {
    position: relative;
    min-height: 620px;
    background-color: var(--mv-navy-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.mv-hh-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(18,17,21,0) 0%, rgba(18,17,21,0.8) 60%, #121115 100%),
        linear-gradient(90deg, rgba(10,9,12,0.72) 0%, rgba(10,9,12,0.45) 45%, rgba(10,9,12,0) 75%);
}
.mv-hh-blob { position: absolute; border-radius: 999px; pointer-events: none; }
.mv-hh-blob--a { width: 400px; height: 400px; left: -125px; bottom: -77px; background: rgba(13,56,117,0.05); }
.mv-hh-blob--b { width: 500px; height: 500px; right: -83px; top: -133px; background: rgba(241,95,34,0.06); }
.mv-hh-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 40px; display: flex; align-items: center; gap: 48px; width: 100%; }
.mv-hh-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

.mv-hh-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mv-navy-tint);
    border: 1px solid rgba(13,56,117,0.15);
    color: var(--mv-azure);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: 999px;
}
.mv-hh-tag-icon { width: 12px; height: 12px; display: block; }
h1.mv-hh-title { color: #fff; }
.mv-hh-title-accent { color: var(--mv-orange); }
.mv-hh-subtitle { max-width: 480px; color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.65; }

.mv-hh-search {
    margin-top: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid #C5D8EE;
    border-radius: 20px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    height: 68px;
    width: 100%;
    max-width: 820px;
}
.mv-hh-search__field { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; height: 50px; padding: 0 15px; border-right: 1px solid #C5D8EE; }
.mv-hh-search__field--grow { flex-grow: 1.6; }
.mv-hh-search__field:last-of-type { border-right: none; }
.mv-hh-search__field img { width: 17px; height: 17px; flex-shrink: 0; }
.mv-hh-search__field-icon { font-size: 15px; color: var(--mv-orange); flex-shrink: 0; }
.mv-hh-search__select {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: none;
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 13.8px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.mv-hh-search__select option { color: var(--mv-text-dark); }
.mv-hh-search__input {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: none;
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 13.8px;
    text-overflow: ellipsis;
}
.mv-hh-search__input::placeholder { color: rgba(255,255,255,0.75); }
.mv-hh-search .mv-btn { flex-shrink: 0; margin: 9px; padding: 15px 30px; }
.mv-hh-search .mv-btn img { width: 15px; height: 15px; }

.mv-hh-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.mv-hh-trust-item { color: rgba(255,255,255,0.75); font-weight: 600; font-size: 13px; }

.mv-hh-visual { position: relative; width: 480px; height: 400px; flex-shrink: 0; }
.mv-hh-float {
    position: absolute;
    width: 210px;
    background: rgba(18,17,21,0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(13,56,117,0.22);
}
.mv-hh-float--mid { width: 190px; }
.mv-hh-float__top { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; background: rgba(241,95,34,0.12); }
.mv-hh-float__top--tint { background: rgba(255,255,255,0.06); }
.mv-hh-float__body { padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.mv-hh-float__tag { align-self: flex-start; background: rgba(241,95,34,0.18); color: var(--mv-orange-light); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
.mv-hh-float__tag--light { background: rgba(255,255,255,0.1); color: #fff; }
.mv-hh-float__name { color: #fff; font-weight: 800; font-size: 14px; line-height: 1.3; }
.mv-hh-float__meta { color: rgba(255,255,255,0.6); font-size: 11px; display: flex; align-items: center; gap: 5px; }
.mv-hh-float__price { color: var(--mv-orange-light); font-weight: 700; font-size: 13px; margin-top: 2px; }

.mv-stats { background: var(--mv-navy-primary); padding: 36px 40px; }
.mv-stats-grid { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; }
.mv-stat { flex: 1 1 180px; text-align: center; padding: 0 20px; border-right: 1px solid rgba(255,255,255,0.12); }
.mv-stat--last { border-right: none; }
.mv-stat-num { font-family: 'Courier New', monospace; font-weight: 700; font-size: 30px; color: #fff; }
.mv-stat-num__accent { color: var(--mv-orange-light); }
.mv-stat-lbl { margin-top: 6px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

@media (max-width: 900px) {
    .mv-hh-inner { flex-direction: column; align-items: flex-start; padding: 32px 20px; }
    .mv-hh-title { font-size: 34px; }
    .mv-hh-subtitle { max-width: 100%; }
    .mv-hh-search { flex-direction: column; height: auto; padding: 10px; gap: 8px; }
    .mv-hh-search__field { width: 100%; border-right: none; border-bottom: 1px solid #C5D8EE; padding: 10px 4px; }
    .mv-hh-search .mv-btn { width: 100%; margin: 0; }
    .mv-stats { padding: 24px 20px; }
    .mv-stat { flex: 1 1 45%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 12px 0; }
    .mv-stat--last { border-bottom: none; }
}

/* Events showcase + marquee strip — home.blade.php.
 * Source: user-provided SCREENSHOTS (desktop + "mogosevent-mobile-2026" mobile),
 * read 2026-09-05 — the Figma MCP rate limit blocked a real get_design_context pull
 * for this section (node 1243:1774 / "section.ev-sec" and 1243:1608 / "div.mq-strip"
 * per the file's earlier metadata scan). Colors/spacing are a faithful visual read,
 * not pulled exact values — re-verify against Figma once API access returns.
 * Desktop uses a distinct "ticket stub" card treatment; mobile reuses the existing
 * .mv-event-card component from events.blade.php almost verbatim (same visual
 * language, confirmed by the mobile screenshot), so no new mobile-specific classes
 * were needed there.
 */
.mv-eyebrow { display: block; color: var(--mv-orange); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.mv-btn--pill { border-radius: 999px; padding: 12px 22px; font-size: 14px; }

.mv-ev-sec { max-width: 1200px; margin: 0 auto; padding: 56px 40px; scroll-margin-top: var(--mv-nav-height, 73px); }
.mv-ev-sec__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mv-ev-sec__chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 28px; }

.mv-feat-card { display: flex; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); margin-bottom: 20px; }
.mv-feat-card__image { flex: 0 0 320px; position: relative; background-size: cover; background-position: center; background-color: var(--mv-navy-primary); min-height: 230px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.mv-feat-card__image-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,34,64,0.85), rgba(10,34,64,0.25)); }
.mv-feat-card__image > * { position: relative; }
.mv-feat-card__body { flex: 1; min-width: 0; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.mv-feat-card__stub { flex: 0 0 84px; background: var(--mv-navy-primary); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 0; gap: 12px; }
.mv-feat-card__stub-price { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; }
.mv-feat-card__stub-btn { background: var(--mv-orange); color: #fff; border-radius: 8px; padding: 8px 6px; font-size: 11px; font-weight: 700; text-decoration: none; writing-mode: horizontal-tb; }

.mv-ev-sec__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mv-stub-card { display: flex; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); text-decoration: none; color: inherit; }
.mv-stub-card__body { flex: 1; min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.mv-stub-card__stub { flex: 0 0 58px; background: var(--mv-navy-tint); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; gap: 10px; }
.mv-stub-card__stub-price { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--mv-navy-primary); font-weight: 800; font-size: 12px; white-space: nowrap; }
.mv-stub-card__stub-btn { background: var(--mv-orange); color: #fff; border-radius: 7px; padding: 6px 5px; font-size: 10px; font-weight: 700; text-decoration: none; writing-mode: horizontal-tb; }

.mv-mq-strip { background: var(--mv-orange); overflow: hidden; padding: 14px 0; }
.mv-mq-track { display: flex; width: max-content; animation: mv-marquee 28s linear infinite; }
.mv-mq-group { display: flex; align-items: center; flex-shrink: 0; }
.mv-mq-item { color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; padding: 0 24px; }
.mv-mq-item::after { content: '•'; margin-left: 24px; opacity: 0.7; }
@keyframes mv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mv-ev-sec__browse-mobile { display: none; }

@media (max-width: 900px) {
    .mv-ev-sec { padding: 40px 20px; }
    .mv-ev-sec__header { flex-direction: column; align-items: flex-start; }
    .mv-ev-sec__browse-desktop { display: none; }
    .mv-ev-sec__browse-mobile { display: inline-flex; margin-top: 20px; }
    .mv-ev-sec__grid { grid-template-columns: 1fr; }
}

/* One unified featured-card + grid layout at every width (replaced an earlier
 * mv-desktop-only/mv-mobile-only split that rendered two different card
 * components for the same events — a real bug where both blocks could show
 * at once on some viewports/zoom levels, duplicating every event). Below
 * 700px the featured card's image/body/price stub stack vertically instead
 * of the 3-column row layout, same single mv-feat-card markup throughout. */
@media (max-width: 700px) {
    .mv-feat-card { flex-direction: column; }
    .mv-feat-card__image { flex: none; width: 100%; min-height: 180px; }
    .mv-feat-card__stub { flex-direction: row; justify-content: space-between; width: 100%; padding: 14px 20px; }
    .mv-feat-card__stub-price { writing-mode: horizontal-tb; transform: none; }
}

/* Marketplace promo + How it works — home.blade.php.
 * Source: user-provided SCREENSHOTS (desktop + mobile), read 2026-09-05 — Figma nodes
 * 1243:1899 ("section.mkt-sec") and 1243:1915 ("section.how-sec") not yet API-verified,
 * re-check exact colors/spacing once Figma access returns. Both sections are static
 * marketing content: the vendor cards' prices/verified-counts are marketplace-system
 * data Mogosevent Web has no confirmed DB access to (unlike Events Showcase, which
 * legitimately queries this app's own Event model) — not wired to a live query. Vendor
 * card icons use Line Awesome as a best-effort substitute; the screenshot source means
 * there's no real exported icon asset available to use instead (unlike the hero's
 * search-bar icons, which came from an actual get_design_context pull).
 */
.mv-mkt-sec { max-width: 1200px; margin: 0 auto; padding: 56px 40px; }
.mv-mkt-sec__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.mv-mkt-sec__desc { max-width: 380px; color: var(--mv-text-soft); font-size: 14px; line-height: 1.65; }
.mv-mkt-sec__cta { margin-top: 16px; text-align: right; }

.mv-vendor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.mv-vendor-card { background: #fff; border: 1px solid var(--mv-navy-tint); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.mv-vendor-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mv-vendor-card__name { font-weight: 800; color: var(--mv-navy-primary); font-size: 15px; }
.mv-vendor-card__price { font-size: 12px; color: var(--mv-text-soft); }
.mv-vendor-card__verified { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: var(--mv-navy-tint); color: var(--mv-navy-primary); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-top: 4px; }

.mv-how-sec { background: var(--mv-navy-tint); }
.mv-how-sec__inner { max-width: 1200px; margin: 0 auto; padding: 56px 40px; }
.mv-how-grid { display: flex; align-items: flex-start; gap: 20px; margin-top: 32px; }
.mv-how-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mv-how-step__num { color: var(--mv-orange); font-weight: 800; font-size: 30px; font-family: 'Courier New', monospace; }
.mv-how-step__title { color: var(--mv-navy-primary); font-weight: 800; font-size: 16px; }
.mv-how-step__desc { color: var(--mv-text-soft); font-size: 13px; line-height: 1.6; }
.mv-how-arrow { flex-shrink: 0; color: var(--mv-orange); font-size: 20px; padding-top: 6px; }

@media (max-width: 900px) {
    .mv-mkt-sec { padding: 40px 20px; }
    .mv-mkt-sec__header { flex-direction: column; align-items: flex-start; }
    .mv-mkt-sec__desc { max-width: 100%; }
    .mv-mkt-sec__cta { width: 100%; text-align: left; }
    .mv-vendor-grid { grid-template-columns: repeat(2, 1fr); }

    .mv-how-sec__inner { padding: 40px 20px; }
    .mv-how-grid { flex-direction: column; gap: 24px; }
    .mv-how-arrow { display: none; }
}

/* Pricing — home.blade.php.
 * Source: user-provided SCREENSHOTS (desktop + mobile), read 2026-09-05 — Figma node
 * 1243:1955 ("section#pricing") not yet API-verified (Figma MCP rate limit still active
 * at time of writing). Two things NOT confirmed from the screenshots and deliberately
 * not guessed: (1) whether the "₦350 max fee / 24hrs approval" stat pair (visible on
 * mobile, below the main card) also appears on desktop — the desktop screenshot may
 * simply be cropped before it; built here as mobile-only until confirmed either way.
 * (2) the desktop checklist shows 4 items, mobile shows only 2 — could be a deliberate
 * mobile simplification or just scroll cropping in the screenshot; kept all 4 on both
 * breakpoints rather than guess which 2 mobile would drop. The QR-style icon in the
 * orange stub has no real exported asset available (screenshot source) — Line Awesome
 * used as a best-effort substitute.
 */
.mv-price-sec { max-width: 700px; margin: 0 auto; padding: 56px 40px; text-align: center; scroll-margin-top: var(--mv-nav-height, 73px); }
.mv-price-sec__sub { color: var(--mv-text-soft); font-size: 14px; margin-top: 10px; }

.mv-price-card { max-width: 620px; margin: 40px auto 0; display: flex; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 48px rgba(13,56,117,0.18); text-align: left; }
.mv-price-card__main { flex: 1; min-width: 0; background: var(--mv-navy-primary); padding: 28px 32px; position: relative; overflow: hidden; }
.mv-price-card__watermark { position: absolute; right: -10px; bottom: -10px; font-size: 90px; font-weight: 800; color: rgba(255,255,255,0.05); white-space: nowrap; line-height: 1; pointer-events: none; }
.mv-price-card__row { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mv-price-card__row-left { color: rgba(255,255,255,0.45); }
.mv-price-card__row-right { color: var(--mv-orange-light); }
.mv-price-card__price { position: relative; display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.mv-price-card__price-pct { color: #fff; font-weight: 800; font-size: 46px; }
.mv-price-card__price-plus { color: rgba(255,255,255,0.5); font-weight: 700; font-size: 22px; }
.mv-price-card__price-flat { color: var(--mv-orange-light); font-weight: 800; font-size: 46px; }
.mv-price-card__price-caption { position: relative; color: rgba(255,255,255,0.45); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 6px; }
.mv-price-card__checklist { position: relative; list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mv-price-card__checklist li { display: flex; align-items: flex-start; gap: 8px; color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.4; }
.mv-price-card__checklist i { color: var(--mv-orange-light); margin-top: 2px; flex-shrink: 0; }
.mv-price-card__breakdown { position: relative; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 16px; margin-top: 20px; }
.mv-price-card__breakdown-row { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,0.7); padding: 4px 0; }
.mv-price-card__breakdown-row--total { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 6px; padding-top: 10px; color: var(--mv-orange-light); font-weight: 800; }

.mv-price-card__stub {
    flex: 0 0 90px;
    background: var(--mv-orange);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
}
.mv-price-card__stub::before, .mv-price-card__stub::after {
    content: '';
    position: absolute;
    left: -12px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--mv-background);
}
.mv-price-card__stub::before { top: -12px; }
.mv-price-card__stub::after { bottom: -12px; }
.mv-price-card__stub-text { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.05em; }
.mv-price-card__stub-icon { width: 42px; height: 42px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--mv-navy-primary); font-size: 20px; }

@media (max-width: 900px) {
    .mv-price-sec { padding: 40px 20px; }
}

@media (max-width: 480px) {
    .mv-price-card { margin-top: 28px; }
    .mv-price-card__main { padding: 22px 20px; }
    .mv-price-card__watermark { font-size: 56px; right: -6px; bottom: -4px; }
    .mv-price-card__price-pct, .mv-price-card__price-flat { font-size: 34px; }
    .mv-price-card__price-plus { font-size: 18px; }
    .mv-price-card__checklist li { font-size: 12.5px; }
}

/* Testimonials + CTA band — home.blade.php.
 * Source: user-provided SCREENSHOTS (desktop + mobile), read 2026-09-05 — Figma nodes
 * 1243:2020 ("section.testi-sec") and 1243:2071 ("section.cta-band") not yet
 * API-verified. Both static marketing content, no data needed.
 * CORRECTION: the "₦350 max fee / 24hrs approval" stat pair was first built as
 * mobile-only under the Pricing section (see that section's comment above) based on
 * an earlier mobile screenshot where it appeared directly below the price card. THIS
 * screenshot shows the same stat pair visually built into the CTA band box instead
 * (desktop only — the CTA band's own mobile screenshot shows none), which is much
 * stronger evidence of true placement. Moved here accordingly; not duplicated.
 * Testimonial #2's quote reads "...zero running around." on desktop vs "...zero
 * stress." on mobile — genuine wording mismatch between the two screenshots, not a
 * typo introduced here; went with the desktop wording as the single copy used at
 * both breakpoints (same card markup reflows via grid, doesn't fork content).
 */
.mv-testi-sec { max-width: 1200px; margin: 0 auto; padding: 56px 40px; }
.mv-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.mv-testi-card { background: #fff; border: 1px solid var(--mv-navy-tint); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.mv-testi-card__stars { color: var(--mv-orange); font-size: 13px; letter-spacing: 2px; }
.mv-testi-card__quote { color: var(--mv-text-dark); font-size: 13.5px; line-height: 1.6; flex: 1; }
.mv-testi-card__person { display: flex; align-items: center; gap: 10px; }
.mv-testi-card__avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--mv-navy-primary); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mv-testi-card__avatar--alt { background: var(--mv-orange); }
.mv-testi-card__name { font-weight: 800; color: var(--mv-navy-primary); font-size: 13px; }
.mv-testi-card__role { color: var(--mv-text-soft); font-size: 11px; }

.mv-cta-band { background: var(--mv-navy-dark); padding: 56px 40px; }
.mv-cta-band__inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.mv-cta-band__content { flex: 1; min-width: 260px; }
.mv-cta-band__title { color: #fff; font-size: 28px; font-weight: 800; margin: 0 0 10px; }
.mv-cta-band__desc { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; max-width: 420px; margin-bottom: 20px; }
.mv-cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mv-btn--outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.mv-cta-band__stats { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.mv-cta-band__stat { background: rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 18px; min-width: 200px; }
.mv-cta-band__stat-num { color: var(--mv-orange-light); font-weight: 800; font-size: 18px; }
.mv-cta-band__stat-lbl { color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 2px; }

@media (max-width: 900px) {
    .mv-testi-sec { padding: 40px 20px; }
    .mv-testi-grid { grid-template-columns: 1fr; }
    .mv-cta-band { padding: 40px 20px; }
    .mv-cta-band__actions .mv-btn { width: 100%; }
}

/* FAQ — home.blade.php.
 * Source: user-provided SCREENSHOTS (desktop + mobile), read 2026-09-05 — Figma node
 * 1243:2092 ("section.faq-sec") not yet API-verified. Native <details>/<summary> for
 * a working accordion with zero JS. Answer copy for 4 of 5 questions is grounded in
 * content already confirmed elsewhere on this page (Pricing, Hero trust row, How It
 * Works, Marketplace promo) — the screenshot showed only collapsed questions, no
 * answers, so nothing here is invented from scratch. "How do I become a verified
 * vendor?" has no confirmed process described anywhere in this build, so it points to
 * the vendor sign-up path instead of fabricating steps.
 */
.mv-faq-sec { max-width: 700px; margin: 0 auto; padding: 56px 40px; text-align: center; }
.mv-faq-list { text-align: left; margin-top: 24px; }
.mv-faq-item { border-bottom: 1px solid var(--mv-navy-tint); }
.mv-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font-weight: 700; color: var(--mv-navy-primary); font-size: 14px; }
.mv-faq-item summary::-webkit-details-marker { display: none; }
.mv-faq-item__icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--mv-orange); color: var(--mv-orange); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: transform 0.2s ease; }
.mv-faq-item[open] .mv-faq-item__icon { transform: rotate(45deg); }
.mv-faq-item__answer { padding: 0 4px 18px; color: var(--mv-text-soft); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 900px) {
    .mv-faq-sec { padding: 40px 20px; }
}

/* Global footer — partials/footer.blade.php, included on every revamp page (Home,
 * Events Listing, Event Details), not just Home — see build-status note there.
 * Source: user-provided SCREENSHOTS (desktop + mobile), read 2026-09-05, not
 * API-verified. Real routes wired wherever they genuinely exist in this app (Browse
 * Events, Create Account/Dashboard under Organizers, Help Center, Blog, Contact,
 * Pricing as an in-page anchor to Home's #pricing) — "#" only for pages that don't
 * exist yet (Marketplace, Vendors, Success Stories, About, Careers). The mobile
 * screenshot genuinely drops the "Company" column and shows fewer items per column
 * than desktop (confirmed by a complete, non-cropped mobile capture ending cleanly at
 * the copyright line) — built as two distinct desktop/mobile blocks matching each
 * exactly, not a guessed hybrid. Third social icon's actual platform could not be
 * confirmed from the screenshot glyph — used a generic globe icon rather than guess a
 * specific brand.
 */
.mv-footer { background: var(--mv-navy-dark); padding: 48px 40px 24px; }
.mv-footer__top { max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mv-footer__brand { flex: 1 1 260px; min-width: 220px; }
.mv-footer__logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 17px; text-decoration: none; margin-bottom: 14px; }
.mv-footer__logo img { height: 30px; width: auto; }
.mv-footer__desc { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.6; max-width: 320px; }
.mv-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.mv-footer__social a { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; }
.mv-footer__cols { max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; flex-wrap: wrap; padding-top: 32px; }
.mv-footer__col { flex: 1 1 130px; min-width: 130px; }
.mv-footer__col-title { color: rgba(255,255,255,0.4); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.mv-footer__col a { display: block; color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: none; margin-bottom: 10px; }
.mv-footer__newsletter { flex: 1 1 220px; min-width: 220px; }
.mv-footer__newsletter-form { display: flex; margin-top: 12px; }
.mv-footer__newsletter-input { flex: 1; min-width: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px 0 0 8px; padding: 0 12px; height: 40px; color: #fff; font-size: 13px; }
.mv-footer__newsletter-input::placeholder { color: rgba(255,255,255,0.4); }
.mv-footer__newsletter-btn { flex-shrink: 0; background: var(--mv-orange); color: #fff; border: none; border-radius: 0 8px 8px 0; padding: 0 18px; font-weight: 700; font-size: 13px; cursor: pointer; }
.mv-footer__mobile-cols { display: flex; gap: 24px; padding-top: 28px; }
.mv-footer__bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 24px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.mv-footer__copy { color: rgba(255,255,255,0.4); font-size: 12px; }
.mv-footer__legal { display: flex; gap: 16px; }
.mv-footer__legal a { color: rgba(255,255,255,0.4); font-size: 12px; text-decoration: none; }

@media (max-width: 900px) {
    .mv-footer { padding: 40px 20px 20px; }
    .mv-footer__top { flex-direction: column; gap: 24px; padding-bottom: 24px; }
    .mv-footer__cols { padding-top: 0; }
}

/* Role Selection — role_selection.blade.php.
 * Source: Figma node 1243:2682 ("04 / Role Selection"), pulled as METADATA ONLY
 * (get_design_context returned the full page as one oversized dump that fell back to
 * positions/text/names, not styled JSX — no colors/fonts came through) on 2026-09-07.
 * TEXT and LAYOUT (panel widths, card order top-to-bottom, copy) are real, confirmed
 * values — not guessed. COLORS use this project's already-established design tokens
 * since none were available for this specific page. One thing carried over exactly as
 * authored rather than "corrected": the source file pairs "Vendor" with the same
 * description text as "Event Attendee" ("Buy tickets, shop marketplace, send
 * payments") — flagged to the user as a likely Figma authoring mistake rather than
 * silently rewritten from memory of an earlier, unrelated mobile thumbnail.
 * Vendor's "Continue" destination is a placeholder (#) — no vendor registration route
 * exists yet in this app; likely lives on the separate marketplace app or the
 * not-yet-built "07 / Vendor Application" page.
 */
.mv-role-page { display: flex; min-height: 100vh; }
.mv-role-left { flex: 0 0 41.6%; position: relative; overflow: hidden; background: var(--mv-navy-dark); padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.mv-role-left .mv-role-left__title { position: relative; color: #fff; font-size: 32px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; }
.mv-role-left__sub { position: relative; color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.6; margin-bottom: 32px; max-width: 420px; }
.mv-role-left__check { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mv-role-left__check-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(241,95,34,0.2); color: var(--mv-orange-light); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.mv-role-left__check-text { font-size: 14px; color: rgba(255,255,255,0.9); }

.mv-role-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 32px 80px 50px; max-width: 720px; margin: 0 auto; width: 100%; overflow-y: auto; }
.mv-role-progress { display: flex; gap: 10px; margin-bottom: 30px; }
.mv-role-progress__seg { flex: 1; height: 4px; border-radius: 2px; background: var(--mv-navy-tint); display: block; }
.mv-role-progress__seg--active { background: var(--mv-orange); }
a.mv-role-progress__seg { cursor: pointer; transition: opacity 0.15s ease; }
a.mv-role-progress__seg:hover { opacity: 0.75; }
.mv-role-right__sub { color: var(--mv-text-soft); font-size: 14px; margin-top: 6px; margin-bottom: 28px; }
.mv-role-back { display: inline-flex; align-items: center; gap: 6px; color: var(--mv-text-soft); font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 14px; }
.mv-role-back:hover { color: var(--mv-navy-primary); }

.mv-role-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border: 1px solid #D6E2F5; border-radius: 10px; background: #fff; font-weight: 700; font-size: 14px; color: var(--mv-text-dark); cursor: pointer; text-decoration: none; margin-bottom: 24px; }
.mv-role-divider { display: flex; align-items: center; gap: 16px; color: var(--mv-text-soft); font-size: 13px; margin-bottom: 24px; }
.mv-role-divider::before, .mv-role-divider::after { content: ''; flex: 1; height: 1px; background: var(--mv-navy-tint); }

.mv-role-options { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.mv-role-option { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Glass card treatment: translucent white over a blurred backdrop, soft
 * border, and a layered shadow — matches the "Glass" + "Drop shadow" effect
 * stack shown in the source Figma layer panel, implemented in plain CSS
 * (backdrop-filter + rgba + box-shadow) since Figma's own "Glass" effect
 * isn't a portable primitive. Falls back to a plain translucent panel with
 * no blur on browsers without backdrop-filter support (graceful, not broken —
 * still readable, just without the frosted look). */
.mv-role-option-label {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 16px;
    cursor: pointer;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 1px 2px rgba(10,34,64,0.06), 0 8px 24px rgba(10,34,64,0.08);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mv-role-option-label:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(10,34,64,0.08), 0 12px 32px rgba(10,34,64,0.1); }
.mv-role-option:checked + .mv-role-option-label { border-color: var(--mv-orange); background: rgba(255,245,238,0.75); box-shadow: 0 2px 4px rgba(241,95,34,0.12), 0 8px 24px rgba(241,95,34,0.14); }
.mv-role-option-label--disabled { cursor: not-allowed; opacity: 0.55; }
.mv-role-option-label--disabled:hover { transform: none; box-shadow: 0 1px 2px rgba(10,34,64,0.06), 0 8px 24px rgba(10,34,64,0.08); }
.mv-role-option-label__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(241,95,34,0.12);
    color: var(--mv-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.mv-role-option-label__body { flex: 1; min-width: 0; }
.mv-role-option-label__title { font-weight: 800; color: var(--mv-navy-primary); font-size: 15px; }
.mv-role-option-label__desc { color: var(--mv-text-soft); font-size: 12.5px; margin-top: 2px; }
/* Square checkbox-style indicator, top-right of the card (not the previous
 * left-side circular radio) — matches the reference screenshot's layout. */
.mv-role-option-label__radio {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid rgba(197,216,238,0.9);
    background: rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.mv-role-option:checked + .mv-role-option-label .mv-role-option-label__radio { border-color: var(--mv-orange); background: var(--mv-orange); }
.mv-role-option:checked + .mv-role-option-label .mv-role-option-label__radio::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.mv-role-option-label:focus-within { outline: 2px solid var(--mv-orange); outline-offset: 2px; }

.mv-role-signin { text-align: center; color: var(--mv-text-soft); font-size: 13px; margin-top: 16px; }
.mv-role-signin a { color: var(--mv-orange); font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
    .mv-role-page { flex-direction: column; }
    .mv-role-left { flex: none; padding: 40px 24px; }
    .mv-role-right { padding: 40px 24px; max-width: 100%; }
}

/* User/Organizer Registration — user_register.blade.php, organizer_register.blade.php.
 * Layout/left-panel copy source: Figma nodes 1243:2748 ("05 / User Registration") and
 * 1243:2805 ("06 / Organizer Registration"), pulled as METADATA ONLY (same oversized-
 * response fallback as Role Selection) on 2026-09-07 — text/layout real, colors from
 * established tokens. Reuses .mv-role-* classes from Role Selection (same visual
 * system, confirmed by the shared left/right panel + progress bar structure).
 *
 * FORM FIELDS DELIBERATELY DO NOT MATCH FIGMA — per explicit product decision, after
 * checking the real controllers (App\Http\Controllers\User\Auth\RegisterController,
 * Organizer\Auth\RegisterController): Figma's mockups show Organization Name/Type and
 * Phone fields on the organizer form that the real backend never validates or stores
 * anywhere (checked Organizer\ProfileController's later profile-completion step too —
 * not there either). Built to match the REAL required fields instead, so these forms
 * actually submit successfully: firstname, lastname, email, password (+confirm),
 * captcha (real <x-captcha /> component), agree-to-terms — plus country/mobile_code/
 * mobile for the User form specifically, which the real controller does require.
 */
.mv-role-label { display: block; font-size: 13px; font-weight: 600; color: var(--mv-text-dark); margin-bottom: 6px; }
.mv-role-input, .mv-role-select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #D6E2F5;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    color: var(--mv-text-dark);
    background: #fff;
}
.mv-role-input:focus, .mv-role-select:focus { outline: none; border-color: var(--mv-orange); }
.mv-role-field { margin-bottom: 18px; }
.mv-role-row { display: flex; gap: 16px; }
.mv-role-row .mv-role-field { flex: 1; min-width: 0; }
.mv-role-password-wrap { position: relative; }
.mv-role-password-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--mv-text-soft); cursor: pointer; padding: 0; }
.mv-role-agree { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 13px; color: var(--mv-text-soft); }
.mv-role-agree a { color: var(--mv-orange); font-weight: 600; text-decoration: none; }
.mv-role-mobile-group { display: flex; gap: 10px; }
.mv-role-mobile-group .mv-role-select { flex: 0 0 100px; }
.mv-role-mobile-group .mv-role-input { flex: 1; }

/* Light bridge so the real, shared <x-captcha /> component's custom-captcha markup
 * (its own .form-group/.form-control/.form--label classes, from the live theme) doesn't
 * render completely unstyled inside this revamp page. */
.mv-role-right .form-group { margin-bottom: 18px; }
.mv-role-right .form-control { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #D6E2F5; border-radius: 10px; font-size: 14px; }
.mv-role-right .form--label, .mv-role-right .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--mv-text-dark); margin-bottom: 6px; }

/* Login — login.blade.php.
 * Source: Figma node 1243:2934 ("08 / Login"), pulled as METADATA ONLY (same
 * oversized-response fallback) on 2026-09-07 — text/layout real, colors from
 * established tokens. Unlike the two-panel Registration/Role-Selection pages, this
 * frame uses the FULL site nav bar (matches the real .mv-nav already built for Home/
 * Events/Event-Details, reused verbatim) plus a single centered card — confirmed from
 * the metadata's "Navigation" frame spanning the full 1440px width at y=0.
 * One raw-data oddity NOT taken literally: "Forgot password?" sits at the same y as
 * the "Email address" label rather than beside "Password" — almost certainly a Figma
 * positioning slip (this is a near-universal UI convention), so it's placed beside
 * the Password label here instead, matching real-world convention over the raw
 * coordinate.
 * Real fields only (checked User\Auth\LoginController): username (accepts email or
 * username, matches real behavior), password, remember (optional), real captcha
 * component (verifyCaptcha() is checked unconditionally on login, unlike
 * registration's conditional agree checkbox).
 */
.mv-login-wrap { min-height: calc(100vh - 73px); display: flex; align-items: center; justify-content: center; padding: 60px 20px; position: relative; overflow: hidden; }
.mv-login-card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 20px; box-shadow: 0 12px 48px rgba(13,56,117,0.12); padding: 44px 40px; }
.mv-login-card__logo { display: flex; justify-content: center; margin-bottom: 20px; }
.mv-login-card__title { text-align: center; font-size: 26px; }
.mv-login-card__subtitle { text-align: center; color: var(--mv-text-soft); font-size: 14px; margin-top: 6px; margin-bottom: 24px; }
.mv-login-field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mv-login-forgot { font-size: 12.5px; color: var(--mv-orange); font-weight: 600; text-decoration: none; }
.mv-login-remember-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; font-size: 13px; color: var(--mv-text-soft); }

/* The real <x-captcha/> component renders the live "basic" theme's own
 * form-control/form--control classes, which this revamp's CSS never styles
 * (it has its own .mv-role-input system) — falls back to tiny browser defaults
 * without this override. */
.mv-role-right .form--control, .mv-role-right .form-control,
.mv-login-card .form--control, .mv-login-card .form-control {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #C5D8EE;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    color: var(--mv-text-dark);
    background: #fff;
}
.mv-role-right .form-label, .mv-role-right .form--label,
.mv-login-card .form-label, .mv-login-card .form--label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mv-text-dark);
    margin: 10px 0 6px;
}

/* Decorative blobs reused from the hero on the auth pages' light background need more
 * presence than their original dark-hero opacity (5-6% fill, further halved by an
 * inline opacity:0.5) — that combination was nearly invisible here per feedback. */
.mv-role-page .mv-hh-blob, .mv-login-wrap .mv-hh-blob { opacity: 1; }
.mv-role-page .mv-hh-blob--a, .mv-login-wrap .mv-hh-blob--a { background: rgba(13,56,117,0.14); }
.mv-role-page .mv-hh-blob--b, .mv-login-wrap .mv-hh-blob--b { background: rgba(241,95,34,0.16); }

@media (max-width: 900px) {
    .mv-login-card { padding: 32px 24px; }
}

/* Vendor Application — vendor_apply.blade.php.
 * Source: Figma node 1243:2869 ("07 / Vendor Application"), pulled as METADATA ONLY
 * on 2026-09-07 (same oversized-response fallback) — text/layout real, colors from
 * established tokens. Same .mv-role-left/.mv-role-right split as Registration/Role
 * Selection (confirmed: 600/1440 = 41.6%, matches .mv-role-left's existing width
 * exactly), reused verbatim.
 *
 * NOT A REAL LOCAL FORM, ON PURPOSE: checked mogosmarketplace's routes — real vendor
 * registration exists (routes/web.php:48 "/register/vendor", routes/api.php vendor
 * register endpoints) but lives entirely on the separate marketplace app, reachable
 * only via its own authenticated JSON API or web page, not a plain form POST from
 * this app. This also matches the earlier product decision on Role Selection: vendor
 * status is an upgrade from an existing account, not its own signup flow. So the
 * fields below are a disabled visual preview only (not a fake submission target),
 * and the real, working action is the CTA linking to this app's own
 * marketplace.redirect route — already built to SSO an authenticated user/organizer
 * into the real marketplace app, or send them to log in first if not.
 * Progress bar: the metadata gave no color/active-state info for this page's 4
 * segments (unlike Role Selection's, where "active" was inferable from context) —
 * rendered fully neutral rather than guessing which step should read as current.
 */
.mv-vendor-note { background: var(--mv-navy-tint); border-radius: 12px; padding: 14px 18px; margin: 4px 0 24px; color: var(--mv-text-dark); font-size: 13px; line-height: 1.6; }
.mv-vendor-note strong { color: var(--mv-navy-primary); }

/* Vendors Directory — vendors_directory.blade.php.
 * Source: Figma node 1276:798 ("vendors-directory"), pulled as METADATA ONLY (same
 * oversized fallback) on 2026-09-08 — text/layout real, colors from established
 * tokens. Figma's nav here adds a utility bar (country/currency + Help/Login links)
 * and an inline nav search field, not used anywhere else in this revamp — reused the
 * existing .mv-nav verbatim instead of introducing a one-off variant, for site-wide
 * consistency; flagged rather than silently matched pixel-for-pixel.
 * Vendor cards/prices/ratings are static sample content, same reasoning as the Home
 * page's Marketplace promo section: real vendor data lives entirely in the separate
 * marketplace app, which this app has no confirmed DB access to. The location/price
 * search fields are non-interactive display text, matching the same pattern already
 * established on the Home hero and Events Listing hero.
 * Category chips, pagination, and the CTA band all reuse existing .mv-chip/
 * .mv-pagination/.mv-cta-band components rather than new one-off styles.
 * Footer is the shared partials/footer.blade.php — Figma's footer subtree here is
 * pixel-identical to what that partial already renders.
 */
.mv-vd-hero { background: var(--mv-navy-primary); padding: 40px; }
.mv-vd-hero__inner { max-width: 1200px; margin: 0 auto; color: #fff; }
.mv-vd-hero__inner h1 { color: #fff; }
.mv-vd-hero__sub { color: rgba(255,255,255,0.8); margin-top: 8px; font-size: 15px; max-width: 700px; }
.mv-vd-search { background: #fff; border-radius: 14px; padding: 10px; display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.mv-vd-search__field { flex: 1 1 200px; background: var(--mv-navy-tint); border: 1px solid #C5D8EE; border-radius: 10px; height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mv-text-dark); }
.mv-vd-search__field i { color: var(--mv-text-soft); flex-shrink: 0; }
.mv-vd-search__select, .mv-vd-search__input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; font: inherit; font-size: 13px; color: var(--mv-text-dark); }
.mv-vd-search__select { cursor: pointer; }
.mv-vd-search__input::placeholder { color: var(--mv-text-soft); }

.mv-vd-categories { background: #fff; border-bottom: 1px solid var(--mv-navy-tint); padding: 16px 40px; display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mv-vd-categories::-webkit-scrollbar { display: none; }

.mv-vd-content { max-width: 1200px; margin: 0 auto; padding: 48px 40px; }
.mv-vd-section-head { margin-bottom: 24px; }
.mv-vd-section-head + .mv-vd-grid, .mv-vd-grid + .mv-vd-section-head { margin-top: 48px; }
.mv-vd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.mv-vd-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; }
.mv-vd-card__stretch { position: absolute; inset: 0; z-index: 1; }
.mv-vd-card__actions { display: flex; gap: 8px; position: relative; z-index: 2; }
.mv-vd-card__contact { position: relative; z-index: 2; }
.mv-vd-card__image { height: 180px; background-color: var(--mv-navy-primary); position: relative; display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 10px; overflow: hidden; }
.mv-vd-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mv-vd-card__badge { font-size: 10.5px; font-weight: 700; border-radius: 100px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 1; }
.mv-vd-card__badge--premium { background: #fff; color: var(--mv-orange); }
.mv-vd-card__badge--verified { background: rgba(21,128,61,0.9); color: #fff; }
.mv-vd-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mv-vd-card__desc { font-size: 12.5px; color: var(--mv-text-soft); line-height: 1.5; margin: 2px 0 0; }
.mv-vd-card__row { display: flex; justify-content: space-between; align-items: center; }
.mv-vd-card__name { font-weight: 800; color: var(--mv-navy-primary); font-size: 16px; margin-top: 4px; }
.mv-vd-card__rating { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mv-text-soft); }
.mv-vd-card__rating i { color: var(--mv-orange); }
.mv-vd-card__rating strong { color: var(--mv-text-dark); }
.mv-vd-card__location { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mv-text-soft); }
.mv-vd-card__footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; margin-top: auto; border-top: 1px solid var(--mv-navy-tint); }
.mv-vd-card__price-label { font-size: 11px; color: var(--mv-text-soft); text-transform: uppercase; }
.mv-vd-card__price { font-weight: 800; color: var(--mv-navy-primary); font-size: 16px; }

@media (max-width: 900px) {
    .mv-vd-hero { padding: 32px 20px; }
    .mv-vd-categories { padding: 14px 20px; }
    .mv-vd-content { padding: 32px 20px; }
    .mv-vd-grid { grid-template-columns: 1fr; }
}

/* Marketplace landing — marketplace_landing.blade.php.
 * Source: Figma node 1276:1140 ("marketplace"), pulled as METADATA ONLY (same
 * oversized fallback) on 2026-09-08 — text/layout real, colors from established
 * tokens. Same nav-reuse deviation as Vendors Directory (see that section's comment).
 * Package cards/prices/ratings/inclusions are static sample content — same reasoning
 * throughout this file: no confirmed DB access to the separate marketplace app's real
 * data. Filter checkboxes are non-interactive display, matching the same pattern as
 * every other search/filter control built as decorative across this revamp. "How the
 * Marketplace Works" reuses the exact .mv-how-sec/.mv-how-grid/.mv-how-step
 * components already built for Home's "How It Works" section — pixel-identical
 * 4-step numbered layout, just different copy.
 */
.mv-mkt-content { max-width: 1200px; margin: 0 auto; padding: 48px 40px; display: flex; gap: 32px; align-items: flex-start; }
.mv-mkt-filters { flex: 0 0 280px; background: #fff; border: 1px solid var(--mv-navy-tint); border-radius: 16px; padding: 24px; position: sticky; top: 24px; }
.mv-mkt-filters h3 { font-size: 18px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--mv-navy-tint); }
.mv-mkt-filter-group { margin-bottom: 24px; }
.mv-mkt-filter-group:last-child { margin-bottom: 0; }
.mv-mkt-filter-group__title { display: block; color: var(--mv-text-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 12px; }
.mv-mkt-filter-check { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; color: var(--mv-text-dark); }
.mv-mkt-filter-check:last-child { margin-bottom: 0; }

.mv-mkt-listings { flex: 1; min-width: 0; }
.mv-mkt-listings__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.mv-mkt-listings__count { color: var(--mv-text-soft); font-size: 13px; }

.mv-package-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); padding: 24px; display: flex; gap: 24px; margin-bottom: 20px; }
.mv-package-card__image { flex: 0 0 220px; height: 250px; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--mv-navy-primary); }
.mv-package-card__details { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mv-package-card__vendor { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mv-package-card__vendor-name { font-weight: 700; color: var(--mv-navy-primary); }
.mv-package-card__vendor-rating { color: var(--mv-text-soft); }
.mv-package-card__vendor-rating i { color: var(--mv-orange); }
.mv-package-card__title { font-size: 19px; font-weight: 800; color: var(--mv-navy-primary); margin-top: 8px; }
.mv-package-card__desc { color: var(--mv-text-soft); font-size: 13.5px; line-height: 1.5; margin-top: 8px; }
.mv-package-card__includes-title { display: block; color: var(--mv-text-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 16px; margin-bottom: 8px; }
.mv-package-card__includes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mv-package-card__includes li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--mv-text-dark); }
.mv-package-card__includes i { color: var(--mv-orange); margin-top: 2px; flex-shrink: 0; }
.mv-package-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--mv-navy-tint); }
.mv-package-card__price-label { font-size: 11px; color: var(--mv-text-soft); text-transform: uppercase; }
.mv-package-card__price { font-weight: 800; color: var(--mv-navy-primary); font-size: 20px; }
.mv-package-card__actions { display: flex; gap: 10px; }

.mv-mkt-escrow { display: flex; align-items: center; gap: 14px; background: var(--mv-navy-tint); border-radius: 12px; padding: 16px 20px; margin-top: 12px; }
.mv-mkt-escrow i { color: var(--mv-navy-primary); font-size: 22px; flex-shrink: 0; }
.mv-mkt-escrow span { font-size: 13.5px; color: var(--mv-text-dark); line-height: 1.5; }

@media (max-width: 900px) {
    .mv-mkt-content { flex-direction: column; padding: 32px 20px; }
    .mv-mkt-filters { position: static; width: 100%; }
    .mv-package-card { flex-direction: column; }
    .mv-package-card__image { flex: none; width: 100%; height: 180px; }
}

/* Page-transition loader — shown by partials/page-loader.blade.php's script
 * right before navigating away (link click / form submit) across the whole
 * revamp theme, which is plain full-page reloads, not an SPA — without this
 * there's a dead-feeling pause between clicking and the next page painting.
 * Slim top progress bar (YouTube/GitHub/Medium convention) rather than a
 * centered overlay with copy — no "Loading..." text to localize or balance,
 * and it never blocks the page underneath. Real progress for a full
 * navigation can't be observed, so the bar eases toward 85% while waiting
 * (script) and is simply removed by the next page's own fresh load. */
.mv-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 9999;
    background: linear-gradient(90deg, var(--mv-orange), var(--mv-orange-light));
    box-shadow: 0 0 8px rgba(241,95,34,0.5);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: width 0.2s ease-out, opacity 0.15s ease;
}
.mv-page-loader.mv-page-loader--visible { opacity: 1; }

/* User dashboard — web layout (not a mobile-app-style single centered column;
 * see user_dashboard.blade.php's own header comment for the research this is
 * based on: Eventbrite/Luma/Dice conventions, no B2B-style left sidebar,
 * hero ticket beside the stats column in a real grid, color reserved for the
 * hero only). Approved via a Design artifact mockup before this port. */
.mv-dash { max-width: 1240px; margin: 0 auto; padding: 28px 32px 64px; }
.mv-dash__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.mv-dash__greeting { font-size: 13px; color: var(--mv-text-soft); font-weight: 500; }
.mv-dash__tabs { display: flex; gap: 4px; background: var(--mv-navy-tint); border-radius: 11px; padding: 4px; }
.mv-dash__tab { padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--mv-text-soft); }
.mv-dash__tab--active { background: #fff; color: var(--mv-text-dark); box-shadow: 0 1px 2px rgba(10,34,64,0.08); }

.mv-dash__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
.mv-dash__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.mv-dash__side { display: flex; flex-direction: column; gap: 14px; }

/* Hero: compact horizontal card (image-left band), not a tall full-bleed banner —
 * sits naturally beside the stats column instead of needing the full page width. */
.mv-dash-hero { display: flex; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(10,34,64,0.04), 0 8px 24px rgba(10,34,64,0.08); text-decoration: none; }
.mv-dash-hero__band { width: 200px; flex-shrink: 0; background: linear-gradient(135deg, var(--mv-navy-primary), var(--mv-navy-dark)); background-size: cover; background-position: center; position: relative; }
.mv-dash-hero__band::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(241,95,34,0.4), transparent 70%); }
.mv-dash-hero__body { flex: 1 1 auto; padding: 22px 26px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.mv-dash-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mv-dash-hero__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--mv-text-soft); text-transform: uppercase; }
.mv-dash-hero__badge { background: var(--mv-navy-tint); color: var(--mv-orange); font-size: 10.5px; font-weight: 700; border-radius: 100px; padding: 5px 11px; white-space: nowrap; }
.mv-dash-hero__badge--pending { background: rgba(185,28,28,0.1); color: #B91C1C; }
.mv-dash-hero__title { font-size: 20px; font-weight: 800; color: var(--mv-text-dark); line-height: 1.25; margin-top: 10px; letter-spacing: -0.3px; }
.mv-dash-hero__date { display: flex; align-items: center; gap: 6px; color: var(--mv-text-soft); font-size: 13px; font-weight: 500; margin-top: 10px; }
.mv-dash-hero__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.mv-dash-hero__hint { font-size: 12.5px; color: var(--mv-text-soft); }
.mv-dash-hero__cta { display: inline-flex; align-items: center; gap: 7px; background: var(--mv-navy-primary); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 17px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }

.mv-dash-empty { display: flex; align-items: center; gap: 20px; padding: 24px; }
.mv-dash-empty__icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(241,95,34,0.12); color: var(--mv-orange); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.mv-dash-empty__body { flex: 1 1 auto; }

.mv-dash-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mv-dash-section__see-all { font-size: 12.5px; font-weight: 700; color: var(--mv-orange); }
.mv-dash-events { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.mv-dash-event-row { display: flex; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(10,34,64,0.04), 0 6px 18px rgba(10,34,64,0.05); text-decoration: none; color: inherit; }
.mv-dash-event-row__image { width: 92px; flex-shrink: 0; background-color: var(--mv-navy-tint); background-size: cover; background-position: center; }
.mv-dash-event-row__body { padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.mv-dash-event-row__cat { font-size: 9.5px; font-weight: 600; color: var(--mv-text-soft); text-transform: uppercase; letter-spacing: 0.4px; }
.mv-dash-event-row__title { font-size: 13.5px; font-weight: 600; color: var(--mv-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-dash-event-row__date { font-size: 12px; color: var(--mv-text-soft); }
.mv-dash-event-row__price { font-size: 13px; font-weight: 700; color: var(--mv-orange); }

/* Right rail: compact 2-up stat tiles (tabular numerals), not full-width cards. */
.mv-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mv-dash-stat { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(10,34,64,0.04), 0 8px 24px rgba(10,34,64,0.06); padding: 16px; text-decoration: none; color: inherit; }
.mv-dash-stat--wide { grid-column: span 2; display: flex; align-items: center; gap: 10px; }
.mv-dash-stat__icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.mv-dash-stat__icon--navy { background: rgba(13,56,117,0.08); color: var(--mv-navy-primary); }
.mv-dash-stat__icon--green { background: rgba(21,128,61,0.08); color: #15803D; }
.mv-dash-stat__icon--orange { background: rgba(241,95,34,0.1); color: var(--mv-orange); }
.mv-dash-stat__value { font-size: 19px; font-weight: 800; color: var(--mv-text-dark); margin-top: 10px; font-variant-numeric: tabular-nums; }
.mv-dash-stat__label { font-size: 11.5px; color: var(--mv-text-soft); font-weight: 500; }

.mv-dash-panel { padding: 18px; }
.mv-dash-panel__title { font-size: 11px; font-weight: 700; color: #B3C2D6; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 10px; }
.mv-dash-panel__row { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--mv-text-dark); background: var(--mv-background); margin-bottom: 6px; }
.mv-dash-panel__row:last-child { margin-bottom: 0; }
.mv-dash-panel__row i:first-child { margin-right: 10px; color: var(--mv-navy-primary); }
.mv-dash-panel__row i:last-child { color: #B3C2D6; font-size: 12px; }

@media (max-width: 900px) {
    .mv-dash__grid { grid-template-columns: 1fr; }
    .mv-dash-events { grid-template-columns: 1fr; }
    .mv-dash-hero { flex-direction: column; }
    .mv-dash-hero__band { width: 100%; height: 100px; }
}

/* Revamp-styled ticket checkout + pay-summary — same real routes/controllers
 * as the legacy theme's attendee-details form and order-summary page, see
 * templates/revamp/user/event/ticket/buy.blade.php and templates/revamp/
 * ticket_payment/status.blade.php for the full context. */
.mv-checkout { max-width: 620px; margin: 0 auto; padding: 32px 20px 64px; display: flex; flex-direction: column; gap: 18px; }
.mv-checkout__header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.mv-checkout__error { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.25); border-radius: 10px; padding: 12px 14px; }
.mv-checkout__form { display: flex; flex-direction: column; gap: 18px; }
.mv-checkout__panel { display: flex; flex-direction: column; gap: 18px; padding: 20px; }
.mv-checkout__attendee { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--mv-navy-tint); }
.mv-checkout__attendee:last-child { padding-bottom: 0; border-bottom: none; }
.mv-checkout__attendee-head { display: flex; align-items: center; justify-content: space-between; }
.mv-checkout__attendee-price { font-size: 13px; font-weight: 700; color: var(--mv-orange); background: rgba(241,95,34,0.1); border-radius: 100px; padding: 4px 10px; }
.mv-checkout__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.mv-checkout__summary { padding: 18px 20px; }
.mv-checkout__summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--mv-text-dark); padding: 8px 0; border-bottom: 1px solid var(--mv-navy-tint); }
.mv-checkout__summary-row:last-child { border-bottom: none; }
.mv-checkout__summary-row--total { font-weight: 800; font-size: 15px; color: var(--mv-navy-primary); }
.mv-checkout__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--mv-text-soft); margin-top: 14px; cursor: pointer; }
.mv-checkout__checkbox input { margin-top: 2px; }
.mv-checkout__status { font-weight: 700; border-radius: 100px; padding: 4px 12px; font-size: 12.5px; }
.mv-checkout__status--paid { color: #15803d; background: rgba(21,128,61,0.1); }
.mv-checkout__status--pending { color: var(--mv-orange); background: rgba(241,95,34,0.1); }

/* Ticket-details action row (Pay Securely / Download / Event Link / View Event /
 * Cancel) — dedicated classes rather than reusing the dashboard's own
 * .mv-dash-action (that name belongs to the dashboard's quick-action tiles,
 * not this unrelated page; conflating them was a real bug caught by code
 * review when the dashboard redesign removed that CSS block). */
.mv-ticket-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mv-ticket-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 72px; border: 1px solid var(--mv-navy-tint); border-radius: 12px; background: #fff; text-decoration: none; color: var(--mv-text-dark); font-size: 12px; font-weight: 600; cursor: pointer; }
.mv-ticket-action i { font-size: 20px; color: var(--mv-navy-primary); }

@media (max-width: 560px) {
    .mv-checkout__grid { grid-template-columns: 1fr; }
}

/* Generic static content pages (About, Contact, Privacy, Terms, Cookies, Blog)
 * — real revamp-styled replacements for the footer links that used to fall
 * through to the legacy basic theme's Template:: views. Real CMS content,
 * revamp chrome (nav/footer), shared across all of these so nothing leads
 * back to the old site. */
.mv-content-hero { max-width: 900px; margin: 0 auto; padding: 56px 40px 24px; text-align: center; }
.mv-content-hero__sub { color: var(--mv-text-soft); font-size: 15px; margin-top: 10px; }
.mv-content-body { max-width: 820px; margin: 0 auto; padding: 0 40px 64px; }
.mv-content-card { background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); }
.mv-content-prose { font-size: 15px; line-height: 1.75; color: var(--mv-text-dark); }
.mv-content-prose h1, .mv-content-prose h2, .mv-content-prose h3 { color: var(--mv-navy-primary); margin: 28px 0 12px; }
.mv-content-prose h1:first-child, .mv-content-prose h2:first-child, .mv-content-prose h3:first-child { margin-top: 0; }
.mv-content-prose p { margin: 0 0 14px; }
.mv-content-prose ul, .mv-content-prose ol { margin: 0 0 14px; padding-left: 22px; }
.mv-content-prose a { color: var(--mv-azure); }

.mv-contact-grid { max-width: 1040px; margin: 0 auto; padding: 0 40px 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mv-contact-card { background: #fff; border-radius: 16px; padding: 24px; text-align: center; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); }
.mv-contact-card__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--mv-navy-tint); color: var(--mv-navy-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 20px; }
.mv-contact-card__title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.mv-contact-card__desc { color: var(--mv-text-soft); font-size: 13.5px; }
.mv-contact-card__desc a { color: var(--mv-text-soft); text-decoration: none; }
.mv-contact-form { max-width: 1040px; margin: 24px auto 64px; padding: 0 40px; }
.mv-contact-form__card { background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); }
.mv-contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mv-contact-form__field { grid-column: span 2; }
.mv-contact-form__field--half { grid-column: span 1; }
.mv-contact-form__field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--mv-text-soft); margin-bottom: 6px; }
.mv-contact-form__field input, .mv-contact-form__field textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--mv-navy-tint); font: inherit; font-size: 14px; color: var(--mv-text-dark); }
.mv-contact-form__field textarea { min-height: 120px; resize: vertical; }
.mv-contact-form__submit { margin-top: 18px; }

.mv-blog-grid { max-width: 1040px; margin: 0 auto; padding: 0 40px 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mv-blog-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(13,56,117,0.08), 0 4px 16px rgba(13,56,117,0.06); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.mv-blog-card__image { height: 170px; background: var(--mv-navy-tint); }
.mv-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-blog-card__body { padding: 18px; }
.mv-blog-card__date { color: var(--mv-text-soft); font-size: 12px; font-weight: 600; }
.mv-blog-card__title { font-size: 16px; font-weight: 700; color: var(--mv-text-dark); margin-top: 8px; line-height: 1.35; }
.mv-blog-card__readmore { color: var(--mv-orange); font-size: 13px; font-weight: 700; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }
.mv-blog-detail { max-width: 760px; margin: 0 auto; padding: 0 40px 64px; }
.mv-blog-detail__image { width: 100%; border-radius: 16px; margin-bottom: 24px; }
.mv-blog-detail__date { color: var(--mv-text-soft); font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
    .mv-content-hero, .mv-content-body, .mv-contact-grid, .mv-contact-form, .mv-blog-grid, .mv-blog-detail { padding-left: 20px; padding-right: 20px; }
    .mv-contact-grid { grid-template-columns: 1fr; }
    .mv-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .mv-content-card { padding: 22px; }
    .mv-contact-form__card { padding: 22px; }
    .mv-contact-form__grid { grid-template-columns: 1fr; }
    .mv-contact-form__field, .mv-contact-form__field--half { grid-column: span 1; }
    .mv-blog-grid { grid-template-columns: 1fr; }
}

/* Organizer event creation wizard (overview/info/gallery/speakers/publish) */
.mv-wizard-steps {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.mv-wizard-step a,
.mv-wizard-step__disabled {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    color: var(--mv-text-soft);
    background: var(--mv-navy-tint);
}
.mv-wizard-step__disabled { opacity: 0.55; cursor: not-allowed; }
.mv-wizard-step__num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(10,34,64,0.12);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
}
.mv-wizard-step--done a { color: var(--mv-navy); background: var(--mv-navy-tint); }
.mv-wizard-step--active a,
.mv-wizard-step--active .mv-wizard-step__disabled {
    background: var(--mv-orange);
    color: var(--mv-white);
}
.mv-wizard-step--active .mv-wizard-step__num { background: rgba(255,255,255,0.3); }

.mv-wizard-field-group { margin-bottom: 18px; }
.mv-wizard-helper { color: var(--mv-text-soft); font-size: 11.5px; display: block; margin-top: 6px; }

/* Bootstrap's own .spinner-border, reused verbatim in the wizard "Saving..."
 * buttons' JS (built when porting the legacy pages) — Bootstrap itself isn't
 * loaded anywhere in revamp, so without this the class rendered as an inert
 * empty span instead of a spinning loader. */
.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mv-spinner-border 0.75s linear infinite;
}
.spinner-border-sm { width: 0.875rem; height: 0.875rem; border-width: 0.15em; }
@keyframes mv-spinner-border { to { transform: rotate(360deg); } }

/* Download band — home.blade.php, replaces the old light app section above the FAQ. */
.mv-app-band { margin: 72px auto 72px; max-width: 1240px; padding: 56px 32px; border-radius: 28px; background: linear-gradient(135deg, var(--mv-navy-dark), var(--mv-navy-primary)); color: #fff; text-align: center; }
.mv-app-band h2.mv-app-band__title { color: #fff; font-size: clamp(30px, 6vw, 46px); line-height: 1.1; margin: 0 0 34px; font-weight: 800; text-wrap: balance; }
.mv-app-band h2.mv-app-band__title span { color: var(--mv-orange); }
.mv-app-band__badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.mv-store-badge { display: inline-flex; align-items: center; gap: 12px; min-width: 210px; padding: 10px 20px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; text-decoration: none; text-align: left; }
.mv-store-badge small { display: block; font-size: 11px; letter-spacing: .04em; opacity: .85; }
.mv-store-badge b { display: block; font-size: 19px; line-height: 1.1; font-weight: 700; }
@media (max-width: 560px) { .mv-app-band { padding: 40px 20px; } .mv-store-badge { width: 100%; min-width: 0; } }