/* Custom properties */
:root {
    --primary: #d4af37; /* Gold */
    --primary-dark: #b8860b;
    --primary-light: #f3e5ab;
    --bg-dark: #0a0a0a;
    --bg-card: rgba(20, 20, 20, 0.7);
    --text-light: #f5f5f5;
    --text-muted: #a0a0a0;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Base styles and utilities */
a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 6rem 0;
}

/* Two sections placed back-to-back (no divider between them) each carry
   their own 6rem padding, which compounds into a huge empty gap since
   there's nothing else marking the boundary. Halve the second one's top
   padding in that case. */
.section + .section {
    padding-top: 3rem;
}

.gold-gradient {
    background: linear-gradient(to right, var(--primary), var(--primary-light), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-size: 0.9rem;
}

.btn-primary {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary));
    color: var(--bg-dark);
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-3px);
}

.btn-outline {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--primary);
    color: var(--primary);
    backdrop-filter: blur(5px);
}

.btn-outline:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-3px);
}

/* Typography */
h1, h2, h3, h4, .logo-panaf {
    font-family: var(--font-heading);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: var(--transition);
    /* Always keep a soft dark backdrop, even before scrolling, so nav
       text stays legible over bright/busy hero images and photos. */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 5%;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.logo-panaf {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: 2px;
    position: relative;
}

.logo-africa {
    font-size: 1rem;
    position: absolute;
    top: -5px;
    right: -15px;
}

.logo-nightclub {
    font-size: 0.8rem;
    letter-spacing: 5px;
    font-weight: 700;
    color: var(--text-light);
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    position: relative;
    padding: 0.5rem 0;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.reserve-btn {
    border: 1px solid var(--primary);
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.reserve-btn:hover {
    background: var(--primary);
    color: var(--bg-dark);
}

.lang-toggle {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.lang-toggle button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

.lang-toggle button.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(10px);
    z-index: 999;
    padding: 8rem 3rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    border-left: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.mobile-menu.active {
    right: 0;
}

.mobile-link {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: var(--font-heading);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 1rem;
}

.mobile-socials {
    margin-top: auto;
    display: flex;
    gap: 1.5rem;
}

.mobile-socials a {
    font-size: 1.5rem;
    color: var(--primary);
}

/* Hero Section */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 2rem 2rem;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/images/hero_bg.png');
    background-size: cover;
    background-position: center;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.7) 60%, rgba(10,10,10,1) 100%);
    z-index: -1;
}

.hero-content {
    max-width: 900px;
    animation: fadeIn 1.5s ease;
}

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

.hero-badge {
    display: inline-block;
    padding: 0.6rem 2rem;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 30px;
    font-size: 0.9rem;
    letter-spacing: 3px;
    margin-bottom: 2rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 0 5px 20px rgba(0,0,0,0.8);
}

.hero-subtitle {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    letter-spacing: 12px;
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

.hero-info {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3.5rem;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0,0,0,0.4);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    backdrop-filter: blur(5px);
}

.info-item i {
    color: var(--primary);
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    animation: bounce 2s infinite;
    cursor: pointer;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-15px) translateX(-50%); }
    60% { transform: translateY(-7px) translateX(-50%); }
}

/* Section Common */
.section-subtitle {
    font-size: 1.1rem;
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 2rem;
    line-height: 1.2;
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.music-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.genre {
    padding: 0.6rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: var(--transition);
}

.genre:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(212, 175, 55, 0.05);
    transform: translateY(-2px);
}

.about-image-container {
    position: relative;
    padding: 2rem 2rem 0 0;
}

.about-image-wrapper {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.about-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s ease;
}

.about-image-wrapper:hover .about-img {
    transform: scale(1.05);
}

.image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary);
    z-index: 0;
    border-radius: 4px;
    transform: translate(20px, -20px);
}

/* Features Section */
.features {
    background: #0d0d0d;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    text-align: center;
}

.feature-card {
    padding: 2.5rem 2rem;
    background: var(--bg-card);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    background: rgba(25, 25, 25, 0.8);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.feature-card h4 {
    font-family: var(--font-body);
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    letter-spacing: 1px;
}

/* Location Section */
.location-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.contact-list {
    margin-bottom: 2.5rem;
}

.contact-list li {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
    align-items: flex-start;
}

.contact-list i {
    color: var(--primary);
    font-size: 1.3rem;
    margin-top: 0.3rem;
    width: 20px;
    text-align: center;
}

.contact-list strong {
    display: block;
    font-family: var(--font-heading);
    margin-bottom: 0.4rem;
    letter-spacing: 1px;
    font-size: 1.1rem;
}

.contact-list p {
    color: var(--text-muted);
    font-size: 1rem;
}

.contact-list a:hover {
    color: var(--primary);
}

.map-container {
    border-radius: 4px;
    overflow: hidden;
    height: 450px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.map-btn {
    width: 100%;
}

/* Footer */
.footer {
    background: #050505;
    padding: 5rem 2rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.footer-tagline {
    letter-spacing: 6px;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    font-size: 1.3rem;
}

.social-links a:hover {
    background: var(--primary);
    color: var(--bg-dark);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.copyright {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
    .about-grid, .location-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .about-image-container {
        padding: 1rem 1rem 0 0;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .image-accent {
        transform: translate(15px, -15px);
    }
}

@media (max-width: 768px) {
    .nav-links, .reserve-btn {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .hero-info {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .section {
        padding: 4rem 0;
    }
    
    .map-container {
        height: 350px;
    }
}

/* Inner Pages Header */
.page-header {
    padding: 12rem 2rem 6rem;
    text-align: center;
    background: linear-gradient(to bottom, rgba(10,10,10,0.9), var(--bg-dark)), url('assets/images/hero_bg.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.page-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1rem;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8);
}

.breadcrumb {
    color: var(--primary);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* VIP Reservation page header uses the VVIP area photo instead of the
   shared inner-page background. Lighter overlay than the shared
   .page-header gradient (which was tuned for hero_bg.png) so the photo
   stays visible instead of reading as near-black. */
body.reservation-page .page-header {
    background-image: linear-gradient(to bottom, rgba(10,10,10,0.15), rgba(10,10,10,0.55)), url('assets/images/vvip-area.png');
    background-blend-mode: normal;
}

/* Forms */
.form-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--bg-card);
    padding: 3rem;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    color: var(--primary-light);
}

.form-control {
    width: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    width: 100%;
    margin-top: 1rem;
}

.form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-status {
    margin-top: 1rem;
    min-height: 1.2rem;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.form-status.success {
    color: #6fcf97;
}

.form-status.error {
    color: #eb5757;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .form-container {
        padding: 2rem 1.5rem;
    }
}

/* Brand logo (navbar + footer) */
.logo-img {
    height: 55px;
    width: auto;
    display: block;
    transition: var(--transition);
}

.navbar.scrolled .logo-img {
    height: 44px;
}

.footer-logo-img {
    height: 70px;
    width: auto;
}

/* Hero video background */
.hero-bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.gallery-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.gallery-item:hover img,
.gallery-item:hover video {
    transform: scale(1.08);
}

.gallery-item.wide {
    aspect-ratio: 8 / 5;
}

/* Bottle Showcase */
.bottle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.bottle-card {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 1.25rem 1rem 1.5rem;
    transition: var(--transition);
}

.bottle-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.bottle-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.bottle-card h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--primary-light);
}

/* Event Cards (Events listing page) */
.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.event-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.event-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 35px rgba(0,0,0,0.5);
}

.event-card-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.event-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-card-date {
    color: var(--primary);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.event-card-body h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}

.event-card-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    flex: 1;
}

.event-card-featured {
    border: 1px solid rgba(212, 175, 55, 0.4);
    max-width: 420px;
    margin: 0 auto;
}

.event-card-featured .event-card-img {
    aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
    .event-card-featured {
        max-width: 720px;
    }

    .event-card-featured .event-card-img {
        aspect-ratio: 16 / 9;
    }
}

.event-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--bg-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    align-self: flex-start;
}

/* Dedicated Event Page */
.event-hero {
    /* Less top clearance than .page-header's 12rem -- that value clears the
       fixed navbar for a text-first header, but here the cover image is the
       first thing in the header, so the same padding just reads as an empty
       gap above it. This still clears the navbar with room to spare. */
    padding: 7.5rem 2rem 5rem;
    text-align: center;
    background: linear-gradient(135deg, #241a08 0%, #0a0a0a 50%, #000000 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}


.event-hero .page-title,
.event-hero .breadcrumb {
    color: #fff;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.event-hero .breadcrumb {
    color: rgba(255,255,255,0.8);
}

.event-hero-tagline {
    max-width: 650px;
    margin: 1rem auto 0;
    color: rgba(255,255,255,0.9);
    font-size: 1.05rem;
}

.event-description {
    max-width: 720px;
}

.event-description p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.25rem;
    /* Avoids a lone last word stranded on its own line when a sentence
       wraps -- balances the last two lines instead. No-op (falls back to
       normal wrapping) in browsers that don't support it yet. */
    text-wrap: pretty;
}

.event-description-inline {
    max-width: 650px;
    margin: 1.5rem auto 0;
    color: var(--text-muted);
    line-height: 1.7;
    text-wrap: pretty;
}

.event-description p:last-child {
    margin-bottom: 0;
}

.event-hero-cover-wrap {
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
    margin-bottom: 2rem;
    /* Fixed height, not aspect-ratio -- this wrap is full-bleed with no
       max-width, so an aspect-ratio here scales height with viewport width
       and blows up into a near-fullscreen, zoomed-in banner on wide
       screens. A flat height keeps this a controlled hero band regardless
       of the source image's own dimensions. */
    height: 600px;
    overflow: hidden;
}

.event-hero-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
    .event-hero-cover-wrap {
        height: 400px;
    }
}

/* Pretty Girls Love Amapiano hero photo: title art top-left, model right,
   date/logo strip along the bottom. At the fixed hero height above, the box
   is proportionally wider than the photo, so cover crops top/bottom -- bias
   toward the top so the title art and her face both stay in frame instead
   of the (already-duplicated-elsewhere) date/logo strip at the very bottom. */
body.event-pretty-girls-love-amapiano-osaka-2026 .event-hero-cover {
    object-position: center 30%;
}

@media (max-width: 768px) {
    /* On a narrower/taller box the crop direction flips to left/right
       instead -- shift right to keep her in frame over the title text. */
    body.event-pretty-girls-love-amapiano-osaka-2026 .event-hero-cover {
        object-position: 65% center;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.event-meta-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    margin-top: 2.5rem;
}

.event-meta-item {
    text-align: center;
}

.event-meta-item .label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.4rem;
}

.event-meta-item .value {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.ticket-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 2rem;
}

.ticket-card.vip {
    border-color: rgba(212, 175, 55, 0.5);
    background: linear-gradient(160deg, rgba(212,175,55,0.08), var(--bg-card) 40%);
}

.ticket-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.ticket-card .price {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.ticket-card .price span {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
}

.ticket-card ul {
    margin-bottom: 0;
}

.ticket-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

.ticket-card li i {
    color: var(--primary);
    margin-top: 0.2rem;
}

.ticket-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

.ticket-note-highlight {
    font-size: 0.85rem;
    color: var(--primary-dark);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    padding: 0.7rem 1rem;
    margin: 0.75rem 0 1.25rem;
}

body.beach-page .ticket-note-highlight {
    background: rgba(255, 123, 84, 0.12);
    border-color: rgba(255, 123, 84, 0.35);
}

.ticket-card li strong {
    font-weight: 700;
}

.schedule-list {
    max-width: 700px;
    margin: 2rem auto 0;
}

.schedule-item {
    display: flex;
    gap: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.schedule-time {
    flex: 0 0 90px;
    color: var(--primary);
    font-weight: 700;
    font-family: var(--font-heading);
}

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

.info-box {
    max-width: 800px;
    margin: 2rem auto 0;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 6px;
    padding: 1.5rem 2rem;
}

.info-box ul {
    margin: 0;
}

.info-box li {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.info-box li:last-child {
    margin-bottom: 0;
}

.info-box li i {
    color: var(--primary);
    margin-top: 0.2rem;
}

.ticket-type-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.ticket-type-option {
    position: relative;
}

.ticket-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ticket-type-option label {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1rem;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 0;
    font-family: var(--font-body);
}

.ticket-type-option input:checked + label {
    border-color: var(--primary);
    background: rgba(212, 175, 55, 0.08);
}

.ticket-type-option .ticket-type-name {
    display: block;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.5px;
}

.ticket-type-option .ticket-type-price {
    display: block;
    color: var(--primary);
    font-weight: 700;
    margin-top: 0.3rem;
}

@media (max-width: 600px) {
    .ticket-type-options {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Beach Party page theme — warm sand/coral palette instead of
   the site-wide black/gold nightclub look. Scoped to body.beach-page
   so only summer-beach-party-2026.html is affected.
   ============================================================ */
body.beach-page {
    --primary: #ff7b54;
    --primary-dark: #e8663f;
    --primary-light: #ffb08a;
    --bg-dark: #fdf6ec;
    --bg-card: #ffffff;
    --text-light: #2e2118;
    --text-muted: #7a6a58;
}

/* Shared chrome (navbar, mobile menu, footer) stays on the standard
   dark/gold theme for site-wide consistency — only the page content
   between them goes sandy. */
body.beach-page .navbar,
body.beach-page .mobile-menu,
body.beach-page .footer {
    --primary: #d4af37;
    --primary-dark: #b8860b;
    --primary-light: #f3e5ab;
    --bg-dark: #0a0a0a;
    --bg-card: rgba(20, 20, 20, 0.7);
    --text-light: #f5f5f5;
    --text-muted: #a0a0a0;
}

body.beach-page .btn-primary {
    color: #2e2118;
}

body.beach-page .btn-primary:hover {
    box-shadow: 0 0 20px rgba(255, 123, 84, 0.4);
}

body.beach-page .genre {
    background: rgba(255, 123, 84, 0.08);
    border-color: rgba(255, 123, 84, 0.3);
    color: var(--text-light);
}

body.beach-page .genre:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

body.beach-page .ticket-card {
    border-color: rgba(46, 33, 24, 0.1);
    box-shadow: 0 10px 30px rgba(46, 33, 24, 0.08);
}

body.beach-page .ticket-card.vip {
    border-color: rgba(255, 123, 84, 0.4);
    background: linear-gradient(160deg, rgba(255, 123, 84, 0.1), #fff 45%);
}

body.beach-page .schedule-item {
    border-bottom-color: rgba(46, 33, 24, 0.1);
}

body.beach-page .info-box {
    background: rgba(255, 123, 84, 0.08);
    border-color: rgba(255, 123, 84, 0.3);
}

body.beach-page .form-container {
    border-color: rgba(255, 123, 84, 0.25);
    box-shadow: 0 20px 40px rgba(46, 33, 24, 0.1);
}

body.beach-page .form-control {
    background: #ffffff;
    border-color: rgba(46, 33, 24, 0.15);
}

body.beach-page .form-control:focus {
    box-shadow: 0 0 10px rgba(255, 123, 84, 0.25);
}

body.beach-page .form-group label {
    color: var(--primary-dark);
}

body.beach-page .ticket-type-option label {
    border-color: rgba(46, 33, 24, 0.15);
}

body.beach-page .ticket-type-option input:checked + label {
    background: rgba(255, 123, 84, 0.1);
}

body.beach-page .hp-field {
    background: transparent;
}

/* Wave divider between the hero and the sandy content below */
.beach-wave-divider {
    display: block;
    line-height: 0;
    background: #fdf6ec;
}

.beach-wave-divider svg {
    width: 100%;
    height: 70px;
    display: block;
}

/* Event Promo Popup — content/timing come from Admin > Settings */
.event-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.event-popup-overlay.open {
    opacity: 1;
    visibility: visible;
}

.event-popup {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-dark);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
}

.event-popup-overlay.open .event-popup {
    transform: translateY(0) scale(1);
}

.event-popup-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.event-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.event-popup-close:hover {
    background: var(--primary);
    color: var(--bg-dark);
}

.event-popup-body {
    padding: 1.75rem;
    text-align: center;
}

.event-popup-badge {
    display: inline-block;
    color: var(--primary);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.event-popup-body h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.event-popup-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.event-popup-date {
    color: var(--primary-light);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.event-popup-date i {
    margin-right: 0.4rem;
}

.event-popup-cta {
    width: 100%;
    display: inline-block;
}

@media (max-width: 480px) {
    .event-popup-body {
        padding: 1.25rem;
    }
}