/* Concert / fan meet tickets: quantity, numbered seats, seating plan. Built on the original event page styles in app.css. */

/* Event page: seating plan inside the "โซนที่นั่ง" panel */
.zone-map { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; font: inherit; cursor: zoom-in; text-align: center; }
.zone-map img { display: block; width: 100%; max-height: 380px; object-fit: contain; border-radius: 10px; }
.zone-map span { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.zone-map:hover { border-color: var(--sky); }

.seat-map-dialog { width: min(96vw, 1100px); max-width: none; max-height: 92vh; border: 0; border-radius: 20px; padding: 18px; box-shadow: 0 24px 80px rgba(0, 26, 44, .35); }
.seat-map-dialog::backdrop, .seat-dialog::backdrop { background: rgba(0, 26, 44, .7); }
.seat-map-dialog header, .seat-dialog header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.seat-map-dialog header b, .seat-dialog header b { margin-right: auto; font-size: 17px; color: var(--ink); }
.seat-map-dialog__canvas { overflow: auto; max-height: 75vh; border-radius: 12px; background: #f4f8fb; }
.seat-map-dialog__canvas img { display: block; max-width: 100%; max-height: 72vh; margin: auto; object-fit: contain; }
.seat-map-dialog.is-zoomed .seat-map-dialog__canvas img { max-width: none; max-height: none; width: 180%; }

/* Booking box: quantity stepper, chosen seats, random-seat note */
.qty-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty-pick label { font-weight: 600; font-size: 14px; color: var(--ink); }
.qty-pick label small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.qty-pick__control { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.qty-pick__control button { width: 38px; height: 40px; border: 0; background: #fff; color: var(--blue); font-size: 18px; cursor: pointer; }
.qty-pick__control button:hover { background: var(--sky-soft); }
.qty-pick__control input { width: 44px; height: 40px; border: 0; border-inline: 1.5px solid var(--line); text-align: center; font: 600 15px var(--en); color: var(--ink); outline: 0; }

.seat-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; }
.seat-pick > div { display: flex; flex-direction: column; min-width: 0; }
.seat-pick > div span { font-size: 12.5px; color: var(--muted); }
.seat-pick > div b { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.seat-pick > div b.is-error { color: #b42318; font-size: 13.5px; }
.seat-pick .btn { flex: none; padding: 8px 14px; }
.seat-pick .field { flex: 1; margin: 0; }
.seat-pick [hidden] { display: none; }
.seat-random-note { margin: 0; }

/* Seat picking dialog */
.seat-dialog { width: min(96vw, 760px); transition: none; max-width: none; max-height: 92vh; border: 0; border-radius: 20px; padding: 18px; box-shadow: 0 24px 80px rgba(0, 26, 44, .35); }
.seat-dialog[open] { display: flex; flex-direction: column; }
.seat-dialog__stage { margin: 0 auto 16px; width: 70%; padding: 8px; border-radius: 8px 8px 30px 30px; background: var(--blue); color: #fff; text-align: center; font-weight: 600; font-size: 13px; letter-spacing: .5px; }
.seat-dialog__grid { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 10px; }
.seat-row { display: flex; align-items: center; gap: 5px; min-width: max-content; margin: 0 auto; }
.seat-row span { position: sticky; left: 0; width: 46px; flex: none; font-size: 12px; color: var(--muted); background: #fff; }
.seat { width: 34px; height: 34px; padding: 0; border: 1.5px solid #bcd9ea; border-radius: 8px 8px 5px 5px; background: #fff; color: var(--blue); font: 600 12px var(--en); cursor: pointer; }
.seat:hover { border-color: var(--sky); background: var(--sky-soft); }
.seat.is-on { border-color: var(--blue); background: var(--blue); color: #fff; }
.seat:disabled { border-color: #e3e8ec; background: #edf0f3; color: #a3acb5; cursor: not-allowed; }
.seat:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.seat-dialog footer { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.seat-dialog__legend { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.seat-dialog__legend i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #bcd9ea; background: #fff; }
.seat-dialog__legend i:not(:first-child) { margin-left: 8px; }
.seat-dialog__legend i.is-on { border-color: var(--blue); background: var(--blue); }
.seat-dialog__legend i.is-taken { border-color: #e3e8ec; background: #edf0f3; }
.seat-dialog footer b { font-family: var(--en); color: var(--blue); }
@media (max-width: 600px) {
  .seat-dialog, .seat-map-dialog { padding: 14px; }
  .seat-dialog footer { flex-wrap: wrap; }
  .seat-dialog footer .btn { width: 100%; }
}

/* Organizer form */
.field-row[hidden] { display: none; }
.price-tier__zone:has([data-seat-rows]:not([hidden])) { grid-template-columns: 150px 150px minmax(0, 1fr); }
.price-tier__zone [hidden] { display: none; }
.seat-map-current img { aspect-ratio: auto; max-height: 260px; object-fit: contain; background: #f4f8fb; }
@media (max-width: 700px) { .price-tier__zone:has([data-seat-rows]:not([hidden])) { grid-template-columns: minmax(0, 1fr); } }

/* Ticket page: switch between the tickets of one booking */
.ticket-switcher { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 auto 24px; max-width: 960px; }
.ticket-switcher a { background: #fff; border: 1px solid #cde3ef; border-radius: 12px; padding: 12px 18px; color: var(--blue); text-decoration: none; }
.ticket-switcher a[aria-current=page] { background: var(--blue); color: #fff; }

/* Unpaid seat hold notice (registered page, payment page) */
.hold-note { margin: 0 auto 18px; max-width: 640px; padding: 12px 16px; border: 1px solid #f3d38a; border-radius: 12px; background: #fff8e6; color: #7a4d00; font-size: 14px; line-height: 1.6; }
.hold-note a { font-weight: 600; color: var(--blue); }

/* Big venues: many zones */
.zones--many { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.zones--many .zone { padding: 12px 14px; border-radius: 12px; }
.zones--many .zone header b { font-size: 15px; }
.zones--many .zone__seats { margin: 4px 0 0; font-size: 13px; }
.zone__more { margin-top: 6px; font-size: 13px; }
.zone__more summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.tier-list--many { max-height: 300px; overflow: auto; }
.tier-pick legend small { margin-left: 6px; font-weight: 400; color: var(--muted); }
.tier-pick__list { display: grid; gap: 8px; max-height: 340px; overflow: auto; padding: 2px 4px 2px 0; overscroll-behavior: contain; }
.tier-pick__opt[hidden] { display: none; }
.zone-search { width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; outline: 0; }
.zone-search:focus { border-color: var(--sky); }
.zone-search__empty { margin: 4px 0; font-size: 13px; color: var(--muted); }

/* Big venues: many rows */
.seat-dialog__tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.seat-dialog__tools[hidden] { display: none; }
.seat-dialog__tools label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.seat-dialog__tools select, .seat-dialog__tools input { height: 38px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.seat-dialog__tools input { width: 120px; }
.seat-dialog__tools small { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.seat-row { content-visibility: auto; contain-intrinsic-size: auto 34px; }
.seat.is-found { animation: seat-found 1.2s ease 2; }
@keyframes seat-found { 50% { box-shadow: 0 0 0 4px rgba(41, 146, 208, .55); } }

/* Organizer form: live zone totals and row check */
.zone-total { margin-left: auto; font-size: 13px; color: var(--blue); white-space: nowrap; }
.rows-hint { font-size: 12px; color: var(--muted); }
.rows-hint.is-bad { color: #b42318; }

/* Named tickets */
.holders { display: grid; gap: 8px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; }
.holders > p { margin: 0; font-size: 12.5px; color: var(--muted); }
.holders .field { margin: 0; }

/* Organizer: visual row controls, with the saved layout kept in a hidden field. */
.price-tier__zone:has([data-row-editor]:not([hidden])){grid-template-columns:150px minmax(0,1fr)}
.row-editor{grid-column:1/-1;min-width:0}.row-editor[hidden],.row-editor [hidden]{display:none!important}
.row-editor__ui{border:1px solid #d4e5ee;border-radius:14px;background:#fff;padding:14px}
.row-editor__ui summary{font-size:14px;font-weight:600;color:#075173;cursor:pointer;padding:4px}
.row-editor__controls{display:grid;grid-template-columns:1fr 160px;gap:14px;margin:18px 0}
.row-editor__ui label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#587181}
.row-editor__ui select,.row-editor__ui input{width:100%;min-width:0;height:42px;padding:8px 12px;border:1px solid #cbdfe9;border-radius:9px;font:inherit;font-size:14px;background:#fff;color:#163c52}
.row-editor__ui input:focus,.row-editor__ui select:focus{outline:2px solid #2992d0;outline-offset:2px}
.row-editor__bulk{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:12px;background:#f2f8fc;border-radius:10px}
.row-editor__bulk label{width:110px}.row-editor__ui .btn{font-size:12px;padding:10px 14px}
.row-editor__help{font-size:12px;color:#587181;margin:12px 0}
.row-editor__list{max-height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:4px}
.row-editor__row{display:grid;grid-template-columns:65px 90px 45px 1fr 32px;gap:10px;align-items:center;padding:8px 12px;background:#f6fafc;border-radius:10px;font-size:13px}
.row-editor__row b{font-weight:500}.row-editor__range{color:#668293;text-align:right;font-variant-numeric:tabular-nums}
.row-editor__remove{border:0;background:#fff;color:#946067;border-radius:7px;width:32px;height:32px;cursor:pointer;font-size:20px}
.row-editor__status{font-size:13px;color:#075173;margin:14px 0 4px}.row-editor__status.is-bad{color:#b42318}
.row-editor__use{font:inherit;font-size:12px;color:#075173;border:0;background:#e9f5fb;padding:9px 12px;border-radius:8px;margin-top:10px;cursor:pointer}
@media(max-width:700px){.price-tier__zone:has([data-row-editor]:not([hidden])){grid-template-columns:1fr}.row-editor__controls{grid-template-columns:1fr}.row-editor__row{grid-template-columns:48px 65px 28px 1fr 28px;gap:6px;padding:8px}.row-editor__bulk .btn{width:100%}}

.row-editor__controls:has(label[hidden])>label:first-child{grid-column:1/-1}
.price-tier__zone>label:last-child{grid-column:1/-1}