/* ==========================================================================
   Wealth Building Financial — /appointment/
   Loaded only on the appointment page (see layouts/partials/headers.html).
   ========================================================================== */

/* Appointment page: the Calendly embed ------------------------------------
   Sizing used to live in a style attribute on the widget div, which is why
   /appointment/ needs its own looser CSP (see static/_headers). Calendly still
   injects inline styles of its own, so that policy stays — but the site's own
   sizing belongs here, and it can be responsive rather than a flat 1200px.

   The widget also takes a moment to arrive, and until it does the reserved
   space was simply blank: a visitor who had just clicked "book a consultation"
   landed on an empty page. The container now carries its own surface and a
   spinner, both of which the injected iframe paints over on arrival. */
.appointment-scheduler .calendly-inline-widget {
    position: relative;
    isolation: isolate;
    min-width: 320px;
    /* Tall enough for the month grid without stranding the page footer a
       screen and a half below the fold on a laptop. */
    height: clamp(680px, 88vh, 1100px);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.appointment-scheduler .calendly-inline-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Behind the injected iframe. Without this the pseudo-element would paint
       over it: an iframe is inline-level content and is painted before
       positioned descendants in the same stacking context. */
    z-index: -1;
    background: var(--color-bg-light);
}

.appointment-scheduler .calendly-inline-widget::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 120px;
    left: 50%;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border: 3px solid var(--color-border-strong);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: appointment-spin 0.9s linear infinite;
}

@keyframes appointment-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .appointment-scheduler .calendly-inline-widget::after {
        animation: none;
    }
}

/* The way out when the embed does not load, or when someone would simply
   rather not book through a third-party calendar. */
.appointment-fallback {
    margin: 20px 0 0;
    padding: 16px 18px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-muted-3);
}

.appointment-fallback i {
    margin-right: 8px;
    color: var(--color-info);
}