/* ExtraBook interaction language. Shared by the website, owner app and booking. */
:root {
    --experience-ease: cubic-bezier(.22, 1, .36, 1);
    --experience-fast: 150ms;
    --experience-normal: 280ms;
    --experience-surface: #fff;
    --experience-border: #e8e1f0;
    --experience-shadow: 0 10px 36px rgb(45 24 80 / .055);
    --experience-deep: #25163f;
}
.experience-site :is(button,a,input,select,textarea),
.experience-app :is(button,a,input,select,textarea) { touch-action: manipulation; }
.experience-app :is(.primary-button,.secondary-button,.icon-button),
.experience-site :is(.button,.outline-button,.stage-submit) {
    transition: background-color var(--experience-fast), border-color var(--experience-fast), box-shadow var(--experience-normal), filter var(--experience-fast);
}
.experience-app :is(button,a):active,
.experience-site :is(button,a):active { filter: brightness(.94); }
.experience-app button[aria-busy="true"] { cursor: wait; }
.experience-app button[aria-busy="true"]::after {
    content: ''; display: inline-block; width: 14px; height: 14px; margin-inline-start: 9px;
    border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
    animation: experience-spin 700ms linear infinite; vertical-align: middle;
}
.experience-app :is(input,select,textarea):focus {
    border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgb(91 53 181 / .08);
}
.experience-app .panel { box-shadow: var(--experience-shadow); }
.experience-app dialog { border-color: var(--experience-border); box-shadow: 0 32px 120px rgb(31 17 56 / .24); }
.experience-app dialog::backdrop { background: rgb(25 16 40 / .4); backdrop-filter: blur(6px); }
.experience-app :is(.form-error,.save-result):not(:empty) { padding: 12px 15px; border-radius: 12px; }
.experience-app .form-error:not(:empty) { background: #fff0ef; border-inline-start: 3px solid #a93543; }
.experience-app .save-result:not(:empty) { background: #f0ebf8; color: #4b3273; border-inline-start: 3px solid #8b6bc2; }
.experience-app .toast { border: 1px solid rgb(255 255 255 / .15); box-shadow: 0 12px 45px rgb(31 17 56 / .2); }
.experience-app .customer-service { transition: border-color var(--experience-fast), box-shadow var(--experience-normal), background-color var(--experience-fast); }
.experience-app .customer-service:has(input:checked) { box-shadow: 0 0 0 3px rgb(91 53 181 / .08); }
.experience-app .contact-navigation { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.experience-app .contact-navigation a { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid var(--brand-border); }
.experience-app #profile-waze-preview { justify-content: flex-start; text-decoration: underline; text-underline-offset: 4px; }
@keyframes experience-spin { to { transform: rotate(360deg); } }
@media(max-width:600px) {
    .experience-app input:not([type=checkbox]):not([type=radio]), .experience-app select, .experience-app textarea { font-size: 16px; }
    .experience-app dialog { max-height: calc(100dvh - 24px); padding: 22px; border-radius: 24px; }
    .experience-app dialog[open] { margin-block: auto 12px; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
    :root { --experience-fast: 0ms; --experience-normal: 0ms; }
    .experience-app *, .experience-site * { scroll-behavior: auto !important; }
    .experience-app button[aria-busy="true"]::after { animation: none; border-style: dotted; }
}
/* Shared screen-reader-only label, also used in the marketing illustration. */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }