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

.toggle-btn {
  background: white;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Date Wrapper */
.date-wrapper {
  background: white;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.2s ease;
}

.date-wrapper.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
}

/* Date Bar */
.date-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: white;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: 0.2s;
}

.arrow:hover {
  transform: scale(1.08);
}

.date-scroll {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 12px;
}

.date-scroll::-webkit-scrollbar { display: none; }

.date-item {
  min-width: 88px;
  text-align: center;
  background: #f3f4f8;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.date-item.active {
  background: #111827;
  color: white;
}

/* Booking Section */
.booking-section {
  margin-top: 18px;
	font-family:vp2;
  background: white;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.duration-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.duration-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: none;
  background: #f3f4f8;
  cursor: pointer;
  font-weight: 600;
}

.duration-btn.active {
  background: #111827;
  color: white;
}

/* Time Slots */
.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.time-slot {
  background: #f3f4f8;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}

.time-slot:hover {
  background: #111827;
  color: white;
}

.time-slot.selected {
  background: #2563eb;
  color: white;
  font-weight: 600;
  transform: scale(1.05);
}

/* Courts */
.court-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.court-card {
  background: #f3f4f8;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

.court-card:hover {
  background: #111827;
  color: white;
}

.court-card.selected {
  background: #16a34a;
  color: white;
}

.video-thumb {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: black;
  transition: 0.2s ease;
}

.video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

.video-thumb:hover {
  transform: scale(1.05);
}

/* Play icon overlay */
.video-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: white;
  font-weight: bold;
  text-shadow: 0 6px 16px rgba(0,0,0,0.65);
  pointer-events: none;
}


.video-thumb {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.video-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  font-weight: bold;
  pointer-events: none;
}


.book-btn {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #f3f4f8;
/*  color: #111827;*/
    background: linear-gradient(90deg, var(--accent), #ac5a43);
    color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.18s ease;
}

/* Hover like time slot */
.book-btn:hover {
  background: #111827;
  color: white;
  transform: scale(1.02);
}

/* Active / Selected feel */
.book-btn:active {
  background: #2563eb;
  color: white;
  transform: scale(0.97);
}

/* Disabled like unavailable slot */
.book-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.summary-box {
  margin-top: 16px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.summary-title {
  font-weight: 700;
  margin-bottom: 10px;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  column-gap: 10px;
}

.summary-label {
  color: #6b7280;
}

.summary-value {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.summary-total {
  margin-top: 10px;
  font-weight: 800;
  font-size: 16px;
  text-align: right;
}
.modal-overlay {
	font-family:vp2;
	color: black;
    font-weight: 100;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-box {
  background: white;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  animation: scaleIn 0.18s ease;
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-title {
  font-weight: 800;
  margin-bottom: 10px;
}

.modal-summary {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.qr-img {
  width: 190px;
  height: 190px;
  margin: 12px auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 8px;
  background: #fafafa;
}

.modal-total {
  font-weight: 800;
  font-size: 16px;
  margin-top: 8px;
  text-align: center;
}

.modal-close {
    background: linear-gradient(90deg, var(--accent), #ac5a43);
    color: white;
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: none;
/*  background: #f3f4f6; */
  font-weight: 600;
  cursor: pointer;
}
.modal-close:hover{
   background: linear-gradient(90deg, #6de54f, #236314);
    color: white;

}

.court-preview {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.court-preview-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.court-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.court-preview-grid img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.2s ease;
  cursor: pointer;
}

.court-preview-grid img:hover {
  transform: scale(1.04);
}

.court-info-box {
  margin-top: 14px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}

.court-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 8px;
}

.court-badge {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
}

.court-meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}

.court-amenities {
  display: flex;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

.court-amenities span {
  background: #f3f4f6;
  padding: 5px 8px;
  border-radius: 8px;
}
.court-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.court-gallery img,
.video-thumb {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s ease;
}

.court-gallery img:hover,
.video-thumb:hover {
  transform: scale(1.05);
}

/* Video thumbnail */
.video-thumb {
  position: relative;
  overflow: hidden;
  background: black;
}

.video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

/* Play icon overlay */
.video-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: white;
  font-weight: bold;
  text-shadow: 0 4px 12px rgba(0,0,0,0.6);
  pointer-events: none;
}

.court-video {
  width: 100%;
  margin-top: 12px;
  border-radius: 12px;
}

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;

  justify-content: center;
  z-index: 99999;
}

.fullscreen-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 14px;
}

.video-modal video {
  max-width: 90%;
  max-height: 90%;
  border-radius: 14px;
}

/*New*/
.toggle{display:flex;gap:10px;margin-bottom:16px}
.toggle button{
  padding:8px 16px;border:none;border-radius:999px;
  font-weight:600;cursor:pointer;background:#e5e7eb
}
.toggle .active{background:#111827;color:#fff}

.section{
  background:#fff;border-radius:14px;padding:18px;
  box-shadow:0 5px 20px rgba(0,0,0,.08);margin-top:16px
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px
}

.item{
  background:#f3f4f8;padding:14px;border-radius:12px;
  cursor:pointer;font-weight:100;text-align:center;font-size:10pt;
  transition:.2s;
	justify-items: anchor-center
}
.item.selected{background:#2563eb;color:#fff}

.coach-photo{
  width:70px;height:70px;border-radius:50%;
  object-fit:cover;margin-bottom:8px
}

.profile-btn{
  margin-top:6px;
  padding:4px 10px;
  border:none;border-radius:999px;
  background:#111827;color:#fff;
  font-size:12px;cursor:pointer
}

.interval-tabs{
  display:flex;gap:10px;margin-bottom:12px
}

.interval-tabs button{
  padding:6px 14px;
  border:none;border-radius:999px;
  background:#e5e7eb;
  font-weight:600;cursor:pointer
}

.interval-tabs .active{
  background:#111827;color:#fff
}

.summary{
  margin-top:16px;padding:14px;
  background:#f9fafb;border-radius:12px;
  line-height:1.6
}

.coach-photo{
  width:70px;height:70px;border-radius:50%;
  object-fit:cover;margin-bottom:8px
}

.profile-btn{
  margin-top:6px;
  padding:4px 10px;
  border:none;border-radius:999px;
  background:#111827;color:#fff;
  font-size:12px;cursor:pointer
}

.interval-tabs{display:flex;gap:10px}
.interval-tabs button{
  padding:6px 14px;border:none;border-radius:999px;
  background:#e5e7eb;font-weight:600;cursor:pointer
}
.interval-tabs .active{background:#111827;color:#fff}

.summary{
  margin-top:16px;padding:14px;
  background:#f9fafb;border-radius:12px;
  line-height:1.6
}

/* MODAL */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000
}
.modal-xbox{
  background:#fff;
  width:320px;
  border-radius:16px;
  padding:20px;
  text-align:center;
  position:relative
}
.modal-xbox img{
 width:320px;
  border-radius:50%;object-fit:cover;
  margin-bottom:10px
}
.modal-xclose{
  position:absolute;
  right:14px;top:12px;
  font-size:18px;
  cursor:pointer;
  font-weight:700
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: #eee;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 600;
}

.tab-btn.active {
  background: #000;
  color: #fff;
}