/* FORM> */
/* Hide radio buttons but keep them accessible */


.form {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: flex-start;
 gap: 1rem;
 width: 100%;
 margin: 0 auto;
 /* margin-top: 3rem; */
 background-color: hsl(270, 60%, 20%);
 /* border: 2px solid hsl(280, 100%, 80%); */
 padding: 1.2rem;
 border-radius: 0.25rem;
 /* box-shadow: 0 2px 6px hsl(0, 0%, 100%); */

 /* border-radius: 1rem; */
}

/* for checkin.ejs */
.form-group input[type="radio"]:checked+label {
 box-shadow: 0 0 10px rgba(260, 100%, 40%, 0.8);
}

.form-group-1fr input[type="radio"]:checked+label {
 box-shadow: 0 0 10px rgba(260, 100%, 40%, 0.8);
}

/* for checkin.ejs */
.form-group-1fr input[type="radio"]:focus+label {
 outline: 2px solid hsl(280, 80%, 60%);
 outline-offset: 2px;
 padding: 0.5rem;
 border-radius: 1rem;
}

/* Style the label container */
.form-group label {
 display: block;
 cursor: pointer;
 /* border: 1px solid white; */
 border-radius: 0.5rem;
 color: hsl(270, 30%, 30%);
 width: 100%;
 font-size: var(--font-base-size);
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 padding: 4px;
 margin-right: 1rem;
 text-align: center;
 background-color: white;
}

.form-group input,
.form-group textarea {
 font-size: calc(1 * var(--font-base-size));
 color: hsl(270, 60%, 40%);
 box-sizing: border-box;
 padding: 0.4rem 0.8rem;
 border: 0.2rem hsla(270, 100%, 95%, 0.25) solid;
 border-radius: 2rem;
 width: 80%;
}

.form-group button {
 border: 0.2rem hsl(270,30%,90%) solid;
 border-radius: 2rem;
 padding: 0.8rem;
 font-size: calc(1 * var(--font-base-size));
 font-weight: bolder;
 /* color: hsl(270,30%,90%); background-color:white; */
 width: 50%;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
 grid-column: span 2;
}

.form-group button:hover {
 /* color: hsl(270, 100%, 20%);
 background-color: hsl(270,30%,90%);
 border-color: hsl(270, 30%, 60%); */
 font-weight: bold;
 box-shadow: 2px 2px 4px hsl(90, 100%, 80%),
  -2px 2px 4px hsl(90, 100%, 80%);
 /* background-color: hsl(90, 100%, 80%);
 color: hsl(90, 100%, 20%);
 border-color: white; */
}

.form-privacy-policy {
 grid-column: span 2;
 justify-self: center;
 align-self: center;
}

.form-group input::placeholder {
 color: black;
 opacity: 0.2;
}

/* .form-group>*:first-child {
 flex: 3;
 text-align: center;
}


.form-group>*:nth-child(2) {
 flex: 9;
} */

/* Add subtle animation for selection */
.form-group input[type="radio"]:checked+label {
 transform: translateY(-2px);
 transition: transform 0.4s ease, background-color 0.3s ease;
}

/* Better touch target for mobile */


/* Remove tap indicator once selected */
.form-group input[type="radio"]:checked+label .itemoutercontainer::after {
 content: '\f00c';
 /* Font Awesome check icon */
 animation: none;
 color: hsla(120, 80%, 40%, 0.8);
}



#status {
 padding: 0.5rem;
 border-radius: 0.25rem;
 font-size: 1.5rem;
 animation: fadeIn 0.5s ease-in;
 justify-self: center;
 align-self: center;
}

#status.error {
 color: hsl(0, 100%, 40%);
}

#status.success {
 color: hsl(120, 100%, 25%);
}

#status.sending {
 color: hsl(200, 100%, 40%);
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }

 to {
  opacity: 1;
 }
}

/**************************************/
/*MOBILE*/
/**************************************/

.fa-check {
 color: hsl(180, 100%, 80%);
 /* font-size: 1.2rem; */
}

/* Pulse animation for tap indicator */
@keyframes pulse {
 0% {
  transform: translateY(-50%) scale(1);
 }

 50% {
  transform: translateY(-50%) scale(1.1);
 }

 100% {
  transform: translateY(-50%) scale(1);
 }
}

.error {
 color: hsl(320, 100%, 40%);
}

.itemheadtitle {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.tap-indicator {
 color: hsla(280, 80%, 60%, 0.6);
 animation: pulse 2s infinite;
}

input[type="radio"]:checked+label .tap-indicator {
 color: hsla(120, 80%, 40%, 0.8);
 animation: none;
}

.form__title {
 color: hsl(270, 80%, 80%);
 font-size: calc(1.2 * var(--font-base-size));
 margin-bottom: 0.5rem;
}

.form-group {
 display: grid;
 grid-template-columns: 1fr 6fr;
 gap: 0.5rem;
 justify-content: flex-start;
 align-content: flex-start;
 align-items: center;
 justify-items: flex-start;
 width: 100%;
    margin-bottom: 1rem;
}

.form-group-1fr {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.5rem;
 justify-content: flex-start;
 align-content: flex-start;
 align-items: center;
 justify-items: flex-start;
 width: 100%;
}

.form-group input[type="radio"],
.form-group-1fr input[type="radio"],
.form-group input[type="checkbox"] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
}

.booking__container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 gap: 0.5rem;
 align-items: stretch;
 justify-items: stretch;
 justify-content: stretch;
 align-content: stretch;
 width: 100%;
 height: 100%;
}

.booking__container--horizontal {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 gap: 0.25rem;
 align-items: stretch;
 justify-items: stretch;
 justify-content: stretch;
 align-content: stretch;
 width: 100%;
 height: 100%;
}
.booking__container--horizontalTitle{
font-weight: bold;
}
.booking__name{
font-weight: bold;
}
.booking__form {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: flex-start;
 gap: 1rem;
 width: 100%;
 margin: 0 auto;
 /* background-color: hsla(270,99%,99%,0.5); */
 padding: 3rem 1rem;
 border-radius: 0.25rem;
/* background-color:  hsla(360,100%,98%,0.25); */
}

.booking__group {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.5rem;
 justify-content: flex-start;
 align-content: flex-start;
 align-items: center;
 justify-items: flex-start;
 width: 100%;
 height: 100%;
 margin-bottom: 1rem;
 background-color:white;
border-radius: 1rem;
}

.booking__group input[type="radio"],
.booking__group input[type="checkbox"] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
 box-shadow: 0 0 4px transparent;
 border: 0.25rem solid transparent; 
}

.booking__group input[type="radio"]:checked+label,
.booking__group input[type="checkbox"]:checked+label {
 transform: translateX(2px);
 transition: transform 0.4s ease, background-color 0.3s ease;
 /* padding: 1rem; */
 background-color: hsla(360, 25%, 98%,0.5);
 /* color: hsl(270, 30%, 30%); */
 border-radius: 0.5rem;
}

.booking__group input[type="radio"]:checked+label .i__point,
.booking__group input[type="checkbox"]:checked+label .i__point {
 display: none;
}

.booking__group input[type="radio"]:checked+label i,
.booking__group input[type="checkbox"]:checked+label i {
 display: inline;
}

.booking__group label {
 user-select: none;
 -webkit-user-select: none;
 /* Safari */
 -moz-user-select: none;
 /* Firefox */
 -ms-user-select: none;
 /* IE10+/Edge */
 padding: 1rem;
 color: hsl(270, 30%, 30%);

}

.booking__group label .i__point {
 display: inline;
 margin-left: 0.5rem;
 color: hsl(270, 20%, 60%);
}

.booking__group label .i__check {
 display: none;
 margin-left: 0.25rem;
color:hsl(calc(var(--h) - 90), var(--s), var(--l));
}


/* Small tablets (576px and up) */
@media (min-width: 576px) {}

/* Medium tablets (768px and up) */
@media (min-width: 768px) {}

@media (min-width: 992px) {
 .booking__container {
  display: grid;
 grid-template-columns:1fr;
 /* repeat(auto-fit, minmax(100%, 1fr)); */
  gap: 0.5rem;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  align-content: stretch;
  width: 100%;
  height: 100%;
 }

 .booking__container--horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35vw, 1fr));
  gap: 0.25rem;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  align-content: stretch;
  width: 100%;
  height: 100%;
 }
}

@media (min-width: 1200px) {
 .booking__container {
  display: grid;
  grid-template-columns:1fr;
 /* repeat(auto-fit, minmax(20vw, 1fr)); */
  gap: 0.5rem;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  align-content: stretch;
  width: 100%;
  height: 100%;
 }

 .booking__container--horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
  gap: 0.25rem;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  align-content: stretch;
  width: 100%;
  height: 100%;
 }
}