/*
 * WEBGLOBE MAINTAINER NOTES
 *
 * Provide a keyboard-accessible return to the top of long pages.
 *
 * The selectors form a contract with the rendered markup and browser interactions. Preserve
 * keyboard focus, disabled/hidden states and the smaller-screen rules when adjusting the
 * cascade; an attractive desktop layout is not sufficient evidence of usable mobile forms.
 */
.page-back-to-top-shell {
    position: relative;
    z-index: 20;
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    display: flex;
    justify-content: center;
    margin: clamp(1.75rem, 5vw, 4rem) auto;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.page-back-to-top-shell[hidden] {
    display: none !important;
}

body .page-back-to-top-shell button.page-back-to-top-button {
    width: min(100%, 240px);
    min-width: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(69, 217, 255, 0.58);
    border-radius: 0;
    color: #effcff;
    background: linear-gradient(135deg, #071522, #0b2635) !important;
    box-shadow: inset 3px 0 0 #d9ff43, 0 12px 34px rgba(0, 0, 0, 0.24);
    font: 850 0.78rem/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.045em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

body .page-back-to-top-shell button.page-back-to-top-button:hover {
    transform: translateY(-2px);
    border-color: #d9ff43;
    color: #d9ff43;
    background: linear-gradient(135deg, #0a1d2c, #103346) !important;
}

body .page-back-to-top-shell button.page-back-to-top-button:focus-visible {
    outline: 3px solid #d9ff43;
    outline-offset: 4px;
}

.page-back-to-top-arrow {
    flex: 0 0 auto;
    color: #d9ff43;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-1px);
}

/* Match the Kook & Ko buttons in every storefront and account shell. The
 * body scope also keeps the shared assets independent of stylesheet order. */
body.kitchen-demo .page-back-to-top-shell button.page-back-to-top-button,
html.k-confirmation-page .page-back-to-top-shell button.page-back-to-top-button {
    border-color: var(--k-olive, #4e5738);
    border-radius: 30px;
    color: #fff;
    background: var(--k-olive, #4e5738) !important;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
}

body.kitchen-demo .page-back-to-top-shell button.page-back-to-top-button:hover,
html.k-confirmation-page .page-back-to-top-shell button.page-back-to-top-button:hover {
    border-color: var(--k-olive-dark, #394229);
    color: #fff;
    background: var(--k-olive-dark, #394229) !important;
}

body.kitchen-demo .page-back-to-top-shell button.page-back-to-top-button:focus-visible,
html.k-confirmation-page .page-back-to-top-shell button.page-back-to-top-button:focus-visible {
    outline-color: var(--k-olive, #4e5738);
}

body.kitchen-demo .page-back-to-top-arrow,
html.k-confirmation-page .page-back-to-top-arrow {
    color: currentColor;
    font-weight: 500;
}

/* Research uses its own quiet form styling, including its amber focus ring. */
body.research-page .page-back-to-top-shell button.page-back-to-top-button {
    border-color: var(--r-olive, #4e5738);
    border-radius: 6px;
    color: #fff;
    background: var(--r-olive, #4e5738) !important;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    transform: none;
}

body.research-page .page-back-to-top-shell button.page-back-to-top-button:hover {
    border-color: #394229;
    color: #fff;
    background: #394229 !important;
}

body.research-page .page-back-to-top-shell button.page-back-to-top-button:focus-visible {
    outline-color: #a27124;
}

body.research-page .page-back-to-top-arrow {
    color: currentColor;
    font-weight: 650;
}

@media (max-width: 480px) {
    .page-back-to-top-shell {
        margin-block: 1.5rem;
    }

    body .page-back-to-top-shell button.page-back-to-top-button {
        width: min(100%, 220px);
        min-height: 48px;
        padding-inline: 0.85rem;
        font-size: 0.74rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .page-back-to-top-shell button.page-back-to-top-button {
        transition: none;
    }
}