/* "Powered by Cliprz Store" footer credit — resources/views/components/cliprz/powered-by.blade.php
 * ships with zero built-in styling, so it was just inheriting whatever muted/tiny
 * text color surrounds it in each footer variant, making it barely legible.
 *
 * Bold+underlined link text plus a slow "border beam" that traces the pill's
 * actual rectangular outline (see the SVG <rect> in the Blade component) —
 * a deliberate, noticeable presence without a static colored border, a logo,
 * or anything that reads as an inserted ad banner.
 */
.cp-powered-by {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 1.15em;
    border-radius: 999px;
}

.cp-powered-by > span:first-child {
    opacity: 0.7;
}

.cp-powered-by a {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, currentColor 100%, white 20%);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}

.cp-powered-by a:hover {
    text-decoration-color: currentColor;
}

/* Rotating "border beam" — a short bright segment travels continuously
 * around the pill's actual outline. The SVG <rect> in the Blade
 * component uses percentage width/height + pathLength="100", so it
 * always matches the pill's real rendered shape (any text length/
 * locale) instead of assuming a near-square/circular box — a plain
 * conic-gradient looked circular and broken on this wide, short pill.
 * Colored from currentColor: no fixed/foreign color introduced. */
.cp-powered-by-trace {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.cp-powered-by-trace rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-dasharray: 16 84;
    opacity: 0.85;
    animation: cp-trace-move 3s linear infinite;
}

@keyframes cp-trace-move {
    to { stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-powered-by-trace rect {
        animation: none;
    }
}