/* PulStarLeads Horizontal Form Styles */
.pulstarleads-horizontal-form-wrapper {
    width: 100%;
}

.pulstarleads-horizontal-form {
    background: #f8f9fa;
    padding: 40px 30px;
    border-radius: 10px;
    position: relative;
}

/* Transparent background option */
.pulstarleads-horizontal-form-transparent {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.pulstarleads-horizontal-header {
    margin-bottom: 30px;
    text-align: center;
}

.pulstarleads-horizontal-title {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.pulstarleads-horizontal-description {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.pulstarleads-horizontal-fields {
    width: 100%;
    position: relative;
}

/* Row Layout */
.pulstarleads-horizontal-row {
    display: flex;
    flex-wrap: wrap;
    /* --pslb-field-gap: see SIZE AND SPACING VARIABLES in pulstarleads.css.
       The side margins are half the column gap, negated, so the fields' own half-gap
       padding below lines up with the form's edges. The column gap is Space Between
       Columns, else Space Between Fields, else the 20px it always was (2.2.0: until
       then First / Last / Email stayed 20px apart whatever the field gap said). */
    margin: 0 calc(var(--pslb-column-gap, var(--pslb-field-gap, 20px)) / -2) var(--pslb-field-gap, 20px) calc(var(--pslb-column-gap, var(--pslb-field-gap, 20px)) / -2);
    /* Bottom-aligned: inputs stay level when one label wraps. The error sentence goes
       between label and input (pulstarleads.js), so it does not drop an input. */
    align-items: flex-end;
}

.pulstarleads-horizontal-row:last-child {
    margin-bottom: 0;
}

/* Individual Fields */
.pulstarleads-horizontal-field {
    flex: 1;
    padding: 0 calc(var(--pslb-column-gap, var(--pslb-field-gap, 20px)) / 2);
    min-width: 200px;
}

.pulstarleads-horizontal-field-full {
    flex: 1 0 100%;
    /* 100% of the row INCLUDING the half-gap padding. Content-box made it 100% plus a
       whole column gap: 20px over, hidden inside the form's own padding until the gap
       became adjustable (2.2.0), and past the page edge at a 60px gap. */
    box-sizing: border-box;
}

.pulstarleads-horizontal-field label {
    display: block;
    margin-bottom: var(--pslb-label-gap, 5px);
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.pulstarleads-horizontal-field input {
    width: 100%;
    padding: var(--pslb-input-padding, 10px 15px);
    height: var(--pslb-input-height, auto);
    /* #8c8c8c: 3.4:1 against white, the 3:1 a field's edge needs to be seen (WCAG
       1.4.11). #e0e0e0 was 1.3:1 (2.2.0 accessibility review). */
    border: 1px solid #8c8c8c;
    border-radius: 4px;
    font-size: 14px;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* This sheet never styled a textarea, so it has always taken the browser's height; `auto`
   keeps that until the Message Box Height control is set. Without this rule the control
   did nothing on this widget — found by measuring the rendered form in a browser. HEIGHT,
   not min-height, so the control can make the box shorter as well as taller. */
.pulstarleads-horizontal-field textarea {
    height: var(--pslb-textarea-height, auto);
    /* So a setting of 80px means 80px on screen, as it does for the inputs above. */
    box-sizing: border-box;
}

/* A focus ring you can see (2.2.0, WCAG 2.4.7): the outline was removed and focus
   was a 1px border colour change. */
.pulstarleads-horizontal-field input:focus {
    outline: 2px solid #1e7e34;
    outline-offset: 1px;
    border-color: #1e7e34;
    box-shadow: none;
}

/* #757575: 4.6:1 (was #999, 2.8:1). */
.pulstarleads-horizontal-field input::placeholder {
    color: #757575;
}

/* Submit Button Row */
.pulstarleads-horizontal-submit-row {
    justify-content: center;
    margin-top: var(--pslb-button-gap, 20px);
    position: relative;
    z-index: 1;
    clear: both;
}

.pulstarleads-horizontal-submit-btn {
    /* #1e7e34: white text at 5.1:1 (#28a745 was 3.1:1, 2.2.0 accessibility review). */
    background: #1e7e34;
    color: #ffffff;
    border: none !important;
    padding: 12px 40px;
    height: var(--pslb-button-height, auto);
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* One line, never past the form: see .pulstarleads-submit-btn in pulstarleads.css. */
    min-width: min(300px, 100%);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* No ring on a mouse click; a keyboard user gets the :focus-visible ring below. Until
   2.2.0 this rule named :focus-visible too, so the button showed no focus at all. */
.pulstarleads-horizontal-submit-btn:focus:not(:focus-visible),
.pulstarleads-horizontal-submit-btn:active {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.pulstarleads-horizontal-submit-btn:focus-visible {
    outline: 3px solid #1e7e34 !important;
    outline-offset: 2px !important;
}

.pulstarleads-horizontal-submit-btn:hover {
    background: #19692c;
    transform: translateY(-1px);
    /* No `outline: none !important` here any more: hovering a keyboard-focused
       button removed its focus ring (code review, 2026-10-16). */
    border: none !important;
}

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

/* Required Asterisk */
.pulstarleads-horizontal-field .required {
    color: #c0392b; /* 5.2:1 on the form's grey; #e74c3c was 3.6:1 */
    margin-left: 3px;
}

/* Success/Error Messages */
.pulstarleads-horizontal-form .pulstarleads-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

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

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

/* Responsive Design */

/* Tablets and smaller laptops */
@media (max-width: 992px) {
    /* A third of the row less the field's own padding (one column gap, half each side;
       content-box), so three still fit. It said `- 20px` while the gap was fixed at 20;
       with a wider gap the third field wrapped on every tablet (2.2.0 code review). */
    .pulstarleads-horizontal-field {
        min-width: calc(33.33% - var(--pslb-column-gap, var(--pslb-field-gap, 20px)));
    }
    
    .pulstarleads-horizontal-submit-btn {
        min-width: min(250px, 100%);
    }
}

/* Phones. 767px, Elementor's phone breakpoint (2.2.0): at 768px, the width Elementor's
   Tablet preview opens at, this used to show the phone layout. */
@media (max-width: 767px) {
    .pulstarleads-horizontal-form {
        padding: 30px 20px;
    }
    
    /* Keep transparent forms without padding on mobile too */
    .pulstarleads-horizontal-form-transparent {
        padding: 0 !important;
    }
    
    /* Container for all fields */
    .pulstarleads-horizontal-fields {
        display: block !important;
        width: 100% !important;
    }
    
    /* Make all rows stack vertically */
    .pulstarleads-horizontal-row {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Consistent spacing for all fields */
    .pulstarleads-horizontal-field,
    .pulstarleads-horizontal-field-full {
        display: block !important;
        width: 100% !important;
        margin-bottom: var(--pslb-field-gap, 25px) !important;
        padding: 0 !important;
        flex: none !important;
    }
    
    /* Remove extra margin from last field in first row */
    .pulstarleads-horizontal-row:first-child .pulstarleads-horizontal-field:last-child {
        margin-bottom: var(--pslb-field-gap, 25px) !important;
    }
    
    /* Phone field gets same spacing */
    .pulstarleads-horizontal-field-full {
        margin-bottom: var(--pslb-field-gap, 30px) !important;
    }

    /* A checkbox field on a phone: the rule above would give it the field gap below, and
       pulstarleads.css's checkbox margin would still add its own on top. Both halves read
       the checkbox gap here instead, falling back to exactly those two values. */
    .pulstarleads-horizontal-field.pulstarleads-checkbox-group {
        margin-top: var(--pslb-checkbox-gap, 20px) !important;
        margin-bottom: var(--pslb-checkbox-gap, 25px) !important;
    }

    .pulstarleads-horizontal-field-full.pulstarleads-checkbox-group {
        margin-bottom: var(--pslb-checkbox-gap, 30px) !important;
    }
    
    /* Full width inputs with consistent styling */
    .pulstarleads-horizontal-field input {
        width: 100% !important;
        padding: var(--pslb-input-padding, 14px 16px) !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        height: var(--pslb-input-height, 48px) !important;
        border-radius: 4px !important;
    }
    
    /* Labels with consistent styling */
    .pulstarleads-horizontal-field label {
        display: block !important;
        margin-bottom: var(--pslb-label-gap, 8px) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #333 !important;
    }

    /* ...except a consent label, which is not a field caption above a text box.
       The two rules above are the worst version of the desktop width bug fixed
       further up this file: they carry `!important`, so on a phone an SMS
       consent checkbox took `width: 100%`, `height: 48px` and `padding: 14px
       16px` and rendered as a full-width empty rectangle, while
       `display: block` on its label dropped the flex row that was supposed to
       put the box beside the text. Nothing without `!important` can win against
       that, which is why these exceptions carry it too. Scoped to
       checkbox/radio, where no other rule competes. */
    .pulstarleads-horizontal-field input[type="checkbox"],
    .pulstarleads-horizontal-field input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
    }

    .pulstarleads-horizontal-field .pulstarleads-checkbox-label,
    .pulstarleads-horizontal-field .pulstarleads-radio-label {
        display: flex !important;
        align-items: flex-start !important;
        margin-bottom: 0 !important;
        font-weight: normal !important;
    }
    
    /* Submit button row with proper spacing */
    .pulstarleads-horizontal-submit-row {
        display: block !important;
        width: 100% !important;
        margin-top: var(--pslb-button-gap, 10px) !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    /* Full width button with consistent height */
    .pulstarleads-horizontal-submit-btn {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        height: var(--pslb-button-height, 50px) !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
    }
    
    /* Title and description adjustments */
    .pulstarleads-horizontal-title {
        font-size: 22px;
        margin-bottom: 10px;
        line-height: 1.3;
    }
    
    .pulstarleads-horizontal-description {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .pulstarleads-horizontal-header {
        margin-bottom: 25px;
        text-align: left;
    }
}

/* Very small devices */
@media (max-width: 480px) {
    .pulstarleads-horizontal-form {
        padding: 20px 15px;
    }
    
    .pulstarleads-horizontal-form-transparent {
        padding: 0 !important;
    }
    
    .pulstarleads-horizontal-field {
        margin-bottom: var(--pslb-field-gap, 15px);
    }
    
    .pulstarleads-horizontal-field input {
        padding: var(--pslb-input-padding, 12px);
    }
    
    .pulstarleads-horizontal-submit-btn {
        padding: 14px 20px;
    }
}

/* Extra small devices */
@media (max-width: 320px) {
    .pulstarleads-horizontal-form {
        padding: 15px 10px;
    }
    
    .pulstarleads-horizontal-form-transparent {
        padding: 0 !important;
    }
    
    .pulstarleads-horizontal-title {
        font-size: 18px;
    }
    
    .pulstarleads-horizontal-field label {
        font-size: 13px;
    }
    
    .pulstarleads-horizontal-field input {
        font-size: 14px;
    }
}

/* Loading State */
.pulstarleads-horizontal-form.loading {
    pointer-events: none;
    opacity: 0.7;
}

.pulstarleads-horizontal-form.loading .pulstarleads-horizontal-submit-btn:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

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

/* Validation Styles */
/* :user-invalid, not :invalid (2.2.0): a required field is "invalid" until it is
   filled, so every required field was red before anyone had typed a thing. */
.pulstarleads-horizontal-field input:user-invalid {
    border-color: #e74c3c;
}

.pulstarleads-horizontal-field input:focus:user-invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
}

/* SMS consent checkboxes (1.1.0).
   This stylesheet had NO checkbox rules at all — the horizontal widget rendered no
   checkbox until the two SMS consents were added — so without these the boxes inherit
   `.pulstarleads-horizontal-field input`'s full-width text-input styling and render as a
   stretched, block-level control with the label below it. Mirrors
   `pulstarleads.css`'s `.pulstarleads-checkbox-label` rules for the vertical widget so the
   two forms agree. The `width/flex` reset is the load-bearing part. */
.pulstarleads-checkbox-group .pulstarleads-checkbox-label,
.pulstarleads-horizontal-field .pulstarleads-checkbox-label {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: normal;
}

/* `width: 18px`, NOT `auto`.
   `auto` was a reset against `.pulstarleads-horizontal-field input`'s
   full-width text-input styling, and it worked — but this selector is
   (0,3,1) and pulstarleads.css's `.pulstarleads-checkbox-group
   input[type="checkbox"]` is (0,2,1), so `auto` beat that rule's `width: 18px`
   while its `height: 18px` survived untouched. Every SMS consent box has been
   rendering about 13x18 — a visibly oblong checkbox — and because both
   stylesheets load on every page (pulstarleads.php enqueues them
   unconditionally) that hit the VERTICAL widget too, not just this one.
   Matching the 18px here is what makes the two sheets agree instead of race. */
.pulstarleads-checkbox-group .pulstarleads-checkbox-label input[type="checkbox"],
.pulstarleads-horizontal-field .pulstarleads-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 2px 8px 0 0;
    padding: 0;
    border: initial;
    box-shadow: none;
}

/* A row holding ONLY checkboxes (the two SMS consents, or a consent box in a row of its
   own) is spaced by the Checkbox Spacing control rather than the field gap, so consents
   can sit close together while text fields keep their room. Unset, it falls back to the
   field gap, which is what these rows have always had. */
.pulstarleads-horizontal-row:has(> .pulstarleads-checkbox-group):not(:has(> :not(.pulstarleads-checkbox-group))) {
    margin-bottom: var(--pslb-checkbox-gap, var(--pslb-field-gap, 20px));
}

/* Elementor Editor Compatibility */
.elementor-editor-active .pulstarleads-horizontal-form {
    min-height: 250px;
}