/* Rent-To-Own hover popover — desktop floating nav only.
   Additive: the "Rent-To-Own" link keeps its normal click behavior; this only
   reveals a rich preview card on hover (or keyboard focus) on pointer devices. */

.nav-rto { position: relative; }

.rto-pop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding-top: 14px;            /* transparent hover bridge between link and card */
    width: 340px;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}

/* little caret pointing up to the nav item (sits in the bridge, never clipped) */
.rto-pop::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #f2730c;
    border-radius: 3px;
}

.rto-pop__card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    box-shadow: 0 24px 60px -22px rgba(15, 23, 42, .45), inset 0 1px 0 rgba(255, 255, 255, .8);
    padding: 0 0 18px;
    font-family: "Inter", sans-serif;
    text-align: left;
}

.rto-pop__head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px 16px;
    background: linear-gradient(135deg, #f2730c 0%, #ff9233 100%);
    color: #fff;
}
.rto-pop__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
}
.rto-pop__icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.9; }
.rto-pop__title {
    display: block;
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1.1;
    color: #fff;
}
.rto-pop__badge {
    display: block;
    margin-top: 5px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .92;
}

.rto-pop__body { padding: 15px 20px 4px; }
.rto-pop__desc { margin: 0 0 13px; color: #475467; font-size: .9rem; line-height: 1.55; }
.rto-pop__feats { list-style: none; margin: 0 0 16px; padding: 0; }
.rto-pop__feats li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    color: #1b2030;
    font-size: .9rem;
    line-height: 1.4;
}
.rto-pop__feats svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; stroke: #f2730c; fill: none; stroke-width: 2; }

.rto-pop__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 20px;
    padding: 11px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f2730c 0%, #ff9233 100%);
    color: #fff !important;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 10px 22px -8px rgba(242, 115, 12, .7);
    transition: transform .12s ease, box-shadow .12s ease;
}
.rto-pop__cta:hover { transform: translateY(-1px); color: #fff !important; text-decoration: none; }
.rto-pop__cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.rto-pop__hint { text-align: center; margin: 9px 0 0; font-size: .72rem; color: #98a2b3; }

/* reveal — only on devices with a real hover-capable pointer (desktop) */
@media (hover: hover) and (pointer: fine) {
    .nav-rto:hover > .rto-pop,
    .nav-rto:focus-within > .rto-pop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}

/* never on small screens (the desktop nav is hidden there anyway) */
@media (max-width: 767px) {
    .rto-pop { display: none !important; }
}

/* the floating nav uppercases its links; keep the popover body copy normal-case & readable.
   (defined last so the badge keeps its intentional uppercase) */
.rto-pop, .rto-pop * { text-transform: none !important; letter-spacing: normal !important; }
.rto-pop__badge { text-transform: uppercase !important; letter-spacing: .04em !important; }