/* SerionBooking8 – public styles. Everything is scoped to .bsp / .bsp-* so it cannot leak into the theme.
   Colours follow the SERION theme variables when present; an accent saved in the plugin settings is applied for other themes. */
.bsp, .bsp-agenda, .bsp-booking-dialog, .bsp-single-title-category {
	--bsp-accent: var(--serion-primary, #ff5a36);
	--bsp-accent-contrast: #fff;
	--bsp-ink: var(--serion-green, #1c1f26);
	--bsp-text: var(--serion-text, #1c1f26);
	--bsp-muted: #5f6f66;
	--bsp-border: var(--serion-border, #e3e8e4);
	--bsp-surface: #fff;
	--bsp-soft: var(--serion-soft, #f4f8f3);
	--bsp-yellow: var(--serion-yellow, #ffd43b);
	--bsp-free: #12a26a;
	--bsp-radius: var(--serion-card-radius, 20px);
	--bsp-img-radius: 20px;
	--bsp-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 10px 28px rgba(16, 24, 40, .07);
}
.bsp, .bsp *, .bsp *::before, .bsp *::after, .bsp-agenda *, .bsp-booking-dialog * { box-sizing: border-box; }
.bsp { color: var(--bsp-text); font-size: 16px; line-height: 1.5; margin: 0 0 2rem; }
.bsp p, .bsp-agenda p, .bsp-booking-dialog p { text-align: left; }
.bsp-card { background: var(--bsp-surface); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius); box-shadow: var(--bsp-shadow); overflow: hidden; }
.bsp-h { font-size: 1.25rem; margin: 0 0 .75rem; }
.bsp-notice { background: var(--bsp-soft); border-radius: 12px; margin: 0; padding: 1rem 1.25rem; }

/* Buttons */
.bsp-btn { appearance: none; background: var(--bsp-accent); border: 0; border-radius: var(--serion-button-radius, 999px); color: var(--bsp-accent-contrast); cursor: pointer; display: inline-block; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1; padding: .95rem 1.6rem; text-align: center; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.bsp-btn:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .15); transform: translateY(-1px); }
.bsp-btn:disabled, .bsp-btn.is-disabled { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }
.bsp-btn--book { background: var(--bsp-yellow); color: var(--bsp-ink); }
.bsp-btn--book:hover { color: var(--bsp-ink); filter: brightness(.96); }
.bsp-badge { background: var(--bsp-ink); border-radius: 999px; color: #fff; display: inline-block; font-size: .8rem; font-weight: 700; line-height: 1; padding: .4rem .75rem; }
.bsp-badge--free { background: var(--bsp-free); }

/* Filters and forms */
.bsp-filters { align-items: end; display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; padding: 1.1rem; }
.bsp-filters p, .bsp-form p { margin: 0; }
.bsp label { color: var(--bsp-muted); display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.bsp input[type="text"], .bsp input[type="email"], .bsp input[type="tel"], .bsp input[type="date"], .bsp select { background: #fff; border: 1px solid var(--bsp-border); border-radius: 12px; color: var(--bsp-text); font-family: inherit; font-size: 1rem; font-weight: 400; height: 3rem; max-width: 100%; padding: 0 .9rem; width: 100%; }
.bsp input:focus, .bsp select:focus { border-color: var(--bsp-accent); box-shadow: 0 0 0 3px rgba(67, 201, 90, .2); outline: 0; }
.bsp-form__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
.bsp-hp { height: 1px !important; left: -10000px !important; overflow: hidden; position: absolute !important; width: 1px !important; }
.bsp-check label { align-items: flex-start; color: var(--bsp-text); display: flex; font-size: .9rem; font-weight: 400; gap: .6rem; }
.bsp-check input { margin-top: .25rem; }
.bsp-hint { color: var(--bsp-muted); font-size: .9rem; margin: .75rem 0 !important; }
.bsp-form .bsp-btn { margin-top: .75rem; }
.bsp-form__msg { border-radius: 12px; font-weight: 600; margin-top: 1rem; }
.bsp-form__msg.is-error, .bsp-form__msg.is-success { padding: .8rem 1rem; }
.bsp-form__msg.is-error { background: #fdecea; color: #b42318; }
.bsp-form__msg.is-success { background: #e7f6ef; color: #0b6b45; }
.bsp-booking .bsp-card { padding: 1.4rem; }

/* CAPTCHA */
.bsp-captcha { background: var(--bsp-soft); border-radius: 14px; display: grid; gap: .5rem; margin-bottom: 1rem; padding: 1rem; }
.bsp-captcha__row { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; }
.bsp-captcha__image { background: #f4f7f5; border: 1px solid #d6e0da; border-radius: 10px; display: block; height: auto; max-width: 100%; width: 220px; }
.bsp-captcha__refresh { background: none; border: 1px solid var(--bsp-border); border-radius: 999px; color: var(--bsp-ink); cursor: pointer; font-size: .8rem; font-weight: 700; padding: .45rem .9rem; }
.bsp-captcha input[name="bsp_captcha_answer"] { letter-spacing: .16em; max-width: 220px; text-transform: uppercase; }
.bsp-captcha small { color: var(--bsp-muted); }

/* Listing grid */
.bsp-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.bsp-session { display: flex; flex-direction: column; min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }
.bsp-session:hover { box-shadow: 0 6px 14px rgba(16, 24, 40, .08), 0 18px 40px rgba(16, 24, 40, .1); transform: translateY(-2px); }

/* Featured image tile: rounded on all corners, constant ratio, clean crop, mobile friendly */
.bsp-session__media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--bsp-accent), var(--bsp-ink)); border-radius: var(--bsp-img-radius); display: block; isolation: isolate; margin: 12px 12px 0; overflow: hidden; position: relative; }
.bsp .bsp-session__media img, .bsp .bsp-session__placeholder { display: block; height: 100%; max-width: none; object-fit: cover; object-position: center; transition: transform .5s ease; width: 100%; }
.bsp-session:hover .bsp-session__media img { transform: scale(1.04); }
.bsp-session__media .bsp-badge { left: .85rem; position: absolute; top: .85rem; z-index: 1; }
.bsp-session__category-under-image { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 14px 0; }
.bsp-session__category-under-image a { background: #198754; border-radius: 8px; color: #fff !important; display: inline-flex; font-size: .82rem; font-weight: 700; padding: 6px 12px; text-decoration: none; }
.bsp-session__category-under-image a:hover { background: #146c43; }
.bsp-session__body { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: .9rem 1.2rem 1.25rem; }
.bsp-session__when { color: var(--bsp-accent); font-size: .85rem; font-weight: 700; margin: 0; text-transform: uppercase; }
.bsp-session__title { font-size: 1.2rem; line-height: 1.25; margin: 0; }
.bsp-session__title a { color: inherit; text-decoration: none; }
.bsp-session__where { color: var(--bsp-muted); font-size: .92rem; margin: 0; }
.bsp-bar { background: var(--bsp-border); border-radius: 999px; height: 6px; margin-top: .6rem; overflow: hidden; }
.bsp-bar span { background: var(--bsp-accent); display: block; height: 100%; }
.bsp-session__left { color: var(--bsp-muted); font-size: .85rem; margin: .2rem 0 .8rem; }
.bsp-session .bsp-card__actions { margin-top: auto; }
.bsp-card__actions { display: flex; justify-content: flex-start; }
.bsp-pager, .bsp-theme-archive .pagination { margin-top: 1.5rem; text-align: center; }
.bsp-pager .page-numbers, .bsp-theme-archive .page-numbers { border: 1px solid var(--bsp-border); border-radius: 10px; color: var(--bsp-text); display: inline-block; margin: 0 .15rem; padding: .45rem .8rem; text-decoration: none; }
.bsp-pager .current, .bsp-theme-archive .current { background: var(--bsp-accent); border-color: var(--bsp-accent); color: #fff; }

/* Frontpage sections */
.bsp-trainings-section .bsp, .bsp-agenda-section .bsp-agenda { margin-bottom: 0; }

/* Single session */
.bsp-single-title-category { margin: 10px 0 22px; }
.bsp-single-title-category a { align-items: center; background: #198754; border-radius: 8px; color: #fff !important; display: inline-flex; font-weight: 800; margin-right: 8px; padding: 8px 14px; text-decoration: none !important; }
.bsp-single-title-category a:hover { background: #146c43; }
.bsp-single-page .bsp-featured { border-radius: 24px; overflow: hidden; }
.bsp-single-page .bsp-featured img { border-radius: inherit; }
.bsp-single { margin: 0 0 1.5rem; }
.bsp-meta { list-style: none; margin: 0; padding: 0; }
.bsp-meta li { align-items: baseline; border-bottom: 1px solid var(--bsp-border); display: flex; gap: 1rem; justify-content: space-between; margin: 0; padding: .9rem 1.25rem; }
.bsp-meta__label { color: var(--bsp-muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bsp-meta__value { font-weight: 600; text-align: right; }
.bsp-meta__value small { color: var(--bsp-muted); display: block; font-weight: 400; }
.bsp-info__footer { align-items: center; background: var(--bsp-soft); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-between; padding: 1.1rem 1.25rem; }
.bsp-info__availability { flex: 1 1 220px; min-width: 0; }
.bsp-info__availability strong { display: block; font-size: 1.05rem; }
.bsp-map { margin-top: 1.5rem; }
.bsp-map__frame iframe { border: 0; display: block; height: 320px; width: 100%; }
.bsp-map__link { color: var(--bsp-muted); font-size: .85rem; margin: .5rem 0 0; }
.bsp-map__credit { margin-left: .75rem; }
.single-bsp_session .pdf, .single-bsp_session .print, .single-bsp_session .print-link, .single-bsp_session .pdf-link, .single-bsp_session [class*="print-button"], .single-bsp_session [class*="pdf-button"] { display: none !important; }

/* Booking dialog (opened by the Book button) */
.bsp-booking-dialog { border: 0; border-radius: 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, .3); color: var(--bsp-text, #1c1f26); max-height: 90vh; overflow: auto; padding: 0; width: min(680px, calc(100% - 28px)); }
.bsp-booking-dialog::backdrop { backdrop-filter: blur(3px); background: rgba(10, 15, 20, .68); }
.bsp-booking-dialog__inner { padding: 22px; }
.bsp-booking-dialog__close { background: #f1f3f5; border: 0; border-radius: 50%; cursor: pointer; float: right; font-size: 22px; height: 38px; line-height: 1; width: 38px; }
.bsp-booking-dialog .bsp-booking { margin: 0; }
.bsp-booking-dialog .bsp-booking .bsp-card { border: 0; box-shadow: none; padding: .5rem 0 0; }

/* Agenda */
.bsp-agenda { margin: 24px 0; }
.bsp-agenda__toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.bsp-agenda__toolbar button { background: #fff; border: 1px solid #d8dee4; border-radius: 10px; cursor: pointer; padding: 10px 15px; }
.bsp-agenda__toolbar button[aria-pressed="true"] { background: #18212b; color: #fff; }
.bsp-agenda__grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bsp-agenda__event { background: #fff; border: 1px solid var(--serion-border, #e5e9ed); border-radius: 20px; box-shadow: 0 5px 18px rgba(20, 30, 40, .05); display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 20px; }
.bsp-agenda__event[hidden] { display: none; }
.bsp-agenda__event h3 { font-size: 1.15rem; margin: 4px 0; }
.bsp-agenda__event h3 a { color: inherit; text-decoration: none; }
.bsp-agenda__date { color: #198754; font-weight: 700; }
.bsp-agenda__place { color: var(--bsp-muted, #5f6f66); margin: 0; }
.bsp-agenda__status { align-self: flex-start; background: #edf7f0; border-radius: 20px; color: #17663b; display: inline-block; font-size: .8rem; padding: 4px 10px; }
.bsp-agenda__status.is-past { background: #f0f1f2; color: #555; }
.bsp-agenda__availability { font-weight: 700; margin: 6px 0 10px; }
.bsp-agenda__event .bsp-btn { align-self: flex-start; margin-top: auto; }
.bsp-agenda__updated { color: var(--bsp-muted, #5f6f66); font-size: .85rem; }

@media (min-width: 640px) {
	.bsp-filters { grid-template-columns: repeat(2, 1fr); }
	.bsp-grid { grid-template-columns: repeat(2, 1fr); }
	.bsp-form__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.bsp-filters { grid-template-columns: repeat(4, 1fr); }
	.bsp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) { .bsp-agenda__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.bsp-agenda__grid { grid-template-columns: 1fr; }
	.bsp-session__media { --bsp-img-radius: 16px; aspect-ratio: 3 / 2; margin: 10px 10px 0; }
	.bsp-booking-dialog__inner { padding: 14px; }
	.bsp-info__footer .bsp-card__actions, .bsp-info__footer .bsp-btn { width: 100%; }
	.bsp-meta li { flex-direction: column; gap: .15rem; }
	.bsp-meta__value { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .bsp-session, .bsp-session__media img, .bsp-btn { transition: none; } }