/*
 * The request modal — see framework/order-request-ui.php.
 *
 * Written with logical properties (`inset-inline`, `margin-inline`,
 * `text-align: start`) rather than left/right, so Hebrew needs no second
 * stylesheet: the theme's `style-rtl.css` is a vendor file this module does not
 * add to.
 *
 * The honeypot is hidden from sight and from screen readers both. `display:none`
 * alone is what a bot looks for, so it is moved off-screen instead, and the
 * field carries `aria-hidden` and `tabindex="-1"` in the markup — a sighted
 * customer never sees it and a screen reader never reaches it.
 */

.kute-order-request {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.kute-order-request[hidden] {
    display: none;
}

.kute-order-request__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.kute-order-request__dialog {
    position: relative;
    background: #fff;
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    text-align: start;
}

/*
 * `color` is set, not left to inherit: the theme styles bare `button` white on
 * a dark fill for its own buttons, and `background: none` alone left a white
 * «×» on the dialog's white — a close control that was there, focusable and
 * clickable, and invisible.
 */
.kute-order-request__close {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 10px;
    background: none;
    border: 0;
    color: #222;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.kute-order-request__close:hover,
.kute-order-request__close:focus {
    background: none;
    color: #000;
}

.kute-order-request__title {
    margin: 0 0 14px;
    font-size: 20px;
}

.kute-order-request__product {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.kute-order-request__image {
    width: 64px;
    height: auto;
    flex: 0 0 auto;
}

.kute-order-request__summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kute-order-request__name {
    font-weight: 600;
}

.kute-order-request__variation,
.kute-order-request__optional {
    color: #767676;
    font-size: 13px;
}

.kute-order-request__intro {
    margin: 0 0 16px;
    font-size: 14px;
}

.kute-order-request__field {
    margin: 0 0 12px;
}

.kute-order-request__field label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.kute-order-request__field input,
.kute-order-request__field textarea {
    width: 100%;
}

/*
 * `rows="3"` is not enough on its own: the theme sets `textarea { height: 300px }`
 * site-wide for its contact forms, and a 300px comment box pushed the submit
 * button off the bottom of the dialog — the customer saw a form with no way to
 * send it until they scrolled. `height: auto` gives the attribute back its say.
 */
.kute-order-request__field textarea {
    height: auto;
    min-height: 80px;
}

.kute-order-request__hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kute-order-request__error {
    color: #b00020;
    font-size: 14px;
    margin: 0 0 12px;
}

.kute-order-request__submit {
    width: 100%;
}

.kute-order-request__thanks {
    font-size: 15px;
    line-height: 1.5;
}

body.kute-order-request-open {
    overflow: hidden;
}