/* MostBet CZ – Site 1 | Dark navy #0A1628, orange #FF5400, blue #1A56DB */
/* Prefix: mb- / mbhs / mbcat / mbsl / mblv / mbgs / mbbc / mbtp / mbfq / mbsi */

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background: #0A1628;
    color: #e8f0ff;
    line-height: 1.65;
    padding-bottom: 64px;
}

a { color: #4d8fdb; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 1.65rem; margin-bottom: 1rem; color: #e8f0ff; }
h3 { font-size: 1.2rem; margin-bottom: 0.75rem; color: #a0c4ff; }

p { margin-bottom: 0.9rem; color: #b0c8e8; }

.mb-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ================================================================
   BUTTONS
   ================================================================ */
.mb-btn-primary {
    display: inline-block;
    background: #FF5400;
    color: #fff;
    padding: 13px 34px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
    margin-top: 16px;
}
.mb-btn-primary:hover { background: #e04b00; transform: translateY(-1px); text-decoration: none; }

.mb-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #FF5400;
    border: 2px solid #FF5400;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    margin-top: 12px;
}
.mb-btn-secondary:hover { background: #FF5400; color: #fff; text-decoration: none; }

/* ================================================================
   PROMO BAR
   ================================================================ */
.mb-promo {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #FF5400;
    color: #fff;
    z-index: 9999;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
}
.mb-promo a {
    background: #fff;
    color: #FF5400;
    padding: 7px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
.mbp-close {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

/* ================================================================
   HEADER
   ================================================================ */
.mb-header {
    position: sticky;
    top: 0;
    background: #071020;
    border-bottom: 3px solid #1A56DB;
    z-index: 999;
}
.mb-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 16px;
}
.mb-logo img { height: 42px; width: auto; }

.mb-nav ul { display: flex; gap: 22px; list-style: none; }
.mb-nav a { color: #a0c0ff; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.mb-nav a:hover { color: #fff; }

.mb-reg-btn a {
    background: #FF5400;
    color: #fff;
    padding: 9px 22px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}
.mb-reg-btn a:hover { background: #e04b00; }

.mb-hmbtn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.mb-hmbtn span { display: block; width: 22px; height: 2px; background: #FF5400; }
.mb-nav.open { display: block; }

/* ================================================================
   TOC
   ================================================================ */
.mb-toc {
    background: #0d1f38;
    border-bottom: 1px solid #1a3358;
    padding: 10px 0;
}
.mb-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    list-style: none;
}
.mb-toc-list a {
    color: #7aa8d8;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.mb-toc-list a:hover { color: #FF5400; }

/* ================================================================
   HERO
   ================================================================ */
.mb-hero {
    background: linear-gradient(135deg, #0d1f38 0%, #0A1628 60%, #071020 100%);
    padding: 72px 0;
    border-bottom: 2px solid #1a3358;
}
.mb-hero__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.mb-hero__copy h1 {
    font-size: 2.3rem;
    color: #fff;
    margin-bottom: 18px;
    font-weight: 900;
    line-height: 1.2;
}
.mb-hero__copy p { color: #b0c8e8; font-size: 1.05rem; }
.mb-hero__img img { border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }

/* ================================================================
   SPORTS SECTION
   ================================================================ */
.mb-sport {
    padding: 64px 0;
    background: #0d1f38;
}
.mb-sport-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
}
.mb-sport-left {}
.mb-sport-right {}
.mb-sport-right .mb-sport-img { margin: 0; }
.mb-sport-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 28px 0 32px;
}
.mbsi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #122A4E;
    border: 1px solid #1a3d6e;
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 90px;
    transition: border-color 0.2s, transform 0.2s;
}
.mbsi:hover { border-color: #FF5400; transform: translateY(-2px); }
.mbsi span { font-size: 12px; color: #a0c0ff; font-weight: 600; text-align: center; }
.mb-sport-img {
    margin: 24px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #1a3358;
}
.mb-sport-img img { width: 100%; border-radius: 10px; }

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.mb-howit {
    padding: 64px 0;
    background: #0A1628;
}
.mb-how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}
.mbhs {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #0d1f38;
    border: 1px solid #1a3358;
    border-radius: 8px;
    padding: 20px;
    transition: border-color 0.2s;
}
.mbhs:hover { border-color: #1A56DB; }
.mbhs-n {
    background: #1A56DB;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mbhs-body strong { display: block; margin-bottom: 4px; color: #fff; font-size: 14px; }
.mbhs-body p { font-size: 13px; color: #7aa8d8; margin: 0; }

/* ================================================================
   GAMES
   ================================================================ */
.mb-games {
    padding: 64px 0;
    background: #071020;
}
.mb-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 28px 0;
}
.mbcat {
    background: #0d1f38;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #1a3358;
    transition: transform 0.2s, border-color 0.2s;
}
.mbcat:hover { transform: translateY(-3px); border-color: #FF5400; }
.mbcat img { width: 100%; object-fit: cover; }
.mbcat-info { padding: 16px; }
.mbcat-info h3 { font-size: 1rem; color: #a0c4ff; margin-bottom: 6px; }
.mbcat-info p { font-size: 13px; color: #6a8aaa; margin: 0; }

.mb-subgame { margin-top: 48px; }

/* Slots grid */
.mb-slots-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 20px;
}
.mbsl {
    background: #0d1f38;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #1a3358;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}
.mbsl:hover { transform: scale(1.05); border-color: #FF5400; }
.mbsl img { width: 100%; }
.mbsl span { display: block; font-size: 11px; color: #7aa8d8; padding: 5px 4px; font-weight: 500; }

/* Live grid */
.mb-live-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.mblv {
    background: #0d1f38;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #1a3358;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}
.mblv:hover { transform: translateY(-3px); border-color: #1A56DB; }
.mblv img { width: 100%; object-fit: cover; }
.mblv span { display: block; font-size: 12px; color: #b0c8e8; padding: 8px; font-weight: 600; }

/* ================================================================
   REGISTRATION
   ================================================================ */
.mb-regbig {
    padding: 64px 0;
    background: #0d1f38;
}
.mb-regbig__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.mb-regbig__img img { border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); }

/* ================================================================
   PAYMENTS
   ================================================================ */
.mb-pay {
    padding: 64px 0;
    background: #0A1628;
}
.mb-pay-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 32px;
    align-items: center;
}
.mb-pay-icons img {
    height: 36px;
    max-width: 80px;
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    object-fit: contain;
}
.mb-pay-group { margin-top: 40px; }
.mb-table {
    width: 100%;
    border-collapse: collapse;
    background: #0d1f38;
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
    margin-top: 12px;
}
.mb-table thead { background: #1A56DB; color: #fff; }
.mb-table th, .mb-table td { padding: 12px 16px; text-align: left; }
.mb-table td { color: #b0c8e8; border-bottom: 1px solid #1a3358; }
.mb-table tbody tr:last-child td { border-bottom: none; }
.mb-table tbody tr:hover { background: #122A4E; }

/* ================================================================
   GUIDE
   ================================================================ */
.mb-guide {
    padding: 64px 0;
    background: #071020;
    text-align: center;
}
.mb-guide-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 28px 0;
    text-align: left;
}
.mbgs {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #0d1f38;
    border-left: 4px solid #FF5400;
    border-radius: 0 8px 8px 0;
    padding: 18px 22px;
}
.mbgs-n {
    font-size: 24px;
    font-weight: 900;
    color: #FF5400;
    min-width: 48px;
    line-height: 1;
    flex-shrink: 0;
}
.mbgs-body { font-size: 14px; color: #b0c8e8; }
.mbgs-body strong { display: block; margin-bottom: 4px; color: #fff; font-size: 15px; }

/* ================================================================
   BONUSES
   ================================================================ */
.mb-bonusy {
    padding: 64px 0;
    background: #0d1f38;
}
.mb-bonus-group { margin-top: 40px; }
.mb-bonus-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.mbbc {
    background: #122A4E;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #1a3d6e;
    transition: transform 0.2s, border-color 0.2s;
}
.mbbc:hover { transform: translateY(-3px); border-color: #FF5400; }
.mbbc img { width: 100%; object-fit: cover; }
.mbbc-body { padding: 14px 16px; }
.mbbc-body strong { display: block; color: #FF5400; font-size: 15px; margin-bottom: 4px; }
.mbbc-body p { font-size: 13px; color: #7aa8d8; margin: 0; }

/* Flat row */
.mb-flat {
    display: flex;
    gap: 28px;
    align-items: center;
    background: #122A4E;
    border-radius: 10px;
    padding: 24px;
    border: 1px solid #1a3d6e;
    margin-top: 20px;
}
.mb-flat img { border-radius: 8px; flex-shrink: 0; }
.mb-flat-info strong { display: block; font-size: 17px; color: #fff; margin-bottom: 8px; }
.mb-flat-info p { font-size: 14px; color: #7aa8d8; margin-bottom: 0; }

/* ================================================================
   WIN TIPS
   ================================================================ */
.mb-winit {
    padding: 64px 0;
    background: #0A1628;
}
.mb-tips { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
.mbtp {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #0d1f38;
    border: 1px solid #1a3358;
    border-radius: 8px;
    padding: 18px 20px;
    transition: border-color 0.2s;
}
.mbtp:hover { border-color: #FF5400; }
.mbtp-icon { flex-shrink: 0; margin-top: 2px; }
.mbtp-text { font-size: 14px; color: #b0c8e8; }
.mbtp-text strong { display: block; margin-bottom: 4px; color: #fff; }

/* ================================================================
   FAQ
   ================================================================ */
.mb-faq {
    padding: 64px 0;
    background: #071020;
}
.mb-faq-list { margin-top: 28px; }
.mbfq {
    background: #0d1f38;
    border: 1px solid #1a3358;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.mbfq summary {
    padding: 16px 20px;
    font-weight: 700;
    color: #a0c4ff;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.mbfq summary::after { content: '+'; font-size: 20px; color: #FF5400; }
.mbfq[open] summary::after { content: '−'; }
.mbfq-body { padding: 0 20px 16px; font-size: 14px; color: #7aa8d8; line-height: 1.65; }

/* ================================================================
   AUTHOR
   ================================================================ */
.mb-author {
    padding: 48px 0;
    background: #0d1f38;
    border-top: 2px solid #1a3358;
}
.mb-author-box {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: #122A4E;
    border: 1px solid #1a3d6e;
    border-radius: 10px;
    padding: 28px;
}
.mb-author-box img { border-radius: 50%; flex-shrink: 0; border: 3px solid #1A56DB; }
.mb-author-info strong { display: block; font-size: 17px; color: #fff; margin-bottom: 4px; }
.mb-author-info em { display: block; font-size: 12px; color: #5a7aa0; margin-bottom: 10px; font-style: normal; }
.mb-author-info p { font-size: 13px; color: #7aa8d8; margin: 0; }

/* ================================================================
   FOOTER
   ================================================================ */
.mb-footer {
    background: #040d1a;
    color: #6a8aaa;
    padding: 40px 0 24px;
}
.mb-footer__cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
}
.mb-footer__cols h4 { color: #FF5400; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.mb-footer__cols ul { list-style: none; }
.mb-footer__cols li { margin-bottom: 6px; }
.mb-footer__cols a { color: #5a7aa0; font-size: 13px; text-decoration: none; }
.mb-footer__cols a:hover { color: #FF5400; }
.mb-footer__legal {
    border-top: 1px solid #0f2040;
    padding-top: 20px;
    font-size: 12px;
    color: #3a5a7a;
    line-height: 1.7;
}

/* ================================================================
   RESPONSIVE – 1024px
   ================================================================ */
@media (max-width: 1024px) {
    .mb-hero__layout { gap: 32px; }
    .mb-hero__copy h1 { font-size: 1.9rem; }
    .mb-how-steps { grid-template-columns: repeat(2, 1fr); }
    .mb-slots-grid { grid-template-columns: repeat(4, 1fr); }
    .mb-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   RESPONSIVE – 768px
   ================================================================ */
@media (max-width: 1024px) {
    .mb-sport-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    body { padding-bottom: 58px; }

    /* Header */
    .mb-hmbtn { display: flex; }
    .mb-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: #071020;
        padding: 16px 20px;
        z-index: 998;
        border-bottom: 2px solid #1A56DB;
    }
    .mb-nav.open { display: block; }
    .mb-nav ul { flex-direction: column; gap: 12px; }
    .mb-reg-btn { display: none; }

    /* Hero */
    .mb-hero { padding: 40px 0; }
    .mb-hero__layout { grid-template-columns: 1fr; gap: 24px; }
    .mb-hero__copy h1 { font-size: 1.7rem; }
    .mb-hero__img { order: -1; }

    /* Steps */
    .mb-how-steps { grid-template-columns: 1fr; }

    /* Sport icons */
    .mb-sport-icons { gap: 10px; }
    .mbsi { min-width: 70px; padding: 12px; }

    /* Games */
    .mb-cat-grid { grid-template-columns: 1fr; }
    .mb-slots-grid { grid-template-columns: repeat(3, 1fr); }
    .mb-live-grid { grid-template-columns: repeat(2, 1fr); }

    /* Registration */
    .mb-regbig__layout { grid-template-columns: 1fr; }
    .mb-regbig__img { display: none; }

    /* Bonuses */
    .mb-bonus-cards { grid-template-columns: 1fr; }
    .mb-flat { flex-direction: column; }

    /* Footer */
    .mb-footer__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ================================================================
   RESPONSIVE – 320px
   ================================================================ */
@media (max-width: 320px) {
    .mb-wrap { padding: 0 12px; }
    .mb-hero__copy h1 { font-size: 1.4rem; }
    h2 { font-size: 1.3rem; }
    .mb-slots-grid { grid-template-columns: repeat(2, 1fr); }
    .mb-live-grid { grid-template-columns: 1fr; }
    .mb-sport-icons { gap: 8px; }
    .mbsi { min-width: 64px; padding: 10px 8px; }
}

/* ================================================================
   RESPONSIVE – 1440px+
   ================================================================ */
@media (min-width: 1440px) {
    .mb-wrap { max-width: 1380px; }
    .mb-hero__copy h1 { font-size: 2.6rem; }
}