/*
UF Tennis Booking V2
Completely scoped under .uftbv2-wrap so it will not affect the old booking UI.
Change ONLY the color variables below when tuning the V2 theme.
*/
.uftbv2-wrap{
  --uftbv2-bg:#e9e1d7;
  --uftbv2-panel:#e6ddd1;
  --uftbv2-header:#918a83;
  --uftbv2-header-text:#f8f4eb;
  --uftbv2-time-bg:#c8c0b7;
  --uftbv2-grid:#ffffff;
  --uftbv2-available:#e3ddd5;
  --uftbv2-available-hover:#e3ddd5;
  --uftbv2-selected:#6b5242;
  --uftbv2-selected-text:#ffffff;
  --uftbv2-text:#4c4b4c;
  --uftbv2-muted:#77736e;
  --uftbv2-border:#d8cbbc;

  font-family:Arial,Helvetica,sans-serif;
  color:var(--uftbv2-text);
  background:var(--uftbv2-panel);
  border:1px solid var(--uftbv2-border);
  border-radius:16px;
  padding:14px 12px 16px;
  box-sizing:border-box;
  width:100%;
}

.uftbv2-wrap *{box-sizing:border-box}

.uftbv2-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.uftbv2-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}

.uftbv2-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--uftbv2-header);
  color:var(--uftbv2-header-text);
  flex:0 0 auto;
}
.uftbv2-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.uftbv2-collapse{
  border:0;
  background:transparent;
  color:#7a756e;
  font:700 20px/1 Arial,Helvetica,sans-serif;
  padding:4px 6px;
  cursor:pointer;
}

.uftbv2-label{
  font-size:12px;
  font-weight:700;
  color:var(--uftbv2-muted);
  margin:0 0 10px;
  letter-spacing:.01em;
}

.uftbv2-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
}

.uftbv2-table{
  width:100%;
  min-width:760px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-family:Arial,Helvetica,sans-serif;
}

.uftbv2-table th,
.uftbv2-table td{
  padding:0;
  border-right:2px solid var(--uftbv2-grid);
  border-bottom:2px solid var(--uftbv2-grid);
  text-align:center;
  vertical-align:middle;
}

.uftbv2-table thead th{
  height:43px;
  background:var(--uftbv2-header);
  color:var(--uftbv2-header-text);
  font-size:12px;
  font-weight:700;
}

.uftbv2-table thead th:first-child{
  border-top-left-radius:10px;
}
.uftbv2-table thead th:last-child{
  border-top-right-radius:10px;
  border-right:0;
}
.uftbv2-table tbody tr:last-child td:first-child{
  border-bottom-left-radius:10px;
}
.uftbv2-table tbody tr:last-child td:last-child{
  border-bottom-right-radius:10px;
}

.uftbv2-time-col{width:110px}
.uftbv2-time{
  height:42px;
  background:var(--uftbv2-time-bg);
  color:var(--uftbv2-text);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.uftbv2-table tbody td:last-child{border-right:0}
.uftbv2-table tbody tr:last-child td{border-bottom:0}

.uftbv2-slot{
  width:100%;
  height:42px;
  border:0;
  border-radius:4px;
  background:var(--uftbv2-available);
  color:#fff;
  font:700 18px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  transition:background .15s ease, transform .08s ease;
}
.uftbv2-slot:hover{background:var(--uftbv2-available-hover)}
.uftbv2-slot:active{transform:scale(.985)}
.uftbv2-slot.is-selected{
  background:var(--uftbv2-selected);
  color:var(--uftbv2-selected-text);
}

.uftbv2-status{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:11px;
  color:var(--uftbv2-muted);
  font-size:11px;
}
.uftbv2-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--uftbv2-available);
}

.uftbv2-wrap.is-collapsed .uftbv2-content{display:none}
.uftbv2-wrap.is-collapsed .uftbv2-collapse{transform:rotate(180deg)}

@media(max-width:767px){
  .uftbv2-wrap{
    border-radius:14px;
    padding:12px 10px 14px;
  }
  .uftbv2-title{font-size:17px}
  .uftbv2-icon{width:32px;height:32px}
  .uftbv2-table{min-width:720px}
  .uftbv2-table thead th{height:41px;font-size:11px}
  .uftbv2-time,
  .uftbv2-slot{height:40px}
  .uftbv2-time{font-size:11px}
}


/* v0.1.1 — requested V2 Select Times styling */
.uftbv2-head{
  margin-bottom:12px;
}
.uftbv2-collapse{
  display:none!important;
}

/* Header row */
.uftbv2-table thead th{
  background:#918a83!important;
}

/* Time column */
.uftbv2-time{
  background:#c8c0b7!important;
  height:48px!important;
  min-height:48px!important;
  padding:0!important;
}

/* Court slots — same row height as Time column */
.uftbv2-table tbody td{
  height:48px!important;
  min-height:48px!important;
  padding:0!important;
}
.uftbv2-slot{
  height:48px!important;
  min-height:48px!important;
  background:#e3ddd5!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1!important;
}
.uftbv2-slot:hover{
  background:#e3ddd5!important;
}

/* Selected / booked visual state */
.uftbv2-slot.is-selected{
  background:#7b7b7b!important;
  color:#fff!important;
}
.uftbv2-slot.is-selected::before{
  content:"×";
  display:inline-block;
  color:#fff;
  font-size:22px;
  font-weight:700;
  line-height:1;
}

/* Normal available slots show no symbol */
.uftbv2-slot:not(.is-selected)::before{
  content:"";
}

/* Keep mobile row heights consistent too */
@media(max-width:767px){
  .uftbv2-time,
  .uftbv2-table tbody td,
  .uftbv2-slot{
    height:46px!important;
    min-height:46px!important;
  }
}

/* v0.1.2 — requested refinements
   1) no dim/dark border appearance
   2) empty slot background = #f8f5ef
   3) selected slot background = #6b5142 with white X
   4) remove bottom V2 demo note
*/
.uftbv2-wrap{
  border:1px solid #ddd5cb !important;
  box-shadow:none !important;
}

.uftbv2-table{
  border-spacing:0 !important;
}

.uftbv2-table th,
.uftbv2-table td{
  border-right:2px solid #ffffff !important;
  border-bottom:2px solid #ffffff !important;
}

.uftbv2-table thead th{
  background:#918a83 !important;
  color:#f8f4eb !important;
}

.uftbv2-time{
  background:#c8c0b7 !important;
  color:#4c4b4c !important;
  height:48px !important;
  min-height:48px !important;
}

.uftbv2-table tbody td{
  background:transparent !important;
  height:48px !important;
  min-height:48px !important;
}

.uftbv2-slot{
  height:48px !important;
  min-height:48px !important;
  background:#f8f5ef !important;
  color:transparent !important;
  border:0 !important;
  border-radius:4px !important;
  box-shadow:none !important;
}
.uftbv2-slot:hover{
  background:#f8f5ef !important;
}

.uftbv2-slot.is-selected{
  background:#6b5142 !important;
  color:#ffffff !important;
}
.uftbv2-slot.is-selected:hover{
  background:#6b5142 !important;
}
.uftbv2-slot.is-selected::before{
  content:"×";
  display:inline-block;
  color:#ffffff;
  font-size:22px;
  font-weight:700;
  line-height:1;
}
.uftbv2-slot:not(.is-selected)::before{
  content:"";
}

.uftbv2-status{
  display:none !important;
}

/* mobile consistency */
@media(max-width:767px){
  .uftbv2-time,
  .uftbv2-table tbody td,
  .uftbv2-slot{
    height:46px !important;
    min-height:46px !important;
  }
}


/* v0.1.3 — layout + colors refined per latest request */
.uftbv2-wrap{
  border:1px solid #d9d1c6 !important;
  border-radius:0 !important;   /* not rounded */
  box-shadow:none !important;
  background:#e6ddd1 !important;
}

.uftbv2-table-scroll{
  border-radius:0 !important;
}

.uftbv2-table{
  border-collapse:collapse !important;
  border-spacing:0 !important;
  width:100% !important;
  border:1px solid #ffffff !important;
}

.uftbv2-table thead th,
.uftbv2-table tbody td{
  border:1px solid #ffffff !important;
  border-radius:0 !important;
  padding:0 !important;
}

.uftbv2-table thead th{
  background:#918a83 !important;
  color:#f8f4eb !important;
  height:42px !important;
  min-height:42px !important;
  border-radius:0 !important;
}

.uftbv2-time-col{
  width:108px !important;
}

.uftbv2-time{
  background:#c8c0b7 !important;
  color:#4c4b4c !important;
  height:48px !important;
  min-height:48px !important;
  line-height:48px !important;
  padding:0 !important;
  border-radius:0 !important;
  text-align:center !important;
}

.uftbv2-table tbody td{
  background:#757070 !important;
  height:48px !important;
  min-height:48px !important;
  vertical-align:middle !important;
}

.uftbv2-slot{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;   /* cell should be square */
  box-shadow:none !important;
  background:#757070 !important; /* available / not selected */
  color:transparent !important;
}

.uftbv2-slot:hover{
  background:#757070 !important;
}

.uftbv2-slot.is-selected{
  background:#6b5242 !important; /* selected — matches Dashboard banner */
  color:#ffffff !important;
}

.uftbv2-slot.is-selected:hover{
  background:#6b5242 !important;
}

.uftbv2-slot.is-selected::before{
  content:"✓";
  color:#ffffff;
  font-size:22px;
  font-weight:700;
  line-height:1;
}

.uftbv2-slot:not(.is-selected)::before{
  content:"";
}

@media(max-width:767px){
  .uftbv2-table thead th{
    height:40px !important;
    min-height:40px !important;
  }

  .uftbv2-time,
  .uftbv2-table tbody td,
  .uftbv2-slot{
    height:46px !important;
    min-height:46px !important;
    line-height:46px !important;
  }
}

/* v0.1.5 — precisely match the Book a Court heading from the live layout */
.uftbv2-wrap{
  padding:18px 18px 16px !important;
}

.uftbv2-head{
  margin-bottom:14px !important;
}

.uftbv2-title,
.uftbv2-title > span:last-child{
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:#757070 !important;
}

.uftbv2-title{
  gap:16px !important;
}

.uftbv2-icon{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
  background:#f3eadf !important;
  color:#815033 !important;
}

.uftbv2-icon svg{
  width:34px !important;
  height:34px !important;
  stroke-width:1.5 !important;
}

@media(max-width:767px){
  .uftbv2-title,
  .uftbv2-title > span:last-child{
    font-size:16px !important;
  }

}

/* v0.1.6 — border only the Select Times circular icon */
.uftbv2-icon{
  border:1px solid #c9ad99 !important;
  box-sizing:border-box !important;
}

/* v0.1.7 — exact Select Times colors + responsive alignment with Dashboard cards */
.uftbv2-title,
.uftbv2-title > span:last-child{
  color:#817b7b !important;
}

.uftbv2-icon{
  background:#f3eadf !important;
  color:#815033 !important;
}

/* v0.2.12 — paid/confirmed slots */
.uftbv2-slot.is-booked,
.uftbv2-slot.is-booked:hover{
  background:#4c4b4c !important;
  color:#ffffff !important;
  cursor:not-allowed !important;
  transform:none !important;
  opacity:1 !important;
}

.uftbv2-slot.is-booked::before{
  content:"×" !important;
  color:#ffffff !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

/* v0.2.13 — approved Select Times interaction palette */
.uftbv2-table tbody td,
.uftbv2-slot,
.uftbv2-slot:hover{
  background:#e3ddd5 !important;
}

.uftbv2-slot.is-selected,
.uftbv2-slot.is-selected:hover{
  background:#6b5242 !important;
  color:#ffffff !important;
}

.uftbv2-slot.is-selected::before{
  content:"×" !important;
  color:#ffffff !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

.uftbv2-slot.is-booked,
.uftbv2-slot.is-booked:hover{
  background:#96918e !important;
  color:#ffffff !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}

.uftbv2-alert[hidden]{display:none !important}

.uftbv2-alert{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:18px !important;
  background:rgba(38,29,27,.18) !important;
}

.uftbv2-alert-card{
  width:min(450px,calc(100vw - 36px)) !important;
  margin-top:12px !important;
  padding:24px 22px 20px !important;
  border:1px solid rgba(243,234,223,.36) !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,#24191b 0%,#3e2d2a 58%,#6b5242 100%) !important;
  box-shadow:0 16px 42px rgba(36,25,27,.32) !important;
  color:#f8f4eb !important;
  font-family:Arial,Helvetica,sans-serif !important;
}

.uftbv2-alert-card strong{
  display:block !important;
  margin:0 0 12px !important;
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:700 !important;
}

.uftbv2-alert-card p{
  margin:0 0 18px !important;
  color:#f3eadf !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.45 !important;
}

.uftbv2-alert-ok{
  display:block !important;
  min-width:86px !important;
  margin-left:auto !important;
  padding:9px 20px !important;
  border:1px solid #c9ad99 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#f8f4eb 0%,#e8d7c3 100%) !important;
  color:#6b5242 !important;
  font:700 13px/1 Arial,Helvetica,sans-serif !important;
  cursor:pointer !important;
  box-shadow:none !important;
}

.uftbv2-alert-ok:hover,
.uftbv2-alert-ok:focus{
  background:linear-gradient(135deg,#ffffff 0%,#f3eadf 100%) !important;
  color:#6b5242 !important;
  outline:2px solid rgba(248,244,235,.7) !important;
  outline-offset:2px !important;
}

body.uftbv2-alert-open{overflow:hidden !important}

@media(max-width:767px){
  .uftbv2-wrap{
    padding:13px 14px 16px !important;
  }

  .uftbv2-title{
    gap:14px !important;
  }

  .uftbv2-icon{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
  }

  .uftbv2-icon svg{
    width:34px !important;
    height:34px !important;
  }
}