@import './css/vanilla-calendar.css';

@layer plugin, theme;

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

fieldset,
button,
input {
    border: 1px solid #eeeeee !important;
}

.form {
    color: var(--color-primary, rgba(75, 79, 99, 1));
    display: grid;
    gap: 0.375rem;
    width: 100%;
}

@media screen and (min-width: 48rem) {
    .form {
        grid-template-columns: 42.962963% 37.925926% auto;
    }
}

.form__group {
    padding: 0px 10px 0px 10px !important;
    border-radius: 0.0rem;
	height: 50px;
}

.form__group--shadow {
    background: #FFFFFF;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.00);
}

.form__group--flex {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.form__submit {
    background-color: #9a827b !important;
    color: #ffffff !important;
    text-align: center;
}

.calendar {
    display: grid;
    grid-template-columns: auto 2fr;
    gap: 0.75rem;
    padding: 0.375rem;
    justify-content: space-between;
}

.calendar__date {
    display: flex;
    gap: 0.375rem;
    align-items: top;
    cursor: pointer;
    padding: 7px 0px 0px 0px !important;
}

.calendar__date:first-of-type {
    border-right: 0px solid grey;
}

.date__label {
  font-size: 16px;
  font-weight: 600;
  line-height: 12px !important;
	padding-top: 5px !important;

}

.date__selection {
    font-weight: 600;
}

.form__selection {
    font-weight: 200;
	font-size: 14px;
	color: #9a827b;
}

.counter__wrapper {
  display: inline-flex;
  height: 35px;
	cursor: pointer !important;
}

.counter__wrapper label {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	cursor: pointer !important;
}

#guest-selection-trigger {
    container-name: counter-wrapper;
    container-type: inline-size;
}

@container counter-wrapper (width < 17rem) {
    .counter__wrapper {
        max-width: 40%;
    }

    .counter__wrapper:first-of-type {
        flex-shrink: 2;
    }
}

.popover {
  border: none;
  background-color: white;
  color: black;
  width: 100svw;
  min-height: 56.125svh;
  height: max-content;
  max-height: 80svh;
  position: fixed;
  bottom: 0px;
  box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.50);
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  z-index: 100;
}

/* Prevent scrolling the body underneath when the dialog has focus. */
@media (max-width: 32rem) {
    html:has(dialog[open]) {
        overflow: hidden;
    }

}

.vanilla-calendar:not(.vanilla-calendar_hidden),
.popover[open] {
    animation: fadeInUp 0.125s ease-in-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-in {
    to { opacity: 1 }
}

@media screen and (min-width: 48rem) {
    .popover {
        max-width: 24rem;
        min-height: unset;
        height: initial;
        position: absolute;
        left: 43.55%;
        bottom: unset;
        margin-top: .25rem;
    }

    .popover[open],
    .vanilla-calendar:not(.vanilla-calendar_hidden) {
        animation: none;
    }
}

.popover__heading {
    padding: 14px 15px 8px 15px !important;
	background-color: #9a827b;
    color: white;
    display: flex;
    justify-content: space-between;
	font-weight: 600;
	font-size: 18px;
	
}

@media screen and (min-width: 48rem) {
    .popover__heading {
        display: none;
    }
}

.popover__close {
    border-radius: 50%;
    height: 1.375rem;
    width: 1.375rem;
}

.popover__close:focus-visible {
    outline: none;
}

.popover__section {
    padding: 12px 15px 12px 15px !important;
	font-weight: 600;
	font-size: 18px;
	margin-top: 0px;
	font-family: Oxanium;
	line-height: 1.3;
}

.popover__section {
    box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.50);
	border-top: 0px solid #eee;
}

.popover__section--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    width: 100%;
    padding: 0.75rem;
}

.button:disabled {
    opacity: 0.6;
}

.section__heading {
    font-weight: 700;
    margin-bottom: 0.375rem;
}

.select-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/*.select-list__label {
    animation: fade-in 0.5s forwards;
    background-color: var(--color--light, rgba(233, 233, 236, 1));
    background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M0.114068205,0.160968581 C0.198216054,0.0698802226 0.313360103,0.00022441888 0.428825633,0.00022441888 C0.533066093,0.00022441888 0.637279762,0.0378921343 0.719766622,0.114084867 L6.00010446,4.96587951 L11.2804423,0.114084867 C11.4545782,-0.0466592952 11.7262303,-0.036612785 11.8861675,0.138362594 C12.0469084,0.312502103 12.0360316,0.582820203 11.8623082,0.743564366 L6.28995777,5.88737757 C6.12503763,6.03976303 5.87310309,6.03976303 5.70807579,5.88737757 L0.135725359,0.743564366 C-0.0357958738,0.605694098 -0.0466726732,0.335108091 0.114068205,0.160968581 Z" transform="translate(12 15)"/></svg>');
    background-repeat: no-repeat;
    background-size: 1.25rem;
    background-position: right 0.125rem center;
    border-radius: 0.125rem;
    border-width: 0;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.50);
    height: 2.25rem;
    opacity: 0;
    display: flex;
    align-items: center;
}*/

.select-list__label {
    animation: fade-in 0.5s forwards;
   background-image: none !important;
   background-repeat: no-repeat;
    height: 2.25rem;
    opacity: 0;
    display: flex;
    align-items: center;
	padding-bottom: 6px !important;
}

.select-list__input {
    appearance: none;
    border: none;
    border-radius: none;
    width: 100%;
    background: transparent;
}

.select-list__sr-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.select-list__label:has(:invalid) {
    border: 1px solid #333333;
}

.stepper {
    display: inline-flex;
    border-radius: 0.125rem;
    background-color: #eae8e4;
    height: 2.25rem;
    touch-action: manipulation;
}

.stepper__button {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    background: inherit;
    cursor: pointer;
    color: inherit;
}

/**
  WebKit/Safari renders number spin buttons regardless of appearance setting, but has prefixed pseudo elements.
  Firefox does not provide a selector, so we need to set the prefixed appearance to textfield.
 */

.stepper__input {
  background-color: inherit;
  width: 2.4rem !important;
  text-align: center;
  appearance: none;
  -moz-appearance: textfield;
  padding: 2px 8px 8px 8px;
  font-weight: 600;
  font-size: 16px;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.input--disabled {
  background-color: inherit;
  max-width: 2.1rem;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: center;
  pointer-events: none;
  padding: 0px 0px 0px 0px !important;
}

.input--disabled:focus-visible {
    outline: none;
}

.text--bold {
    font-weight: 600;
}

#guest-selection-trigger {
    cursor: pointer;
}