:root{
    --ophuis-blue: #1c2c54;
    --ophuis-gold-soft: rgba(198,156,109,0.15);
    --ophuis-gold: rgba(198,156,109,0.4);
    --ophuis-gold-solid: #c69c6d;

    --ophuis-ink: #0b1020;
    --ophuis-white: #ffffff;
}

.tb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.7rem;
    text-align: center;
    letter-spacing: 1.1px;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.00) 55%),
    linear-gradient(180deg,
            rgba(28, 44, 84, 1) 0%,
            rgba(18, 30, 60, 1) 100%);
    color: var(--ophuis-white);
    border: 1px solid rgba(198, 156, 109, 0.45);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    transition: transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease,
    filter 0.14s ease;

    &::before {
        content: "";
        position: absolute;
        inset: -40% -60%;
        background: linear-gradient(
                110deg,
                rgba(198, 156, 109, 0) 0%,
                rgba(198, 156, 109, 0.40) 42%,
                rgba(255, 255, 255, 0.18) 50%,
                rgba(198, 156, 109, 0.28) 58%,
                rgba(198, 156, 109, 0) 100%
        );
        transform: translateX(-55%) rotate(-8deg);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.45s ease, opacity 0.22s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover::before {
            opacity: 1;
            transform: translateX(55%) rotate(-8deg);
        }

        &:hover {
            transform: translateY(-1px) scale(1.08);
            border-color: rgba(198, 156, 109, 0.75);
            box-shadow:
                    0 14px 28px rgba(0, 0, 0, 0.45),
                    0 0 22px rgba(198, 156, 109, 0.22);
        }
    }

    &:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(198, 156, 109, 0.30);
    }

    &.disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.55;
        filter: grayscale(0.3);
        box-shadow: none;
    }

    &.small {
        padding: 0.35rem 0.8rem;
        font-size: 0.9rem;
        font-weight: 650;
        letter-spacing: 1px;
    }

    &.danger {
        background: linear-gradient(180deg, #8b0f0f 0%, #5f0b0b 100%);
        border-color: rgba(255, 255, 255, 0.18);

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45),
                0 0 22px rgba(200, 40, 40, 0.25);
            }
        }
    }
}

.tb-link {
    position: relative;
    display: inline-block;
    color: var(--ophuis-blue);
    font-size: clamp(1.1rem, 1vw, 1.3rem) !important;
    font-weight: 900;
    text-decoration: none;
    padding: 0 0.35rem;
    transition: transform 0.18s ease-out, color 0.18s ease-out;
    will-change: transform;

    @media (hover: hover) and (pointer: fine) {
        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            transform: translateY(-3px);
            color: rgba(28, 44, 84, 0.85);
        }

        &:hover::after,
        &:active::after,
        &:focus::after,
        &:focus-visible::after {
            width: 115%;
        }
    }

    &:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    &:focus-visible {
        outline: none;
    }

    &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -3px;
        height: 2px;
        width: 0;
        background: linear-gradient(
                90deg,
                transparent,
                rgba(198, 156, 109, 0.65),
                rgba(198, 156, 109, 0.95),
                rgba(198, 156, 109, 0.65),
                transparent
        );
        transform: translateX(-50%);
        border-radius: 0.5rem;
        transition: width 0.26s ease-out;
    }

    &.link-white {
        color: #ffffff;

        &::after {
            background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(198, 156, 109, 0.55),
                    rgba(198, 156, 109, 0.85),
                    rgba(198, 156, 109, 0.55),
                    transparent
            );
        }
    }

    &.link-md {
        font-size: clamp(1rem, 0.8vw, 1.15rem) !important;
        font-weight: 800;
        padding: 0 0.25rem;
    }

    &.link-sm {
        font-size: clamp(0.8rem, 0.8vw, 1rem) !important;
        font-weight: 750;
        padding: 0;
    }

    &.disabled {
        pointer-events: none;
        opacity: 0.55;
        cursor: default;
        text-decoration: none;
    }
}

.ct-link-button.info-button {
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 2.7rem;
    height: 2.7rem;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: transparent no-repeat center;
    transition: transform .18s ease;

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            transform: scale(1.08);
        }
    }

    &:active {
        transform: scale(0.96);
    }

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: 2px solid rgba(28, 44, 84, 0.55);
        outline-offset: 3px;
        border-radius: 999px;
    }

    &:disabled {
        opacity: .45;
        cursor: default;
        animation: none;
    }
}

.info-icon {
    animation: info-wobble 4.5s ease-in-out infinite;
    transform-origin: 50% 60%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    &:focus,
    &:active{
        animation: none;
    }
}

@keyframes info-wobble{
    0%   { transform: rotate(0deg) translateX(0); }
    2%   { transform: rotate(-6deg) translateX(-1px); }
    4%   { transform: rotate(6deg)  translateX(1px); }
    6%   { transform: rotate(-4deg) translateX(-1px); }
    8%   { transform: rotate(4deg)  translateX(1px); }
    10%  { transform: rotate(0deg) translateX(0); }
    100% { transform: rotate(0deg) translateX(0); }
}

@media (prefers-reduced-motion: reduce){
    .info-icon{
        animation: none !important;
    }
}

:root { scroll-padding-top: 8rem; }
html { scroll-behavior: smooth; }

#scrollToTopBtn {
    position: fixed;
    bottom: 1rem;
    right: 1.5rem;
    padding: 0.5rem 0.7rem;
    text-align: center;
    letter-spacing: 1.3px;
    font-family: sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    background:
            linear-gradient(180deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.00) 55%),
            linear-gradient(180deg,
            rgba(28,44,84,1) 0%,
            rgba(18,30,60,1) 100%);
    color: #ffffff;
    border: 1px solid rgba(198,156,109,0.45);
    border-radius: 0.7rem;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.75);
    filter: grayscale(0);
    transition: filter 0.1s, transform 0.1s ease;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1000;

    &:active {
        transform: scale(0.97);
        opacity: 0.9;
    }
}

@media (hover: hover) and (pointer: fine) {
    #scrollToTopBtn:hover {
        transform: scale(1.1);
    }
}

.remove-mobile-highlight-color {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
    :root { scroll-padding-top: 1rem; }
}