/**
 * CTA Orchestrator — Stack layout and animation styles
 *
 * Animation modes: none, fade, cascade, slide-up
 * Respects prefers-reduced-motion for accessibility.
 * Uses opacity + transform only (GPU composited, no layout shift).
 */

/* Stack Container */
.hrck-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* Reset tool-specific margins/padding inside the stack — gap handles spacing */
.hrck-cta-item,
.hrck-cta-item > div,
.hrck-cta-item .hrck-desktop-badge,
.hrck-cta-item .hrck-pa-cta-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Individual CTA Wrapper — fully collapsed until JS adds .hrck-cta-visible */
.hrck-cta-item {
    display: none;
    opacity: 0;
    transform: translateY(0);
}

/* Visible state — applied by JS after relocation */
.hrck-cta-item.hrck-cta-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Animation Modes (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
    .hrck-cta-stack[data-animation="fade"] .hrck-cta-item.hrck-cta-visible {
        animation: hrck-fade-in 0.4s ease both;
    }

    .hrck-cta-stack[data-animation="cascade"] .hrck-cta-item.hrck-cta-visible {
        animation: hrck-cascade-in 0.4s ease both;
    }

    .hrck-cta-stack[data-animation="slide-up"] .hrck-cta-item.hrck-cta-visible {
        animation: hrck-slide-up 0.3s ease both;
    }
}

@keyframes hrck-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hrck-cascade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hrck-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* No animation — instant display */
.hrck-cta-stack[data-animation="none"] .hrck-cta-item.hrck-cta-visible {
    animation: none;
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
    .hrck-cta-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Override tool-specific display:none when inside orchestrator stack.
   Some wrapper_class values match the tool's own container class, so the
   orchestrator wrapper itself gets display:none. Use same-element selectors
   (no space) for the wrapper, and descendant selectors for inner elements. */
/* Rate Comparison */
.hrck-cta-item .hrck-rate-comparison-wrapper {
    display: flex !important;
    margin: 0 !important;
}

/* Price Alerts */
.hrck-cta-item .hrck-pa-cta-container {
    display: block !important;
    margin: 0 !important;
}

/* Split Cost */
.hrck-cta-item .hrck-split-cost-trigger {
    display: block !important;
    margin: 0 !important;
}

/* Contact Form */
.hrck-cta-item .hrck-contact-trigger {
    display: block !important;
    margin: 0 !important;
}

/* Booking Reminder */
.hrck-cta-item .hrck-br-trigger {
    display: block !important;
    margin: 0 !important;
}

/* Desktop / Mobile Stack Visibility — !important to override .uk-scope specificity */
.hrck-cta-stack--mobile {
    display: none !important;
}

@media (max-width: 959px) {
    .hrck-cta-stack--desktop {
        display: none !important;
    }

    .hrck-cta-stack--mobile {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
    }
}