/* =====================================================================
   Components: photo frame, odds board / fixtures / odd buttons,
   bet slip, tabs, section heads, editorial doc pieces, accordion
   ===================================================================== */

/* ---------- Photo frame ---------- */
.photo { position: relative; overflow: hidden; border: 2px solid var(--c-ink); background: #000; --shade: .12; }
.photo--line { border-color: var(--c-line); }
.photo--orange { border-color: var(--c-orange); }
.photo--thin { border-width: 1px; }
.photo__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease-out); }
.photo:hover .photo__img { transform: scale(1.035); }
.photo::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--shade)); pointer-events: none; }
.photo__label { position: absolute; z-index: 2; top: 16px; left: 16px; background: var(--c-orange); padding: 6px 10px; font: 700 12px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-paper); }
.photo__label--dark { color: #000; padding: 6px 12px; }
.photo__label--bottom { top: auto; bottom: 16px; }
.photo__label--full { left: 0; right: 0; bottom: 0; top: auto; padding: 8px 16px; font-size: 14px; color: #000; }
.photo__bar { position: absolute; z-index: 2; left: 16px; bottom: 16px; width: 220px; height: 4px; background: var(--c-orange); transform-origin: left; animation: bar-grow 1.1s var(--ease-out) .4s both; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.photo__tag { position: absolute; z-index: 2; right: 16px; bottom: 16px; background: #000; border: 2px solid var(--c-line); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.photo__tag--thin { border-width: 1px; padding: 11px; gap: 2px; }
.photo__tag-label { font: 700 10px/1.3 var(--f-plex); letter-spacing: .5px; color: var(--c-gray); }
.photo__tag-value { font: 700 18px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.photo__tag-value--sm { font-size: 16px; }
@media (max-width: 767px) {
  .photo { border-width: 1px; }
  .photo__label { top: 12px; left: 12px; padding: 4px 8px; }
  .photo__label--bottom { top: auto; bottom: 12px; }
  .photo__label--full { left: 0; right: 0; bottom: 0; top: auto; padding: 8px 16px; font-size: 12px; }
  .photo__bar { left: 12px; bottom: 12px; width: 120px; height: 3px; }
  .photo__tag { right: 12px; bottom: 12px; border-width: 1px; padding: 7px; gap: 2px; }
  .photo__tag-label { font-size: 9px; }
  .photo__tag-value { font-size: 16px; }
}

/* ---------- Section head ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sec-head__left { display: flex; flex-direction: column; gap: 12px; }
.sec-head--baseline { align-items: baseline; }

/* ---------- Tabs (categories) ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { padding: 9px 23px; border: 1px solid var(--c-ink); background: var(--c-paper); font: 700 14px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-gray-2); transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.tab:hover { color: var(--c-ink); }
.tab--active { background: var(--c-orange); color: #000; }
.tab:active { transform: scale(.97); }
@media (max-width: 767px) {
  .tabs { gap: 4px; }
  .tab { padding: 9px 13px; font-size: 13px; }
  .tab:first-child { padding: 9px 15px; }
}

/* ---------- Odds board ---------- */
.board { border: 1px solid #000; background: var(--c-paper); color: var(--c-ink); position: relative; }
.board__head { display: flex; align-items: center; gap: 16px; background: #000; padding: 14px 24px; }
.board__col { font: 700 13px/var(--lh-osw) var(--f-osw); color: #fff; }
.board__col--comp { width: 140px; flex: none; }
.board__col--fixture { flex: 1; }
.board__col--odds { width: 320px; flex: none; text-align: right; }
.board__body { position: relative; min-height: 92px; }
.board__body.is-loading { opacity: .5; pointer-events: none; }
.board__empty { padding: 32px 24px; font: 400 14px/1.4 var(--f-plex); color: var(--c-gray-2); }

.fixture { display: flex; align-items: center; padding: 20px 20px 19px; border-bottom: 1px solid var(--c-ink); animation: fixture-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.fixture:last-child { border-bottom: 0; padding-bottom: 20px; }
@keyframes fixture-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fixture__comp { width: 140px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.fixture__league { font: 700 14px/var(--lh-osw) var(--f-osw); color: var(--c-ink); }
.fixture__time { font: 600 12px/1.3 var(--f-plex); color: var(--c-gray-2); }
.fixture__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fixture__title { font: 700 18px/var(--lh-osw) var(--f-osw); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fixture__title-short { display: none; }
.fixture__market { font: 700 11px/1.3 var(--f-plex); letter-spacing: .5px; color: var(--c-orange-dark); }
.fixture__odds { width: 320px; flex: none; display: flex; justify-content: flex-end; gap: 8px; }

.odd-btn {
  position: relative; width: 100px; height: 52px; flex: none; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--c-paper); border: 1px solid var(--c-ink); color: var(--c-ink); cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
}
.odd-btn::before { content: ''; position: absolute; inset: 0; background: var(--c-orange); transform: scaleY(0); transform-origin: bottom; transition: transform .28s var(--ease-out); }
.odd-btn > * { position: relative; z-index: 1; }
.odd-btn:hover { border-color: var(--c-orange); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.5); }
.odd-btn:active { transform: scale(.96); }
.odd-btn__label { font: 700 8px/1.3 var(--f-plex); color: var(--c-gray-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; transition: color var(--t-fast); }
.odd-btn__value { font: 700 16px/var(--lh-osw) var(--f-osw); color: var(--c-ink); transition: color var(--t-fast); }
.odd-btn--active::before { transform: scaleY(1); }
.odd-btn--active .odd-btn__label { color: #000; }
.odd-btn--light .odd-btn__label, .odd-btn--light .odd-btn__value { color: var(--c-paper); }
.odd-btn--light.odd-btn--active .odd-btn__label { color: var(--c-paper); }
.odd-btn--flash { animation: odd-flash .6s var(--ease); }
@keyframes odd-flash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px rgba(255,90,0,.35); } }

@media (max-width: 767px) {
  .board { border: 0; background: transparent; }
  .board__head { display: none; }
  .board__empty { padding: 16px 0; }
  .fixture { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 15px; border-bottom: 1px solid var(--c-gray-2); }
  .fixture + .fixture { margin-top: 16px; }
  .fixture:last-child { border-bottom: 0; padding-bottom: 4px; }
  .fixture__comp { width: auto; flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .fixture__league { font-size: 13px; color: #000; }
  .fixture__time { font-weight: 700; }
  .fixture__title { white-space: normal; font-size: 18px; line-height: 20px; color: #000; }
  .fixture__title-full { display: none; }
  .fixture__title-short { display: inline; }
  .fixture__market { font-size: 10px; }
  .fixture__odds { width: auto; gap: 4px; }
  .odd-btn { flex: 1; width: auto; height: 44px; border-color: #000; gap: 2px; }
  .odd-btn__label { font-size: 9px; }
  .odd-btn__value { font-size: 14px; color: #000; }
}

/* ---------- Bet slip ---------- */
.slip {
  width: 400px; flex: none; align-self: flex-start; position: sticky; top: 88px;
  background: var(--c-surface); border: 2px solid var(--c-line); padding: 26px;
  display: flex; flex-direction: column; gap: 20px; color: var(--c-paper);
}
.slip--sports { background: #000; padding: 22px; }
.slip--racing { background: var(--c-plum); padding: 22px; gap: 16px; }
.slip__head { display: flex; justify-content: space-between; align-items: center; }
.slip__title { font: 700 20px/var(--lh-osw) var(--f-osw); letter-spacing: 1.5px; }
.slip--racing .slip__title { font-size: 18px; letter-spacing: 1px; }
.slip__count { background: var(--c-orange); color: #000; font: 700 11px/var(--lh-osw) var(--f-osw); padding: 2px 10px; transition: transform var(--t-med) var(--ease-out); }
.slip--racing .slip__count { color: var(--c-paper); }
.slip__count.is-bump { animation: count-bump .4s var(--ease-out); }
@keyframes count-bump { 30% { transform: scale(1.18); } }
.slip__rule { height: 1px; background: var(--c-line); margin: 0; }
.slip__cards { display: flex; flex-direction: column; gap: 12px; }
.slip__card { background: #000; border: 1px solid var(--c-orange); padding: 15px; display: flex; flex-direction: column; gap: 12px; transform-origin: top; animation: card-in .4s var(--ease-out) both; }
.slip--racing .slip__card { background: var(--c-bg); border-width: 2px; padding: 14px; gap: 8px; }
.slip__card.is-leaving { animation: card-out .3s var(--ease) forwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes card-out { to { opacity: 0; transform: translateX(16px); height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -12px; border-width: 0; } }
.slip__card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.slip__card-title { flex: 1; min-width: 0; font: 700 15px/var(--lh-osw) var(--f-osw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip__remove { width: 14px; height: 14px; flex: none; color: var(--c-gray); display: flex; margin-top: 4px; transition: color var(--t-fast), transform var(--t-fast); }
.slip__remove:hover { color: var(--c-orange); transform: rotate(90deg); }
.slip__card-market { font: 400 12px/1.3 var(--f-plex); color: var(--c-gray); }
.slip--racing .slip__card-market { font-size: 13px; }
.slip__card-odds { font: 700 24px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.slip__stake { display: flex; flex-direction: column; gap: 8px; }
.slip__stake-label { font: 700 13px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; }
.slip__input { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 16px; background: #000; border: 1px solid var(--c-line); transition: border-color var(--t-fast); }
.slip--racing .slip__input { background: var(--c-bg); }
.slip__input:focus-within { border-color: var(--c-orange); }
.slip__cur { font: 600 14px/var(--lh-osw) var(--f-osw); color: var(--c-gray); }
.slip__stake-input { width: 140px; text-align: right; background: transparent; border: 0; outline: none; font: 700 18px/var(--lh-osw) var(--f-osw); color: var(--c-paper); -moz-appearance: textfield; }
.slip__stake-input::-webkit-outer-spin-button, .slip__stake-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slip__quick { display: flex; gap: 8px; }
.slip__quick-btn { flex: 1; height: 36px; background: #000; border: 1px solid var(--c-line); font: 700 13px/1 var(--f-osw); color: var(--c-paper); transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast); }
.slip--racing .slip__quick-btn { background: var(--c-bg); }
.slip__quick-btn:hover { border-color: var(--c-orange); }
.slip__quick-btn:active { transform: scale(.96); }
.slip__totals { display: flex; flex-direction: column; gap: 10px; }
.slip__row { display: flex; justify-content: space-between; align-items: baseline; }
.slip__row-label { font: 400 13px/1.3 var(--f-plex); color: var(--c-gray); }
.slip__row-value { font: 700 14px/var(--lh-osw) var(--f-osw); color: var(--c-paper); font-variant-numeric: tabular-nums; }
.slip__row-value--return { font-size: 22px; color: var(--c-orange); }
.slip__place { width: 100%; height: 52px; background: var(--c-orange); color: #000; font: 700 16px/1 var(--f-osw); letter-spacing: 1.5px; transition: background-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.slip--racing .slip__place { color: var(--c-paper); }
.slip__place:hover { background: var(--c-orange-hover); box-shadow: 0 8px 24px -8px rgba(255,90,0,.55); }
.slip__place:active { transform: scale(.985); }
.slip__place[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.slip__error { font: 500 12px/1.4 var(--f-plex); color: var(--c-orange); }
.slip__empty { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.slip__empty-title { font: 700 14px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-gray); }
.slip__empty-text { font: 400 12px/1.4 var(--f-plex); color: var(--c-gray-2); }
.slip__placed { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; animation: card-in .5s var(--ease-out) both; }
.slip__placed-icon { width: 48px; height: 48px; border: 2px solid var(--c-orange); display: flex; align-items: center; justify-content: center; color: var(--c-orange); }
.slip__placed-title { font: 700 20px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; }
.slip__placed-text { font: 400 12px/1.4 var(--f-plex); color: var(--c-gray); }
.slip__placed-list { display: flex; flex-direction: column; gap: 6px; }
.slip__placed-item { font: 400 12px/1.4 var(--f-plex); color: var(--c-paper); display: flex; justify-content: space-between; gap: 12px; }
.slip__placed-item b { font: 700 13px/1.3 var(--f-osw); color: var(--c-orange); }
.slip__again { align-self: flex-start; font: 700 14px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-orange); }

@media (max-width: 1099px) { .slip { width: 340px; padding: 20px; } }
@media (max-width: 767px) {
  .slip { width: 100%; position: static; padding: 14px; gap: 16px; }
  .slip--sports, .slip--racing { padding: 14px; }
  .slip--racing { background: var(--c-surface); padding: 18px; }
  .slip__title { font-size: 18px; letter-spacing: 1px; }
  .slip__count { font-size: 10px; padding: 2px 8px; }
  .slip__card { padding: 11px; gap: 8px; border-width: 1px; }
  .slip--racing .slip__card { border-width: 2px; padding: 10px; }
  .slip__card-title { font-size: 14px; }
  .slip__card-market { font-size: 11px; }
  .slip__card-odds { font-size: 20px; }
  .slip__stake { gap: 6px; }
  .slip__stake-label { font-size: 12px; letter-spacing: .5px; }
  .slip__input { height: 44px; padding: 0 12px; }
  .slip__cur { font-size: 13px; }
  .slip__stake-input { font-size: 16px; width: 110px; }
  .slip__quick { gap: 6px; }
  .slip__quick-btn { font-size: 12px; }
  .slip__totals { gap: 6px; }
  .slip__row-label { font-size: 11px; }
  .slip__row-value { font-size: 13px; }
  .slip__row-value--return { font-size: 18px; }
  .slip__place { height: 44px; font-size: 15px; letter-spacing: 1px; }
}

/* ---------- Accordion (help centre) ---------- */
.acc { border: 1px solid rgba(244, 243, 239, .15); }
.acc__item { border-bottom: 1px solid rgba(244, 243, 239, .15); }
.acc__item:last-child { border-bottom: 0; }
.acc__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 31px 0 32px; text-align: left; }
.acc__head-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.acc__num { font: 700 16px/var(--lh-osw) var(--f-osw); color: var(--c-orange); flex: none; }
.acc__q { font: 700 22px/var(--lh-osw) var(--f-osw); color: var(--c-paper); transition: color var(--t-fast); }
.acc__head:hover .acc__q { color: var(--c-orange); }
.acc__icon { width: 24px; height: 24px; flex: none; color: var(--c-gray); display: flex; align-items: center; justify-content: center; transition: transform var(--t-med) var(--ease-out), color var(--t-fast); }
.acc__item.is-open .acc__icon { transform: rotate(45deg); color: var(--c-orange); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel-inner { overflow: hidden; }
.acc__a { padding: 0 0 32px 32px; font: 400 15px/24px var(--f-plex); color: var(--c-gray); }
@media (max-width: 767px) {
  .acc { border: 0; }
  .acc__item { border-bottom: 1px solid var(--c-line); }
  .acc__head { padding: 24px 0; gap: 12px; align-items: flex-start; }
  .acc__head-left { gap: 12px; align-items: flex-start; }
  .acc__num { font-size: 14px; width: 20px; line-height: 21px; }
  .acc__q { font-size: 18px; line-height: 22px; }
  .acc__icon { width: 20px; height: 20px; }
  .acc__a { padding: 0 0 24px 32px; font-size: 14px; line-height: 22px; }
}

/* ---------- Numbered editorial list (bullet dot) ---------- */
.dot-list { display: flex; flex-direction: column; gap: 12px; }
.dot-list__item { display: flex; align-items: flex-start; gap: 12px; }
.dot-list__dot { width: 6px; height: 6px; flex: none; margin-top: 8px; background: var(--c-orange); border-radius: 50%; }