/* ==================== BACK TO TOP ==================== */
.dt-top {
    --dt-orange: #ff7a00;
    --dt-top-size: 54px;
    --dt-top-offset: 2rem;      /* mirrors the WhatsApp button on the left */
    --progress: 0;              /* 0–100, set by back-to-top.js */
    --dt-ease: cubic-bezier(0.22, 1, 0.36, 1);

    position: fixed;
    right: var(--dt-top-offset);
    bottom: var(--dt-top-offset);
    z-index: 1000;
    display: grid;
    place-items: center;
    width: var(--dt-top-size);
    height: var(--dt-top-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.85);
    transition:
        opacity 0.35s ease,
        visibility 0.35s,
        transform 0.45s var(--dt-ease),
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.dt-top[hidden] {
    display: grid;     /* keep it in the layout so the fade can run; JS drops [hidden] */
}

.dt-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ---------- Progress ring ---------- */
.dt-top__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);    /* start at 12 o'clock */
}

.dt-top__track,
.dt-top__progress {
    fill: none;
    stroke-width: 2.5;
}

.dt-top__track {
    stroke: rgba(255, 255, 255, 0.12);
}

.dt-top__progress {
    stroke: var(--dt-orange);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--progress));
    transition: stroke-dashoffset 0.15s linear;
}

/* ---------- Arrow: two stacked arrows so one slides out as the next slides in ---------- */
.dt-top__icon {
    position: relative;
    width: 18px;
    height: 18px;
    overflow: hidden;
    font-size: 0.95rem;
}

.dt-top__icon i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    line-height: 18px;
    text-align: center;
    transition: transform 0.4s var(--dt-ease);
}

.dt-top__icon i + i {
    transform: translateY(120%);
}

/* ---------- States ---------- */
.dt-top:hover {
    background: var(--dt-orange);
    box-shadow: 0 16px 32px -12px rgba(255, 122, 0, 0.8);
}

.dt-top:hover .dt-top__progress {
    stroke: #fff;
}

.dt-top:hover .dt-top__icon i:first-child {
    transform: translateY(-120%);
}

.dt-top:hover .dt-top__icon i + i {
    transform: translateY(0);
}

.dt-top:active {
    transform: scale(0.94);
}

.dt-top:focus-visible {
    outline: 3px solid var(--dt-orange);
    outline-offset: 3px;
}

/* While the page is scrolling up: arrow keeps looping upwards */
.dt-top.is-scrolling .dt-top__icon i:first-child {
    animation: dt-top-fly 0.6s linear infinite;
}

.dt-top.is-scrolling .dt-top__icon i + i {
    animation: dt-top-fly-in 0.6s linear infinite;
}

@keyframes dt-top-fly {
    from { transform: translateY(0); }
    to   { transform: translateY(-120%); }
}

@keyframes dt-top-fly-in {
    from { transform: translateY(120%); }
    to   { transform: translateY(0); }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 768px) {
    .dt-top {
        --dt-top-offset: 1.5rem;
        --dt-top-size: 50px;
    }
}

@media (max-width: 576px) {
    .dt-top {
        --dt-top-offset: 1rem;
        --dt-top-size: 46px;
    }

    /* No hover on touch: keep the dark style, just respond to the tap */
    .dt-top:hover {
        background: #111;
        box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
    }

    .dt-top:hover .dt-top__progress {
        stroke: var(--dt-orange);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dt-top,
    .dt-top__progress,
    .dt-top__icon i {
        transition: none;
    }

    .dt-top.is-scrolling .dt-top__icon i {
        animation: none;
    }
}