/* Shortcode [fortissimo_fysio]: fysiotherapie sessions on the website */

/* The text above the sessions: the content width, at most the container width of the site (1170 px); the appointments and sessions below it
   (fb-fysio-site__rooster) are narrow and centred (like the standings), with the text inside left-aligned.
   Tabular figures: all digits equally wide, so the times are aligned (a 1 is otherwise narrower than a 0). */
.fb-fysio-site {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.fb-fysio-site__rooster {
    max-width: 640px;
    margin-inline: auto;
}

/* Text above the sessions (Beheer > Fysiotherapie): compact, in a light block. Font and heading sizes from the site. */
.fb-fysio-site__tekst {
    /* At most as wide as the other content of the site (Elementor site settings, 1170 px), centred;
       also when the shortcode is in a full-width container. */
    max-width: var(--container-max-width, 1170px);
    margin: 0 auto 1.2em;
    box-sizing: border-box;
    padding: 12px 16px;
    background: #f7f7f7;
    border-left: 4px solid var(--e-global-color-accent, #FF0006);
}

.fb-fysio-site .fb-fysio-site__tekst h3,
.fb-fysio-site .fb-fysio-site__tekst h4 {
    margin: 0.3em 0 0.3em;
}

.fb-fysio-site__tekst p,
.fb-fysio-site__tekst ul,
.fb-fysio-site__tekst ol {
    margin: 0 0 0.5em;
}

.fb-fysio-site__tekst ul,
.fb-fysio-site__tekst ol {
    padding-left: 1.3em;
}

.fb-fysio-site__tekst > :first-child { margin-top: 0; }
.fb-fysio-site__tekst > :last-child  { margin-bottom: 0; }

/* Headings: font, size and colour of the site (Elementor Site Settings), only the spacing here */
.fb-fysio-site h3 {
    margin: 1.2em 0 0.5em;
}

.fb-fysio-site h4 {
    margin: 1.4em 0 0.4em;
}

.fb-fysio-site__tabel {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.fb-fysio-site__tabel th,
.fb-fysio-site__tabel td {
    padding: 6px 10px;
    text-align: left;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #eee;
    line-height: 1.3;
}

.fb-fysio-site__tabel thead th {
    background: #f0f0f0;
    border-bottom: 2px solid #ccc;
    font-weight: 600;
}

.fb-fysio-site__col-datum { width: 110px; white-space: nowrap; }
.fb-fysio-site__col-tijd  { width: 120px; white-space: nowrap; font-weight: 600; } /* times semi-bold */
.fb-fysio-site__col-actie { text-align: right; }

.fb-fysio-site__naam {
    font-weight: 700;
    margin-right: 10px;
}

.fb-fysio-site__bezet {
    color: #666;
}

.fb-fysio-site__vrij {
    color: #999;
    font-style: italic;
}

.fb-fysio-site__form {
    display: inline-block;
    margin: 0;
}

/* Inschrijven: club red, like "Vervul deze bardienst"; Annuleer: black */
.fb-fysio-site__form button {
    padding: 6px 12px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 0.9em;
    font-family: var(--e-global-typography-accent-font-family, "Montserrat"), Copperplate;
    font-weight: var(--e-global-typography-accent-font-weight, 500);
    text-transform: var(--e-global-typography-accent-text-transform, uppercase);
    letter-spacing: var(--e-global-typography-accent-letter-spacing, 1.7px);
    line-height: 1.2;
    cursor: pointer;
}

.fb-fysio-site__form button.fb-fysio-site__in,
.fb-fysio-site__form button.fb-fysio-site__in:hover,
.fb-fysio-site__form button.fb-fysio-site__in:focus {
    background: var(--e-global-color-accent, #FF0006);
}

.fb-fysio-site__form button.fb-fysio-site__uit,
.fb-fysio-site__form button.fb-fysio-site__uit:hover,
.fb-fysio-site__form button.fb-fysio-site__uit:focus {
    background: #000;
}

.fb-fysio-site__form button:hover,
.fb-fysio-site__form button:focus {
    filter: brightness(0.88);
    color: #fff;
}

.fb-fysio-site__melding {
    padding: 10px 14px;
    border-left: 4px solid;
}

.fb-fysio-site__melding--success { border-color: #2e7d32; background: #e8f5e9; }
.fb-fysio-site__melding--error   { border-color: #c62828; background: #ffebee; }

@media (max-width: 600px) {
    .fb-fysio-site__tabel th,
    .fb-fysio-site__tabel td {
        padding: 6px;
    }

    .fb-fysio-site__col-datum,
    .fb-fysio-site__col-tijd {
        width: 95px;
    }

    .fb-fysio-site__form button {
        padding: 6px 8px;
    }
}