/* MHR5 Frontend Styles - Inherit Theme Defaults (v1.2.3) */
/* Only layout & RTL adjustments — let the theme style fields naturally */

/* ====================================================
   CHECKOUT — Full width (one per row)
   ==================================================== */

/* Full width — each field on its own row */
.woocommerce-checkout form .form-row.mhr5-country-field,
.woocommerce-checkout form .form-row.mhr5-phone-field,
.woocommerce form.checkout_coupon .form-row.mhr5-country-field,
.woocommerce form.checkout_coupon .form-row.mhr5-phone-field,
.woocommerce form.checkout .form-row.mhr5-country-field,
.woocommerce form.checkout .form-row.mhr5-phone-field {
    width: 100%;
    float: none;
    clear: both;
    margin-bottom: 1em;
    box-sizing: border-box;
}

/* Phone input — force LTR direction for digits */
input#mhr5_checkout_phone,
.mhr5-phone-field input[type="tel"] {
    direction: ltr;
    text-align: left;
}

/* Country select — keep cursor pointer */
select#mhr5_checkout_country_code {
    cursor: pointer;
}

/* ====================================================
   REGISTRATION & MY ACCOUNT — Custom Phone Wrapper
   (Used outside checkout, where we render our own HTML)
   ==================================================== */

.mhr5-phone-field:not(.form-row) {
    margin-bottom: 1.2em;
}

.mhr5-phone-field:not(.form-row) > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.mhr5-phone-field label .required {
    color: #ef4444;
    font-weight: 700;
    border: 0 !important;
    text-decoration: none;
}

.mhr5-phone-wrapper {
    display: flex;
    gap: 10px;
    direction: ltr;
    align-items: stretch;
}

.mhr5-country-select {
    flex: 0 0 180px;
    max-width: 180px;
}

.mhr5-phone-input {
    flex: 1;
    direction: ltr;
    text-align: left;
}

.mhr5-phone-hint {
    display: block;
    margin-top: 8px;
    font-size: 0.85em;
    color: #6b7280;
    font-style: italic;
}

.woocommerce-MyAccount-content .mhr5-phone-field:not(.form-row) {
    margin: 1.5em 0;
}

@media (max-width: 600px) {
    .mhr5-phone-wrapper {
        flex-direction: column;
        gap: 8px;
    }
    
    .mhr5-country-select {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
}

[dir="rtl"] .mhr5-phone-wrapper,
.rtl .mhr5-phone-wrapper {
    direction: ltr;
}

[dir="rtl"] .mhr5-country-select,
.rtl .mhr5-country-select {
    direction: rtl;
    text-align: right;
}