/* CS Booking Form styling - transparent inputs, bottom border */
#csBookingFormSimple {
    width: 100%; 
    background: transparent;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
}

 #csBookingFormSimple .form-row {
    display: flex;
    padding: 15px 5px 15px 1px;
    align-items: center;   /* vertically align */
    position: relative;
    flex: 1;
    --label-scale: 1;
    --label-offset-y: 12px;         /* how high the label floats */  
} 

#csBookingFormSimple .form-group {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* two columns */
}

#csBookingFormSimple .form-li {
  display: grid;
  grid-template-columns: 1fr 7fr;      /* two columns */
    padding-left: 20px;

}

/* Make specific fields span both columns */
#csBookingFormSimple .field-row--full { grid-column: 1 / -1; }


/* Inputs */
#csBookingFormSimple input,
#csBookingFormSimple select,
#csBookingFormSimple textarea {
    padding: 10px;
/*     width: 100%; */
    display: block;
    box-sizing: border-box;
    height: auto;
    line-height: 2em;
    border-width: 0;
    border-bottom-width: 1px;
    border-style: solid;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0) !important;
}

.form-row input,
.form-row textarea {  
    outline: none;
    transition: 0.5s;
}

.form-group input,
.form-group textarea {  
    width: 80%;
}
.form-nogroup input,
.form-nogroup select,
.form-nogroup textarea {  
    width: 100%;
}

#csBookingFormSimple label {
/*     display:block; */
    color:#666;
    font-size:14px;
    font-weight: 100;
}

/* Floating label */
.form-row label {   
    position: absolute;
    left: 5px;
    top: 20%;
/*  transform: translateY(30px); */
    color: #666;
    font-style: var(--label-font-style);
    pointer-events: none;
    transition:
        transform 160ms ease,
        color 160ms ease,
        top 160ms ease;
}

/* When typing OR focusing → label moves up */
.form-row input:focus + label,
.form-row input:not(:placeholder-shown) + label,
.form-row textarea:focus + label,
.form-row textarea:not(:placeholder-shown) + label {
      top: calc(1px); /* sit above the field’s text area */
      transform: translateY(0) scale(var(--label-scale));
      color: var(--border-color-focus);
}


#csBookingFormSimple input:focus,
#csBookingFormSimple select:focus,
#csBookingFormSimple textarea:focus {
    border-bottom-color: #0073aa;
}

#csBookingFormSimple h3 { margin-top:0; margin-bottom:10px; font-size:20px; }
#csBookingFormSimple h4 { margin:14px 0 8px; font-size:15px;}

#cs_distance, #cs_price {
    font-weight: 100;
    margin-bottom:10px;
}

#csBookingFormSimple button#cs_submit {
    display:inline-block;
    background:#b19540;
    color:#fff;
    border:none;
    padding:10px 16px;
    font-size:15px;
    cursor:pointer;
    border-radius:6px;
}
#csBookingFormSimple button#cs_submit:hover { background:transparent; color:#101010;}

#cs_message { margin-top:8px; font-weight:600; color:#101010; }
.required::after { content:" *"; color:red; font-weight: 100;}

@media (max-width:600px) {
    #csBookingFormSimple { padding:12px; }
    .form-group { grid-template-columns: 1fr; }
    .form-li { grid-template-columns: 1fr; }
}