/* =========================================================
   PB Mailbox Creator Field — FINAL (desktop + mobile)
   Paste AFTER all other theme/Profile Builder CSS.
   ========================================================= */

/* Field wrapper: opt out of PB two-column floats */
.wppb-mailbox-creator-field{
    clear: both !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;

    margin: 14px 0 18px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Nuke PB label column behaviour inside THIS field only */
.wppb-mailbox-creator-field label,
.wppb-mailbox-creator-field small{
    float: none !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
}

/* Checkbox + label row: use grid so overlap is impossible */
.wppb-mailbox-creator-field .wppb-mailbox-row{
    display: grid !important;
    grid-template-columns: 22px 1fr !important;  /* checkbox col + text col */
    column-gap: 10px !important;
    align-items: start !important;
    margin: 0 0 6px 0 !important;
}

/* Hard reset checkbox — themes often absolute-position these */
.wppb-mailbox-creator-field .wppb-mailbox-checkbox{
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    margin: 2px 0 0 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    z-index: auto !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Clickable label text */
.wppb-mailbox-creator-field .wppb-mailbox-label{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    line-height: 1.3 !important;
}

.wppb-mailbox-creator-field .wppb-mailbox-label strong{
    color: #1f2937 !important;
    font-weight: 600 !important;
}

/* Hint text sits under the label column (aligned with text) */
.wppb-mailbox-creator-field .wppb-mailbox-hint{
    display: block !important;
    clear: both !important;
    margin: 0 0 10px 32px !important;  /* 22px + 10px gap */
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}

/* Expanded instruction panel */
.wppb-mailbox-creator-field .wppb-instruction-email-wrapper{
    float: none !important;
    clear: both !important;
    display: block !important;

    margin: 10px 0 0 32px !important;  /* align under label column */
    width: calc(100% - 32px) !important;
    max-width: none !important;
    box-sizing: border-box !important;

    padding: 10px 12px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;

    position: relative !important;
    z-index: 1 !important;
}

/* If you removed the "Send credentials to:" label, this can stay harmless */
.wppb-mailbox-creator-field .wppb-instruction-label{
    display: block !important;
    margin: 0 0 6px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

/* Email input sizing */
.wppb-mailbox-creator-field .wppb-instruction-email-input{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    height: 38px !important;
    padding: 7px 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 5px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    color: #1f2937 !important;

    transition: border-color 0.2s !important;
}

.wppb-mailbox-creator-field .wppb-instruction-email-input:focus{
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10) !important;
}

/* Instruction hint under the email input */
.wppb-mailbox-creator-field .wppb-instruction-hint{
    display: block !important;
    margin: 6px 0 0 0 !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    line-height: 1.35 !important;
}

/* Safety: prevent weird inherited alignment/spacing inside the field */
.wppb-mailbox-creator-field .wppb-mailbox-content{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* ===== NUCLEAR FIX (scoped): stop label sitting on checkbox ===== */

/* Force the row to be the containing block */
.wppb-mailbox-creator-field .wppb-mailbox-row{
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    column-gap: 10px !important;
    align-items: center !important;
}

/* Put the checkbox explicitly in column 1 and keep it in normal flow */
.wppb-mailbox-creator-field #create_email_account.wppb-mailbox-checkbox{
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;   /* overrides absolute */
    float: none !important;
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    appearance: auto !important;     /* undo custom checkbox libs */
    -webkit-appearance: checkbox !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Put the label explicitly in column 2 */
.wppb-mailbox-creator-field label.wppb-mailbox-label{
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;

    position: relative !important;
    z-index: 1 !important;
}