/* 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}

/* Modal */
.cm-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:999999}
.cm-modal.cm-open{display:flex !important}
.cm-modal-content{background:#fff;border-radius:12px;padding:16px;max-width:520px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cm-close{margin-top:8px}

/* 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:nowrap}
.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}

/* walkway is a thin vertical line + small gap, doesn’t break the row */
.cm-walkway{display:inline-block;width:28px;height:1px;position:relative;margin:0 2px}
.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.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-walkway{width:36px}
  .cm-walkway::before{opacity:.9}
  .cm-seatmap .seat{width:50px;min-width:50px;padding:7px 8px}
}
/* ---- 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 (actual seatmap styled in another file if present) ---- */
.cm-seatmap{ margin:10px 0; border:1px dashed #d1d5db; border-radius:8px; padding:14px; }
.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; }