/* FOLIC Swim Lessons — public styles */
.fsl-wrapper { width: 100%; max-width: 100%; margin: 0; font-family: inherit; color: #222; box-sizing: border-box; }
.fsl-test-banner {
    background: repeating-linear-gradient(45deg, #fff4d6, #fff4d6 12px, #ffe9b0 12px, #ffe9b0 24px);
    border: 2px solid #e0a800; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
    color: #7a5b00; font-size: 14px;
}
.fsl-test-banner strong { letter-spacing: 1px; }
.fsl-section-title { margin: 24px 0 12px; font-size: 20px; }
.fsl-subhead { margin: 22px 0 8px; font-size: 16px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.fsl-empty { padding: 16px; background: #f6f8fa; border-radius: 6px; color: #555; }
.fsl-req { color: #d63638; }
.fsl-optional { color: #777; font-weight: normal; font-size: 12px; }
.fsl-hint { font-size: 12px; color: #777; margin: 4px 0 0; }

/* Level cards */
/* Responsive grid that never exceeds 4 columns: each column is at least a
   quarter of the row (minus the 3 gaps), so a 5th column can't fit; on
   narrower screens it falls back to the 230px minimum and wraps to fewer. */
.fsl-level-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(230px, (100% - 42px) / 4), 1fr)); gap: 14px; }
.fsl-level-card {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    -webkit-appearance: none; appearance: none; color: inherit; font: inherit; margin: 0;
    background: #fff; border: 2px solid #dde3e8; border-radius: 10px;
    padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; width: 100%;
}
.fsl-level-card:hover,
.fsl-level-card:focus-visible { border-color: #0a7ea4; background: #f0fafe; box-shadow: 0 3px 10px rgba(10,126,164,.12); outline: none; }
.fsl-level-card.selected { border-color: #0a7ea4; background: #f0fafe; box-shadow: 0 0 0 2px rgba(10,126,164,.25); }
.fsl-level-name { font-weight: 700; font-size: 16px; color: #0a4d63; }
.fsl-split-tag { font-weight: 600; font-size: 12px; color: #0a7ea4; }
.fsl-level-age { font-size: 12px; color: #0a7ea4; font-weight: 600; }
.fsl-level-desc { font-size: 13px; color: #555; }
.fsl-level-cap { font-size: 12px; color: #777; }

/* "Not sure what level?" guide */
.fsl-level-guide { margin: 14px 0 4px; border: 1px solid #dde3e8; border-radius: 8px; background: #f7fafc; }
.fsl-level-guide > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: #0a4d63; list-style-position: inside; }
.fsl-level-guide[open] > summary { border-bottom: 1px solid #dde3e8; }
.fsl-level-guide-body { padding: 4px 16px 12px; }
.fsl-guide-group { margin: 14px 0 4px; color: #0a7ea4; }
.fsl-level-guide-body ul { margin: 0; padding-left: 18px; }
.fsl-level-guide-body li { font-size: 13px; color: #444; margin: 4px 0; }

/* Member / non-member price rows */
.fsl-level-price { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 400; margin-top: 8px; }
.fsl-price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 5px 9px; border-radius: 6px; box-sizing: border-box; }
.fsl-price-member { background: #eaf6fb; border-left: 3px solid #0a7ea4; }
.fsl-price-nonmember { background: #f4f6f8; border-left: 3px solid #aeb8c2; }
.fsl-price-label { font-weight: 700; color: #0a4d63; }
.fsl-price-nonmember .fsl-price-label { color: #5a6772; }
.fsl-price-val { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Selected level banner */
.fsl-selected-level { margin: 6px 0 12px; font-size: 16px; color: #0a4d63; }

/* Calendar */
.fsl-calendar { background: #fff; border: 1px solid #e2e8ee; border-radius: 10px; padding: 14px; }
.fsl-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fsl-cal-title { font-weight: 700; font-size: 17px; }
.fsl-cal-btn { background: #0a7ea4; color: #fff; border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
.fsl-cal-btn:hover { background: #086582; }
.fsl-cal-head, .fsl-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.fsl-cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: #888; padding: 6px 0; }
.fsl-cal-cell { min-height: 56px; border: 1px solid #eef1f4; padding: 4px; position: relative; }
.fsl-empty-cell { background: #fafbfc; border: 0; }
.fsl-daynum { font-size: 13px; color: #555; }
.fsl-cal-cell.fsl-past { color: #bbb; background: #fcfcfd; }
.fsl-cal-cell.fsl-today { box-shadow: inset 0 0 0 2px #0a7ea4; }
.fsl-cal-cell.fsl-has-sessions { cursor: pointer; }

/* Days with sessions — make them clearly stand out */
.fsl-cal-cell.fsl-day-open { background: #d8f3e1; border-color: #1e9e4a; box-shadow: inset 0 0 0 2px #1e9e4a; }
.fsl-cal-cell.fsl-day-open:hover { background: #c2ecd0; }
.fsl-cal-cell.fsl-day-open .fsl-daynum { color: #136130; font-weight: 800; }
.fsl-cal-cell.fsl-day-full { background: #fbdedb; border-color: #c0392b; box-shadow: inset 0 0 0 2px #c0392b; }
.fsl-cal-cell.fsl-day-full:hover { background: #f8ccc7; }
.fsl-cal-cell.fsl-day-full .fsl-daynum { color: #8f2017; font-weight: 800; }

/* Selected day — blue ring wins over the green/red session styling */
.fsl-cal-cell.fsl-cal-active { background: #d4ecf7; border-color: #0a7ea4; box-shadow: inset 0 0 0 3px #0a7ea4; }
.fsl-cal-cell.fsl-cal-active .fsl-daynum { color: #0a4d63; }
.fsl-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; position: absolute; bottom: 6px; left: 6px; box-shadow: 0 0 0 2px #fff; }
.fsl-dot-open { background: #1e9e4a; }
.fsl-dot-full { background: #c0392b; }
.fsl-cal-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: #666; }
.fsl-cal-legend .fsl-dot { position: static; margin-right: 4px; }
.fsl-cal-loading { padding: 30px; text-align: center; color: #999; }

/* Day session list */
.fsl-day-sessions { margin-top: 16px; }
.fsl-day-title { margin: 6px 0 10px; }
.fsl-session-list { display: flex; flex-direction: column; gap: 10px; }
.fsl-session-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid #e2e8ee; border-radius: 8px; padding: 12px 14px; background: #fff;
}
.fsl-session-full { opacity: .65; }
.fsl-session-info { display: flex; flex-direction: column; gap: 2px; }
.fsl-session-time { font-weight: 700; font-size: 15px; }
.fsl-session-loc { font-size: 12px; color: #777; }
.fsl-session-price { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #444; margin-top: 4px; max-width: 300px; }
.fsl-session-action { display: flex; align-items: center; gap: 10px; }
.fsl-session-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.fsl-badge-open { background: #e6f6ec; color: #1e7e34; }
.fsl-badge-full { background: #fdeaea; color: #b02a37; }
.fsl-pick-session { background: #0a7ea4; color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-weight: 600; }
.fsl-pick-session:hover { background: #086582; }

/* Form */
.fsl-chosen-summary { margin-bottom: 14px; }
.fsl-summary-box { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: #f0fafe; border: 1px solid #bfe6f3; border-radius: 8px; padding: 12px 16px; }
.fsl-summary-level { font-weight: 700; color: #0a4d63; }
.fsl-summary-when { color: #444; }
.fsl-summary-price { margin-left: auto; }
.fsl-form-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.fsl-field { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.fsl-field.fsl-full { flex-basis: 100%; }
.fsl-field label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.fsl-field input, .fsl-field select, .fsl-field textarea {
    padding: 9px 11px; border: 1px solid #cfd6dd; border-radius: 6px; font-size: 14px; width: 100%; box-sizing: border-box;
}
.fsl-field select { background: #fff; height: 38px; }
.fsl-field input:focus, .fsl-field select:focus, .fsl-field textarea:focus { border-color: #0a7ea4; outline: none; }
/* Checkboxes and radios keep their natural size — don't stretch to full width. */
.fsl-field input[type="checkbox"], .fsl-field input[type="radio"] { width: auto; flex: 0 0 auto; }
.fsl-invalid { border-color: #d63638 !important; background: #fff6f6; }
.fsl-radio-inline { display: flex; gap: 20px; }
.fsl-radio-inline label { font-weight: 400; }
.fsl-checkbox { font-weight: 400 !important; display: flex; align-items: flex-start; gap: 8px; }

.fsl-card-element { padding: 11px; border: 1px solid #cfd6dd; border-radius: 6px; background: #fff; }
.fsl-card-errors { color: #d63638; font-size: 13px; margin-top: 6px; }

.fsl-etransfer-info { background: #eef7fb; border: 1px solid #bfe6f3; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.fsl-etransfer-info p { margin: 4px 0; font-size: 14px; }

.fsl-policy { background: #f6f8fa; border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; }
.fsl-policy-text { font-size: 13px; color: #555; margin: 0; }

.fsl-submit { background: #1e9e4a; color: #fff; border: 0; border-radius: 8px; padding: 13px 28px; font-size: 16px; font-weight: 700; cursor: pointer; }
.fsl-submit:hover { background: #18803c; }
.fsl-submit:disabled { background: #9bbfa8; cursor: default; }

.fsl-form-message { margin-top: 16px; padding: 14px 16px; border-radius: 8px; font-weight: 600; }
.fsl-form-message.fsl-success { background: #e6f6ec; color: #1e7e34; border: 1px solid #b6e3c5; }
.fsl-form-message.fsl-error { background: #fdeaea; color: #b02a37; border: 1px solid #f3c4c8; }
.fsl-thankyou { background: #e6f6ec; border: 1px solid #b6e3c5; border-radius: 10px; padding: 26px; text-align: center; color: #1e7e34; }

@media (max-width: 600px) {
    .fsl-cal-cell { min-height: 44px; }
    .fsl-summary-price { margin-left: 0; }
    .fsl-session-row { flex-direction: column; align-items: flex-start; }
}