/* CALLBACK — the "order a call" button sits at the very top of #frame, so it
   touches the fixed header but scrolls away with the page, and the price
   widget it rolls out.
   -------------------------------------------------------------------------- */
#callback {
    position: absolute;
    top: 0;
    right: var(--phone-right);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none; /* the box spans the closed widget too — only its children take clicks */
}

    #callback > * {
        pointer-events: auto;
    }

.callback-head {
    position: relative;
}

.callback-btn {
    border: 0;
    font-family: inherit;
    line-height: 1.4;
}

#callback-accent {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1; /* the widget clips itself into a stacking context — sit over its top edge */
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .2s ease, background .18s;
}

    #callback-accent.open {
        opacity: 1;
    }

    .callback-head:hover #callback-accent {
        background: var(--orange-600);
    }

.callback-widget {
    width: 700px;
    height: 920px;
    max-width: calc(100vw - var(--phone-right) - var(--gutter));
    background: var(--ink);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    /* unrolls like a blind — clipping keeps the content undistorted, which a
       scaleY would not */
    clip-path: inset(0 -80px 100% -80px);
    opacity: 0;
    visibility: hidden;
    transition: clip-path .55s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, visibility 0s linear .55s;
}

    .callback-widget.open {
        clip-path: inset(0 -80px -80px -80px);
        opacity: 1;
        visibility: visible;
        transition: clip-path .55s cubic-bezier(.22, .61, .36, 1), opacity .25s ease, visibility 0s;
    }

.callback-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 56px var(--callback-pad-x) 60px;
}

.callback-title {
    font-size: 36px;
    text-transform: uppercase;
    color: #fff;
}

.callback-lead {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.55;
    color: #d9d9d9;
}

.callback-fields {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 44px;
}

.callback-input {
    width: 100%;
    height: 60px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--r);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
}

    .callback-input::placeholder {
        color: #595959;
        opacity: 1;
    }

    .callback-input.is-required::placeholder {
        color: var(--orange);
    }

    .callback-input:focus {
        outline: 2px solid var(--orange);
        outline-offset: 2px;
    }

    .callback-input.is-invalid {
        outline: 2px solid var(--orange-600);
        outline-offset: 2px;
    }

.callback-done {
    margin-top: 44px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--orange);
}

.callback-error {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--orange-600);
}

    .callback-error a {
        color: inherit;
        text-decoration: underline;
    }

/* Off-screen rather than display:none, which some bots detect and skip filling in. */
.callback-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.callback-submit[disabled] {
    opacity: .6;
    pointer-events: none;
}

.callback-submit-wrap {
    position: relative;
    margin-top: 80px;
}

#callback-submit-accent {
    position: absolute;
    bottom: 100%;
    /* #callback-accent is centred on the callback button, so its right edge sits
       half the button's overhang in from the widget edge; match that, less the
       form padding this tab is positioned inside. */
    right: calc((var(--phone-btn-w) - var(--accent-w)) / 2 - var(--callback-pad-x));
    transform: rotate(180deg);
    transition: background .18s;
}

    .callback-submit-wrap:hover #callback-submit-accent {
        background: var(--orange-600);
    }

.callback-submit {
    justify-content: center;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: 0;
    font-family: inherit;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .04em;
}

.callback-form.sent .callback-fields,
.callback-form.sent .callback-submit-wrap {
    display: none;
}

@media (max-width: 767px) {
    :root {
        --callback-pad-x: 24px;
    }

    .callback-widget {
        height: auto;
    }

    .callback-form {
        padding: 32px var(--callback-pad-x) 36px;
    }

    .callback-title {
        font-size: 28px;
    }

    .callback-fields {
        gap: 20px;
        margin-top: 28px;
    }

    .callback-input {
        padding: 0 20px;
    }

    .callback-submit-wrap {
        margin-top: 32px;
    }

    .callback-submit {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .callback-widget,
    .callback-widget.open,
    #callback-accent,
    #callback-submit-accent {
        transition: none;
    }
}