.gr-counter-control {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: 0.75rem 0;
 }

 .gr-counter-input-group {
     display: flex;
     align-items: center;
     border: 1px solid #ced4da;
     border-radius: 0.5rem;
     overflow: hidden;
     width: 120px;
     /* Fixed width for consistency */
 }

 .gr-counter-btn {
     background-color: var(--light-gray);
     color: var(--primary-color);
     border: none;
     width: 32px;
     height: 32px;
     font-size: 1.25rem;
     line-height: 1;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.15s;
 }

 .gr-counter-btn:hover:not(:disabled) {
     background-color: #e2e6ea;
 }

 .gr-counter-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     color: #6c757d;
 }

 .gr-counter-value {
     border: none;
     width: 56px;
     text-align: center;
     font-size: 1rem;
     font-weight: 500;
     padding: 0.25rem 0;
     -moz-appearance: textfield;
     /* Hide arrows on Firefox */
     pointer-events: none;
     /* Make input non-editable by keyboard */
     background-color: white;
 }

 /* Hide arrows on Chrome, Safari, Edge */
 .gr-counter-value::-webkit-inner-spin-button,
 .gr-counter-value::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 .gr-room {
     border: 1px solid #dee2e6;
     padding: 1rem;
     margin-bottom: 1rem;
     /* Bootstrap equivalent to space-y-4 */
     border-radius: 0.75rem;
     position: relative;
     background-color: white;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
     /* Replacing Tailwind shadow with Bootstrap shadow */
 }

 .gr-room h5 {
     margin-bottom: 0.75rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .child-age-selector {
     padding: 0.5rem 1rem;
     background-color: var(--light-gray);
     border-radius: 0.5rem;
     margin-top: 0.5rem;
 }

 .child-age-selector>div {
     margin-bottom: 0.5rem;
     /* Replaces Tailwind space-y-2 */
 }

 .child-age-selector>div:last-child {
     margin-bottom: 0;
 }


 .modal-content {
     border-radius: 1rem;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }