.orfe-form {
    /* Button styles */
    --button-background-color: #f8f8f8;
    --button-background-color-hover: #f0f0f0;
    --button-border-radius: .25rem;
    --button-border: 1px solid #ccc;
    --button-color: #333;
    --button-color-hover: #333;
    --button-margin: 0;
    --button-padding: .75rem;

    /* Calendar styles */
    --calendar-blue: #518fce;
    --calendar-green: #51ce57;
    --calendar-item-background-inactive: #fafafa;
    --calendar-item-color-inactive: #ced2d4;
    --calendar-red: #ce5151;

	/* Form */
    --form-background-color: #fff;
    --form-border: 1px solid #ccc;
    --form-border-radius: .25rem;
	--form-gap: 1rem;
	--form-padding: 1rem;

	/* Input styles */
    --error-color: #f00;
    --success-color: #51ce57;
	--input-border-radius: .25rem;
	--input-border: 1px solid #ccc;
	--input-box-shadow: 0 0px 0px 1px transparant;
    --input-margin: 0;
	--input-padding: .75rem;

    background-color: var(--form-background-color);
    border: var(--form-border);
    border-radius: var(--form-border-radius);
	display: flex;
	flex-direction: column;
	gap: var(--form-gap);
	padding: var(--form-padding);
}

.orfe-form input:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]),
.orfe-form select,
.orfe-form textarea {
	border: var(--input-border);
	border-radius: var(--input-border-radius);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    inline-size: 100%;
    margin: var(--input-margin);
	padding: var(--input-padding);
}

.orfe-form input[type="checkbox"],
.orfe-form input[type="radio"] {
    box-shadow: var( --input-box-shadow );
}

.orfe-form textarea {
    min-block-size: 10rem;
	resize: vertical;
}

.orfe-section {
	margin-block-end: calc(var(--form-gap) * -.75);
}

.orfe-fieldset {
	border: 0;
    margin: 0;
	padding: 0;
}

.orfe-fieldset legend {
	font-weight: 700;
}

.orfe-errors {
	color: var(--error-color);
	font-size: .85rem;
}

.orfe-success-message {
	background-color: var(--success-color);
	border-radius: var(--form-border-radius);
	color: #fff;
	font-size: .95rem;
	font-weight: 500;
	margin-bottom: 1rem;
	padding: 1rem;
}

.orfe-button {
	appearance: none;
    background-color: var(--button-background-color);
	border: var(--button-border);
	border-radius: var(--button-border-radius);
    color: var(--button-color);
    cursor: pointer;
    font-size: 1rem;
    margin: var(--button-margin);
	padding: var(--button-padding);
	transition: background-color .2s, color .2s, opacity .2s;
}

.orfe-button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.orfe-button--clear {
    padding: 0 .5rem;
}

@media (hover: hover) {
	.orfe-button:hover:not(:disabled) {
		background-color: var(--button-background-color-hover);
		color: var(--button-color-hover);
	}
}

.orfe-field:has(.orfe-errors), .orfe-fieldset:has(.orfe-errors) {
	--input-border: 1px solid var(--error-color);
    --input-box-shadow: 0 0px 0px 1px var(--error-color);
}

.orfe-calendar {
	display: flex;
	flex-flow: column;
}

.orfe-calendar__header {
    align-items: center;
	display: flex;
	justify-content: space-between;
	padding-block: .5rem;
}

.orfe-calendar__month-year {
	color: #636e73;
}

.orfe-calendar__days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.orfe-calendar__day_name {
    background-color: #448cd6;
	border-right: 1px solid #2c7aca;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
	padding: .5rem;
	text-transform: uppercase;
}

.orfe-calendar__day_name:nth-child(7) {
	border: none;
}

.orfe-calendar__day_num {
    border-bottom: 1px solid #e6e9ea;
    border-right: 1px solid #e6e9ea;
    color: #7c878d;
	display: flex;
	flex-flow: column;
    font-size: .75rem;
    font-weight: 700;
    min-height: 5rem;
	padding: .5rem;

}

.orfe-calendar__day_num span {
	display: inline-flex;
	width: 2rem;
}

.orfe-calendar__event {
    appearance: none;
    background-color: #f7c30d;
    border: none;
    border-radius: .25rem;
    color: #fff;
    cursor: pointer;
	font-weight: 500;
	font-size: .75rem;
    margin-top: .5rem;
	padding: .25rem .5rem;
	word-wrap: break-word;
}

.orfe-calendar__event.green {
	background-color: var(--calendar-green, #51ce57);
}

.orfe-calendar__event.blue {
	background-color: var(--calendar-blue, #518fce);
}

.orfe-calendar__event.red {
	background-color: var(--calendar-red, #ce5151);
}

.orfe-calendar__day_num:nth-child(7n+1) {
	border-left: 1px solid #e6e9ea;
}

.orfe-calendar__day_num.ignore {
	background-color: var(--calendar-item-background-inactive, #fafafa);
	color: var(--calendar-item-color-inactive, #ced2d4);
	cursor: inherit;
}

.orfe-calendar__no-slots-overlay {
	align-items: center;
	background: rgba(255, 255, 255, 0.45);
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
    top: 50px;
	z-index: 10;
}

.orfe-calendar__no-slots-message {
	background: #fff;
	border: var(--form-border, 1px solid #ccc);
	border-radius: .5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 1.5rem 2rem;
	text-align: center;
}

.orfe-calendar__no-slots-message p {
	color: #636e73;
	font-size: 1rem;
	margin: 0 0 1rem;
}

.orfe-calendar__next-month-btn {
	font-weight: 600;
}

.orfe-sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.orfe-modal {
    align-items: center;
    background: rgba(0,0,0,0.5);
    display:none;
    height:100%;
    inset: 0;
    justify-content: center;
    left:0;
    position: fixed;
    top:0;
    width:100%;
    z-index: 1000;
}

@keyframes fadeInScale {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.orfe-modal-content {
    animation: fadeInScale .2s ease;
    background:#fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin:10% auto;
    max-width: 480px;
    padding: 2rem;
    padding-right: 50px;
    position:relative;
    width: 90%;
}

.orfe-modal-close {
    background: transparent;
    cursor:pointer;
    padding: 0 .5rem;
    position:absolute;
    right:10px;
    top:10px;
}

.orfe-modal-close:hover {
    transition: background-color .2s;
}

#orfe-timeslot-fieldset {
    border: none;
    margin-bottom: .5rem;
    padding: 0;
}

#orfe-timeslot-options {
    list-style: none;
    padding-inline-start: 0;
}

#orfe-selected-timeslot-wrapper {
    align-items: center;
    gap: .5rem;
}

.orfe-selected-slot {
    background: #e0f0ff;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    margin: 6px 2px;
    padding: 4px 8px;
    .remove-slot {
        background: transparent;
        border: none;
        cursor: pointer;
        font-weight: bold;
        margin-left: 4px;
    }
}

.orfe-error-message {
    color: var(--error-color);
    margin: 8px 0;
}

#orfe-timeslot-options input[type="radio"],
#orfe-timeslot-options input[type="checkbox"] {
    accent-color: var(--calendar-blue);
    margin-right: 0.5rem;
    transform: scale(1.2);
}

#orfe-timeslot-options label {
    cursor: pointer;
}

.orfe-timeslot-date {
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: center;
}

.orfe-timeslot-option {
    align-items: baseline;
    border-radius: 0.5rem;
    display: flex;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: background .2s;
    .ticket-amount-wrapper {
        align-items: center;
        display: none;
        gap: .5rem;
        margin-block-start: .5rem;
    }
    .ticket-amount-label {
        margin-inline-end: .5rem;
        white-space: nowrap;
    }
    .ticket-amount {
        --input-padding: .5rem;

        height: 40px;
        max-width: 65px;
    }
    .no-tickets {
        color: red;
        display: inline-block;
        margin-bottom: .5rem;
    }
}

.orfe-timeslot-option:hover {
    background: #f7f7f7;
}