/* Compact fix for "Valige kuupäev käsitsi" field.
   Only affects manual date input area, mostly on phone/tablet.
*/

@media (max-width: 820px) {
    /* Common wrappers around manual date field */
    .manual-date,
    .manual-date-picker,
    .date-manual,
    .manual-date-row,
    .booking-manual-date,
    .booking-date-manual {
        margin: 10px 0 12px !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* If the manual date input is inside a label/block */
    label:has(input[type="date"]),
    label:has(input[name="date"]) {
        display: block !important;
        margin: 10px 0 12px !important;
        max-width: 100% !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
    }

    /* Main target: date input under "Valige kuupäev käsitsi" */
    input[type="date"],
    input[name="date"] {
        width: 100% !important;
        max-width: 260px !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 10px !important;
        margin-top: 6px !important;
        border-radius: 9px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 40px !important;
        box-sizing: border-box !important;
    }

    /* If previous mobile optimization made all inputs huge, neutralize it for date only */
    .booking-card input[type="date"],
    .step-booking-card input[type="date"],
    .booking-form input[type="date"],
    .booking-card input[name="date"],
    .step-booking-card input[name="date"],
    .booking-form input[name="date"] {
        width: 100% !important;
        max-width: 240px !important;
        min-height: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
        padding: 0 10px !important;
        display: block !important;
    }

    /* Keep the manual date block from stretching full card height */
    .booking-card label:has(input[type="date"]),
    .step-booking-card label:has(input[type="date"]),
    .booking-form label:has(input[type="date"]),
    .booking-card label:has(input[name="date"]),
    .step-booking-card label:has(input[name="date"]),
    .booking-form label:has(input[name="date"]) {
        width: fit-content !important;
        max-width: 100% !important;
    }
}

@media (max-width: 520px) {
    input[type="date"],
    input[name="date"],
    .booking-card input[type="date"],
    .step-booking-card input[type="date"],
    .booking-form input[type="date"],
    .booking-card input[name="date"],
    .step-booking-card input[name="date"],
    .booking-form input[name="date"] {
        max-width: 220px !important;
        min-height: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
}