/* =====================================================================
   LeadX Forms — Embed CSS
   Default styles for all standalone form pages:
     - /form/view/{key}        (form-view.blade.php)
     - /form/embed/{key}       (form-embed.blade.php)
     - /form/template/preview  (form-template-preview.blade.php)

   Custom CSS written by the customer in the CSS editor is injected
   via a separate <style> block after this file and overrides these
   defaults.
   ===================================================================== */

/* -----------------------------------------------------------------
   Utilities
   ----------------------------------------------------------------- */

.d-none { display: none; }

.text-red { color: red; }

.form-err {
    color: #B94A48;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    margin: 3px 0;
}

/* Honeypot — invisible to real users */
.request-checker {
    position: absolute;
    visibility: hidden;
    font-size: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* -----------------------------------------------------------------
   Submit button loader
   ----------------------------------------------------------------- */

.lxform-submit-btn {
    position: relative;
    overflow: hidden;
}

.lxform-loader-box {
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.lxform-loader-icon,
.lxform-loader-icon:after {
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.lxform-loader-icon {
    position: relative;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-left-color: #ffffff;
    animation: lxform-load 1.1s infinite linear;
}

@keyframes lxform-load {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------
   Status messages
   ----------------------------------------------------------------- */

.lxf-message {
    background-color: #f1f1f1;
    border-left: 5px solid #dddddd;
    padding: 15px;
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    margin: 20px 0;
}

.lxf-message.lxf-message-error   { border-color: #e6375b; background-color: rgb(230 55 91 / 10%); }
.lxf-message.lxf-message-success { border-color: #00c6c1; background-color: rgb(0 198 193 / 10%); }
.lxf-message.lxf-message-warning { border-color: #ff927e; background-color: rgb(255 146 126 / 10%); }
.lxf-message.lxf-message-info    { border-color: #00afff; background-color: rgb(0 175 255 / 10%); }

/* Embed page error */
.lxf-embed-error {
    background-color: rgb(230 55 91 / 10%);
    border-left: 5px solid #e6375b;
    padding: 15px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin: 10px;
}

/* -----------------------------------------------------------------
   Reset
   ----------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
}

/* -----------------------------------------------------------------
   Field wrapper
   ----------------------------------------------------------------- */

.lxform-field-warp {
    display: block;
    margin-bottom: 16px;
}

.lxform-hidden-wrap {
    display: none !important;
    margin: 0 !important;
}

/* -----------------------------------------------------------------
   Labels
   ----------------------------------------------------------------- */

.lxform-field-warp > label:first-child,
.lxform-checkbox-label,
.lxform-radio-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
}

/* -----------------------------------------------------------------
   Text inputs / select / textarea / date / number / range / file
   ----------------------------------------------------------------- */

.lxform-field {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

.lxform-field:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Checkbox / radio inputs must not inherit the text-input styles */
.lxform-field[type=checkbox],
.lxform-field[type=radio] {
    display: inline-block;
    flex-shrink: 0;
    width: auto;
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    outline: revert;
}

.lxform-select {
    appearance: auto;
    cursor: pointer;
}

textarea.lxform-field {
    resize: vertical;
    min-height: 100px;
}

.lxform-file-wrap .lxform-field {
    padding: 6px 10px;
}

.lxform-recaptcha-wrap {
    display: block;
    margin-bottom: 16px;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------------
   Submit button
   ----------------------------------------------------------------- */

.lxform-submit-btn {
    background: #111827;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 10px 28px;
    font-size: 14px;
    font-family: inherit;
    border-radius: 6px;
    transition: background 0.15s;
}

.lxform-submit-btn:hover {
    background: #374151;
}

/* -----------------------------------------------------------------
   Checkbox list / Radio list
   ----------------------------------------------------------------- */

.lxform-listgroup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
}

.lxform-listitem label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400 !important;
    cursor: pointer;
    margin-bottom: 0 !important;
    color: #374151;
}

/* Single checkbox — keep input and label text on the same line */
.lxform-checkbox-wrap label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* -----------------------------------------------------------------
   Multi-column layout helpers  (form-row / form-column-*)
   ----------------------------------------------------------------- */

.form-group-wrap {
    width: 100%;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.form-column-1,
.form-column-2,
.form-column-3,
.form-column-4 {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 0;
}

.form-column-1 { width: 100%; }
.form-column-2 { width: 50%; }
.form-column-3 { width: 33.3333%; }
.form-column-4 { width: 25%; }

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .lxform-field-warp {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

@media (max-width: 560px) {
    .form-column-2,
    .form-column-3,
    .form-column-4 {
        width: 100%;
    }
}