/* StageHouse Ticketing — Netflix-style dark theme.
   Scoped under .shs so it layers cleanly over any WordPress theme. */

.shs { color: #eaeaea; --shs-bg: #0b0b0b; --shs-card: #181818; --shs-card-hover: #232323; --shs-accent: #e50914; --shs-muted: #9aa0a6; }
.shs * { box-sizing: border-box; }

.shs-btn { display: inline-block; border: none; border-radius: 6px; padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.shs-btn-accent { background: var(--shs-accent); color: #fff; }
.shs-btn-accent:hover { background: #f6121d; color:#fff; }
.shs-btn-block { display: block; width: 100%; text-align: center; margin-top: 14px; }

/* ---------- Browse / grid ---------- */
.shs-browse { background: var(--shs-bg); padding: 20px; border-radius: 14px; }
.shs-filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.shs-filterbar input[type="text"], .shs-filterbar select {
  background: #1f1f1f; border: 1px solid #333; color: #eaeaea; border-radius: 6px; padding: 10px 12px; font-size: 14px;
}
.shs-filterbar input[type="text"] { flex: 1; min-width: 200px; }

.shs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.shs-card { background: var(--shs-card); border-radius: 10px; overflow: hidden; text-decoration: none; color: #eaeaea; display: block; transition: transform .15s ease, background .15s ease; }
.shs-card:hover { background: var(--shs-card-hover); transform: translateY(-3px); color: #fff; }
.shs-card-img { height: 260px; background-size: cover; background-position: center; position: relative; }
.shs-badge { position: absolute; top: 10px; left: 10px; background: var(--shs-accent); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; letter-spacing: .04em; }
.shs-card-body { padding: 12px 14px 16px; }
.shs-card-date { color: var(--shs-accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.shs-card-body h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; color: #fff; }
.shs-card-venue { color: var(--shs-muted); font-size: 13px; margin-bottom: 8px; }
.shs-card-price { font-size: 14px; font-weight: 600; color: #fff; }
.shs-empty { color: var(--shs-muted); padding: 40px 0; text-align: center; }

/* ---------- Single event ticket box ---------- */
.shs-event-page { background: var(--shs-bg); border-radius: 14px; padding: 22px; margin-top: 20px; }
.shs-event-meta { color: var(--shs-muted); margin-bottom: 20px; line-height: 1.6; }
.shs-ticket-box { background: var(--shs-card); border-radius: 12px; padding: 20px; max-width: 520px; }
.shs-ticket-box h3 { margin: 0 0 16px; color: #fff; font-size: 18px; }

.shs-tier { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #2a2a2a; gap: 12px; }
.shs-tier:last-of-type { border-bottom: none; }
.shs-tier-name { font-weight: 600; color: #fff; }
.shs-tier-desc { color: var(--shs-muted); font-size: 13px; margin: 2px 0; }
.shs-tier-price { color: var(--shs-accent); font-weight: 700; margin-top: 2px; }
.shs-soldout { color: #ff6b6b; font-size: 12px; font-weight: 700; margin-top: 4px; }
.shs-qty { background: #1f1f1f; border: 1px solid #333; color: #eaeaea; border-radius: 6px; padding: 8px; min-width: 56px; }

.shs-seat-instructions { color: var(--shs-muted); font-size: 13px; margin-bottom: 14px; }
.shs-seat-map { overflow-x: auto; margin-bottom: 12px; }
.shs-seat-section { margin-bottom: 16px; }
.shs-seat-section-title { color: var(--shs-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.shs-seat-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.shs-seat-row-label { width: 20px; color: var(--shs-muted); font-size: 12px; text-align: right; margin-right: 4px; }
.shs-seat { width: 26px; height: 26px; border-radius: 5px; border: 1px solid #3a3a3a; background: #262626; color: #ccc; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.shs-seat-available:hover { border-color: var(--shs-accent); }
.shs-seat-picked { background: var(--shs-accent); border-color: var(--shs-accent); color: #fff; }
.shs-seat-sold, .shs-seat-held { background: #151515; color: #444; border-color: #222; cursor: not-allowed; }
.shs-seat-legend { display: flex; gap: 16px; font-size: 12px; color: var(--shs-muted); margin-bottom: 16px; }
.shs-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.shs-dot-available { background: #262626; border: 1px solid #3a3a3a; }
.shs-dot-selected { background: var(--shs-accent); }
.shs-dot-sold { background: #151515; border: 1px solid #222; }

.shs-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid #2a2a2a; margin-top: 6px; font-size: 15px; }
.shs-total strong { color: #fff; font-size: 18px; }

.shs-buyer-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.shs-buyer-fields input { background: #1f1f1f; border: 1px solid #333; color: #eaeaea; border-radius: 6px; padding: 11px 12px; font-size: 14px; }

.shs-msg { margin-top: 12px; font-size: 13px; }
.shs-msg-error { color: #ff6b6b; }
.shs-msg-ok { color: #4caf50; }

/* ---------- Check-in scanner ---------- */
.shs-checkin { background: var(--shs-bg); border-radius: 14px; padding: 20px; max-width: 480px; }
.shs-checkin #shs-reader { border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.shs-checkin-result { border-radius: 10px; padding: 16px; margin-top: 12px; font-weight: 600; }
.shs-checkin-ok { background: rgba(76,175,80,.15); border: 1px solid #4caf50; color: #8bd18f; }
.shs-checkin-err { background: rgba(229,9,20,.15); border: 1px solid var(--shs-accent); color: #ff8a8f; }