/* Anti-spam: Hide honeypot field */
.pulstarleads-form input[name="website_url"],
.pulstarleads-form input[name="website_url"] + label,
.pulstarleads-form label[for*="website_url"] {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pulstarleads-form-wrapper {
    width: 100%;
}

.pulstarleads-form {
    /* The MIT eBook form's look is the standard (2.3.0); the Form Style controls'
       defaults say the same. */
    background: #f7f7f7;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 2px 0 12px -3px rgba(0, 0, 0, 0.5);
}

.pulstarleads-form-header {
    width: 100%;
}

.pulstarleads-form-title {
    margin: 0 0 15px 0;
    font-size: 28px;
    font-weight: 600;
    color: #333333;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.pulstarleads-form-description {
    margin: 0 0 25px 0;
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.pulstarleads-form-title:empty,
.pulstarleads-form-description:empty {
    display: none;
}

.pulstarleads-form-fields {
    margin: 0;
    position: relative;
}

/* SIZE AND SPACING VARIABLES (1.3.3). Each `var(--pslb-*, X)` falls back to the value
   this sheet has always used, so a form nobody has styled renders exactly as before.
   The widgets' Style-tab controls (Field Style / Button Style: heights, padding, the
   gaps between fields, checkboxes, labels and the button) set these on the widget's
   own wrapper, so one form's settings never reach another form on the same page.
   A variable rather than a property per control because the horizontal sheet's phone
   rules carry `!important`, which a control's plain selector could never beat — every
   rule that has to honour a setting reads the variable instead, `!important` or not. */
.pulstarleads-field-group {
    margin-bottom: var(--pslb-field-gap, 17px);
}

.pulstarleads-field-group label {
    display: block;
    margin-bottom: var(--pslb-label-gap, 8px);
    font-weight: 500;
    color: #000000;
    font-size: 14px;
}

.pulstarleads-field-group label .required {
    color: #c0392b; /* 5.4:1; #e74c3c was 3.8:1 (2.2.0 accessibility review) */
    margin-left: 3px;
}

.pulstarleads-field-group input[type="text"],
.pulstarleads-field-group input[type="email"],
.pulstarleads-field-group input[type="tel"],
.pulstarleads-field-group input[type="number"],
.pulstarleads-field-group input[type="date"],
.pulstarleads-field-group select,
.pulstarleads-field-group textarea {
    width: 100%;
    padding: var(--pslb-input-padding, 12px 15px);
    /* #8c8c8c: 3.4:1 against white, the 3:1 a field's edge needs (WCAG 1.4.11); #e0e0e0
       was 1.3:1. The Input Border Color control's default moved with it. */
    border: 1px solid #8c8c8c;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Height for the one-line controls only — a textarea has its own below. 39px since 2.3.0
   (the MIT eBook form's); it was `auto`, about 47px. The Input Height control overrides it. */
.pulstarleads-field-group input[type="text"],
.pulstarleads-field-group input[type="email"],
.pulstarleads-field-group input[type="tel"],
.pulstarleads-field-group input[type="number"],
.pulstarleads-field-group input[type="date"],
.pulstarleads-field-group select {
    height: var(--pslb-input-height, 39px);
}

.pulstarleads-field-group input[type="text"]:focus,
.pulstarleads-field-group input[type="email"]:focus,
.pulstarleads-field-group input[type="tel"]:focus,
.pulstarleads-field-group input[type="number"]:focus,
.pulstarleads-field-group input[type="date"]:focus,
.pulstarleads-field-group select:focus,
.pulstarleads-field-group textarea:focus {
    /* A ring you can see (2.2.0, WCAG 2.4.7): the outline used to be removed, leaving a
       1px border colour change. --pslb-focus-color is the Input Focus Border Color
       control. */
    outline: 2px solid var(--pslb-focus-color, #0073aa);
    outline-offset: 1px;
    border-color: #0073aa;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.pulstarleads-field-group textarea {
    resize: vertical;
    min-height: var(--pslb-textarea-height, 100px);
    /* HEIGHT as well as min-height: a min-height only raises the floor, so on its own the
       Message Box Height control could make the box taller and never shorter. */
    height: var(--pslb-textarea-height, auto);
}

.pulstarleads-checkbox-group {
    margin: var(--pslb-checkbox-gap, 20px) 0;
}

/* The field group AROUND a checkbox takes the checkbox gap too. Its own margin collapses
   with the checkbox group's, so without this the two SMS consents could never sit closer
   than the ordinary field gap, whatever the Checkbox Spacing control said. With nothing
   set it falls back to the field gap — the spacing it has always had. */
.pulstarleads-field-group:has(> .pulstarleads-checkbox-group) {
    margin-bottom: var(--pslb-checkbox-gap, var(--pslb-field-gap, 17px));
}

/* A consent label is a SENTENCE, not a word, so the box aligns to the first
   LINE of it — "[x] I agree to..." — never to the vertical middle of a wrapped
   block. `align-items: center` put a three-line privacy sentence's checkbox
   beside line two, floating in the left margin with text above and below it,
   attached to nothing the eye can follow.

   The explicit `line-height` is load-bearing, not styling: it makes the first
   line box a known 1.5 x font-size, so the box's `margin-top` below can be
   stated once and land on the optical centre of that line. It also simply reads
   better for the multi-sentence consent copy these labels now carry. */
.pulstarleads-checkbox-group label {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
    cursor: pointer;
    font-weight: normal;
}

/* Sizing and first-line offset for every checkbox and radio this plugin
   renders, on both widgets.

   `flex: 0 0 auto` is the load-bearing part: as a flex item the box would
   otherwise be shrunk by a long label, which is how it went from square to a
   squashed sliver exactly when the text was long enough to need the alignment
   fix above. With `line-height: 1.5` on a 14px label the first line box is
   21px; a top-aligned 18px box offset 2px is centred on it to within half a
   pixel, and stays visibly ON the first line at any larger size. */
.pulstarleads-checkbox-group input[type="checkbox"],
.pulstarleads-checkbox-label input[type="checkbox"],
.pulstarleads-radio-label input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 2px;
    cursor: pointer;
}

.pulstarleads-checkbox-group input[type="checkbox"],
.pulstarleads-checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
}

.pulstarleads-submit-group {
    margin-top: var(--pslb-button-gap, 25px);
}

.pulstarleads-privacy-text {
    font-size: 11px;
    color: #666666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.pulstarleads-privacy-text a {
    color: #00953B;
    text-decoration: underline;
}

.pulstarleads-privacy-text a:hover {
    color: #008133;
}

.pulstarleads-submit-btn {
    background-color: #EF8901;
    color: #ffffff;
    border: none;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    line-height: 1.4;
    /* min(): never wider than the form, even when the form is narrower than 200px. */
    min-width: min(200px, 100%);
    height: var(--pslb-button-height, auto);
    /* ONE LINE, NEVER PAST THE FORM (2.2.0). pulstarleads.js shrinks a label that does not
       fit (fitButtonText()); these keep it on one line until then and stop the spill from
       widening the page if the script never runs. Hello Elementor already sets nowrap on
       every button, and a long label pushed a 390px phone page out to 669px. */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The last resort: a label that still does not fit at the smallest size wraps rather than
   being cut off. `.pulstarleads-form button` + the class, so it outranks the horizontal
   widget's `!important` phone height. */
.pulstarleads-form button.pslb-btn-wrap {
    white-space: normal !important;
    height: auto !important;
    min-height: var(--pslb-button-height, 0px);
    font-size: var(--pslb-button-min-font, 12px) !important;
    text-overflow: clip;
}

/* A long unbroken word (a URL in a consent label, a long field label) wraps inside the
   form instead of pushing the page wider than the phone (2.2.0: 320px became 600px).
   break-word, not anywhere: it changes nothing about how wide anything is laid out. */
.pulstarleads-form {
    overflow-wrap: break-word;
}

/* A checkbox or radio label is a FLEX row, and a flex item will not shrink below its
   longest word, so break-word alone left a URL in a consent sentence pushing the page out
   (320px became 600px in Chrome). `anywhere` lowers that minimum; min-width: 0 lets the
   text item take it. */
.pulstarleads-form .pulstarleads-checkbox-label,
.pulstarleads-form .pulstarleads-radio-label {
    overflow-wrap: anywhere;
}

.pulstarleads-form .pulstarleads-checkbox-label > span,
.pulstarleads-form .pulstarleads-radio-label > span {
    min-width: 0;
}

.pulstarleads-submit-btn:hover {
    background-color: #E17800;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}

.pulstarleads-submit-btn:active {
    transform: translateY(0);
}

.pulstarleads-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pulstarleads-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
}

.pulstarleads-message.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.pulstarleads-message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.pulstarleads-form.loading {
    position: relative;
    pointer-events: none;
}

.pulstarleads-form.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* Responsive Styles. 767px: Elementor's phone breakpoint (see the grid's phone rule). */
@media (max-width: 767px) {
    .pulstarleads-form {
        padding: 20px;
    }
    
    .pulstarleads-form-title {
        font-size: 24px;
    }
    
    .pulstarleads-submit-btn {
        width: 100% !important;
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .pulstarleads-submit-btn {
        width: 100% !important;
    }
}

/* :user-invalid, not :invalid (2.2.0): a required field is "invalid" until filled, so
   every required field was red before the visitor had typed anything. */
.pulstarleads-field-group input:user-invalid,
.pulstarleads-field-group select:user-invalid,
.pulstarleads-field-group textarea:user-invalid {
    border-color: #e74c3c;
}

.pulstarleads-field-group input:valid:focus,
.pulstarleads-field-group select:valid:focus,
.pulstarleads-field-group textarea:valid:focus {
    border-color: #27ae60;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pulstarleads-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}


.pulstarleads-inline-layout .pulstarleads-field-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333333;
    font-size: 14px;
}

.pulstarleads-inline-layout .pulstarleads-field-group input,
.pulstarleads-inline-layout .pulstarleads-field-group select,
.pulstarleads-inline-layout .pulstarleads-field-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.pulstarleads-inline-layout .pulstarleads-checkbox-label {
    display: flex;
    align-items: flex-start;
}





/* Radio and checkbox styling. `flex-start` + `line-height` for the same reason
   as the checkbox-group rule above: the box belongs on the first line of the
   label, and a stated line-height is what makes its offset computable. */
.pulstarleads-checkbox-label,
.pulstarleads-radio-label {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 8px;
}

.pulstarleads-checkbox-label input[type="checkbox"],
.pulstarleads-radio-label input[type="radio"] {
    margin-right: 8px;
}

.pulstarleads-radio-group {
    margin: 10px 0;
}

/* Custom fields in details view */
.pulstarleads-custom-fields {
    margin-top: 10px;
}

.pulstarleads-custom-field {
    margin-bottom: 5px;
}
/* ─── Field widths ──────────────────────────────────────────────────────────
 *
 * First Name and Last Name side by side; City / Region / Postcode in a row of
 * three. The thing that makes a form look designed rather than typed.
 *
 * INERT UNLESS THE FORM OPTS IN. Every rule here is under
 * `.pulstarleads-form-fields--grid`, a class the widget emits only when some
 * VISIBLE row has been given a width. A form nobody has laid out never becomes
 * a flex container at all, which is why its markup and its layout are both
 * unchanged.
 *
 * `.pulstarleads-submit-group` IS A CHILD OF `.pulstarleads-form-fields`, so
 * the moment this container becomes flex the submit button becomes a flex item
 * beside the fields. That is what the `> *` base rule is for: every direct
 * child takes a full row, and only the two width modifiers opt out of it. Get
 * that wrong and the button lands next to the last field.
 *
 * The calc() bases are exact because `.pulstarleads-field-group` has no padding
 * and no border — checked, not assumed. There is no global `box-sizing` reset in
 * this stylesheet and introducing one is off the table: it would reach every
 * element on every page the plugin's CSS loads on, which is all of them.
 */

.pulstarleads-form-fields--grid {
    display: flex;
    flex-wrap: wrap;
    /* The gutter between columns, in one place. Halved on each side of the
       calc() below so two halves plus one gap fill the row exactly.
       Space Between Columns sets it; unset, it follows Space Between Fields, so
       that one control spaces fields both ways (2.2.0 — until then side-by-side
       fields stayed 20px apart whatever it said). Both unset: the 20px it was. */
    --pulstarleads-gutter: var(--pslb-column-gap, var(--pslb-field-gap, 17px));
    column-gap: var(--pulstarleads-gutter);
    /* Side-by-side inputs level even when one label wraps (2.2.0); the Layout rules
       in includes/layout-css.php say the same per device. */
    align-items: flex-end;
}

/* Full width is the default for EVERY direct child, the submit group included. */
.pulstarleads-form-fields--grid > * {
    flex: 0 0 100%;
    max-width: 100%;
}

.pulstarleads-form-fields--grid > .pulstarleads-field-group--half {
    flex: 0 0 calc((100% - var(--pulstarleads-gutter)) / 2);
    max-width: calc((100% - var(--pulstarleads-gutter)) / 2);
}

.pulstarleads-form-fields--grid > .pulstarleads-field-group--third {
    flex: 0 0 calc((100% - (2 * var(--pulstarleads-gutter))) / 3);
    max-width: calc((100% - (2 * var(--pulstarleads-gutter))) / 3);
}

/* 2.3.1: four to a row, e.g. First name, Last name, Email and the Submit Button. */
.pulstarleads-form-fields--grid > .pulstarleads-field-group--quarter {
    flex: 0 0 calc((100% - (3 * var(--pulstarleads-gutter))) / 4);
    max-width: calc((100% - (3 * var(--pulstarleads-gutter))) / 4);
}

/* Flex items do not collapse margins, so in grid mode the spacing the block layout gets
   by collapsing has to be stated (2.2.0 code review; measured in Chrome: a consent box's
   group was 61px tall instead of 21, and the button 45px below the last field instead of
   25). Two places collapsed:
   - a checkbox group's own margin, through the field group around it, into the gaps
     either side. Zeroed here: the field group's bottom margin is already the checkbox gap
     (the `:has()` rule above), and the gap above is the previous field's;
   - the submit group's top margin with the last field's bottom margin. Only the part of
     the button gap beyond the field gap is added, so the total is the larger of the two,
     as it was. */
.pulstarleads-form-fields--grid > .pulstarleads-field-group > .pulstarleads-checkbox-group {
    margin: 0;
}

.pulstarleads-form-fields--grid > .pulstarleads-submit-group {
    margin-top: max(0px, calc(var(--pslb-button-gap, 25px) - var(--pslb-field-gap, 17px)));
}

/* ...and the privacy line's own top margin, which the block layout folded into that same
   gap (11px more above the button without this). */
.pulstarleads-form-fields--grid > .pulstarleads-submit-group > :first-child {
    margin-top: 0;
}

/* row_break: forces the next field onto a new row even when this one has room.
   Zero height and zero margin, so it costs nothing vertically — it exists only
   to end the line. */
.pulstarleads-form-fields--grid > .pulstarleads-field-group--break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

/* One column on a phone. A half-width field at 390px is a 175px input, which is
   narrower than the text most people type into it — and the horizontal widget's
   own breakpoint stacks at the same width, so the two agree.

   Since 2.2.0 this is only the FALLBACK. The Layout control decides per device
   (phones default to One column) through rules includes/layout-css.php prints
   after this sheet at the site's own breakpoints, one specificity step higher.
   767px, not 768px: Elementor's phone range ends at 767, and its Tablet preview
   opens at 768px wide, where this used to show the phone layout. */
@media (max-width: 767px) {
    .pulstarleads-form-fields--grid > .pulstarleads-field-group--half,
    .pulstarleads-form-fields--grid > .pulstarleads-field-group--third,
    .pulstarleads-form-fields--grid > .pulstarleads-field-group--quarter {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* With everything on its own row, a break would add an empty one. */
    .pulstarleads-form-fields--grid > .pulstarleads-field-group--break {
        display: none;
    }
}

/* ACCESSIBILITY (2.2.0) ─────────────────────────────────────────────────────────────── */

/* Text for screen readers only: the status region and "(opens in a new tab)". */
.pulstarleads-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The sentence under a field that needs fixing (pulstarleads.js highlightError()). */
.pulstarleads-field-error {
    display: block;
    /* Between the label and the control (see highlightError()). */
    margin: 0 0 6px;
    color: #c0392b;
    font-size: 14px;
    line-height: 1.4;
}

/* The submit button placed among the fields (a Submit Button row, 2.3.0) is as tall as the
   inputs beside it, so the two line up top and bottom; the Button Height control still wins. */
.pulstarleads-field-group > .pulstarleads-submit-btn {
    height: var(--pslb-button-height, var(--pslb-input-height, 39px));
}

/* A Text item in the Fields list (2.3.0): a paragraph, no input. Its field group's margin
   is the gap below it; the Style tab's "Text Items" and each row's own controls restyle it. */
.pulstarleads-text-block {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
}

/* "Fields marked * are required." */
.pulstarleads-required-note {
    margin: 0 0 var(--pslb-label-gap, 8px);
    color: #595959;
    font-size: 13px;
    text-align: right;
}

/* A keyboard user sees which button has focus, whatever the theme does. */
.pulstarleads-submit-btn:focus-visible {
    outline: 3px solid var(--pslb-focus-color, #0073aa);
    outline-offset: 2px;
}

/* Checkbox and radio rows at least 24px tall: the WCAG 2.2 minimum target. */
.pulstarleads-checkbox-label,
.pulstarleads-radio-label {
    min-height: 24px;
}