/* ------------------------------------------------------------------ */
/* Probance Newsletter — defensive rules (since 2.4.3)                 */
/*                                                                     */
/* This file ships with the module and is overwritten on every upgrade,*/
/* unlike newsletter.css which is copied once at install and only ever */
/* receives appends (it holds the client's "Edit CSS" edits).          */
/*                                                                     */
/* Rules that MUST be present for the popup to work at all belong here */
/* and not in newsletter.base.css: an append can silently fail to run  */
/* (upgrade not triggered, file not writable, settings restored from a */
/* backup) and the fix never reaches the site. Seen in production on   */
/* 2.4.2, where newsletter.css was still byte-identical to the 2.4.1   */
/* base and had received neither the 2.4.1 nor the 2.4.2 append.       */
/*                                                                     */
/* Loaded right after newsletter.css and before the preset stylesheets,*/
/* so a preset can still override anything here.                       */
/* ------------------------------------------------------------------ */

/* Host themes from the Bootstrap 2 era ship an unscoped
   `.modal-body { max-height: 200px; overflow-y: auto }` (seen on
   beautify-theme716). At (0,1,0) it lands on our popup and turns the form
   into a scrollable box — the popup must always show in one block. */
.probance-newsletter-popup .modal-body {
    max-height: none;
    overflow: visible;
}

/* Checkbox group (2.5.0): boxes flow and wrap, each box + label is one
   inline-flex item so a long label wraps under its text, not under the box.
   The input selector repeats the wrapper class to outrank the generic
   `.probance-newsletter-popup .modal-body input` rule. */
.probance-newsletter-popup .probance-newsletter-customfield-checkbox-form,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-form {
    display: block;
    text-align: left;
}

.probance-newsletter-popup .probance-newsletter-customfield-group-label,
.probance-newsletter-banner .probance-newsletter-customfield-group-label {
    display: block;
    margin: 0 0 4px 0;
    font-weight: normal;
}

.probance-newsletter-popup .probance-newsletter-customfield-checkbox-list,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 16px;
}

.probance-newsletter-popup .probance-newsletter-customfield-checkbox-item,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
}

.probance-newsletter-popup
    .probance-newsletter-customfield-checkbox-form
    input.probance-newsletter-customfield-checkbox,
.probance-newsletter-banner
    .probance-newsletter-customfield-checkbox-form
    input.probance-newsletter-customfield-checkbox {
    width: auto;
    height: auto;
    margin: 2px 0 0 0;
    padding: 0;
    border: none;
    background: none;
    flex: none;
}

.probance-newsletter-popup .probance-newsletter-customfield-checkbox-form label,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-form label {
    display: inline;
    width: auto;
    margin: 0;
    font-weight: normal;
    line-height: 1.5;
}

/* Safety net against jQuery Uniform (1.6 default theme): it wraps checkboxes
   in div.checker>span and relies on the transparent input covering the sprite
   to catch clicks. Our sizing collapsed that input, making consent boxes
   untickable. The templates opt out via `not_uniform`; this covers themes that
   wrap anyway by restoring a native box. */
.probance-newsletter-popup div.checker,
.probance-newsletter-banner div.checker {
    width: auto !important;
    height: auto !important;
    position: static !important;
    vertical-align: baseline !important;
}

.probance-newsletter-popup div.checker > span,
.probance-newsletter-banner div.checker > span {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
}

.probance-newsletter-popup div.checker input[type='checkbox'],
.probance-newsletter-banner div.checker input[type='checkbox'] {
    opacity: 1 !important;
    filter: none !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: auto !important;
    width: 13px !important;
    height: 13px !important;
    position: static !important;
}