.bbs-sr-app{
	display:grid;
	grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);
	gap:4.2vw;align-items:start
}

.bbs-sr-calendar-panel,
.bbs-sr-side-panel{
	background:#F7F7F7;	
	padding:20px;		
}

.bbs-sr-calendar-toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:16px
}

.bbs-sr-calendar-toolbar button{	
	background: #FED317;
    transform: rotate(10deg);
    cursor: pointer;
    border: 0;
    width: 1.9vw;
    height: 1.9vw;
}

.bbs-sr-calendar-toolbar button:disabled{
	background: #FED317;
	opacity: 0.5;
	cursor: not-allowed;
}

.bbs-sr-calendar-toolbar button img{
	width: 100%;
    height: 100%;
    padding: 0.2vw;
    transform: rotate(-10deg);
}	

.bbs-sr-month-label{
	font-size:3rem;
	line-height: 3.5rem;
	font-weight:900;
	text-transform:uppercase;
	color: #FED317;
	text-align: center;
}

.bbs-sr-weekdays,
.bbs-sr-calendar{
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:8px
}

.bbs-sr-weekdays{
	margin-bottom:0.8vw;
	color:#1D1E1C;
	font-size:1.12rem;
	font-weight: 900;
}

.bbs-sr-weekdays span{
	text-align:center
}

.bbs-sr-day{
	min-height:5vw;	
	background:#fff;
	padding:0.5vw;
	text-align:right;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	border:0;
}

.bbs-sr-day .num{
	font-weight:700
}

.bbs-sr-day .meta{
	font-size:12px;
	color:#6b7280
}

.bbs-sr-day.is-closed,
.bbs-sr-day.is-full{
	background:#f9fafb;
	color:#9ca3af;
	cursor:not-allowed
}


.bbs-sr-day.is-open{
	background:#fffbeb
}

.bbs-sr-day.is-pad{
	visibility:hidden
}

.bbs-sr-selection-list{
	display:flex;
	flex-direction:column;
	gap:0.61vw;
	margin:0.63vw 0
}

.bbs-sr-line{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:0.63vw;
	border:1px solid #1D1E1C;
	border-radius:0;
	padding:0.63vw
}

.bbs-sr-remove{
	border:none;
	background:transparent;
	font-size:18px;
	cursor:pointer
}

.bbs-sr-total-row{
	display:flex;
	justify-content:space-between;
	border-top:1px solid #e5e7eb;
	padding-top:14px;
	margin-top:14px
}

.bbs-sr-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-top:16px
}

.bbs-sr-grid input{
	width:100%;
	padding:12px;
	border:1px solid #d1d5db;
	border-radius:0px
}

.bbs-sr-pay{
	margin-top:0.8vw;
	font-family: Anton;
    background-color: #ffd300;
    font-size: 1rem;
    padding-top: 0.2vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-bottom: 0.2vw;
    min-width: 9.9vw;
    text-align: center;
    line-height: 1.9rem;
    text-transform: uppercase;
    width: 100%;
    border: 0;
}

.bbs-sr-slot-modal{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	z-index:9999
}

.bbs-sr-slot-box{
	max-width:22vw;
	background:#fff;
	margin:10vh auto;
	padding:1.25vw;	
}

.bbs-sr-slot-buttons{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin:16px 0
}

.bbs-sr-slot-pick,
.bbs-sr-close{
	padding:12px;
	border:1px solid #000;
	border-radius:0px;
	background:#fff;
	cursor:pointer;
	width:100%
}

.bbs-sr-slot-pick{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #000;
    border-radius: 0;
    -webkit-appearance: none;
}

.bbs-sr-slot-pick > div{
	display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.3vw;
}
.bbs-sr-message .is-error{
	color:#b91c1c
}

.bbs-sr-selection-empty{
	color:#6b7280;
	margin-top:10px
}

.bbs-sr-line-date,
.bbs-sr-slot-name{
	font-weight: 900;
}

/* base */
.bbs-sr-day {
  position: relative;
  overflow: hidden;
}

/* fermé */
.bbs-sr-day.is-closed {
  background: #DEDEDE;
  color: #1D1E1C;
}

/* complet */
.bbs-sr-day.is-full {
  background: #DEDEDE;
  color: #1D1E1C;
}

/* journée complète dispo */
.bbs-sr-day.is-full-day {
  background: #fff;
}

/* matin */
.bbs-sr-day.is-morning {
  background: linear-gradient(
    to bottom,    
    #fff 50%,
    #DEDEDE 50%
  );
}

/* après-midi */
.bbs-sr-day.is-afternoon {
  background: linear-gradient(
    to bottom,
    #DEDEDE 50%,
    #fff 50%
    
  );
}

/* matin + aprem */
.bbs-sr-day.is-split {
  background: linear-gradient(
    to bottom,
    #DEDEDE 50%,
    #DEDEDE 50%
  );
}

/* sélection */
.bbs-sr-day.is-selected {
  /*outline: 2px solid #ffd300;*/
  background: #ffd300 !important;
  color: #fff; 
}

.bbs-sr-calendar-wrap {
  position: relative;
  min-height: 26.6vw;
}

.bbs-sr-calendar-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(1px);
  z-index: 20;
  border-radius: 12px;
}

.bbs-sr-calendar-wrap.is-loading .bbs-sr-calendar-loading {
  display: flex;
}

.bbs-sr-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #ffd300;
  border-radius: 50%;
  animation: bbsSrSpin 0.8s linear infinite;
}

.bbs-sr-loading-text {
  font-size: 14px;
  color: #374151;
}

@keyframes bbsSrSpin {
  to {
    transform: rotate(360deg);
  }
}

.container-legende{
	display: flex;
	flex-direction: row;
	gap: 1.9vw;
	margin-top: 1.6vw;
}

.container-legende .legende{
	display: flex;
	flex-direction: row;
	gap: 0.5vw;
	align-items: center;
	font-weight: 900;
}

.carre-legende{
	transform: rotate(10deg);	
	width: 1.9vw;
	height: 1.9vw;
}

.carre-disponible{
	background: #fff;
	border: 1px solid #DEDEDE;
}

.carre-non-disponible{
	background: #DEDEDE;
}

.carre-votre-selection{
	background: #ffd300;
}

@media (max-width:991px){
	.bbs-sr-app{grid-template-columns:1fr}
	.bbs-sr-calendar-toolbar button {	    
	    width: 3.9vw;
	    height: 3.9vw;
	}
	.bbs-sr-calendar-toolbar button img {
	    padding: 0.5vw;	 
	}

	.bbs-sr-day{
		min-height: 8vw;
        padding: 1vw;
	}

	.bbs-sr-slot-box {
	    max-width: 50vw;	 
	    margin: 10vh auto;
	    padding: 5.25vw;
	}

	.bbs-sr-pay {
	    margin-top: 1.8vw;
	    padding-top: 1vw;
	    padding-bottom: 0.8vw;	    
	}

	.container-legende {
	    display: flex;
	    flex-direction: row;
	    gap: 3.9vw;
	    margin-top: 2.6vw;
	}

	.container-legende .legende {
	    gap: 1.5vw;	 
	}

	.carre-legende {	 
	    width: 2.9vw;
	    height: 2.9vw;
	}
}

@media (max-width:768px){
	
	.bbs-sr-month-label {
	    font-size: 2rem;
	    line-height: 3.5rem;	
	}

	.bbs-sr-weekdays {
	    margin-bottom: 2.8vw;
	    font-size: 0.9rem;	 
	}

	.bbs-sr-calendar-toolbar button {	    
	    width: 10vw;
    	height: 10vw;
	}

	.bbs-sr-calendar-toolbar button img {
	    padding: 1.2vw;	 
	}

	.bbs-sr-day{
		min-height:15vw;			
		padding:1.5vw;		
	}

	.bbs-sr-slot-box {
	    max-width: 80vw;	 
	    margin: 10vh auto;
	    padding: 5.25vw;
	}

	.bbs-sr-grid {
	    display: grid;
	    grid-template-columns: 1fr;
	    gap: 3.8vw;
	    margin-top: 2vw;
	}

	.bbs-sr-pay {
	    margin-top: 3.8vw;
	    padding-top: 1vw;
	    padding-bottom: 0.8vw;	    
	}

	.container-legende {
	    display: flex;
	    flex-direction: column;
	    gap: 4.9vw;
	    margin-top: 5.6vw;
	}

	.container-legende .legende {
	    gap: 3.5vw;	 
	}	

	.carre-legende {
		width: 7vw;
    	height: 7vw;
	}
}