/* ==========================================================================
   Workzish — CTA button effects only (clean background variant)
   Loaded last in <head>; uses higher-specificity selectors and limited
   !important so it can win against existing inline <style> blocks.

   Brand palette ONLY — no legacy green:
     • #d83924  Workzish red (primary)
     • #b02a18  Red 700
     • #7a1d10  Red 900
     • #fff     Shimmer (palette-neutral)
   ========================================================================== */

:root {
    --wz-primary: #d83924;
    --wz-primary-700: #b02a18;
    --wz-primary-900: #7a1d10;
    --wz-glow-primary: rgba(216, 57, 36, 0.45);
    --wz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   1. Accessibility — focus rings (kept for keyboard users)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--wz-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   2. CTA buttons — futuristic shimmer + glow + lift
   ========================================================================== */

/* Base prep — applied to every primary-style CTA */
.btn-primary,
.blog-cta-btn,
.popup-cta-btn,
a.btn.btn-primary,
button.btn.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s var(--wz-ease),
                box-shadow 0.35s var(--wz-ease),
                filter 0.35s var(--wz-ease),
                background-position 0.6s var(--wz-ease);
    background-size: 200% auto;
    background-position: 0% 0%;
    will-change: transform;
}

/* Diagonal light sweep that animates across button on hover */
.btn-primary::before,
.blog-cta-btn::before,
.popup-cta-btn::before,
a.btn.btn-primary::before,
button.btn.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 70%
    );
    transform: translateX(-130%) skewX(-15deg);
    transition: transform 0.75s var(--wz-ease);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

.btn-primary:hover::before,
.blog-cta-btn:hover::before,
.popup-cta-btn:hover::before,
a.btn.btn-primary:hover::before,
button.btn.btn-primary:hover::before {
    transform: translateX(130%) skewX(-15deg);
}

/* Soft outer glow + lift on hover (Workzish red) */
.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.popup-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 14px 38px -10px var(--wz-glow-primary),
        0 0 0 1px rgba(216, 57, 36, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.06) !important;
    filter: brightness(1.05) saturate(1.05);
}

/* Active (pressed) micro-interaction */
.btn-primary:active,
.blog-cta-btn:active,
.popup-cta-btn:active,
a.btn.btn-primary:active,
button.btn.btn-primary:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 0.12s;
}

/* Blog CTA banners — deeper red glow on hover (button only, not banner bg) */
body .blog-cta-banner .blog-cta-btn:hover,
body .blog-bottom-cta .blog-cta-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 16px 42px -10px var(--wz-glow-primary),
        0 0 0 1px rgba(216, 57, 36, 0.22),
        0 3px 8px rgba(0, 0, 0, 0.08) !important;
    filter: brightness(1.04) saturate(1.06);
}

/* Text-style buttons — small arrow nudge on hover */
.btn-text i {
    transition: transform 0.35s var(--wz-ease);
    display: inline-block;
}

.btn-text:hover i,
.blog-cta-btn:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   3. Header CTA pill — gradient pan refinement
   ========================================================================== */

.uc-navbar-right .btn.btn-primary.rounded-pill {
    background-image: linear-gradient(
        100deg,
        var(--wz-primary) 0%,
        var(--wz-primary-700) 50%,
        var(--wz-primary) 100%
    );
    background-size: 220% auto;
    transition: background-position 0.7s var(--wz-ease),
                transform 0.35s var(--wz-ease),
                box-shadow 0.35s var(--wz-ease);
}

.uc-navbar-right .btn.btn-primary.rounded-pill:hover {
    background-position: 100% 0%;
}

/* ==========================================================================
   4. "Coming Soon" — feature flag chip (nav) + module state (pricing)
   --------------------------------------------------------------------------
   Two coordinated treatments share the same amber gradient identity:
     • .wz-soon-chip       → small inline pill placed beside nav link titles
     • .module-card.coming-soon + .coming-soon-badge → pricing card overlay
   Amber (#f59e0b → #d97706) sits clearly apart from the brand red so users
   read it as informational ("on the way") rather than promotional.
   ========================================================================== */

/* Inline chip beside feature name in dropdown / offcanvas nav links —
   futuristic pan: brand red gradient slides across, ambient glow, pulsing
   status dot. Reduced-motion users get a static version (rule at bottom). */
.wz-soon-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px 2px 7px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background-image: linear-gradient(
        110deg,
        var(--wz-primary) 0%,
        var(--wz-primary-700) 35%,
        var(--wz-primary-900) 50%,
        var(--wz-primary-700) 65%,
        var(--wz-primary) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    border-radius: 999px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 0 10px rgba(216, 57, 36, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.30);
    white-space: nowrap;
    vertical-align: middle;
    transform: translateY(-1px);
    pointer-events: none;
    user-select: none;
    animation: wz-chip-pan 4s linear infinite;
}

/* Pulsing white status dot — reads as a "live / live-ish" signal */
.wz-soon-chip::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.95),
        0 0 10px rgba(255, 255, 255, 0.55);
    animation: wz-chip-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes wz-chip-pan {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes wz-chip-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* Slightly tighter inside the desktop rich-card dropdown */
.uc-navbar-dropdown-nav .wz-soon-chip {
    margin-left: 6px;
    padding: 1px 7px 1px 6px;
    gap: 4px;
}

/* Pricing — disabled coming-soon module card */
.module-card.coming-soon {
    cursor: not-allowed !important;
    opacity: 0.78;
    filter: saturate(0.9);
    border-style: dashed !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
}

.module-card.coming-soon:hover {
    transform: none !important;
    box-shadow: none !important;
}

.module-card.coming-soon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        135deg,
        rgba(217, 119, 6, 0.05) 0 8px,
        rgba(217, 119, 6, 0) 8px 18px
    );
    pointer-events: none;
    z-index: 1;
}

/* Hide the default "Core" badge when the card is flagged coming soon */
.module-card.coming-soon .core-badge {
    display: none;
}

/* Keep the price row visible but de-emphasised */
.module-card.coming-soon .mod-price-row {
    opacity: 0.6;
}

/* Top-right corner tag — matches core-badge geometry, amber palette */
.coming-soon-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(110deg, #f59e0b 0%, #d97706 100%);
    border-radius: 0 8px 0 8px;
    box-shadow:
        0 2px 8px rgba(217, 119, 6, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.coming-soon-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
    animation: wz-soon-pulse 2s ease-in-out infinite;
}

@keyframes wz-soon-pulse {
    0%, 100% { opacity: 0.6; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1);  }
}

/* ==========================================================================
   5. Reduced-motion accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
