/* British Council event registration — self-contained styles.
   Uses the site CSS variables (--color-teal etc.) defined in ../style.css. */

.bc-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px 90px;
}
.bc-hero {
    text-align: center;
    margin-bottom: 8px;
}
.bc-hero h1 {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--color-ink, #1a1a1a);
    margin: 0 0 8px;
    line-height: 1.2;
}
.bc-hero p.sub {
    color: var(--color-body-muted, #5a5a5a);
    font-family: var(--font-accent, 'Lora', Georgia, serif);
    font-size: 1.05rem;
    margin: 0 0 4px;
}
.bc-meta {
    text-align: center;
    color: var(--color-body-muted, #5a5a5a);
    font-size: 0.95rem;
    margin-bottom: 28px;
}
.bc-meta strong { color: var(--color-ink, #1a1a1a); }

.bc-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-line, #e5e0d8);
    border-radius: 10px;
    padding: 26px;
    margin-bottom: 22px;
}

/* Progress */
.bc-progress {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 22px;
    list-style: none;
    padding: 0;
    font-size: 0.85rem;
}
.bc-progress li {
    color: var(--color-body-muted, #8a8a8a);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bc-progress li.active { color: var(--color-teal, #0e5f4e); font-weight: 600; }
.bc-progress li .dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-line, #e5e0d8); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
}
.bc-progress li.active .dot { background: var(--color-teal, #0e5f4e); }

/* Attendance choice buttons */
.bc-choices { display: grid; gap: 14px; }
.bc-choice {
    display: block;
    border: 2px solid var(--color-line, #e5e0d8);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #fff;
}
.bc-choice:hover { border-color: var(--color-teal, #0e5f4e); }
.bc-choice input { margin-right: 10px; }
.bc-choice .bc-choice-title {
    font-weight: 600; font-size: 1.1rem; color: var(--color-ink, #1a1a1a);
}
.bc-choice .bc-choice-desc { color: var(--color-body-muted, #5a5a5a); font-size: 0.95rem; margin-top: 4px; }
.bc-choice.is-disabled { opacity: .55; cursor: not-allowed; }
input.bc-radio:checked + .bc-choice-body .bc-choice-title { color: var(--color-teal, #0e5f4e); }

/* Counter */
.bc-counter {
    text-align: center;
    margin: 14px 0 4px;
    font-size: 1.05rem;
    color: var(--color-ink, #1a1a1a);
}
.bc-counter .num { font-weight: 700; color: var(--color-teal, #0e5f4e); font-size: 1.2rem; }
.bc-counter.low .num { color: #b03a2e; }
.bc-counter .note { display: block; font-size: 0.85rem; color: var(--color-body-muted, #8a8a8a); margin-top: 2px; }

/* Fields */
.bc-field { margin-bottom: 16px; }
.bc-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.bc-field input[type=text],
.bc-field input[type=email],
.bc-field input[type=tel],
.bc-field input[type=number],
.bc-field select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--color-line, #e5e0d8);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}
.bc-field .hint { color: var(--color-body-muted, #8a8a8a); font-size: 0.85rem; margin: 4px 0 0; }
.bc-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.bc-check input { margin-top: 3px; }
.bc-check label { font-weight: 400; font-size: 0.95rem; }

.bc-alumni-fields { display: none; border-left: 3px solid var(--color-teal, #0e5f4e); padding-left: 16px; margin: 10px 0 4px; }
.bc-alumni-fields.show { display: block; }

.bc-notice {
    border: 1px solid var(--color-line, #e5e0d8);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--color-paper, #faf8f5);
    margin: 4px 0 18px;
    font-size: 0.95rem;
}
.bc-notice strong { display: block; margin-bottom: 4px; }

.bc-alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 0.95rem; }
.bc-alert-error { background: #fdecea; border: 1px solid #f5c6c0; color: #8a1c10; }
.bc-alert-info  { background: #eef6f3; border: 1px solid #c7e2da; color: #0e5f4e; }

.bc-btn {
    display: inline-block; width: 100%; text-align: center;
    background: var(--color-teal, #0e5f4e); color: #fff; border: none;
    padding: 14px 20px; border-radius: 8px; font-size: 1.05rem; font-weight: 600;
    cursor: pointer; text-decoration: none; box-sizing: border-box;
    font-family: inherit;
}
.bc-btn:hover { filter: brightness(1.08); }
.bc-btn:disabled { opacity: .5; cursor: not-allowed; }
.bc-btn-secondary { background: #fff; color: var(--color-teal, #0e5f4e); border: 2px solid var(--color-teal, #0e5f4e); }

.bc-nav { display: flex; gap: 12px; margin-top: 8px; }
.bc-nav .bc-btn { width: auto; flex: 1; }

/* No-JS: show every step; JS hides all but the active one. */
.bc-step { margin-bottom: 6px; }
.js .bc-step { display: none; }
.js .bc-step.active { display: block; }
.js .bc-nojs-submit { display: none; }

/* Thank-you */
.bc-thanks .tick {
    width: 64px; height: 64px; border-radius: 50%; background: var(--color-teal, #0e5f4e);
    color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.bc-thanks .ref {
    text-align: center; font-size: 1.3rem; font-weight: 700; letter-spacing: 1px;
    color: var(--color-teal, #0e5f4e); margin: 8px 0 18px;
}
.bc-cal-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.bc-cal-links a { flex: 1; min-width: 140px; text-align: center; font-size: 0.95rem; padding: 10px; }

/* Public attendee list (attending.php) */
.bc-attend-list {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 18px;
}
.bc-attend-list li {
    padding: 8px 0; border-bottom: 1px solid var(--color-hairline, #eee);
    font-size: 1rem; color: var(--color-body, #2a2a2a);
}

/* Safety net: never let a long link (URLs in notices/cards) overflow its box. */
.bc-wrap a, .bc-notice a, .bc-card a { overflow-wrap: anywhere; word-break: break-word; }
.bc-notice .bc-btn, .bc-thanks .bc-btn { word-break: normal; }