/*
 * Crida Signal 0.5.4
 * SIGNAL contact layer: compact launcher, monochrome drawer, reactive Ona field,
 * and the existing Fluent Forms #5 restyled vertically. Desktop/tablet only.
 */

.crida-signal {
    --cs-white: 255, 255, 255;
    --cs-black: 0, 0, 0;
    --cs-panel-w: clamp(390px, 30vw, 446px);
    position: fixed;
    inset: 0;
    z-index: 8900;
    pointer-events: none;
    isolation: isolate;
    font-family: "Zalando Sans", "Helvetica Neue", Arial, sans-serif;
}

.crida-signal *,
.crida-signal *::before,
.crida-signal *::after { box-sizing: border-box; }

.crida-signal button,
.crida-signal input,
.crida-signal textarea,
.crida-signal a { font: inherit; }

/* Launcher -------------------------------------------------------------- */
.crida-signal__launcher {
    position: fixed;
    top: 50%;
    right: 0;
    width: 40px;
    min-height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 9px;
    border: 1px solid rgba(var(--cs-white), 0.13);
    border-right: 0;
    border-radius: 5px 0 0 5px;
    color: rgba(var(--cs-white), 0.88);
    background: rgba(7, 7, 7, 0.30);
    box-shadow: -8px 0 26px rgba(var(--cs-black), 0.15), inset 1px 0 0 rgba(var(--cs-white), 0.02);
    -webkit-backdrop-filter: blur(11px) saturate(104%);
    backdrop-filter: blur(11px) saturate(104%);
    opacity: 0.90;
    transform: translate(2px, -50%);
    transition:
        width 350ms cubic-bezier(.2,.78,.25,1),
        min-height 350ms cubic-bezier(.2,.78,.25,1),
        padding 350ms cubic-bezier(.2,.78,.25,1),
        transform 300ms cubic-bezier(.2,.78,.25,1),
        opacity 220ms ease,
        border-color 220ms ease,
        background 260ms ease,
        box-shadow 280ms ease;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.crida-signal[data-language="es"] .crida-signal__launcher { min-height: 156px; }
.crida-signal[data-language="en"] .crida-signal__launcher { min-height: 174px; }

.crida-signal__label {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    line-height: 1;
    transition: opacity 200ms ease, transform 300ms cubic-bezier(.2,.78,.25,1);
}

.crida-signal__label--full {
    font-size: 13.5px;
    font-weight: 560;
    letter-spacing: 0.008em;
    opacity: 1;
    transform: rotate(180deg) translateY(0);
}

.crida-signal__compact-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateX(2px) scale(.90);
    transition: opacity 200ms ease, transform 300ms cubic-bezier(.2,.78,.25,1);
}

.crida-signal__compact-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Calm state after two seconds: a readable, quiet contact icon remains. */
.crida-signal.is-collapsed .crida-signal__launcher {
    width: 36px;
    min-height: 54px;
    padding: 8px 6px;
    transform: translate(3px, -50%);
    opacity: .70;
    background: rgba(7, 7, 7, .22);
    border-color: rgba(var(--cs-white), .095);
    box-shadow: -5px 0 18px rgba(var(--cs-black), .11);
}

.crida-signal.is-collapsed .crida-signal__label--full {
    opacity: 0;
    transform: rotate(180deg) translateY(8px);
}

.crida-signal.is-collapsed .crida-signal__compact-icon {
    opacity: .94;
    transform: translateX(-1px) scale(1);
}

.crida-signal__launcher:hover {
    opacity: 1;
    border-color: rgba(var(--cs-white), .21);
    background: rgba(9, 9, 9, .43);
    box-shadow: -10px 0 32px rgba(var(--cs-black), .19);
}

.crida-signal__launcher:focus-visible,
.crida-signal__close:focus-visible,
.crida-signal__email:focus-visible,
.crida-signal__ona-copy:focus-visible,
.crida-signal__submit:focus-visible,
.crida-signal__field input:focus-visible,
.crida-signal__field textarea:focus-visible {
    outline: 1px solid rgba(var(--cs-white), 0.72);
    outline-offset: 4px;
}

/* Drawer --------------------------------------------------------------- */
.crida-signal__veil {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--cs-black), 0.015) 48%, rgba(var(--cs-black), 0.10) 72%, rgba(var(--cs-black), 0.20) 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 380ms ease, visibility 0s linear 380ms;
    pointer-events: none;
}

.crida-signal__panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--cs-panel-w);
    height: 100dvh;
    min-height: 560px;
    border: 0;
    margin: 0;
    color: rgb(var(--cs-white));
    background:
        radial-gradient(120% 78% at 108% 10%, rgba(var(--cs-white), 0.07), transparent 56%),
        radial-gradient(86% 64% at 94% 81%, rgba(220, 226, 234, 0.045), transparent 64%),
        linear-gradient(180deg, rgba(10,10,10,.87), rgba(2,2,2,.965));
    box-shadow: -42px 0 120px rgba(var(--cs-black), 0.23);
    -webkit-backdrop-filter: blur(22px) saturate(106%);
    backdrop-filter: blur(22px) saturate(106%);
    transform: translateX(102%);
    opacity: 0;
    visibility: hidden;
    transition: transform 560ms cubic-bezier(.18,.76,.25,1), opacity 360ms ease, visibility 0s linear 560ms;
    pointer-events: none;
    overflow: hidden;
}

.crida-signal__panel::before {
    content: "";
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: -180px;
    width: 220px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--cs-white), 0.014) 48%, rgba(var(--cs-white), 0.047) 100%);
    filter: blur(25px);
    opacity: 0;
    transform: translateX(76px);
    transition: opacity 520ms ease 80ms, transform 620ms cubic-bezier(.18,.76,.25,1);
    pointer-events: none;
}

.crida-signal__ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.crida-signal__ambient::before,
.crida-signal__ambient::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(68px);
    opacity: 0.10;
}

.crida-signal__ambient::before {
    width: 280px;
    height: 280px;
    right: -128px;
    top: 5%;
    background: radial-gradient(circle, rgba(var(--cs-white), .72), rgba(var(--cs-white), 0) 68%);
}

.crida-signal__ambient::after {
    width: 250px;
    height: 250px;
    right: 5%;
    bottom: -5%;
    background: radial-gradient(circle, rgba(215,222,230,.50), rgba(215,222,230,0) 70%);
}

.crida-signal__panel-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--cs-white), .15) transparent;
}

.crida-signal__panel-inner::-webkit-scrollbar { width: 4px; }
.crida-signal__panel-inner::-webkit-scrollbar-track { background: transparent; }
.crida-signal__panel-inner::-webkit-scrollbar-thumb { background: rgba(var(--cs-white), .14); border-radius: 4px; }

.crida-signal__close {
    position: fixed;
    top: 26px;
    right: 26px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: rgb(var(--cs-white));
    padding: 0;
    cursor: pointer;
    z-index: 5;
}

.crida-signal__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 1px;
    background: rgba(var(--cs-white), 0.78);
    transform-origin: center;
    transition: background 180ms ease, transform 220ms ease;
}

.crida-signal__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.crida-signal__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.crida-signal__close:hover span { background: rgb(var(--cs-white)); }

.crida-signal__content {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(62px, 7vh, 86px) clamp(34px, 3.2vw, 48px) 34px;
}

.crida-signal__intro { max-width: 330px; }

.crida-signal__title {
    margin: 0;
    max-width: 330px;
    font-size: clamp(34px, 2.9vw, 43px);
    line-height: 1.01;
    letter-spacing: -0.032em;
    font-weight: 330;
    color: rgb(var(--cs-white));
}

.crida-signal__lead {
    margin: 10px 0 0;
    max-width: 280px;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: rgba(var(--cs-white), .48);
}

/* Direct contact -------------------------------------------------------- */
.crida-signal__contact-line {
    margin-top: clamp(26px, 3.7vh, 38px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.crida-signal__contact-label {
    font-size: 12px;
    line-height: 1;
    font-weight: 420;
    letter-spacing: .01em;
    text-transform: none;
    color: rgba(var(--cs-white), .38);
}

.crida-signal__email {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: rgb(var(--cs-white));
    text-decoration: none;
    font-size: clamp(22px, 2.15vw, 30px);
    line-height: 1.08;
    letter-spacing: -0.028em;
    font-weight: 410;
}

.crida-signal__arrow {
    font-size: .72em;
    opacity: .66;
    transform: translateY(-1px);
    transition: transform 220ms ease, opacity 220ms ease;
}

.crida-signal__email:hover .crida-signal__arrow {
    transform: translate(4px, -5px);
    opacity: 1;
}

/* Ona / reactive signal field ------------------------------------------ */
.crida-signal__ona {
    position: relative;
    width: 100%;
    min-height: 142px;
    margin: 28px 0 18px;
    padding: 19px 0 23px;
    border-top: 1px solid rgba(var(--cs-white), .095);
    border-bottom: 1px solid rgba(var(--cs-white), .065);
    color: rgb(var(--cs-white));
}

.crida-signal__ona-copy {
    position: relative;
    z-index: 3;
    width: fit-content;
    max-width: min(345px, 94%);
    margin: 0;
    padding: 0;
    color: rgba(var(--cs-white), .50);
    cursor: pointer;
    transition: color 240ms ease, opacity 240ms ease, transform 260ms cubic-bezier(.2,.78,.25,1);
}

.crida-signal__ona-line {
    display: block;
}

.crida-signal__ona-line--primary {
    font-size: 18px;
    line-height: 1.30;
    letter-spacing: -0.012em;
    font-weight: 450;
    color: rgba(var(--cs-white), .62);
}

.crida-signal__ona-line--secondary {
    max-width: 340px;
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.46;
    letter-spacing: 0;
    font-weight: 380;
    color: rgba(var(--cs-white), .36);
    transition: color 240ms ease;
}

.crida-signal__ona-copy:hover .crida-signal__ona-line--primary,
.crida-signal__ona-copy:focus-visible .crida-signal__ona-line--primary,
.crida-signal__ona-copy.is-flowing .crida-signal__ona-line--primary {
    color: rgba(var(--cs-white), .82);
}

.crida-signal__ona-copy:hover .crida-signal__ona-line--secondary,
.crida-signal__ona-copy:focus-visible .crida-signal__ona-line--secondary,
.crida-signal__ona-copy.is-flowing .crida-signal__ona-line--secondary {
    color: rgba(var(--cs-white), .49);
}

.crida-signal__ona-copy:hover,
.crida-signal__ona-copy:focus-visible,
.crida-signal__ona-copy.is-flowing {
    transform: translateX(2px);
}





/*
 * While the Signal CTA is driving Ona's visual beacon, keep Ona silent in copy:
 * only the light/aura/particles are allowed to answer. This overrides Ona's
 * own periodic/charging helper text without modifying the Ona runtime.
 */
html.crida-signal-ona-hover #ona-beacon-copy,
html.crida-signal-ona-hover #ona-beacon.is-hint-visible + #ona-beacon-copy,
html.crida-signal-ona-hover #ona-beacon.is-charging + #ona-beacon-copy {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.crida-signal-ona-hover #ona-beacon-copy::before,
html.crida-signal-ona-hover #ona-beacon-copy > span {
    opacity: 0 !important;
    animation: none !important;
}

/* Fluent Forms #5 ------------------------------------------------------- */
/*
 * This is the same production form used in the footer. Signal only changes
 * layout and appearance inside the drawer. Fluent Forms keeps submission,
 * validation, spam protection, notifications and confirmation ownership.
 */
.crida-signal__fluent {
    width: 100%;
    margin-top: 6px;
}

.crida-signal__fluent .fluentform,
.crida-signal__fluent .frm-fluent-form,
.crida-signal__fluent form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.crida-signal__fluent .ff-t-container,
.crida-signal__fluent .ff-t-container.ff-column-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.crida-signal__fluent .ff-t-cell,
.crida-signal__fluent .ff-t-container > .ff-t-cell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.crida-signal__fluent .ff-el-group {
    width: 100% !important;
    margin: 0 0 10px !important;
}

.crida-signal__fluent .ff-el-input--label {
    margin: 0 0 5px !important;
}

.crida-signal__fluent .ff-el-input--label label {
    font-family: inherit !important;
    font-size: 11.5px !important;
    line-height: 1.28 !important;
    font-weight: 400 !important;
    color: rgba(var(--cs-white), .44) !important;
}

.crida-signal__fluent input[type="text"],
.crida-signal__fluent input[type="email"],
.crida-signal__fluent input[type="tel"],
.crida-signal__fluent input[type="url"],
.crida-signal__fluent input[type="number"],
.crida-signal__fluent select,
.crida-signal__fluent textarea,
.crida-signal__fluent .ff-el-form-control {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(var(--cs-white), .17) !important;
    border-radius: 3px !important;
    background: rgba(var(--cs-black), .08) !important;
    color: rgb(var(--cs-white)) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.38 !important;
    font-weight: 390 !important;
    transition: border-color 180ms ease, background 180ms ease !important;
}

.crida-signal__fluent textarea,
.crida-signal__fluent textarea.ff-el-form-control {
    min-height: 82px !important;
    resize: vertical !important;
}

.crida-signal__fluent input::placeholder,
.crida-signal__fluent textarea::placeholder {
    color: rgba(var(--cs-white), .42) !important;
    opacity: 1 !important;
}

.crida-signal__fluent input:focus,
.crida-signal__fluent select:focus,
.crida-signal__fluent textarea:focus,
.crida-signal__fluent .ff-el-form-control:focus {
    outline: 0 !important;
    border-color: rgba(var(--cs-white), .48) !important;
    background: rgba(var(--cs-white), .025) !important;
}

.crida-signal__fluent .ff-el-input--content {
    width: 100% !important;
}

.crida-signal__fluent .ff-el-form-check {
    display: block !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
}

.crida-signal__fluent .ff-el-form-check-label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    color: rgba(var(--cs-white), .78) !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
    font-weight: 390 !important;
}

.crida-signal__fluent input[type="checkbox"],
.crida-signal__fluent input[type="radio"] {
    flex: 0 0 auto !important;
    width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    accent-color: #fff;
}

.crida-signal__fluent .ff_submit_btn_wrapper,
.crida-signal__fluent .ff_submit_btn_wrapper_custom {
    margin: 15px 0 0 !important;
    text-align: left !important;
}

.crida-signal__fluent button[type="submit"],
.crida-signal__fluent input[type="submit"],
.crida-signal__fluent .ff-btn-submit {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 15px !important;
    border: 1px solid rgba(var(--cs-white), .30) !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: rgb(var(--cs-white)) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 480 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: border-color 180ms ease, background 180ms ease !important;
}

.crida-signal__fluent button[type="submit"]:hover,
.crida-signal__fluent input[type="submit"]:hover,
.crida-signal__fluent .ff-btn-submit:hover {
    border-color: rgba(var(--cs-white), .65) !important;
    background: rgba(var(--cs-white), .045) !important;
}

.crida-signal__fluent .text-danger,
.crida-signal__fluent .error,
.crida-signal__fluent .ff-el-is-error .text-danger {
    color: rgba(var(--cs-white), .72) !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
}

.crida-signal__fluent .ff-el-is-error .ff-el-form-control {
    border-color: rgba(var(--cs-white), .60) !important;
}

.crida-signal__fluent .ff-message-success,
.crida-signal__fluent .ff-message-error,
.crida-signal__fluent .ff-errors-in-stack {
    margin: 10px 0 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(var(--cs-white), .72) !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
}

.crida-signal__form-fallback {
    margin: 0;
    color: rgba(var(--cs-white), .48);
    font-size: 11px;
    line-height: 1.45;
}

.crida-signal__closing {
    margin: auto 0 0;
    padding-top: 42px;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 430;
    color: rgba(var(--cs-white), .37);
}

/* Open state ------------------------------------------------------------ */
.crida-signal.is-open .crida-signal__launcher {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(12px, -50%);
}

.crida-signal.is-open .crida-signal__veil {
    opacity: 1;
    visibility: visible;
    transition: opacity 380ms ease;
    pointer-events: auto;
}

.crida-signal.is-open .crida-signal__panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform 560ms cubic-bezier(.18,.76,.25,1), opacity 360ms ease;
    pointer-events: auto;
}

.crida-signal.is-open .crida-signal__panel::before {
    opacity: 1;
    transform: translateX(0);
}

html.crida-signal-open { overflow: hidden; }

/* Tablet --------------------------------------------------------------- */
@media (max-width: 1180px) {
    .crida-signal { --cs-panel-w: min(410px, 46vw); }
    .crida-signal__content { padding-left: 34px; padding-right: 34px; }
    .crida-signal__title { font-size: clamp(32px, 4.1vw, 40px); }
    .crida-signal__email { font-size: clamp(23px, 3vw, 30px); }
}

/* Mobile deliberately omitted: footer remains the faster contact path. */
@media (max-width: 767px) {
    .crida-signal { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .crida-signal *,
    .crida-signal *::before,
    .crida-signal *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}