/* /booking-codes/ hub only (enqueued by mu-plugins/betadvisor-page-codes-hub.php). Classes prefixed chub. */

/* Compact page head so the switcher sits in the first screen */
.tpl-codes .page-head--band { padding: 12px 0 14px; margin-bottom: 14px; }
.tpl-codes > .wrap > .notice, .tpl-codes > .wrap > .cta-strip { display: none; }
@media (max-width: 759px) {
	.tpl-codes .page-head .lead { display: none; }
	.tpl-codes .page-head h1 { font-size: 1.7rem; margin: .1em 0 .25em; }
	.tpl-codes .page-head .meta-line { margin: 0; font-size: .82rem; }
	.tpl-codes .entry { padding-top: 12px; }
}

/* Switcher */
.chub { margin: 0 0 1.4em; border-radius: var(--radius); background: var(--green); color: #e4efe9; box-shadow: 0 10px 28px rgba(13, 59, 44, .22); overflow: hidden; }
@media (max-width: 759px) { .chub { margin-left: -6px; margin-right: -6px; } }
.chub a:not(.rv-btn) { color: var(--lime); }
.chub__today { padding: 12px 14px; background: rgba(0, 0, 0, .18); }
.chub__h { margin: 0 0 8px; font-family: var(--font-head); font-weight: 800; color: #fff; font-size: .98rem; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.chub__live { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(183, 227, 74, .25); }
.chub__picks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .chub__picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chub__picks li { margin: 0; min-width: 0; }
.chub__picks label { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; }
.chub__picks input { width: 17px; height: 17px; margin: 0; accent-color: var(--green-2); }
.chub__ko { font-size: .78rem; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chub__m { min-width: 0; font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chub__picks b { padding: 2px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: .82rem; white-space: nowrap; }
.chub__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: .85rem; }
.chub__copy { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-weight: 800; font-size: .85rem; }
.chub__copy:hover { background: rgba(255, 255, 255, .1); }
.chub__copy:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.chub__st { color: #cfe2d8; font-size: .8rem; }

.chub__sw { padding: 12px 14px 4px; }
.chub__h2 { margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.chub__chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.chub:not(.is-js) .chub__chips { display: none; }
.chub__chips button { all: unset; box-sizing: border-box; flex: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 800; font-size: .88rem; white-space: nowrap; }
.chub__chips button[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--green); }
.chub__chips button:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.chub__p { padding: 4px 0 6px; }
.chub__p[hidden] { display: none; }
.chub:not(.is-js) .chub__p + .chub__p { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 10px; }
.chub__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; }
.chub__brand b { font-family: var(--font-head); color: #fff; font-size: 1.1rem; }
.chub__badge { padding: 2px 10px; border-radius: 999px; background: var(--lime); color: var(--green); font-size: .74rem; font-weight: 800; }
.chub__badge--soft { background: rgba(255, 255, 255, .12); color: #cfe2d8; }
.chub__load { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 8px; }
@media (min-width: 620px) { .chub__load { grid-template-columns: minmax(0, 1fr) auto; } }
.chub__load input { font: inherit; font-size: 1.1rem; font-weight: 800; letter-spacing: .1em; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--lime); background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; text-transform: uppercase; }
.chub__load input::placeholder { letter-spacing: normal; text-transform: none; font-weight: 600; color: #9aa59f; }
.chub__load .rv-btn { margin: 0; justify-content: center; text-align: center; }
.chub__note { margin: 0 0 6px; font-size: .84rem; color: #cfe2d8; }
.chub__foot { margin: 0; padding: 8px 14px 10px; font-size: .74rem; color: #a9c6b7; border-top: 1px solid rgba(255, 255, 255, .12); }

/* Code anatomy figure */
.chub-ana { margin: 0 0 1.4em; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, #eef4f0, #f8f6ef); }
.chub-ana__code { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }
.chub-ana__code span { display: grid; place-items: center; width: 42px; height: 52px; border-radius: 9px; background: var(--green); color: var(--lime); font-family: var(--mono); font-size: 1.5rem; font-weight: 800; box-shadow: 0 4px 0 #082419; }
@media (max-width: 420px) { .chub-ana__code span { width: 34px; height: 44px; font-size: 1.2rem; } }
.chub-ana__cap { text-align: center; margin: 0 0 14px; font-size: .9rem; color: var(--ink-soft); }
.chub-ana__grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .chub-ana__grid { grid-template-columns: 1fr 1fr; } }
.chub-ana__col { padding: 12px 14px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); }
.chub-ana__col b { display: block; margin: 0 0 6px; font-family: var(--font-head); }
.chub-ana__col ul { list-style: none; margin: 0; padding: 0; }
.chub-ana__col li { position: relative; margin: 0 0 4px; padding-left: 24px; font-size: .92rem; }
.chub-ana__col li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.chub-ana__col--in { border-top: 4px solid var(--green-2); }
.chub-ana__col--in b { color: var(--green); }
.chub-ana__col--in li::before { content: "\2713"; color: var(--green-2); }
.chub-ana__col--out { border-top: 4px solid var(--red-line); }
.chub-ana__col--out b { color: #8a3f10; }
.chub-ana__col--out li::before { content: "x"; color: #a4511b; }
.chub-ana figcaption { margin-top: 10px; font-size: .76rem; color: var(--ink-soft); text-align: center; }

/* Content blocks */
.entry-content .chub-kicker { margin: 0 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); }
.entry-content .chub-kicker + h2 { margin-top: 0; }
.entry-content .chub-kicker + h2::before { display: none; }
.entry-content .chub-table { display: block; overflow-x: auto; font-size: .9rem; }
.entry-content .chub-table td:first-child { font-weight: 700; color: var(--green); white-space: nowrap; }
.chub-cards { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 0 0 1.2em; }
@media (min-width: 720px) { .chub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chub-card { padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: var(--radius-sm); background: #fbfaf6; font-size: .93rem; }
.chub-card b { display: block; font-family: var(--font-head); color: var(--green); margin: 0 0 4px; }
.chub-card p { margin: 0; }
.chub-gloss { margin: 0 0 1.2em; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .chub-gloss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chub-gloss div { padding: 10px 14px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); font-size: .9rem; }
.chub-gloss dt, .chub-gloss b { font-weight: 800; color: var(--green); }
.chub-flags { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0 0 1.2em; }
@media (min-width: 720px) { .chub-flags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chub-flags h3 { margin: 0 0 8px; font-size: 1rem; }
.chub-flags ul { list-style: none; margin: 0; padding: 0; }
.chub-flags li { position: relative; margin: 0 0 6px; padding: 8px 10px 8px 34px; border-radius: var(--radius-sm); font-size: .92rem; }
.chub-flags li::before { position: absolute; left: 10px; top: 9px; font-weight: 800; }
.chub-red li { background: var(--red-soft); }
.chub-red li::before { content: "x"; color: #a4511b; }
.chub-green li { background: var(--green-soft); }
.chub-green li::before { content: "\2713"; color: var(--green-2); }
.chub-note { padding: 14px 16px; margin: 0 0 1.4em; border-radius: var(--radius-sm); background: var(--green-soft); border-left: 4px solid var(--green-2); font-size: .95rem; }
.chub-note p { margin: 0 0 .4em; }
.chub-note p:last-child { margin: 0; }
