/* ============================
   VASTOZ Landing Page Styles
   ============================ */

:root {
    --vz-primary-blue: #0066FF;
    --vz-primary-dark: #0A1628;
    --vz-secondary-blue: #1E3A5F;
    --vz-accent-orange: #E8A54B;
    --vz-text-dark: #1A1A2E;
    --vz-text-gray: #6B7280;
    --vz-text-light: #9CA3AF;
    --vz-bg-light: #F8FAFC;
    --vz-bg-white: #FFFFFF;
    --vz-border-color: #E5E7EB;
    --vz-success-green: #10B981;
}

/* Scoped reset - only applies within VastozLanding pages */
.vz-app * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.vz-app {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--vz-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

.vz-app {
    width: 100%;
}

/* ============================
   Container (replacing Bootstrap)
   ============================ */

/* Container is now .vz-container - defined below */

/* Removed conflicting Tailwind-like utility classes.
   VastozLanding pages should use .vz-* prefixed classes
   and phantom-client provides Tailwind utilities. */

/* ============================
   Dropdown (replacing Bootstrap)
   ============================ */

.vz-dropdown {
    position: relative;
}

.vz-dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vz-dropdown-toggle::after {
    content: '';
    display: inline-block;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    margin-left: 0.35rem;
    transition: transform 0.2s;
}

.vz-dropdown:hover .vz-dropdown-toggle::after,
.vz-dropdown:focus-within .vz-dropdown-toggle::after {
    transform: rotate(180deg);
}

.vz-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 180px;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    list-style: none;
}

.vz-dropdown:hover .vz-dropdown-menu,
.vz-dropdown:focus-within .vz-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vz-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--vz-text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.vz-dropdown-item:hover {
    background: var(--vz-bg-light);
    color: var(--vz-primary-blue);
}

/* ============================
   Header / Navigation
   ============================ */

.vz-navbar {
    background: var(--vz-bg-white);
    padding: 1rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.vz-navbar-brand {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--vz-primary-dark);
    text-decoration: none;
    letter-spacing: 2px;
}

.vz-nav-link {
    color: var(--vz-text-dark);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: color 0.2s;
}

.vz-nav-link:hover {
    color: var(--vz-primary-blue);
}

.btn-register {
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    border: none;
}

.btn-register:hover {
    background: #0052CC;
    color: white;
}

.vz-btn-outline-dark {
    border: 1px solid var(--vz-text-dark);
    color: var(--vz-text-dark);
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    transition: all 0.2s;
}

.vz-btn-outline-dark:hover {
    background: var(--vz-text-dark);
    color: white;
}

/* ============================
   Hero Section
   ============================ */

.vz-hero-section {
    background: linear-gradient(135deg, var(--vz-primary-dark) 0%, var(--vz-secondary-blue) 100%);
    position: relative;
    padding: 5rem 0;
    min-height: 450px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.vz-hero-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234A90D9' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.vz-hero-dna-left,
.vz-hero-dna-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px;
    opacity: 0.4;
    background: linear-gradient(180deg, rgba(74, 144, 217, 0.3) 0%, transparent 50%, rgba(74, 144, 217, 0.3) 100%);
}

.vz-hero-dna-left {
    left: 5%;
    transform: rotate(15deg);
}

.vz-hero-dna-right {
    right: 5%;
    transform: rotate(-15deg);
}

.vz-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
}

.vz-hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.vz-hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.vz-hero-date {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vz-hero-location {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.vz-btn-hero {
    background: var(--vz-primary-blue);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    border: none;
}

.vz-btn-hero:hover {
    background: #0052CC;
    transform: translateY(-2px);
    color: white;
}

/* ============================
   Countdown Section
   ============================ */

.vz-countdown-section {
    padding: 4rem 0;
    background: var(--vz-bg-white);
}

.vz-countdown-intro h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vz-text-dark);
    margin-bottom: 1.5rem;
}

.vz-countdown-intro p {
    color: var(--vz-text-gray);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vz-countdown-timer {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
}

.vz-countdown-item {
    text-align: center;
}

.vz-countdown-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    line-height: 1;
}

.vz-countdown-label {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

/* ============================
   Section Styles
   ============================ */

.vz-section-padding {
    padding: 5rem 0;
}

.vz-section-bg-light {
    background: var(--vz-bg-light);
}

.vz-section-bg-white {
    background: var(--vz-bg-white);
}

.vz-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vz-text-dark);
    margin-bottom: 0.75rem;
    text-align: center;
}

.vz-section-subtitle {
    color: var(--vz-text-gray);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem;
}

/* ============================
   Why Attend Section
   ============================ */

.vz-why-attend-section {
    padding: 5rem 0;
    background: var(--vz-bg-light);
}

.vz-feature-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.vz-feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 102, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vz-feature-icon i {
    font-size: 1.25rem;
    color: var(--vz-primary-blue);
}

.vz-feature-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vz-feature-content p {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.vz-benefits-card {
    background: var(--vz-bg-white);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.vz-benefits-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.vz-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vz-benefit-item i {
    color: var(--vz-success-green);
    margin-top: 0.2rem;
}

.vz-benefit-item span {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

.vz-btn-primary {
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    border: none;
    transition: background 0.2s;
}

.vz-btn-primary:hover {
    background: #0052CC;
    color: white;
}

/* ============================
   Speakers Section
   ============================ */

.speakers-section {
    padding: 5rem 0;
    background: var(--vz-bg-white);
}

.vz-speaker-card {
    background: var(--vz-bg-white);
    border: 1px solid var(--vz-border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.vz-speaker-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.vz-speaker-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vz-speaker-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-speaker-image i {
    font-size: 3rem;
    color: #6366F1;
}

.vz-speaker-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.vz-speaker-bio {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    line-height: 1.5;
}

.vz-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.vz-pagination-info {
    color: var(--vz-text-gray);
    font-size: 0.9rem;
}

.vz-pagination-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid var(--vz-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vz-bg-white);
    cursor: pointer;
    transition: all 0.2s;
}

.vz-pagination-arrow:hover {
    background: var(--vz-primary-blue);
    color: white;
    border-color: var(--vz-primary-blue);
}

/* ============================
   Schedule Section
   ============================ */

.vz-schedule-section {
    padding: 5rem 0;
    background: var(--vz-bg-light);
}

.vz-schedule-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.vz-schedule-tab {
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--vz-border-color);
    background: var(--vz-bg-white);
}

.vz-schedule-tab.active {
    background: var(--vz-primary-blue);
    color: white;
    border-color: var(--vz-primary-blue);
}

.vz-schedule-content {
    background: var(--vz-bg-white);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.vz-session-header {
    margin-bottom: 2rem;
}

.vz-session-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.vz-session-theme {
    color: var(--vz-primary-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.vz-schedule-item {
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-schedule-time {
    min-width: 140px;
    font-weight: 600;
    color: var(--vz-primary-blue);
}

.vz-schedule-details h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vz-schedule-details p {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.speakers-sidebar {
    background: var(--vz-bg-light);
    border-radius: 12px;
    padding: 1.5rem;
}

.speakers-sidebar h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.vz-sidebar-speaker {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-sidebar-speaker:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vz-sidebar-speaker-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vz-sidebar-speaker-img i {
    color: #6366F1;
}

.vz-sidebar-speaker-info h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.vz-sidebar-speaker-info p {
    font-size: 0.8rem;
    color: var(--vz-text-gray);
    margin: 0;
}

/* ============================
   Pricing Section
   ============================ */

.vz-pricing-section {
    padding: 5rem 0;
    background: var(--vz-bg-white);
}

.vz-pricing-card {
    background: var(--vz-bg-white);
    border: 1px solid var(--vz-border-color);
    border-radius: 12px;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s;
    position: relative;
}

.vz-pricing-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.vz-pricing-card.featured {
    border-color: var(--vz-primary-blue);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.15);
}

.vz-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.vz-pricing-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-pricing-tier {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.vz-pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--vz-primary-dark);
}

.vz-pricing-price sup {
    font-size: 1rem;
    font-weight: 600;
}

.vz-pricing-price sub {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    font-weight: 400;
}

.vz-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.vz-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.vz-pricing-features li i {
    color: var(--vz-success-green);
    margin-top: 0.2rem;
}

.btn-pricing {
    width: 100%;
    padding: 0.875rem;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-pricing-primary {
    background: var(--vz-primary-blue);
    color: white;
}

.btn-pricing-primary:hover {
    background: #0052CC;
    color: white;
}

.btn-pricing-outline {
    background: transparent;
    border: 1px solid var(--vz-primary-blue);
    color: var(--vz-primary-blue);
}

.btn-pricing-outline:hover {
    background: var(--vz-primary-blue);
    color: white;
}

.slots-available {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--vz-text-gray);
}

/* ============================
   Virtual Passes Section
   ============================ */

.vz-virtual-passes-section {
    padding: 5rem 0;
    background: var(--vz-bg-light);
}

.vz-virtual-pass-card {
    background: var(--vz-bg-white);
    border: 1px solid var(--vz-border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    transition: all 0.3s;
}

.vz-virtual-pass-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vz-virtual-pass-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.vz-virtual-pass-info p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin: 0;
    max-width: 500px;
}

.vz-virtual-pass-action {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.vz-virtual-pass-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
}

.vz-virtual-pass-price sup {
    font-size: 0.875rem;
}

/* ============================
   Bundle Section
   ============================ */

.vz-bundle-section {
    padding: 5rem 0;
    background: var(--vz-bg-white);
}

.vz-bundle-card {
    background: linear-gradient(135deg, var(--vz-primary-dark) 0%, var(--vz-secondary-blue) 100%);
    border-radius: 16px;
    padding: 3rem;
    color: white;
}

.vz-bundle-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

.vz-bundle-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.vz-bundle-info p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.vz-bundle-pricing {
    text-align: center;
}

.vz-bundle-original-price {
    font-size: 1rem;
    text-decoration: line-through;
    opacity: 0.6;
}

.vz-bundle-sale-price {
    font-size: 3rem;
    font-weight: 800;
}

.vz-bundle-savings {
    background: var(--vz-accent-orange);
    color: var(--vz-primary-dark);
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.5rem;
}

.btn-bundle {
    background: white;
    color: var(--vz-primary-dark);
    padding: 1rem 2.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    border: none;
    margin-top: 1.5rem;
}

.btn-bundle:hover {
    background: #f0f0f0;
    color: var(--vz-primary-dark);
}

/* ============================
   Sponsors Section
   ============================ */

.vz-sponsors-section {
    padding: 4rem 0;
    background: var(--vz-bg-light);
    border-top: 1px solid var(--vz-border-color);
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-sponsors-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.vz-sponsor-logo {
    width: 120px;
    height: 60px;
    background: var(--vz-bg-white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vz-border-color);
}

/* ============================
   Our Story Section
   ============================ */

.vz-story-section {
    padding: 5rem 0;
    background: var(--vz-bg-white);
}

.vz-letters {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.vz-letter {
    text-align: center;
}

.vz-letter span {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--vz-primary-dark);
    margin-bottom: 0.5rem;
}

.vz-letter small {
    font-size: 0.75rem;
    color: var(--vz-text-gray);
    text-transform: uppercase;
}

.vz-story-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.vz-story-content p {
    color: var(--vz-text-gray);
    margin-bottom: 2rem;
}

/* ============================
   FAQ Section
   ============================ */

.vz-faq-section {
    padding: 5rem 0;
    background: var(--vz-bg-light);
}

.vz-faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.vz-faq-item {
    background: var(--vz-bg-white);
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.vz-faq-question {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.vz-faq-question:hover {
    background: var(--vz-bg-light);
}

.vz-faq-question i {
    transition: transform 0.3s;
}

.vz-faq-item.active .vz-faq-question i {
    transform: rotate(180deg);
}

.vz-faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--vz-text-gray);
    display: none;
}

.vz-faq-item.active .vz-faq-answer {
    display: block;
}

/* ============================
   Hotel Section
   ============================ */

.vz-hotel-section {
    padding: 5rem 0;
    background: var(--vz-bg-white);
}

.vz-hotel-card {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.vz-hotel-image {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1E3A5F 0%, #0A1628 100%);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vz-hotel-image i {
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.3);
}

.vz-hotel-info {
    flex: 1;
}

.vz-hotel-info h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.vz-hotel-info p {
    color: var(--vz-text-gray);
    margin-bottom: 1rem;
}

.vz-hotel-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--vz-text-gray);
    font-size: 0.9rem;
}

.vz-hotel-address i {
    color: var(--vz-primary-blue);
}

/* ============================
   CTA Section
   ============================ */

.vz-cta-section {
    padding: 5rem 0;
    background: var(--vz-bg-light);
    text-align: center;
}

.vz-cta-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.vz-cta-section p {
    color: var(--vz-text-gray);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.btn-cta {
    background: var(--vz-accent-orange);
    color: var(--vz-primary-dark);
    padding: 1rem 2.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    border: none;
}

.btn-cta:hover {
    background: #D4943F;
    color: var(--vz-primary-dark);
}

/* ============================
   Footer
   ============================ */

.footer {
    background: var(--vz-primary-dark);
    color: white;
    padding: 4rem 0 2rem;
}

.vz-footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

.vz-footer-brand {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.vz-footer-description {
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1.6;
}

.vz-footer-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.vz-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vz-footer-links li {
    margin-bottom: 0.75rem;
}

.vz-footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.vz-footer-links a:hover {
    color: white;
}

.vz-social-links {
    display: flex;
    gap: 1rem;
}

.vz-social-link {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.2s;
}

.vz-social-link:hover {
    background: var(--vz-primary-blue);
    border-color: var(--vz-primary-blue);
    color: white;
}

.vz-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vz-footer-copyright {
    opacity: 0.7;
    font-size: 0.875rem;
}

.vz-footer-legal {
    display: flex;
    gap: 2rem;
}

.vz-footer-legal a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.vz-footer-legal a:hover {
    color: white;
}

/* ============================
   Utility Classes
   ============================ */

.text-primary-blue {
    color: var(--vz-primary-blue);
}

.text-text-gray {
    color: var(--vz-text-gray);
}

.text-text-light {
    color: var(--vz-text-light);
}

.text-success {
    color: var(--vz-success-green);
}

.mt-4 {
    margin-top: 1.5rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

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

@media (max-width: 991px) {
    .vz-hero-content h1 {
        font-size: 2.5rem;
    }

    .vz-countdown-timer {
        justify-content: center;
        margin-top: 2rem;
    }

    .vz-hotel-card {
        flex-direction: column;
    }

    .vz-bundle-content {
        flex-direction: column;
        text-align: center;
    }

    .vz-footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .vz-hero-content h1 {
        font-size: 2rem;
    }

    .vz-countdown-timer {
        gap: 1rem;
    }

    .vz-countdown-value {
        font-size: 2.5rem;
    }

    .vz-section-title {
        font-size: 1.5rem;
    }

    .vz-virtual-pass-card {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .vz-virtual-pass-action {
        flex-direction: column;
    }

    .vz-letters {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .vz-letter span {
        font-size: 2rem;
    }

    .vz-footer-content {
        grid-template-columns: 1fr;
    }

    .vz-footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ============================
   Loading & Error States
   ============================ */

.vz-loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.vz-loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.vz-loading-progress circle:last-child {
    stroke: var(--vz-primary-blue);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.vz-loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.vz-loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ============================
   Login Page Styles
   ============================ */

.navbar-login {
    background: var(--vz-primary-dark);
    padding: 1rem 0;
}

.navbar-brand-login {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    letter-spacing: 3px;
}

.nav-link-login {
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link-login:hover {
    color: var(--vz-primary-blue);
}

.btn-register-nav {
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-register-nav:hover {
    background: #0052CC;
    color: white;
}

.btn-about-nav {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-about-nav:hover {
    background: white;
    color: var(--vz-primary-dark);
}

.vz-login-section {
    min-height: calc(100vh - 140px);
    padding: 4rem 0;
    display: flex;
    align-items: center;
}

.vz-login-form-container {
    max-width: 400px;
}

.vz-login-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--vz-text-dark);
    margin-bottom: 1.5rem;
}

.vz-login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-login-tab {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--vz-text-gray);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.vz-login-tab:hover {
    color: var(--vz-text-dark);
}

.vz-login-tab.active {
    color: var(--vz-text-dark);
    font-weight: 600;
}

.vz-login-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--vz-text-dark);
}

.vz-login-description {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.vz-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vz-form-group-login {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vz-form-label-login {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--vz-text-gray);
}

.vz-form-input-login {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

.vz-form-input-login:focus {
    outline: none;
    border-color: var(--vz-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.vz-form-input-login::placeholder {
    color: #B0B0B0;
}

.verification-group {
    display: flex;
    gap: 0.75rem;
}

.verification-input {
    flex: 1;
}

.btn-send-code {
    padding: 0.875rem 1.25rem;
    background: white;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vz-text-dark);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-send-code:hover {
    background: var(--vz-bg-light);
    border-color: var(--vz-text-dark);
}

.btn-login-submit {
    width: 100%;
    padding: 1rem;
    background: var(--vz-primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
}

.btn-login-submit:hover {
    background: #0052CC;
}

.vz-login-terms {
    font-size: 0.8rem;
    color: var(--vz-text-gray);
    text-align: center;
    margin-top: 1.5rem;
}

.vz-login-terms a {
    color: var(--vz-primary-blue);
    text-decoration: none;
}

.vz-login-terms a:hover {
    text-decoration: underline;
}

.vz-login-register {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    text-align: center;
    margin-top: 1rem;
}

.vz-login-register a {
    color: var(--vz-primary-blue);
    text-decoration: none;
    font-weight: 500;
}

.vz-login-register a:hover {
    text-decoration: underline;
}

.vz-login-carousel {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--vz-primary-dark);
}

.carousel-images {
    position: relative;
    height: 500px;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--vz-secondary-blue) 0%, var(--vz-primary-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.carousel-image-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.carousel-image-placeholder span {
    font-size: 1.25rem;
    font-weight: 500;
}

.carousel-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

.carousel-dot {
    width: 32px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dot.active {
    background: white;
    width: 32px;
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.vz-login-footer {
    background: var(--vz-bg-light);
    padding: 1.5rem 0;
    text-align: center;
}

.vz-login-footer p {
    color: var(--vz-text-gray);
    font-size: 0.8rem;
    margin: 0;
    letter-spacing: 1px;
}

/* Login Page Responsive */
@media (max-width: 991px) {
    .vz-login-section {
        padding: 2rem 0;
    }

    .vz-login-carousel {
        margin-top: 2rem;
    }

    .carousel-images {
        height: 350px;
    }
}

@media (max-width: 767px) {
    .vz-login-form-container {
        max-width: 100%;
    }

    .vz-login-title {
        font-size: 1.5rem;
    }

    .carousel-images {
        height: 280px;
    }
}

/* ============================
   Checkout Page Styles
   ============================ */

.vz-checkout-section {
    padding: 3rem 0 5rem;
    min-height: calc(100vh - 70px);
}

.vz-checkout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D1D5DB;
    transition: all 0.3s;
}

.progress-step.active .step-dot {
    background: var(--vz-primary-blue);
}

.step-label {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    white-space: nowrap;
}

.progress-step.active .step-label {
    color: var(--vz-text-dark);
    font-weight: 500;
}

.progress-line {
    flex: 1;
    height: 2px;
    background: #D1D5DB;
    margin: 0 1rem;
    margin-bottom: 1.75rem;
    max-width: 200px;
}

.progress-line.active {
    background: var(--vz-primary-blue);
}

.vz-checkout-content {
    max-width: 800px;
    margin: 0 auto;
}

.vz-checkout-title {
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.75rem;
}

.vz-checkout-subtitle {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    text-align: center;
    margin-bottom: 2rem;
}

.pass-selection-card {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 12px;
    margin-bottom: 2.5rem;
}

.pass-image {
    width: 280px;
    flex-shrink: 0;
}

.pass-image-placeholder {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, var(--vz-secondary-blue) 0%, var(--vz-primary-dark) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pass-image-placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.4);
}

.pass-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pass-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.pass-pricing {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.original-price {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

.original-price s {
    color: var(--vz-text-dark);
}

.early-bird-price {
    font-size: 0.9rem;
    color: var(--vz-primary-blue);
}

.early-bird-price strong {
    font-weight: 600;
}

.pass-description {
    font-size: 0.875rem;
    color: var(--vz-text-gray);
    line-height: 1.6;
    margin: 0;
}

.attendee-section {
    margin-top: 2rem;
}

.attendee-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.attendee-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vz-form-group-checkout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vz-form-label-checkout {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--vz-text-gray);
}

.vz-form-input-checkout {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

.vz-form-input-checkout:focus {
    outline: none;
    border-color: var(--vz-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.vz-form-input-checkout::placeholder {
    color: #B0B0B0;
}

.input-with-avatar {
    position: relative;
}

.input-with-avatar .vz-form-input-checkout {
    padding-right: 3rem;
}

.input-avatar {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vz-primary-blue);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vz-checkout-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-go-back {
    padding: 0.875rem 2.5rem;
    background: white;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--vz-text-dark);
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-go-back:hover {
    background: var(--vz-bg-light);
    border-color: var(--vz-text-dark);
    color: var(--vz-text-dark);
}

.btn-checkout {
    padding: 0.875rem 3rem;
    background: var(--vz-primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-checkout:hover {
    background: #0052CC;
}

/* Checkout Responsive */
@media (max-width: 767px) {
    .vz-checkout-progress {
        padding: 0;
    }

    .progress-line {
        max-width: 60px;
    }

    .step-label {
        font-size: 0.75rem;
    }

    .pass-selection-card {
        flex-direction: column;
    }

    .pass-image {
        width: 100%;
    }

    .vz-checkout-actions {
        flex-direction: column;
    }

    .btn-go-back,
    .btn-checkout {
        width: 100%;
    }
}

/* ============================
   Hero Section - Updated with Background Image
   ============================ */

.vz-hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.vz-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 22, 40, 0.3);
}

/* ============================
   New Pricing Cards (In-Person Passes)
   ============================ */

.vz-pricing-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0A1628 0%, #1E3A5F 100%);
}

.vz-pricing-section .vz-section-title,
.vz-pricing-section .vz-section-subtitle {
    color: white;
}

.vz-pricing-card-new {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    position: relative;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.vz-pricing-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.vz-pricing-card-new.featured {
    border: 2px solid var(--vz-primary-blue);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

.vz-pricing-countdown-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.vz-best-value-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.vz-save-now-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #E8F4FD;
    color: var(--vz-primary-blue);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.vz-pricing-card-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}

.vz-pricing-tier-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 0.25rem;
}

.vz-pricing-tier-subtitle {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.vz-pricing-price-container {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-pricing-currency {
    font-size: 1.25rem;
    font-weight: 600;
    vertical-align: top;
    color: var(--vz-primary-dark);
}

.vz-pricing-amount {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--vz-primary-dark);
}

.vz-pricing-cents {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--vz-primary-dark);
}

.vz-pricing-period {
    display: block;
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin-top: 0.25rem;
}

.vz-pricing-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex-grow: 1;
}

.vz-pricing-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--vz-text-dark);
}

.vz-pricing-features-list li i {
    margin-top: 0.15rem;
    font-size: 0.9rem;
}

.vz-feature-included i {
    color: var(--vz-primary-blue);
}

.vz-feature-excluded {
    color: var(--vz-text-gray) !important;
}

.vz-feature-excluded i {
    color: #D1D5DB !important;
}

.vz-pricing-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vz-qty-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.vz-qty-btn:hover {
    background: var(--vz-bg-light);
    border-color: var(--vz-primary-blue);
}

.vz-qty-value {
    width: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.btn-select {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--vz-primary-blue);
    border-radius: 6px;
    background: white;
    color: var(--vz-primary-blue);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-select:hover {
    background: var(--vz-primary-blue);
    color: white;
}

.vz-btn-select-primary {
    background: var(--vz-primary-blue);
    color: white;
}

.vz-btn-select-primary:hover {
    background: #0052CC;
}

.vz-pricing-credit {
    text-align: center;
    font-size: 0.8rem;
    color: var(--vz-text-gray);
}

.vz-pricing-credit i {
    color: var(--vz-accent-orange);
    margin-right: 0.25rem;
}

.vz-pricing-credit a {
    color: var(--vz-primary-blue);
    text-decoration: none;
}

.vz-pricing-credit a:hover {
    text-decoration: underline;
}

/* ============================
   Virtual Passes - New Layout
   ============================ */

.vz-virtual-passes-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #1E3A5F 0%, #0A1628 100%);
}

.vz-virtual-passes-section .vz-section-title,
.vz-virtual-passes-section .vz-section-subtitle {
    color: white;
}

.vz-virtual-pass-card-new {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
}

.virtual-countdown-badge {
    position: absolute;
    top: -12px;
    left: 1.5rem;
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.vz-virtual-pass-content {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.vz-virtual-pass-info {
    flex: 1;
}

.vz-virtual-pass-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--vz-primary-dark);
}

.vz-virtual-pass-info p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin: 0;
    line-height: 1.5;
}

.vz-virtual-pass-pricing {
    text-align: center;
    min-width: 100px;
}

.virtual-price {
    white-space: nowrap;
}

.virtual-price .vz-price-main {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
}

.virtual-price .vz-price-cents {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vz-primary-dark);
}

.vz-price-label {
    display: block;
    font-size: 0.8rem;
    color: var(--vz-text-gray);
}

.vz-virtual-pass-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vz-qty-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vz-virtual-pass-credit {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vz-border-color);
    text-align: right;
    font-size: 0.8rem;
    color: var(--vz-text-gray);
}

.vz-virtual-pass-credit i {
    color: var(--vz-accent-orange);
    margin-right: 0.25rem;
}

.vz-virtual-pass-credit a {
    color: var(--vz-primary-blue);
    text-decoration: none;
}

.vz-virtual-pass-credit a:hover {
    text-decoration: underline;
}

/* ============================
   Bundle & Save - New Layout
   ============================ */

.vz-bundle-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0A1628 0%, #1E3A5F 100%);
}

.vz-bundle-section .vz-section-title,
.vz-bundle-section .vz-section-subtitle {
    color: white;
}

.vz-bundle-card-new {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
}

.vz-bundle-image {
    width: 300px;
    flex-shrink: 0;
}

.vz-bundle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-bundle-details {
    flex: 1;
    padding: 2rem;
}

.vz-bundle-details h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 0.75rem;
}

.vz-bundle-details > p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.vz-bundle-pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
}

.vz-bundle-prices {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vz-bundle-original {
    font-size: 1.1rem;
    color: var(--vz-text-gray);
    text-decoration: line-through;
}

.vz-bundle-label {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

.vz-bundle-current {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vz-primary-dark);
}

.vz-bundle-current sup {
    font-size: 0.9rem;
}

.vz-bundle-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vz-bundle-credit {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.vz-bundle-credit i {
    color: var(--vz-accent-orange);
    margin-right: 0.25rem;
}

.vz-bundle-credit a {
    color: var(--vz-primary-blue);
    text-decoration: none;
}

.vz-bundle-credit a:hover {
    text-decoration: underline;
}

/* ============================
   Hotel Section - New Layout
   ============================ */

.vz-hotel-section {
    padding: 5rem 0;
    background: var(--vz-primary-dark);
}

.vz-hotel-card-new {
    display: flex;
    gap: 0;
    align-items: stretch;
    background: var(--vz-primary-dark);
    border-radius: 0;
    overflow: hidden;
}

.vz-hotel-image-new {
    flex: 0 0 45%;
}

.vz-hotel-image-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-hotel-info-new {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vz-hotel-info-new h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.vz-hotel-tagline {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.vz-hotel-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.vz-btn-hotel-book {
    display: inline-block;
    background: var(--vz-accent-orange);
    color: var(--vz-primary-dark);
    padding: 1rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    margin: 1.5rem 0;
}

.vz-btn-hotel-book:hover {
    background: #D4943F;
    color: var(--vz-primary-dark);
}

.vz-hotel-address-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.vz-hotel-address-new i {
    color: var(--vz-accent-orange);
}

/* ============================
   Responsive Styles for New Components
   ============================ */

@media (max-width: 991px) {
    .vz-virtual-pass-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .vz-virtual-pass-actions {
        width: 100%;
        justify-content: space-between;
    }

    .vz-bundle-card-new {
        flex-direction: column;
    }

    .vz-bundle-image {
        width: 100%;
        height: 200px;
    }

    .vz-bundle-pricing-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .vz-hotel-card-new {
        flex-direction: column;
    }

    .vz-hotel-image-new {
        flex: none;
        height: 300px;
    }
}

@media (max-width: 767px) {
    .vz-pricing-card-new {
        padding: 1.5rem;
    }

    .vz-pricing-quantity {
        flex-wrap: wrap;
    }

    .btn-select {
        flex: none;
        width: 100%;
    }

    .vz-virtual-pass-pricing {
        width: 100%;
        text-align: left;
    }

    .vz-bundle-prices {
        flex-wrap: wrap;
    }

    .vz-bundle-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .vz-hotel-info-new {
        padding: 2rem;
    }

    .vz-hotel-info-new h3 {
        font-size: 1.5rem;
    }
}

/* ============================
   Dark Navbar Styles
   ============================ */

.vz-navbar-dark {
    background: #0A1628;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.vz-navbar-brand-dark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
}

.vz-logo-icon {
    width: 24px;
    height: 24px;
    color: #0066FF;
}

.vz-nav-link-dark {
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vz-nav-link-dark:hover {
    color: #0066FF;
}

.vz-dropdown-dark {
    position: relative;
}

.vz-dropdown-menu-dark {
    background: #1E3A5F;
    border: none;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.vz-dropdown-menu-dark .vz-dropdown-item {
    color: white;
}

.vz-dropdown-menu-dark .vz-dropdown-item:hover {
    background: #0066FF;
}

.vz-btn-register-blue {
    background: #0066FF;
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
}

.vz-btn-register-blue:hover {
    background: #0052CC;
    color: white;
}

.vz-btn-about-dark {
    background: transparent;
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
}

.vz-btn-about-dark:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ============================
   New Hero Section
   ============================ */

.vz-hero-section-new {
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.vz-hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.7) 0%, rgba(30, 58, 95, 0.5) 100%);
}

.vz-hero-content-new {
    position: relative;
    z-index: 1;
    padding: 3rem 0;
}

.vz-hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vz-hero-logo-icon {
    width: 48px;
    height: 48px;
    color: white;
}

.vz-hero-logo span {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.1em;
}

.vz-hero-summit {
    font-size: 2rem;
    color: white;
    margin-bottom: 0.25rem;
    font-weight: 300;
}

.vz-hero-dates {
    font-size: 2rem;
    color: white;
    margin-bottom: 2rem;
    font-weight: 300;
}

.vz-btn-register-gold {
    display: inline-block;
    background: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);
    color: #0A1628;
    padding: 1rem 3rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.2s;
}

.vz-btn-register-gold:hover {
    background: linear-gradient(135deg, #C4956A 0%, #B4855A 100%);
    color: #0A1628;
}

/* ============================
   Login Page New Styles
   ============================ */

.vz-login-section-new {
    min-height: calc(100vh - 180px);
    padding: 3rem 0;
    display: flex;
    align-items: center;
}

.vz-login-form-container-new {
    max-width: 450px;
}

.vz-login-title-new {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 1.5rem;
}

.vz-login-tabs-new {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-login-tab-new {
    background: none;
    border: none;
    padding: 0.75rem 0;
    margin-right: 2rem;
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.vz-login-tab-new.active {
    color: var(--vz-primary-dark);
    border-bottom-color: var(--vz-primary-dark);
    font-weight: 600;
}

.vz-login-description-new {
    color: var(--vz-text-gray);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.vz-login-form-new {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vz-form-group-new {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vz-form-label-new {
    font-size: 0.8rem;
    color: var(--vz-text-gray);
}

.vz-form-input-new {
    padding: 0.875rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.vz-form-input-new:focus {
    outline: none;
    border-color: var(--vz-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.verification-group-new {
    display: flex;
    gap: 0.5rem;
}

.verification-group-new .vz-form-input-new {
    flex: 1;
}

.btn-send-code-new {
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    background: white;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-send-code-new:hover {
    background: var(--vz-bg-light);
}

.btn-login-submit-new {
    width: 100%;
    padding: 1rem;
    background: var(--vz-primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.btn-login-submit-new:hover {
    background: #0052CC;
}

.vz-login-terms-new {
    font-size: 0.8rem;
    color: var(--vz-text-gray);
    margin-top: 1rem;
}

.vz-login-terms-new a {
    color: var(--vz-primary-blue);
    text-decoration: underline;
}

.vz-login-register-new {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin-top: 1rem;
}

.vz-login-register-new a {
    color: var(--vz-primary-blue);
    text-decoration: underline;
}

.vz-login-carousel-new {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 500px;
}

.carousel-images-new {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.carousel-slide-new.active {
    opacity: 1;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-dots-new {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

.carousel-dot-new {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.carousel-dot-new.active {
    background: white;
}

.vz-login-footer-new {
    background: white;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--vz-text-gray);
    font-size: 0.85rem;
}

/* ============================
   Checkout Progress Bar
   ============================ */

.vz-checkout-progress-bar {
    background: white;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--vz-border-color);
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E5E7EB;
    border: 3px solid #E5E7EB;
}

.progress-step.active .step-dot,
.progress-step.completed .step-dot {
    background: var(--vz-primary-blue);
    border-color: var(--vz-primary-blue);
}

.step-label {
    font-size: 0.8rem;
    color: var(--vz-text-gray);
    white-space: nowrap;
}

.progress-step.active .step-label {
    color: var(--vz-primary-dark);
    font-weight: 600;
}

.progress-line {
    flex: 1;
    height: 2px;
    background: #E5E7EB;
    margin: 0 1rem;
    margin-bottom: 1.5rem;
}

.progress-line.active {
    background: var(--vz-primary-blue);
}

/* ============================
   Checkout Content Section
   ============================ */

.vz-checkout-content-section {
    padding: 3rem 0;
    background: #F8FAFC;
    min-height: calc(100vh - 350px);
}

.vz-checkout-main-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    text-align: center;
    margin-bottom: 0.5rem;
}

.vz-checkout-main-subtitle {
    font-size: 1rem;
    color: var(--vz-text-gray);
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Experience Cards */
.experience-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.experience-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
}

.experience-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.experience-card.selected {
    border-color: var(--vz-primary-blue);
}

.experience-image {
    height: 180px;
    overflow: hidden;
}

.experience-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.experience-info {
    padding: 1.5rem;
}

.experience-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 0.75rem;
}

.experience-info p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    line-height: 1.5;
    margin-bottom: 1rem;
    min-height: 60px;
}

.experience-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.experience-price .vz-price-label {
    font-size: 0.8rem;
    color: var(--vz-text-gray);
}

.experience-price .vz-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
}

.experience-price .vz-price-value.savings {
    color: var(--vz-primary-blue);
}

.experience-price .savings-badge {
    background: #E8F4FD;
    color: var(--vz-primary-blue);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.btn-experience {
    width: 100%;
    padding: 0.875rem;
    background: var(--vz-primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-experience:hover {
    background: #0052CC;
}

.btn-experience.selected {
    background: #0052CC;
}

/* ============================
   Checkout Footer Bar
   ============================ */

.vz-checkout-footer-bar {
    background: white;
    padding: 1.25rem 0;
    border-top: 1px solid var(--vz-border-color);
    position: sticky;
    bottom: 0;
}

.vz-footer-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vz-footer-bar-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--vz-primary-dark);
}

.vz-footer-bar-info .selected-passes {
    color: var(--vz-primary-blue);
    font-weight: 600;
}

.vz-footer-bar-contact {
    font-size: 0.8rem !important;
    color: var(--vz-text-gray) !important;
    margin-top: 0.25rem !important;
}

.vz-footer-bar-contact a {
    color: var(--vz-primary-blue);
}

.vz-footer-bar-actions {
    display: flex;
    gap: 1rem;
}

.btn-go-back-new {
    padding: 0.875rem 2rem;
    background: white;
    color: var(--vz-primary-dark);
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-go-back-new:hover {
    background: var(--vz-bg-light);
    color: var(--vz-primary-dark);
}

.btn-next-step {
    padding: 0.875rem 2rem;
    background: var(--vz-primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-next-step:hover {
    background: #0052CC;
}

.btn-next-step:disabled {
    background: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* ============================
   Checkout Bottom Footer
   ============================ */

.vz-checkout-bottom-footer {
    background: #0A1628;
    padding: 1.5rem 0;
}

.bottom-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vz-footer-links-row {
    display: flex;
    gap: 2rem;
}

.vz-footer-links-row a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
}

.vz-footer-links-row a:hover {
    color: white;
}

.vz-footer-copyright-new {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0;
}

/* ============================
   Checkout Passes Section
   ============================ */

.vz-checkout-passes-section {
    padding: 3rem 0;
    background: #F8FAFC;
    min-height: calc(100vh - 350px);
}

.passes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.pass-card-checkout {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--vz-border-color);
    position: relative;
}

.offer-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.vz-best-value-badge-checkout {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.pass-card-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pass-tier-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 0.25rem;
}

.pass-tier-subtitle {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.pass-price-section {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pass-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--vz-primary-dark);
}

.pass-price sup {
    font-size: 1rem;
}

.pass-price-label {
    display: block;
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin-top: 0.25rem;
}

.vz-price-underline {
    width: 40px;
    height: 3px;
    background: var(--vz-primary-blue);
    margin: 0.75rem auto 0;
}

.pass-features-checkout {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.pass-features-checkout li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--vz-text-dark);
}

.pass-features-checkout li i {
    margin-top: 0.15rem;
    font-size: 0.9rem;
}

.pass-features-checkout li.included i {
    color: var(--vz-primary-blue);
}

.pass-features-checkout li.excluded {
    color: var(--vz-text-gray);
}

.pass-features-checkout li.excluded i {
    color: #EF4444;
}

.pass-quantity-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quantity-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vz-primary-dark);
}

.quantity-selector-blue {
    display: flex;
    align-items: center;
    background: var(--vz-primary-blue);
    border-radius: 6px;
    overflow: hidden;
}

.vz-qty-btn-blue {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.vz-qty-btn-blue:hover {
    background: rgba(255, 255, 255, 0.1);
}

.vz-qty-value-blue {
    width: 50px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.pass-credit-checkout {
    text-align: center;
    font-size: 0.8rem;
    color: var(--vz-text-gray);
    padding-top: 1rem;
    border-top: 1px solid var(--vz-border-color);
}

.pass-credit-checkout i {
    color: var(--vz-accent-orange);
    margin-right: 0.25rem;
}

.pass-credit-checkout a {
    color: var(--vz-primary-blue);
    text-decoration: underline;
}

/* ============================
   Checkout Bundle Section
   ============================ */

.vz-checkout-bundle-section {
    padding: 3rem 0;
    background: #F8FAFC;
    min-height: calc(100vh - 350px);
}

.vz-bundle-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--vz-border-color);
    cursor: pointer;
    margin-bottom: 1rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.2s;
}

.vz-bundle-option:hover {
    border-color: var(--vz-primary-blue);
}

.vz-bundle-option.selected {
    border-color: var(--vz-primary-blue);
}

.vz-bundle-option-radio {
    flex-shrink: 0;
}

.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--vz-border-color);
    background: white;
    position: relative;
}

.radio-circle.checked {
    border-color: var(--vz-primary-blue);
}

.radio-circle.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vz-primary-blue);
}

.vz-bundle-option-text {
    font-size: 0.95rem;
    color: var(--vz-primary-dark);
}

.vz-bundle-card-checkout {
    display: flex;
    gap: 2rem;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--vz-border-color);
    margin-bottom: 1rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.5;
    transition: all 0.2s;
}

.vz-bundle-card-checkout.active {
    opacity: 1;
    border-color: var(--vz-primary-blue);
}

.vz-bundle-card-image {
    width: 350px;
    flex-shrink: 0;
}

.vz-bundle-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-bundle-card-content {
    flex: 1;
    padding: 2rem;
}

.vz-bundle-card-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 0.75rem;
}

.vz-bundle-card-content > p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.vz-bundle-pricing-checkout {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.vz-bundle-original-checkout {
    font-size: 1rem;
    color: var(--vz-text-gray);
    text-decoration: line-through;
}

.vz-bundle-now {
    font-size: 0.9rem;
    color: var(--vz-primary-blue);
}

.vz-bundle-current-checkout {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vz-primary-blue);
}

.vz-bundle-current-checkout sup {
    font-size: 0.9rem;
}

.vz-bundle-quantity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.vz-bundle-credit-checkout {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.vz-bundle-credit-checkout i {
    color: var(--vz-accent-orange);
    margin-right: 0.25rem;
}

.vz-bundle-credit-checkout a {
    color: var(--vz-primary-blue);
    text-decoration: underline;
}

/* ============================
   Checkout Payment Section
   ============================ */

.vz-checkout-payment-section {
    padding: 3rem 0;
    background: #F8FAFC;
    min-height: calc(100vh - 350px);
}

.payment-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.payment-forms {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.payment-section-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--vz-border-color);
}

.payment-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 1rem;
}

.payment-method-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    cursor: pointer;
}

.payment-method-option.selected {
    border-color: var(--vz-primary-blue);
}

.payment-method-option i {
    margin-left: auto;
    color: var(--vz-text-gray);
}

.card-logos {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-logos img {
    height: 24px;
    object-fit: contain;
}

.vz-form-group-payment {
    margin-bottom: 1rem;
}

.vz-form-label-payment {
    display: block;
    font-size: 0.8rem;
    color: var(--vz-text-gray);
    margin-bottom: 0.5rem;
}

.vz-form-input-payment {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.vz-form-input-payment:focus {
    outline: none;
    border-color: var(--vz-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.vz-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.vz-form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.order-summary-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--vz-border-color);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.order-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 1.5rem;
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vz-border-color);
    margin-bottom: 1rem;
}

.order-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

.order-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
}

/* ============================
   Confirmation Section
   ============================ */

.confirmation-section {
    padding: 3rem 0;
    background: #F8FAFC;
}

.confirmation-header {
    text-align: center;
    margin-bottom: 2rem;
}

.success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
}

.success-icon i {
    font-size: 64px;
    color: var(--vz-primary-blue);
}

.confirmation-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 1rem;
}

.confirmation-subtitle {
    font-size: 0.95rem;
    color: var(--vz-text-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.attendee-info-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FEF3C7;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.banner-highlight {
    font-weight: 700;
    color: #92400E;
    display: block;
    margin-bottom: 0.25rem;
}

.banner-content p {
    margin: 0;
    font-size: 0.85rem;
    color: #92400E;
}

.btn-complete-info {
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.confirmation-details {
    display: flex;
    gap: 2rem;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.confirmation-order-info {
    flex: 1;
}

.vz-logo-small {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vz-logo-small svg {
    width: 24px;
    height: 24px;
    color: var(--vz-primary-blue);
}

.vz-logo-small span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--vz-primary-dark);
}

.order-number {
    color: var(--vz-primary-dark);
    margin-bottom: 0.5rem;
}

.order-number a {
    color: var(--vz-primary-blue);
}

.order-email {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin-bottom: 0.5rem;
}

.order-date {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.confirmation-order-summary {
    width: 300px;
    background: #F8FAFC;
    border-radius: 8px;
    padding: 1.5rem;
}

.confirmation-order-summary h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.attendee-forms-section {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid var(--vz-border-color);
}

.attendee-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 0.5rem;
}

.attendee-section-subtitle {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin-bottom: 2rem;
}

.attendee-type-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.attendee-type-header img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.attendee-type-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vz-primary-dark);
    margin-bottom: 0.5rem;
}

.attendee-type-info p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.attendee-form-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--vz-border-color);
    margin-bottom: 1rem;
}

.attendee-form-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vz-primary-dark);
    margin-bottom: 1rem;
}

.vz-form-group-attendee {
    margin-bottom: 1rem;
}

.vz-form-group-attendee label {
    display: block;
    font-size: 0.8rem;
    color: var(--vz-text-gray);
    margin-bottom: 0.5rem;
}

.vz-form-group-attendee input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    font-size: 0.9rem;
}

.vz-form-group-attendee input:focus {
    outline: none;
    border-color: var(--vz-primary-blue);
}

.btn-submit-attendees {
    display: block;
    width: 200px;
    margin: 2rem auto 0;
    padding: 1rem;
    background: var(--vz-primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

/* ============================
   Responsive Styles for Checkout
   ============================ */

@media (max-width: 991px) {
    .experience-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .passes-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .payment-layout {
        grid-template-columns: 1fr;
    }

    .order-summary-card {
        position: static;
    }

    .vz-bundle-card-checkout {
        flex-direction: column;
    }

    .vz-bundle-card-image {
        width: 100%;
        height: 200px;
    }

    .confirmation-details {
        flex-direction: column;
    }

    .confirmation-order-summary {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .vz-footer-bar-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .vz-footer-bar-actions {
        width: 100%;
        justify-content: center;
    }

    .bottom-footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .attendee-info-banner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .vz-form-row,
    .vz-form-row-3 {
        grid-template-columns: 1fr;
    }

    .vz-bundle-pricing-checkout {
        flex-direction: column;
        align-items: flex-start;
    }

    .vz-bundle-quantity {
        margin-left: 0;
        margin-top: 1rem;
    }

    .vz-hero-logo span {
        font-size: 2rem;
    }

    .vz-hero-summit,
    .vz-hero-dates {
        font-size: 1.5rem;
    }

    .vz-login-carousel-new {
        display: none;
    }
}

/* ============================
   About Page Styles
   ============================ */

.about-hero-section {
    position: relative;
    min-height: 500px;
    background: linear-gradient(135deg, var(--vz-primary-dark) 0%, #1a2d47 100%);
    display: flex;
    align-items: center;
    padding: 6rem 0;
    overflow: hidden;
}

.about-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1200&h=600&fit=crop') center/cover no-repeat;
    opacity: 0.15;
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(26, 45, 71, 0.9) 100%);
}

.about-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    color: white;
}

.about-hero-date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.about-hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.about-hero-title sup {
    font-size: 1rem;
    vertical-align: super;
}

.about-hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.about-hero-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.about-unlock-section {
    background: var(--vz-bg-light);
    padding: 4rem 0;
    text-align: center;
}

.about-unlock-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--vz-text-dark);
    margin-bottom: 1rem;
}

.about-unlock-content p {
    color: var(--vz-text-gray);
    max-width: 700px;
    margin: 0 auto;
}

.about-why-section {
    padding: 5rem 0;
    background: white;
}

.about-why-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--vz-text-dark);
}

.about-why-intro {
    color: var(--vz-text-gray);
    margin-bottom: 2rem;
}

.about-why-points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-why-point {
    padding: 1rem;
    background: var(--vz-bg-light);
    border-radius: 8px;
    border-left: 4px solid var(--vz-primary-blue);
}

.about-why-point strong {
    color: var(--vz-primary-blue);
    display: block;
    margin-bottom: 0.25rem;
}

.about-why-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-learn-section {
    padding: 5rem 0;
    background: var(--vz-bg-light);
}

.learn-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.learn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.learn-card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--vz-primary-blue), #3b82f6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.learn-card-icon i {
    font-size: 1.5rem;
    color: white;
}

.learn-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--vz-text-dark);
}

.learn-card p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

.about-exclusive-section {
    padding: 5rem 0;
    background: white;
}

.exclusive-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: var(--vz-primary-dark);
    border-radius: 16px;
    overflow: hidden;
}

.exclusive-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exclusive-content {
    padding: 3rem;
    color: white;
}

.exclusive-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.exclusive-list {
    list-style: none;
    padding: 0;
}

.exclusive-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.exclusive-list li i {
    color: var(--vz-primary-blue);
    font-size: 1.1rem;
}

.about-who-section {
    padding: 5rem 0;
    background: var(--vz-bg-light);
}

.who-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.who-tab {
    padding: 0.75rem 2rem;
    background: white;
    border: 2px solid var(--vz-border-color);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.who-tab.active {
    background: var(--vz-primary-blue);
    border-color: var(--vz-primary-blue);
    color: white;
}

.who-content {
    max-width: 800px;
    margin: 0 auto;
}

.who-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.who-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.who-item i {
    font-size: 1.25rem;
    color: var(--vz-primary-blue);
}

/* ============================
   Speakers Page Styles
   ============================ */

.speakers-hero-section {
    position: relative;
    min-height: 300px;
    background: linear-gradient(135deg, var(--vz-primary-dark) 0%, #1a2d47 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.speakers-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1200&h=400&fit=crop') center/cover no-repeat;
    opacity: 0.15;
}

.speakers-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.9) 0%, rgba(26, 45, 71, 0.85) 100%);
}

.speakers-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.speakers-hero-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

.speakers-filter-section {
    padding: 2rem 0;
    background: white;
    border-bottom: 1px solid var(--vz-border-color);
}

.speakers-filter-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.filter-tab {
    padding: 0.75rem 2rem;
    background: var(--vz-bg-light);
    border: 2px solid var(--vz-border-color);
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-tab.active {
    background: var(--vz-primary-blue);
    border-color: var(--vz-primary-blue);
    color: white;
}

.speakers-day-section {
    padding: 3rem 0;
    background: var(--vz-bg-light);
}

.speakers-day-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2rem;
    color: var(--vz-text-dark);
}

.vz-speaker-card-new {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.vz-speaker-card-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.vz-speaker-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 1;
}

.vz-speaker-badge.day2 {
    background: #7c3aed;
}

.vz-speaker-image-new {
    height: 200px;
    background: var(--vz-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vz-speaker-image-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-speaker-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

.vz-speaker-placeholder i {
    font-size: 4rem;
    color: var(--vz-text-light);
}

.vz-speaker-info-new {
    padding: 1.5rem;
}

.vz-speaker-info-new h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--vz-text-dark);
}

.vz-speaker-title {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin-bottom: 0.75rem;
}

.vz-speaker-bio-preview {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.vz-speaker-view-link {
    color: var(--vz-primary-blue);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vz-speaker-view-link:hover {
    text-decoration: underline;
}

.speakers-actions-section {
    padding: 3rem 0;
    background: white;
}

.speakers-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* ============================
   Speaker Detail Page Styles
   ============================ */

.vz-speaker-detail-hero {
    position: relative;
    min-height: 200px;
    background: linear-gradient(135deg, var(--vz-primary-dark) 0%, #1a2d47 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.vz-speaker-detail-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1200&h=300&fit=crop') center/cover no-repeat;
    opacity: 0.15;
}

.vz-speaker-detail-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.9) 0%, rgba(26, 45, 71, 0.85) 100%);
}

.vz-speaker-detail-hero h1 {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-align: center;
}

.vz-speaker-breadcrumb {
    padding: 1rem 0;
    background: var(--vz-bg-light);
    border-bottom: 1px solid var(--vz-border-color);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--vz-primary-blue);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    color: var(--vz-text-gray);
}

.vz-speaker-detail-section {
    padding: 3rem 0;
    background: white;
}

.vz-speaker-detail-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 3rem;
}

.vz-speaker-detail-image-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 2rem;
}

.vz-speaker-detail-image {
    height: 350px;
    background: var(--vz-bg-light);
}

.vz-speaker-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-speaker-placeholder-large {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

.vz-speaker-placeholder-large i {
    font-size: 6rem;
    color: var(--vz-text-light);
}

.vz-speaker-detail-cta {
    padding: 1.5rem;
    background: #fffbeb;
    border-top: 3px solid var(--vz-accent-orange);
}

.vz-speaker-detail-cta p {
    font-size: 0.9rem;
    color: var(--vz-text-dark);
    margin-bottom: 1rem;
}

.vz-speaker-detail-info {
    padding: 1rem 0;
}

.vz-speaker-detail-header h2 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--vz-text-gray);
    margin-bottom: 0.25rem;
}

.vz-speaker-session-info {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vz-primary-blue);
    margin-bottom: 2rem;
}

.vz-speaker-detail-name h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vz-text-dark);
    margin-bottom: 0.25rem;
}

.vz-speaker-detail-title {
    color: var(--vz-text-gray);
    margin-bottom: 1.5rem;
}

.vz-speaker-detail-bio blockquote {
    padding: 1.5rem;
    background: var(--vz-bg-light);
    border-left: 4px solid var(--vz-primary-blue);
    border-radius: 0 8px 8px 0;
    color: var(--vz-text-gray);
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.vz-speaker-topics {
    margin-top: 2rem;
}

.topics-intro {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin-bottom: 1rem;
}

.topic-item {
    margin-bottom: 1.5rem;
}

.topic-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vz-text-dark);
    margin-bottom: 0.75rem;
}

.topic-item p {
    color: var(--vz-text-gray);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.vz-speaker-navigation {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vz-border-color);
}

/* ============================
   Account Layout & Pages Styles
   ============================ */

.navbar-light {
    background: var(--vz-primary-dark);
    padding: 1rem 0;
}

.navbar-brand-light {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

.navbar-brand-light small {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.7;
    display: block;
    margin-top: -0.25rem;
}

.nav-link-light {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.btn-about-light {
    padding: 0.5rem 1.25rem;
    border: 2px solid white;
    border-radius: 25px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-about-light:hover {
    background: white;
    color: var(--vz-primary-dark);
}

.vz-account-header {
    background: white;
    padding: 2rem 0;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-account-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.vz-account-header p {
    color: var(--vz-text-gray);
}

.vz-account-content {
    background: var(--vz-bg-light);
    padding: 2rem 0;
    min-height: calc(100vh - 200px);
}

.vz-account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
}

.vz-account-sidebar {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.vz-account-user-card {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--vz-border-color);
    margin-bottom: 1rem;
}

.vz-account-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--vz-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    overflow: hidden;
}

.vz-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-account-avatar i {
    font-size: 2.5rem;
    color: var(--vz-text-light);
}

.vz-account-user-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vz-account-user-email {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.vz-account-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vz-account-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--vz-text-dark);
    font-weight: 500;
    transition: all 0.2s;
}

.vz-account-nav-item:hover {
    background: var(--vz-bg-light);
}

.vz-account-nav-item.active {
    background: var(--vz-primary-blue);
    color: white;
}

.vz-account-nav-item i {
    font-size: 1.1rem;
    width: 20px;
}

.vz-account-nav-divider {
    height: 1px;
    background: var(--vz-border-color);
    margin: 1rem 0;
}

.vz-account-signout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: var(--vz-text-gray);
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.vz-account-signout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.vz-account-main {
    min-width: 0;
}

.vz-account-section {
    max-width: 800px;
}

.vz-account-section-header {
    margin-bottom: 1.5rem;
}

.vz-account-section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.vz-account-section-header p {
    color: var(--vz-text-gray);
}

.vz-account-form-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.vz-account-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.vz-account-form-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.vz-account-form-header p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin-top: 0.25rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-grid .full-width {
    grid-column: span 2;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vz-border-color);
}

.form-message {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.form-message.success {
    background: #ecfdf5;
    color: #059669;
}

.form-message.error {
    background: #fef2f2;
    color: #dc2626;
}

/* Buttons */
.vz-btn-outline-dark {
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid var(--vz-border-color);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.vz-btn-outline-dark:hover {
    border-color: var(--vz-text-dark);
    background: var(--vz-bg-light);
}

.btn-outline-danger {
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid #dc2626;
    border-radius: 8px;
    font-weight: 500;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-outline-danger:hover {
    background: #dc2626;
    color: white;
}

.btn-link {
    background: none;
    border: none;
    color: var(--vz-primary-blue);
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-link-primary {
    background: none;
    border: none;
    color: var(--vz-primary-blue);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-link-primary:hover {
    text-decoration: underline;
}

.btn-link-danger {
    background: none;
    border: none;
    color: #dc2626;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem;
}

.btn-link-danger:hover {
    text-decoration: underline;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-full {
    width: 100%;
}

/* Tickets Page */
.ticket-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.ticket-header {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--vz-border-color);
    margin-bottom: 1.5rem;
}

.ticket-image {
    width: 200px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.ticket-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ticket-info p {
    color: var(--vz-text-gray);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.ticket-actions-header {
    display: flex;
    gap: 1rem;
}

.attendee-form-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--vz-border-color);
}

.attendee-form-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Billing Page */
.payment-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-card-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
}

.payment-card-item.default {
    border-color: var(--vz-primary-blue);
    background: #f0f7ff;
}

.card-brand-icon {
    width: 48px;
    height: 32px;
    background: var(--vz-bg-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-brand-icon i {
    font-size: 1.5rem;
    color: var(--vz-text-gray);
}

.card-info {
    flex: 1;
}

.card-number {
    font-weight: 600;
    display: block;
}

.card-expiry {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.default-badge {
    background: var(--vz-primary-blue);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.addresses-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.address-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
}

.address-item.default {
    border-color: var(--vz-primary-blue);
    background: #f0f7ff;
}

.address-content {
    flex: 1;
}

.address-content strong {
    display: block;
    margin-bottom: 0.25rem;
}

.address-content p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.address-actions {
    display: flex;
    gap: 0.5rem;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
}

.order-info {
    flex: 1;
}

.order-number {
    font-weight: 600;
    display: block;
}

.order-date {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.order-details {
    text-align: right;
}

.order-items {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    display: block;
}

.order-total {
    font-weight: 600;
}

.order-status {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.order-status.completed {
    background: #ecfdf5;
    color: #059669;
}

.order-status.pending {
    background: #fffbeb;
    color: #d97706;
}

/* Notifications Page */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--vz-bg-light);
}

.notification-item.unread {
    background: #f0f7ff;
    border-left: 4px solid var(--vz-primary-blue);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.info {
    background: #dbeafe;
    color: var(--vz-primary-blue);
}

.notification-icon.success {
    background: #d1fae5;
    color: #059669;
}

.notification-icon.warning {
    background: #fef3c7;
    color: #d97706;
}

.notification-content {
    flex: 1;
}

.notification-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.notification-content p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    margin-bottom: 0.25rem;
}

.notification-time {
    font-size: 0.8rem;
    color: var(--vz-text-light);
}

.notification-preferences,
.preference-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--vz-bg-light);
    border-radius: 8px;
}

.preference-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.preference-info p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--vz-primary-blue);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* Privacy Page */
.security-option {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--vz-bg-light);
    border-radius: 8px;
}

.security-option-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.security-option-info p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

.two-factor-setup {
    padding: 1rem;
    background: #ecfdf5;
    border-radius: 8px;
    margin-top: 1rem;
}

.setup-instruction {
    font-size: 0.9rem;
    color: #059669;
    margin-bottom: 0.5rem;
}

.vz-login-activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
}

.activity-icon {
    width: 40px;
    height: 40px;
    background: var(--vz-bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon i {
    font-size: 1.25rem;
    color: var(--vz-text-gray);
}

.activity-icon .text-success {
    color: var(--vz-success-green);
}

.activity-info {
    flex: 1;
}

.activity-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.activity-info p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.activity-time {
    font-size: 0.8rem;
    color: var(--vz-text-light);
}

.privacy-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.privacy-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--vz-bg-light);
    border-radius: 8px;
}

.privacy-option.danger {
    background: #fef2f2;
}

.privacy-option-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.privacy-option-info p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

/* Settings Page */
.vz-form-select-new {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
}

.vz-form-select-new:focus {
    outline: none;
    border-color: var(--vz-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.vz-form-select-small {
    padding: 0.5rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
}

.connected-accounts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.connected-account {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 8px;
}

.vz-account-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vz-account-icon.google {
    background: #fef2f2;
    color: #dc2626;
}

.vz-account-icon.apple {
    background: #f3f4f6;
    color: #1f2937;
}

.vz-account-icon.ylift {
    background: #f0f7ff;
    color: var(--vz-primary-blue);
}

.vz-account-icon i {
    font-size: 1.5rem;
}

.vz-account-info {
    flex: 1;
}

.vz-account-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vz-account-info p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    margin: 0;
}

.vz-account-info p.connected {
    color: var(--vz-success-green);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

/* ============================
   Livestream Page Styles
   ============================ */

.livestream-header {
    background: linear-gradient(135deg, var(--vz-primary-dark) 0%, #1a2d47 100%);
    padding: 3rem 0;
    text-align: center;
}

.livestream-header-content {
    color: white;
}

.livestream-icon {
    width: 60px;
    height: 60px;
    background: var(--vz-primary-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.livestream-icon i {
    font-size: 1.75rem;
    color: white;
}

.livestream-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.livestream-header h1 sup {
    font-size: 0.75rem;
    vertical-align: super;
}

.livestream-header p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto;
}

.livestream-content {
    background: white;
    padding: 2rem 0 4rem;
}

.livestream-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
}

.livestream-main {
    min-width: 0;
}

.video-player-container {
    margin-bottom: 1.5rem;
}

.video-player {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: black;
    aspect-ratio: 16/9;
}

.video-player video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.video-overlay i {
    font-size: 4rem;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s;
}

.video-overlay i:hover {
    opacity: 1;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.controls-left,
.controls-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    padding: 0.5rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.control-btn:hover {
    opacity: 1;
}

.live-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #dc2626;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.time-display {
    color: white;
    font-size: 0.85rem;
    margin-left: 1rem;
}

.vz-session-info h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.current-speaker {
    margin-bottom: 1.5rem;
}

.vz-speaker-label {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
    text-decoration: underline;
    display: block;
    margin-bottom: 0.75rem;
}

.vz-speaker-info-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vz-speaker-avatar-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--vz-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vz-speaker-avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vz-speaker-avatar-small i {
    font-size: 1.5rem;
    color: var(--vz-text-light);
}

.vz-speaker-info-inline strong {
    display: block;
    font-size: 0.95rem;
}

.vz-speaker-info-inline span {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.vz-session-description {
    padding: 1.5rem;
    background: var(--vz-bg-light);
    border-radius: 8px;
}

.vz-session-description h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.vz-session-description p {
    font-size: 0.9rem;
    color: var(--vz-text-gray);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.livestream-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vz-sidebar-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.vz-sidebar-card.special-card {
    background: var(--vz-primary-dark);
    color: white;
}

.special-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.special-card p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.chat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vz-border-color);
}

.chat-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vz-border-color);
    margin-bottom: 1rem;
}

.chat-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.chat-header p {
    font-size: 0.85rem;
    color: var(--vz-text-gray);
}

.chat-messages {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.5rem;
}

.chat-message {
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-message.highlighted {
    background: #fffbeb;
    padding: 0.75rem;
    border-radius: 8px;
    border-left: 3px solid var(--vz-accent-orange);
}

.chat-user {
    font-weight: 600;
    color: var(--vz-primary-blue);
    margin-right: 0.5rem;
}

.chat-user.doctor {
    color: #7c3aed;
}

.chat-text {
    color: var(--vz-text-dark);
}

.chat-link {
    color: var(--vz-primary-blue);
    text-decoration: underline;
}

.chat-input {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vz-border-color);
}

.chat-input input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--vz-border-color);
    border-radius: 25px;
    font-size: 0.9rem;
}

.chat-input input:focus {
    outline: none;
    border-color: var(--vz-primary-blue);
}

.btn-send {
    width: 40px;
    height: 40px;
    background: var(--vz-primary-blue);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-send:hover {
    background: #0052cc;
}

.btn-emoji {
    width: 40px;
    height: 40px;
    background: var(--vz-bg-light);
    border: none;
    border-radius: 50%;
    color: var(--vz-text-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty & Loading States */
.loading-state,
.empty-state,
.empty-state-small {
    text-align: center;
    padding: 3rem;
}

.loading-state i,
.empty-state i,
.empty-state-small i {
    font-size: 3rem;
    color: var(--vz-text-light);
    margin-bottom: 1rem;
    display: block;
}

.loading-state p,
.empty-state p,
.empty-state-small p {
    color: var(--vz-text-gray);
}

.empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.empty-state-small {
    padding: 2rem;
}

.empty-state-small i {
    font-size: 2rem;
}

.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Modal */
.vz-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.vz-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.vz-modal-content.barcode-modal {
    max-width: 400px;
}

.vz-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.vz-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--vz-text-gray);
    cursor: pointer;
}

.vz-modal-body {
    padding: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.barcode-container {
    text-align: center;
    padding: 2rem;
    background: var(--vz-bg-light);
    border-radius: 8px;
}

.barcode-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.barcode-placeholder i {
    font-size: 4rem;
    color: var(--vz-text-dark);
}

.barcode-placeholder p {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.barcode-instructions {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--vz-text-gray);
}

.vz-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.vz-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.vz-form-checkbox input {
    width: 18px;
    height: 18px;
}

.vz-form-checkbox label {
    font-size: 0.9rem;
    color: var(--vz-text-dark);
}

.mt-4 {
    margin-top: 1rem;
}

/* Responsive for new pages */
@media (max-width: 1024px) {
    .livestream-grid {
        grid-template-columns: 1fr;
    }

    .livestream-sidebar {
        order: -1;
    }

    .chat-messages {
        max-height: 250px;
    }

    .vz-speaker-detail-grid {
        grid-template-columns: 1fr;
    }

    .vz-speaker-detail-image-card {
        position: static;
        max-width: 400px;
        margin: 0 auto 2rem;
    }

    .exclusive-card {
        grid-template-columns: 1fr;
    }

    .exclusive-image {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .vz-account-layout {
        grid-template-columns: 1fr;
    }

    .vz-account-sidebar {
        position: static;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid .full-width {
        grid-column: span 1;
    }

    .ticket-header {
        flex-direction: column;
    }

    .ticket-image {
        width: 100%;
    }

    .who-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-title {
        font-size: 2rem;
    }

    .speakers-hero-content h1 {
        font-size: 1.75rem;
    }

    .vz-speaker-navigation {
        flex-direction: column;
    }

    .vz-form-row {
        grid-template-columns: 1fr;
    }
}