/**
 * STDZ-130 - lay the SMS mobile field out like every other field on the form.
 *
 * Magecomp_Multisms floats the input (.mobilenumber{float:left;max-width:200px;width:80%})
 * from a time when the field carried no <label> and sat alone in a full-width row. Now that it
 * has one, the theme puts the input in the 74.2% control column - and a float inside that column
 * pulls the jQuery-validate .mage-error up alongside the box, so the message renders to the right
 * of it and wraps back under the label. Dropping the float makes it behave like First Name.
 *
 * @package Studentsbasket_CustomAttribute
 */
.field-mobilenumber .control > .input-text.mobilenumber {
    float: none;
    width: 100%;
    max-width: none;
}

/* The message and the hint sit under the input, full width of the column - never beside it. */
.field-mobilenumber .control > .mage-error,
.field-mobilenumber .control > .note {
    clear: both;
    float: none;
    display: block;
    width: 100%;
}

/* #smserror is only ever filled by the OTP flow; empty, it should take up no room. */
.field-mobilenumber .control > #smserror:empty {
    margin: 0;
}

/*
 * OTP variant - registration with confirmation switched on, and the two Verify Mobile Number
 * pages. The OTP box and its buttons now live inside the same control column, which is too
 * narrow for the row they used to float into, so stack them instead. Display is left alone
 * throughout: the module shows and hides these with jQuery .toggle().
 */
.field-mobilenumber._with-otp .control > #otpdiv {
    float: none;
    clear: both;
    width: 100%;
    max-width: none;
    margin: 10px 0 0;
}

.field-mobilenumber._with-otp .control > #otpbtndiv,
.field-mobilenumber._with-otp .control > #waitsmsdiv {
    float: none;
    clear: both;
    margin: 10px 0 0;
}

/*
 * The theme sets white-space:nowrap on every field label, which is fine for "First Name" but
 * not for the longest label on the form - "Mobile Number (SMS Alerts)" is wider than the 25.8%
 * label column, so it runs out over the input. Let this one wrap inside its column instead.
 */
.field-mobilenumber > .label,
.field-mobilenumber > .label > span {
    white-space: normal;
    /* Balance the two lines so it breaks as "Mobile Number" / "(SMS Alerts)" rather than
       mid-parenthetical. Ignored by browsers that don't support it, which just wrap as normal. */
    text-wrap: balance;
}