/* ============================================================
   sportsbet365 theme — components.css
   Buttons, game cards, chips, badges, section heads, modals,
   forms, toasts, skeletons, jackpot ticker, tables.
   ============================================================ */

/* ================= Buttons ================= */

.btn-cta,
.btn-gold,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: var(--sb-touch);
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--sb-radius-sm);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    transition: transform var(--sb-fast) var(--sb-ease),
                box-shadow var(--sb-fast) var(--sb-ease),
                filter var(--sb-fast) var(--sb-ease);
}

.btn-cta {
    background: var(--sb-grad-cta);
    color: var(--sb-text-on-accent);
}
.btn-cta:hover {
    color: var(--sb-text-on-accent);
    box-shadow: var(--sb-glow-green);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-gold {
    background: var(--sb-grad-gold);
    color: var(--sb-text-on-accent);
}
.btn-gold:hover {
    color: var(--sb-text-on-accent);
    box-shadow: var(--sb-glow-gold);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
}
.btn-ghost:hover {
    background: var(--sb-surface-2);
    border-color: var(--sb-surface-3);
    color: var(--sb-text);
}

.btn-sm-sb { height: 38px; padding: 0 1rem; font-size: .875rem; }
.btn-lg-sb { height: 52px; padding: 0 1.75rem; font-size: 1.05rem; }

.btn-cta:disabled,
.btn-gold:disabled,
.btn-ghost:disabled {
    opacity: .5;
    pointer-events: none;
}

/* button spinner state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(14, 18, 32, .35);
    border-top-color: var(--sb-text-on-accent);
    border-radius: 50%;
    animation: sb-spin .7s linear infinite;
}
.btn-ghost.btn-loading::after {
    border-color: rgba(234, 240, 255, .25);
    border-top-color: var(--sb-text);
}

@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ================= Game card ================= */

.game-card {
    display: block;
    border-radius: var(--sb-radius);
    overflow: hidden;
    background: var(--sb-surface);
    border: 1px solid transparent;
    transition: transform var(--sb-med) var(--sb-ease),
                border-color var(--sb-med) var(--sb-ease),
                box-shadow var(--sb-med) var(--sb-ease);
}

.game-card__thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--sb-surface-2);
    overflow: hidden;
}

.game-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--sb-med) var(--sb-ease);
}

.game-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 18, 32, .55);
    opacity: 0;
    transition: opacity var(--sb-med) var(--sb-ease);
}

.game-card__overlay .play-btn {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sb-grad-cta);
    color: var(--sb-text-on-accent);
    font-size: 1.2rem;
    transform: scale(.8);
    transition: transform var(--sb-med) var(--sb-ease);
}

.game-card__body {
    padding: .5rem .65rem .6rem;
}

.game-card__name {
    font-size: .85rem;
    font-weight: 700;
    color: var(--sb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card__provider {
    font-size: .72rem;
    color: var(--sb-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: hover) {
    .game-card:hover {
        transform: translateY(-4px);
        border-color: var(--sb-green);
        box-shadow: var(--sb-glow-green);
    }
    .game-card:hover .game-card__thumb img { transform: scale(1.06); }
    .game-card:hover .game-card__overlay { opacity: 1; }
    .game-card:hover .game-card__overlay .play-btn { transform: scale(1); }
}

/* corner badges */
.badge-hot,
.badge-new {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: .15rem .5rem;
    border-radius: var(--sb-radius-pill);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sb-text-on-accent);
}
.badge-hot { background: var(--sb-grad-gold); }
.badge-new { background: var(--sb-grad-promo); color: #fff; }

/* responsive game grid */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}
@media (min-width: 576px)  { .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } }
@media (min-width: 768px)  { .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1400px) { .game-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ================= Chips ================= */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-surface-2);
    border: 1px solid transparent;
    color: var(--sb-text-muted);
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    transition: background var(--sb-fast) var(--sb-ease), color var(--sb-fast) var(--sb-ease);
}
.chip:hover { background: var(--sb-surface-3); color: var(--sb-text); }
.chip.active {
    background: var(--sb-grad-cta);
    color: var(--sb-text-on-accent);
}

/* ================= Section head ================= */

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.75rem 0 .9rem;
}

.section-head h2 {
    font-size: 1.15rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.section-head h2 i { color: var(--sb-green); }

.section-head .view-all {
    font-size: .85rem;
    font-weight: 600;
    color: var(--sb-text-muted);
}
.section-head .view-all:hover { color: var(--sb-green); }

/* ================= Forms ================= */

.form-control,
.form-select {
    background-color: var(--sb-surface-2);
    border-color: var(--sb-border);
    color: var(--sb-text);
    min-height: var(--sb-touch);
    border-radius: var(--sb-radius-sm);
}

.form-control::placeholder { color: var(--sb-text-dim); }

.form-control:focus,
.form-select:focus {
    background-color: var(--sb-surface-2);
    border-color: var(--sb-green);
    color: var(--sb-text);
    box-shadow: 0 0 0 3px var(--sb-green-soft);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--sb-danger);
    box-shadow: none;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(255, 92, 92, .15);
}

.invalid-feedback { color: var(--sb-danger); font-size: .82rem; }

.form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--sb-text-muted);
    margin-bottom: .35rem;
}

.input-group-text {
    background-color: var(--sb-surface-3);
    border-color: var(--sb-border);
    color: var(--sb-text-muted);
}

.form-check-input {
    background-color: var(--sb-surface-2);
    border-color: var(--sb-border);
}
.form-check-input:checked {
    background-color: var(--sb-green);
    border-color: var(--sb-green);
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--sb-green-soft); }

/* quick-amount chips in deposit */
.amount-chip {
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--sb-radius-sm);
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
    font-weight: 700;
}
.amount-chip:hover { border-color: var(--sb-green); }
.amount-chip.active {
    background: var(--sb-green-soft);
    border-color: var(--sb-green);
    color: var(--sb-green);
}

/* ================= Cards / panels ================= */

.panel-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border-soft);
    border-radius: var(--sb-radius-lg);
    padding: 1.25rem;
}

.panel-card__title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.panel-card__title i { color: var(--sb-green); }

/* stat tile (wallet page) */
.stat-tile {
    background: var(--sb-surface-2);
    border-radius: var(--sb-radius);
    padding: 1rem;
}
.stat-tile__label {
    font-size: .78rem;
    color: var(--sb-text-dim);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.stat-tile__value {
    font-size: 1.35rem;
    font-weight: 800;
}

/* ================= Modals ================= */

.modal-content { box-shadow: var(--sb-shadow-raised); }

.modal-header { padding: 1.1rem 1.35rem .9rem; }
.modal-header .modal-title { font-weight: 800; }
.modal-body { padding: 1.1rem 1.35rem 1.35rem; }

.modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

/* gradient accent strip on brand modals */
.modal-accent .modal-content { border-top: 3px solid transparent; position: relative; }
.modal-accent .modal-content::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--sb-grad-cta);
}

/* ================= Toasts ================= */

.sb-toast-region {
    position: fixed;
    top: calc(var(--sb-header-h) + 10px);
    right: 12px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(360px, calc(100vw - 24px));
}

.sb-toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: var(--sb-radius);
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-raised);
    animation: sb-toast-in .25s var(--sb-ease);
    font-size: .9rem;
}
.sb-toast--success { border-left: 3px solid var(--sb-green); }
.sb-toast--error   { border-left: 3px solid var(--sb-danger); }
.sb-toast--info    { border-left: 3px solid var(--sb-info); }
.sb-toast--gold    { border-left: 3px solid var(--sb-gold); }

.sb-toast i { margin-top: 2px; }
.sb-toast--success i { color: var(--sb-green); }
.sb-toast--error i   { color: var(--sb-danger); }
.sb-toast--info i    { color: var(--sb-info); }
.sb-toast--gold i    { color: var(--sb-gold); }

@keyframes sb-toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

/* ================= Skeletons ================= */

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--sb-surface-2);
    border-radius: var(--sb-radius);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(234, 240, 255, .06), transparent);
    animation: sb-shimmer 1.4s infinite;
}
@keyframes sb-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* game thumb placeholder while lazy image loads */
.game-card__thumb { background-image: linear-gradient(160deg, var(--sb-surface-2), var(--sb-surface-3)); }

/* ================= Jackpot ticker ================= */

.jackpot-band {
    position: relative;
    border-radius: var(--sb-radius-lg);
    padding: 1.25rem 1.5rem;
    background:
        radial-gradient(140% 200% at 100% 0%, rgba(255, 197, 61, .18), transparent 50%),
        radial-gradient(120% 180% at 0% 100%, rgba(139, 92, 246, .18), transparent 55%),
        var(--sb-surface);
    border: 1px solid rgba(255, 197, 61, .35);
    overflow: hidden;
}

.jackpot-band__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .jackpot-band__grid { grid-template-columns: 1fr 1fr; }
}

.jackpot-counter__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sb-gold);
}

.jackpot-counter__value {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 900;
    line-height: 1.15;
}

.winner-marquee {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .45rem .8rem;
    border-radius: var(--sb-radius-pill);
    background: rgba(14, 18, 32, .5);
    font-size: .85rem;
    color: var(--sb-text-muted);
    min-height: 34px;
}
.winner-marquee i { color: var(--sb-gold); }
.winner-marquee strong { color: var(--sb-text); }

/* ================= Tables (history) ================= */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--sb-radius);
    border: 1px solid var(--sb-border-soft);
}
.table-wrap .table { margin-bottom: 0; }
.table-wrap thead th {
    background: var(--sb-surface-2);
    color: var(--sb-text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    border-bottom-color: var(--sb-border);
    white-space: nowrap;
}
.table-wrap td { vertical-align: middle; }

/* status pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: var(--sb-radius-pill);
    font-size: .78rem;
    font-weight: 700;
}
.status-pill--pending  { background: var(--sb-gold-soft);  color: var(--sb-gold); }
.status-pill--approved { background: var(--sb-green-soft); color: var(--sb-green); }
.status-pill--declined { background: rgba(255, 92, 92, .12); color: var(--sb-danger); }

/* ================= Empty state ================= */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sb-text-dim);
}
.empty-state i {
    font-size: 2.2rem;
    display: block;
    margin-bottom: .75rem;
    color: var(--sb-surface-3);
}