/*
 * Registration form card, styled after the Contact Us form (cu2) and the
 * Speak-A-Thon form. Wrap a form in .bf-card and it restyles the Bootstrap
 * markup inside (labels, .form-control, .form-select, .form-check, alerts),
 * so field ids and each page's validation script stay untouched.
 */
.bf-card {
    --maroon: #b73b53;
    --maroon-deep: #7a2236;
    --ink: #3b211b;
    --ink-soft: #6b5048;
    --rule: rgba(59, 33, 27, .14);
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 18px 40px rgba(59, 33, 27, .1);
    border: 1px solid var(--rule);
    text-align: left;
    color: var(--ink);
}
@media (max-width: 575px) { .bf-card { padding: 28px 20px; } }

.bf-title { font-family: "Platypi", Georgia, serif; font-size: 25px; font-weight: 700; color: var(--maroon-deep); margin: 0 0 4px; }
.bf-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; }
.bf-sub strong { color: var(--ink); }
.bf-card .req, .bf-card label .text-danger { color: var(--maroon) !important; }

.bf-section {
    font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--maroon); margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}

/* Labels */
.bf-card label,
.bf-card .form-label {
    display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.bf-card .form-check-label { display: inline; font-weight: 500; margin-bottom: 0; }
/* A bare label right after a radio/checkbox stays on the same line as it */
.bf-card input[type="radio"] + label,
.bf-card input[type="checkbox"] + label {
    display: inline-block; vertical-align: middle; font-weight: 500; margin: 0 18px 0 6px;
}
.bf-card input[type="radio"],
.bf-card input[type="checkbox"] { vertical-align: middle; }

/* Text inputs, selects, textareas, file pickers */
.bf-card .form-control,
.bf-card .form-select,
.bf-card select,
.bf-card textarea,
.bf-card input[type="text"],
.bf-card input[type="email"],
.bf-card input[type="tel"],
.bf-card input[type="url"],
.bf-card input[type="number"],
.bf-card input[type="date"],
.bf-card input[type="file"] {
    font: inherit; font-size: 15.5px; line-height: 1.4; color: var(--ink);
    background-color: #fbfaf9; border: 1.5px solid var(--rule); border-radius: 10px;
    padding: 12px 14px; width: 100%; height: auto; box-shadow: none;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/*
 * Dropdowns: drop the browser's native look and draw the same chevron the
 * Event Pass form uses. Also covers the Art Camp (ac2) and Speak-A-Thon (sp2)
 * cards, which have their own field classes.
 */
.bf-card .form-select,
.bf-card select,
.ac2-field select,
.sp2-field select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 42px; cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a2236' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 14px 14px;
}
.bf-card select::-ms-expand { display: none; }
.bf-card select:hover:not(:focus),
.ac2-field select:hover:not(:focus),
.sp2-field select:hover:not(:focus) { border-color: rgba(183, 59, 83, .45); }
.bf-card select:disabled,
.ac2-field select:disabled,
.sp2-field select:disabled { background-color: #f1eeec; color: #a8968f; cursor: not-allowed; }
.bf-card select option { color: var(--ink); background: #fff; }
.bf-card select option[value=""],
.ac2-field select option[value=""],
.sp2-field select option[value=""] { color: #a8968f; }
.bf-card input[type="file"] { padding: 9px 12px; font-size: 14px; }
.bf-card textarea { resize: vertical; min-height: 96px; }
.bf-card input::placeholder,
.bf-card textarea::placeholder { color: #a8968f; }
.bf-card .form-control:focus,
.bf-card .form-select:focus,
.bf-card select:focus,
.bf-card textarea:focus,
.bf-card input:focus {
    outline: none; border-color: var(--maroon); background-color: #fff; box-shadow: 0 0 0 3px rgba(183, 59, 83, .15);
}

/* Radios and checkboxes */
.bf-card .form-check { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; margin-bottom: 8px; min-height: 0; }
.bf-card .form-check-inline { display: inline-flex; margin-right: 18px; }
.bf-card .form-check .form-check-input { float: none; margin: 2px 0 0; }
.bf-card input[type="checkbox"],
.bf-card input[type="radio"] {
    width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--maroon); cursor: pointer;
}
.bf-card .form-check-input:checked { background-color: var(--maroon); border-color: var(--maroon); }
.bf-card .form-check-input:focus { box-shadow: 0 0 0 3px rgba(183, 59, 83, .15); border-color: var(--maroon); }

/* Bordered groups (declarations, consent) */
.bf-card .border.rounded,
.bf-box {
    background: #fbfaf9; border: 1.5px solid var(--rule) !important; border-radius: 12px !important; padding: 16px 18px !important;
}

/* Messages */
.bf-card .error-message,
.bf-card span.text-danger,
.bf-card div.text-danger,
.bf-card p.text-danger { display: block; font-size: 13px; color: #b42318 !important; margin-top: 5px; }
/* An empty error slot takes no space until a message is shown */
.bf-card .error-message:empty,
.bf-card .text-danger:empty { margin: 0; }
/* ...but the required-field star inside a label stays inline */
.bf-card label .text-danger { display: inline; font-size: inherit; margin: 0; color: var(--maroon) !important; }
.bf-card .alert-danger { background: #fdecec; border: 1px solid #f5c2c0; color: #8a1c1c; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
.bf-card .alert-warning { background: #fff6e5; border: 1px solid #f1d39a; color: #6b4a12; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.bf-card .alert-success { border-radius: 10px; font-size: 14px; }
.bf-card .form-text,
.bf-card small.text-muted,
.bf-card span.text-muted { font-size: 12.5px; color: var(--ink-soft) !important; }

/* Submit */
.bf-submit {
    display: block; width: 100%; border: 0; border-radius: 12px; background: #b73b53; color: #fff;
    font-family: "Platypi", Georgia, serif; font-size: 19px; font-weight: 600;
    padding: 15px 20px; margin-top: 8px; cursor: pointer; transition: background .15s;
}
.bf-submit:hover, .bf-submit:focus { background: #7a2236; color: #fff; }
.bf-submit:disabled { opacity: .7; cursor: wait; }
/* Same button as a link sitting on its own on a page (e.g. Speak-A-Thon "Register Now") */
.bf-submit--inline { display: inline-block; width: auto; min-width: 240px; text-align: center; text-decoration: none; }
a.bf-submit:hover { text-decoration: none; }

/* hCaptcha widget (partials/hcaptcha) */
.bf-captcha { margin: 6px 0 16px; text-align: left; }
.bf-captcha .h-captcha { min-height: 78px; }
.bf-captcha.invalid .h-captcha iframe { outline: 2px solid #b42318; border-radius: 6px; }
.bf-captcha .bf-captcha-error { display: block; font-size: 13px; color: #b42318; margin-top: 5px; }

/*
 * File picker (frontend/js/blf-file.js): a "Browse files" bar, a drag-and-drop
 * zone and a preview list with thumbnails and Remove. The real <input type="file">
 * stays in the form, only visually hidden, so page scripts and `required` still work.
 */
.bf-file { --maroon: #b73b53; --ink: #3b211b; --ink-soft: #6b5048; --rule: rgba(59, 33, 27, .14); width: 100%; }
.bf-file-input {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0;
}
.bf-file-bar {
    display: flex; align-items: stretch; width: 100%;
    border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fbfaf9;
}
.bf-file-name {
    flex: 1 1 auto; min-width: 0; padding: 11px 14px; font-size: 14.5px; color: #a8968f;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.bf-file.has-files .bf-file-name { color: var(--ink); }
.bf-file-browse {
    flex: 0 0 auto; border: 0; border-left: 1.5px solid var(--rule); background: #efe9e6; color: var(--ink);
    font: inherit; font-size: 14.5px; font-weight: 600; padding: 0 16px; cursor: pointer; transition: background .15s;
}
.bf-file-browse:hover { background: #e6dcd8; }
.bf-file-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    margin-top: 10px; padding: 22px 14px; text-align: center; cursor: pointer;
    border: 2px dashed rgba(59, 33, 27, .22); border-radius: 12px; background: #fbfaf9;
    color: var(--ink-soft); font-size: 14.5px; font-weight: 600; transition: border-color .15s, background .15s;
}
.bf-file-drop svg { width: 44px; height: 44px; color: #a8968f; transition: color .15s; }
.bf-file-drop small { font-size: 12.5px; font-weight: 400; }
.bf-file-drop:hover, .bf-file.is-dragging .bf-file-drop { border-color: var(--maroon); background: #fff; }
.bf-file-drop:hover svg, .bf-file.is-dragging .bf-file-drop svg { color: var(--maroon); }
.bf-file:focus-within .bf-file-bar { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(183, 59, 83, .15); }
.bf-file.has-files .bf-file-drop { display: none; }
.bf-file-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bf-file-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1.5px solid var(--rule); border-radius: 12px; background: #fff;
}
.bf-file-thumb {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #f3eeec;
    display: flex; align-items: center; justify-content: center;
}
.bf-file-thumb img, .bf-file-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-file-ext {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: var(--maroon); border-radius: 4px; padding: 3px 6px;
}
.bf-file-meta { flex: 1 1 auto; min-width: 0; }
.bf-file-meta strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-file-meta span { font-size: 12.5px; color: var(--ink-soft); }
.bf-file-remove {
    flex: 0 0 auto; background: none; border: 0; padding: 4px 2px; font-size: 13px; font-weight: 600;
    color: var(--maroon); text-decoration: underline; cursor: pointer;
}
.bf-file-remove:hover { color: #7a2236; }

/*
 * Custom dropdown (frontend/js/blf-select.js). The real <select> stays in the
 * form, only visually hidden, so page scripts and `required` still work.
 */
.bf-select { --maroon: #b73b53; --ink: #3b211b; --ink-soft: #6b5048; --rule: rgba(59, 33, 27, .14); position: relative; width: 100%; }
.bf-select-native {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0;
}
.bf-select-button {
    display: flex; align-items: center; width: 100%; min-height: 48px; text-align: left; cursor: pointer;
    font: inherit; font-size: 15.5px; line-height: 1.4; color: var(--ink);
    background: #fbfaf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a2236' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 15px center / 14px 14px;
    border: 1.5px solid var(--rule); border-radius: 10px; padding: 11px 42px 11px 14px; margin: 0;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.bf-select-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-select.is-empty .bf-select-label { color: #a8968f; }
.bf-select-button:hover { border-color: rgba(183, 59, 83, .45); }
.bf-select-button:focus,
.bf-select.is-open .bf-select-button {
    outline: none; border-color: var(--maroon); background-color: #fff; box-shadow: 0 0 0 3px rgba(183, 59, 83, .15);
}
.bf-select.is-open .bf-select-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a2236' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E");
}
.bf-select.is-invalid .bf-select-button { border-color: #b42318; }
.bf-select.is-disabled .bf-select-button { background-color: #f1eeec; color: #a8968f; cursor: not-allowed; }
.bf-select-list {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
    list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto;
    background: #fff; border: 1.5px solid var(--rule); border-radius: 12px;
    box-shadow: 0 14px 32px rgba(59, 33, 27, .16);
}
.bf-select.opens-up .bf-select-list { top: auto; bottom: calc(100% + 6px); }
.bf-select.is-open .bf-select-list { display: block; animation: bf-select-in .12s ease-out; }
@keyframes bf-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bf-select-option {
    position: relative; padding: 10px 34px 10px 12px; border-radius: 8px; cursor: pointer;
    font-size: 15px; line-height: 1.35; color: var(--ink); margin: 0;
}
.bf-select-option.is-placeholder { color: #a8968f; }
.bf-select-option.is-active { background: #f6eef0; }
.bf-select-option.is-selected { color: #7a2236; font-weight: 600; background: #f3e3e7; }
.bf-select-option.is-selected::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 11px; margin-top: -7px;
    border: solid #b73b53; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.bf-select-option.is-placeholder.is-selected { color: #a8968f; font-weight: 400; background: none; }
.bf-select-option.is-placeholder.is-selected::after { display: none; }
.bf-select-option.is-placeholder.is-active { background: #f6eef0; }
.bf-select-option[aria-disabled="true"] { color: #c4b6b1; cursor: not-allowed; background: none; }

/* Closed-registration overlay sits over the card's rounded corners */
.bf-card .form-overlay { border-radius: 12px; }