/*
 * Mobile and Touch CSS styling for the Cash On Delivery Form plugin.
 * These styles apply to smaller screens (max-width: 480px) and optimize for touch devices.
 */

@media (max-width: 480px) {
    .cod-form-container {
        padding: var(--form-padding, 15px);
    }

    /* Input fields height adjustment for mobile */
    .cod-form-container input[type="text"],
    .cod-form-container input[type="email"],
    .cod-form-container input[type="tel"],
    .cod-form-container input[type="number"],
    .cod-form-container select,
    .phone-whatsapp-table select.dial-code-select,
    .phone-whatsapp-table input[type="tel"],
    .select2-container--default .select2-selection--single {
        height: 48px; /* Slightly smaller height for mobile inputs, increased */
        padding: 8px 10px; /* Adjusted padding for mobile */
    }

    .cod-form-container textarea {
        padding: 8px 10px; /* Adjusted padding for mobile textarea */
        min-height: 70px; /* Slightly smaller min-height for mobile textarea */
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 46px; /* Adjust line height for mobile, increased */
        padding: 0 10px; /* Adjusted padding for mobile Select2 rendered text */
    }

    .input-field-row .icon-start {
        font-size: 16px; /* Slightly smaller icon size for mobile */
    }

    .input-field-row .icon-end {
        font-size: 16px; /* Slightly smaller icon size for mobile */
    }

    /* Country flag in Select2 for mobile */
    .select2-container .flag-icon {
        width: 32px; /* Consistent flag size for mobile */
        height: 24px; /* Maintain aspect ratio (4:3) */
    }

    .product-info table {
        display: block; /* Make table behave like a block for full width */
    }

    .product-info table tr {
        display: flex; /* Flex row for responsiveness */
        flex-wrap: wrap; /* Allow wrapping */
    }

    .product-info .product-image-cell {
        width: 100%; /* Full width for image on small screens */
        height: auto;
        padding-right: 0;
        margin-bottom: 10px; /* Space below image */
        text-align: center; /* Center image */
    }

    .product-info .product-image-cell img {
        width: 100px; /* Smaller fixed width for image on small screens */
        height: 100px;
        margin: 0 auto; /* Center image */
    }

    .product-info .product-name-cell,
    .product-info .product-price-cell,
    .product-info .product-quantity-cell {
        width: 100%; /* Full width for text/quantity on small screens */
        text-align: center !important; /* Center text */
        justify-content: center; /* Center quantity control */
    }

    .product-info .product-name-cell h3,
    .product-info .product-price-cell .price {
        text-align: center !important; /* Center text */
    }

    .phone-whatsapp-table td:first-child {
        width: 40%; /* Adjust width for dial code on small screens */
        padding-right: 5px;
    }
    .phone-whatsapp-table td:last-child {
        width: 60%; /* Adjust width for local number on small screens */
    }

    .coupon-section-flex {
        flex-direction: column;
        gap: 10px;
    }

    .coupon-input-wrapper {
        width: 100%;
    }

    #apply-coupon-button {
        width: 100%;
    }
}