.tickets-page .legacy-ticket-section { display: none !important; }

.seat-booking {
  min-height: 100svh;
  padding: 92px 18px 42px;
  color: #f8f2e7;
  background:
    linear-gradient(rgba(1, 10, 29, .82), rgba(1, 8, 23, .9)),
    url('ticket-booking-bg.png') center / cover scroll;
  font-family: 'Prompt', sans-serif;
}

.seat-booking-shell { width: min(1360px, 100%); margin: 0 auto; }

.booking-steps {
  display: flex;
  width: min(670px, 100%);
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 auto 24px;
  padding: 0;
  list-style: none;
}
.booking-steps li { display: flex; flex: 1; align-items: center; gap: 10px; color: rgba(255,255,255,.55); font-size: 13px; }
.booking-steps li:not(:last-child)::after { content: ''; flex: 1; height: 1px; margin-left: 8px; background: rgba(235,199,112,.35); }
.booking-steps span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid #8595ae; border-radius: 50%; }
.booking-steps strong { white-space: nowrap; font-weight: 500; }
.booking-steps .is-active { color: #DCE5ED; }
.booking-steps .is-active span { color: #1a1104; border-color: #F0F4F7; background: linear-gradient(145deg,#E4EBF1,#bd8430); box-shadow: 0 0 14px rgba(243,194,78,.35); }

.seat-booking-heading { margin-bottom: 30px; text-align: center; }
.seat-booking-heading p { margin: 0 0 3px; color: #d8b15c; font: 500 10px/1 'Cinzel', serif; letter-spacing: .28em; }
.seat-booking-heading h1 { margin: 0; color: #f6d680; font: 600 clamp(32px,4vw,52px)/1.12 'Prompt',sans-serif; text-shadow: 0 4px 20px rgba(0,0,0,.45); }
.seat-booking-heading > span { color: rgba(255,255,255,.8); font-size: 15px; }

.show-selector {
  display: grid;
  grid-template-columns: 1.15fr .8fr .65fr;
  align-items: center;
  margin-bottom: 12px;
  padding: 11px 18px;
  border: 1px solid rgba(239,202,111,.85);
  border-radius: 15px;
  background: rgba(3,18,43,.9);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.show-selector label,.seat-limit { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 0 20px; }
.show-selector label + label,.seat-limit { border-left: 1px solid rgba(235,199,112,.3); }
.show-selector i { color: #f2ce70; font-size: 22px; }
.show-selector label > span { white-space: nowrap; font-size: 13px; }
.show-selector select { width: 100%; min-width: 0; padding: 9px 12px; color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 7px; background: #07152d; font: 400 14px 'Prompt',sans-serif; }
.seat-limit { justify-content: center; font-size: 14px; }
.seat-limit strong { color: #f4d47c; }

.booking-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; }
.seat-map-panel,.booking-summary { border: 1px solid #ddb75d; border-radius: 16px; background: rgba(2,14,35,.92); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.seat-map-panel { position: relative; overflow: hidden; padding: 14px 16px 12px; contain: layout paint style; }
.stage-view { display: grid; height: 78px; place-items: center; margin-bottom: 8px; color: #fff; border-radius: 12px 12px 50% 50%; background: radial-gradient(ellipse at 50% 0,#3d5478 0,rgba(10,33,67,.85) 38%,#061329 74%); box-shadow: inset 0 -3px 0 #dcaf51,0 5px 18px rgba(237,190,86,.17); font: 500 14px 'Cinzel',serif; letter-spacing: .2em; }
.zone-title { width: fit-content; margin: 0 auto 7px; padding: 4px 22px; border: 1px solid; border-radius: 99px; font-size: 12px; }
.zone-title--front { color: #ffe298; border-color: #d3a845; background: #131b2e; }
.zone-title--rear { color: #9fc8ff; border-color: #4d8fe8; background: #071a38; }
.zone-label-strip { display:grid;align-items:center;margin:0 auto 7px;text-align:center;font:600 12px/1.2 'Cinzel','Prompt',serif;letter-spacing:.06em; }
.zone-label-strip--front { grid-template-columns:1fr 1.42fr 1fr;width:min(790px,91%);color:#f5d36f; }
.zone-label-strip--front strong,.zone-label-strip--rear strong { width:fit-content;margin:auto;padding:4px 20px;border:1px solid currentColor;border-radius:99px;background:rgba(4,17,38,.86);font-weight:600; }
.zone-label-strip--rear { color:#9fc8ff; }
.seat-zone { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 4px 34px 8px; }
.seat-section {
  position: relative;
  min-height: 118px;
  padding: 18px;
  overflow: hidden;
  color: #E7EDF2;
  border: 1px solid #c99a3f;
  border-radius: 18px 18px 34px 34px;
  background: linear-gradient(155deg,rgba(32,52,82,.96),rgba(5,17,37,.98));
  box-shadow: inset 0 0 24px rgba(238,190,79,.06),0 10px 22px rgba(0,0,0,.24);
  text-align: center;
  cursor: pointer;
  transition: transform .18s,border-color .18s,box-shadow .18s;
}
.seat-section::before { content:'';position:absolute;inset:9px;border:1px solid rgba(239,199,105,.18);border-radius:12px 12px 27px 27px;pointer-events:none; }
.seat-section:hover { transform:translateY(-3px);border-color:#ffe299;box-shadow:0 12px 28px rgba(0,0,0,.32),0 0 16px rgba(232,181,71,.16); }
.seat-section strong { position:relative;display:block;font:600 20px/1.25 'Cinzel','Prompt',serif;letter-spacing:.05em; }
.seat-section span { position:relative;display:block;margin-top:8px;color:rgba(255,255,255,.68);font-size:11px; }
.seat-section.rear { color:#b8d6ff;border-color:#4c86d9;background:linear-gradient(155deg,rgba(20,55,104,.96),rgba(4,20,48,.98)); }
.seat-section.is-selected { color:#1b1204;border-color:#fff1b3;background:linear-gradient(135deg,#c9953c,#EEF3F7,#bd812b);box-shadow:0 0 0 3px rgba(247,200,94,.25),0 0 24px rgba(255,204,91,.38);transform:translateY(-3px); }
.seat-section.is-selected span { color:rgba(26,16,3,.72); }
.seat-zone {
  display: block;
  padding: 8px 2px 7px;
  overflow: visible;
  /* แถวแรกถูกยกขึ้นเพื่อทำทรงโค้ง จึงห้าม paint containment ตัดส่วนบน */
  contain: layout style;
}
.seat-map-row { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 16px; }
.seat-row-label { width: 13px; flex: 0 0 13px; color: #edc55d; text-align: center; font: 600 10px/1 'Cinzel',serif; }
.seat-row-group { display: flex; justify-content: center; gap: 2px; transform-origin: center; }
.seat-map-row--front .seat-row-group--1 { margin-right:13px; transform:translateY(calc((7 - var(--row-index)) * -.25px)) rotate(3.6deg); transform-origin:right center; }
.seat-map-row--front .seat-row-group--3 { margin-left:13px; transform:translateY(calc((7 - var(--row-index)) * -.25px)) rotate(-3.6deg); transform-origin:left center; }
.seat-map-row--rear .seat-row-group--1 { margin-right:5px; transform:translateY(-3px) rotate(8deg); transform-origin:right center; }
.seat-map-row--rear .seat-row-group--2 { margin-right:13px; transform:rotate(4deg); transform-origin:right center; }
.seat-map-row--rear .seat-row-group--3 { margin:0; }
.seat-map-row--rear .seat-row-group--4 { margin-left:13px; transform:rotate(-4deg); transform-origin:left center; }
.seat-map-row--rear .seat-row-group--5 { margin-left:5px; transform:translateY(-3px) rotate(-8deg); transform-origin:left center; }
.seat-block { display: grid; grid-template-columns: repeat(8,18px); justify-content: center; gap: 5px; }
.seat-button { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 50%; cursor: pointer; transition: transform .12s,background-color .12s; }
.seat-map-row .seat-button { width: 9px; height: 9px; flex: 0 0 9px; }
.seat-button:hover:not(:disabled) { transform: scale(1.3); }
.seat-button.front { background: #d7a63d; }
.seat-button.rear { background: #367ff0; }
.seat-button.is-taken { opacity: .28; cursor: not-allowed; box-shadow: none; }
.seat-button.is-selected { border-color: #fffbe7; background: #EFF4F8; box-shadow: 0 0 0 3px rgba(246,188,59,.35),0 0 15px #D8E2EB; transform: scale(1.12); }
.main-aisle { display: flex; align-items: center; gap: 16px; margin: 10px 0; color: #fff; font: 500 10px 'Cinzel',serif; letter-spacing: .35em; }
.main-aisle::before,.main-aisle::after { content:''; flex:1; height:1px; background: linear-gradient(90deg,transparent,#d8aa4c); }
.main-aisle::after { transform: rotate(180deg); }
.seat-legend { display: flex; justify-content: center; gap: 24px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(235,199,112,.25); font-size: 10px; }
.seat-legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:16px;height:16px;border-radius:50%;border:1px solid #ddd; }
.legend-dot.is-front{background:#d7a63d}.legend-dot.is-rear{background:#367ff0}.legend-dot.is-free{background:transparent}.legend-dot.is-taken{background:#667080}.legend-dot.is-selected{background:#EFF4F8;box-shadow:0 0 7px #D8E2EB}

.booking-summary { display: flex; min-height: 100%; flex-direction: column; padding: 18px; }
.booking-summary > header { display:flex; align-items:center; gap:13px; padding-bottom:14px; border-bottom:1px solid rgba(235,199,112,.6); }
.booking-summary > header > i { color:#f1c966;font-size:31px;transform:rotate(-15deg); }
.booking-summary h2 { margin:0;color:#f2cf77;font-size:22px;font-weight:600; }
.booking-summary header span { color:rgba(255,255,255,.55);font:500 7px 'Cinzel',serif;letter-spacing:.14em; }
.summary-empty { display:grid; flex:1; min-height:190px; place-content:center; text-align:center; color:rgba(255,255,255,.55); }
.summary-empty i { margin-bottom:10px;color:#d7b15c;font-size:30px; }.summary-empty p{margin:0;font-size:14px}.summary-empty span{font-size:11px}
.summary-details { padding:15px 0 8px; }
.summary-details dl { margin:0; }.summary-details dl div{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:12px}.summary-details dt{color:rgba(255,255,255,.58)}.summary-details dd{margin:0;text-align:right}
.summary-chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:12px; }.summary-chip{padding:4px 9px;color:#f4d37b;border:1px solid #c99c3d;border-radius:99px;background:none;font:500 10px 'Prompt';cursor:pointer}
.summary-total { display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding:14px 0;border-top:1px solid rgba(235,199,112,.6);font-size:14px}.summary-total strong{color:#f4cf70;font-size:25px}
.booking-continue { width:100%;padding:13px;color:#171005;border:1px solid #ffe095;border-radius:10px;background:linear-gradient(120deg,#c58b31,#ffe08c,#c68c31);font:700 17px 'Prompt';cursor:pointer}.booking-continue:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.6)}
.booking-security { position:relative;margin-top:15px;padding-top:10px;border-top:1px solid rgba(255,255,255,.13)}.booking-security p{display:flex;gap:9px;margin:7px 0}.booking-security i{width:22px;color:#edc767;font-size:18px}.booking-security span{display:flex;flex-direction:column}.booking-security strong{font-size:10px}.booking-security small{color:rgba(255,255,255,.55);font-size:8px}.booking-security time{position:absolute;right:0;bottom:4px;padding:5px 10px;color:#f1ca6d;border:1px solid #c89c43;border-radius:8px;font-weight:600}

@media (max-width: 980px){.booking-workspace{grid-template-columns:1fr}.booking-summary{min-height:auto}.summary-empty{min-height:120px}.show-selector{grid-template-columns:1fr 1fr}.seat-limit{grid-column:1/-1;margin-top:10px;padding-top:10px;border-left:0;border-top:1px solid rgba(235,199,112,.3)}}
@media (max-width: 680px){.seat-booking{padding:88px 10px 90px;background-attachment:scroll}.booking-steps strong{display:none}.booking-steps{max-width:250px}.seat-booking-heading h1{font-size:34px}.seat-booking-heading>span{font-size:12px}.show-selector{grid-template-columns:1fr;padding:12px}.show-selector label,.seat-limit{padding:9px 4px;border:0!important}.show-selector label+label{border-top:1px solid rgba(235,199,112,.2)!important}.seat-limit{grid-column:auto}.booking-workspace{gap:10px}.seat-map-panel{padding:10px 3px}.stage-view{height:58px}.seat-zone{padding:7px 0 4px}.seat-map-row{gap:2px;min-height:13px;padding:0}.seat-row-label{width:9px;flex-basis:9px;font-size:8px}.seat-row-group{gap:1px}.seat-row-group--1{margin-right:2px}.seat-row-group--3{margin-left:2px}.seat-map-row .seat-button{width:8px;height:8px;flex-basis:8px}.seat-legend{gap:8px;flex-wrap:wrap}.booking-summary{padding:15px}}
@media (max-width: 680px){.seat-booking-heading{margin-bottom:24px}}
@media (max-width: 680px){
  .zone-label-strip--front{width:94%;font-size:9px}
  .zone-label-strip--front strong,.zone-label-strip--rear strong{padding:3px 9px}
  .seat-map-row{gap:.5px;min-height:9px}
  .seat-row-label{width:7px;flex-basis:7px;font-size:7px}
  .booking-workspace,.seat-map-panel{min-width:0}
  .seat-row-group{gap:.35px}
  .seat-map-row--front .seat-row-group--1{margin-right:3px}
  .seat-map-row--front .seat-row-group--3{margin-left:3px}
  .seat-map-row--rear .seat-row-group--1{margin-right:1px}
  .seat-map-row--rear .seat-row-group--2{margin-right:3px}
  .seat-map-row--rear .seat-row-group--4{margin-left:3px}
  .seat-map-row--rear .seat-row-group--5{margin-left:1px}
  .seat-map-row .seat-button{width:3.5px;height:3.5px;flex-basis:3.5px}
  .seat-button{transition:none}
  .seat-button:hover:not(:disabled){transform:none}
  .seat-button.is-taken{filter:none}
}

@media (prefers-reduced-motion: reduce){
  .seat-button,.booking-continue{transition:none!important}
}

/* Blue & silver brand palette */
.booking-steps .is-active span,
.booking-continue { color:#06152A; border-color:#F1F5F8; background:linear-gradient(145deg,#F1F5F8,#AAB9C8); }
.seat-booking-heading p,
.seat-booking-heading h1,
.show-selector i,
.seat-limit strong,
.seat-row-label,
.booking-summary h2,
.booking-summary > header > i,
.summary-total strong,
.booking-security i,
.booking-security time { color:#DCE5ED; }
.show-selector,
.seat-map-panel,
.booking-summary { border-color:#B8C5D2; }
.zone-label-strip--front,
.zone-title--front { color:#DCE5ED; }
.seat-button.front { background:#B8C5D2; }
.legend-dot.is-front { background:#B8C5D2; }
.main-aisle::before,.main-aisle::after { background:linear-gradient(90deg,transparent,#B8C5D2); }