/* okitoki-v4 — modal dialog (native <dialog>), used by the site-wide lead form. */

.v-modal {
    width: min(560px, calc(100vw - 2 * var(--v-space)));
    max-height: calc(100dvh - 2 * var(--v-space));
    padding: 0;
    border: 0;
    border-radius: var(--v-radius-lg);
    background: rgb(var(--v-color-white));
    box-shadow: 0 20px 60px rgba(var(--v-color-black), .25);
    color: rgb(var(--v-color-text));
}
.v-modal::backdrop {
    background: rgba(var(--v-color-text), .55);
}
.v-modal[open] {
    animation: v-modal-in var(--v-duration-long) var(--v-timing);
}
@keyframes v-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.v-modal__box {
    position: relative;
    padding: var(--v-space-xl) var(--v-space-lg) var(--v-space-lg);
}
.v-modal__close {
    position: absolute;
    top: var(--v-space-sm);
    right: var(--v-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgb(var(--v-color-text-secondary));
}
.v-modal__close:hover { background: rgb(var(--v-color-surface-contrast)); color: rgb(var(--v-color-text)); }
.v-modal__close .v-icon { width: 22px; height: 22px; }
.v-modal__title { margin-bottom: var(--v-space-md); padding-right: var(--v-space-xl); }
.v-modal__note { margin-top: var(--v-space-md); color: rgb(var(--v-color-text-secondary)); font-size: var(--v-font-size-sm); }
.v-modal__note:empty { display: none; }
html.v-modal-open { overflow: hidden; }