/* FSS Frontend Styles - High Contrast v3.10.7 */

/* MODAL BASIS */
.fss-modal {
    position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
}
.fss-modal-content {
    background-color: #fff; margin: auto; padding: 0; border: 1px solid #555;
    width: 90%; max-width: 1000px; height: 90%; max-height: 800px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; flex-direction: column;
    border-radius: 4px; overflow: hidden;
}
.fss-modal-header {
    padding: 15px 20px; background: #f1f1f1; border-bottom: 1px solid #ccc;
    display: flex; justify-content: space-between; align-items: center;
}
.fss-modal-header h3 { margin: 0; font-size: 18px; color: #000000; font-weight: 700; }
.fss-close { color: #555; font-size: 28px; font-weight: bold; cursor: pointer; border: none; background: none; }
.fss-close:hover { color: #000; }
.fss-modal-body { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; background: #fff; }
.fss-canvas-container { flex: 1; overflow: hidden; position: relative; background: #f9f9f9; cursor: grab; }
.fss-canvas-container:active { cursor: grabbing; }
.fss-canvas-wrapper { transform-origin: center center; transition: transform 0.1s ease-out; }

/* --- SEAT STYLES --- */

.fss-seat {
    box-sizing: border-box;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800; /* Sehr fett für Lesbarkeit */
    color: #000000 !important; /* Standard Text: Schwarz */
}

/* 1. Verfügbar: Weißer Grund, Blauer Rand, Schwarze Schrift */
.fss-seat.available {
    background-color: #ffffff;
    border: 2px solid #0073aa;
    color: #000000 !important;
}
.fss-seat.available:hover {
    background-color: #e6f0f5;
    transform: scale(1.1);
    z-index: 100;
    border-color: #005b8a;
}

/* 2. Belegt: Grau mit Muster */
.fss-seat.unavailable, .fss-seat.blocked {
    background-color: #e0e0e0;
    border: 1px solid #999;
    color: #555 !important;
    cursor: not-allowed;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent);
    background-size: 4px 4px;
}

/* 3. Ausgewählt: Dunkelblau, Weiße Schrift */
.fss-seat.selected {
    background-color: #0073aa !important;
    border: 2px solid #005b8a !important;
    color: #ffffff !important;
}
.fss-seat.selected::after { content: "✓"; font-size: 80%; margin-left: 1px; }

/* 4. Im Warenkorb: Hellgelb, Orange Rand, Dunkler Text */
.fss-seat.in-cart {
    background-color: #fff8e1;
    border: 2px dashed #d35400;
    color: #d35400 !important;
}
.fss-seat.in-cart:hover { background-color: #ffe0b2; cursor: pointer; }
.fss-seat.in-cart::after { content: "✕"; font-size: 80%; opacity: 0.6; margin-left: 1px; }

/* 5. Reserviert (Fremd) */
.fss-seat.reserved {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404 !important;
    opacity: 0.7;
}

/* --- LEGENDE (High Contrast) --- */
.fss-legend { 
    padding: 12px 20px; 
    background: #fff; 
    border-top: 1px solid #ccc; 
    display: flex; 
    gap: 20px; 
    flex-wrap: wrap; 
    font-size: 13px; 
}
.fss-legend-item { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    color: #000000 !important; /* Tiefschwarz */
    font-weight: 700;          /* Fett */
}
.fss-legend-color { width: 18px; height: 18px; border-radius: 3px; display: inline-block; }

/* Legend Colors Matching Seats */
.fss-legend-color.available { background: #fff; border: 2px solid #0073aa; }
.fss-legend-color.selected { background: #0073aa; border: 1px solid #005b8a; }
.fss-legend-color.reserved { background: #fff3cd; border: 2px solid #ffeeba; }
.fss-legend-color.in-cart { background: #fff8e1; border: 2px dashed #d35400; }
.fss-legend-color.unavailable { background: #e0e0e0; border: 1px solid #999; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent); background-size: 4px 4px; }

/* Footer */
.fss-modal-footer {
    padding: 15px 20px; background: #f9f9f9; border-top: 1px solid #ccc;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.fss-selected-count { font-weight: bold; color: #000; }

@media (max-width: 600px) {
    .fss-modal-footer { flex-wrap: wrap; justify-content: center; }
    .fss-selected-count { width: 100%; text-align: center; margin-bottom: 10px; order: -1; }
    .fss-apply, .fss-cancel { flex-grow: 1; }
}

/* Tooltip */
#fss-tooltip {
    position: absolute; background: rgba(0,0,0,0.95); color: #fff; padding: 6px 12px;
    border-radius: 4px; font-size: 13px; pointer-events: none; z-index: 100000;
    white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.3); font-weight: 600;
}