/* ── Page wrapper ── */
.betslips-main {
    background: #f4f6f8;
    padding: 12px 12px 24px;
}

/* ── Build Your Own CTA ── */
.byo-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #c3e6cb;
    border-left: 4px solid #28a745;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #1a1a2e;
    transition: box-shadow .15s, border-color .15s;
}
.byo-cta:hover { box-shadow: 0 3px 12px rgba(40,167,69,.15); text-decoration: none; color: #1a1a2e; }
.byo-icon { font-size: 1.5rem; flex-shrink: 0; }
.byo-text { flex: 1; }
.byo-title { font-weight: 700; font-size: .95rem; color: #1b5e20; }
.byo-sub  { font-size: .78rem; color: #6c757d; margin-top: 1px; }
.byo-arrow { color: #adb5bd; font-size: .85rem; flex-shrink: 0; }

/* ── Admin quick action ── */
.admin-actions {
    text-align: right;
    margin-bottom: 8px;
}
.admin-action-link {
    font-size: .78rem;
    color: #ffc107;
    text-decoration: none;
    font-weight: 600;
}
.admin-action-link:hover { color: #e0a800; text-decoration: none; }

/* ── Category filter tabs ── */
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cat-filter-btn {
    border: none; border-radius: 20px; padding: 5px 14px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    background: #e9ecef; color: #495057; transition: all 0.2s;
    touch-action: manipulation;
}
.cat-filter-btn.active, .cat-filter-btn:hover { color: #fff; }
.cat-filter-btn[data-cat="all"].active     { background: #343a40; }
.cat-filter-btn[data-cat="FEATURED"].active { background: #ffc107; color: #333; }
.cat-filter-btn[data-cat="BANKER"].active  { background: #c8a800; color: #333; }
.cat-filter-btn[data-cat="SAFE"].active    { background: #28a745; }
.cat-filter-btn[data-cat="VALUE"].active   { background: #007bff; }
.cat-filter-btn[data-cat="BOLD"].active    { background: #fd7e14; }
.cat-filter-btn[data-cat="LONGSHOT"].active { background: #6f42c1; }
.cat-filter-btn[data-cat="MY"].active      { background: #20c997; }

.betslip-card[hidden] { display: none !important; }

/* ── Category description strip ── */
.cat-description {
    font-size: 0.8rem; color: #6c757d;
    padding: 6px 10px; background: #f8f9fa;
    border-left: 3px solid #dee2e6; border-radius: 4px;
    margin-bottom: 10px; display: none;
}
.cat-description.visible { display: block; }

/* ── Betslip card ── */
.slip-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* ── Card header ── */
.slip-header {
    border-left: 4px solid #dee2e6;
    padding: 12px 14px 10px;
    background: #fafbfc;
    border-bottom: 1px solid #f0f0f0;
}
.slip-cat-FEATURED { border-left-color: #ffc107; background: #fffdf0; }
.slip-cat-BANKER   { border-left-color: #c8a800; }
.slip-cat-SAFE     { border-left-color: #28a745; }
.slip-cat-VALUE    { border-left-color: #007bff; }
.slip-cat-BOLD     { border-left-color: #fd7e14; }
.slip-cat-LONGSHOT { border-left-color: #6f42c1; }

/* badges row */
.slip-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }

.slip-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}
.badge-FEATURED { background: #ffc107; color: #333; }
.badge-BANKER   { background: #ffd700; color: #333; }
.badge-SAFE     { background: #28a745; color: #fff; }
.badge-VALUE    { background: #007bff; color: #fff; }
.badge-BOLD     { background: #fd7e14; color: #fff; }
.badge-LONGSHOT { background: #6f42c1; color: #fff; }
.badge-MY       { background: #20c997; color: #fff; }

/* odds headline */
.slip-headline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.slip-odds {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1;
}
.slip-odds-label {
    font-size: .75rem;
    color: #999;
}

/* timing row */
.slip-timing {
    font-size: .75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 6px;
}
.slip-edit-link {
    margin-left: auto;
    font-size: .75rem;
    color: #007bff;
    text-decoration: none;
}
.slip-edit-link:hover { text-decoration: underline; }

/* ── Card body / tip list ── */
.slip-body { padding: 10px 14px; }

.slip-tips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slip-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f4f4f4;
    font-size: .84rem;
    flex-wrap: wrap;
}
.slip-tip-row:last-child { border-bottom: none; }

.slip-fixture {
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.slip-fixture:hover { color: #007bff; text-decoration: none; }

.slip-prediction {
    flex: 1;
    color: #555;
    font-size: .82rem;
    min-width: 0;
}

.slip-odds-pill {
    background: #f0f4ff;
    color: #007bff;
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Card footer (affiliate buttons) ── */
.slip-footer {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
    flex-wrap: wrap;
}

/* ── Paywall card ── */
.paywall-card {
    text-align: center;
    padding: 28px 20px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    margin-bottom: 10px;
}
.paywall-icon { font-size: 2rem; color: #adb5bd; display: block; margin-bottom: 10px; }
.paywall-card p { color: #6c757d; margin-bottom: 14px; font-size: .9rem; }

/* ── Shared Button Base ── */
.bet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    text-decoration: none;
    transition: box-shadow .2s, transform .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    white-space: nowrap;
}
.bet-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.18); color: white; }
.bet-btn:active { transform: translateY(1px); }
.bet-btn img { height: 20px; width: auto; object-fit: contain; flex-shrink: 0; }

.mozzart-btn { background: #fcfcfc; }
.mozzart-btn:hover { background: #fcfcfc; }
.onexbet-btn { background: #fcfcfc; }
.onexbet-btn:hover { background: #fcfcfc; }

@media (max-width: 576px) {
    .bet-btn { font-size: .85rem; padding: 7px 12px; }
    .slip-fixture { max-width: 110px; }
}