/* Scroll container so a seat plan that is wider than the viewport (typical on
 * mobile) scrolls inside this box instead of dragging the whole page sideways.
 * Without this, horizontal swipes on the plan pan the entire body. */
.floorplan-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
svg#floorplan {
    display: block;
}

svg#floorplan rect {
    cursor: pointer;
}
svg#floorplan text {
    cursor: pointer;
}

svg#floorplan a.seatlink rect , svg#floorplan a.seatlink text {
    cursor: pointer;
}
svg#floorplan .g-element:hover > .rect-element.selectable {
    fill: transparent;
     stroke-width: 1px
}
svg#floorplan .rect-element.not-selectable {
    cursor: default;
}
svg#floorplan .rect-element.not-selectable + text {
    cursor: default;
}


.seat-tariff-select {
    width: 100%;
    max-width: 220px;
}

/* ---------------------------------------------------------------------------
 * Per-seat tariff control (<rf-seat-tariff>) + secondary action button.
 * Plain CSS (this file has no .less source) so colours are literals that match
 * the theme variables (variables.less): @textcolor #666, @red #e60303,
 * @roodfluweel-Color-2 #115D7E.
 * ------------------------------------------------------------------------- */

/* Less prominent, icon-only "secondary" action button (e.g. remove a seat). */
.button--secondary {
    min-width: 0;
    padding: 4px 8px;
    background-color: transparent;
    color: #115D7E;
    border: 1px solid #115D7E;
}
.button--secondary:hover {
    background-color: #f0f4f8;
    color: #115D7E;
    border: 1px solid #115D7E;
}
.button--secondary:disabled {
    background-color: #f5f5f5;
    color: #9d9d9d;
    border: 1px solid #d0d0d0;
    cursor: not-allowed;
}
.button--secondary:focus-visible {
    outline: 2px solid #115D7E;
    outline-offset: 2px;
}

.rf-seat-tariff__selector {
    margin-bottom: 6px;
}
.rf-seat-tariff__nudges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Radio list (≤4 tariffs) */
.rf-seat-tariff__radio-list {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rf-seat-tariff__radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.rf-seat-tariff__radio-input {
    margin: 0;
    flex-shrink: 0;
}

/* Price label shown next to tariff name in all modes */
.rf-seat-tariff__opt-price {
    color: #666666;
    font-size: 0.9em;
    white-space: nowrap;
}
.rf-seat-tariff__select {
    width: 100%;
    max-width: 220px;
}
.rf-seat-tariff__pwyw {
    margin-top: 6px;
}
.rf-seat-tariff__nudges {
    margin-bottom: 6px;
}
.rf-seat-tariff__suggested {
    font-size: 0.85em;
    color: #666666;
    margin-bottom: 4px;
}
.rf-seat-tariff__amount-label {
    display: block;
    font-size: 0.85em;
    margin-bottom: 2px;
}
.rf-seat-tariff__amount-field {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 160px;
}
.rf-seat-tariff__currency {
    color: #666666;
}
.rf-seat-tariff__amount-input {
    max-width: 110px;
}
.rf-seat-tariff__error {
    display: none;
    font-size: 0.85em;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Ticket card list (replaces the compact table in V2 view)
 * ------------------------------------------------------------------------- */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.ticket-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "seat   remove"
        "tariff tariff"
        "footer footer";
    gap: 6px 8px;
    padding: 12px 14px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    background-color: #ffffff;
}
.ticket-card__seat {
    grid-area: seat;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ticket-card__seat-id {
    font-weight: 600;
}
.ticket-card__context {
    font-size: 0.85em;
    color: #666666;
}
.ticket-card__tariff {
    grid-area: tariff;
}
.ticket-card__footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ticket-card__price {
    font-weight: 600;
}
.ticket-card__reservation-cost {
    font-size: 0.85em;
    color: #666666;
}
.ticket-card__remove {
    grid-area: remove;
    align-self: start;
}

@media (min-width: 480px) {
    .ticket-card {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "seat   tariff"
            "footer tariff";
    }
    .ticket-card__tariff {
        align-self: center;
    }
}