/* wp-content/plugins/swapmeet/css/swapmeet-booking.css */

/* --- Generelle Container Styles --- */
.swapmeet-container {
    display: flex;
    flex-direction: column; /* Stack children vertically: image then content */
    align-items: center; /* Center content horizontally */
    gap: 30px; /* Space between image and content area */
    max-width: 1200px; /* Optional: Max width for the entire container */
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Full width image container at the top */
.swapmeet-image-full-width {
    width: 100%;
    text-align: center; /* Center the image */
    margin-bottom: 0; /* No extra margin here, gap is handled by parent */
}

.swapmeet-image-full-width img {
    max-width: 100%; /* Ensure image scales down */
    height: auto;
    border-radius: 8px; /* Slightly rounded corners for the image */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Container for the two columns (form and info) */
.swapmeet-content-area {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 30px; /* Space between the two columns */
    width: 100%; /* Occupy full width of parent .swapmeet-container */
    justify-content: center; /* Center columns if they don't fill width */
}

.swapmeet-form-container {
    text-align: left;
    flex: 1; /* Allow form to grow */
    min-width: 300px; /* Minimum width before wrapping */
    padding: 15px; /* Add some padding around the form */
    border: 1px solid #eee; /* Light border around form */
    border-radius: 8px;
    background-color: #fcfcfc;
}

.swapmeet-info-container {
    text-align: left;
    flex: 1; /* Allow info box to grow */
    min-width: 300px; /* Minimum width before wrapping */
    padding: 15px; /* Add some padding around info */
    border: 1px solid #eee; /* Light border around info */
    border-radius: 8px;
    background-color: #f9f9f9;
}

.swapmeet-info-container h2,
.swapmeet-info-container h3,
.swapmeet-info-container h4 {
    color: #333;
    margin-top: 10px;
    margin-bottom: 8px;
}
.swapmeet-info-container h4 {
	font-size: 16px;
    font-weight: 700;
}

.swapmeet-info-container ul {
    list-style: disc;
    margin-left: 20px;
    padding: 0;
    margin-bottom: 10px;
}

.swapmeet-info-container ul li {
    margin-bottom: 5px;
    color: #555;
    line-height: 1.4;
}

.swapmeet-info-container ul li strong {
    color: #000; /* Make prices stand out */
}


.swapmeet-form-container form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Standard afstand mellem form elementer */
}

.swapmeet-form-container label {
    font-weight: bold;
    margin-top: 5px; /* Lidt afstand over labels */
}

/* Generel styling for inputfelter og select-bokse, undtagen de specifikke */
.swapmeet-form-container input:not([type="radio"]),
.swapmeet-form-container select:not(.swapmeet-seat-select),
.swapmeet-form-container select:not(.swapmeet-breakfast-qty):not(.swapmeet-lunch-qty) {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 100%; /* Sørg for at inputfelter fylder deres container */
    box-sizing: border-box; /* Inkluder padding og border i bredden */
    max-width: 280px; /* Lidt bredere for læsbarhed - standard bredde */
}

.swapmeet-form-container button[type="submit"] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 12px 20px; /* Lidt større knap */
    border-radius: 5px;
    font-size: 18px; /* Lidt større tekst */
    cursor: pointer;
    transition: background 0.3s ease;
    width: auto; /* Knappen skal ikke fylde hele bredden som standard */
    align-self: flex-end; /* Juster knappen til højre */
	margin-left: 10px; /* Afstand til Total pris på mindre skærme */
}

.swapmeet-form-container button[type="submit"]:hover {
    background-color: #218838;
}

/* Styling for containeren der holder pris og knap */
.swapmeet-checkout-footer {
    display: flex; /* Aktiver Flexbox */
    align-items: center; /* Centrer elementer vertikalt */
    justify-content: space-between; /* Fordel elementerne i hver ende */
    padding: 10px 0;
    border-top: 1px solid #ccc;
}

/* Sørg for at totalpris-teksten ikke strækker sig unødvendigt */
.swapmeet-checkout-footer .total-price-display {
    margin: 0;
}

/* Fjern standard margin fra p-tagget i totalpris */
.swapmeet-checkout-footer .total-price-display p {
    margin: 0;
    font-size: 1.1em;
}

/* Styling for at sikre, at fejlbeskeden dominerer bredden */
#swapmeet-messages {
    width: 100%;
    margin-bottom: 15px; /* Tilføjer afstand under beskeden */
    box-sizing: border-box; 
    
    /* VIGTIGT: Tvinger elementet til at opføre sig som en blok, 
       hvis dets forælder (.swapmeet-checkout-footer) bruger flex eller grid, 
       og sikrer at det tager hele bredden. */
    display: block; 
}


/* ----------------------------------------------------------------
   MEDIA QUERY: Mobilvisning (mindre end f.eks. 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .swapmeet-checkout-footer {
        flex-direction: column; /* Skift fra række til kolonne (stabler) */
        align-items: flex-end; /* Juster alt indhold (pris og knap) til højre */
        gap: 10px; /* Tilføj afstand mellem pris og knap */
    }

    /* Totalpris skal stadig sidde til højre */
    .swapmeet-checkout-footer .total-price-display {
        width: 100%; /* Gør den fuld bredde for at sikre at align-items: flex-end virker */
        text-align: right; /* Teksten skal være højrejusteret */
    }
    
    /* Knappen skal også sidde til højre og fylde mindre */
	.swapmeet-form-container button[type="submit"] {
        width: auto; /* Tillad knappen at krympe til sit indhold */
        align-self: flex-end; /* Placer knappen i højre side */
    }
}


.swapmeet-error-box {
    background-color: #ffcccc;
    color: #dc3545; /* En mere standard rød farve */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px; /* Afstand under fejlmeddelelse */
    border: 1px solid #dc3545;
}

.swapmeet-success-box {
    background-color: #d4edda; /* En mere standard grøn farve */
    color: #28a745;
    padding: 20px; /* Lidt mere padding for succes */
    border-radius: 5px;
    margin-bottom: 20px; /* Afstand under succesmeddelelse */
    text-align: center; /* Centrer teksten */
    font-size: 1.1em; /* Lidt større tekst */
    border: 1px solid #28a745;
}

/* --- Pladsvalg Sektion Styles --- */

/* Generel container for pladsvælgere */
#seat_select_container {
    display: flex;
    flex-direction: column; /* Stabler dem vertikalt */
    gap: 15px; /* Afstand mellem hver .swapmeet-seat-booking-entry */
    margin-bottom: 0px; /* Afstand under hele pladsvælger-sektionen */
}

/* Styling for hver enkelt plads-valg gruppe, inkl. måltidsvalg */
.swapmeet-seat-booking-entry {
    display: flex;
    /* Fjern flex-wrap her, da vi nu kontrollerer layout mere præcist */
    flex-direction: column; /* **NY: Stabler indholdet vertikalt** (pladsvalg, så måltider, så knap) */
    gap: 15px; /* Mellemrum mellem plads-select, måltids-gruppe og knap */
    margin-bottom: 0; /* Handled by parent gap */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    align-items: flex-start; /* **NY: Justerer elementer til venstre** */
}

.swapmeet-seat-select-wrapper {
    max-width: 100%; /* Sørg for at den stadig kan skrumpe på små skærme */
}

.swapmeet-seat-select-wrapper label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Styling for select-boksen - Gælder for ALLE .swapmeet-seat-select */
select.swapmeet-seat-select {
    width: 100%; /* Fylder containeren */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    height: auto;
    box-sizing: border-box;
    /* max-width er nu styret af .swapmeet-seat-select-wrapper */
}

/* CSS for SVG Pladser (swapmeet-booking.css) */

.swapmeet-seat {
    cursor: pointer; /* Indikerer, at elementet kan klikkes på */
    transition: all 0.2s ease-in-out; /* Glat overgangseffekt */
}

/* Plads er optaget/booket (Sættes af JS via PHP-data ved indlæsning) */
.swapmeet-seat.booked {
    fill: #dc3545 !important; /* Rød */
    stroke: #721c24;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Plads er ledig (Sættes af JS via PHP-data ved indlæsning) */
.swapmeet-seat.available {
    fill: #28a745; /* Grøn */
    stroke: #155724;
}

/* Plads er VALGT af brugeren (Sættes af JS ved klik) */
.swapmeet-seat.selected {
    fill: #ffc107; /* Gul/Orange */
    stroke: #856404;
	z-index:999;
}	
.swapmeet-seat.selected rect {	
    stroke-width: 4px; /* Gør rammen tydeligere, men kun på kassen */
	z-index:999;
}

/* Effekt ved hover (kun på ledige pladser) */
.swapmeet-seat:not(.booked):hover {
    fill: #43b95a; /* Lysere grøn ved hover */
    stroke-width: 2px;
}

/* Gør SVG-containeren fleksibel (hvis den er en del af et layout) */
.swapmeet-map-container {
    /* Sikrer at containeren bruger alt det tildelte rum i forældre-div'en */
    width: 100%; 
    max-width: 100%;
    margin-bottom: 20px; /* Tilføj evt. lidt afstand */
}
#swapmeet-floorplan text {
    pointer-events: none; /* Sikrer at klik går igennem til det underliggende <g> */
}
/* Tving SVG'en til at fylde containeren 100% */
#swapmeet-floorplan {
    width: 100%;
    height: auto; /* Sikrer at proportionerne (fra viewBox) bevares */
    display: block; /* Vigtigt for at undgå hvidt rum under SVG'en */
}

/* --- NYE STYLER FOR MÅLTIDSANTAL DROPDOWNS --- */

/* Container for både morgenmad og middagsmad tilvalg */
.swapmeet-meal-options-group {
    display: flex; /* Sørger for at .swapmeet-meal-item'erne står side om side */
    gap: 10px; /* Mellemrum mellem de to måltidsdropdowns */
    /* **NY: Fjern den faste bredde herfra** - den skal fylde .swapmeet-seat-booking-entry's bredde */
    width: 100%; /* **NY: Sørg for den fylder hele bredden af sin parent (.swapmeet-seat-booking-entry)** */
    max-width: 280px; /* **NY: Begræns den samlede bredde til pladsdropdownens bredde** */
    box-sizing: border-box;
    align-items: flex-end; /* Juster til bunden som de andre elementer */
    flex-wrap: wrap; /* Tillad wrap på små skærme */
}

/* Container for hvert enkelt morgenmad/middagsmad felt (label + select) */
.swapmeet-meal-item {
    display: flex;
    flex-direction: column; /* Stabler label over select */
    flex: 1; /* Gør at de fylder lige meget i .swapmeet-meal-options-group */
    min-width: 120px; /* Minimum bredde før de wrappes under hinanden */
}

.swapmeet-meal-item label {
    font-weight: bold;
    font-size: 0.85em; /* Lidt mindre tekst til labels */
    margin-bottom: 2px; /* Mindre afstand til select */
    white-space: nowrap; /* Undgå at teksten "Antal Morgenmad" breaker */
}

.swapmeet-breakfast-qty,
.swapmeet-lunch-qty {
    width: 100%; /* Fyld tilgængelig plads i dens lille container */
    padding: 5px; /* Mindre padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* Mindre skriftstørrelse */
    height: auto;
    box-sizing: border-box;
    flex-shrink: 0; /* Forhindrer dem i at skrumpe */
}

/* --- Knap Styles (Tilføj/Fjern Plads + Tilbage-knap) --- */
/* Fælles styles for "Tilføj en plads mere" og "Tilbage til oversigten" */
#add_seat_button, #back_to_overview_button { /* Kun for "Tilføj knappen" */
    background-color: #0073aa; /* Standard WordPress blå */
    width: 40%;
	color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Forhindrer knappen i at skrumpe */
    margin-top: 0px; /* Juster margin for at passe */
}

#add_seat_button:hover, #back_to_overview_button:hover {
    background-color: #005177; /* Mørkere blå ved hover */
}

.remove_seat_button {
    background-color: #dc3545; /* Rød for fjern-knap (brugte din eksisterende farve her) */
    color: white; /* Sikrer teksten er hvid */
    padding: 8px 12px; /* Ens padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Forhindrer knappen i at skrumpe */
    align-self: flex-start; /* **NY: Juster knappen til venstre** */
}

.remove_seat_button:hover {
    background-color: #c82333; /* Mørkere rød ved hover */
}

/* Total price display */
.total-price-display {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    font-size: 1.1em;
    font-weight: bold;
    text-align: right; /* Align total price to the right */
    max-width: 280px; /* Match form input width */
    box-sizing: border-box;
}

.total-price-display span {
    color: #28a745; /* Green color for the price */
}

/* --- Medieforespørgsler for Responsivt Design --- */
@media (max-width: 768px) {
    .swapmeet-container {
        padding: 15px;
        gap: 20px;
    }

    .swapmeet-content-area {
        flex-direction: column; /* Stabler kolonner vertikalt på små skærme */
        gap: 20px;
    }

    .swapmeet-form-container,
    .swapmeet-info-container {
        min-width: unset; /* Nulstil min-bredde på små skærme */
        width: 100%; /* Fuld bredde */
        padding: 10px; /* Lidt mindre padding på mobil */
    }

    /* Juster plads-vælger wrapper på små skærme */
    .swapmeet-seat-booking-entry {
        flex-direction: column; /* Stabler select og knap vertikalt på små skærme */
        align-items: flex-start;
        gap: 5px;
    }

    .swapmeet-seat-select-wrapper {
        flex: 0 0 100%; /* Fuld bredde på mobil */
    }

    .swapmeet-seat-select-wrapper label {
        text-align: left; /* Juster label tilbage til venstre */
        min-width: unset;
        display: block; /* Sørg for det stadig er en blok på mobil */
    }
    
    /* Måltidsvalg på mobil */
    .swapmeet-meal-options-group {
        flex: 0 0 100%; /* Fuld bredde på mobil */
        max-width: 100%;
        flex-direction: column; /* Stabler de to måltids-items vertikalt på mobil */
        align-items: flex-start;
        gap: 10px; /* Normalt mellemrum */
    }

    .swapmeet-meal-item {
        width: 100%; /* Hvert måltids-item fylder 100% på mobil */
        min-width: unset; /* Nulstil min-bredde */
    }

    .swapmeet-meal-item label {
        white-space: normal; /* Tillad tekstumbrydning på mobil */
    }

    .swapmeet-breakfast-qty,
    .swapmeet-lunch-qty {
        width: 100%; /* Fyld hele bredden på mobil */
        font-size: 16px; /* Gør skriftstørrelsen normal igen på mobil */
    }

    #add_seat_button,
	#back_to_overview_button,
    .remove_seat_button {
        width: 100%; /* Knapper fylder hele bredden */
        align-self: stretch; /* Fyld hele bredden for knapper på mobil */
    }

    .swapmeet-form-container input:not([type="radio"]),
    .total-price-display {
        max-width: 100%; /* Tillad at fylde hele bredden på mobil */
    }
	
}