/*** lead_form_styles.css ******************************************
 * Lead form styles (clean / no duplicates)
 * Blocks order:
 * 1) Wrapper + Title
 * 2) Common form controls
 * 3) Contact block (4 fields in one row)
 * 4) Items rows (catalog picker)
 * 5) Actions (+ add row)
 * 6) Totals
 * 7) Bottom row (agree + submit in one line, no stretching)
 * 8) Responsive
 ******************************************************************/

/* ================================================================
   1) Wrapper + Title
   ================================================================ */
.seo-lead--leadform {
    margin-top: 12px;
}

.leadform__title{
    margin: 0 0 10px 0;
    text-align: center;
    color: rgb(4, 48, 63);
    font-size: 18px;
}

/* ================================================================
   1.1) Wrapper background (left semi-circle accent)
   ================================================================ */
.seo-lead--leadform{
    position: relative;
    overflow: hidden;                 /* crop the semicircle */
    border-radius: 16px;
}

/* right semi-circle */
.seo-lead--leadform::before{
    content: "";
    position: absolute;
    right: -140px;                    /* push it outside on the right */
    top: 50%;
    transform: translateY(-50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 40% 50%,             /* flipped gradient center */
        rgba(13, 82, 105, 0.18) 0%,
        rgba(13, 82, 105, 0.10) 35%,
        rgba(13, 82, 105, 0.00) 70%
    );
    pointer-events: none;
}

/* keep form content above the background */
.seo-lead--leadform > *{
    position: relative;
    z-index: 1;
}

/* Optional: reduce effect on small screens */
@media (max-width: 560px){
    .seo-lead--leadform::before{
        right: -180px;
        width: 300px;
        height: 300px;
        opacity: 0.75;
    }
}
/* ================================================================
   2) Common form controls
   ================================================================ */
.leadform__label{
    display: block;
    margin-bottom: 6px;
    color: rgba(19, 19, 20, 0.75);
}

.leadform__select,
.leadform__qty{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid rgba(13, 82, 105, 0.22);
    background: #fff;
    outline: none;
}

/* input padding used in contact block (replaces inline styles) */
.leadform__input{
    padding: 10px 12px;
}

.leadform__policy-link{
    color: rgb(13, 82, 105);
    text-decoration: underline;
}

/* ================================================================
   3) Contact block (4 fields in one row)
   - 1) method = width by content
   - 2-4) equal width
   ================================================================ */
.leadform__contact{
    margin-bottom: 12px;
}

.leadform__contact-row{
    display: grid;
    gap: 12px;
    align-items: end;

    /* 1st column = content width, next 3 are equal */
    grid-template-columns: max-content 1fr 1fr 1fr;

    /* prevents overflow of long content inside fields */
    min-width: 0;
}

/* 1) method field width = content */
.leadform__field--method{
    width: max-content;
}

/* method select should NOT be 100% */
.leadform__select--method{
    width: auto;
    min-width: 180px;
    max-width: 260px;
    padding-right: 34px;
}

/* 2-4 fields should be equal and shrink properly */
.leadform__field--equal{
    min-width: 0;
}

/* ================================================================
   4) Items rows (catalog picker)
   ================================================================ */
.leadform__rows{
    display: grid;
    gap: 10px;
}

.leadform__row{
    display: grid;
    grid-template-columns: 1fr 110px 150px 44px;
    gap: 10px;
    align-items: end;

    border: 1px solid rgba(13, 82, 105, 0.14);
    border-radius: 12px;
    padding: 10px 10px;
}

.leadform__sum{
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px dashed rgba(13, 82, 105, 0.22);
    text-align: center;
    font-weight: 700;
    color: #0d5269;
    background: rgba(255,255,255,0.6);
}

.leadform__remove{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(13, 82, 105, 0.22);
    background: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ================================================================
   5) Actions (+ add row)
   ================================================================ */
.leadform__actions{
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

/* ================================================================
   6) Totals
   ================================================================ */
.leadform__total{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(13, 82, 105, 0.12);
}

.leadform__total-line{
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: center;
    font-weight: 700;
    color: #0d5269;
}

.leadform__total-hint{
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: rgba(19, 19, 20, 0.75);
}

/* ================================================================
   7) Bottom row (agree + submit in one line, no stretching)
   ================================================================ */
.leadform__bottom{
    margin-top: 12px;
    /* keep 1 row: left content + right button */
    display: flex;
    align-items: center;
    gap: 14px;
}

/* IMPORTANT:
   label by default can stretch in flex/grid layouts.
   Make it size-to-content + prevent taking the whole line.
*/
/* Agree block (checkbox + text) — nicer look */
.leadform__agree{
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 13px;
    line-height: 1.25;
    color: rgba(19, 19, 20, 0.88);

    /* compact width (do not stretch) */
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;

    /* "pill" container */
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(13, 82, 105, 0.14);
    background: rgba(13, 82, 105, 0.04);
}

/* Hover = slightly clearer border/background */
.leadform__agree:hover{
    border-color: rgba(13, 82, 105, 0.22);
    background: rgba(13, 82, 105, 0.06);
}

/* Keep text nicely readable */
.leadform__agree span{
    display: inline;
}

/* Checkbox — modern and aligned */
.leadform__agree input{
    margin: 0;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;

    accent-color: rgb(13, 82, 105); /* modern browsers */
    cursor: pointer;
}

/* Accessibility: focus ring when tabbing */
.leadform__agree input:focus-visible{
    outline: 3px solid rgba(13, 82, 105, 0.25);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Optional: make whole label clickable feel */
.leadform__agree{
    cursor: pointer;
}


/* button wrapper: do not stretch */
.leadform__submit{
    margin: 0;
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}
/* ================================================================
   8) Responsive
   ================================================================ */

/* Contact block: stack to 2x2, then 1x4 */
@media (max-width: 980px){
    .leadform__contact-row{
        grid-template-columns: 1fr 1fr;
    }

    .leadform__field--method{
        width: auto;
    }

    .leadform__select--method{
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 560px){
    .leadform__contact-row{
        grid-template-columns: 1fr;
    }
}

/* Items rows: compact layout */
@media (max-width: 768px){
    .leadform__row{
        grid-template-columns: 1fr 110px;
        grid-template-areas:
            "item item"
            "qty sum"
            "rm rm";
    }

    .leadform__field--remove{
        display: flex;
        justify-content: center;
    }

    .leadform__remove{
        width: 80px;
    }

    /* Bottom row: stack agree + button */
    .leadform__bottom{
        flex-direction: column;
        align-items: center;
    }

    .leadform__agree{
        /*width: max-content;     /* keep it compact */
        width: 96%;     
        text-align: left;
    }

    .leadform__submit{
        width: 100%;
        justify-content: center;
    }

}