/* =====================================================
 * Interactive Space Map — Frontend v5
 * Editorial-luxury aesthetic: serif display, mono numerics
 * Inspired by premium theatre tickets & boutique booking flows
 * ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

.ism-space-map{
    /* === DESIGN TOKENS — sage / cream / olive editorial palette === */
    --ism-bg: #ece8d8;        /* cream paper */
    --ism-surface: #fffdf6;   /* warm white card */
    --ism-surface-2: #e7e2d0; /* cream panel */
    --ism-ink: #2f3526;       /* dark-olive ink */
    --ism-ink-2: #5a5e4a;
    --ism-ink-3: #8f9078;
    --ism-line: #ddd6c2;
    --ism-line-2: #c7bfa6;
    --ism-accent: #4a5239;    /* dark olive — primary CTA / stage */
    --ism-accent-2: #c87d6b;  /* terracotta — accents */
    --ism-sage: #8a9a6b;      /* sage highlight */
    --ism-radius: 18px;
    --ism-radius-sm: 10px;
    --ism-shadow-sm: 0 1px 2px rgba(47,53,38,.05), 0 2px 8px rgba(47,53,38,.05);
    --ism-shadow-md: 0 4px 16px rgba(47,53,38,.07), 0 8px 32px rgba(47,53,38,.09);
    --ism-shadow-lg: 0 12px 40px rgba(47,53,38,.14), 0 24px 64px rgba(47,53,38,.16);

    --ism-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --ism-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    --ism-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    position: relative;
    font-family: var(--ism-font-body);
    color: var(--ism-ink);
    line-height: 1.55;
    max-width: 100%;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ism-space-map *, .ism-space-map *::before, .ism-space-map *::after { box-sizing: border-box; }

/* ========= HEADER ========= */
.ism-map-header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 18px 0 22px;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid var(--ism-line);
    margin-bottom: 16px;
}
.ism-map-title-wrap{ display:flex; flex-direction:column; gap:4px; }
.ism-map-eyebrow{
    font-family: var(--ism-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ism-ink-3);
}
.ism-map-title{
    margin: 0;
    font-family: var(--ism-font-display);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ism-ink);
    font-variation-settings: "opsz" 60;
}
.ism-legend{
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: var(--ism-ink-2);
    flex-wrap: wrap;
    font-weight: 500;
}
.ism-legend-item{ display:flex; align-items:center; gap:6px; }
.ism-legend-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 0 3px rgba(0,0,0,.05);
}

/* ========= MAP CONTAINER ========= */
.ism-map-container{
    position: relative;
    border-radius: var(--ism-radius);
    overflow: hidden;
    background: var(--ism-surface-2);
    border: 1px solid var(--ism-line);
    box-shadow: var(--ism-shadow-sm);
    touch-action: none;
}
.ism-frontend-canvas{
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: default;
    background:
        radial-gradient(circle at 20% 10%, rgba(138,154,107,.10), transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(200,125,107,.07), transparent 50%),
        var(--ism-surface-2);
}
.ism-frontend-canvas.ism-zoomed{ cursor: grab; }
.ism-frontend-canvas.ism-zoomed:active{ cursor: grabbing; }
.ism-spot-group .ism-clickable{ transition: fill-opacity .2s ease, stroke-width .2s ease, transform .2s ease; }
.ism-spot-group:hover .ism-clickable{
    fill-opacity: 1 !important;
    stroke: #fff;
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.15));
}
.ism-spot-group.ism-status-sold, .ism-spot-group.ism-status-disabled{ opacity: .42; }

/* ========= ZOOM CONTROLS ========= */
.ism-zoom-controls{
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--ism-radius-sm);
    padding: 4px;
    box-shadow: var(--ism-shadow-md);
    border: 1px solid var(--ism-line);
}
.ism-zoom-controls button{
    width: 32px; height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ism-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.ism-zoom-controls button:hover{ background: var(--ism-surface-2); }
.ism-zoom-controls button:active{ transform: scale(.92); }

/* ========= SELECTION BAR (Premium Ticket Stub) ========= */
.ism-selection-bar{
    position: sticky;
    bottom: 0;
    z-index: 100;
    margin-top: 18px;
    background: var(--ism-surface);
    border-radius: var(--ism-radius);
    box-shadow: var(--ism-shadow-lg);
    overflow: hidden;
    animation: ism-bar-in .5s cubic-bezier(.16,1,.3,1);
}
@keyframes ism-bar-in{
    from{ opacity:0; transform: translateY(20px); }
    to{ opacity:1; transform: translateY(0); }
}
/* Ticket perforation top edge */
.ism-selbar-perforation{
    height: 6px;
    background:
        radial-gradient(circle at 4px 6px, transparent 3px, var(--ism-surface) 3px),
        repeating-linear-gradient(90deg, var(--ism-line) 0 1px, transparent 1px 8px),
        var(--ism-surface);
    background-size: 8px 6px, 8px 6px, 100% 100%;
    background-position: 0 0, 0 3px, 0 0;
    background-repeat: repeat-x, repeat-x, no-repeat;
    border-bottom: 1px dashed var(--ism-line-2);
    position: relative;
}
.ism-selbar-perforation::before,
.ism-selbar-perforation::after{
    content: '';
    position: absolute;
    top: -6px;
    width: 12px;
    height: 12px;
    background: var(--ism-bg);
    border: 1px solid var(--ism-line-2);
    border-radius: 50%;
}
.ism-selbar-perforation::before{ left: -6px; }
.ism-selbar-perforation::after{ right: -6px; }

.ism-selbar-content{ padding: 18px 22px 18px; }

.ism-selbar-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.ism-selection-info{
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.ism-selection-label{
    font-family: var(--ism-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ism-ink-3);
}
.ism-selection-total{
    font-family: var(--ism-font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ism-ink);
    font-variation-settings: "opsz" 144;
}
.ism-selection-count{
    font-family: var(--ism-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--ism-ink-3);
    letter-spacing: 0.04em;
}

/* Timer */
.ism-selection-timer{
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ism-surface-2);
    border: 1px solid var(--ism-line);
    padding: 7px 12px;
    border-radius: 100px;
    font-family: var(--ism-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ism-ink);
    transition: all .3s ease;
}
.ism-timer-icon{ display: inline-flex; opacity: .7; }
.ism-timer-value{
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: center;
    letter-spacing: 0.02em;
}
.ism-timer-label{
    font-size: 10px;
    color: var(--ism-ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ism-selection-timer.ism-timer-warn{
    background: #fff0eb;
    border-color: #ffd4c2;
    color: #c43d1c;
    animation: ism-pulse 1s ease-in-out infinite;
}
@keyframes ism-pulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.04); box-shadow: 0 0 0 4px rgba(196,61,28,.08); }
}

/* Chips */
.ism-selection-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    max-height: 84px;
    overflow-y: auto;
    padding-right: 4px;
}
.ism-selection-chips::-webkit-scrollbar{ width: 4px; }
.ism-selection-chips::-webkit-scrollbar-thumb{ background: var(--ism-line-2); border-radius: 4px; }

.ism-chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ism-surface);
    border: 1px solid var(--ism-line);
    border-left: 3px solid var(--ism-sage);
    border-radius: 7px 100px 100px 7px;
    padding: 5px 7px 5px 12px;
    font-size: 12px;
    transition: all .15s ease;
    animation: ism-chip-in .25s cubic-bezier(.16,1,.3,1);
}
@keyframes ism-chip-in{
    from{ opacity:0; transform: scale(.85); }
    to{ opacity:1; transform: scale(1); }
}
.ism-chip:hover{
    background: #fff;
    border-color: var(--ism-line-2);
    transform: translateY(-1px);
    box-shadow: var(--ism-shadow-sm);
}
.ism-chip-label{
    font-family: var(--ism-font-display);
    font-weight: 600;
    color: var(--ism-ink);
    letter-spacing: -0.01em;
}
.ism-chip-price{
    font-family: var(--ism-font-mono);
    font-size: 11px;
    color: var(--ism-ink-2);
    font-weight: 500;
}
.ism-chip-x{
    width: 18px; height: 18px;
    border: none;
    background: rgba(26,24,20,.06);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ism-ink-2);
    transition: all .15s ease;
    padding: 0;
}
.ism-chip-x:hover{
    background: var(--ism-ink);
    color: #fff;
    transform: rotate(90deg);
}

/* Chip with guest stepper */
.ism-chip-main{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ism-chip-right{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.ism-chip-stepper{
    display:inline-flex; align-items:center; gap:6px;
    background: var(--ism-surface-2); border:1px solid var(--ism-line);
    border-radius:100px; padding:2px;
}
.ism-chip-step{
    width:22px; height:22px; border:none; border-radius:50%;
    background:#fff; color:var(--ism-ink); font-size:15px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--ism-shadow-sm);
    transition: background .15s ease, color .15s ease;
}
.ism-chip-step:hover{ background:var(--ism-accent); color:#fff; }
.ism-chip-guests{ font-family:var(--ism-font-mono); font-size:11px; color:var(--ism-ink-2); min-width:56px; text-align:center; }
.ism-chip-gnum{ font-weight:700; color:var(--ism-ink); }

/* Actions */
.ism-selection-actions{
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.ism-selection-clear{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 18px;
    border: 1px solid var(--ism-line);
    border-radius: 12px;
    background: var(--ism-surface);
    font-family: var(--ism-font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--ism-ink-2);
    transition: all .15s ease;
}
.ism-selection-clear:hover{
    background: var(--ism-surface-2);
    border-color: var(--ism-line-2);
    color: var(--ism-ink);
}
.ism-selection-clear svg{ opacity: .6; }

.ism-selection-checkout{
    flex: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border: none;
    border-radius: 12px;
    background: var(--ism-accent);
    color: #fff;
    font-family: var(--ism-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all .25s cubic-bezier(.16,1,.3,1);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.ism-selection-checkout::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s ease;
}
.ism-selection-checkout:hover:not(:disabled){
    background: #5c6647;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(47,53,38,.28);
}
.ism-selection-checkout:hover:not(:disabled)::before{ transform: translateX(100%); }
.ism-selection-checkout:hover:not(:disabled) .ism-checkout-arrow{ transform: translateX(3px); }
.ism-selection-checkout:active:not(:disabled){ transform: translateY(0) scale(.98); }
.ism-selection-checkout:disabled{ background: var(--ism-line-2); color: #fff; cursor: not-allowed; }
.ism-checkout-arrow{ transition: transform .25s ease; }

.ism-selection-notice{
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    min-height: 16px;
    font-weight: 500;
}
.ism-notice-error{ color: #c43d1c; }
.ism-notice-info{ color: #5c7d4a; }

/* ========= DETAIL PANEL (Ticket Card) ========= */
.ism-detail-panel{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: flex-end;
    justify-content: center;
}
.ism-detail-overlay{
    position: absolute;
    inset: 0;
    background: rgba(26,24,20,.4);
    opacity: 0;
    transition: opacity .35s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ism-panel-open .ism-detail-overlay{ opacity: 1; }

.ism-detail-content{
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    background: var(--ism-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 60px rgba(26,24,20,.25);
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.32,.72,0,1);
    overflow: hidden;
}
.ism-panel-open .ism-detail-content{ transform: translateY(0); }

/* Ticket stub — colored side panel */
.ism-detail-stub{
    position: relative;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    color: #fff;
    transition: background .4s ease;
}
.ism-detail-stub-pattern{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(255,255,255,.12) 0%, transparent 30%),
        radial-gradient(circle at 85% 70%, rgba(255,255,255,.08) 0%, transparent 30%),
        repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.04) 12px 13px);
    pointer-events: none;
}
.ism-detail-stub-content{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.ism-detail-stub-eyebrow{
    font-family: var(--ism-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: .75;
}
.ism-detail-stub-id{
    font-family: var(--ism-font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 144;
}
/* Stub perforation effect */
.ism-detail-stub::after{
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 12px;
    background:
        radial-gradient(circle at 6px center, transparent 5px, var(--ism-surface) 5px),
        radial-gradient(circle at calc(100% - 6px) center, transparent 5px, var(--ism-surface) 5px);
    pointer-events: none;
}

.ism-detail-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px; height: 32px;
    border: none;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    transition: all .15s ease;
}
.ism-detail-close:hover{ background: rgba(255,255,255,.28); transform: scale(1.08); }

.ism-detail-body{ padding: 24px 26px 28px; }

.ism-detail-badge{
    display: inline-block;
    padding: 5px 12px;
    border-radius: 100px;
    font-family: var(--ism-font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    background: var(--ism-ink);
    margin-bottom: 12px;
}
.ism-badge-table{ background: #4a5239; }
.ism-badge-seat{ background: #6f7d4f; }
.ism-badge-standing{ background: #9c6b4f; }
.ism-badge-zone{ background: #a85c49; }

.ism-detail-label{
    margin: 0 0 18px;
    font-family: var(--ism-font-display);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ism-ink);
    font-variation-settings: "opsz" 144;
}

/* Price block */
.ism-detail-price-block{
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--ism-line);
    border-bottom: 1px solid var(--ism-line);
    margin-bottom: 16px;
}
.ism-detail-price-label{
    font-family: var(--ism-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ism-ink-3);
    flex-shrink: 0;
}
.ism-detail-price{
    font-family: var(--ism-font-display);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ism-ink);
    font-variation-settings: "opsz" 144;
    margin-left: auto;
}

/* Status pill */
.ism-detail-status-wrap{ margin-bottom: 18px; }
.ism-detail-status{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-family: var(--ism-font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.ism-detail-status::before{
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ism-detail-status-available{ background: #e6ecd6; color: #4a5239; }
.ism-detail-status-held{ background: #e3edf5; color: #1c4a6b; }
.ism-detail-status-reserved{ background: #f6ecd2; color: #8a6a1c; }
.ism-detail-status-sold{ background: #f4ddd5; color: #a8492f; }
.ism-detail-status-disabled{ background: var(--ism-surface-2); color: var(--ism-ink-3); }

/* Description text */
.ism-detail-text-wrap{ margin-bottom: 16px; }
.ism-detail-text-label{
    display: block;
    font-family: var(--ism-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ism-ink-3);
    margin-bottom: 8px;
}
.ism-detail-text{
    margin: 0;
    font-size: 14px;
    color: var(--ism-ink-2);
    line-height: 1.65;
}

.ism-detail-divider{
    height: 1px;
    background: var(--ism-line);
    margin: 4px 0 14px;
}

/* Meta rows */
.ism-detail-meta{ display: flex; flex-direction: column; gap: 8px; }
.ism-detail-meta-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.ism-detail-meta-key{
    font-family: var(--ism-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ism-ink-3);
}
.ism-detail-meta-type{
    font-family: var(--ism-font-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--ism-ink);
}
.ism-detail-meta-id{
    font-family: var(--ism-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ism-ink);
    letter-spacing: 0.02em;
}

.ism-error{
    padding: 18px;
    background: #fff4e8;
    border: 1px solid #ffd9b3;
    border-radius: var(--ism-radius-sm);
    color: #8a4a1c;
    text-align: center;
    font-size: 14px;
    font-family: var(--ism-font-body);
}

/* ========= RESPONSIVE ========= */
@media(min-width: 768px){
    .ism-detail-panel{ align-items: center; justify-content: flex-end; padding: 24px; }
    .ism-detail-content{
        border-radius: 20px;
        max-width: 420px;
        max-height: 92vh;
        transform: translateX(120%);
    }
    .ism-panel-open .ism-detail-content{ transform: translateX(0); }
    .ism-map-title{ font-size: 36px; }
    .ism-selection-bar{ border-radius: var(--ism-radius); }
}
@media(min-width: 1024px){
    .ism-space-map{ max-width: 1180px; }
    .ism-map-title{ font-size: 42px; }
}
@media(max-width: 400px){
    .ism-map-header{ flex-direction: column; align-items: flex-start; gap: 12px; }
    .ism-legend{ gap: 12px; font-size: 11px; }
    .ism-detail-label{ font-size: 26px; }
    .ism-detail-price{ font-size: 30px; }
    .ism-selection-total{ font-size: 26px; }
    .ism-selection-checkout{ font-size: 13px; padding: 12px 16px; }
    .ism-selbar-content{ padding: 16px; }
}

/* Focus ring */
.ism-spot-group:focus-visible .ism-clickable,
.ism-selection-checkout:focus-visible,
.ism-detail-close:focus-visible,
.ism-zoom-controls button:focus-visible{
    outline: 2px solid var(--ism-accent-2);
    outline-offset: 3px;
}

@media print{ .ism-detail-panel, .ism-legend, .ism-zoom-controls, .ism-selection-bar{ display: none !important; } }