/* ========== Gulf Tulu Cinema Seats — Full Theme ========== */

/* Palette and sizing */
.gtc-wrap{
  /* colors */
  --avail:#F5A623;   /* Available = orange */
  --pend:#FFD54F;    /* Pending = light yellow */
  --resv:#777777;    /* Reserved = medium grey */
  --blok:#4B5563;    /* Blocked = dark grey */
  --vip:#10C6D9;     /* VIP = blue */
  --rowpill:#D81B60; /* Row labels = pink */
  --ink:#0f172a;     /* Text ink */

  /* sizes */
  --seat: clamp(26px, 2.2vw, 34px);
  --gap:  clamp(5px, 0.6vw, 10px);
}

/* Reset for reliable sizing */
.gtc-grid, .gtc-row, .gtc-seats, .gtc-seat, .gtc-spacer { box-sizing: border-box; }

/* Legend */
.gtc-legend{
  margin:10px 0 8px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.gtc-legend span{
  padding:4px 12px;
  border-radius:16px;
  font-size:12px;
  font-weight:700;
}
.gtc-legend .a{ background:var(--avail); color:#111; }
.gtc-legend .p{ background:var(--pend);  color:#222; }
.gtc-legend .r{ background:var(--resv);  color:#fff; }
.gtc-legend .b{ background:var(--blok);  color:#fff; }
.gtc-legend .vip{ background:var(--vip); color:#00323A; }

/* Screen bar */
.gtc-screen{
  margin:8px 0 12px;
  padding:10px 0;
  text-align:center;
  background:#E5E7EB;          /* soft grey like screenshot */
  color:#374151;
  border-radius:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* Card */
.gtc-grid{
  padding:14px;
  background:#F3F4F6;          /* light card background */
  border:1px solid #E5E7EB;
  border-radius:12px;
  overflow:hidden;
}

/* Row */
.gtc-row{
  display:flex; align-items:center;
  margin:6px 0;
}

/* Seats track */
.gtc-seats{
  display:flex; align-items:center; justify-content:center;
  gap:var(--gap);
  flex-wrap:nowrap;
  padding:0 clamp(12px, 1.2vw, 24px);
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.gtc-seats::-webkit-scrollbar{ display:none; }
.gtc-seats.is-dragging{ cursor:grabbing; }

/* Seat boxes and spacers */
.gtc-seat, .gtc-spacer{
  flex:0 0 var(--seat);
  width:var(--seat); height:var(--seat);
  border-radius:6px;
}
.gtc-spacer{ visibility:hidden; }

/* Seats */
.gtc-seat{
  margin:0; border:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  line-height:1; font-size:13px; font-weight:800;
  box-shadow:0 1px 0 rgba(0,0,0,.12);
  transition:transform .08s ease;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.gtc-seat:hover{ transform:translateY(-1px); }

/* States mapped to theme */
.gtc-seat.a{ background:var(--avail); color:#111; }
.gtc-seat.p{ background:var(--pend);  color:#222; }
.gtc-seat.r{ background:var(--resv);  color:#fff; }
.gtc-seat.b{ background:var(--blok);  color:#fff; cursor:not-allowed; }

/* VIP row in blue. Change selector if your VIP row is not the last row */
.gtc-row:last-child .gtc-seat{
  background:var(--vip);
  color:#00323A;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
}

/* Row labels — pink pills with white letters on the right side */
.gtc-rowlabel{
  width:26px; margin-left:8px;
  display:grid; place-items:center;
  background:var(--rowpill); color:#fff;
  border-radius:6px;
  font-weight:800;
}

/* Optional aisle example. Adjust seat numbers per hall layout */
.gtc-seats .gtc-seat:nth-child(7),
.gtc-seats .gtc-seat:nth-child(14){
  margin-right: clamp(12px, 1.4vw, 22px);
}

/* Tooltips showing seat id on hover */
.gtc-seat:hover::after{
  content: attr(data-seat);
  position:absolute; bottom:110%; left:50%; transform:translateX(-50%);
  background:#111827; color:#fff;
  font-size:11px; padding:3px 6px; border-radius:4px;
  white-space:nowrap; pointer-events:none;
}

/* Modal */
.gtc-modal{ position:fixed; inset:0; background:rgba(15,23,42,.6); display:none; align-items:center; justify-content:center; z-index:9999; }
.gtc-modal.is-open{ display:flex; }
.gtc-modal__box{ width:100%; max-width:420px; background:#fff; border-radius:14px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative; }
.gtc-modal__title{ margin:0 0 8px; font-size:18px; font-weight:700; }
.gtc-modal__close{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:22px; cursor:pointer; line-height:1; }
.gtc-form p{ margin:8px 0; }
.gtc-form input{ width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; }
.gtc-form__actions{ display:flex; gap:8px; margin-top:10px; }
.gtc-btn{ background:#111827; color:#fff; padding:10px 14px; border:0; border-radius:10px; cursor:pointer; }
.gtc-btn--ghost{ background:#f3f4f6; color:#111; }
.gtc-msg{ margin-top:6px; font-size:13px; }

/* Editor helpers */
.gtc-editnote{ margin:8px 0; padding:8px 10px; background:#fff3cd; border:1px solid #ffe69c; border-radius:8px; font-size:13px; }
.gtc-seat.saving{ opacity:.6; }

/* Responsive */
@media (max-width:1024px){
  .gtc-wrap{ --seat: clamp(24px, 2.6vw, 30px); }
}
@media (max-width:640px){
  .gtc-wrap{ --seat: clamp(22px, 3.4vw, 28px); --gap: 6px; }
  .gtc-seat{ font-size:11px; }
  .gtc-rowlabel{ width:24px; }
}