/**
 * Seating Plan Styles for Event Bundle Products
 *
 * @copyright 2025 twofour digitale Agentur GmbH & Co. KG. All rights reserved.
 * @author Thomas Reichhart <thomas.reichhart@twofour.de>
 */

/* ==========================================================================
   Seating Room Container
   ========================================================================== */

.seating-room {
    width: 100%;
}

.seating-inner {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Table Row Layout
   ========================================================================== */

.seating-table-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .seating-table-row {
        gap: 0.75rem;
    }
}

@media (min-width: 768px) {
    .seating-table-row {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .seating-table-row {
        gap: 0.75rem;
    }
}

@media (min-width: 1280px) {
    .seating-table-row {
        gap: 2rem;
    }
}

/* ==========================================================================
   Individual Table
   ========================================================================== */

.seating-table {
    flex: none;
    text-align: center;
    position: relative;
}

/* Table width for standard rows */
.seating-table--standard {
    width: 4.5rem;   /* tr */
}

@media (min-width: 640px) {
    .seating-table--standard {
        width: 6rem;  /* sm:w-24 */
    }
}

@media (min-width: 768px) {
    .seating-table--standard {
        width: 7rem;  /* md:w-28 */
    }
}

@media (min-width: 1024px) {
    .seating-table--standard {
        width: 6rem;  /* lg:w-24 */
    }
}

@media (min-width: 1280px) {
    .seating-table--standard {
        width: 8rem;  /* xl:w-32 */
    }
}

/* Table width for back row */
.seating-table--back {
    width: 4rem;   /* tr */


}

@media (min-width: 640px) {
    .seating-table--back {
        width: 4.5rem;  /* sm:w-20 */
    }
}

/* ==========================================================================
   Table Bar (Center)
   ========================================================================== */

.seating-table-bar {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - 0.5rem);
    background-color: #deb887; /* amber-700 */
    border: 2px solid var(--hbr-ink);
}

/* Standard table bar width */
.seating-table-bar--standard {
    width: 0.75rem;  /* tr */
}

@media (min-width: 640px) {
    .seating-table-bar--standard {
        width: 1.5rem;  /* sm:w-6 */
    }
}

@media (min-width: 768px) {
    .seating-table-bar--standard {
        width: 2rem;  /* md:w-8 */
    }
}

@media (min-width: 1024px) {
    .seating-table-bar--standard {
        width: 1.5rem;  /* lg:w-6 */
    }
}

@media (min-width: 1280px) {
    .seating-table-bar--standard {
        width: 2.5rem;  /* xl:w-10 */
    }
}

/* Back row table bar - full width */
.seating-table-bar--back {
    width: 100%;
    height: 1.5rem;
    left: 0;
    transform: translateX(0);
}

/* ==========================================================================
   Table Caption ("Tisch 3")
   ========================================================================== */

.seating-table-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    /* Fallback keeps 7.9:1 contrast on the #deb887 table bar */
    color: var(--hbr-ink, #1f2937);
    pointer-events: none;
}

/* Standard table below sm: the bar is only ~8px wide inside its border, so just
   the number is shown, upright. The word stays in the accessibility tree, so
   screen readers still announce the full caption. Overflow stays visible because
   a two digit number is slightly wider than the bar. */
.seating-table-bar--standard .seating-table-label {
    writing-mode: horizontal-tb;
    overflow: visible;
    letter-spacing: 0;
    font-size: 0.7rem;
}

.seating-table-bar--standard .seating-table-word {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* From sm upwards the bar is wide enough for the full caption. It is rotated to
   run bottom to top, i.e. readable with the head tilted to the left. sideways-lr
   would do this in one declaration but is not supported across the browsers this
   shop serves. */
@media (min-width: 640px) {
    .seating-table-bar--standard .seating-table-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        overflow: hidden;
        font-size: 0.7rem;
    }

    .seating-table-bar--standard .seating-table-word {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}

@media (min-width: 768px) {
    .seating-table-bar--standard .seating-table-label {
        font-size: 0.8rem;
    }
}

@media (min-width: 1024px) {
    .seating-table-bar--standard .seating-table-label {
        font-size: 0.7rem;
    }
}

@media (min-width: 1280px) {
    .seating-table-bar--standard .seating-table-label {
        font-size: 0.85rem;
    }
}

/* Back row table: the bar runs horizontally, so the caption reads normally */
.seating-table-bar--back .seating-table-label {
    writing-mode: horizontal-tb;
    overflow: hidden;
    font-size: 0.75rem;
}

/* ==========================================================================
   Seats Container
   ========================================================================== */

.seating-seats {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

/* Back row seats padding for table bar */
.seating-seats--back {
    padding-top: 1.5rem;  /* pt-6 */
}

@media (min-width: 640px) {
    .seating-seats--back {
        padding-top: 1.5rem;  /* sm:pt-8 */
    }
}

@media (min-width: 768px) {
    .seating-seats--back {
        padding-top: 1.75rem;  /* md:pt-9 */
    }
}

@media (min-width: 1280px) {
    .seating-seats--back {
        padding-top: 1.5rem;  /* tr */
    }
}

/* ==========================================================================
   Individual Seat
   ========================================================================== */

.seating-seat {
    width: 50%;
    margin-bottom: 0.25rem;
}

.seating-seat--right {
    display: flex;
    justify-content: flex-end;
}

/* Seat wrapper (clickable label) */
.seating-seat-wrapper {
    position: relative;
    display: block;
    cursor: pointer;
    width: 1.75rem;   /* w-5 */
    height: 2rem;   /* h-6 */
}

@media (min-width: 640px) {
    .seating-seat-wrapper {
        width: 1.75rem;  /* sm:w-7 */
        height: 2rem;    /* sm:h-8 */
    }
}

@media (min-width: 768px) {
    .seating-seat-wrapper {
        width: 2rem;     /* md:w-8 */
        height: 2.15rem; /* md:h-9 */
    }
}

/* ==========================================================================
   Seat Number
   ========================================================================== */

.seating-seat-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    pointer-events: none;
    font-size:12px;
    color: var(--hbr-ink);
}

/* White text on colored seats (selected, sold-out, reserved) */
.seat-checkbox:checked + .seating-seat-number,
.seat-checkbox:disabled + .seating-seat-number {
    color: #fff;
}

@media (min-width: 640px) {
    .seating-seat-number {
        font-size: 14px;
    }
}

/* ==========================================================================
   Stage
   ========================================================================== */

.seating-stage {
    background-color: #1f2937; /* gray-800 */
    color: white;
    text-align: center;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Technik Label
   ========================================================================== */

.seating-technik {
    display: none;
    flex: none;
    align-items: center;
    background-color: #1f2937; /* gray-800 */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;

    @media (min-width: 500px) {
        display: flex;
    }
}

/* ==========================================================================
   Exit Spacer
   ========================================================================== */

.seating-exit-spacer {
    min-width: 1rem;  /* min-w-4 */
}

@media (min-width: 640px) {
    .seating-exit-spacer {
        min-width: 4rem;  /* sm:min-w-16 */
    }
}

/* ==========================================================================
   Legend
   ========================================================================== */

.seating-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb; /* gray-200 */
    font-size: 0.875rem;
}

.seating-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seating-legend-color {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--hbr-ink);
    border-radius: 0.125rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}