/**
 * Button Refinements (2026-06-14)
 * ---------------------------------------------------------------------------
 * Lightweight, fully self-contained overrides that make the form-builder
 * buttons feel lighter, cleverer and more elegant. Loaded AFTER
 * style.css + form_builder_designs.css so these rules win on source order.
 *
 * REVERSIBLE: to undo every change, simply remove the three
 *   <link ... button_refinements.css> tags (form_editor / form_preview /
 *   dashboard templates) and delete this file. Nothing else references it.
 *
 * Contains:
 *   1. "Quiet danger" delete buttons  (.btn-danger)
 *   2. Animated invitation CTA        (.invitation-cta .btn)
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. QUIET-DANGER DELETE BUTTONS
 * ---------------------------------------------------------------------------
 * Destructive actions ("Zmazať", field ✕, "Zrušiť logiku") were loud,
 * saturated red pills that grabbed the eye away from the actual content.
 * Delete is a secondary, rarely-wanted action, so it should rest quietly as a
 * soft rose ghost and only "arm" itself into clear red on hover/focus.
 * One rule covers the default theme + all five data-design themes.
 * ------------------------------------------------------------------------- */
.btn-danger,
body[data-design] .btn-danger {
    background: rgba(196, 112, 112, 0.09);
    color: #b56a62;
    border: 1px solid rgba(196, 112, 112, 0.28);
    box-shadow: none;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color var(--duration-normal, 200ms) var(--ease-out, ease),
                color var(--duration-normal, 200ms) var(--ease-out, ease),
                border-color var(--duration-normal, 200ms) var(--ease-out, ease),
                box-shadow var(--duration-normal, 200ms) var(--ease-out, ease),
                transform var(--duration-fast, 150ms) var(--ease-out, ease);
}

.btn-danger:hover:not(:disabled),
body[data-design] .btn-danger:hover:not(:disabled),
.btn-danger:focus-visible,
body[data-design] .btn-danger:focus-visible {
    background: #c47a72;
    color: #fff;
    border-color: #c47a72;
    box-shadow: 0 3px 12px rgba(196, 112, 112, 0.30);
    transform: translateY(-1px);
}

.btn-danger:active:not(:disabled),
body[data-design] .btn-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(196, 112, 112, 0.25);
}

/* ---------------------------------------------------------------------------
 * 2. ANIMATED INVITATION CTA
 * ---------------------------------------------------------------------------
 * The guest-facing CTA ("Prosíme vyplňte tento formulár") was static. A slow
 * diagonal sheen sweeps across it on a long cycle, paired with a gentle glow
 * "breath" — enough to draw a second glance without stealing the show.
 * Scoped to the invitation CTA only so other primary buttons stay calm.
 * ------------------------------------------------------------------------- */
.invitation-cta .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
    .invitation-cta .btn {
        animation: ctaBreathe 3.8s ease-in-out infinite;
    }

    /* freeze the glow breath while interacting; sheen (::after) keeps going */
    .invitation-cta .btn:hover {
        animation-play-state: paused;
    }

    .invitation-cta .btn::after {
        content: '';
        position: absolute;
        top: -10%;
        left: -160%;
        width: 55%;
        height: 120%;
        background: linear-gradient(
            100deg,
            transparent 0%,
            rgba(255, 255, 255, 0.50) 50%,
            transparent 100%
        );
        transform: skewX(-18deg);
        pointer-events: none;
        z-index: 1;
        animation: ctaSheen 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
}

/* keep the button label above the sheen layer */
.invitation-cta .btn > * {
    position: relative;
    z-index: 2;
}

@keyframes ctaSheen {
    0%   { left: -160%; }
    /* the sweep itself happens in the first ~45%, then a long quiet pause */
    45%  { left: 170%; }
    100% { left: 170%; }
}

@keyframes ctaBreathe {
    0%, 100% { box-shadow: 0 4px 16px rgba(201, 169, 89, 0.30); }
    50%      { box-shadow: 0 7px 26px rgba(201, 169, 89, 0.55); }
}