/*
 * VIP Karaoke Lounge - Shared Booking Calendar Styles
 * Version: 2026-09-07-7
 * Used by BOTH index.html and book.php
 *
 * Calendar-only presentation. JavaScript supplies state/classes only.
 * Reservation marker asset: img/small-mic.png (24x48 source; inserted by booking2-core.js).
 */

/* ===== index.html extracted calendar style block 1 ===== */

/* ===== index.html extracted calendar style block 2 ===== */
html.vip-home-page .booking-embed-scope /* ---------- Calendar & form ---------- */
    .calendar{
      flex:0 0 360px;
      max-width:420px;
      min-width:220px;
      box-sizing:border-box;
      background:transparent;
      padding:8px;
    }html.vip-home-page .booking-embed-scope .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}html.vip-home-page .booking-embed-scope .arrow{cursor:pointer;font-size:22px;padding:6px 10px;border-radius:6px;color:#aaa; user-select:none}html.vip-home-page .booking-embed-scope .arrow:hover{color:#fff;background:rgba(255,255,255,0.03)}html.vip-home-page .booking-embed-scope .month-title{font-weight:700;font-size:18px;color:#fff}html.vip-home-page .booking-embed-scope .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}html.vip-home-page .booking-embed-scope .day-name{text-align:center;font-size:12px;color:#aaa}html.vip-home-page .booking-embed-scope .day-container{position:relative;text-align:center;min-height:46px}html.vip-home-page .booking-embed-scope .day{width:40px;height:40px;line-height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}html.vip-home-page .booking-embed-scope .day.current{border:2px solid #ff4d6d;color:#fff}html.vip-home-page .booking-embed-scope .day:hover{background:#2a2a2f;border-radius:6px}html.vip-home-page .booking-embed-scope .day.selected{background:#007BFF;color:#fff;border-radius:6px}@media (max-width:600px){html.vip-home-page .booking-embed-scope .calendar-grid{grid-template-columns:repeat(7,1fr); gap:6px}html.vip-home-page .booking-embed-scope .day{width:34px;height:34px;line-height:34px}}html.vip-home-page .booking-modal-backdrop.has-inline-booking .calendar{
  flex:0 0 360px !important;
  width:360px !important;
  max-width:360px !important;
  min-width:360px !important;
  margin:0 !important;
}@media (max-width: 991.98px){html.vip-home-page .booking-modal-backdrop.has-inline-booking .calendar{
    width:100% !important;
    max-width:640px !important;
    min-width:0 !important;
    margin:0 auto !important;
  }html.vip-home-page .booking-modal-backdrop.has-inline-booking .calendar{
    flex:0 0 auto !important;
  }}
/* ===== index.html extracted calendar style block 3 ===== */

/* ===== book.php extracted calendar style block 1 ===== */
html.vip-book-page .calendar{
      flex: 0 0 360px;
      max-width: 420px;
      min-width: 220px;
      width: 100%;
      background: transparent;
      padding: 8px;
    }html.vip-book-page .calendar-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }html.vip-book-page .arrow{
      cursor: pointer;
      font-size: 22px;
      padding: 6px 10px;
      border-radius: 6px;
      color: #aaa;
      user-select: none;
    }html.vip-book-page .arrow:hover{
      color: #fff;
      background: rgba(255,255,255,0.03);
    }html.vip-book-page .month-title{
      font-weight: 700;
      font-size: 18px;
      color: #fff;
    }html.vip-book-page .calendar-grid{
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
    }html.vip-book-page .day-name{
      text-align: center;
      font-size: 12px;
      color: #aaa;
    }html.vip-book-page .day-container{
      position: relative;
      text-align: center;
      min-height: 46px;
    }html.vip-book-page .day{
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s;
      color: #fff;
    }html.vip-book-page .day.current{
      border: 2px solid #ff4d6d;
      color: #fff;
    }html.vip-book-page .day:hover{
      background: #2a2a2f;
      border-radius: 6px;
    }html.vip-book-page .day.selected{
      background: #007BFF;
      color: #fff;
      border-radius: 6px;
    }@media (min-width: 992px){html.vip-book-page .calendar{
        flex: 0 0 360px;
      }}@media (max-width: 1024px){html.vip-book-page .calendar{
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100%;
        margin: 0 auto;
        border-radius: 0;
      }html.vip-book-page .calendar{
        margin-bottom: 20px;
      }}@media (max-width: 900px){html.vip-book-page .calendar{ flex-basis: auto; width: 100%; }html.vip-book-page .calendar-grid{ gap: 8px; }}@media (max-width: 600px){html.vip-book-page .calendar-grid{ grid-template-columns: repeat(7, 1fr); gap: 6px; }html.vip-book-page .day{ width: 34px; height: 34px; line-height: 34px; }}

/* ===== Shared booked-day marker / state overrides ===== */
html.vip-home-page .booking-embed-scope .day-container,
html.vip-book-page .day-container {
  position: relative;
}

html.vip-home-page .booking-embed-scope .day,
html.vip-book-page .day {
  position: relative;
  isolation: isolate;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.92);
}

html.vip-home-page .booking-embed-scope .day .day-number,
html.vip-book-page .day .day-number {
  position: relative;
  z-index: 2;
}

/* Booked-day microphone is now a real <img> inserted by JS. */
html.vip-home-page .booking-embed-scope .day::before,
html.vip-book-page .day::before {
  content: none !important;
  background-image: none !important;
}

html.vip-home-page .booking-embed-scope .day .vip-booking-mic,
html.vip-book-page .day .vip-booking-mic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 36px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

html.vip-home-page .booking-embed-scope .day.vip-disabled-day,
html.vip-home-page .booking-embed-scope .day.vip-tuesday-day,
html.vip-book-page .day.vip-disabled-day,
html.vip-book-page .day.vip-tuesday-day {
  opacity: 0.30 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

html.vip-home-page .booking-embed-scope .day.empty::before,
html.vip-book-page .day.empty::before {
  content: none !important;
}

html.vip-home-page .booking-embed-scope .arrow.vip-disabled-nav,
html.vip-book-page .arrow.vip-disabled-nav {
  opacity: 0.28;
  pointer-events: none;
}