/* Event Details Page Styles (TicketNetwork-like layout) */
.event-details {
    padding: 1.5rem 0 3rem;
}

.event-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.event-title {
    font-size: 1.75rem;
    margin: 0 0 0.25rem 0;
}

.event-meta {
    color: var(--muted-text);
}

.event-cta .large {
    padding: 0.6rem 1rem;
    font-size: 1rem;
}

.event-content {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 1.5rem;
}

@media (max-width: 980px) {
    .event-content { grid-template-columns: 1fr; }
    .venue-map-col { order: 2; }
    .tickets-col { order: 1; }
}

.venue-map-card {
    position: sticky;
    top: 90px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 6px;
}

.seat-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.seat-map-wrap { text-align: center; }
.venue-map-image { width: 100%; height: auto; border-radius: 4px; }

.map-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 0.75rem; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text-color) }
.color-box { width:14px; height:14px; border-radius:3px; display:inline-block }

.tickets-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem }
.tickets-title { margin:0; font-size:1.25rem }
.tickets-controls select { padding:6px 8px }

.tickets-list { display:flex; flex-direction:column; gap:12px }

.ticket-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border-color); border-radius:8px; background:var(--surface) }
.ticket-thumb img { width:120px; height:80px; object-fit:cover; border-radius:6px }
.ticket-thumb { flex: 0 0 120px }

.ticket-info { flex:1 }
.ticket-info .section-name { font-size:1.05rem; margin-bottom:6px }
.ticket-info .meta-row { color:var(--muted-text); font-size:0.92rem; margin-bottom:6px }
.ticket-info .seller-row { color:var(--muted-text); font-size:0.86rem }

.ticket-pricing { width:200px; text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.price-badge { background:var(--primary-color); color:var(--surface); padding:6px 10px; border-radius:4px; font-weight:600 }
.fee { color:var(--muted-text); font-size:0.9rem }
.total { font-weight:700 }
.ticket-actions { display:flex; gap:8px; margin-top:6px }
.btn { display:inline-block; padding:6px 10px; border-radius:4px; text-decoration:none; cursor:pointer }
.btn-primary { background:var(--primary-color); color:var(--surface); border:none }
.btn-primary:hover { background: var(--primary-600); }
.btn-secondary { background:var(--muted); color:var(--text-color); border:1px solid var(--border-color) }
.btn-sm { padding:4px 8px; font-size:0.85rem }

/* Modal */
.modal { display:none; position:fixed; inset:0; z-index:9999 }
.modal[aria-hidden="false"] { display:block }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45) }
.modal-content { position:relative; width:90%; max-width:1000px; margin:60px auto; background:var(--surface); border-radius:8px; padding:18px; z-index:2 }
.modal-close { position:absolute; right:10px; top:8px; background:none; border:none; font-size:22px; cursor:pointer }
.modal-map img { width:100%; height:auto; display:block }

@media (max-width:600px) {
    .ticket-pricing { width:100%; text-align:center; align-items:center }
    .ticket-thumb img { width:100%; height:140px }
    .ticket-row { flex-direction:column; align-items:stretch }
}