/**
 * Trigger button base + CTA preset variants for [ctc_visual_form_trigger].
 *
 * Lives in its own file (rather than inline in public.css) so the admin
 * meta-box gallery can load JUST these rules without dragging in the rest
 * of the frontend stylesheet — which would hide .ctc-vfs-step etc. inside
 * the admin Steps Builder that happens to share class names.
 *
 * Combine one variant (cta-link / cta-outline / cta-soft / cta-solid /
 * cta-dark / cta-pill / cta-glow / cta-pulse) with optional size
 * modifiers (cta-small / cta-large / cta-block).
 *
 */

/* Base trigger button — shared by every preset. */
.ctc-vfs-popup-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--ctc-vfs-primary, #0089cf);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.ctc-vfs-popup-trigger:hover {
    background: var(--ctc-vfs-primary-hover, #0070a8);
}

/* 1. cta-link — text-only with arrow. Most sober — reads like a link. */
.ctc-vfs-popup-trigger.cta-link {
    background: transparent;
    color: var(--ctc-vfs-primary);
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    font-weight: 600;
}
.ctc-vfs-popup-trigger.cta-link::after {
    content: '\2192';
    transition: transform 0.2s;
}
.ctc-vfs-popup-trigger.cta-link:hover {
    background: transparent;
    text-decoration: underline;
}
.ctc-vfs-popup-trigger.cta-link:hover::after {
    transform: translateX(3px);
}

/* 2. cta-outline — transparent body, primary border + text. Sober. */
.ctc-vfs-popup-trigger.cta-outline {
    background: transparent;
    color: var(--ctc-vfs-primary);
    border: 2px solid var(--ctc-vfs-primary);
}
.ctc-vfs-popup-trigger.cta-outline:hover {
    background: var(--ctc-vfs-primary);
    color: #fff;
}

/* 3. cta-soft — light tinted background, primary text. Medium-soft. */
.ctc-vfs-popup-trigger.cta-soft {
    background: color-mix(in srgb, var(--ctc-vfs-primary) 12%, transparent);
    color: var(--ctc-vfs-primary);
}
.ctc-vfs-popup-trigger.cta-soft:hover {
    background: color-mix(in srgb, var(--ctc-vfs-primary) 22%, transparent);
}

/* 4. cta-solid — explicit solid fill. */
.ctc-vfs-popup-trigger.cta-solid {
    background: var(--ctc-vfs-primary);
    color: #fff;
}

/* 5. cta-dark — high-contrast dark fill, white text. Pairs as secondary. */
.ctc-vfs-popup-trigger.cta-dark {
    background: #1B2A3D;
    color: #fff;
}
.ctc-vfs-popup-trigger.cta-dark:hover {
    background: #0e1a2a;
}

/* 6. cta-pill — solid primary, fully rounded. */
.ctc-vfs-popup-trigger.cta-pill {
    background: var(--ctc-vfs-primary);
    color: #fff;
    border-radius: 999px;
    padding-left: 28px;
    padding-right: 28px;
}

/* 7. cta-glow — primary fill with a bold coloured drop-shadow. */
.ctc-vfs-popup-trigger.cta-glow {
    background: var(--ctc-vfs-primary);
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ctc-vfs-primary) 45%, transparent);
}
.ctc-vfs-popup-trigger.cta-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ctc-vfs-primary) 55%, transparent);
}

/* 8. cta-pulse — primary fill with an animated halo. */
.ctc-vfs-popup-trigger.cta-pulse {
    background: var(--ctc-vfs-primary);
    color: #fff;
    position: relative;
    z-index: 0;
}
.ctc-vfs-popup-trigger.cta-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ctc-vfs-primary);
    z-index: -1;
    animation: ctc-vfs-pulse 1.8s ease-out infinite;
}
@keyframes ctc-vfs-pulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.18); opacity: 0;    }
    100% { transform: scale(1.18); opacity: 0;    }
}

/* ----- size modifiers (stack on any variant) ----- */
.ctc-vfs-popup-trigger.cta-small  { padding: 8px 16px;  font-size: 13px !important; }
.ctc-vfs-popup-trigger.cta-large  { padding: 16px 32px; font-size: 17px !important; }
.ctc-vfs-popup-trigger.cta-block  { display: flex; width: 100%; }