/*
 * Desktop CSS styling for the Cash On Delivery Form plugin.
 * These styles apply to larger screens (desktops and tablets in landscape).
 * They define the default appearance of the form elements.
 */

/* Ensure LTR direction for the entire form container to prevent RTL issues */
.cod-form-container {
    direction: ltr !important; /* Force Left-to-Right direction */
    text-align: left !important; /* Align text to the left */
    max-width: 600px;
    margin: 20px auto;
    background: var(--form-bg-color, #f9f9f9);
    border-radius: var(--form-border-radius, 8px);
    padding: var(--form-padding, 20px);
    box-shadow: var(--form-box-shadow, 0 2px 10px rgba(0,0,0,0.1));
    font-family: 'Inter', sans-serif;
    color: var(--label-color, #333); /* Default text color for the container */
}

/* Ensure headings are LTR and left-aligned */
.cod-form-container h2,
.cod-form-container h3 {
    direction: ltr !important;
    text-align: left !important;
    color: var(--title-color, #333);
    margin-top: 0;
    margin-bottom: 15px;
}

/* Input fields styling (Desktop default) */
.cod-form-container input[type="text"],
.cod-form-container input[type="email"],
.cod-form-container input[type="tel"],
.cod-form-container input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 0; /* Removed bottom margin, handled by input-wrapper */
    border: 1px solid var(--input-border-color, #ddd);
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 16px;
    color: var(--input-text-color, #555);
    background-color: var(--input-bg-color, #fff);
    direction: ltr !important; /* Force LTR for input text */
    text-align: left !important; /* Ensure input text is left-aligned */
    height: 52px; /* Consistent height for all inputs on desktop, increased */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); /* Subtle inner shadow */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cod-form-container select {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 0; /* Removed bottom margin, handled by input-wrapper */
    border: 1px solid var(--input-border-color, #ddd);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--input-text-color, #555);
    background-color: var(--input-bg-color, #fff);
    direction: ltr !important;
    text-align: left !important;
    height: 52px; /* Consistent height for all selects on desktop, increased */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.cod-form-container input[type="text"]:focus,
.cod-form-container input[type="email"]:focus,
.cod-form-container input[type="tel"]:focus,
.cod-form-container input[type="number"]:focus,
.cod-form-container select:focus,
.cod-form-container textarea:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa, inset 0 1px 2px rgba(0,0,0,0.07);
    outline: none;
}

.cod-form-container input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}

.cod-form-container textarea {
    width: 100%; /* Ensure textarea takes full width */
    padding: 10px 12px;
    margin-bottom: 0; /* Removed bottom margin, handled by input-wrapper */
    border: 1px solid var(--input-border-color, #ddd);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--input-text-color, #555);
    background-color: var(--input-bg-color, #fff);
    direction: ltr !important;
    text-align: left !important;
    resize: vertical; /* Allow vertical resizing only */
    min-height: 80px; /* Minimum height for textarea */
    height: auto; /* Textarea height is flexible */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); /* Subtle inner shadow */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Product Info Section */
.product-info {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.product-info table {
    width: 100%;
    border-collapse: collapse;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.product-info table td {
    padding: 5px; /* Smaller padding for table cells */
    vertical-align: top; /* Align content to the top */
    border: none; /* No borders for product info table cells */
}

.product-info .product-image-cell {
    width: 100px; /* Fixed width for the image column */
    height: 100px; /* Fixed height for the image column */
    padding-right: 15px; /* Space between image and details */
}

.product-info .product-image-cell img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    display: block; /* Remove extra space below image */
}

.product-info .product-name-cell h3 {
    margin: 0 0 5px 0;
    color: var(--title-color, #333);
    font-size: 18px;
    direction: ltr !important;
    text-align: left !important;
}

.product-info .product-price-cell .price {
    margin: 0;
    color: #0073aa;
    font-weight: bold;
    font-size: 16px;
    direction: ltr !important;
    text-align: left !important;
}

.product-info .product-quantity-cell {
    display: flex; /* Use flexbox for label and quantity control */
    align-items: center;
    gap: 10px; /* Space between label and control */
    padding-top: 10px; /* Add some padding above quantity */
}

.product-info .product-quantity-cell label {
    margin-bottom: 0; /* Remove default label margin */
    font-weight: normal; /* Less bold than main labels */
    font-size: 15px;
    flex-shrink: 0; /* Prevent label from shrinking */
}

/* Quantity Control Styling */
.quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--input-border-color, #ddd);
    border-radius: 4px;
    overflow: hidden; /* Hide overflow for rounded corners */
    width: 120px; /* Fixed width for quantity control */
    flex-shrink: 0; /* Prevent quantity control from shrinking */
}

.quantity-control .quantity-button {
    background-color: #f0f0f0;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    transition: background-color 0.2s ease;
    flex-grow: 0;
    flex-shrink: 0;
    width: 40px; /* Fixed width for buttons */
    height: 40px; /* Fixed height for buttons */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none; /* Remove button shadow */
    border-radius: 0; /* Remove button border-radius */
}

.quantity-control .quantity-button:hover {
    background-color: #e0e0e0;
}

.quantity-control .quantity-button:active {
    background-color: #d0d0d0;
}

.quantity-control .quantity-input {
    border: none;
    text-align: center;
    width: 40px; /* Fixed width for input */
    padding: 8px 0; /* Adjust padding */
    font-size: 16px;
    color: var(--input-text-color, #333);
    background-color: var(--input-bg-color, #fff);
    flex-grow: 1;
    flex-shrink: 1;
    margin-bottom: 0; /* Remove default input margin */
    border-radius: 0; /* Remove default input border-radius */
    height: 40px; /* Ensure quantity input has consistent height */
}

/* Buttons */
.cod-form-container .button {
    display: inline-block;
    padding: var(--button-padding, 12px 20px);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: var(--button-border-radius, 6px);
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
    color: var(--button-text-color, #fff);
    background-color: var(--button-bg-color, #0073aa);
    box-shadow: var(--button-box-shadow, 0 4px 6px rgba(0,0,0,0.1));
}

.cod-form-container .button:hover {
    background-color: color-mix(in srgb, var(--button-bg-color, #0073aa) 80%, black); /* Darken on hover */
    box-shadow: var(--button-box-shadow, 0 6px 8px rgba(0,0,0,0.15));
}

.cod-form-container .button-primary {
    width: 100%;
    margin-top: 20px;
}

.cod-form-container .button-secondary {
    background-color: #6c757d;
    color: #fff;
}

.cod-form-container .button-secondary:hover {
    background-color: #5a6268;
}

/* Form messages (success/error) */
.cod-form-container .coupon-message,
.cod-form-container #cod-form-message {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
    display: none; /* Hidden by default, shown by JS */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.cod-form-container .coupon-message.success,
.cod-form-container #cod-form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.cod-form-container .coupon-message.error,
.cod-form-container #cod-form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Invoice Summary */
.invoice-details-box {
    background-color: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.invoice-details-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--title-color, #333);
    font-size: 18px;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.invoice-details-box table {
    width: 100%;
    border-collapse: collapse;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.invoice-details-box table td {
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.invoice-details-box table tr:last-child td {
    border-bottom: none;
}

.invoice-details-box table .total-row td {
    font-weight: bold;
    color: #0073aa;
    font-size: 1.1em;
}

/* Additional Option (Checkbox) */
.additional-option {
    background-color: var(--additional-option-bg-color, #e6ffe6);
    border: var(--additional-option-border-width, 2px) var(--additional-option-border-style, dashed) var(--additional-option-border-color, #a3e6a3);
    border-radius: var(--additional-option-border-radius, 8px);
    padding: var(--additional-option-padding, 15px);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.additional-option label {
    margin-bottom: 0; /* Override default label margin */
    flex-grow: 1; /* Allow label to take space */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

/* Coupon Section */
.coupon-section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.coupon-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.coupon-section-flex {
    display: flex;
    gap: 10px;
    align-items: center;
    direction: ltr !important; /* Force LTR */
}

.coupon-input-wrapper {
    flex-grow: 1;
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.coupon-input-wrapper input[type="text"] {
    margin-bottom: 0; /* Remove extra margin */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

/* Input wrapper for icons */
.input-wrapper {
    position: relative;
    margin-bottom: 15px; /* Space between fields */
    display: flex; /* Use flexbox for label and field/icon row */
    flex-direction: column; /* Stack label and input/icon vertically */
    direction: ltr !important; /* Force LTR for the wrapper */
    text-align: left !important; /* Align content to the left */
}

.input-field-row {
    display: flex; /* Flex container for icon and input */
    align-items: center; /* Vertically align icon and input */
    gap: 8px; /* Space between icon and input */
    width: 100%; /* Take full width */
}

.input-field-row .icon-start,
.input-field-row .icon-end {
    /* Position of the icon next to the input */
    flex-shrink: 0; /* Prevent icon from shrinking */
    color: #aaa;
    font-size: 18px;
    /* No absolute positioning needed here, as it's in a flex container */
}

/* Specific font-family for Font Awesome icons */
.input-wrapper .fas,
.input-wrapper .fab {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', sans-serif !important;
}

/* Specific font-weight for solid icons */
.input-wrapper .fas {
    font-weight: 900 !important;
}

/* Specific font-weight for brand icons */
.input-wrapper .fab {
    font-weight: 400 !important;
}

/* Adjust input padding when icons are present - no longer needed as icons are outside */
.input-wrapper.has-icons input[type="text"],
.input-wrapper.has-icons input[type="email"],
.input-wrapper.has-icons input[type="tel"],
.input-wrapper.has-icons input[type="number"],
.input-wrapper.has-icons select,
.input-wrapper.has-icons textarea {
    padding-left: 12px; /* Revert to default padding as icon is outside */
    padding-right: 12px; /* Revert to default padding as icon is outside */
}


/* Phone/WhatsApp Table Layout */
.phone-whatsapp-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0; /* Removed bottom margin, handled by input-wrapper */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.phone-whatsapp-table td {
    padding: 0; /* Remove default table cell padding */
    vertical-align: middle; /* Align content vertically in middle */
}

.phone-whatsapp-table td:first-child {
    width: 30%; /* Adjust width for dial code */
    padding-right: 10px;
}

.phone-whatsapp-table td:last-child {
    width: 70%; /* Adjust width for local number */
}

.phone-whatsapp-table select.dial-code-select {
    margin-bottom: 0; /* Remove margin from select inside table */
    width: 100%; /* Ensure select takes full width of its cell */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
    height: 52px; /* Consistent height for dial code select, increased */
}

.phone-whatsapp-table input[type="tel"] {
    margin-bottom: 0; /* Remove margin from input inside table */
    width: 100%; /* Ensure input takes full width of its cell */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
    height: 52px; /* Consistent height for phone input, increased */
}


/* Select2 adjustments for LTR (Desktop default) */
.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    width: 100% !important; /* Ensure Select2 takes full width */
    direction: ltr !important; /* Force LTR for Select2 container */
    text-align: left !important; /* Align content to the left */
}

.select2-container--default .select2-selection--single {
    height: 52px; /* Set a fixed height for consistency on desktop, increased */
    padding: 0;
    border: 1px solid var(--input-border-color, #ddd);
    border-radius: 4px;
    background-color: var(--input-bg-color, #fff);
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); /* Subtle inner shadow */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--input-text-color, #555);
    line-height: 50px; /* Adjust line height to vertically center text and flag (height - 2*border) */
    padding: 0 12px; /* Adjust padding to fit new height, 0 top/bottom */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

/* Country flag in Select2 */
.select2-container .flag-icon {
    display: inline-block;
    width: 36px; /* Increased flag size for better visibility */
    height: 27px; /* Maintain aspect ratio (4:3) */
    vertical-align: middle; /* Ensure it's vertically aligned */
    margin-right: 8px;
    border: 1px solid #ccc; /* Small border for visibility */
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
    overflow: hidden; /* Hide overflow for SVG flags */
    flex-shrink: 0; /* Prevent flag from shrinking */
}

.select2-container .flag-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Ensure SVG covers the container without distortion */
}

.select2-container .country-name-text,
.select2-container .dial-code-text {
    vertical-align: middle; /* Ensure text is vertically aligned with flag */
    direction: ltr !important; /* Force LTR */
    text-align: left !important; /* Align content to the left */
}

.select2-container .dial-code-text {
    margin-left: 8px;
    font-weight: bold;
    color: #666;
}

/* General horizontal rule styling */
hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}