/* assets/css/booking.css */

/* Header overrides now in main.css — keep nav hover only */
.navmenu li:hover > a,
.navmenu .active,
.navmenu .active:focus {
  color: #dfc884 !important;
}
/* ── Logo: override max-height from main.css ── */
/* day pill */
.day-pill {
  min-width: 74px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  user-select: none;
}

.day-pill .dow { font-size: 12px; opacity: .7; line-height: 1; }
.day-pill .num { font-size: 22px; font-weight: 700; line-height: 1.15; }
.day-pill .mon { font-size: 12px; opacity: .7; line-height: 1; }

.day-pill.active {
  background: #d35400;
  border-color: #d35400;
  color: #fff;
}

/* slot grid */
.slot-col { padding: 6px; }

.slot-btn {
  width: 100%;
  border-radius: 14px;
  padding: 14px 0;
  font-weight: 700;
  background: #fff;
  border: 1px solid #d7dee8;
  color: #111827;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.slot-btn:hover {
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.slot-btn.available {
  background: #fff;
  color: #111827;
}

.slot-btn.unavailable {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.slot-btn.selected {
  background: #1f4d3a;        /* xanh đậm như ảnh */
  border-color: #1f4d3a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 77, 58, 0.25);
}

/* quote */
.muted-small { font-size: 13px; color: #6b7280; }

.quote-card {
  border-radius: 14px;
  overflow: hidden;
}

.badge-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #111827;
}

.badge-tier.NEW { background: #f3f4f6; }
.badge-tier.MEMBER { background: #e0f2fe; border-color: #bae6fd; }
.badge-tier.VIP { background: #dcfce7; border-color: #bbf7d0; }
.badge-tier.SUPER_VIP { background: #fee2e2; border-color: #fecaca; }

#weekStrip { padding-bottom: 6px; }

/* login modal error */
#loginError { white-space: pre-line; }

/* ===== User dropdown ===== */
/* btn-user and membership badge now in main.css */

.user-dropdown .dropdown-menu {
  min-width: 180px;
  border-radius: 10px;
  font-size: 14px;
}

.user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  color: #111827;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  font-family: var(--default-font), "Inter", sans-serif;
  transition: all 0.2s ease;
}

.user-dropdown a.dropdown-item {
  color: #111827;
  text-decoration: none;
}

.user-dropdown a.dropdown-item:hover,
.user-dropdown button.dropdown-item:hover {
  color: #003d1d;
  background-color: #f3f4f6;
}

.user-dropdown .dropdown-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  margin-right: 12px !important;
}

#myBookingsList .list-group-item {
  border-radius: 12px;
  margin-bottom: 10px;
}
#myBookingsList .badge {
  margin-left: 6px;
}

/* ===== My bookings badges ===== */
.badge-status,
.badge-pay{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid transparent;
  line-height:1;
  white-space:nowrap;
}

/* Status */
.badge-status.confirmed{ background:#e9f7ef; color:#146c43; border-color:#b7e4c7; }
.badge-status.pending{   background:#fff3cd; color:#7a5b00; border-color:#ffe69c; }
.badge-status.cancelled{ background:#fde2e1; color:#b02a37; border-color:#f5b5b3; }
.badge-status.expired{   background:#eef0f2; color:#495057; border-color:#d7dadd; }

/* Payment */
.badge-pay.paid{     background:#e9f7ef; color:#146c43; border-color:#b7e4c7; }
.badge-pay.unpaid{   background:#ffffff; color:#6c757d; border-color:#d0d5dd; }
.badge-pay.pending{  background:#e7f1ff; color:#0b5ed7; border-color:#b6d4fe; }

/* Past slot */
.slot-btn.past {
  background: #f1f3f5 !important;
  border-color: #e9ecef !important;
  color: #adb5bd !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
.slot-btn.past:hover { filter: none !important; }

.food-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
}

.food-left{
  display:flex;
  gap:12px;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}
.food-thumb{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  flex:0 0 auto;
}

.qty-stepper{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  position:relative;
  z-index:5;
  pointer-events:auto;
}

.qty-stepper button,
.qty-stepper input{
  pointer-events:auto;
}

/* ===== Food stepper: pill + clean ===== */

.qty-stepper{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  position:relative;
  z-index:5;
  pointer-events:auto;

  /* làm nền nhẹ để stepper “gom” lại */
  padding:6px;
  border:1px solid rgba(0,0,0,.08);
  background:#f8f9fa;
  border-radius:10px;
}

/* nút +/- */
.qty-stepper .btn-minus,
.qty-stepper .btn-plus{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  line-height:1;
  font-weight:600;
  color:#111;

  user-select:none;
  cursor:pointer;

  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
}

.qty-stepper .btn-minus:hover,
.qty-stepper .btn-plus:hover{
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.qty-stepper .btn-minus:active,
.qty-stepper .btn-plus:active{
  transform: scale(0.97);
}

.qty-stepper .btn-minus:disabled,
.qty-stepper .btn-plus:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* input số lượng */
.qty-stepper .qty-input{
  width:54px;           /* nhỏ lại */
  height:34px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:5px;
  background:#fff;

  text-align:center;
  font-weight:600;
  font-size:14px;
  color:#111;

  outline:none;
}

.qty-stepper .qty-input:disabled{
  background:#f1f3f5;
  color:#999;
}

/* bỏ spinner trên Chrome/Safari */
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

#btnToggleFood{
  text-decoration: none;
  font-weight: 600;
}
#btnToggleFood:hover{
  text-decoration: underline;
}

.options-wrap{
  border-top: 1px solid #eef2f7;
  padding-top: 10px;
}
.options-panel{
  border: 1px solid #e6edf7;
  border-radius: 12px;
  padding: 10px;
  background: #fbfdff;
}
.option-tabs{
  display:flex;
  gap:8px;
}
.option-tabs .nav-item{
  flex: 0 0 auto;
}
.option-tabs .nav-link{
  border-radius: 10px !important;
  font-weight: 700;
  padding: 8px 14px;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  background: #fff;
}
.option-tabs .nav-link.active{
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
.option-pane-box{
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.coach-radio-list{
  display:grid;
  gap:10px;
}
.coach-radio-item{
  display:grid;
  grid-template-columns: 18px 42px 1fr;
  align-items:center;
  gap:10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.coach-radio-item:has(input:checked){
  border-color:#2563eb;
  background:#eff6ff;
}
.coach-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.08);
}
.coach-radio-content{
  min-width:0;
}
.coach-name{
  font-size:14px;
  font-weight:700;
  color:#111827;
}
.coach-meta{
  font-size:12px;
  color:#6b7280;
}

.pay-method-group{
  display:grid;
  gap:8px;
}
.pay-method-item{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #dbe5f1;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  background:#fff;
  font-size:14px;
  font-weight:600;
}
.pay-method-item:has(input:checked){
  border-color:#2563eb;
  background:#eff6ff;
}

/* ══════════════════════════════════════
   Mobile-first responsive (all pages)
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Shell padding — giảm top vì header nhỏ hơn trên mobile */
  .cls-shell, .rk-shell, .mb-shell, .ab-shell, .ct-shell,
  .txn-shell, .rp-shell, .var-shell, .tour-shell, .pm-shell {
    padding: 76px 0 32px;
  }

  /* Hero — padding & font nhỏ hơn */
  .cls-hero, .rk-hero, .txn-hero, .tour-hero, .pm-hero, .var-hero, .rp-hero {
    padding: 16px 16px; border-radius: 12px;
  }
  .mb-hero { padding: 20px 16px; border-radius: 12px; }
  .ab-hero { padding: 24px 16px; border-radius: 12px; }
  .ct-hero { padding: 20px 16px; border-radius: 12px; }

  .cls-hero h2, .rk-hero h2, .txn-hero h2, .tour-hero h2,
  .pm-hero h2, .var-hero h2, .rp-hero h2 { font-size: 1.15rem; }
  .mb-hero h2 { font-size: 1.2rem; }
  .ab-hero h2 { font-size: 1.3rem; }
  .ct-hero h2 { font-size: 1.2rem; }

  .cls-hero .sub, .rk-hero .sub, .txn-hero .sub, .tour-hero .sub,
  .pm-hero .sub, .var-hero .sub, .mb-hero .sub, .ab-hero .sub, .ct-hero .sub {
    font-size: .8rem;
  }

  /* Filter bars */
  .cls-filter, .rk-filter, .txn-filter, .tour-filter, .pm-filter {
    padding: 12px 12px; border-radius: 10px;
  }

  /* Cards — border-radius nhỏ hơn */
  .cls-card, .tour-card, .rk-podium-card, .mb-tier-card {
    border-radius: 12px;
  }
  .ab-card, .ct-info-card, .ct-hours, .ct-promise,
  .rp-stat-card, .rp-spark-card, .ab-stat-card { border-radius: 10px; }

  /* Tables — cho scroll ngang */
  .rk-table-wrap, .txn-table-wrap, .rp-table-wrap {
    border-radius: 10px;
  }
  .rk-table-wrap, .txn-table-wrap, .rp-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .rk-table, .txn-table, .rp-history-table {
    min-width: 520px;
  }
  .rk-table-head th, .txn-table-head th, .rp-table-head th {
    padding: 10px 10px; font-size: .68rem;
  }
  .rk-table tbody td, .txn-table tbody td, .rp-history-table tbody td {
    padding: 8px 10px; font-size: .8rem;
  }

  /* KV grid trong class card */
  .cls-kv { padding: 6px 8px; }
  .cls-kv .v { font-size: .8rem; }

  /* Membership pricing grid */
  .mb-tier-card { border-radius: 14px; }
  .mb-tier-price { font-size: 1.6rem; }
  .mb-my-card { padding: 14px 16px; flex-direction: column; gap: 12px !important; }

  /* Rankings podium */
  .rk-podium-card { padding: 14px; border-radius: 12px; }
  .rk-podium-rating { font-size: 1.3rem; }
  .rk-podium-name { font-size: .88rem; }

  /* Rankings-profile */
  .rp-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
  .rp-name { font-size: 1rem; }
  .rp-rating-big { font-size: 2rem; }
  .rp-stat-card { padding: 12px 8px; }
  .rp-stat-val { font-size: 1.3rem; }
  .sport-tab { padding: 5px 12px; font-size: .78rem; }

  /* Contact */
  .ct-info-card { padding: 16px; }
  .ct-promise { padding: 18px 16px; border-radius: 12px; }

  /* About */
  .ab-card { padding: 18px 16px; }
  .ab-sport { padding: 14px; border-radius: 10px; }
  .ab-stat-num { font-size: 1.5rem; }

  /* VAR */
  .var-card-body { padding: 14px; }
  .var-controls { padding: 12px 14px; }
  .var-url-bar { padding: 10px 14px; }

  /* Modal */
  .modal-dialog { margin: 8px; }
}