/* ==========================================================================
   Top bar CTAs: "Chat on WhatsApp" + "Book a Meeting" (Calendly popup).
   Sits at the right corner of the blue top bar. Scoped to .iseo-header.
   ========================================================================== */

.iseo-header .iseo-topbar-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.topbar {
    padding: 8px 0 !important;
}

/* Pill CTAs, each with its own brand-colored gradient. Padding/font-size
   (i.e. the button's size) are unchanged from the original — only color,
   shape and motion were redesigned. */
.iseo-header .iseo-topbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background-color: #fff;
    color: var(--iseo-primary, #1778BE);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}

.iseo-header .iseo-topbar-btn i {
    font-size: 17px;
    line-height: 1;
    transition: transform .2s ease;
}

.iseo-header .iseo-topbar-btn:hover,
.iseo-header .iseo-topbar-btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.iseo-header .iseo-topbar-btn:hover i,
.iseo-header .iseo-topbar-btn:focus-visible i {
    transform: scale(1.1);
}

.iseo-header .iseo-topbar-btn:active {
    transform: translateY(0);
}

.iseo-header .iseo-topbar-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Chat on WhatsApp: WhatsApp-green gradient. */
.iseo-header .iseo-topbar-btn--wa {
    background: linear-gradient(135deg, #2be07f, #1da851);
    color: #fff;
    box-shadow: 0 2px 8px rgba(29, 168, 81, .35);
}

.iseo-header .iseo-topbar-btn--wa:hover,
.iseo-header .iseo-topbar-btn--wa:focus-visible {
    box-shadow: 0 4px 14px rgba(29, 168, 81, .5);
}

/* Book a Meeting: on-brand blue, white pill so it still reads clearly
   against the blue top bar, with a pulsing blue glow to draw the eye as
   the primary conversion CTA. Pulse pauses on hover/focus so it doesn't
   fight the hover lift, and is disabled for users who prefer reduced motion. */
.iseo-header .iseo-topbar-btn--book {
    background: linear-gradient(135deg, #ffffff, #eaf4fb);
    color: var(--iseo-primary, #1778BE);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    animation: iseo-book-pulse 2.2s ease-out infinite;
}

.iseo-header .iseo-topbar-btn--book:hover,
.iseo-header .iseo-topbar-btn--book:focus-visible {
    animation-play-state: paused;
    background: var(--iseo-primary, #1778BE);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

@keyframes iseo-book-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .iseo-header .iseo-topbar-btn--book {
        animation: none;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {

    /* Top bar content is centred on small screens; keep the buttons on their own row. */
    .iseo-header .iseo-topbar-cta {
        width: 100%;
        justify-content: center;
        margin: 4px 0 2px;
    }

    .iseo-header .iseo-topbar-btn {
        padding: 3px 12px;
        font-size: 13px;
    }
}

@media (max-width: 575px) {

    /* Share the row so both pills always fit on narrow phones. */
    .iseo-header .iseo-topbar-cta {
        gap: 6px;
    }

    .iseo-header .iseo-topbar-btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding: 10px 8px;
        font-size: 12px;
        border-radius: 8px;
    }

    .iseo-header .iseo-topbar-btn i {
        font-size: 15px;
    }
}