*{margin: 0;user-select: none;}

@font-face {
    font-family: Lobster;
    src: url(assets/fonts/Lobster.ttf);
}
@font-face {
    font-family: Handlee;
    src: url(assets/fonts/Handlee/Handlee-Regular.ttf);
}
@font-face {
    font-family: Roboto;
    src: url(assets/fonts/Roboto/RobotoSlab-VariableFont_wght.ttf);
}

body{
    background-color: rgb(30, 30, 30);
    font-size: 1.08rem;
    -webkit-tap-highlight-color: transparent;
    font-family: sans-serif;
    margin: 0;
}
#back-arrow{
    position: fixed;
    top: 23px;
    left: 8px;
    z-index: 999;
}
.back-arrow{
    position: fixed;
    top: 21px;
    left: 8px;
    z-index: 999;
}
header img {
    width: 30px;
    height: 30px;
}
.login{
    position: absolute;
    top: 5px;
    right: 5px;
    margin-top: 3px;
    padding: 4px 8px;
    background-color: #ffffff;
    font-weight: bold;
    font-family: Roboto;
    border-radius: 6px;
    font-size: 0.9rem;
    text-underline-offset: 2px;
}
.login a{
    color: rgb(30, 30, 30);
}
.login img{
    height: 15px;
    width: 15px;
}
h1{
    font-family: Lobster;
    font-size: 2.1em;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 3%;
    text-decoration: none;
    text-align: center;
    background-image: linear-gradient(
	to right,
	#462523 0,
    #cb9b51 15%, 
	#f6e27a 45%,
	#ffec8f 50%,
	#f6e27a 55%,
	#cb9b51 85%,
	#462523 100%
	);
   color:transparent;
   text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
   -webkit-background-clip:text;
}
small{
    display: block;
    margin-top: 5px;
    font-size: 1rem;
    color: #FFFFFF;
}

.team-planning-content h2{
    font-size: 1rem;
    margin: 0 0 8px;
    color: rgb(194, 177, 152);
}
.collapse{opacity: 0.8;}
.collapse button {
    border-radius:8px;
    /* border-top-left-radius: 8px;
    border-top-right-radius: 8px; */
    margin-top: 4px;

    transition: border-bottom-left-radius 0.5s ease-in-out, 
                border-bottom-right-radius 0.5s ease-in-out;
}
.collapse button.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: none;
}
.collapse button[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.collapse content {
    margin-bottom: 4px;
}
.collapse hr{
    border: 0;
    height: 2px;
    margin-left: 16px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(255,255,255,0));
}
.collapsible {
  background-color: #777;
  background: rgb(244, 244, 244, 0.6);
  cursor: pointer;
  padding: 12px 18px;
  width: 225px;
  border: none;
  text-align: left;
  outline: none;
  font-family: Roboto;
  font-size: 1.1rem;
  font-weight: bold;
}


.collapsible:after {
  content: '\002B';
  color: rgb(0, 0, 0);
  font-weight: bold;
  float: right;
  font-size: 1.2rem;
  margin-top: 2px;
  margin-left: 5px;
}

.collapsible:nth-of-type(even){
    background-color: rgb(230, 217, 199, 0.6);
    color: black;
}
.collapsible img{
    height:25px;
    width:25px;
    position: relative;
    top: 6px;
    margin-left: 4px;
    opacity: 0.4;
}

.active:after {
  content: "\2212";
}

.content {
    text-align: left;
    margin: 0 auto;
    width: 225px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(241, 241, 241, 0.6);
    color: black;
    font-family: Roboto;
    font-size: 1rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.content p{
    padding: 8px 16px 4px;
}
.content:nth-of-type(even){
    background-color: rgb(230, 217, 199, 0.6);
}

.arrow{
    font-weight: bold;
}
.arrow img{
    height: 8px;
    width: 30px;
    position: relative;
    top: -1px;
}
.cross{
    -webkit-text-stroke: 0.05rem black;
    color:#FF5440;
}
.cross img{
    height: 15px;
    width: 17px;
    position: relative;
    top: 2px;
    opacity: 0.7;
    margin: 0 8px;
}
.arrow .day{
    display: inline-block;
    min-width: 70px;
}

#selectedSlotDisplay, #selectedDateDisplay{color: #FFFFFF;}
#selectedDateDisplay{
    font-weight: 700;
}
#backToSlotsBtn{
    background-color: rgb(203, 182, 151);
    left: 15px;
    border-radius: 6px;
    border: none;
    color: black;
    font-weight: 700;
    font-family: Roboto;
    padding: 8px 12px;
    opacity: 0.7;
    font-size: 0.9rem;
}
#confirmBookingBtn, #cancelBookingBtn{
    right: 25px;
    padding: 8px 12px;
    background-image: linear-gradient(to right, #462523 0, #cb9b51 3%, #f6e27a 15%, #ffec8f 50%, #f6e27a 85%, #cb9b51 97%, #462523 100%);
    opacity: 0.5;
    border-radius: 6px;
    border: none;
    color: black;
    font-family: Roboto;
    text-shadow: 1px 1px 0px #ffffff, 5px 4px 0px rgba(0,0,0,0.15);
    font-weight: 700;
    font-size: 0.9rem;
}
.cancel-btn-container{
    display: flex;
    justify-content: flex-end;
    padding:15px 15px 0 0;
}
.title a{
    text-decoration: none;
    color: transparent;
}
h2{
    font-size: 1.1rem;
    font-family: Roboto;
}
h4{font-family: 'Handlee', cursive;}

.container{
    color: rgb(203, 182, 151);
    text-align: center;
}
.container > h2{
    color: rgb(194, 177, 152);
    font-size: 1rem;
}
.container h3{color: #d8d8d8;}

.btn{
    display: flex;
    justify-content: space-around;
}

.reservation-date{
    font-size: 1.1rem;
    display: block;
    margin: 0 0 5px;
}
.reservation-form{
    margin-top: 15px;
}

.choice-date{
    font-size: 0.8rem;
}

input[type=date]{
    font-weight: 700;
    width: 200px;
    height: 25px;
    padding: 2px 8px;
    font-size: 1.2rem;
    border-radius: 12px;
}
input[type=text], input[type=tel], input[type=number]{
    background-color: #FFFFFF;
    color: black;
    border-radius: 8px;
    font-size: 1rem;

    width: calc(100% - 20px);
    height: 30px;
    font-size: 1.1rem;
    padding: 0 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: serif;
}

input::placeholder {
    font-style: italic;
    font-size: 1rem;
}

.customer-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 15px;
}
.customer-input-group label {
    font-family: 'Handlee', cursive;
    font-size: 1rem;
    margin-bottom: 5px;
}
#firstName{margin-bottom: 15px;}

.slot{
    background: linear-gradient(to right, #462523 0, #cb9b51 7%, #f6e27a 45%, #ffec8f 50%, #f6e27a 55%, #cb9b51 93%, #462523 100%);
    border: solid 1px #ffffff;
    border-left-width: 2px;
    border-right-width: 2px;
    color: rgb(0, 0, 0);
    font-weight: 700;
    opacity: 0.6;
    width: 125px;
    margin:8px 6px;
    padding: 4px 0;
    border-radius: 6px;
    cursor: pointer;
}

.slot.full {
    background:linear-gradient(to right, #462523 0, #cb9b51 7%, #f6e27a 45%, #ffec8f 50%, #f6e27a 55%, #cb9b51 93%, #462523 100%);
    cursor: not-allowed;
    border-width: 0px;
    opacity: 0.2;
}

.notAvailable{
    background: rgb(30, 30, 30);
    color: rgb(30, 30, 30);
    margin: 0;
    padding: 0;
    border-width: 0px;
}

.slots-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px auto 0;
    padding: 8px 0;
    border-radius: 12px;
    font-size: 1rem;
    max-width: 365px;
}
.confirmation{
    padding: 8px 14px;
    border: solid 1px rgb(166, 203, 151);
    border-top: none;
    border-bottom: none;
}
.confirm{
    margin: 4px 0;
    color:rgb(166, 203, 151);
    font-family: 'Handlee', cursive;
}
strong{font-family: sans-serif;}
.selected, .booking-details h2{
    background-color: rgb(203, 182, 151);
    color: black;
    font-weight: 700;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.booking-details h2{
    background-image: linear-gradient(to right, #462523 0, #cb9b51 15%, #f6e27a 45%, #ffec8f 50%, #f6e27a 55%, #cb9b51 85%, #462523 100%);
    opacity: 0.6;
    margin: 0 auto;
    padding: 6px 8px;
    max-width: 365px;
}
.booking-details{
    margin: 15px;
    padding: 0 0 8px 0;
    border-radius: 6px;
}
.booking-details{
    p{margin: 4px 0;}
}
.booking-details :not(h2, button){
    text-align: left;
}
.booking-details label{
    text-align: left;
}
.booking-details-container{
    margin: 0 auto;
    border-left: 1px solid #ffec8f;
    border-right: 1px solid #ffec8f;
    border-bottom: 1px solid #ffec8f;
    padding: 16px 8px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-width: 365px;
}
.booking-details-container p{
    font-family: 'Handlee', cursive;
    text-align: center;
}

.booking-details-inputs{
    margin: 10px 0 25px;
}

.choose-barber{
    margin-bottom: 7px;
    font-size: 1.3rem;
}
.employee-selector-btn{
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
}

.message {
    padding: 12px;
    border-radius: 8px;
    margin:15px 15px 0 15px;
    font-weight: bold;
    display: none;
    display: flex;
    align-items: center; 
    gap: 10px;
}

.message.error {
    background-image: linear-gradient(to right, #4b1e1c 0, #914545 3%, #ac706d 7%, #c7837f 50%, #ac706d 93%, #914545 97%, #4b1e1c 100%);
    color: #471016;
    border: 3px solid #811f29;
    border-left: none;
    border-right: none;
    font-size: 0.8rem;
}
.message.info{
    color: #ffffff;
    margin: 0 auto;
}
.message-cancel{
    color:rgb(166, 203, 151);
}
.error-icon::before {
    content: '✕';
    color: #4b1e1c;
    font-size: 1.2rem;
}






.employee-btn {
    padding: 8px 4px;
    margin: 0 4px;
    border-radius: 6px;
    border: 1px solid rgb(203, 182, 151);
    background-color: rgb(203, 182, 151);
    color: black;
    font-weight: 700;
    font-family: Roboto;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.15s all ease;
}

.employee-btn:hover {
    background-color: rgba(203, 182, 151, 0.2);
}

.employee-btn.selected-employee {
    transform: scale(1.1); 
    transition: 0.15s all ease-in-out;
    background-color: #ffffff;
    /* color: #ffffff; */
}

#employeeSelectionContainer {
    padding: 10px;
    /* border-top: 1px solid rgba(203, 182, 151, 0.5);
    border-bottom: 1px solid rgba(203, 182, 151, 0.5); */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
hr{
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(203, 182, 151, 0.5), rgba(255,255,255,0));
}

#employeeSelectionContainer h4 {
    color: rgb(203, 182, 151);
    width: 100%;
}


.appointment-date{
    font-size: 1.2rem;
}

#cancelText{
    font-weight: bold;
    margin:22px 0;
}
.contact-shop{
    margin: 6px 22px;
    font-size: 0.8rem; 
}
.contact-shop a{
    color: rgb(203, 182, 151);
    text-underline-offset: 3px;
}
.contact-shop strong{
    text-decoration: none;
    color: rgb(156, 182, 255);
    font-family: Roboto;
}

.gender-selection{
    margin: 55px 0;
}
.gender-selection h3{font-family: 'Handlee', cursive;}
.btn-gender{
    font-family: Roboto;
    color: #d8d8d8;
    background: transparent;
    font-size: 1.1em;
    padding: 8px 16px;
    margin: 16px 8px;
    border-radius: 6px;
}
button img {
    height: 20px;
    width: 20px;
    position: relative;
    top: 3px;
}
.btn-m{
    border: solid 1px rgb(69, 115, 162);
    border-right: none;
    border-radius: 25px 0 0 25px;
}
.btn-f{
    border: solid 1px rgb(180, 109, 129);
    border-left: none;
    border-radius: 0 25px 25px 0;
}

.cancel-text{
    margin: 6px auto;
}
.cancel-text-a{
    text-underline-offset: 3px;
    padding: 3px 9px;
    border-radius: 6px;
    color: #d38991;
    font-weight: bold;
    font-family: Roboto;
    
}

@media only screen and (min-height: 920px){
    h1{margin-top: 7%;}
    .container{margin-top: 70px;}
} 

@media only screen and (min-width: 768px){
    .contact-shop{font-size: 1.2rem; }
    h1{margin-top: 50px;}
    .message {margin:15px 20% 0 20%;}
    .message.info{margin: 0 20%;}
}
@media only screen and (min-width: 950px){
    .message {margin:15px 30% 0 30%;}
    .message.info{margin: 0 30%;}
}
@media only screen and (min-width: 1100px){
    .message {margin:15px 40% 0 40%;}
    .message.info{margin: 0 40%;}
}