/*
 * The card the site's enquiry dialog is drawn in.
 *
 * These rules were the product page's own until the packaging calls to action
 * began opening the same form in place: one dialog card, styled once, and since
 * one form serves the whole site they also carry its field rows and its upload
 * panel. The behaviour that shows and hides it (showModal, the scroll lock,
 * Escape and returning focus to whatever opened it) lives in
 * assets/wp-behaviors/behaviors.js; a trigger carries data-dialog-open.
 */
/* In-page lead dialog. The library behaviour supplies showModal, the scroll
   lock, Escape and focus return, so only the card and its two modes are styled. */
.ub-modal {
    border: 0;
    padding: 0;
    margin: auto;
    width: min(660px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    color: var(--color-dark-cocoa);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.ub-modal::backdrop {
    background: rgba(46, 27, 25, 0.65);
    backdrop-filter: blur(8px);
}
.ub-modal-dialog {
    padding: 22px 26px 0;
    position: relative;
}
/* The dialog's field rows read two to a line, and one to a line on a narrow
   phone, where two columns leave each field too narrow to fill in. */
.ub-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 520px) {
    .ub-modal-row {
        grid-template-columns: 1fr;
    }
}
.ub-modal-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-dark-cocoa);
    margin-bottom: 4px;
}
.ub-modal-field input[type="text"],
.ub-modal-field input[type="email"],
.ub-modal-field input[type="tel"],
.ub-modal-field select,
.ub-modal-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: #ffffff;
    color: var(--color-dark-cocoa);
    outline: none;
}
.ub-modal-field textarea {
    line-height: 1.5;
    resize: vertical;
}
.ub-modal-details {
    margin-bottom: 12px;
}
/* The upload panel: the artwork a buyer sends is what the quotation is drawn
   from, so it is given a box of its own instead of sitting between two fields. */
.ub-modal-upload {
    background: var(--color-bg-cherry-milk);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.ub-modal-upload label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-dark-cocoa);
    margin-bottom: 4px;
}
.ub-modal-upload p {
    font-size: 0.78rem;
    color: var(--color-milk-chocolate);
    margin: 0 0 8px 0;
    line-height: 1.5;
}
.ub-modal-upload input[type="file"] {
    font-size: 0.82rem;
    color: var(--color-mocha-brown);
}
/* Submit and the WhatsApp shortcut share a footer that stays in view while the
   fields scroll, so the fast channel never needs a scroll to be reached. */
.ub-modal .ub-modal-promise {
    margin: 12px auto 0;
    padding: 7px 16px;
    font-size: 0.84rem;
}
.ub-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px -26px 0;
    padding: 12px 26px 16px;
    background: #ffffff;
    border-top: 1px solid var(--color-border-light);
}
.ub-modal-actions .ub-modal-submit {
    flex: 1 1 auto;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
}
.ub-modal-actions .ub-modal-wa {
    flex: 0 0 auto;
    white-space: nowrap;
    transform-origin: 50% 62%;
}
/* The WhatsApp shortcut draws the eye as the card opens, and every 30 s after
   that: the shake is the first 2.4 s of the cycle and the button stands still for
   the rest of it. The animation hangs on the root's own open state, which the
   dialog behaviour sets (data-state), so it starts from zero the moment the card
   is shown instead of at whatever point of a clock it had already reached, and a
   closed dialog holds no running animation at all. Hovering or focusing the
   button stops the cycle, so the lift its own transition draws is never
   overridden by a running animation. */
@keyframes ub-modal-wa-nudge-cycle {
    0%       { transform: rotate(0deg) scale(1);       box-shadow: 0 3px 12px var(--color-cta-shadow); }
    1%       { transform: rotate(-5deg) scale(1.03);   box-shadow: 0 8px 26px rgba(178, 69, 100, 0.55); }
    2.15%    { transform: rotate(4.5deg) scale(1.03);  box-shadow: 0 8px 26px rgba(178, 69, 100, 0.45); }
    3.3%     { transform: rotate(-3.5deg) scale(1.02); box-shadow: 0 7px 24px rgba(178, 69, 100, 0.38); }
    4.45%    { transform: rotate(2.5deg) scale(1.02);  box-shadow: 0 7px 22px rgba(178, 69, 100, 0.32); }
    5.6%     { transform: rotate(-1.5deg) scale(1.01); box-shadow: 0 6px 21px rgba(178, 69, 100, 0.28); }
    6.75%    { transform: rotate(1deg) scale(1.005);   box-shadow: 0 6px 20px rgba(178, 69, 100, 0.26); }
    8%, 100% { transform: rotate(0deg) scale(1);       box-shadow: 0 3px 12px var(--color-cta-shadow); }
}
[data-behavior="dialog"][data-state="open"] .ub-modal-actions .ub-modal-wa {
    animation: ub-modal-wa-nudge-cycle 30s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
[data-behavior="dialog"][data-state="open"] .ub-modal-actions .ub-modal-wa:hover,
[data-behavior="dialog"][data-state="open"] .ub-modal-actions .ub-modal-wa:focus-visible {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-behavior="dialog"][data-state="open"] .ub-modal-actions .ub-modal-wa {
        animation: none;
    }
}
.ub-modal-close {
    position: absolute;
    right: 20px;
    top: 18px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--color-milk-chocolate);
    cursor: pointer;
    transition: color 0.2s;
}
.ub-modal-close:hover {
    color: var(--color-berry-pink);
}
.ub-modal-header {
    margin-bottom: 14px;
}
.ub-modal-header h2 {
    font-size: 1.22rem;
    margin: 2px 0 0 0;
    color: var(--color-dark-cocoa);
}
.ub-modal-header p {
    font-size: 0.88rem;
    color: var(--color-mocha-brown);
    margin: 0;
}
.ub-modal-form input:focus,
.ub-modal-form select:focus,
.ub-modal-form textarea:focus {
    border-color: var(--color-berry-pink) !important;
    box-shadow: 0 0 0 3px rgba(194, 89, 117, 0.15);
}