/* ================================================
   med1030 Sticky Call Bar — sticky-bar.css
   Mobile-first · Vienna medical practice
   ================================================ */

/* ── Custom properties (easy to re-theme) ──── */
:root {
    --msb-bg:           #ffffff;
    --msb-border:       #e8edf2;
    --msb-call:         #1a6ebd;          /* trustworthy medical blue */
    --msb-call-hover:   #145a9e;
    --msb-book:         #1a6ebd;
    --msb-book-hover:   #145a9e;
    --msb-open-color:   #1db87a;
    --msb-closed-color: #e05252;
    --msb-text:         #1c2940;
    --msb-muted:        #6b7f99;
    --msb-radius:       14px;
    --msb-font:         'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --msb-shadow:       0 -4px 24px rgba(28, 41, 64, 0.10),
                        0 -1px 4px  rgba(28, 41, 64, 0.06);
    --msb-height:       72px;
    --msb-safe:         env(safe-area-inset-bottom, 0px); /* iOS home bar */
}

/* ── Reset inside bar ─────────────────────── */
#med1030-sticky-bar *,
#med1030-sticky-bar *::before,
#med1030-sticky-bar *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── The bar itself ───────────────────────── */
#med1030-sticky-bar {
    /* Hidden on desktop — show only on mobile */
    display: none;

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    background: var(--msb-bg);
    border-top: 1px solid var(--msb-border);
    box-shadow: var(--msb-shadow);
    font-family: var(--msb-font);

    /* Account for iOS notch / Android nav bar */
    padding-bottom: var(--msb-safe);

    /* Slide-up entrance */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity   0.3s ease;
}

#med1030-sticky-bar.msb-visible {
    transform: translateY(0);
    opacity: 1;
}

/* ── Status pill ──────────────────────────── */
.msb-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msb-muted);
}

.msb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--msb-muted);
    flex-shrink: 0;
    transition: background 0.3s;
}

.msb-status.is-open  .msb-dot         { background: var(--msb-open-color); animation: msb-pulse 2s infinite; }
.msb-status.is-open  .msb-status-text { color: var(--msb-open-color); }
.msb-status.is-closed .msb-dot        { background: var(--msb-closed-color); }
.msb-status.is-closed .msb-status-text{ color: var(--msb-closed-color); }

@keyframes msb-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(29, 184, 122, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(29, 184, 122, 0);   }
}

/* ── Actions row ──────────────────────────── */
.msb-actions {
    display: flex;
    align-items: stretch;
    height: var(--msb-height);
    gap: 0;
}

/* ── Buttons ──────────────────────────────── */
.msb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    font-family: var(--msb-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 0.18s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
    /* Minimum 44px tap target (WCAG 2.5.5) */
    min-height: 44px;
    padding: 0 8px;
    cursor: pointer;
    user-select: none;
}

.msb-btn:active {
    transform: scale(0.97);
}

/* Call button — solid medical blue */
.msb-btn--call {
    background: var(--msb-call);
    color: #ffffff;
    border-radius: 0;
}
.msb-btn--call:hover,
.msb-btn--call:focus-visible {
    background: var(--msb-call-hover);
    outline: none;
}

/* Directions button — warm green, suggests navigation */
.msb-btn--directions {
    background: #f0f9f4;
    color: #1a7a4a;
    border-radius: 0;
}
.msb-btn--directions:hover,
.msb-btn--directions:focus-visible {
    background: #d6f0e3;
    outline: none;
}

.msb-btn svg {
    flex-shrink: 0;
}

/* ── Divider ──────────────────────────────── */
.msb-divider {
    width: 1px;
    background: var(--msb-border);
    margin: 12px 0;
    flex-shrink: 0;
}

/* ── Show only on mobile (≤ 768px) ───────── */
@media (max-width: 768px) {
    #med1030-sticky-bar {
        display: flex;
        flex-direction: column;
    }

    /* Push page content up so bar doesn't cover it */
    body {
        padding-bottom: calc(var(--msb-height) + 24px + var(--msb-safe));
    }
}

/* ── Respect user reduced-motion preference ─ */
@media (prefers-reduced-motion: reduce) {
    #med1030-sticky-bar {
        transition: none;
    }
    .msb-dot {
        animation: none !important;
    }
}