/**
 * sticky-cta.css — ONA Clinic floating mobile CTA bar
 *
 * A fixed bottom bar visible only on mobile/tablet (< 992px).
 * Contains two actions: WhatsApp (primary) and Book Appointment (secondary).
 * Slides up on page load after a short delay, hides when the main
 * footer booking form scrolls into view so it never overlaps it.
 *
 * Colours follow the ONA brand palette defined in custom.css:
 *   --primary-color     : #8a3e48  (burgundy — Book button)
 *   --primary-dark-color: #48593f  (green — WhatsApp button)
 */

/* ── Outer bar ─────────────────────────────────────────────── */
#ona-sticky-cta {
    position        : fixed;
    bottom          : 0;
    left            : 0;
    right           : 0;
    z-index         : 9990;
    display         : flex;
    align-items     : stretch;
    background      : #1d1d1b;
    box-shadow      : 0 -4px 24px rgba(0, 0, 0, .22);

    /* Slide in from below */
    transform       : translateY(100%);
    transition      : transform .45s cubic-bezier(.16, .84, .3, 1),
                      opacity   .45s ease;
    opacity         : 0;
}

#ona-sticky-cta.cta-visible {
    transform : translateY(0);
    opacity   : 1;
}

#ona-sticky-cta.cta-hidden {
    transform : translateY(110%);
    opacity   : 0;
    pointer-events: none;
}

/* ── Shared button styles ──────────────────────────────────── */
.ona-cta-btn {
    flex            : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .6rem;
    padding         : .95rem 1rem;
    font-size       : .88rem;
    font-weight     : 600;
    letter-spacing  : .04em;
    text-decoration : none;
    text-transform  : uppercase;
    border          : none;
    cursor          : pointer;
    transition      : filter .2s ease, transform .15s ease;
    white-space     : nowrap;
    font-family     : inherit;
}

.ona-cta-btn:active {
    transform : scale(.97);
}

.ona-cta-btn svg {
    width  : 1.15em;
    height : 1.15em;
    flex-shrink: 0;
}

/* ── WhatsApp button ───────────────────────────────────────── */
.ona-cta-whatsapp {
    background : #48593f;   /* --primary-dark-color */
    color      : #f5f0e8;
    border-right: 1px solid rgba(245, 240, 232, .15);
}

.ona-cta-whatsapp:hover {
    filter : brightness(1.12);
    color  : #ffffff;
}

/* ── Book button ───────────────────────────────────────────── */
.ona-cta-book {
    background : #8a3e48;   /* --primary-color */
    color      : #f5f0e8;
}

.ona-cta-book:hover {
    filter : brightness(1.12);
    color  : #ffffff;
}

/* ── Dismiss / close button ────────────────────────────────── */
.ona-cta-close {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 36px;
    min-width       : 36px;
    background      : rgba(255, 255, 255, .07);
    color           : rgba(255, 255, 255, .5);
    border          : none;
    cursor          : pointer;
    font-size       : 1rem;
    transition      : background .2s, color .2s;
    padding         : 0;
}

.ona-cta-close:hover {
    background : rgba(255, 255, 255, .15);
    color      : #ffffff;
}

/* ── Only show on mobile / tablet ──────────────────────────── */
@media (min-width: 992px) {
    #ona-sticky-cta { display: none !important; }
}

/* ── Safe-area padding for iPhone notch / home-bar ────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #ona-sticky-cta {
        padding-bottom: env(safe-area-inset-bottom);
    }
}