/* Styles for reservation form */

/* Fix for icon positioning when validation errors appear */
.error-icon-position {
    /* Adjust positioning to keep the icon centered vertically with the input */
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
}

/* Specific styling for input fields with errors */
.has-error .reservation-field {
    border-color: #ef4444; /* red-500 */
    background-color: #fef2f2; /* red-50 */
}

/* Ensure icon stays visible even when field has error */
.has-error .flex.items-center svg {
    color: #dc2626; /* red-600 - make icon more visible on error */
}

/* Improve focus states */
.reservation-field:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(247, 148, 29, 0.5); /* papaya-orange with opacity */
}

/* Custom styles for segmented control to match form aesthetics */
.people-segmented .seg-opt {
    transition: all 0.2s ease;
}

.people-segmented .seg-opt:hover {
    background-color: #fef9f6; /* papaya-orange/50 */
}

/* Make the segmented row height consistent with text inputs (~42px) */
.people-segmented > .flex {
    min-height: 42px;
    align-items: center;
}

.people-segmented .seg-opt-pop {
    animation: pulse-scale 0.3s ease;
}

@keyframes pulse-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Hide default number input spinners (arrows) */
.people-custom-input::-webkit-outer-spin-button,
.people-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.people-custom-input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}

/* Custom input wrapper uses flex layout when visible (hidden class controls visibility) */
.people-custom-input-wrapper:not(.hidden) {
    display: inline-flex;
    vertical-align: middle;
}