/* Shared interaction layer; the visual identity and user palettes stay intact. */
:root {
    --ip-focus-color: #647457;
    --ip-focus-halo: rgba(100, 116, 87, .12);
    --ip-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23697168' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ip-select-arrow-size: 18px;
    --ip-select-arrow-inset: 16px;
    --ip-select-text-space: 48px;
}
/* Keep one slim chevron with separate space for the label and the field edge. */
select:not([multiple]):is(:not([size]), [size="0"], [size="1"]),
.choices > .choices__inner {
    background-image: var(--ip-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right var(--ip-select-arrow-inset) center !important;
    background-size: var(--ip-select-arrow-size) var(--ip-select-arrow-size) !important;
    padding-inline-end: var(--ip-select-text-space) !important;
}
select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    text-overflow: ellipsis;
}
select:is([multiple], [size]:not([size="0"], [size="1"])) { background-image: none !important; }
:is(select, .choices > .choices__inner):dir(rtl) {
    background-position: left var(--ip-select-arrow-inset) center !important;
}
.choices > .choices__inner:has(.choices__list--single .choices__button) {
    padding-inline-end: 88px !important;
}
.choices[data-type*="select-one"] .choices__button { margin-inline-end: 40px !important; }
.dark {
    --ip-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23d8dfd2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Keep native checkbox semantics, including mixed/disabled states, with the panel's fine-line identity. */
.fi-body input[type="checkbox"][hidden] { display: none !important; }
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0;
    padding: 0 !important;
    border: 1px solid #8794a4 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    box-shadow: 0 1px 2px rgba(25, 33, 46, .05) !important;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):is(:checked, :indeterminate) {
    border-color: #596b48 !important;
    background-color: #596b48 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.4 8 3 3.1 6.2-6.2' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):enabled:hover {
    border-color: #596b48 !important;
    box-shadow: 0 0 0 3px rgba(100, 116, 87, .09) !important;
}
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):focus-visible {
    outline: 2px solid var(--ip-focus-color) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px var(--ip-focus-halo) !important;
}
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):disabled {
    opacity: 1;
    border-color: #c4ccd6 !important;
    background-color: #eef0f3 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):disabled:is(:checked, :indeterminate) {
    background-color: #7a896b !important;
    border-color: #7a896b !important;
}
.fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):is([aria-invalid="true"], .fi-invalid) {
    border-color: #b64538 !important;
}
.ip-skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 100000;
    padding: 12px 18px; border-radius: 10px; background: #181a17; color: #fff;
    transform: translateY(-180%); text-decoration: none; font: 600 14px/1.5 sans-serif;
}
.ip-skip-link:focus { transform: none; }
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ip-focus-color) !important; outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #fffefb, 0 0 0 5px var(--ip-focus-halo) !important;
}
/* Text controls use one fine edge; composite fields put the halo on their wrapper. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]), textarea, select) {
    transition: border-color .18s ease, box-shadow .18s ease;
}
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]), textarea, select):focus {
    border-color: var(--ip-focus-color) !important;
    outline: 1px solid var(--ip-focus-color) !important; outline-offset: -1px !important;
    box-shadow: 0 0 0 4px var(--ip-focus-halo) !important;
}
:where(input, textarea, select)[aria-invalid="true"]:focus {
    border-color: #b64538 !important; outline-color: #b64538 !important;
    box-shadow: 0 0 0 4px rgba(182, 69, 56, .10) !important;
}
:where(.ip-palette-color > div, .ip-planner-search):focus-within {
    border-color: var(--ip-focus-color) !important; outline: none !important;
    box-shadow: 0 0 0 4px var(--ip-focus-halo) !important;
}
:where(.fi-input-wrp, .ip-palette-color > div, .ip-planner-search) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]), textarea, select):focus {
    outline: none !important; box-shadow: none !important;
}
:where(button, a, input, textarea, select, summary, [tabindex]) { scroll-margin-block: 100px 40px; }
:where(main, [role="main"]):focus { outline: none; }
.ip-field-error { color: #9d3327; font-size: 14px; line-height: 1.5; }
.ip-field-label { display: block; text-align: left; font-size: 14px; font-weight: 600; line-height: 1.5; }
.ip-a11y-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.fi-btn, .fi-icon-btn, .studio-module-tools button, .studio-gallery button) { min-width: 24px; min-height: 24px; }
@media (pointer: coarse), (max-width: 640px) {
    :where(.fi-btn, .fi-icon-btn, .fi-sidebar-item-button, .studio-button, .studio-text-button,
        .studio-module-tools button, .studio-gallery button, .studio-device-switch button,
        .intro-skip, .intro-video-toggle, .demo-navigation a, .demo-navigation button,
        .header-nav a, .open-label, .rotation-toggle, .js-wa-send-btn,
        [role="dialog"] button, #rsvp-edit-btn, #rsvp-submit-btn, #rsvp-cancel-edit-btn) {
        min-height: 44px !important; min-width: 44px !important;
        display: inline-flex; align-items: center; justify-content: center;
    }
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea) {
        font-size: 16px !important; min-height: 44px;
    }
    .studio-filters, .studio-toolbar-actions { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
    .intro-reveal { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) {
    .fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]),
    .fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):is(:checked, :indeterminate, :disabled),
    .fi-body input[type="checkbox"]:not(.sr-only):not([hidden]):not([role="switch"]):not([aria-hidden="true"]):disabled:is(:checked, :indeterminate) {
        -webkit-appearance: auto !important;
        appearance: auto !important;
        background: Canvas !important;
        border-color: ButtonText !important;
        box-shadow: none !important;
        transition: none;
    }
    select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
        -webkit-appearance: auto !important; appearance: auto !important;
        background-image: none !important;
    }
    .choices > .choices__inner { position: relative; background-image: none !important; }
    .choices > .choices__inner::after {
        content: ''; position: absolute; pointer-events: none;
        inset-inline-end: var(--ip-select-arrow-inset); top: calc(50% - 6px);
        width: 8px; height: 8px; border: solid ButtonText; border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg);
    }
    button, input, select, textarea { border: 1px solid ButtonText !important; }
    :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
        outline: 2px solid Highlight !important; outline-offset: 3px !important;
    }
    :is(.fi-input-wrp, .ip-palette-color > div, .ip-planner-search):focus-within {
        outline: 2px solid Highlight !important; outline-offset: 2px !important;
    }
}
