/* Przycisk "Zaprojektuj ścianę z tą tapetą" na karcie tapety (nad "Dodaj do koszyka").
   Ten sam wyglad i miejsce co przycisk planera paneli. Ma byc najbardziej widocznym elementem karty:
   granatowe wypelnienie, jasna obracajaca sie obwodka, przesuwajacy sie refleks i pulsujaca poswiata
   w kolorach sklepu. Przy systemowym "ogranicz ruch" wszystko stoi. */

.rrp-cta {
    --rrp-cta-ink: #03295d;
    --rrp-cta-ink-2: #0b3f86;
    --rrp-cta-rose: #c9959a;
    --rrp-cta-rose-soft: #f3e4e5;
    width: 100%;
    margin: 0 0 16px;
}

@property --rrp-cta-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.rrp-cta .rrp-open {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 12px 14px 12px 12px;
    overflow: hidden;
    border: 3px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(135deg, var(--rrp-cta-ink) 0%, var(--rrp-cta-ink-2) 100%) padding-box,
        conic-gradient(from var(--rrp-cta-angle), var(--rrp-cta-rose) 0%, #fff 12%, var(--rrp-cta-rose) 25%, var(--rrp-cta-rose-soft) 50%, var(--rrp-cta-rose) 62%, #fff 75%, var(--rrp-cta-rose) 88%, var(--rrp-cta-rose-soft) 100%) border-box;
    box-shadow: 0 8px 24px -10px rgba(3, 41, 93, 0.55), 0 0 0 0 rgba(201, 149, 154, 0.55);
    color: #fff;
    font: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    cursor: pointer;
    animation: rrp-cta-ring 4s linear infinite, rrp-cta-glow 2.4s ease-in-out infinite;
    transition: transform 0.2s, filter 0.2s;
}

/* Refleks swiatla przesuwajacy sie po przycisku co kilka sekund. */
.rrp-cta .rrp-open::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: rrp-cta-shine 4.5s ease-in-out infinite;
}

@keyframes rrp-cta-ring {
    to {
        --rrp-cta-angle: 360deg;
    }
}

@keyframes rrp-cta-glow {
    0%, 100% {
        box-shadow: 0 8px 24px -10px rgba(3, 41, 93, 0.55), 0 0 0 0 rgba(201, 149, 154, 0.55);
    }
    50% {
        box-shadow: 0 8px 24px -10px rgba(3, 41, 93, 0.55), 0 0 0 7px rgba(201, 149, 154, 0);
    }
}

@keyframes rrp-cta-shine {
    0%, 55% {
        left: -60%;
    }
    100% {
        left: 130%;
    }
}

.rrp-cta .rrp-open svg {
    position: relative;
    flex: none;
    box-sizing: content-box;
    padding: 10px;
    border-radius: 11px;
    background: #fff;
    color: var(--rrp-cta-ink);
}

.rrp-cta .rrp-open span {
    position: relative;
}

.rrp-cta .rrp-open strong {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.rrp-cta .rrp-open small {
    display: block;
    margin-top: 3px;
    color: var(--rrp-cta-rose-soft);
    font-size: 13px;
    font-weight: 400;
}

.rrp-cta .rrp-open::after {
    content: '\2192';
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--rrp-cta-rose);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s;
}

@media (hover: hover) {
    .rrp-cta .rrp-open:hover {
        color: #fff;
        filter: brightness(1.12);
        transform: translateY(-2px);
    }

    .rrp-cta .rrp-open:hover::after {
        transform: translateX(3px);
    }
}

.rrp-cta .rrp-open:focus-visible {
    outline: 3px solid var(--rrp-cta-rose);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .rrp-cta .rrp-open {
        gap: 12px;
        padding: 10px 10px 10px 10px;
    }

    .rrp-cta .rrp-open strong {
        font-size: 16px;
    }

    .rrp-cta .rrp-open::after {
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rrp-cta .rrp-open,
    .rrp-cta .rrp-open::before {
        animation: none;
        transition: none;
    }

    .rrp-cta .rrp-open::before {
        display: none;
    }
}