/**
 * Spacing and responsive corrections for the front-end forms.
 *
 * Kept out of main.css on purpose: that file is compiled from the SCSS sources
 * in ../scss, so hand edits there are lost on the next build. This sheet is
 * loaded straight after it and overrides by cascade order alone — no !important.
 */

/* ------------------------------------------------------------------ *
 *  Spacing
 * ------------------------------------------------------------------ */

/* Themes routinely give every form a bottom margin. Inside this card it shows up
   as dead space between the submit button and the links under it. Scoped to the
   plugin's own container so other forms on the site keep their spacing. */
.l3-container form,
.l3-container .form-item {
    margin-bottom: 0;
}

.l3-container .l3-form-wrap .l3-form {
    padding: 18px 22px;
}

.l3-container .l3-form-wrap .l3-form .l3-field-wrap {
    margin-bottom: 16px;
    position: relative;
}

.l3-container .l3-form-wrap .l3-form .l3-label {
    position: absolute;
    top: 0;
    right: 14px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #64748b;
    background-color: var(--l3-box-bg, inherit);
    border-radius: 4px;
    cursor: pointer;
    z-index: 3;
    transition: color 0.2s ease, font-weight 0.2s ease;
    pointer-events: none;
    border: none !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------------ *
 *  Responsive
 * ------------------------------------------------------------------ */

/* The card was a fixed 420px. On a 375px screen it rendered 65px off the edge —
   clipped where the theme hides overflow, a horizontal scrollbar where it does not. */
.l3-container {
    max-width: 100%;
    box-sizing: border-box;
}

.l3-modal .l3-container {
    max-width: calc(100vw - 24px);
}

@media (max-width: 480px) {
    .l3-container .l3-form-wrap .l3-form {
        padding: 18px 16px;
    }

    /* Full-bleed rows need to follow the form's narrower gutter. */
    .l3-container .l3-form-wrap .l3-form-links a,
    .l3-container .l3-form-wrap .l3-form-links .l3-send-again {
        padding: 10px 16px;
    }

    /* Six OTP boxes plus 15px gaps do not fit across a narrow screen. */
    .l3-container .l3-form-wrap .l3-form .l3-otp-inputs {
        gap: 8px;
    }

    .l3-logo {
        padding: 0 16px;
    }
}

/* ------------------------------------------------------------------ *
 *  Signed-in account button ([l3_modal_button])
 * ------------------------------------------------------------------ */

/* In photo or icon mode the button is just the circle: no pill, no fill. */
.l3-modal-account-button.l3-account-button-avatar,
.l3-modal-account-button.l3-account-button-icon {
    /* main.css pins the pill to height: 34px. The circle is 20–96px depending on
       the setting, so the box has to size to its content or the picture spills
       out — which reads as the avatar sitting too high next to inline text. */
    height: auto;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none !important;
    border: 0;
    box-shadow: none;
    line-height: 1;
    /* Headers that are not flex containers align inline children on the text
       baseline, which lifts the circle. Centre it on the text instead. */
    vertical-align: middle;
    /* The pill button sets `color: #fff !important`, and an icon drawn with the
       default "follow the text colour" would then be white on a pale circle —
       invisible. Matching !important is the only way past it. */
    color: #4a4a4a !important;
}

.l3-modal-account-button.l3-account-button-avatar:hover,
.l3-modal-account-button.l3-account-button-icon:hover {
    color: #1a1a1a !important;
}

.l3-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #f1f1f1;
    /* Width and height come from the size setting, inline on the element. */
    box-sizing: border-box;
    vertical-align: middle;
    transition: box-shadow .15s ease;
}

.l3-modal-account-button:hover .l3-account-avatar {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .12);
}

.l3-account-avatar-photo {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

/* The icon sits inside the circle at about 60% of it, so it never touches the edge. */
.l3-account-avatar .l3-account-avatar-icon {
    width: 62%;
    height: 62%;
}