/*
 * Marketplace Twilio SMS — Theme-Consistent Overrides
 * Plugin: wp-marketplace-twilio-sms-notification
 *
 * On the registration form (my-account ?form=register and the Become-a-Seller
 * form) the add-on injects a Phone Number input + a country-code <select> into
 * one <p> row. The plugin's own frontend.css floats the input (70%) right and
 * the select (28%) left, gives the select a fixed 35px height and a fully
 * TRANSPARENT border (border:1px solid #0000), and never clears the floats — so
 * the two controls sit at mismatched heights with mismatched borders and the
 * row looks distorted.
 *
 * These rules relay the row out with flexbox: the label takes its own line and
 * the country-code select + phone input sit side-by-side at equal height
 * (align-items:stretch) with a visible, brand-consistent border.
 *
 * Scoping: the flex/label rules are gated by :has(#mptwl_addon_country_code) so
 * only the phone row is touched; the field rules reuse the plugin's own id/class
 * hooks (#mptwl_addon_country_code, .wkmp-shopphone) which exist only on this
 * form. No bleed into other pages. Loaded after the plugin's `mt_frontend_style`
 * handle (see functions.php) so equal-specificity rules win the cascade.
 *
 * Brand palette: Light Grey #d3d6dc (borders) — consistent with the other
 * child-theme override sheets.
 */

/* Phone number + country-code row → flex layout */
p.form-row:has(#mptwl_addon_country_code) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

/* Label on its own full-width line above the two fields (order:0 keeps it
   first even though the country-code select is re-ordered before the input). */
p.form-row:has(#mptwl_addon_country_code) > label {
    flex: 0 0 100%;
    order: 0;
    margin-bottom: 4px;
}

/* Country-code dropdown — fixed share of the row, visible border, auto height
   so align-items:stretch matches it to the phone input. order:1 places it FIRST
   (left) in the row; the phone input comes after it in the DOM but order:2 keeps
   it on the right. Equal specificity to the plugin's own rule; wins by load
   order. */
select#mptwl_addon_country_code {
    order: 1;
    flex: 0 0 30%;
    max-width: 30%;
    min-width: 90px;
    float: none;
    height: auto;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #d3d6dc;
    border-radius: 5px;
    background-color: #fff;
}

/* Phone input fills the rest of the row, on the right (order:2). Nested under
   the row so the unconditional width/float !important can never touch a
   .wkmp-shopphone element outside this form. !important is required to beat the
   plugin's `.wkmp-shopphone { width:70% !important; float:right !important }`. */
p.form-row:has(#mptwl_addon_country_code) .wkmp-shopphone {
    order: 2;
    flex: 1 1 0;
    width: auto !important;
    float: none !important;
    box-sizing: border-box;
}