/* ===== Color System (from screenshot) ===== */
:root {
  --bg: #7f9793;         /* main teal/grey backdrop */
  --panel: #8ea19e;      /* header/date strip + general panels */
  --tile-empty: #9aabac; /* empty slot tile */
  --tile-event: #e6e8b7; /* cream event tile */
  --tile-event-border: #dfe5a3;
  --text-main: #eef1dc;  /* light text on teal */
  --text-dim: #dfe7de;
  --text-dark: #4b554f;
  --pill: #90a5a2;       /* date pills */
  --btn: #e6e8b7;        /* book button bg */
}

/* ===== Header with arrows (legacy controls area; kept if used elsewhere) ===== */
.spv-calendar-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}

.spv-calendar-controls .spv-title{
  margin:0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-main);
}

/* circular arrow buttons (legacy controls) */
.spv-calendar-controls .spv-prev,
.spv-calendar-controls .spv-next{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  color: var(--text-main);
  background: transparent;
  line-height: 30px;
  text-align:center;
  padding:0;
  font-size: 18px;
  cursor:pointer;
}

/* ===== Table layout ===== */
#spv-calendar-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
	    min-width: 1200px;
}

/* date strip looks like a rounded pill bar */

#spv-calendar-table thead tr th:first-child{

    background: #8fa6a2 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 120px !important;
}
#spv-calendar-table thead tr th:last-child{
   background: #8fa6a2 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 93px !important;
    display: flex
;
    justify-content: end;
}
#spv-calendar-table thead th{
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 20px;
}
.spv-calendar-grid {
        width: 100%;
        overflow-x: auto;
}
#spv-calendar-table thead th:nth-child(2) {

    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
}
#spv-calendar-table thead th:nth-child(8) {
    border-top-right-radius: 25px;
    /* border-bottom-left-radius: 25px; */
    border-bottom-right-radius: 25px;

}
/* ==== NEW: arrow header cells (first & last th) should have no pill bg ==== */
#spv-calendar-table thead th.spv-nav-cell{
  background: var(--bg) !important;   /* visually remove pill behind arrows */
  border: 0 !important;
  padding: 0 !important;
  width: 52px;
}

/* ==== NEW: circular arrow buttons in header row ==== */
.spv-prev,
.spv-next{
        font-size: 34px !important;
    padding: 0 !important;
    width: 62px;
    height: 62px;
    margin: 0 !important;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff !important;
    background: transparent !important;
    display: block;
    font-size: 18px;
    line-height: 1 !important;
    cursor: pointer;
    transition: transform .12s 
ease, background .12s 
ease, box-shadow .12s 
ease;

}
.spv-prev:hover,
.spv-next:hover{
  background: rgba(255,255,255,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* ===== First column: time labels (no bg / no border) ===== */
#spv-calendar-table td:first-child,
#spv-calendar-table th:first-child{
    width: 110px;
  padding-right: 12px;
  color: var(--text-dim);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
	    vertical-align: middle;
}

.spv-calendar-wrapper #spv-calendar-table thead th, .spv-calendar-wrapper .spv-head-row th {
    background: #D9D9D94D !important;
    vertical-align: middle;
}
/* ===== Last column in body (right spacer) – remove bg/border ===== */
#spv-calendar-table tbody td:last-child,
#spv-calendar-table tbody td.spv-nav-spacer{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* default cell (empty slot) */

#spv-calendar-table td {
	padding-right:17px !important;
		padding-bottom:20px !important;

}
#spv-calendar-table tr:first-child td {
    padding-top: 40px !important;
}
#spv-calendar-table tr:last-child td {
    /* padding-right: 20px !important; */
    padding-bottom: 0 !important;
}
/* inner area for content alignment */
#spv-calendar-table td .calendar-cell{
     height: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
	 background: var(--tile-empty);
    border-radius: 12px;
    height: 153px;
    vertical-align: middle;
    position: relative;
/*     padding: 0; */
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.05);

}

/* event tile (cream card with soft border) */
#spv-calendar-table td.highlight{
  background: transparent; /* let the card stand out */
	
}
#spv-calendar-table td.highlight .calendar-cell{
background: #D0CDB9;
    border-radius: 12px;
    box-shadow: inset 0 0 0 2px var(--tile-event-border), 0 1px 0 rgba(0, 0, 0, 0.04);
    display: flex
;
    justify-content: center;
    align-items: center;
}




/* tighten rows on mobile */
@media (max-width: 768px){

  #spv-calendar-table td{ height: 64px; }
  #spv-calendar-table td:first-child, #spv-calendar-table th:first-child{
    width: 84px; font-size:12px;
  }
  .spv-prev, .spv-next{ width:46px; height:46px; }
}

/* ===== Book button bar ===== */
.spv-book{
  margin-top: 14px;
}
.spv-book .spv-book-btn{
  width: 100%;
  max-width: 520px;
  background: var(--btn);
  color: var(--text-dark);
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: .4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 0 0 2px rgba(255,255,255,.35);
}




/* Kill the global table header background just for our calendar */


/* If the generic rule is very aggressive, nuke it harder */
.spv-calendar-wrapper table:not(.has-background) th {
  background: transparent !important;
}