/*
 * "Special Appointments" callout on the Bookly time step.
 *
 * A clean informational callout (not a notification banner): white surface,
 * a subtle border, and a prominent orange left accent that matches the
 * theme's existing .privacy-card callouts (border-left 4px #f97316). Body
 * text is black for readability; only the phone and email carry the brand
 * blue (#002d70) to signal they are tel:/mailto: links.
 *
 * Desktop: the card floats into the same row as the calendar and the slot
 * columns (see the desktop block at the bottom of this file).
 * Mobile and browsers without :has(): full-width stacked card.
 *
 * The padding/margin carry !important: other styles on this site override
 * plain spacing on elements inside .bookly-form.
 */

.nhl-bd-card {
    box-sizing: border-box;
    clear: both;
    margin: 0 0 20px;
    padding: 18px 20px !important;
    background: #ffffff;
    /* !important: the same site-wide overrides that strip plain padding inside
       .bookly-form also strip the border/shadow, so force them. */
    border: 1px solid #e6e8ec !important;
    border-left: 5px solid #f97316 !important;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 6px 22px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.10) !important;
}

.nhl-bd-card .nhl-bd-title {
    margin: 0 0 8px;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #000000;
}

.nhl-bd-card .nhl-bd-msg {
    margin: 0 0 10px;
    padding: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #000000;
}

.nhl-bd-card .nhl-bd-note {
    margin: 0 0 14px;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #000000;
}

.nhl-bd-card .nhl-bd-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #002d70;
    text-decoration: none !important;
    white-space: nowrap;
}

.nhl-bd-phone-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #002d70;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.nhl-bd-card .nhl-bd-email {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #002d70;
    text-decoration: none !important;
    word-break: break-all;
}

.nhl-bd-email-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #002d70;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Interactive states for the tel: / mailto: links (kept blue, darkened on
   hover/focus, no underline, with a visible keyboard focus ring for a11y). */
.nhl-bd-card .nhl-bd-link:hover,
.nhl-bd-card .nhl-bd-email:hover,
.nhl-bd-card .nhl-bd-link:focus-visible,
.nhl-bd-card .nhl-bd-email:focus-visible {
    color: #001a44;
    text-decoration: none !important;
}

.nhl-bd-card a:focus-visible {
    outline: 2px solid #002d70;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Desktop: the card sits in the same float row as the calendar and the slot
   columns, directly to the right of the slots. Two overrides make that work:
   the slots container (.bookly-time-step) must float so the card (rendered
   after it) can share the row, and its width must be forced back to auto —
   Bookly's JS (bookly.js:20891) sets an inline width of columns_per_screen x
   column_width on it, which invisibly fills the row even when calendar mode
   renders a single day column. width:auto !important beats the inline style
   and lets the float shrink-wrap to the visible column(s). If the row still
   runs out of room the card gracefully wraps below; the nav row's own
   clear:both keeps the buttons underneath either way. */
@supports selector(:has(*)) {
    @media (min-width: 769px) {
        .bookly-form:has(.nhl-bd-card) .bookly-time-step {
            float: left;
            width: auto !important;
        }

        .nhl-bd-card {
            float: left;
            clear: none;
            width: 340px;
            margin: 0 0 20px 48px !important;
        }
    }
}