/* Design F: Based on E, with tweaks, banner, and newsletter */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Open Sans', sans-serif; background-color: #1a1a1a; color: #d4d4d4; line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh; }
.container { width: 90%; max-width: 960px; margin: 0 auto; padding: 0 15px; }

/* --- Site Message Banner (Updated for new position) --- */
.site-message-banner {
    background-color: #ff4081; /* Pink accent */
    color: #ffffff;
    padding: 12px 15px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    position: relative;
    /* This is the key change: */
    margin: -30px 0 30px 0; /* Use negative top margin to cancel out main's padding-top */
}
.site-message-banner p { margin: 0;padding: 0 40px 0 15px; }
.dismiss-banner-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dismiss-banner-btn:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Create the two lines of the 'x' using pseudo-elements */
.dismiss-banner-btn::before,
.dismiss-banner-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;  /* The length of the lines */
    height: 2.5px; /* The thickness of the lines */
    background-color: #ffffff;
}

/* Rotate the lines to form the 'x' */
.dismiss-banner-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.dismiss-banner-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* Header Styling */
header { background-color: #111; padding: 8px 0; border-bottom: 1px solid #303030; position: sticky; top: 0; z-index: 1000; width: 100%; }
header.banner-active-padding { /* This class will be added by JS when banner is visible */
    top: 0; /* Will be adjusted by JS to accommodate banner height */
}
header .container { display: flex; justify-content: space-between; align-items: center; }
.logo-area a { display: flex; align-items: center; text-decoration: none; }
.header-logo-img {
    width: 65px;
    height: 65px;
    margin-right: 12px;
    border-radius: 4px; /* Optional: can give the SVG image rounded corners */
    object-fit: cover; /* Ensures the SVG scales nicely within the box */
}.header-logo-text { font-family: 'Montserrat', sans-serif; color: #f0f0f0; font-size: 1.8rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.nav-toggle { display: none; font-size: 1.8rem; color: #d4d4d4; background: none; border: none; cursor: pointer; padding: 5px; }
nav ul { list-style: none; display: flex; }
nav ul li { margin-left: 20px; }
nav ul li a { color: #d4d4d4; text-decoration: none; font-weight: 600; padding: 8px 0px; border-bottom: 2px solid transparent; transition: color 0.3s ease, border-bottom-color 0.3s ease; font-size: 0.95rem; }
nav ul li a:hover, nav ul li a.active { color: #ff4081; border-bottom-color: #ff4081; }

/* Main Content Area */
main { flex-grow: 1; padding: 30px 0; transition: padding-top 0.3s ease-in-out; }
/* main.banner-active-padding {  This class will be added by JS when banner is visible 
    padding-top will be dynamically set by JS 
} */
main .container h2.section-title { font-family: 'Montserrat', sans-serif; color: #ffffff; text-align: left; margin-bottom: 15px; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #ff4081; padding-bottom: 10px; display: inline-block; }

/* Filter and Sort Area */
.controls-area { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
.filter-controls, .sort-controls { display: flex; align-items: center; gap: 8px; }

.control-button, .control-select {
    padding: 9px 15px; 
    background-color: #2f2f2f;
    color: #d4d4d4;
    border: 1px solid #444;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    height: 38px; 
}
.control-button:hover, .control-select:hover { background-color: #3a3a3a; border-color: #ff4081; }
.control-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d4d4d4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px auto; padding-right: 30px; }


/* Event Listing Styling */
.event-list { list-style: none; padding: 0; }
.event-card { background-color: #242424; margin-bottom: 30px; border-radius: 6px; border: 1px solid #303030; display: flex; overflow: hidden; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; }
.event-card:hover { transform: translateY(-3px); border-color: #ff4081; }
.event-image-container { /* Renamed for clarity */
    width: 150px; 
    min-width: 150px; /* Prevent shrinking on flex layouts */
    flex-shrink: 0;   /* Same as above */
    background-color: #333; /* Fallback for placeholder */
}

.event-image-placeholder { /* This is now specifically for the placeholder text div */
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
    font-size: 0.9rem;
}

img.event-image { /* This new rule styles the actual <img> tag */
    display: block; /* Removes any extra space below the image */
    width: 100%;    /* Image will be 100% of the container's width (150px) */
    height: auto;   /* This is the key: height adjusts automatically */
}.event-content { padding: 15px 20px; flex-grow: 1; display: flex; flex-direction: column; }
.event-card h3 { font-family: 'Montserrat', sans-serif; color: #ffffff; margin-top: 0; margin-bottom: 5px; font-size: 1.3rem; font-weight: 700; }
.event-card p.event-artists { font-family: 'Open Sans', sans-serif; color: #ffadc6; font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; }
.event-card p.event-artists strong { color: #e0e0e0; }
.event-card p.event-meta { font-size: 0.9rem; color: #b0b0b0; margin-bottom: 8px; }
.event-card p.event-meta strong { color: #d4d4d4; font-weight: 600; }
.event-card p.event-meta span { margin-right: 12px; display: inline-block; }
.event-card p.event-description { margin-bottom: 15px; color: #b0b0b0; font-size: 0.9rem; flex-grow: 1; }
.event-style-tags { margin-top: 10px; margin-bottom: 15px; }
.style-tag { display: inline-block; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 15px; margin-right: 8px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid transparent; } 
.style-tag.rave { background-color: #ff0055; color: #ffffff; border-color: #ff0055; } 
.style-tag.techno { background-color: #6A0DAD; color: #ffffff; border-color: #6A0DAD;} 
.style-tag.edm { background-color: #00A3FF; color: #ffffff; border-color: #00A3FF;}    
.style-tag.festival { background-color: #2E8B57; color: #ffffff; border-color: #2E8B57;} 
/* --- Add these new rules --- */
.style-tag.d\&b { background-color: #ff8c00; color: #ffffff; border-color: #ff8c00; } /* Dark Orange */
.style-tag.house { background-color: #ff69b4; color: #ffffff; border-color: #ff69b4; } /* Hot Pink */
.style-tag.trance { background-color: #9370db; color: #ffffff; border-color: #9370db; } /* Medium Purple */
.event-card a.ticket-link { display: inline-block; background-color: #ff4081; color: #ffffff; padding: 10px 20px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.9rem; text-align: center; margin-top: auto; align-self: flex-start; transition: background-color 0.3s ease; }
.event-card a.ticket-link:hover { background-color: #f50057; }

/* Newsletter Section */
.newsletter-section { background-color: #242424; padding: 30px 0; margin-top: 40px; border-top: 1px solid #303030; }
.newsletter-section .container { text-align: center; }
.newsletter-section h3 { font-family: 'Montserrat', sans-serif; color: #ffffff; margin-bottom: 10px; font-size: 1.5rem; }
.newsletter-section p { color: #b0b0b0; margin-bottom: 20px; font-size: 0.95rem; }
.newsletter-form { display: flex; justify-content: center; align-items: center; gap: 10px; max-width: 500px; margin: 0 auto; }
.newsletter-form input[type="email"] { flex-grow: 1; padding: 12px 15px; border: 1px solid #444; border-radius: 4px; background-color: #2f2f2f; color: #d4d4d4; font-size: 0.9rem; }
.newsletter-form button { padding: 12px 25px; background-color: #ff4081; color: #ffffff; border: none; border-radius: 4px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color 0.3s ease; }
.newsletter-form button:hover { background-color: #f50057; }

/* Footer Styling */
footer { background-color: #111; color: #666; text-align: center; padding: 20px 0; margin-top: auto; font-size: 0.85em; }
footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0 15px; }
.footer-logo-img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 50%; /* Makes the container for the image circular */
    object-fit: cover;
}.footer-text { display: flex; align-items: center; margin-bottom: 5px; }
.footer-links { margin-top: 5px; }
.footer-links a { color: #888; margin-left: 15px; text-decoration: none; font-size: 0.8rem; }
.footer-links a:hover { color: #ff4081; }

@media (max-width: 768px) {
    .nav-toggle { 
        display: block; 
    }
    header nav { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%; 
        background-color: rgba(17, 17, 17, 0.98); 
        padding: 10px 0; 
        border-top: 1px solid #303030; 
    }
    header nav.active { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    }
    header nav ul { 
        flex-direction: column; 
        width: 100%; 
    }
    header nav ul li { 
        margin: 10px 0; 
        text-align: center; 
        width: 100%; 
    }
    header nav ul li a { 
        padding: 10px 0; 
        display: block; 
    }
    .event-card { 
        flex-direction: column; 
    }
    .event-image-container {
        width: 100%;
        height: auto;
    }
    img.event-image {
        width: 100%;
        height: auto;
        border-radius: 6px 6px 0 0;
    }
    .event-image-placeholder {
        width: 100%;
        height: 200px;
        border-radius: 6px 6px 0 0;
    }
    .event-content { 
        padding: 15px; 
    }
    .event-card h3 { 
        font-size: 1.2rem; 
    }
    
    /* --- CORRECTED CONTROLS AREA --- */
    .controls-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        width: 100%;
        margin-bottom: 30px;
    }
    .controls-area .filter-controls, 
    .controls-area .sort-controls {
        flex: 1; /* Both children will share space equally */
    }
    .control-select {
        width: 100%; /* Make the dropdown fill its container */
    }
    /* --- END CORRECTED CONTROLS AREA --- */

    .newsletter-form { 
        flex-direction: column; 
    }
    .newsletter-form input[type="email"] { 
        width: 100%; 
        margin-bottom: 10px; 
    }
    .newsletter-form button { 
        width: 100%; 
    }
    footer .container { 
        flex-direction: column; 
    }
    .footer-links { 
        margin-top: 10px; 
    }
    .footer-links a { 
        margin: 0 10px; 
    }
}
@media (min-width: 769px) {
    .nav-toggle { display: none; }
    header nav { display: flex; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* For accessible labels hidden visually */
/* --- Admin Form Styling --- */
.admin-form {
    max-width: 700px;
    margin: 20px auto;
    padding: 25px;
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    color: #d4d4d4;
    font-weight: 600;
    margin-bottom: 8px;
}
/* Generic form control styling for Flask-WTF inputs */
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #2f2f2f;
    color: #d4d4d4;
    font-size: 0.95rem;
    font-family: 'Open Sans', sans-serif;
    height: 44px; /* Set a fixed height for consistency */
}

/* Target select specifically to override default browser styles */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d4d4d4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px auto;
    padding-right: 40px; /* Make space for our custom arrow */
}

.form-group textarea.form-control {
    resize: vertical;
    min-height: 100px;
    height: auto; /* Override fixed height for textareas */
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ff4081;
}
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.form-group .submit-btn {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: #ff4081;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.form-group .submit-btn:hover {
    background-color: #f50057;
}
/* --- New Admin Styles --- */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.btn-add-new {
    background-color: #ff4081;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
.btn-add-new:hover { background-color: #f50057; }

.admin-event-list table {
    width: 100%;
    border-collapse: collapse;
    background-color: #242424;
}
.admin-event-list th, .admin-event-list td {
    border: 1px solid #303030;
    padding: 12px;
    text-align: left;
}
.admin-event-list th {
    background-color: #333;
    font-family: 'Montserrat', sans-serif;
    color: #f0f0f0;
}
.admin-event-list td.actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.actions .btn-edit { color: #00ccff; text-decoration: none; font-weight: 600; }
.actions .btn-edit:hover { text-decoration: underline; }
.actions .btn-delete {
    background: none;
    border: 1px solid #ff4081;
    color: #ff4081;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.actions .btn-delete:hover { background-color: #ff4081; color: #fff; }

/* Form Enhancements */
.form-divider { border: 0; height: 1px; background-color: #333; margin: 25px 0; }
.form-row { display: flex; gap: 20px; }
.form-subgroup { flex: 1; }
.price-range-high { display: none; } /* Initially hidden by default */
.form-checkboxes-inline { display: flex; gap: 25px; align-items: center; }
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkbox-wrapper input[type="checkbox"] {
    margin: 0;
}
/* This new rule stops the label from pushing downwards */
.checkbox-wrapper label {
    margin-bottom: 0 !important; 
    display: inline-block !important;
    line-height: 1;
}
.form-group .form-checkbox { margin-right: 8px; }
.error-message { color: #ff5252; font-size: 0.85rem; display: block; margin-top: 5px; }

/* Flash Messages */
.flash-messages { list-style: none; padding: 0; margin: 0; }
.flash-messages li {
    padding: 15px;
    margin: 0 0 20px 0;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
}
.flash-messages li.success { background-color: #2E8B57; } /* Sea Green */
.flash-messages li.danger { background-color: #b22222; } /* Firebrick */
.flash-messages li.info { background-color: #00A3FF; } /* Energetic Blue */
/* --- Static Content Page Styling (About, Contact, etc.) --- */
.static-content {
    max-width: 750px;
    margin: 0 auto; /* Center the content block */
    padding: 25px 30px;
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
}

.static-content h3 {
    font-family: 'Montserrat', sans-serif;
    color: #ff4081; /* Pink accent for subheadings */
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.4rem;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.static-content h3:first-child {
    margin-top: 0;
}

.static-content p {
    margin-bottom: 15px;
    color: #d4d4d4;
}

.static-content p.contact-email a {
    color: #ffadc6; /* Lighter pink for email link */
    font-weight: 600;
    text-decoration: none;
}

.static-content p.contact-email a:hover {
    text-decoration: underline;
    color: #ff4081;
}