/* ==========================================================================
   Definitive Unified Stylesheet for MediaPaou - V35.0 FINAL (CORRECTED)
   ========================================================================== */

/* --- Main Container & Theme --- */
.mediapaou-reservation-form { position: relative; max-width: 1200px; margin: 30px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 20px; background-color: #1a2a6c; color: #ffffff; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.wrap.mediapaou-admin-seat-map { background-color: #f0f0f1; padding: 20px; }
.mediapaou-reservation-form h2, .mediapaou-reservation-form h3 { text-align: center; margin-bottom: 20px; font-size: 1.8rem; color: #FFD700; font-weight: bold; }
.mediapaou-hero-image { width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; margin-top: 60px; }

/* --- FIX: Corrected Header Spacing & Title Color --- */
.mediapaou-event-info {
    padding: 10px 0 20px 0; /* Adds vertical breathing room */
    text-align: center;
}
.mediapaou-event-info h1 {
    color: #FFD700; /* Gold color for the title */
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.mediapaou-event-info .mediapaou-event-date {
    color: #ccc;
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.mediapaou-event-info .mediapaou-event-description {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    color: #ffffff; /* Ensures text is bright white */
    height: auto; /* Allows the container to grow to fit the text */
    overflow: visible; /* Prevents the text from being hidden or cut off */
     text-align: justify; /* This new line justifies the text */
}
/* --- END FIX --- */

/* --- Base Table & Seat Styles --- */
.table { background-color: white; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.1); aspect-ratio: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; }
.table-number { font-weight: bold; color: #1a2a6c; font-size: 1.2rem; }
.seats { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- DYNAMIC SEAT POSITIONING --- */
.seat, .seat-admin {
    position: absolute; width: 35px; height: 35px;
    border-radius: 50%; font-weight: bold; cursor: pointer;
    font-size: 0.8rem; display: flex; align-items: center; justify-content: center;
    top: 50%; left: 50%; margin: -17.5px 0 0 -17.5px;
    color: white;
    transform: 
        rotate(calc(var(--i) * (360deg / var(--seat-count)))) 
        translateY(65px) 
        rotate(calc(var(--i) * -1 * (360deg / var(--seat-count))));
}

/* --- Seat Statuses --- */
.seat.available { background-color: #4CAF50; }
.seat.taken, .seat.reserved { background-color: #F44336; cursor: not-allowed; }
.seat.selected { background-color: #FFD700 !important; color: #1a2a6c !important; }
.mediapaou-admin-seat-map .seat-admin.status-available { background-color: #4CAF50 !important; }
.mediapaou-admin-seat-map .seat-admin.status-taken, .mediapaou-admin-seat-map .seat-admin.status-reserved { background-color: #F44336 !important; cursor: pointer; }
.mediapaou-admin-seat-map .seat-admin:hover { box-shadow: 0 0 10px 3px #0073aa !important; z-index: 10 !important; }

/* --- Realistic Layout Elements (Dance Floor, Stage, etc.) --- */
.dance-floor, .stage, .head-table, .dance-floor-admin, .stage-admin, .head-table-admin { 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: rgba(0,0,0,0.4);
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    background-color: #c8a87e;
    background-image: 
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(to right, #c8a87e, #b4926b);
    background-size: 60px 60px, 60px 60px, 100% 100%;
    background-position: 0 0, 30px 30px, 0 0;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
.dance-floor, .dance-floor-admin { 
    grid-column: 2 / 4; 
    grid-row: 2 / 3; 
    min-height: 150px; 
    border-radius: 8px; 
    width: 100%; 
    font-size: 1.8em; 
}
/* --- FIX: Increased bottom margin for more space --- */
.stage, .stage-admin { 
    margin: 20px auto 50px auto; /* Increased bottom margin to 50px */
    width: 60%; 
    height: 80px; 
    font-size: 1.5em; 
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.3);
}
/* --- END FIX --- */
.head-table, .head-table-admin { 
    grid-column: 1 / -1; 
    height: 80px; 
    margin-bottom: 20px; 
    font-size: 1.5em; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 0 20px rgba(0,0,0,0.3);
    border-radius: 4px; 
}

/* --- Layout Wrappers --- */
.seat-map-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 40px; }
.seat-map-wrapper.layout-wedding { grid-template-columns: repeat(4, 1fr); }
.seat-map-wrapper.layout-ushape { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.seat-map-wrapper.layout-cabaret { position: relative; }

/* --- Form, Legend, Modal, and other styles --- */
.legend { display: flex; justify-content: center; gap: 20px; margin: 40px 0; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-color { width: 20px; height: 20px; border-radius: 4px; }
.legend-color.available { background-color: #4CAF50; }
.legend-color.selected { background-color: #FFD700; }
.legend-color.taken { background-color: #F44336; }

.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.clear-selection-btn { background: none; border: 1px solid #ff7b7b; color: #ff7b7b; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
#cart-summary-container { background: rgba(0,0,0,0.2); padding: 20px; border-radius: 8px; margin-bottom: 30px; }
#cart-summary-container h4 { margin-top: 0; color: #FFD700; }
.selected-seats-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.selected-seats-list li { background: #fff; color: #1a2a6c; padding: 5px 12px; border-radius: 20px; font-weight: 600; }
.cart-total { color: #FFD700; font-size: 1.3rem; font-weight: bold; margin-top: 15px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-control { width: 100%; padding: 12px; border: 1px solid #5c6c9a; border-radius: 5px; background-color: #2a3b7c; color: white; }
.form-control.error { border-color: #F44336 !important; }
.error-message { color: #ffbaba; font-size: 0.9em; margin-top: 5px; display: none; }
.payment-options { margin: 25px 0; }
.payment-option { margin-bottom: 12px; padding: 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; }
.btn-submit { width: 100%; padding: 15px; background-color: #FFD700; color: #1a2a6c; border: none; font-size: 1.2rem; font-weight: bold; cursor: pointer; }

.modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center; }
.modal-content { background-color: white; padding: 30px; border-radius: 8px; max-width: 500px; text-align: center; color: #333; position: relative; }
.modal-content .close-modal { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; cursor: pointer; color: #aaa; }
.success { color: #4CAF50; font-weight: bold; font-size: 1.2rem; }
.error-modal { color: #F44336; font-weight: bold; font-size: 1.2rem; }

/* --- MOBILE RESPONSIVE FIXES --- */
@media (max-width: 768px) {
    .mediapaou-reservation-form { padding: 10px; }
    .seat-map-wrapper { grid-template-columns: repeat(2, 1fr); gap: 25px; justify-items: center; }
    .seat-map-wrapper.layout-wedding { grid-template-columns: repeat(2, 1fr); }
    .dance-floor, .dance-floor-admin { grid-column: 1 / -1; order: 99; min-height: 100px; margin-top: 20px; font-size: 1.2em; }
    .stage, .stage-admin { width: 90%; height: 60px; font-size: 1.2em; }
    .head-table, .head-table-admin { font-size: 1.2em; height: 60px; }
    .table { width: 100%; }
    .seat, .seat-admin { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 0.7rem; transform: rotate(calc(var(--i) * (360deg / var(--seat-count)))) translateY(45px) rotate(calc(var(--i) * -1 * (360deg / var(--seat-count)))); }
    .form-grid { grid-template-columns: 1fr; }
}
/* Loading state styles */
.form-loading {
    opacity: 0.6;
    pointer-events: none;
}

.btn-submit:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.payment-instructions {
    margin: 15px 0;
    padding: 10px;
    border-radius: 5px;
}

.payment-instructions .alert {
    margin: 0;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}