/* Cards */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.cm-card{border:1px solid #e5e7eb;border-radius:12px;padding:12px;text-align:center;background:#fff}
.cm-card img{border-radius:8px;max-width:100%;height:auto}
.cm-btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#111;color:#fff;text-decoration:none}
.cm-price{opacity:.75}

/* Booking */
.cm-book input,.cm-book select{width:100%;max-width:520px;padding:10px;border-radius:8px;border:1px solid #e5e7eb}

/* Seat map (centered box; visible walkway; high contrast) */
.cm-seatmap{margin:12px 0;text-align:center}
.cm-seatbox{display:inline-block;background:#0f172a;border-radius:12px;padding:16px}
.cm-seatmap-placeholder{color:#cbd5e1;padding:8px}

.cm-seat-legend{margin:6px 0 12px;display:inline-flex;gap:10px;flex-wrap:wrap}
.cm-seat-legend .s{font-size:.9em;border:1px solid #334155;padding:4px 8px;border-radius:6px}
.s-av{background:#fff;color:#111;border:1px solid #e2e8f0}
.s-rv{background:#f59e0b;color:#111}
.s-sd{background:#ef4444;color:#fff}
.s-sl{background:#3b82f6;color:#fff}

/* SCREEN under legend */
.cm-screen{margin:0 auto 14px;background:#e2e8f0;color:#334155;width:220px;text-align:center;padding:6px;border-radius:6px;font-weight:600}

.cm-seat-grid{
  display:block;
  white-space:normal;   /* allow wrapping by default */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cm-seat-row{
  display:flex;
  justify-content:center;
  flex-wrap:nowrap;     /* desktop keeps same-row */
}
@media (max-width:640px){
  .cm-seat-row{flex-wrap:wrap;} /* mobile can wrap naturally */
}

.cm-seat-row{display:flex;align-items:center;margin:6px 0}
.cm-seat-rowlabel{width:26px;text-align:center;margin-right:8px;font-weight:700;color:#cbd5e1}

/* spacer for grid '-' cells so columns stay aligned (match seat width) */
.cm-empty{display:inline-block;width:56px;min-width:56px;margin:4px;visibility:hidden}

/* walkway column occupies same width as a seat; thin vertical line centered */
.cm-walkway{display:inline-block;position:relative;width:56px;min-width:56px;height:1px;margin:4px}
.cm-walkway::before{content:"";position:absolute;left:50%;top:-12px;bottom:-12px;width:2px;background:#334155;border-radius:2px;opacity:.6}

/* Seat buttons: align regardless of 8A vs 10A */
.cm-seatmap .seat{
  width:56px;min-width:56px;margin:4px;border:0;border-radius:8px;padding:10px 8px;text-align:center;
  font-size:.9em;line-height:1.1;cursor:pointer;background:#fff;color:#111;box-shadow:0 0 0 1px #e5e7eb;
  appearance:none;-webkit-appearance:none;font-variant-numeric:tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cm-seatmap .seat.reserved{background:#f59e0b;color:#111;cursor:not-allowed;box-shadow:none}
.cm-seatmap .seat.held {background: #4b5563;color: #fff;cursor: not-allowed;opacity: 0.5;box-shadow: none;}

.cm-seatmap .seat.sold{background:#ef4444;color:#fff;cursor:not-allowed;box-shadow:none}
.cm-seatmap .seat.disabled{background:#1f2937;color:#9ca3af;cursor:not-allowed;text-decoration:line-through;box-shadow:none}
.cm-seatmap .seat.selected{background:#3b82f6;color:#fff;box-shadow:none}
.cm-seatmap .seat.available:hover{filter:brightness(0.97)}
.cm-seatmap .seat.selected:hover{filter:brightness(1.05)}

@media (max-width:640px){
  .cm-seatbox{padding:12px}
  .cm-seatmap .seat{width:50px;min-width:50px;padding:7px 8px}
  .cm-empty{width:50px;min-width:50px}
  .cm-walkway{width:50px;min-width:50px;margin:4px}
  .cm-walkway::before{opacity:.9}
}

/* ---- Layout grid for movies ---- */
.cm-grid.cm-grid-movies{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
}
.cm-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:12px;
}
.cm-card .cm-card-top{ position:relative; }
.cm-card .cm-poster-wrap{ position:relative; line-height:0; }
.cm-card .cm-poster-wrap img{ display:block; width:100%; height:auto; border-radius:8px; }
.cm-movie-title{ margin:10px 0 6px; font-size:1.1rem; line-height:1.3; }
.cm-meta{ font-size:.92rem; color:#374151; display:grid; gap:4px; margin:6px 0 8px; }
.cm-overview p{ margin:.25em 0; }
.cm-price{ font-weight:600; margin:6px 0 10px; }
.cm-btn{
  display:inline-block; background:#111827; color:#fff; text-decoration:none;
  padding:8px 14px; border-radius:8px; border:0; cursor:pointer;
}
.cm-btn:hover{ filter:brightness(0.95); }

/* ---- First upcoming show line ---- */
.cm-card .cm-first-show{ margin:4px 0 8px; font-size:.95rem; opacity:.85 }
.cm-card .cm-first-show.cm-none{ opacity:.6; font-style:italic }

/* ---- Full-width yellow ribbon (bold red text) ---- */
.cm-ribbon{
  position:absolute;
  top:0; left:0; right:0;
  width:100%;
  background:#ffd60a;        /* bright yellow */
  color:#b00020;             /* bold red text */
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  padding:8px 10px;
  letter-spacing:.02em;
  z-index:5;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.cm-ribbon.is-open{ }
.cm-ribbon.is-soon{ opacity:.98; }

/* ---- Booking form basics ---- */
.cm-book{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.cm-book h2{ margin-top:0; }
.cm-book label input,
.cm-book select{
  width:100%; max-width:420px; padding:8px 10px;
  border:1px solid #d1d5db; border-radius:8px;
}
.cm-note{ font-size:.9rem; color:#6b7280; margin-top:8px; }

/* ---- Seat map placeholder (alt) ---- */
.cm-seatmap.is-placeholder{ margin:10px 0; border:1px dashed #d1d5db; border-radius:8px; padding:14px; }
.cm-seatmap.is-placeholder .cm-seatmap-placeholder{ color:#6b7280; }

/* ---- Modal (bank instructions) ---- */
.cm-modal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5); }
.cm-modal.cm-open{ display:block; }
.cm-modal-content{
  position:relative; margin:8vh auto; max-width:640px; background:#fff;
  border-radius:12px; padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.cm-modal h3{ margin-top:0; }
.cm-close{ margin-top:12px; }

/* ===================================================================== */
/*                   HARD OVERRIDES TO WIN AGAINST THEMES                */
/*  (kept at the very end so state colors always show correctly)         */
/* ===================================================================== */

/* Base */
.cm-seatmap button.seat{
  background:#fff !important;
  color:#111 !important;
  box-shadow:0 0 0 1px #e5e7eb !important;
}

/* Available */
.cm-seatmap button.seat.available{
  background:#fff !important;
  color:#111 !important;
  box-shadow:0 0 0 1px #e5e7eb !important;
}

/* Reserved (booked/pending) */
.cm-seatmap button.seat.reserved{
  background:#f59e0b !important;
  color:#111 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

/* Sold (confirmed) */
.cm-seatmap button.seat.sold{
  background:#ef4444 !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

/* Selected */
.cm-seatmap button.seat.selected{
  background:#3b82f6 !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* Disabled seat (legacy) */
.cm-seatmap button.seat.disabled{
  background:#1f2937 !important;
  color:#9ca3af !important;
  text-decoration:line-through !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

/* Ensure theme button resets don't bleed in */
.cm-seatmap button.seat,
.cm-seatmap button.seat *{
  background-image:none !important;
  border:0 !important;
}

/* Focus visibility (keyboard) */
.cm-seatmap button.seat:focus{
  outline:2px solid #3b82f6 !important;
  outline-offset:2px !important;
}

/* highlights the first invalid field even after the bubble closes */
.cm-invalid {
  outline: 2px solid #ef4444 !important;
  outline-offset: 2px;
  border-color: #ef4444 !important;
}

/* ==================== Checking tabs & views (force new layout) ==================== */
.cmck-tabs{display:flex;gap:8px;margin:12px 0}
.cmck-tab{padding:8px 12px;border:1px solid #e5e7eb;background:#fff;border-radius:8px;cursor:pointer;opacity:1}
.cmck-tab.is-active{background:#111827;color:#fff;border-color:#111827}
.cmck-tab[disabled]{opacity:.45;cursor:not-allowed}

/* Only the active view shows — defeats legacy/table on mobile */
.cmck-view{display:none !important}
.cmck-view.is-active{display:block !important}

/* Hide any legacy container if present */
.cm-legacy,[data-legacy="1"]{display:none !important}

/* Mobile seat grid tweak: avoid nowrap overflow that mimics table look */
@media (max-width:640px){
  .cm-seat-grid{white-space:normal}
}

/* ===================================================================== */
/*        CHECKING PAGE — MOBILE TIGHT-FIT TO PRESERVE 4|3 PER ROW       */
/*  (Scoped to .cm-checking so the booking page is unaffected)           */
/* ===================================================================== */
@media (max-width:640px){
  .cm-checking .cm-seat-grid{
    white-space:nowrap;                  /* keep row on one line */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .cm-checking .cm-seat-row{flex-wrap:nowrap;}
  .cm-checking .cm-seat{
    width:40px; min-width:40px;
    margin:2px;
    padding:6px 4px;
    font-size:.8em; line-height:1.05;
  }
  .cm-checking .cm-walkway{width:16px; min-width:16px; margin:0 4px;}
  .cm-checking .cm-seat-rowlabel{width:20px; margin-right:6px;}
  /* ensure hidden placeholders keep width so columns don't shift */
  .cm-checking .cm-seat.disabled[style*="visibility: hidden"]{width:40px; min-width:40px; margin:2px;}
}
/* Booking page: keep each seat row on one line on mobile */
@media (max-width:640px){
  .cm-book .cm-seat-grid{
    white-space:nowrap;             /* no row wrap */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .cm-book .cm-seat-row{
    flex-wrap:nowrap;               /* overrides global wrap */
  }
  /* (optional) slightly slimmer divider so 4|3 fits easier */
  .cm-book .cm-walkway{width:20px; min-width:20px; margin:0 4px;}
}
/* Viber button placed beside Close in modal footer */
.cm-cta-wrap {
  margin-top: 0;
  padding-top: 0;
  border: none;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: auto;
}
.cm-viber-btn {
  background: #7360f2;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
.cm-viber-btn:hover {
  filter: brightness(0.9);
}

/* Modal actions row (Close + Viber) */
.cm-modal-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

/* Make sure CTA isn't positioned/fixed by theme rules */
.cm-cta-wrap{ position:static !important; margin:0; padding:0; border:0; }
.cm-cta-wrap .cm-btn{ margin-top:0; }

/* Viber look (simple) */
.cm-viber-btn{
  background:#7360F2; color:#fff; border:none; padding:10px 14px;
  border-radius:8px; text-decoration:none; font-weight:600; display:inline-block;
}
.cm-viber-btn:hover{ filter:brightness(.92); }

/* Held seats */
.seat.held {
  background: #9ca3af; /* Tailwind gray-400 */
  color: #fff;
  cursor: not-allowed;
  border-color: #9ca3af;
}

/* Legend pill for Held */
.cm-seat-legend .s.s-hd {
  background: #9ca3af;
  color: #fff;
}
.cm-seatbox .seat.held { background:#f59e0b !important; color:#111 !important; cursor:not-allowed; }
.cm-seatbox .seat.sold { background:#ef4444 !important; color:#fff !important; cursor:not-allowed; }

/* ==== FORCE HELD = GREY ON MOBILE (highest specificity) ==== */
.cm-seatbox .cm-seat-grid button.seat.held.reserved,
.cm-seatbox .cm-seat-grid button.seat.held {
  background: #9ca3af !important;   /* grey */
  color: #111 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;              /* unclickable */
  -webkit-appearance: none;          /* iOS */
}

/* make sure tap states don't recolor them on mobile */
.cm-seatbox .cm-seat-grid button.seat.held:focus,
.cm-seatbox .cm-seat-grid button.seat.held:active {
  background: #9ca3af !important;
  color: #111 !important;
  outline: 0 !important;
}

/* if you have smaller-screen overrides, win there too */
@media (max-width: 640px) {
  .cm-seatbox .cm-seat-grid button.seat.held.reserved,
  .cm-seatbox .cm-seat-grid button.seat.held {
    background: #9ca3af !important;
    color: #111 !important;
  }
}

/* legend chip (optional) */
.cm-seat-legend .s.s-hd { 
  background: #9ca3af !important; 
  color: #111 !important; 
}
/* === Legend chips: match seat colors exactly (fixes mobile lighter look) === */
.cm-seatbox .cm-seat-legend .s {
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  border-radius: 6px;
  padding: 4px 10px;
  border: 0;
}

/* Map legend chips to the same colors you use for seats */
.cm-seatbox .cm-seat-legend .s.s-av { 
  background: #ffffff !important; 
  color: #111 !important; 
  border: 1px solid #d1d5db !important; /* if your available seats have a border */
}
.cm-seatbox .cm-seat-legend .s.s-rv { 
  background: #f59e0b !important; 
  color: #111 !important; 
}
.cm-seatbox .cm-seat-legend .s.s-hd { 
  background: #9ca3af !important;  /* same GREY as held seats */
  color: #111 !important; 
}
.cm-seatbox .cm-seat-legend .s.s-sd { 
  background: #ef4444 !important; 
  color: #fff !important; 
}
.cm-seatbox .cm-seat-legend .s.s-sl { 
  background: #22c55e !important;   /* “Checked” */
  color: #fff !important; 
}

/* Re-assert on small screens in case a mobile block overrides colors */
@media (max-width: 640px){
  .cm-seatbox .cm-seat-legend .s.s-av { background:#ffffff !important; color:#111 !important; border-color:#d1d5db !important; }
  .cm-seatbox .cm-seat-legend .s.s-rv { background:#f59e0b !important; color:#111 !important; }
  .cm-seatbox .cm-seat-legend .s.s-hd { background:#9ca3af !important; color:#111 !important; }
  .cm-seatbox .cm-seat-legend .s.s-sd { background:#ef4444 !important; color:#fff !important; }
  .cm-seatbox .cm-seat-legend .s.s-sl { background:#22c55e !important; color:#fff !important; }
}