/**
 * Bookly Form Customizations
 *
 * Stacks the service step dropdowns vertically with info after each,
 * similar to the mobile layout.
 *
 * @package Bookly_Open_Out
 */

.bookly-form * {
  font-size: 18px;
}

.bookly-form input[type="text"], .bookly-form input[type="tel"], .bookly-form input[type="number"], .bookly-form input[type="password"], .bookly-form select, .bookly-form textarea {
  font-size: 18px !important;
}

/* Make the table layout stack vertically like mobile */
.bookly-form .bookly-service-step .bookly-table.bookly-box {
    display: flex;
    flex-direction: column;
}

/* Make each form group full width */
.bookly-form .bookly-service-step .bookly-table.bookly-box .bookly-form-group {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

/* Force show the mobile-only info elements (they appear inline after each dropdown) */
.bookly-form .bookly-service-step .bookly-visible-sm {
    display: block !important;
    margin-bottom: 15px;
}

/* Hide the desktop-only info at the bottom (it's duplicated) */
.bookly-form .bookly-service-step .bookly-visible-md {
    display: none !important;
}

/* Style the info boxes consistently */
.bookly-form .bookly-service-step .bookly-category-info,
.bookly-form .bookly-service-step .bookly-service-info,
.bookly-form .bookly-service-step .bookly-staff-info {
}

/* Ensure dropdowns are full width */
.bookly-form .bookly-service-step .bookly-form-group select {
    width: 100%;
    max-width: 100%;
}

/* Add some spacing to labels */
.bookly-form .bookly-service-step .bookly-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}