/* ============================================
   NAPA — Seat Map Styles
   ============================================ */

/* Loading */
.sm-loading { text-align: center; padding: 60px 20px; }
.sm-spinner {
    width: 32px; height: 32px; border: 3px solid var(--color-warm-gray);
    border-top-color: var(--color-primary); border-radius: 50%;
    animation: sm-spin .7s linear infinite; margin: 0 auto 12px;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }
.sm-loading p { font-size: 13px; color: var(--color-text-light); }
.sm-msg { text-align: center; padding: 40px 20px; font-size: 14px; color: var(--color-text-mid); }
.sm-error { color: #991b1b; }

/* Stage indicator */
.sm-stage {
    background: linear-gradient(to bottom, var(--color-primary-deep), var(--color-primary));
    color: rgba(255,255,255,.6); text-align: center;
    padding: 10px; margin: 0 10% 24px; border-radius: 0 0 50% 50% / 0 0 20px 20px;
    font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
}

/* Levels (orchestra, mezzanine, etc.) */
.sm-level { margin-bottom: 20px; }
.sm-level-label {
    font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--color-text-light); margin-bottom: 8px; padding-left: 36px;
}
.sm-sections { display: flex; flex-direction: column; gap: 4px; }

/* Section */
.sm-section { margin-bottom: 8px; }
.sm-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px 6px 36px; margin-bottom: 2px;
}
.sm-section-name { font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.sm-section-info { font-size: 10px; color: var(--color-text-light); }

/* Rows */
.sm-rows { display: flex; flex-direction: column; gap: 2px; }
.sm-row { display: flex; align-items: center; gap: 4px; }
.sm-row-label {
    width: 28px; text-align: center; font-size: 10px; font-weight: 600;
    color: var(--color-text-light); flex-shrink: 0;
}
.sm-seats { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; flex: 1; }

/* Individual seat */
.sm-seat {
    width: 24px; height: 24px; border-radius: 4px 4px 6px 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 600; color: var(--color-text-light);
    transition: all .2s; position: relative;
    border: 1px solid transparent;
}

/* Available */
.sm-avail {
    background: color-mix(in srgb, var(--sec-color, var(--color-primary)) 10%, #fff);
    border-color: color-mix(in srgb, var(--sec-color, var(--color-primary)) 25%, transparent);
    color: var(--sec-color, var(--color-primary));
    cursor: pointer;
}
.sm-avail:hover {
    background: color-mix(in srgb, var(--sec-color, var(--color-primary)) 22%, #fff);
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Selected */
.sm-seat.sm-selected {
    background: var(--sec-color, var(--color-primary)) !important;
    color: #fff !important;
    border-color: var(--sec-color, var(--color-primary)) !important;
    transform: scale(1.15);
    z-index: 3;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--sec-color, var(--color-primary)) 40%, transparent);
}

/* Sold */
.sm-sold-seat {
    background: var(--color-warm-gray); color: transparent;
    cursor: not-allowed; opacity: .5;
}

/* Held by someone else */
.sm-held-seat {
    background: #fef3c7; border-color: #fde68a;
    color: transparent; cursor: not-allowed; opacity: .6;
}

/* Blocked / out of service */
.sm-blocked-seat {
    background: #f3f4f6; color: transparent;
    cursor: not-allowed; opacity: .3;
}
.sm-blocked-seat::after {
    content: '×'; color: #9ca3af; font-size: 12px;
    position: absolute; display: flex; align-items: center; justify-content: center;
}

/* Legend */
.sm-legend {
    display: flex; gap: 20px; justify-content: center;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--color-warm-gray); flex-wrap: wrap;
}
.sm-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-mid); }
.sm-dot { width: 14px; height: 14px; border-radius: 3px; }
.sm-available { background: color-mix(in srgb, var(--color-primary) 12%, #fff); border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); }
.sm-selected-dot { background: var(--color-primary); }
.sm-sold { background: var(--color-warm-gray); opacity: .5; }
.sm-held { background: #fef3c7; border: 1px solid #fde68a; }
.sm-blocked { background: #f3f4f6; opacity: .4; }

/* Selection summary panel */
.sm-empty { font-size: 13px; color: var(--color-text-light); text-align: center; padding: 20px; }
.sm-sel-list { display: flex; flex-direction: column; gap: 0; }
.sm-sel-item {
    display: grid; grid-template-columns: 60px 1fr 60px; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-warm-gray) 50%, transparent);
    font-size: 12px; align-items: center;
}
.sm-sel-label { font-weight: 700; font-family: monospace; letter-spacing: .5px; color: var(--color-ink); }
.sm-sel-info { color: var(--color-text-light); font-size: 11px; }
.sm-sel-price { text-align: right; font-weight: 600; color: var(--color-primary); }
.sm-sel-total {
    display: flex; justify-content: space-between; padding: 14px 0 0;
    margin-top: 8px; border-top: 2px solid var(--color-primary);
    font-size: 16px; font-weight: 700; font-family: var(--font-heading); color: var(--color-primary);
}

/* Toast */
.sm-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--color-ink); color: #fff; padding: 12px 24px; border-radius: 6px;
    font-size: 13px; font-weight: 500; z-index: 9999;
    opacity: 0; transition: all .3s var(--ease-smooth);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.sm-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Responsive */
@media (max-width: 768px) {
    .sm-seat { width: 20px; height: 20px; font-size: 7px; }
    .sm-seats { gap: 2px; }
    .sm-row-label { width: 22px; font-size: 9px; }
    .sm-section-header { padding-left: 22px; }
    .sm-level-label { padding-left: 22px; }
}
@media (max-width: 480px) {
    .sm-seat { width: 16px; height: 16px; font-size: 0; border-radius: 3px 3px 4px 4px; }
    .sm-seats { gap: 1.5px; }
}