/**
 * Custom Seat Color Scheme
 * Based on Italian train booking system design
 * 
 * Color Legend:
 * - #428F48 (Green) - Available seats (TEXT ONLY)
 * - #EDBB35 (Orange) - Rollover/Selected/In Cart (TEXT ONLY)
 * - #B5392C (Red) - Unavailable/Booked/Reserved (TEXT ONLY)
 * 
 * CRITICAL: ALL seats have WHITE background (#FFFFFF)
 * ONLY the seat number text color changes based on state
 * This CSS ONLY changes colors, not the seat structure/design
 */

/* ========================================
   NEW SEAT DESIGN STRUCTURE
   Seat with headrest and side arms
   ======================================== */

/* Seat wrapper - ensure proper positioning */
div.mp_seat_item {
    position: relative !important;
    width: 70px !important;
    height: 80px !important;
}

/* Main seat container */
div.mp_seat {
    position: relative !important;
    width: 70px !important;
    height: 80px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide the old seat_visual element */
div.mp_seat .seat_visual {
    display: none !important;
}

/* Create headrest using ::before pseudo-element */
div.mp_seat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 15px;
    background-color: #8b7355;
    border-radius: 8px 8px 0 0;
    z-index: 1;
}

/* Create left arm using mp_seat_item::before pseudo-element */
div.mp_seat_item::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -25px;
    width: 4px;
    height: 35px;
    background-color: #8b7355;
    border-radius: 4px 0 0 4px;
    z-index: 1;
    pointer-events: none;
}

/* Create right arm using mp_seat_item::after pseudo-element */
div.mp_seat_item::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 50%;
    transform: translateX(50%);
    margin-right: -25px;
    width: 4px;
    height: 35px;
    background-color: #8b7355;
    border-radius: 0 4px 4px 0;
    z-index: 1;
    pointer-events: none;
}

/* Seat number positioning */
div.mp_seat .seat_number {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1 !important;
    z-index: 10 !important;
    background: transparent !important;
}

/* ========================================
   SEAT BACKGROUND COLORS ONLY
   Keep the original seat design intact
   ======================================== */

/* Available Seats - White background */
div.seat_available .seat_visual,
div.mp_seat.seat_available .seat_visual,
table tbody tr th div.mp_seat_item div.seat_available .seat_visual,
table tbody tr th div.mp_seat_item div.mp_seat.seat_available .seat_visual,
.wbtm_seat_plan_lower table tbody tr th div.mp_seat.seat_available .seat_visual,
.wbtm_cabin_seat_plan table tbody tr th div.mp_seat.seat_available .seat_visual,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_available .seat_visual,
div.wbtm_bus_list_area div.wbtm_cabin_seat_plan div.seat_available .seat_visual {
    background-color: #FFFFFF !important;
}

/* Selected Seats - White background (not orange background) */
div.seat_selected.seat_available .seat_visual,
div.mp_seat.seat_selected.seat_available .seat_visual,
div.mp_seat_item:hover div.seat_selected.seat_available .seat_visual,
table tbody tr th div.mp_seat_item div.seat_selected.seat_available .seat_visual,
.wbtm_cabin_seat_plan .seat_selected.seat_available .seat_visual,
.wbtm_cabin_seat_plan .mp_seat_item:hover .seat_selected.seat_available .seat_visual {
    background-color: #FFFFFF !important;
}

/* Hover State - Keep white background */
div.mp_seat_item:hover div.seat_available .seat_visual,
div.mp_seat_item:hover div.mp_seat.seat_available .seat_visual,
.wbtm_cabin_seat_plan .mp_seat_item:hover .seat_available .seat_visual {
    background-color: #FFFFFF !important;
}

/* In Cart - White background */
div.seat_in_cart .seat_visual,
div.mp_seat.seat_in_cart .seat_visual,
table tbody tr th div.mp_seat_item div.seat_in_cart .seat_visual,
table tbody tr th div.mp_seat_item div.mp_seat.seat_in_cart .seat_visual,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_in_cart .seat_visual,
div.wbtm_bus_list_area div.wbtm_cabin_seat_plan div.seat_in_cart .seat_visual {
    background-color: #FFFFFF !important;
}

/* Booked/Unavailable Seats - White background */
div.seat_booked .seat_visual,
div.mp_seat.seat_booked .seat_visual,
table tbody tr th div.mp_seat_item div.seat_booked .seat_visual,
table tbody tr th div.mp_seat_item div.mp_seat.seat_booked .seat_visual,
.wbtm_seat_plan_lower table tbody tr th div.mp_seat.seat_booked .seat_visual,
.wbtm_cabin_seat_plan table tbody tr th div.mp_seat.seat_booked .seat_visual,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_booked .seat_visual,
div.wbtm_bus_list_area div.wbtm_cabin_seat_plan div.seat_booked .seat_visual {
    background-color: #FFFFFF !important;
}

/* Reserved Seats - White background */
div.seat_booked.seat_reserved .seat_visual,
div.mp_seat.seat_booked.seat_reserved .seat_visual,
table tbody tr th div.mp_seat_item div.seat_booked.seat_reserved .seat_visual,
table tbody tr th div.mp_seat_item div.mp_seat.seat_booked.seat_reserved .seat_visual,
.wbtm_seat_plan_lower table tbody tr th div.mp_seat.seat_booked.seat_reserved .seat_visual,
.wbtm_cabin_seat_plan table tbody tr th div.mp_seat.seat_booked.seat_reserved .seat_visual {
    background-color: #FFFFFF !important;
}

/* ========================================
   SEAT NUMBER TEXT COLORS
   ONLY text color changes, not background
   ======================================== */

/* Available Seats - Green Number */
div.seat_available .seat_number,
div.mp_seat.seat_available .seat_number,
table tbody tr th div.mp_seat_item div.seat_available .seat_number,
table tbody tr th div.mp_seat_item div.mp_seat.seat_available .seat_number,
.wbtm_seat_plan_lower table tbody tr th div.mp_seat.seat_available .seat_number,
.wbtm_cabin_seat_plan table tbody tr th div.mp_seat.seat_available .seat_number {
    color: #428F48 !important;
    font-weight: 600;
}

/* Hover State on Available Seats - Orange Number */
div.mp_seat_item:hover div.seat_available:not(.seat_selected) .seat_number,
div.mp_seat_item:hover div.mp_seat.seat_available:not(.seat_selected) .seat_number,
.wbtm_cabin_seat_plan .mp_seat_item:hover .seat_available:not(.seat_selected) .seat_number {
    color: #EDBB35 !important;
}

/* Selected Seats - Orange Number */
div.seat_selected.seat_available .seat_number,
div.mp_seat.seat_selected.seat_available .seat_number,
div.seat_available.seat_selected .seat_number,
div.mp_seat_item div.seat_selected.seat_available .seat_number,
div.mp_seat_item:hover div.seat_selected.seat_available .seat_number,
table tbody tr th div.mp_seat_item div.seat_selected.seat_available .seat_number,
.wbtm_seat_plan_area div.seat_selected.seat_available .seat_number,
.wbtm_cabin_seat_plan div.seat_selected.seat_available .seat_number,
.wbtm_seat_plan_lower div.seat_selected.seat_available .seat_number {
    color: #EDBB35 !important;
    font-weight: 600;
}

/* In Cart - Orange Number */
div.seat_in_cart .seat_number,
div.mp_seat.seat_in_cart .seat_number,
table tbody tr th div.mp_seat_item div.seat_in_cart .seat_number,
table tbody tr th div.mp_seat_item div.mp_seat.seat_in_cart .seat_number {
    color: #EDBB35 !important;
    font-weight: 600;
}

/* Booked/Unavailable Seats - Red Number */
div.seat_booked .seat_number,
div.mp_seat.seat_booked .seat_number,
table tbody tr th div.mp_seat_item div.seat_booked .seat_number,
table tbody tr th div.mp_seat_item div.mp_seat.seat_booked .seat_number,
.wbtm_seat_plan_lower table tbody tr th div.mp_seat.seat_booked .seat_number,
.wbtm_cabin_seat_plan table tbody tr th div.mp_seat.seat_booked .seat_number {
    color: #B5392C !important;
    font-weight: 600 !important;
}

/* Reserved Seats - Red Number */
div.seat_booked.seat_reserved .seat_number,
div.mp_seat.seat_booked.seat_reserved .seat_number,
table tbody tr th div.mp_seat_item div.seat_booked.seat_reserved .seat_number,
table tbody tr th div.mp_seat_item div.mp_seat.seat_booked.seat_reserved .seat_number,
.wbtm_seat_plan_lower table tbody tr th div.mp_seat.seat_booked.seat_reserved .seat_number,
.wbtm_cabin_seat_plan table tbody tr th div.mp_seat.seat_booked.seat_reserved .seat_number {
    color: #B5392C !important;
    font-weight: 600 !important;
}

/* ========================================
   LEGEND STYLING
   Brown/beige background for legend only
   ======================================== */

/* Legend container */
.wbtm_seat_legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background-color: #F5F5F5;
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.wbtm_seat_legend_title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-right: 10px;
}

.wbtm_legend_item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wbtm_legend_seat {
    width: 35px;
    height: 40px;
    border: 2px solid #8B7355;
    border-radius: 15px 15px 0 0;
    background-color: #A0826D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

/* Legend - Available (green text) */
.wbtm_legend_seat.legend_available {
    color: #428F48;
}

/* Legend - Selected (orange text) */
.wbtm_legend_seat.legend_selected {
    color: #EDBB35;
}

/* Legend - Unavailable (red text) */
.wbtm_legend_seat.legend_unavailable {
    color: #B5392C;
}

.wbtm_legend_label {
    font-size: 13px;
    color: #555;
}

/* ========================================
   CABIN HEADER STYLING (ITALIAN STYLE)
   Brown/beige background for header only
   ======================================== */

.wbtm_cabin_header {
    background: linear-gradient(135deg, #8B7355 0%, #A0826D 100%);
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wbtm_cabin_title {
    color: #FFFFFF !important;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wbtm_cabin_toggle_icon {
    color: #FFFFFF;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.wbtm_cabin_header.active .wbtm_cabin_toggle_icon {
    transform: rotate(180deg);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .wbtm_seat_legend {
        gap: 15px;
        padding: 12px;
    }

    .wbtm_legend_seat {
        width: 30px;
        height: 35px;
        font-size: 12px;
    }

    .wbtm_legend_label {
        font-size: 12px;
    }

    /* MOBILE: Ensure tooltip can be shown via JavaScript */
    div.mp_seat_item div.wbtm_seat_item_list {
        pointer-events: auto !important;
        touch-action: auto !important;
    }

    /* MOBILE: Make tooltip items easier to tap */
    div.mp_seat_item div.wbtm_seat_item_list li {
        padding: 10px 15px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* MOBILE: Prevent tooltip cutoff - reposition if near screen edge */
    div.mp_seat_item div.wbtm_seat_item_list {
        min-width: 200px !important;
        max-width: 90vw !important;
        white-space: nowrap !important;
    }

    /* MOBILE: For normal (non-rotated) seats - position tooltip centered above */
    div.mp_seat_item:not([class*="wbtm_seat_rotated"]) div.wbtm_seat_item_list {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 100% !important;
        top: auto !important;
        margin-bottom: 5px !important;
    }

    /* MOBILE: For seats on the left edge - use translateX(-35%) to prevent cutoff */
    table tbody tr th:first-child div.mp_seat_item div.wbtm_seat_item_list,
    table tbody tr th:nth-child(1) div.mp_seat_item div.wbtm_seat_item_list,
    table tbody tr th:nth-child(2) div.mp_seat_item div.wbtm_seat_item_list {
        left: 50% !important;
        transform: translateX(-35%) !important;
    }

    /* MOBILE: Arrow for left-aligned tooltips - positioned at 35% */
    table tbody tr th:first-child div.mp_seat_item div.wbtm_seat_item_list::before,
    table tbody tr th:nth-child(1) div.mp_seat_item div.wbtm_seat_item_list::before,
    table tbody tr th:nth-child(2) div.mp_seat_item div.wbtm_seat_item_list::before {
        left: 35% !important;
        transform: translateX(-50%) !important;
    }

    /* MOBILE: For seats on the right edge - use translateX(-66%) to prevent cutoff */
    table tbody tr th:last-child div.mp_seat_item div.wbtm_seat_item_list,
    table tbody tr th:nth-last-child(1) div.mp_seat_item div.wbtm_seat_item_list,
    table tbody tr th:nth-last-child(2) div.mp_seat_item div.wbtm_seat_item_list {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-66%) !important;
    }

    /* MOBILE: Arrow for right-aligned tooltips - positioned at 66% */
    table tbody tr th:last-child div.mp_seat_item div.wbtm_seat_item_list::before,
    table tbody tr th:nth-last-child(1) div.mp_seat_item div.wbtm_seat_item_list::before,
    table tbody tr th:nth-last-child(2) div.mp_seat_item div.wbtm_seat_item_list::before {
        left: 66% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    /* MOBILE: For rotated seats - show as centered modal */
    div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_90 div.wbtm_seat_item_list,
    div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_180 div.wbtm_seat_item_list,
    div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_270 div.wbtm_seat_item_list {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 !important;
    }

    /* MOBILE: Hide arrow for rotated seats (centered modal style) */
    div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_90 div.wbtm_seat_item_list::before,
    div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_180 div.wbtm_seat_item_list::before,
    div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_270 div.wbtm_seat_item_list::before {
        display: none !important;
    }
}

/* ========================================
   ENSURE SEAT ROTATION WORKS WITH NEW DESIGN
   ======================================== */

/* TEXT ROTATION MODE - Only rotate the seat number */
.wbtm_rotation_type_text.wbtm_seat_rotated_90 .mp_seat .seat_number,
.wbtm_seat_rotated_90 .mp_seat .seat_number {
    transform: rotate(90deg) translateX(-50%) !important;
    transform-origin: center center !important;
}

.wbtm_rotation_type_text.wbtm_seat_rotated_180 .mp_seat .seat_number,
.wbtm_seat_rotated_180 .mp_seat .seat_number {
    transform: rotate(180deg) translateX(-50%) !important;
    transform-origin: center center !important;
}

.wbtm_rotation_type_text.wbtm_seat_rotated_270 .mp_seat .seat_number,
.wbtm_seat_rotated_270 .mp_seat .seat_number {
    transform: rotate(270deg) translateX(-50%) !important;
    transform-origin: center center !important;
}

/* FULL SEAT ROTATION MODE - Rotate the entire mp_seat_item container */
.wbtm_rotation_type_full.wbtm_seat_rotated_90 {
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
}

.wbtm_rotation_type_full.wbtm_seat_rotated_180 {
    transform: rotate(180deg) !important;
    transform-origin: center center !important;
}

.wbtm_rotation_type_full.wbtm_seat_rotated_270 {
    transform: rotate(270deg) !important;
    transform-origin: center center !important;
}

/* Keep seat number unrotated in full rotation mode - counter-rotate the text */
.wbtm_rotation_type_full.wbtm_seat_rotated_90 .mp_seat .seat_number {
    transform: translateX(-50%) rotate(-90deg) !important;
}

.wbtm_rotation_type_full.wbtm_seat_rotated_180 .mp_seat .seat_number {
    transform: translateX(-50%) rotate(-180deg) !important;
    margin-top: -5px;
}

.wbtm_rotation_type_full.wbtm_seat_rotated_270 .mp_seat .seat_number {
    transform: translateX(-50%) rotate(-270deg) !important;
}

/* ========================================
   KEEP TOOLTIP UNROTATED - ALWAYS UPRIGHT
   CRITICAL: Tooltip appears ABOVE seat and stays readable
   ======================================== */

/* Normal seats (no rotation) - tooltip ABOVE seat */
div.mp_seat_item div.wbtm_seat_item_list {
    position: absolute !important;
    left: 50% !important;
    bottom: 100% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin-bottom: 5px !important;
    min-width: 150px !important;
}

/* Normal seats - arrow points DOWN to seat */
div.mp_seat_item div.wbtm_seat_item_list::before {
    position: absolute !important;
    content: "" !important;
    left: 50% !important;
    top: 100% !important;
    transform: translateX(-50%) !important;
    border: 10px solid transparent !important;
    border-top-color: var(--wbtm_color_theme) !important;
}

/* Text rotation mode - tooltip stays ABOVE (parent not rotated) */
div.mp_seat_item.wbtm_rotation_type_text div.wbtm_seat_item_list {
    position: absolute !important;
    left: 50% !important;
    bottom: 100% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin-bottom: 5px !important;
}

div.mp_seat_item.wbtm_rotation_type_text div.wbtm_seat_item_list::before {
    left: 50% !important;
    top: 100% !important;
    transform: translateX(-50%) !important;
    border: 10px solid transparent !important;
    border-top-color: var(--wbtm_color_theme) !important;
}

/* Full rotation mode - counter-rotate tooltip and position ABOVE */
/* 90 degree seat = -90 degree tooltip to stay upright, appears to the right */
div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_90 div.wbtm_seat_item_list {
    transform: rotate(-90deg) !important;
    transform-origin: left center !important;
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    bottom: auto !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
}

div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_90 div.wbtm_seat_item_list::before {
    left: -10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: 8px solid transparent !important;
    border-right-color: var(--wbtm_color_theme) !important;
}

/* 180 degree seat = -180 degree tooltip to stay upright, appears below (which is above rotated seat) */
div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_180 div.wbtm_seat_item_list {
    position: absolute !important;
    left: 50% !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 0px !important;
    transform: translateX(-50%) rotate(-180deg) !important;
    transform-origin: center top !important;
}

div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_180 div.wbtm_seat_item_list::before {
    left: 50% !important;
    bottom: 100% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    border: 8px solid transparent !important;
    border-bottom-color: var(--wbtm_color_theme) !important;
}

/* 270 degree seat = -270 degree tooltip to stay upright, appears to the left */
div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_270 div.wbtm_seat_item_list {
    transform: rotate(-270deg) !important;
    transform-origin: right center !important;
    position: absolute !important;
    right: 100% !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
}

div.mp_seat_item.wbtm_rotation_type_full.wbtm_seat_rotated_270 div.wbtm_seat_item_list::before {
    right: -10px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: 8px solid transparent !important;
    border-left-color: var(--wbtm_color_theme) !important;
}

/* Rotated seats maintain their state colors */
.wbtm_seat_rotated_90 .mp_seat.seat_available .seat_number,
.wbtm_seat_rotated_180 .mp_seat.seat_available .seat_number,
.wbtm_seat_rotated_270 .mp_seat.seat_available .seat_number {
    color: #428F48 !important;
}

.wbtm_seat_rotated_90 .mp_seat.seat_selected .seat_number,
.wbtm_seat_rotated_180 .mp_seat.seat_selected .seat_number,
.wbtm_seat_rotated_270 .mp_seat.seat_selected .seat_number {
    color: #EDBB35 !important;
}

.wbtm_seat_rotated_90 .mp_seat.seat_booked .seat_number,
.wbtm_seat_rotated_180 .mp_seat.seat_booked .seat_number,
.wbtm_seat_rotated_270 .mp_seat.seat_booked .seat_number {
    color: #B5392C !important;
}

/* Ensure rotated seats maintain the new design structure colors */
.wbtm_seat_rotated_90 .mp_seat::before,
.wbtm_seat_rotated_180 .mp_seat::before,
.wbtm_seat_rotated_270 .mp_seat::before,
.wbtm_seat_rotated_90::before,
.wbtm_seat_rotated_180::before,
.wbtm_seat_rotated_270::before,
.wbtm_seat_rotated_90::after,
.wbtm_seat_rotated_180::after,
.wbtm_seat_rotated_270::after {
    background-color: #8b7355 !important;
}

/* ========================================
   OVERRIDE ANY INLINE STYLES OR CSS VARIABLES
   ======================================== */

/* Force hide the old seat_visual element */
[class*="seat_"] .seat_visual,
[class*="mp_seat"] .seat_visual {
    display: none !important;
}

/* Ensure parent containers don't add backgrounds */
div.mp_seat.seat_booked,
div.mp_seat.seat_booked.seat_reserved,
div.mp_seat.seat_available,
div.mp_seat.seat_selected,
div.mp_seat.seat_in_cart {
    background-color: transparent !important;
    border: none !important;
}

/* ========================================
   MOBILE: keep seat numbers readable
   Fixes stacked/clipped digits on rotated seats
   ======================================== */
@media (max-width: 768px) {
    .wbtm_seat_plan_area .mp_seat .seat_number,
    .wbtm_seat_plan_upper .mp_seat .seat_number,
    .wbtm_cabin_seat_plan .mp_seat .seat_number,
    .wbtm_seat_rotated_90 .mp_seat .seat_number,
    .wbtm_seat_rotated_180 .mp_seat .seat_number,
    .wbtm_seat_rotated_270 .mp_seat .seat_number,
    .wbtm_rotation_type_text.wbtm_seat_rotated_90 .mp_seat .seat_number,
    .wbtm_rotation_type_text.wbtm_seat_rotated_180 .mp_seat .seat_number,
    .wbtm_rotation_type_text.wbtm_seat_rotated_270 .mp_seat .seat_number {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1 !important;
        display: inline-block !important;
        text-align: center !important;
    }

    .wbtm_rotation_type_full.wbtm_seat_rotated_90 .mp_seat .seat_number {
        transform: translate(-50%, -50%) rotate(-90deg) !important;
    }

    .wbtm_rotation_type_full.wbtm_seat_rotated_180 .mp_seat .seat_number {
        transform: translate(-50%, -50%) rotate(-180deg) !important;
    }

    .wbtm_rotation_type_full.wbtm_seat_rotated_270 .mp_seat .seat_number {
        transform: translate(-50%, -50%) rotate(-270deg) !important;
    }
}