/**
 * Fichier  : /features/quote/assets/css/form.css
 * Fonction : formulaire de demande de devis
 */


/* ==================================================
   FORM
================================================== */

.quote-form {
    position: relative;
    z-index: 2;
}

.quote-form {
    box-sizing: border-box;
    padding: 0 clamp(2em, 6vw, 5em) clamp(4em, 7vw, 6em);
}


/* ==================================================
   GROUP
================================================== */

.quote-form__group {
    margin: 0;
    padding: clamp(3.5em, 6vw, 5.5em) 0;
}

.quote-form__group {
    border: 0;
    border-bottom: 1px solid var(--color-border);
}


/* ==================================================
   GROUP HEADING
================================================== */

.quote-form__group-heading {
    margin-bottom: clamp(2.5em, 4vw, 4em);
}

.quote-form__group-heading {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 1.5em;
}

.quote-form__group-heading > span {
    font-family: 'bold-font';
    font-size: 8px;
    color: var(--color-primary);
}

.quote-form__group-heading strong {
    display: block;
}

.quote-form__group-heading strong {
    font-family: 'bold-font';
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-white);
}

.quote-form__group-heading p {
    margin: .8em 0 0;
}

.quote-form__group-heading p {
    font-family: 'content-font';
    font-size: 12px;
    color: var(--color-placeholder);
}


/* ==================================================
   FIELD
================================================== */

.quote-form__field {
    min-width: 0;
}


/* ==================================================
   SEQUENTIAL FIELDS
================================================== */

.quote-form__group > .quote-form__field + .quote-form__field {
    margin-top: 2.5em;
}


/* ==================================================
   FIELD AFTER GRID
================================================== */

.quote-form__grid + .quote-form__field {
    margin-top: 2.5em;
}


/* ==================================================
   LABEL
================================================== */

.quote-form__label {
    display: block;
}

.quote-form__label {
    margin-bottom: 1em;
}

.quote-form__label {
    font-family: 'bold-font';
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text);
}


/* ==================================================
   HELP
================================================== */

.quote-form__help {
    margin: -.4em 0 1.4em;
}

.quote-form__help {
    font-family: 'content-font';
    font-size: 10px;
    color: var(--color-placeholder);
}


/* ==================================================
   FIELDS
================================================== */

.quote-form input[type=text],
.quote-form input[type=email],
.quote-form input[type=tel],
.quote-form input[type=url],
.quote-form input[type=date],
.quote-form textarea,
.quote-form select {
    width: 100%;
}

.quote-form input[type=text],
.quote-form input[type=email],
.quote-form input[type=tel],
.quote-form input[type=url],
.quote-form input[type=date],
.quote-form textarea,
.quote-form select {
    box-sizing: border-box;
    padding: 1.3em 1.4em;
}

.quote-form input[type=text],
.quote-form input[type=email],
.quote-form input[type=tel],
.quote-form input[type=url],
.quote-form input[type=date],
.quote-form textarea,
.quote-form select {
    appearance: none;
    outline: none;
}

.quote-form input[type=text],
.quote-form input[type=email],
.quote-form input[type=tel],
.quote-form input[type=url],
.quote-form input[type=date],
.quote-form textarea,
.quote-form select {
    background: var(--glass-background-soft);
    border: 1px solid var(--color-border);
    border-radius: 0;
}

.quote-form input[type=text],
.quote-form input[type=email],
.quote-form input[type=tel],
.quote-form input[type=url],
.quote-form input[type=date],
.quote-form textarea,
.quote-form select {
    font-family: 'content-font';
    font-size: 13px;
    color: var(--color-white);
}

.quote-form input[type=text],
.quote-form input[type=email],
.quote-form input[type=tel],
.quote-form input[type=url],
.quote-form input[type=date],
.quote-form textarea,
.quote-form select {
    transition:
        background var(--transition-state),
        border-color var(--transition-state),
        box-shadow var(--transition-state);
}


/* ==================================================
   PLACEHOLDER
================================================== */

.quote-form input::placeholder,
.quote-form textarea::placeholder {
    color: var(--color-placeholder);
}


/* ==================================================
   FIELD HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .quote-form input[type=text]:hover,
    .quote-form input[type=email]:hover,
    .quote-form input[type=tel]:hover,
    .quote-form input[type=url]:hover,
    .quote-form input[type=date]:hover,
    .quote-form textarea:hover,
    .quote-form select:hover {
        border-color: var(--color-border-primary);
    }

}


/* ==================================================
   FIELD FOCUS
================================================== */

.quote-form input[type=text]:focus,
.quote-form input[type=email]:focus,
.quote-form input[type=tel]:focus,
.quote-form input[type=url]:focus,
.quote-form input[type=date]:focus,
.quote-form textarea:focus,
.quote-form select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}


/* ==================================================
   TEXTAREA
================================================== */

.quote-form textarea {
    min-height: 150px;
}

.quote-form textarea {
    resize: vertical;
}


/* ==================================================
   SELECT
================================================== */

.quote-form__select {
    position: relative;
}


/* ==================================================
   SELECT ARROW
================================================== */

.quote-form__select::after {
    content: "↓";
}

.quote-form__select::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
}

.quote-form__select::after {
    pointer-events: none;
}

.quote-form__select::after {
    color: var(--color-primary);
}

.quote-form__select::after {
    transform: translateY(-50%);
}

.quote-form__select::after {
    transition:
        transform var(--transition-state),
        color var(--transition-state);
}

/* ==================================================
   SELECT
================================================== */

.quote-form__select {
    position: relative;
}


/* ==================================================
   SELECT OPTIONS
================================================== */

.quote-form select {
    color-scheme: dark;
}

.quote-form select option {
    background-color: #111111;
    color: var(--color-white);
}

.quote-form select option:checked {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.quote-form select option:disabled {
    color: var(--color-placeholder);
}


/* ==================================================
   SELECT HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .quote-form__select:hover::after {
        color: var(--color-primary-light);
    }

    .quote-form__select:hover::after {
        transform:
            translateY(-50%)
            translateY(2px);
    }

    .quote-form select:hover {
        border-color: var(--color-border-primary);
    }

}


/* ==================================================
   SELECT FOCUS
================================================== */

.quote-form__select:focus-within::after {
    color: var(--color-primary-light);
}

.quote-form__select:focus-within::after {
    transform:
        translateY(-50%)
        translateY(2px);
}

.quote-form select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}


/* ==================================================
   GRIDS
================================================== */

.quote-form__grid,
.quote-form__expertises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-form__expertises {
    gap: 1em;
}

.quote-form__grid {
    column-gap: 2.5em;
    row-gap: 2.5em;
}


/* ==================================================
   GRID FIELD
================================================== */

.quote-form__grid > .quote-form__field {
    min-width: 0;
    margin-top: 0;
}


/* ==================================================
   GRID LABEL
================================================== */

.quote-form__grid .quote-form__label {
    min-height: 1.4em;
}


/* ==================================================
   CHOICES
================================================== */

.quote-form__choices {
    display: flex;
    flex-wrap: wrap;
    gap: .7em;
}

.quote-choice,
.quote-expertise {
    position: relative;
}

.quote-choice,
.quote-expertise {
    cursor: pointer;
}

.quote-choice input,
.quote-expertise > input {
    position: absolute;
}

.quote-choice input,
.quote-expertise > input {
    opacity: 0;
    pointer-events: none;
}


/* ==================================================
   CHOICE
================================================== */

.quote-choice > span {
    min-height: 42px;
}

.quote-choice > span {
    box-sizing: border-box;
    padding: .9em 1.2em;
}

.quote-choice > span {
    display: inline-flex;
    align-items: center;
}

.quote-choice > span {
    background: var(--glass-background-soft);
    border: 1px solid var(--color-border);
}

.quote-choice > span {
    font-family: 'bold-font';
    font-size: 8px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.quote-choice > span {
    transition:
        transform var(--transition-state),
        background var(--transition-state),
        border-color var(--transition-state),
        color var(--transition-state),
        box-shadow var(--transition-state);
}


/* ==================================================
   CHOICE CHECKED
================================================== */

.quote-choice input:checked + span {
    background: var(--gradient-hover);
    border-color: var(--color-primary);
}

.quote-choice input:checked + span {
    color: var(--color-white);
}


/* ==================================================
   CHOICE HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .quote-choice:hover > span {
        transform: translateY(-2px);
    }

    .quote-choice:hover > span {
        background: var(--gradient-hover);
        border-color: var(--color-border-primary);
    }

    .quote-choice:hover > span {
        color: var(--color-white);
    }

    .quote-choice:hover input:checked + span {
        border-color: var(--color-primary-light);
    }

}


/* ==================================================
   EXPERTISE
================================================== */

.quote-expertise__content {
    position: relative;
}

.quote-expertise__content {
    min-height: 150px;
}

.quote-expertise__content {
    box-sizing: border-box;
    padding: 1.8em;
}

.quote-expertise__content {
    display: flex;
    flex-direction: column;
}

.quote-expertise__content {
    background: var(--glass-background-soft);
    border: 1px solid var(--color-border);
}

.quote-expertise__content {
    transition:
        transform var(--transition-card),
        background var(--transition-state),
        border-color var(--transition-state),
        box-shadow var(--transition-card);
}

.quote-expertise__content > i {
    margin-left: auto;
}

.quote-expertise__content > i {
    font-style: normal;
    color: var(--color-text-muted);
}

.quote-expertise__content > i {
    transition:
        transform var(--transition-state),
        color var(--transition-state);
}

.quote-expertise__content > strong {
    margin-top: auto;
}

.quote-expertise__content > strong {
    font-family: 'bold-font';
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-white);
}

.quote-expertise__content > small {
    margin-top: .8em;
}

.quote-expertise__content > small {
    font-family: 'content-font';
    font-size: 10px;
    line-height: 1.5;
    color: var(--color-placeholder);
}


/* ==================================================
   EXPERTISE CHECKED
================================================== */

.quote-expertise > input:checked + .quote-expertise__content {
    background: var(--gradient-hover);
    border-color: var(--color-primary);
}


/* ==================================================
   EXPERTISE HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .quote-expertise:hover .quote-expertise__content {
        transform: translateY(-3px);
    }

    .quote-expertise:hover .quote-expertise__content {
        background: var(--gradient-hover);
        border-color: var(--color-border-primary);
        box-shadow: var(--shadow-card);
    }

    .quote-expertise:hover .quote-expertise__content > i {
        transform: translateX(5px);
    }

    .quote-expertise:hover .quote-expertise__content > i {
        color: var(--color-primary-light);
    }

    .quote-expertise:hover > input:checked + .quote-expertise__content {
        border-color: var(--color-primary-light);
        box-shadow: var(--shadow-card-hover);
    }

}


/* ==================================================
   CONDITIONAL
================================================== */

.quote-form__conditional {
    display: none;
}

.quote-form__conditional {
    margin-top: 2.5em;
}

.quote-form__profile:has(input[name=industry_actor][value=yes]:checked) .quote-form__conditional--actor,
.quote-form__profile:has(input[name=industry_actor][value=no]:checked) .quote-form__conditional--new,
.quote-form__budget:has(input[name=has_budget][value=yes]:checked) .quote-form__conditional--budget {
    display: block;
}


/* ==================================================
   REQUIRED ERROR
================================================== */

.quote-form__error {
    margin: .8em 0 0;
}

.quote-form__error {
    font-family: 'content-font';
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-primary);
}

.quote-form__field.has-error input[type=text],
.quote-form__field.has-error input[type=email],
.quote-form__field.has-error input[type=tel],
.quote-form__field.has-error input[type=url],
.quote-form__field.has-error input[type=date],
.quote-form__field.has-error textarea,
.quote-form__field.has-error select {
    border-color: var(--color-primary);
}

.quote-form__field.has-error .quote-choice > span,
.quote-form__field.has-error .quote-expertise__content {
    border-color: var(--color-primary);
}


/* ==================================================
   FOOTER
================================================== */

.quote-form__footer {
    padding-top: clamp(3em, 5vw, 4.5em);
}

.quote-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3em;
}


/* ==================================================
   TECHNICAL ERROR
================================================== */

.quote-form__technical-error {
    flex: 0 0 100%;
}

.quote-form__technical-error {
    box-sizing: border-box;
    padding: 1.2em 1.4em;
}

.quote-form__technical-error {
    background: var(--glass-background-soft);
    border: 1px solid var(--color-primary);
}

.quote-form__technical-error {
    font-family: 'content-font';
    font-size: 11px;
    line-height: 1.6;
    color: var(--color-text);
}

.quote-form__technical-error[hidden] {
    display: none;
}


/* ==================================================
   PRIVACY
================================================== */

.quote-form__privacy {
    max-width: 340px;
}

.quote-form__privacy {
    font-family: 'content-font';
    font-size: 10px;
    color: var(--color-placeholder);
}


/* ==================================================
   SUBMIT
================================================== */

.quote-form__submit {
    min-height: var(--button-height);
}

.quote-form__submit {
    padding: 0 22px;
}

.quote-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 1.5em;
}

.quote-form__submit {
    background: var(--gradient-primary);
    border: 0;
    border-radius: var(--button-radius);
}

.quote-form__submit {
    font-family: 'bold-font';
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-white);
}

.quote-form__submit {
    cursor: pointer;
}

.quote-form__submit {
    transition:
        transform var(--transition-soft),
        box-shadow var(--transition-soft),
        opacity var(--transition-soft);
}

.quote-form__submit i {
    font-size: 18px;
    font-style: normal;
}

.quote-form__submit i {
    transition: transform var(--transition-soft);
}


/* ==================================================
   SUBMIT LOADING
================================================== */

.quote-form__submit:disabled {
    cursor: wait;
}

.quote-form__submit.is-loading {
    opacity: .7;
    pointer-events: none;
}

.quote-form__submit.is-loading i {
    animation:
        quote-submit-loading
        .8s
        ease-in-out
        infinite
        alternate;
}

@keyframes quote-submit-loading {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(5px);
    }

}


/* ==================================================
   SUBMIT HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .quote-form__submit:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-primary-hover);
    }

    .quote-form__submit:not(:disabled):hover i {
        transform: translateX(5px);
    }

}


/* ==================================================
   SUCCESS
================================================== */

.quote-success {
    position: relative;
    z-index: 2;
}

.quote-success {
    min-height: 55vh;
}

.quote-success {
    box-sizing: border-box;
    padding:
        clamp(4em, 8vw, 7em)
        clamp(2em, 6vw, 5em);
}

.quote-success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


/* ==================================================
   SUCCESS ICON
================================================== */

.quote-success__icon {
    width: 48px;
    height: 48px;
}

.quote-success__icon {
    margin-bottom: 2.5em;
}

.quote-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quote-success__icon {
    background: var(--gradient-primary);
    border-radius: 50%;
}

.quote-success__icon {
    font-family: 'bold-font';
    font-size: 18px;
    color: var(--color-white);
}


/* ==================================================
   SUCCESS EYEBROW
================================================== */

.quote-success__eyebrow {
    margin-bottom: 1.5em;
}

.quote-success__eyebrow {
    font-family: 'bold-font';
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--color-primary);
}


/* ==================================================
   SUCCESS TITLE
================================================== */

.quote-success h3 {
    max-width: 600px;
    margin: 0;
}

.quote-success h3 {
    font-family: 'bold-font';
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 400;
    line-height: .95;
    text-transform: uppercase;
    color: var(--color-white);
}


/* ==================================================
   SUCCESS TEXT
================================================== */

.quote-success p {
    max-width: 540px;
    margin: 2em 0 0;
}

.quote-success p {
    font-family: 'content-font';
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-muted);
}


/* ==================================================
   SUCCESS CLOSE
================================================== */

.quote-success__close {
    margin-top: 3em;
}

.quote-success__close {
    display: inline-flex;
    align-items: center;
    gap: 1.2em;
}

.quote-success__close {
    padding: 0;
}

.quote-success__close {
    appearance: none;
    background: none;
    border: 0;
}

.quote-success__close {
    cursor: pointer;
}

.quote-success__close {
    font-family: 'bold-font';
    font-size: 9px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-white);
}

.quote-success__close i {
    font-size: 18px;
    font-style: normal;
}

.quote-success__close i {
    transition: transform var(--transition-soft);
}


/* ==================================================
   SUCCESS CLOSE HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .quote-success__close:hover i {
        transform: translateX(5px);
    }

}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 700px) {

    .quote-form {
        padding: 0 1.4em 4em;
    }


    /* ==================================================
       GROUP
    ================================================== */

    .quote-form__group {
        padding: 3.5em 0;
    }


    /* ==================================================
       HEADING
    ================================================== */

    .quote-form__group-heading {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 1em;
    }


    /* ==================================================
       GRIDS
    ================================================== */

    .quote-form__grid,
    .quote-form__expertises {
        grid-template-columns: 1fr;
    }

    .quote-form__grid {
        gap: 2em;
    }


    /* ==================================================
       GRID FIELD
    ================================================== */

    .quote-form__grid > .quote-form__field {
        margin-top: 0;
    }


    /* ==================================================
       GRID LABEL
    ================================================== */

    .quote-form__grid .quote-form__label {
        min-height: 0;
    }


    /* ==================================================
       FIELD AFTER GRID
    ================================================== */

    .quote-form__grid + .quote-form__field {
        margin-top: 2.5em;
    }


    /* ==================================================
       FOOTER
    ================================================== */

    .quote-form__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 2em;
    }


    /* ==================================================
       TECHNICAL ERROR
    ================================================== */

    .quote-form__technical-error {
        flex-basis: auto;
    }


    /* ==================================================
       SUBMIT
    ================================================== */

    .quote-form__submit {
        width: 100%;
    }

    .quote-form__submit {
        justify-content: center;
    }


    /* ==================================================
       SUCCESS
    ================================================== */

    .quote-success {
        min-height: 50vh;
        padding: 4em 1.4em;
    }

}