/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on touch devices */
}

body {
    font-family: Arial, sans-serif;
    background-color: transparent; /* Assuming BottomSheetDialogFragment might have a custom background */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 10px; /* Add some padding around the widget */
}

.widget {
    background: #fff;
    border-radius: 20px;
    padding: 16px; /* Adjusted for smaller padding on mobile */
    max-width: 100%; /* Ensure it doesn't overflow */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Slightly less pronounced shadow */
    font-size: 16px; /* Slightly larger font for better readability on mobile */
}

/* ... rest of the styles ... */

.button, .toggle-switch input + .slider {
    /* Increase touch targets for mobile */
    padding: 12px 24px;
}

.payment-schedule li {
    /* Increase padding for list items */
    padding: 12px;
    font-size: 16px; /* Larger font for readability */
}

/* ... rest of the styles ... */

/* Ensure that the toggle switch works well on touch devices */
.slider.round {
    /* ... existing styles ... */
}

.slider.round:before {
    /* ... existing styles ... */
}

@media (max-width: 600px) {
    /* Adjust styles for smaller devices if necessary */
    .widget {
        /* Adjust the widget's padding and other styles for smaller devices */
        padding: 12px;
    }

    /* ... other responsive styles ... */
}

/* Fix for WebViews that don't handle viewport units well */
html, body {
    height: -webkit-fill-available; /* For mobile WebViews */
}

/* Adjust bottom padding to account for Android's navigation bar */
body {
    padding-bottom: env(safe-area-inset-bottom);
}