.criconet-live-player {
  padding: 130px 0px 0px 0px;
}


/* Header */
.live-match-header {
  display: flex;
  justify-content: space-between;
  padding: 16px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  margin-bottom: 18px;
}

.header-left { display:flex; gap:14px; align-items:center; }
.back-btn {
  width:36px;height:36px;border-radius:50%;
  border:1px solid #ddd;
  display:flex;align-items:center;justify-content:center;
  color:#800000;text-decoration:none;
}
.match-title { margin:0;font-size:18px;font-weight:700;color:#800000; }
.match-meta { font-size:12px;color:#666; }
.live-pill {
  background:#e60000;color:#fff;
  font-size:11px;font-weight:700;
  padding:6px 12px;border-radius:20px;
}


/* Player */
/* =====================
   Player Container
===================== */



.player-single,
.player-both {
  background: #35353a;
  padding: 2px;
  border-radius: 18px;
  margin: auto;
}

.player-single {
  max-width: 1200px;
}

.player-both {
  max-width: 1200px;
  padding: 2px; /* slightly more space in both mode */
}

/* =====================
   Player Wrapper
===================== */

.player-wrapper {
  background: #000;
  padding: 2px;
  border-radius: 16px;
}

/* =====================
   Video
===================== */

.video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
}

/* =====================
   Views
===================== */

.camera-view.d-none {
  display: none;
}

/* =====================
   Dual Camera Grid
===================== */

.dual-camera-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px; /* more breathing space */
}

/* =====================
   HEIGHT BOOST FOR BOTH CAMS
===================== */

/* Single camera – normal height */
.player-single .video-player {
  max-height: 520px;
}

/* Both cameras – taller look */
.player-both .video-player {
  min-height: 360px;
}

/* ===============================
   Highlights Section
=============================== */


/* =================================================
   HIGHLIGHTS – FINAL UI
================================================= */

.highlights-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 16px;
}

.highlights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.highlights-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.highlights-header .hint {
  font-size: 12px;
  color: #777;
}

/* Grid */
.recorded-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* Card */
.record-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  position: relative;
}

/* Video */
.record-item video {
  width: 100%;
  height: 170px;
  object-fit: cover;
  background: #000;
}

/* Overlay */
.record-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Processing */
.record-overlay.processing {
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.record-overlay.processing i {
  font-size: 24px;
}

/* Footer */
.record-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 12px;
}

.record-footer .time {
  color: #555;
  font-weight: 600;
}

.record-footer button {
  border: none;
  background: none;
  color: #d00;
  cursor: pointer;
  font-size: 14px;
}

.record-footer button:hover {
  color: #a00;
}

/* Empty */
.highlight-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 0;
  color: #888;
}

.highlight-empty i {
  font-size: 32px;
  margin-bottom: 10px;
}


/* ===============================
   PROCESSING CARD (MOBILE FIX)
=============================== */
/* ===============================
   PROCESSING CARD (CENTERED)
=============================== */

.record-processing {
  min-height: 96px;
  padding: 18px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;       /* STACK */
  align-items: center;          /* HORIZONTAL CENTER */
  justify-content: center;      /* VERTICAL CENTER */
  gap: 8px;

  text-align: center;           /* TEXT CENTER */
}

/* Spinner */
.record-processing i {
  font-size: 26px;
  color: #e60000;
}

/* Text block */
.record-processing .text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title */
.record-processing strong {
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

/* Subtext */
.record-processing small {
  font-size: 12px;
  color: #666;
}

/* Saving text */
.record-processing .saving {
  margin-top: 6px;
  font-size: 12px;
  color: #888;
}

/* ===============================
   MOBILE OPTIMIZATION
=============================== */
@media (max-width: 768px) {
  .record-processing {
    min-height: 78px;
    padding: 14px;
  }

  .record-processing i {
    font-size: 22px;
  }

  .record-processing strong {
    font-size: 14px;
  }
}





/* Mobile */
@media (max-width: 768px) {
  .record-item video {
    height: 190px;
  }
}



/* Desktop enhancement */
@media (min-width: 992px) {
  .player-both .video-player {
    min-height: 420px;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  .player-both .video-player {
    min-height: 480px;
  }
}

/* Mobile: stack but keep usable height */
@media (max-width: 768px) {
  .dual-camera-grid {
    grid-template-columns: 1fr;
  }

  .player-both .video-player {
    min-height: 260px;
  }
}


/* Record Button */
/* =====================
   Player Top Actions
===================== */

.player-top-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px; /* space between button & video */
}

/* =====================
   Record Button
===================== */

/* =====================
   Camera + Record Bar
===================== */

.camera-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px auto 10px;
  padding: 12px 14px;
  background: #ffffff;
  border-radius: 18px;
  max-width: 520px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

/* Camera buttons */
.camera-tabs-group {
  display: flex;
  gap: 8px;
}

.camera-btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: #eee;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.camera-btn.active {
  background: #800000;
  color: #fff;
}

/* =====================
   Record Button
===================== */

.rec-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #800000;
  color: #800000;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.rec-action-btn i {
  font-size: 12px;
}

.rec-action-btn.recording {
  background: #800000;
  color: #fff;
}

.rec-action-btn.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mobile */
@media (max-width: 768px) {
  .camera-control-bar {
    flex-direction: column;
    gap: 10px;
  }
}