/* calendar.css */

:root {
  /* --main-style-color: #ababab; /* default color, can be overridden */
}

.calendar-item {
  color: var(--main-style-color);
}

.calendar {
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	overflow: hidden;
	margin-bottom:2em;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	background: #1c1d26;
}

.calendar-header button {
	background: white;
	border: none;
	color: #1c1d26;
	padding: 4px 12px;
	cursor: pointer;
}

.calendar-header button:hover {
	background: #1c1d26;
	color:white;
}

.calendar-header #monthYear {
	font-weight: bold;
}

div.dancek {border: 1px solid #efefef;}
div.dancek div.cena {font-size:12px;padding:4px;}
div.dancek div.dan {font-size:16px;padding:4px;}

.calendar-days,
.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}

.calendar-dates .selected {
    background-color: #efefef;
    font-weight: bold;
}

.calendar-dates .in-range {
   background-color: #efefef;
}

.calendar-dates .hover-range {
	background-color: #efefef;
    opacity: 0.8;
}
.calendar-days div {
	padding: 12px;
	text-align: center;
	font-weight: bold;
}

.calendar-dates div {
	padding: 12px;
	text-align: center;
	min-height: 50px;
}

.calendar-dates .busy {
	background: white;
	color: #b3b3b3;
	font-weight: normal;
}

.calendar-dates .free {
	color: black;
	font-weight: bold;
	cursor:pointer;
	background-color:white;
}

.calendar-dates .free:hover {
    background-color: #efefef;
}

.calendar-dates .selected:hover {
	color:white;
	background-color: var(--main-style-color);
}

.calendar-dates .selected {
    background-color: var(--main-style-color);
	color:white;
}

.calendar-dates .in-range {
    background-color: var(--main-style-color);
	color:white; 
}

.calendar-dates p {
	padding:0;
	margin:0;
}

#availability button {
	height: 4em;
	font-size:18px;
    line-height: 2em;
    padding: 0 1.25em;
	display: inline-block;
	border: 0;
	background-color: var(--main-style-color); /* spec color */
    box-shadow: none;
    color: #ffffff;
	cursor:pointer;
	border: 1px solid var(--main-style-color); /* spec color */
	margin-top:1em;
} 

#availability button:hover {
	color: var(--main-style-color); /* spec color */
	background-color:white;
}

.calendar-wrapper {
	width:100%;
	display: flex; 
	gap: 20px; 
	flex-wrap: wrap; 
	justify-content: center;	
}

p.price {font-size:14px;font-weight:normal;}

@media (max-width: 600px) {
    .calendar {
        font-size: 14px;
    }

    .calendar-days div,
    .calendar-dates div {
        padding: 8px 4px;
    }

    .calendar-header {
        flex-direction: column;
        gap: 10px;
    }
}

.StripeElement {
	-moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: border-color 0.2s ease-in-out;
    -webkit-transition: border-color 0.2s ease-in-out;
    -ms-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out;
    background: transparent;
    border-radius: 4px;
    border: solid 1px rgba(255, 255, 255, 0.3);
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
	height: 48px;
    padding: 12px;
    margin: 4px 0;
}

.ElementsApp .InputElement {
	height:30px;
}