/* ===========================================================================
 * ssmerged.css  —  TEMPORARY multi-deck merge feature
 * ---------------------------------------------------------------------------
 * Styles for the merged multi-deck card + seat view. All seat/box rules mirror
 * the "-m" clones of ssmain.css classes (the "-m" suffix keeps the shared
 * ssmainjs.js handlers from firing on merged cards). Delete this file + its
 * enqueue in landpage.php to revert. See /plan.md.
 * ======================================================================== */

/* ---- header badges ---- */
.deck-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: #474694;
    border-radius: 10px;
    vertical-align: middle;
}

.tag.deck-tag {
    background-color: #eef;
    color: #474694;
}

.sfof-range {
    white-space: nowrap;
}

/* Mobile: the card rows become a flexbox (label | ":" | value). The "2 decks"
   badge widens the coach value and shrinks the fixed-width label, so "Coach No"
   wraps and its colon falls out of line. Pin the merged card's labels so they
   stay aligned like the single card; the value wraps instead. */
@media only screen and (max-width: 767px) {
    .eabzn-m .bldec .vliss {
        flex: 0 0 100px;
    }
    .eabzn-m .bldec .vsiss {
        flex: 0 0 15px;
    }
    .eabzn-m .bldec .coach-name-max-with {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ---- seat view zone: mirrors the single view (col-sm-5 maps / col-sm-7 panel) ---- */
.ebdzn-m .dm-wrap {
    background-color: #fff;
    padding: 10px;
}

.deck-maps,
.deck-panels {
    display: block;
}

/* one map per deck, stacked (lower on top, upper below — DOM order set in PHP) */
.deck-map-part {
    margin-bottom: 25px;
    transition: opacity 0.2s;
}

.deck-part-title {
    font-weight: 700;
    color: #084e6f;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}

/* active-deck interaction: the non-active deck(s) grey out and stop taking clicks */
.deck-map-part.deck-disabled {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(100%);
}

/* one panel per deck; only the active deck's panel shows */
.deck-panel-part {
    display: none;
}

.deck-panel-part.active {
    display: block;
}

.deck-legend {
    margin-bottom: 10px;
}

.deck-legend > div {
    display: inline-block;
    margin-right: 15px;
}

.deck-hint {
    margin: 0 0 12px;
    color: #888;
    font-size: 12px;
}

.tnd-m {
    border: 1px solid red;
    text-align: center;
    margin-bottom: 10px;
    padding: 2px;
}

.deck-error {
    padding: 15px;
}

/* ---- seat matrix (clones of ssmain.css .mvbs/.abs/.bbs/.dbs/.smt/.sbdt/.bpts) ---- */
.mvbs-m {
    width: 35px;
    margin: 2px;
    text-align: center;
    line-height: 30px;
    height: 30px;
}

.abs-m {
    background-color: green;
    cursor: pointer;
}

.bbs-m {
    background-color: #c60000;
    cursor: not-allowed;
}

.abs-m,
.bbs-m {
    color: white;
    box-shadow: 0 0 3px #07363e;
}

.dbs-m {
    box-shadow: 0 0 0 !important;
    background: none !important;
}

.abs-m:hover {
    opacity: 0.8;
}

.ssbgclr-m {
    background-color: #ffffa3 !important;
    color: black;
}

.smt-m {
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 0 3px #07363e;
    width: auto;
}

.smt-m td {
    padding: 5px !important;
    vertical-align: middle;
    border: none !important;
}

.sbdt-m {
    width: 100%;
    max-width: 500px;
}

.sbdt-m th,
.sbdt-m td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
}

.bpts-m {
    padding: 5px;
    min-width: 250px;
    min-height: 30px;
}

.csdb-m {
    width: 15px;
    height: 15px;
    margin: auto !important;
    border: 1px solid gray;
    line-height: 12px;
    box-shadow: 0 0 3px #999;
    color: red;
    cursor: pointer;
}

.csdb-m:hover {
    border: 1px solid red;
    font-weight: bold;
}

.imfgn-m {
    color: red;
}

.rsdz-m {
    margin: 0;
    padding: 5px;
    border: 1px solid #ccc;
    height: 25px;
    line-height: 15px;
    width: 23px;
    text-align: center;
    cursor: pointer;
}

.rsdz-m:hover {
    border: 1px solid red;
    color: red;
}