/* Licensee space — federation palette (see CHARTE_GRAPHIQUE.md).
   Scoped to #bk: this public side stands alone (no ianseo look). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font: 14px/1.5 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #20263d;
    background: #f0f4ff;
}

#bk a { color: #0254a8; }
#bk a:hover { color: #01367c; }

/* ---- Centred card (sign-in, account creation) ---- */

#bk.bk-card { display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px 16px; }
#bk.bk-card .bk-main { width: 100%; max-width: 420px; }

#bk .bk-card {
    background: #fff; border: 1px solid #d2d4d6; border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08); padding: 28px 26px;
}
#bk .bk-card h1 { margin: 0 0 6px; font-size: 21px; color: #01367c; }
#bk .bk-sub { margin: 0 0 20px; color: #4c4e50; font-size: 13px; }

#bk label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 13px; }
#bk .bk-opt { font-weight: 400; color: #7d8183; }
#bk input[type=text], #bk input[type=password], #bk input[type=email], #bk input[type=date] {
    width: 100%; padding: 9px 11px; font-size: 15px;
    border: 1px solid #d2d4d6; border-radius: 6px; background: #fff; color: #20263d;
}
#bk input:focus { outline: none; border-color: #0254a8; box-shadow: 0 0 0 3px #a7d6ff; }
/* Sign-up and profile of an archer without an FFTA licence (other-signup.php, profile.php). */
#bk .bk-other input[type=number], #bk .bk-other select {
    width: 100%; padding: 9px 11px; font-size: 15px;
    border: 1px solid #d2d4d6; border-radius: 6px; background: #fff; color: #20263d;
}
#bk .bk-other input:disabled, #bk .bk-other select:disabled { background: #f3f4f6; color: #4c4e50; }
#bk .bk-wa-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; }
#bk label.bk-wa { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 10px; font-weight: 400;
    border: 1px solid #d2d4d6; border-radius: 8px; cursor: pointer; }
#bk label.bk-wa:has(input:checked) { border-color: #0254a8; background: #f0f4ff; }
#bk .bk-wa img, #bk .bk-wa-nophoto { width: 44px; height: 54px; object-fit: cover; border-radius: 4px; flex: 0 0 auto;
    background: #e9edf2; }
#bk .bk-wa-none { color: #4c4e50; }
#bk .bk-hint { margin: 5px 0 0; font-size: 12px; color: #7d8183; }
#bk .bk-otp[hidden] { display: none; }
#bk .bk-otp {
    margin-top: 16px; padding: 12px 14px 14px;
    background: #f0f4ff; border: 1px solid #a7d6ff; border-radius: 6px;
}
#bk .bk-otp label { margin-top: 0; }

#bk .bk-btn {
    display: inline-block; margin-top: 22px; padding: 10px 18px; font-size: 15px;
    border: 1px solid #d2d4d6; border-radius: 6px; background: #f7f7f7;
    color: #20263d; cursor: pointer; text-align: center;
}
#bk .bk-btn-primary { width: 100%; background: #0254a8; border-color: #0254a8; color: #fff; font-weight: 600; }
/* The text stays white on hover: #bk a:hover (dark blue) made it invisible on the dark background. */
#bk .bk-btn-primary:hover { background: #01367c; border-color: #01367c; color: #fff; }
#bk a.bk-btn:hover { color: #20263d; }
#bk a.bk-btn-primary:hover { color: #fff; }
/* Row of secondary buttons ("My follow-up" shortcuts): clean line wrapping. */
#bk .bk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#bk .bk-actions .bk-btn { margin-top: 12px; }

#bk .bk-alt { margin: 18px 0 0; text-align: center; font-size: 13px; color: #4c4e50; }

/* ---- Messages ---- */

#bk .bk-msg { margin: 0 0 16px; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
#bk .bk-msg-err { background: #ffd6db; border: 1px solid #bb7575; color: #a80000; }
#bk .bk-msg-ok  { background: #d2f4cd; border: 1px solid #75ae77; color: #04ac0b; }
#bk a.bk-btn.bk-logo-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; max-width: 100%;
    box-sizing: border-box; margin-left: auto; margin-right: auto; background: #fff; padding: 4px 10px; font-size: 10px; }
#bk a.bk-btn.bk-logo-btn img { height: 16px; width: auto; }
#bk .bk-msg-warn { background: #fff4d6; border: 1px solid #d9a441; color: #8a5a00; }

/* ---- Maintenance coming (warning banner) ---- */
#bk .bk-maint { position: sticky; top: 0; z-index: 70; background: #8a4b00; color: #fff;
    font-size: 13px; text-align: center; padding: 8px 14px; line-height: 1.4; }

/* ---- Competition of the archer taking place today (link to its page) ---- */
#bk .bk-live { display: flex; align-items: stretch; background: #04ac0b; color: #fff; }
#bk .bk-live-a { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 4px 8px; color: #fff; font-size: 14px; padding: 9px 14px; text-decoration: none; line-height: 1.35; }
#bk .bk-live-a:hover, #bk .bk-live-a:focus { background: #038a09; }
#bk .bk-live-x { flex: 0 0 44px; border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1;
    cursor: pointer; }
#bk .bk-live-x:hover, #bk .bk-live-x:focus { background: #038a09; }
#bk .bk-live b { font-weight: 700; }
#bk .bk-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: 0 0 auto;
    animation: bk-live-pulse 1.6s ease-in-out infinite; }
#bk .bk-live-go { background: rgba(255, 255, 255, .22); padding: 2px 10px; border-radius: 10px; font-weight: 700; }
@keyframes bk-live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #bk .bk-live-dot { animation: none; } }
/* The volunteer space (bk_live_banner): same banner, in blue */
#bk .bk-live-vol { background: #0254a8; }
#bk .bk-live-vol .bk-live-a:hover, #bk .bk-live-vol .bk-live-a:focus,
#bk .bk-live-vol .bk-live-x:hover, #bk .bk-live-vol .bk-live-x:focus { background: #013f7e; }

/* ---- "From another account" view (admin, read only) ---- */
#bk .bk-imp { position: sticky; top: 0; z-index: 60; background: #5b2a86; color: #fff;
    font-size: 13px; text-align: center; padding: 8px 14px; }
#bk .bk-imp b { font-weight: 700; }
#bk .bk-imp .bk-imp-x { color: #fff; margin-left: 12px; background: rgba(255, 255, 255, .2);
    padding: 2px 10px; border-radius: 10px; text-decoration: none; font-weight: 700; }

/* ---- Shareable picture (share.php) — canvas drawn in the browser ---- */
#bk .bk-share { max-width: 640px; margin: 0 auto; text-align: center; }
#bk .bk-share-h { margin: 0 0 4px; }
#bk .bk-share-formats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
#bk .bk-fmt.on { background: #0254a8; color: #fff; border-color: #0254a8; }
#bk .bk-share-canvas-wrap { display: flex; justify-content: center; }
#bk #bk-share-c { max-width: 100%; height: auto; border-radius: 10px; background: #fff;
    box-shadow: 0 6px 22px rgba(20, 60, 120, .18); }
#bk .bk-share-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 16px 0 6px; }
#bk .bk-confirm-share { margin: 10px 0 4px; }

/* ---- Federation news (My space) ---- */
#bk .bk-news-list { list-style: none; margin: 0; padding: 0; }
#bk .bk-news-list li { padding: 8px 0; border-bottom: 1px solid #eef1f4; display: flex;
    flex-direction: column; gap: 2px; }
#bk .bk-news-list li:last-child { border-bottom: 0; }
#bk .bk-news-list a { font-weight: 600; color: #0254a8; text-decoration: none; }
#bk .bk-news-list a:hover { text-decoration: underline; }
#bk .bk-news-date { font-size: 12px; color: #7d8183; }

/* ---- Signed-in space ---- */

#bk .bk-top {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 8px; padding: 10px 18px; background: #01367c; color: #fff;
}
#bk .bk-brand { font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; }
#bk .bk-brand:hover { color: #fff; }   /* otherwise #bk a:hover makes it invisible on the dark header */
#bk .bk-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
#bk .bk-nav a { color: #a7d6ff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
#bk .bk-nav a:hover { color: #fff; }
#bk .bk-nav-ic { display: block; flex: 0 0 auto; }
#bk .bk-who { color: #fff; opacity: .85; }

/* BOTTOM navigation bar (phones only) — "app" style, translucent to hint at the content
   below; central item (Calendar) bigger and raised. */
#bk .bk-botnav { display: none; }

@media (max-width:640px){
  #bk .bk-top { display: none; }                                   /* the top banner gives way to the bottom bar */
  #bk .bk-botnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
    align-items: flex-end;
    background: rgba(255,255,255,.32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(2,84,168,.16);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 14px rgba(20,60,120,.10);
  }
  #bk .bk-botnav .bk-bn {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: #353a41; font-size: 10px; padding: 4px 2px;
  }
  #bk .bk-botnav .bk-bn:hover { color: #353a41; }
  #bk .bk-botnav .bk-bn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #bk .bk-botnav .bk-bn .bk-nav-ic { width: 23px; height: 23px; }
  #bk .bk-botnav .bk-bn.on, #bk .bk-botnav .bk-bn.on:hover { color: #0254a8; }
  /* Central item: big raised round blue button (YouTube style). */
  #bk .bk-botnav .bk-bn-center .bk-bn-ic {
    display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;
    margin: -24px auto 1px; border-radius: 50%; background: #0254a8; color: #fff;
    border: 3px solid #fff; box-shadow: 0 5px 14px rgba(2,84,168,.42);
  }
  #bk .bk-botnav .bk-bn-center .bk-bn-ic .bk-nav-ic { width: 27px; height: 27px; }
  #bk .bk-botnav .bk-bn-center.on .bk-bn-ic { background: #01367c; }
}

#bk .bk-main { padding: 20px 18px 40px; }
/* Phones: keep the height of the fixed bottom bar free under the content (+ the central
   button sticking out, + the iOS safe area), otherwise it hides the bottom of the page. Placed
   AFTER the base rule to override it (same specificity → the last one wins). */
@media (max-width:640px){
  #bk .bk-main { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
#bk.bk-page h1 { margin: 0 0 20px; font-size: 22px; color: #01367c; }

#bk .bk-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
#bk .bk-block {
    background: #fff; border: 1px solid #d2d4d6; border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08); padding: 16px 18px;
}
#bk .bk-block h2 { margin: 0 0 12px; font-size: 15px; color: #0254a8; }
#bk .bk-empty { margin: 0; color: #7d8183; font-style: italic; font-size: 13px; }

#bk .bk-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
#bk .bk-dl dt { color: #7d8183; }
#bk .bk-dl dd { margin: 0; }
/* ---- Calendar ---- */

#bk .bk-filters {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 18px;
    background: #fff; border: 1px solid #d2d4d6; border-radius: 6px; padding: 12px 14px;
}
#bk .bk-filters label { display: flex; flex-direction: column; gap: 3px; margin: 0;
    font-size: 12px; font-weight: 600; color: #7d8183; }
#bk .bk-filters input, #bk .bk-filters select {
    padding: 7px 9px; font-size: 14px; font-weight: 400; color: #20263d;
    border: 1px solid #d2d4d6; border-radius: 6px; background: #fff;
}
#bk .bk-filters .bk-btn { margin-top: 0; padding: 8px 16px; }
#bk .bk-clear { font-size: 12px; padding-bottom: 9px; }

#bk .bk-list { display: flex; flex-direction: column; gap: 12px; }
#bk .bk-item {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start;
    background: #fff; border: 1px solid #d2d4d6; border-left: 4px solid #0254a8;
    border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); padding: 14px 16px;
}
#bk .bk-item-off { border-left-color: #cb8137; }
#bk .bk-item-main { flex: 1 1 320px; min-width: 0; }
#bk .bk-item h2 { margin: 0 0 6px; font-size: 16px; color: #01367c; }
#bk .bk-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 4px;
    font-size: 13px; color: #4c4e50; }
#bk .bk-org { margin: 0; font-size: 12px; color: #7d8183; }

#bk .bk-gauges { list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 18px; }
#bk .bk-gauges li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
#bk .bk-g-lab { color: #7d8183; }
#bk .bk-g-num { color: #4c4e50; }
#bk .bk-gauge { display: inline-block; width: 92px; height: 8px; background: #e9ecef;
    border-radius: 4px; overflow: hidden; }
#bk .bk-gauge i { display: block; height: 100%; background: #0254a8; }
#bk .bk-gauge-full i { background: #ff5043; }

#bk .bk-item-act { flex: 0 0 auto; text-align: right; max-width: 260px; }
#bk .bk-item-act .bk-btn { margin-top: 0; }
#bk .bk-btn[disabled] { opacity: .5; cursor: not-allowed; }
#bk .bk-blocked { margin: 0; font-size: 13px; color: #cb8137; }
#bk .bk-fee { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #01367c; }
#bk .bk-due { margin: 0 0 6px; font-size: 13px; color: #01367c; }
#bk .bk-due-wait { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px;
    background: #fdf0e6; border: 1px solid #cb8137; color: #8a5a26; }
#bk .bk-payinfo { margin: 10px 0 0; padding: 9px 12px; font-size: 13px; border-radius: 6px;
    background: #f7faff; border: 1px solid #a7d6ff; }
#bk .bk-payinfo b { color: #01367c; }
#bk .bk-payinfo ul { margin: 5px 0 0; padding-left: 18px; }
#bk .bk-payinfo li { margin: 2px 0; }
#bk .bk-confirm { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px;
    background: #d2f4cd; border: 1px solid #75ae77; color: #20263d; }
#bk .bk-confirm p { margin: 0 0 4px; }
#bk .bk-confirm-h { font-weight: 600; color: #01367c; margin-top: 8px; }
#bk .bk-confirm ul { margin: 4px 0 0; padding-left: 18px; }
#bk .bk-confirm li { margin: 2px 0; }
#bk .bk-reg-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
    margin: 0 0 14px; padding: 10px 12px; background: #fff; border: 1px solid #d2d4d6; border-radius: 8px; }
#bk .bk-rf-status { display: flex; gap: 6px; }
#bk .bk-rf-btn { padding: 6px 12px; border: 1px solid #d2d4d6; border-radius: 16px; background: #f0f4ff;
    color: #20263d; font-size: 13px; cursor: pointer; }
#bk .bk-rf-btn.on { background: #0254a8; border-color: #0254a8; color: #fff; }
#bk .bk-rf-disc { font-size: 13px; font-weight: 600; color: #7d8183; display: flex; align-items: center; gap: 8px; }
#bk .bk-rf-disc select { width: auto; padding: 6px 8px; font-size: 14px; }

/* ---- Registration / my registrations ---- */

#bk .bk-back { margin: 0 0 10px; font-size: 13px; }
#bk textarea {
    width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit;
    border: 1px solid #d2d4d6; border-radius: 6px; background: #fff; color: #20263d;
}
#bk textarea:focus { outline: none; border-color: #0254a8; box-shadow: 0 0 0 3px #a7d6ff; }
#bk select {
    width: 100%; padding: 9px 11px; font-size: 15px;
    border: 1px solid #d2d4d6; border-radius: 6px; background: #fff; color: #20263d;
}
#bk select:focus { outline: none; border-color: #0254a8; box-shadow: 0 0 0 3px #a7d6ff; }
#bk .bk-block h2 + label { margin-top: 4px; }

#bk .bk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
#bk .bk-tag {
    display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 12px;
    background: #f0f4ff; border: 1px solid #a7d6ff; color: #01367c;
}
#bk .bk-tag-on { background: #d2f4cd; border-color: #75ae77; color: #04ac0b; }
#bk .bk-btn-danger { background: #fff; border-color: #ff5043; color: #c0392b; }
#bk .bk-btn-danger:hover { background: #ffd6db; }
#bk .bk-item-act form { margin: 8px 0 0; }
#bk .bk-item-act p { margin: 8px 0 0; }
#bk .bk-mini { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
#bk .bk-mini li { padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
#bk .bk-mini li:last-child { border-bottom: 0; }
#bk a.bk-btn { text-decoration: none; display: inline-block; }

#bk .bk-wishes {
    margin: 18px 0 0; padding: 12px 14px 14px;
    border: 1px solid #a7d6ff; border-radius: 6px; background: #f7faff;
}
#bk .bk-wishes legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: #01367c; }
#bk .bk-wishes label:first-of-type { margin-top: 0; }
#bk .bk-note {
    margin: 14px 0 0; padding: 10px 12px; font-size: 13px;
    background: #fdf0e6; border: 1px solid #cb8137; border-radius: 6px; color: #8a5a26;
}
#bk .bk-fixed { margin: 2px 0 0; font-size: 14px; }
#bk .bk-catinfo { margin: 6px 0 0; padding: 8px 11px; font-size: 13px; border-radius: 6px;
    background: #f0f4ff; border: 1px solid #a7d6ff; color: #01367c; }

/* ==== Group registration (register-comp.php + registrations.php) ==== */
#bk .bk-group-switch { margin-top: 12px; border-top: 1px dashed #d2d4d6; padding-top: 10px; }
#bk .bk-group-switch > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #0254a8;
    list-style: none; padding: 4px 0; }
#bk .bk-group-switch > summary::-webkit-details-marker { display: none; }
#bk .bk-group-switch > summary::before { content: "＋ "; }
#bk .bk-group-switch[open] > summary::before { content: "－ "; }
#bk .bk-group-body { margin-top: 8px; }
#bk .bk-group-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
#bk .bk-group-form label { display: block; width: 100%; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: #01367c; }
#bk .bk-group-form input[type=text] { flex: 1; min-width: 160px; margin: 0; }
#bk .bk-group-form .bk-btn { margin-top: 0; }

#bk .bk-authored { margin-top: 6px; }
#bk .bk-authored-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
#bk .bk-authored-list h3 { margin: 0 0 4px; font-size: 15px; color: #20263d; }

/* ==== "My registrations" / "My club" tabs ==== */
#bk .bk-tabs { display: flex; gap: 4px; border-bottom: 2px solid #d2e3f5; margin: 4px 0 16px; }
#bk .bk-tab { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; cursor: pointer;
  border: 0; background: transparent; color: #5b6470; border-bottom: 3px solid transparent; margin-bottom: -2px; }
#bk .bk-tab:hover { color: #0254a8; }
#bk .bk-tab.on { color: #01367c; border-bottom-color: #0254a8; }
#bk .bk-tab-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: #0254a8; color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px; }

/* Competition title with the discipline picture */
#bk .bk-item-h { display: flex; align-items: center; gap: 8px; }
#bk .bk-item-ic { display: inline-flex; color: #0254a8; flex: 0 0 auto; }
#bk .bk-item-ic .bk-disc-img { display: block; }

/* ==== "Documents of the competition" page ==== */
#bk .bk-doclist { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
#bk .bk-doc { display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: #fff; border: 1px solid #d8dde3; border-radius: 10px; padding: 14px 16px;
  color: #20263d; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .1s, box-shadow .1s; }
#bk .bk-doc:hover { border-color: #0254a8; box-shadow: 0 2px 8px rgba(2,84,168,.12); }
#bk .bk-doc-ic { font-size: 22px; flex: 0 0 auto; }
#bk .bk-doc-lab { font-weight: 600; font-size: 15px; }
#bk .bk-doc-ext { font-weight: 400; font-size: 12px; color: #7d8183; margin-left: 4px; }

/* "Awaiting validation" tag + payment choice highlighted */
#bk .bk-tag-wait { background: #fdf0e6; border-color: #cb8137; color: #cb8137; }
#bk .bk-pay-chosen { background: #eef6ff; border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
#bk .bk-pay-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 5px;
  background: #0254a8; color: #fff; font-size: 12px; font-weight: 600; }

#bk .bk-inline { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#bk .bk-inline select { width: auto; min-width: 96px; padding: 6px 8px; font-size: 13px; }
#bk .bk-inline .bk-btn { margin-top: 0; padding: 7px 14px; font-size: 13px; }

#bk .bk-code {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px;
    background: #f0f4ff; border: 1px solid #a7d6ff; font-size: 11px; color: #01367c;
}

/* ==== Grid calendar (calendar.php) ==== */
#bk .bk-cal-filters { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center;
    margin:0 0 14px; padding:12px 14px; background:#fff; border:1px solid #d2d4d6; border-radius:8px; }
#bk .bk-cal-disc { display:flex; flex-wrap:wrap; gap:8px; }
#bk .bk-dchip { display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    padding:6px 11px; border:1px solid #d2d4d6; border-radius:20px; background:#f0f4ff;
    color:#20263d; font-size:13px; line-height:1; }
#bk .bk-dchip svg { display:block; }
#bk .bk-dchip:hover { border-color:#0254a8; color:#01367c; }
#bk .bk-dchip.on { background:#0254a8; border-color:#0254a8; color:#fff; }
#bk .bk-cal-region { margin:0; font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px; }
#bk .bk-cal-region select { padding:7px 9px; border:1px solid #d2d4d6; border-radius:6px;
    background:#fff; color:#20263d; font-size:14px; max-width:260px; }
#bk .bk-cal-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
#bk .bk-cal-title { font-size:17px; color:#01367c; text-align:center; flex:1; line-height:1.05; }
#bk .bk-cal-year { display:block; font-size:11px; font-weight:400; color:#7d8183; }

/* Grid of CELLS (date top right) + a layer of BARS on top (Z axis): a multi-day competition =
   one bar spanning from its first to its last cell. Each row is complete (Monday→Sunday); the
   days of the neighbouring months are semi-transparent (a competition across 2 months stays
   readable). The cell height follows the number of lanes of the week (--lanes). */
#bk .bk-cal-month { min-width:680px; }
#bk .bk-cal-dow { text-align:center; font-weight:700; font-size:12px; color:#4c4e50; padding:2px 0; }
#bk .bk-cal-dows { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:4px; }
#bk .bk-cal-week { position:relative; margin-bottom:6px; }
#bk .bk-cal-cells { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#bk .bk-cal-cell { position:relative; min-height:max(58px, calc(26px + var(--lanes,0) * 24px));
    background:#fff; border:1px solid #e2e6ee; border-radius:7px; }
#bk .bk-cal-cell.bk-cal-we { background:#f7f9ff; }
#bk .bk-cal-cell.bk-cal-other { opacity:.42; }
#bk .bk-cal-cell.bk-cal-today { border-color:#0254a8; box-shadow:0 0 0 1px #0254a8 inset; }
#bk .bk-cal-num { position:absolute; top:3px; right:6px; font-size:12px; color:#7d8183; }
#bk .bk-cal-cell.bk-cal-today .bk-cal-num { background:#0254a8; color:#fff; border-radius:9px; padding:0 6px; }
#bk .bk-cal-overlay { position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr);
    grid-auto-rows:21px; gap:3px 6px; padding:24px 0 3px; pointer-events:none; }
#bk .bk-cal-bar { pointer-events:auto; align-self:start; min-width:0; margin-bottom:0; overflow:hidden; }
#bk .bk-cal-contl { border-top-left-radius:1px; border-bottom-left-radius:1px; }   /* the competition goes on BEFORE */
#bk .bk-cal-contr { border-top-right-radius:1px; border-bottom-right-radius:1px; } /* … and/or AFTER this segment */
#bk .bk-cal-comp { display:flex; align-items:center; gap:5px; text-decoration:none; color:#20263d;
    background:#eaf2ff; border:1px solid #c8ddf7; border-radius:5px; padding:3px 5px; margin-bottom:3px;
    font-size:12px; line-height:1.15; }
#bk .bk-cal-comp:hover { background:#0254a8; border-color:#0254a8; color:#fff; }
#bk .bk-cal-comp .bk-cal-ic { display:inline-flex; align-items:center; color:#0254a8; flex:0 0 auto; }
#bk .bk-cal-comp:hover .bk-cal-ic { color:#fff; }
#bk .bk-cal-comp .bk-cal-loc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bk .bk-cal-comp.bk-cal-in { border-color:#1a8a3f; }
#bk .bk-cal-comp.bk-cal-in::after { content:"✓"; color:#1a8a3f; font-weight:700; margin-left:auto; }
#bk .bk-cal-comp:hover.bk-cal-in::after { color:#fff; }

/* ==== Competition details (competition.php) ==== */
#bk .bk-back { margin:0 0 12px; font-size:13px; }
#bk .bk-detail { background:#fff; border:1px solid #d2d4d6; border-radius:8px; padding:20px 22px; }
#bk .bk-detail-head { display:flex; gap:16px; align-items:flex-start; }
#bk .bk-detail-ic { color:#0254a8; flex:0 0 auto; display:inline-flex; }
#bk .bk-detail h1 { margin:0 0 4px; font-size:22px; color:#01367c; }
#bk .bk-detail-sub { margin:0; display:flex; flex-wrap:wrap; gap:4px 14px; color:#4c4e50; font-size:13px; }
#bk .bk-org { margin:4px 0 0; color:#7d8183; font-size:13px; }
#bk .bk-itin { margin:6px 0 0; font-size:13px; color:#4c4e50; }
#bk .bk-itin a { color:#0254a8; font-weight:600; }
#bk .bk-detail h2 { font-size:15px; color:#01367c; margin:18px 0 8px; }
#bk .bk-dep-list { list-style:none; margin:0; padding:0; }
#bk .bk-dep { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
    padding:9px 12px; border:1px solid #e2e6ee; border-radius:7px; margin-bottom:6px; }
#bk .bk-dep-full { opacity:.6; }
#bk .bk-dep-shut { background:#f7f7f8; }
#bk .bk-dep-state { font-size:12px; color:#a86b00; font-weight:600; }
#bk .bk-dep-main { display:flex; flex-direction:column; gap:1px; }
#bk .bk-dep-dt { font-size:12px; color:#7d8183; }
#bk .bk-dep-gauge { display:flex; align-items:center; gap:8px; }
#bk .bk-dep-num { font-size:12px; color:#4c4e50; min-width:64px; text-align:right; }
#bk .bk-detail-act { margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
#bk .bk-comp-acc { margin-top: 18px; border-top: 1px solid #e3e6ea; }
#bk .bk-comp-acc-act { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
#bk .bk-payinfo a { color: #0254a8; word-break: break-all; }
#bk .bk-fee { margin:0 8px 0 0; font-weight:700; color:#01367c; }

@media (max-width:640px){
  /* Compact grid: the week fits the width. Multi-day bars KEEP their label (they span);
     one-day competitions shrink to the picture. */
  #bk .bk-cal-month { min-width:0; }
  #bk .bk-cal-dows, #bk .bk-cal-cells { gap:3px; }
  #bk .bk-cal-cell { min-height:max(46px, calc(20px + var(--lanes,0) * 20px)); }
  #bk .bk-cal-num { font-size:10px; top:2px; right:3px; }
  #bk .bk-cal-overlay { grid-auto-rows:18px; gap:2px 3px; padding:18px 0 2px; }
  #bk .bk-cal-bar { padding:2px 3px; gap:3px; }
  #bk .bk-cal-single { justify-content:center; gap:0; }
  #bk .bk-cal-single .bk-cal-loc { display:none; }
  #bk .bk-cal-comp.bk-cal-in::after { margin-left:2px; font-size:11px; }
  #bk .bk-cal-dow { font-size:10px; }
  #bk .bk-cal-nav .bk-btn { padding:8px 10px; font-size:12px; }
  #bk .bk-cal-title { font-size:14px; }
  #bk .bk-cal-region select { max-width:100%; }
}

#bk .bk-disc-img { object-fit: contain; vertical-align: middle; }

#bk .bk-disc-frame { display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid currentColor; border-radius:2px; padding:1px; line-height:0; box-sizing:border-box; }

/* ==== Competition preview (modal / bottom sheet, calendar.php) ==== */
body.bk-modal-open { overflow:hidden; }
#bk-preview.bk-modal { position:fixed; inset:0; z-index:100000;
    display:flex; align-items:center; justify-content:center; }
#bk-preview[hidden] { display:none; }
#bk-preview .bk-modal-backdrop { position:absolute; inset:0; background:rgba(2,26,64,.45); }
#bk-preview .bk-modal-sheet { position:relative; background:#fff; border-radius:10px;
    width:min(560px,94vw); max-height:90vh; overflow:auto;
    box-shadow:0 12px 40px rgba(0,0,0,.3); -webkit-overflow-scrolling:touch; }
#bk-preview .bk-modal-body { padding:20px 22px 24px; }
#bk-preview .bk-modal-body .bk-detail { border:0; box-shadow:none; padding:0; }
#bk-preview .bk-modal-x { position:absolute; top:8px; right:10px; z-index:2;
    width:34px; height:34px; border:0; border-radius:50%; background:#f0f4ff; color:#01367c;
    font-size:22px; line-height:1; cursor:pointer; }
#bk-preview .bk-modal-x:hover { background:#dbe7ff; }
#bk-preview .bk-modal-hint { position:sticky; bottom:0; left:0; right:0; height:40px; margin-top:-40px;
    pointer-events:none; display:flex; align-items:flex-end; justify-content:center;
    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.97) 70%);
    opacity:0; transition:opacity .15s; }
#bk-preview .bk-modal-hint span { font-size:12px; font-weight:600; color:#0254a8;
    background:#eaf1fb; padding:2px 12px; border-radius:9px 9px 0 0; }
#bk-preview .bk-modal-sheet.bk-can-scroll .bk-modal-hint { opacity:1; }
@media (max-width:640px){
  #bk-preview.bk-modal { align-items:flex-end; }
  #bk-preview .bk-modal-sheet { width:100%; max-height:88vh; border-radius:14px 14px 0 0;
      animation:bk-sheet-up .18s ease-out; }
  @keyframes bk-sheet-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
}

/* ==== My registrations: grouped by competition ==== */
#bk .bk-reg-list { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
#bk .bk-reg { padding:9px 11px; border:1px solid #e2e6ee; border-radius:7px; background:#fafbfe; }
#bk .bk-reg .bk-tags { margin-top:0; }
#bk .bk-reg .bk-org { margin-top:6px; }
#bk .bk-reg-act { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
#bk .bk-reg-act .bk-btn { margin-top:0; padding:6px 12px; font-size:13px; }
#bk .bk-reg-act form { margin:0; }

/* ==== Folding competition cards (My registrations / My club) ==== */
#bk .bk-item.bk-collapsible .bk-item-h { cursor:pointer; }
#bk .bk-item.bk-collapsible .bk-item-main { flex-basis:100%; }
#bk .bk-item-toggle { margin-left:auto; flex:0 0 auto; color:#0254a8; font-size:13px;
    line-height:1; transition:transform .15s; user-select:none; }
#bk .bk-item.bk-open .bk-item-toggle { transform:rotate(180deg); }
#bk .bk-item.bk-collapsible:not(.bk-open) .bk-reg-list,
#bk .bk-item.bk-collapsible:not(.bk-open) .bk-payinfo,
#bk .bk-item.bk-collapsible:not(.bk-open) .bk-item-act { display:none; }

/* ==== Phones: stacked in a column + touch targets ==== */
@media (max-width:640px){
  #bk .bk-item { flex-direction:column; }
  #bk .bk-item-act { max-width:none; width:100%; text-align:left; }
  #bk .bk-item-act .bk-btn { display:block; width:100%; }
  #bk .bk-item-act form { width:100%; }
  #bk .bk-item-act form .bk-btn { width:100%; }
  #bk .bk-reg-act .bk-btn, #bk .bk-reg-act button { width:100%; }
  #bk .bk-reg-act form { width:100%; }
  #bk .bk-detail { padding:16px; }
  #bk .bk-detail-act, #bk .bk-comp-acc-act { flex-direction:column; align-items:stretch; }
  #bk .bk-detail-act .bk-btn, #bk .bk-comp-acc-act .bk-btn { width:100%; text-align:center; }
}

/* ==== Tariff details (register-comp.php) ==== */
#bk .bk-price { margin:16px 0 0; padding:12px 14px; border:1px solid #a7d6ff;
    border-radius:8px; background:#f7faff; }
#bk .bk-price h3 { margin:0 0 8px; font-size:14px; color:#01367c; }
#bk .bk-price-t { width:100%; border-collapse:collapse; font-size:13px; }
#bk .bk-price-t td { padding:3px 0; }
#bk .bk-price-num { text-align:right; white-space:nowrap; }
#bk .bk-price-tot { margin:8px 0 0; padding-top:8px; font-size:15px; color:#01367c;
    border-top:1px solid #cfe0f5; }
#bk .bk-price-tot b { font-size:18px; }

/* ==== Shop (shop.php) ==== */
#bk .bk-shop-sec h2 { margin:0 0 10px; }
#bk .bk-shop-item { padding:10px 0; border-top:1px solid #eef0f5; }
#bk .bk-shop-item:first-of-type { border-top:0; padding-top:0; }
#bk .bk-shop-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
#bk .bk-shop-name { font-weight:600; color:#20263d; }
#bk .bk-shop-price { font-weight:700; color:#01367c; white-space:nowrap; }
#bk .bk-shop-opt { margin:8px 0 2px; font-size:12px; color:#7d8183; }
#bk .bk-shop-line { display:flex; align-items:center; gap:10px; margin:6px 0; }
#bk .bk-shop-vname { flex:1 1 auto; font-size:14px; }
#bk .bk-shop-stock { flex:0 0 auto; margin-left:auto; font-size:12px; color:#7d8183; min-width:78px; text-align:right; }
#bk .bk-shop-q { flex:0 0 auto; width:64px; padding:7px 8px; font-size:15px;
    border:1px solid #d2d4d6; border-radius:6px; text-align:center; }
#bk .bk-shop-q:disabled { background:#f2f3f5; color:#9aa0a6; }
#bk .bk-shop-err { margin:2px 0 0; font-size:12px; color:#c0392b; }
#bk .bk-shop-bar { position:sticky; bottom:0; display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:12px; margin-top:16px; padding:12px 14px;
    background:#f0f4ff; border:1px solid #a7d6ff; border-radius:8px; }
#bk .bk-shop-bar b { font-size:18px; color:#01367c; }
#bk .bk-shop-bar .bk-btn { margin-top:0; width:auto; }
@media (max-width:640px){
  #bk .bk-shop-bar .bk-btn { width:100%; }
  /* The sticky shop bar must float ABOVE the bottom navigation bar (and the raised central
     button), otherwise it goes behind. */
  #bk .bk-shop-bar { bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 4px 14px rgba(20,60,120,.16); }
}
#bk .bk-doc-mut { color:#7d8183; }
#bk .bk-doc-grand { margin:12px 0 0; text-align:right; font-size:16px; color:#01367c; }
#bk .bk-doc-grand b { font-size:19px; }
/* Receipt on a phone: the table scrolls in its frame instead of overflowing the page. */
#bk .bk-doc-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
#bk .bk-doc-scroll table { min-width:520px; }
@media print { #bk .bk-doc-scroll { overflow:visible; } #bk .bk-doc-scroll table { min-width:0; } }

/* ==== Satisfaction survey (survey.php, invitation on index.php) ==== */
#bk .bk-sv-banner { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 16px;
  padding:12px 14px; background:#eef4fb; border:1px solid #b9d3f0; border-left:5px solid #0254a8;
  border-radius:8px; font-size:14px; color:#123a63; }
#bk .bk-sv-banner-txt { flex:1 1 260px; }
#bk .bk-sv-banner .bk-btn { margin:0; white-space:nowrap; }
#bk .bk-sv-where { margin:-6px 0 14px; }
#bk .bk-sv-intro { margin:0 0 16px; padding:10px 12px; background:#f4f8fc; border:1px solid #d5e2f0;
  border-radius:6px; font-size:13px; color:#33506f; }
#bk .bk-sv-secintro { margin:-6px 0 14px; }
#bk .bk-sv-q { border:0; margin:0 0 16px; padding:0; min-width:0; }
#bk .bk-sv-q legend { padding:0; margin:0 0 8px; font-weight:600; font-size:14px; color:#01367c; }
#bk .bk-sv-q legend .bk-hint { display:block; font-weight:400; margin-top:2px; }
#bk .bk-sv-scale { display:grid; grid-template-columns:repeat(5, 44px); gap:8px; }
#bk .bk-sv-scale label { position:relative; margin:0; }
#bk .bk-sv-scale input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
#bk .bk-sv-scale label span { display:flex; width:44px; height:44px; align-items:center; justify-content:center;
  border:2px solid #c9d4df; border-radius:50%; background:#fff; color:#33506f; font-weight:700; font-size:16px;
  cursor:pointer; user-select:none; }
#bk .bk-sv-scale label:hover span { border-color:#0254a8; }
#bk .bk-sv-scale input:checked + span { background:#0254a8; border-color:#0254a8; color:#fff; }
#bk .bk-sv-scale input:focus-visible + span { outline:3px solid #9dbbe0; outline-offset:2px; }
#bk .bk-sv-ends { display:flex; justify-content:space-between; width:252px; margin-top:4px; font-size:12px; color:#7d8183; }
#bk .bk-sv-t { display:block; margin:6px 0 12px; }
#bk .bk-sv-t span { display:block; margin:0 0 4px; font-size:13px; font-weight:600; color:#33506f; }
#bk .bk-sv-t textarea { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid #c9d4df;
  border-radius:6px; font:inherit; font-size:14px; resize:vertical; }
#bk .bk-sv-send { margin:4px 0 20px; }
/* ==== Accounts: receipt screen (receipt.php), balances (registrations.php, index.php) ==== */
#bk .bk-acc { width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
#bk .bk-acc th, #bk .bk-acc td { padding:6px 8px; border-bottom:1px solid #e1e6ec; text-align:left; vertical-align:top; }
#bk .bk-acc th { font-size:12px; color:#4c4e50; font-weight:600; }
#bk .bk-acc .n { text-align:right; white-space:nowrap; }
#bk .bk-acc tr.sub td { border-bottom:none; padding-top:0; font-size:12px; color:#7d8183; }
#bk .bk-acc tr.tot td { font-weight:700; color:#01367c; border-bottom:2px solid #01367c; }
#bk .bk-acc tr.off td { color:#9a9ea1; text-decoration:line-through; }
#bk .bk-acc-h { margin:18px 0 6px; font-size:16px; color:#01367c; }
#bk .bk-acc-bal { margin:16px 0 8px; padding:10px 14px; border-radius:8px; font-size:16px; font-weight:600; text-align:center; }
#bk .bk-acc-bal.due { background:#fdf0e6; border:1px solid #cb8137; color:#8a5a26; }
#bk .bk-acc-bal.ok { background:#d2f4cd; border:1px solid #75ae77; color:#1d6b21; }
#bk .bk-acc-bal.over { background:#efe7fb; border:1px solid #a98bd8; color:#5b2a9e; }
#bk .bk-owed { margin:0 0 16px; padding:12px 16px; border-radius:8px; background:#fdf0e6; border:1px solid #cb8137; color:#20263d; }
#bk .bk-owed h2 { margin:0 0 6px; font-size:16px; color:#8a5a26; }
#bk .bk-owed ul { margin:4px 0 0; padding-left:18px; }
#bk .bk-owed li { margin:4px 0; }