/**
 * 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 — explicit margin handles spacing */
.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;
}

/* Explicit spacing between stack items — very specific to beat theme overrides */
.hrck-cta-stack.hrck-cta-stack--desktop > .hrck-cta-item[data-hrck-cta],
.hrck-cta-stack.hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta] {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}
.hrck-cta-stack.hrck-cta-stack--desktop > .hrck-cta-item[data-hrck-cta]:last-child,
.hrck-cta-stack.hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta]:last-child {
    margin-bottom: 0 !important;
}

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

/* Visible state — applied by JS after relocation */
.hrck-cta-item.hrck-cta-visible {
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
    transform: none !important;
}

/* Animation Modes (motion-safe only, opacity-only to avoid transform layout side-effects) */
@media (prefers-reduced-motion: no-preference) {
    .hrck-cta-stack[data-animation="fade"] .hrck-cta-item.hrck-cta-visible,
    .hrck-cta-stack[data-animation="cascade"] .hrck-cta-item.hrck-cta-visible,
    .hrck-cta-stack[data-animation="slide-up"] .hrck-cta-item.hrck-cta-visible {
        animation: hrck-fade-in 0.4s 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 — the tool's own CSS sets .hrck-split-cost-trigger--mobile to
   position: absolute; bottom: 100% (designed to perch on top of the sticky
   booking widget like a tab on a shelf). When the orchestrator places Split
   Cost inside the mobile stack with context="mobile", that legacy positioning
   yanks it out of flow and overlays it onto the item above (root cause of the
   "Price Alerts + Split Cost merged into one red box" bug). Reset to static. */
.hrck-cta-item .hrck-split-cost-trigger {
    display: block !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !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;
    }
}

/* Mid-mobile breakpoint: lay out CTAs in 2 columns so the 4 tool buttons
   form a 2x2 grid instead of a tall single column. Below 446px the stack
   collapses back to a single column for phone screens. Rate Comparison
   (checkout only) spans both columns so the savings badge stays full-width. */
@media (min-width: 446px) and (max-width: 945px) {
    .hrck-cta-stack--mobile {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        row-gap: 8px;
        margin-top: 12px;
    }

    /* Neutralize the per-item bottom margin from the generic spacing rule
       above — grid gap handles spacing in this breakpoint. */
    .hrck-cta-stack.hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta] {
        margin: 0 !important;
    }

    /* Rate Comparison: full-width savings row on checkout */
    .hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta="rate_comparison"] {
        grid-column: 1 / -1;
    }
}