/* ============================================
   INTERNATIONAL TVET CONFERENCE — STYLES
   Identity: Skills That Work | KICC, Nairobi 2026
============================================ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
    /* TVET Brand Colors (Identity 2) */
    --tvet-blue:        #1a5f9a;   /* Technology */
    --tvet-blue-dark:   #0f3d6b;
    --tvet-blue-deeper: #082a4d;
    --tvet-red:         #c41e3a;   /* Industrial Power */
    --tvet-red-dark:    #96162c;
    --tvet-green:       #1a7a3a;   /* Sustainable Skills */
    --tvet-green-dark:  #105c2a;
    --tvet-yellow:      #f4a400;   /* Innovation */
    --tvet-yellow-dark: #c28300;

    /* Semantic mapping */
    --primary:          var(--tvet-blue);
    --primary-dark:     var(--tvet-blue-dark);
    --primary-darker:   var(--tvet-blue-deeper);
    --accent:           var(--tvet-red);
    --accent-alt:       var(--tvet-green);
    --highlight:        var(--tvet-yellow);

    /* Neutrals */
    --white:            #ffffff;
    --off-white:        #f7f8fa;
    --light-gray:       #eef0f4;
    --mid-gray:         #d1d5db;
    --text-dark:        #0d1b2a;
    --text-body:        #374151;
    --text-muted:       #6b7280;
    --text-light:       #ffffff;

    /* Border */
    --border:           rgba(0,0,0,0.10);
    --border-light:     rgba(255,255,255,0.15);

    /* Typography */
    --font-heading:     'Oswald', sans-serif;
    --font-body:        'Source Sans 3', sans-serif;

    /* Effects */
    --shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:        0 8px 24px rgba(0,0,0,0.12);
    --shadow-lg:        0 24px 48px rgba(0,0,0,0.18);
    --shadow-blue:      0 8px 32px rgba(26,95,154,0.25);
    --transition:       all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --navbar-h:         72px;
    --radius:           8px;
    --radius-lg:        14px;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-body);
    background: var(--white);
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-dark);
    letter-spacing: 0.01em;
}
a { text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.text-primary   { color: var(--primary) !important; }
.text-accent    { color: var(--accent) !important; }
.text-highlight { color: var(--highlight) !important; }
.bg-primary-dark{ background-color: var(--primary-dark) !important; }
.text-light-muted{ color: rgba(255,255,255,0.72) !important; }

/* CMS content */
.cms-content { line-height: 1.8; }
.cms-content p { margin-bottom: 1rem; }
.cms-content h3 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }

/* ============================================
   NAVIGATION — Light Mode
============================================ */
.navbar {
    background: var(--white);
    padding: 0;
    height: var(--navbar-h);
    transition: var(--transition);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    z-index: 1050;
}

.navbar.scrolled {
    box-shadow: var(--shadow-md);
}

.navbar .container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Brand */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 2rem;
}
.navbar-brand img { height: 44px; width: auto; }
.navbar-brand span {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Nav links */
.navbar-nav { gap: 0; }

.navbar-nav .nav-link {
    color: var(--text-dark) !important;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    padding: 0 18px !important;
    height: var(--navbar-h);
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transition: transform 0.22s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary) !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

/* Dropdown toggle chevron — override Bootstrap's default */
.navbar-nav .dropdown-toggle {
    padding-right: 26px !important;
}
.navbar-nav .dropdown-toggle::after {
    /* Remove Bootstrap's border-based caret */
    border: none !important;
    content: '\F282' !important; /* bi-chevron-down */
    font-family: 'bootstrap-icons' !important;
    font-size: 12px !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: transform 0.22s !important;
    width: auto !important;
    height: auto !important;
    vertical-align: unset !important;
    margin: 0 !important;
}

.navbar-nav .dropdown.show .dropdown-toggle::after,
.navbar-nav .dropdown:hover .dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ── Dropdown menu — fix hover gap & disappear issue ── */
.navbar .dropdown {
    position: relative;
}

/* Extend hover area with invisible bridge */
.navbar .dropdown-menu {
    background: var(--white);
    border: 1px solid var(--mid-gray);
    border-radius: var(--radius-lg);
    padding: 8px 0;
    margin-top: 0 !important;
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    /* The key: start right at the nav bottom with no gap */
    top: calc(var(--navbar-h) - 4px) !important;
    animation: dropFadeIn 0.18s ease both;
}

/* Invisible pseudo-element bridge between nav-link and dropdown */
.navbar .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

@keyframes dropFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.navbar .dropdown-item {
    color: var(--text-body);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: rgba(26,95,154,0.07);
    color: var(--primary);
    padding-left: 26px;
}

.navbar .dropdown-item::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.navbar .dropdown-item:hover::before { opacity: 1; }

/* Hover-triggered dropdown (desktop) — CSS-only fallback for the hover fix */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* Register button */
.btn-dealroom {
    background: var(--primary);
    color: var(--white) !important;
    border: none;
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.02em;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-dealroom:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-blue);
    color: var(--white) !important;
}

/* Toggler */
.navbar-toggler {
    border: 1.5px solid var(--mid-gray);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-dark);
    background: none;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2813,27,42,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Mobile Off-canvas ── */
.offcanvas {
    background: var(--primary-darker);
    width: 300px;
    max-width: 88vw;
}
.offcanvas-header {
    border-bottom: 1px solid var(--border-light);
    padding: 20px;
}
.offcanvas-body { padding: 16px 20px; }

.accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light);
}
.accordion-button {
    background: transparent !important;
    color: var(--white) !important;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 0;
    box-shadow: none !important;
}
.accordion-button::after { filter: invert(1) brightness(1.5); }
.accordion-body { padding: 0 0 12px 0; }
.accordion-body a {
    display: block;
    color: rgba(255,255,255,0.7);
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
}
.accordion-body a:hover { color: var(--white); background: rgba(255,255,255,0.08); }

.mobile-nav-link {
    display: block;
    color: var(--white);
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 500;
}
.mobile-nav-link:hover { color: var(--highlight); }

.mobile-social {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.mobile-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--white);
    font-size: 17px;
    transition: var(--transition);
}
.mobile-social a:hover { background: var(--primary); }

/* ============================================
   HERO SECTION — Full viewport, truly filling
============================================ */
.hero-section {
    position: relative;
    /* Block-level so it always stretches full viewport width — do NOT use display:flex
       here because flex children (the carousel) won't auto-stretch to 100% width */
    display: block;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    /* Push content down past fixed navbar */
    padding-top: var(--navbar-h);
}

/* The background layer — must be position:absolute relative to hero-section */
.hero-video {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;   /* explicit fallback for older Safari */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(8,42,77,0.88) 0%,
        rgba(13,59,105,0.78) 50%,
        rgba(26,95,154,0.65) 100%
    );
    z-index: 1;
}

/* Container/carousel inside hero — above the overlay */
.hero-section > .container {
    position: relative;
    z-index: 2;
    /* Center content vertically within the hero */
    min-height: calc(100vh - var(--navbar-h));
    display: flex;
    align-items: center;
}

/* Carousel: force full width so the inner hero-video fills the section */
.hero-section #heroCarousel {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-section .carousel-inner,
.hero-section .carousel-item {
    width: 100%;
    min-height: calc(100vh - var(--navbar-h));
}

/* Inside carousel, the hero-video positions relative to carousel-item;
   carousel-item must be position:relative (Bootstrap already does this) */
.hero-section .carousel-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* The container INSIDE a carousel slide */
.hero-section .carousel-item > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: calc(100vh - var(--navbar-h));
    display: flex;
    align-items: center;
}

/* carousel-item's own hero-video is absolute relative to carousel-item */
.hero-section .carousel-item .hero-video,
.hero-section .carousel-item .hero-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-main-logo {
    max-width: 180px;
    margin-bottom: 24px;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.4));
}

.hero-content { padding: 40px 0; }

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.8rem);
    color: var(--white);
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Accent the first word */
.hero-title em, .hero-title span.accent {
    color: var(--highlight);
    font-style: normal;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.88);
    margin-bottom: 32px;
    line-height: 1.6;
}

.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-sidebar { padding-left: 30px; }
.solutions-tag {
    padding-left: 16px;
    border-left: 3px solid var(--highlight);
}
.solutions-tag span {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    display: block;
}
.hashtag {
    font-size: 0.82rem;
    color: var(--highlight);
    margin-bottom: 4px;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* ============================================
   BUTTONS
============================================ */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    font-weight: 600;
    padding: 11px 28px;
    border-radius: 6px;
    transition: var(--transition);
    font-size: 14.5px;
    letter-spacing: 0.02em;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue);
}

.btn-danger {
    background: var(--tvet-red);
    border-color: var(--tvet-red);
    color: var(--white);
    font-weight: 600;
    padding: 11px 28px;
    border-radius: 6px;
    transition: var(--transition);
}
.btn-danger:hover {
    background: var(--tvet-red-dark);
    border-color: var(--tvet-red-dark);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-success {
    background: var(--tvet-green);
    border-color: var(--tvet-green);
    color: var(--white);
    font-weight: 600;
    padding: 11px 28px;
    border-radius: 6px;
    transition: var(--transition);
}
.btn-success:hover {
    background: var(--tvet-green-dark);
    border-color: var(--tvet-green-dark);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-outline-light {
    border: 2px solid rgba(255,255,255,0.7);
    color: var(--white);
    padding: 9px 26px;
    border-radius: 6px;
    font-weight: 600;
    background: transparent;
    font-size: 14.5px;
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--white);
    color: var(--white);
}

.btn-outline-dark {
    border: 2px solid var(--primary-dark);
    color: var(--primary-dark);
    padding: 9px 26px;
    border-radius: 6px;
    font-weight: 600;
    background: transparent;
    font-size: 14.5px;
}
.btn-outline-dark:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-outline-primary {
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 9px 26px;
    border-radius: 6px;
    font-weight: 600;
    background: transparent;
    font-size: 14.5px;
}
.btn-outline-primary:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

/* ============================================
   SECTION TITLES
============================================ */
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--primary);
    margin-bottom: 16px;
    font-weight: 700;
}

.section-title-large {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--text-dark);
    line-height: 1.15;
    margin-bottom: 12px;
    font-weight: 700;
}

.section-title-light {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 700;
}

.section-title-cta {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 700;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 20px;
}

/* Decorative underline for section titles */
.section-title::after,
.section-title-large::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, var(--tvet-red), var(--tvet-yellow));
    border-radius: 2px;
    margin-top: 12px;
}

.text-center .section-title::after,
.text-center .section-title-large::after {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   PAGE HEADER (inner pages: schedule, speakers, etc.)
============================================ */
.page-header-section {
    background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary-dark) 100%);
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    padding: 2rem 0;
    padding-top: calc(var(--navbar-h) + 2rem);
}

.page-header-section h1 {
    color: var(--white);
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    margin-bottom: 6px;
}

.page-header-section .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255,255,255,0.4);
}
.page-header-section .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.4);
}

/* ============================================
   OVERVIEW / ABOUT SECTION
============================================ */
.overview-section {
    padding: 80px 0;
}

.overview-section.dark-bg {
    background: var(--primary-darker);
    color: var(--white);
}
.overview-section.dark-bg p { color: rgba(255,255,255,0.82); }

/* Event Info Card */
.event-info-card {
    background: var(--white);
    border: 1px solid var(--mid-gray);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.event-info-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--light-gray);
}

.event-info-card ul li {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.5;
}

/* ============================================
   SPEAKER CARDS
============================================ */
.speakers-section { padding: 80px 0; }

.speaker-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    cursor: default;
    overflow: hidden;
}

.speaker-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
    transform: translateY(-6px);
}

.speaker-photo-wrap {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary);
    margin: 0 auto 4px;
    flex-shrink: 0;
    position: relative;
    background: var(--light-gray);
}

.speaker-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.speaker-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--light-gray), var(--mid-gray));
    color: var(--text-muted);
    font-size: 2.5rem;
}

.speaker-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.speaker-title {
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.3;
}

.speaker-org {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.3;
}

.speaker-social {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.speaker-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--light-gray);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 13px;
    transition: var(--transition);
}
.speaker-social a:hover {
    background: var(--primary);
    color: var(--white);
}

/* ============================================
   SCHEDULE SECTION
============================================ */
.schedule-section { padding: 80px 0; background: var(--off-white); }

.schedule-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius);
    transition: var(--transition);
}

.schedule-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.schedule-time {
    min-width: 64px;
    flex-shrink: 0;
}

.time-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.session-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.35;
    margin-bottom: 4px;
}

.session-speaker { font-size: 0.82rem; }

/* Day-tabs pill styling */
#scheduleTabs .nav-link {
    background: var(--light-gray);
    border: 1.5px solid var(--mid-gray);
    color: var(--text-body);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 18px;
    transition: var(--transition);
    text-align: center;
}
#scheduleTabs .nav-link.active,
#scheduleTabs .nav-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* Timeline */
.timeline-item { position: relative; }

/* ============================================
   TICKET CARDS
============================================ */
.ticket-card {
    background: var(--white);
    border: 1.5px solid var(--light-gray);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.ticket-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.ticket-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.ticket-price {
    padding: 24px 0;
}

.price-currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    vertical-align: super;
}

.price-amount {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

/* ============================================
   REGISTRATION FORM — TICKET OPTION CARDS
============================================ */
.ticket-option-card {
    cursor: pointer;
    display: block;
    border: 2px solid var(--mid-gray);
    border-radius: var(--radius);
    transition: var(--transition);
    overflow: hidden;
    background: var(--white);
    position: relative;
}

.ticket-option-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.ticket-option-card.selected,
.ticket-option-card:has(.ticket-radio:checked) {
    border-color: var(--primary);
    background: rgba(26,95,154,0.04);
    box-shadow: 0 0 0 3px rgba(26,95,154,0.12);
}

.ticket-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ticket-option-inner {
    padding: 16px;
}

/* Checkmark indicator */
.ticket-option-card.selected::before {
    content: '\F26E'; /* bi-check-circle-fill */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--primary);
    font-size: 18px;
}

/* ============================================
   MULTI-STEP REGISTRATION FORM
============================================ */

/* Progress stepper */
.reg-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
    position: relative;
}

.reg-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 160px;
    text-align: center;
}

.reg-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: var(--mid-gray);
    transition: background 0.4s;
    z-index: 0;
}

.reg-step.done:not(:last-child)::after,
.reg-step.active:not(:last-child)::after {
    background: var(--primary);
}

.step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2.5px solid var(--mid-gray);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.reg-step.active .step-circle {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 0 0 4px rgba(26,95,154,0.15);
}

.reg-step.done .step-circle {
    border-color: var(--tvet-green);
    background: var(--tvet-green);
    color: var(--white);
}

.step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.reg-step.active .step-label { color: var(--primary); }
.reg-step.done .step-label  { color: var(--tvet-green); }

/* Form panels */
.form-panel {
    display: none;
    animation: panelIn 0.28s ease both;
}
.form-panel.active { display: block; }

@keyframes panelIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.form-panel-back {
    animation-name: panelBack;
}

@keyframes panelBack {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Form controls */
.form-label {
    font-weight: 600;
    font-size: 0.87rem;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.form-control, .form-select {
    border: 1.5px solid var(--mid-gray);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14.5px;
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--white);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,95,154,0.12);
    outline: none;
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--tvet-red);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(196,30,58,0.12);
}

.invalid-feedback { color: var(--tvet-red); font-size: 0.82rem; }

/* Summary card */
.order-summary-card {
    background: linear-gradient(135deg, rgba(26,95,154,0.05), rgba(26,95,154,0.02));
    border: 1.5px solid rgba(26,95,154,0.2);
    border-radius: var(--radius);
    padding: 20px;
}

.order-summary-card .summary-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.order-summary-card .summary-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
}

.order-summary-card .summary-price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Form card wrapper */
.reg-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
}

.reg-card-header {
    background: linear-gradient(90deg, var(--primary-darker), var(--primary-dark));
    color: var(--white);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.reg-card-header h5 {
    color: var(--white);
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.reg-card-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.reg-card-body { padding: 28px; }

/* Nav buttons */
.reg-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--light-gray);
}

/* ============================================
   WELCOME / ABOUT SECTION
============================================ */
.welcome-section { background: var(--white); padding: 80px 0; }

.year-display {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--tvet-blue), var(--tvet-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quote-block {
    background: var(--primary-darker);
    padding: 40px;
    border-radius: var(--radius-lg);
    border-left: 5px solid var(--tvet-yellow);
    position: relative;
    overflow: hidden;
}

.quote-block::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 10rem;
    color: rgba(244,164,0,0.08);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}

.quote-text {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.85;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.quote-author {
    font-size: 0.85rem;
    color: var(--highlight);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================
   EXHIBITION / TICKETS DARK SECTION
============================================ */
.exhibition-section {
    background: linear-gradient(135deg, var(--primary-darker), var(--primary-dark));
    padding: 80px 0;
    color: var(--white);
}

.exhibition-section .section-title-light { color: var(--highlight); }
.exhibition-section p { color: rgba(255,255,255,0.82); }

/* ============================================
   PARTNERS SECTION
============================================ */
.partners-section { padding: 80px 0; background: var(--off-white); }

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--white);
    padding: 24px 16px;
    border-radius: var(--radius);
    border: 1.5px solid var(--light-gray);
    text-align: center;
    min-height: 160px;
    transition: var(--transition);
    color: var(--text-dark);
}

.partner-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    color: var(--text-dark);
}

.partner-item img {
    max-height: 72px;
    max-width: 140px;
    object-fit: contain;
    margin-bottom: 12px;
}

.partner-item span { font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); font-weight: 600; }

.partner-card {
    display: block;
    background: var(--white);
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--light-gray);
    text-align: center;
    transition: var(--transition);
    color: var(--text-dark);
}
.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    color: var(--text-dark);
}

.partner-logo {
    max-height: 110px;
    max-width: 170px;
    margin: 0 auto 12px;
    object-fit: contain;
}

/* ============================================
   VENUE SECTION
============================================ */
.venue-section {
    background: var(--primary-darker);
    padding: 80px 0;
    color: var(--white);
}

.venue-section p { color: rgba(255,255,255,0.82); margin-bottom: 12px; }
.venue-section .section-title-light { color: var(--white); }

.venue-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.venue-tag {
    background: rgba(255,255,255,0.1);
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.84rem;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
}

.venue-location {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-top: 16px;
}
.venue-location i { color: var(--highlight); font-size: 1.2rem; }

/* ============================================
   CTA SECTION
============================================ */
.cta-section {
    background: linear-gradient(135deg, var(--tvet-red) 0%, #8b1025 100%);
    padding: 100px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 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='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-section .container { position: relative; z-index: 1; }

.cta-section .section-title-cta { color: var(--white); }
.cta-text {
    max-width: 680px;
    margin: 0 auto 28px;
    font-size: 1.08rem;
    color: rgba(255,255,255,0.88);
}

/* ============================================
   FOOTER
============================================ */
.main-footer {
    background: var(--primary-deeper, var(--primary-darker));
    padding: 72px 0 20px;
    color: var(--white);
}

.footer-logo { max-width: 130px; filter: brightness(1.1); }

.footer-tagline {
    font-size: 0.82rem;
    color: var(--highlight);
    line-height: 1.65;
    border-left: 2px solid var(--highlight);
    padding-left: 14px;
    margin-top: 12px;
}

.footer-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 18px;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
    color: rgba(255,255,255,0.65);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer-links a:hover { color: var(--highlight); padding-left: 4px; }
.footer-links a::before {
    content: '›';
    color: var(--tvet-yellow);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    transition: var(--transition);
}
.footer-social a:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); }

.footer-emails a {
    display: block;
    color: rgba(255,255,255,0.8);
    font-size: 0.88rem;
    margin-bottom: 4px;
}
.footer-emails a:hover { color: var(--highlight); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    margin-top: 48px;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.82rem;
    align-items: center;
}
.footer-legal a, .footer-legal span { color: rgba(255,255,255,0.5); }
.footer-legal a:hover { color: var(--highlight); }

.powered-by { font-size: 0.82rem; color: rgba(255,255,255,0.45); }
.powered-by a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.powered-by a:hover { color: var(--highlight); }

/* ============================================
   MISC COMPONENTS
============================================ */

/* Back to top (created dynamically by JS) */
.back-to-top {
    background: var(--primary) !important;
    box-shadow: 0 4px 16px rgba(26,95,154,0.35) !important;
}

/* Badges override */
.badge.bg-primary { background: var(--primary) !important; }
.badge.bg-success { background: var(--tvet-green) !important; }
.badge.bg-danger  { background: var(--tvet-red) !important; }

/* Alert override */
.alert-success {
    background: rgba(26,122,58,0.1);
    border-color: var(--tvet-green);
    color: var(--tvet-green-dark);
}
.alert-danger {
    background: rgba(196,30,58,0.08);
    border-color: var(--tvet-red);
    color: var(--tvet-red-dark);
}

/* Scrollable day tabs */
.schedule-section .nav-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
@media (min-width: 768px) { .schedule-section .nav-pills { flex-wrap: wrap; } }

/* FAQ Accordion */
.faq-accordion .accordion-item {
    border: 1px solid var(--light-gray);
    margin-bottom: 8px;
    border-radius: var(--radius) !important;
    overflow: hidden;
    background: var(--white);
    border-bottom: 1px solid var(--light-gray) !important;
}
.faq-accordion .accordion-button {
    background: var(--white) !important;
    color: var(--text-dark) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 18px 20px;
    border: none;
}
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--primary) !important;
    color: var(--white) !important;
}
.faq-accordion .accordion-button::after { filter: none; }
.faq-accordion .accordion-button:not(.collapsed)::after { filter: invert(1) brightness(2); }
.faq-accordion .accordion-body {
    padding: 16px 20px;
    color: var(--text-body);
    background: var(--white);
}

/* Contact Form */
.contact-form {
    background: var(--off-white);
    padding: 36px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--light-gray);
}

/* AOS */
[data-aos] { pointer-events: auto !important; }

/* Page loader */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--primary-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--highlight);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1199px) {
    .navbar-nav .nav-link { padding: 0 13px !important; font-size: 13.5px; }
}

@media (max-width: 991px) {
    .hero-sidebar { display: none; }
    .navbar-nav   { display: none; } /* use offcanvas on mobile */
    .hero-title   { font-size: 2rem; }
    .partners-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .hero-section { text-align: center; }
    .hero-logo-section { text-align: center; margin-bottom: 16px; }
    .hero-buttons { justify-content: center; }
    .quote-block  { padding: 28px 20px; }
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .partner-item { padding: 18px 12px; min-height: 130px; }
    .cta-section { padding: 60px 0; }
    .cta-section .d-flex { flex-direction: column; align-items: center; }
    .footer-legal { justify-content: center; text-align: center; }
    .powered-by   { text-align: center; margin-top: 12px; }
    .year-display { font-size: 3.5rem; }
    .reg-stepper  { gap: 0; }
    .step-label   { font-size: 0.65rem; }
    .step-circle  { width: 36px; height: 36px; font-size: 0.85rem; }
    .reg-card-body{ padding: 20px; }
}

@media (max-width: 575px) {
    .hero-title   { font-size: 1.7rem; }
    .section-title{ font-size: 1.5rem; }
    .section-title::after { width: 36px; }
    .partners-grid { grid-template-columns: 1fr; }
    .footer-social { justify-content: center; }
    .footer-emails { text-align: center; }
    .navbar-brand img { height: 36px; }
}