/**
 * [booknetic-portal] — the tab strip only. Everything inside the "My
 * appointments" pane lives in the panel's own shadow root and is styled there.
 */

.bkntc-portal {
    --cp-accent: #0b6a66;
    --cp-radius: 10px;
    --cp-max-width: 900px;

    display: block;
    /* Deliberately NOT capped here. Booknetic's booking panel is a rigid
       980px-wide block that cannot shrink, so a narrower cap on the container
       would push it out of the tab strip and give the page a sideways scrollbar
       — the same mis-alignment, mirrored. The cap lives on the panel pane. */
    margin-inline: 0 auto;
}

/* Both panes start at the same left edge. The booking panel centres itself when
   the theme hides its step bar; that is undone here only. */
.bkntc-portal .wp-block-booknetic-booking {
    display: block;
    justify-content: flex-start;
}

.bkntc-portal .booknetic_appointment {
    margin-inline: 0 auto;
}

/* The booking panel has a hard minimum width; let it scroll rather than push
   the page sideways on a narrow screen. */
.bkntc-portal-pane[data-portal-pane="book"] {
    overflow-x: auto;
}

.bkntc-portal-pane[data-portal-pane="panel"] {
    max-width: var(--cp-max-width);
}

.bkntc-portal-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(125, 144, 148, 0.32);
    margin-bottom: 18px;
}

.bkntc-portal-tab {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: rgba(77, 95, 99, 0.9);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 11px 16px;
    margin-bottom: -1px;
    cursor: pointer;
}

.bkntc-portal-tab:hover {
    color: var(--cp-accent);
}

.bkntc-portal-tab.is-active {
    color: var(--cp-accent);
    border-bottom-color: var(--cp-accent);
}

.bkntc-portal-tab:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.bkntc-portal-pane {
    display: none;
    /* Both panes reserve the same box, so switching tabs never shifts the page
       under the customer's cursor. */
    min-height: 420px;
}

.bkntc-portal-pane.is-active {
    display: block;
}

@media (prefers-color-scheme: dark) {
    .bkntc-portal-tab {
        color: rgba(163, 180, 183, 0.9);
    }

    .bkntc-portal-tabs {
        border-bottom-color: rgba(163, 180, 183, 0.26);
    }
}