/* ============================================
   ICE FISHING DEMO - Extended Components
   Uses original bundle.css theme (light)
   ============================================ */

/* --- Author Block --- */
.author-block {
    background: var(--table-1-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 24px;
    margin: 32px 0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.author-block__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--button-bg-color);
    flex-shrink: 0;
}
.author-block__info { flex: 1; }
.author-block__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color);
    margin-bottom: 4px;
}
.author-block__role {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}
.author-block__bio {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
}
.author-block__bio a { color: var(--button-bg-color); text-decoration: underline; }
.author-block__method {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}
.author-block__method strong { color: var(--title-color); }

/* --- TOC --- */
.toc-block {
    background: var(--table-1-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin: 28px auto;
    max-width: 1110px;
}
.toc-block__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--title-color);
    margin-bottom: 14px;
}
.toc-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}
.toc-block__list li {
    counter-increment: toc;
    margin-bottom: 8px;
}
.toc-block__list li a {
    color: var(--button-bg-color);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    transition: color 0.2s;
}
.toc-block__list li a:hover { color: var(--button-bg-hover); }
.toc-block__list li a::before {
    content: counter(toc) ".";
    color: #999;
    font-weight: 600;
    min-width: 20px;
}

/* --- Content Image --- */
.content-image {
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    border: 1px solid var(--border-color);
}
.content-image img { width: 100%; height: auto; display: block; }

/* --- Bonus Cards --- */
.bonus-card {
    background: var(--table-1-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    margin: 20px 0;
}
.bonus-card--blue { border-left: 4px solid #3b82f6; }
.bonus-card--orange { border-left: 4px solid #f97316; }
.bonus-card--red { border-left: 4px solid #ef4444; }
.bonus-card--multi { border-left: 4px solid #7c3aed; }
.bonus-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color);
    margin-bottom: 12px;
}
.bonus-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 8px;
}
.bonus-card p:last-child { margin-bottom: 0; }
.bonus-card__image {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.bonus-card__image img { width: 100%; height: auto; display: block; }

/* --- Stats Row --- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.stat-box {
    background: var(--table-2-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.stat-box__value {
    font-size: 28px;
    font-weight: 800;
    color: var(--button-bg-color);
    display: block;
    margin-bottom: 6px;
}
.stat-box__label {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* --- Related Games --- */
.related-games {
    max-width: 1110px;
    margin: 32px auto;
}
.related-games__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color);
    margin-bottom: 16px;
}
.related-games__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.game-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.game-card__image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.game-card__body { padding: 14px; text-align: center; }
.game-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
    margin-bottom: 10px;
}
.game-card__btn {
    display: inline-block;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.game-card__btn:hover { background: var(--button-bg-hover); color: #fff; }

/* --- Comparison Table --- */
.comparison-table {
    overflow-x: auto;
    margin: 20px 0;
}
.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.comparison-table th,
.comparison-table td {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-color);
}
.comparison-table th {
    background: var(--table-header-color);
    color: var(--title-color);
    font-weight: 600;
}
.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #666;
}
.comparison-table tr:nth-child(even) td {
    background: var(--table-2-color);
}
.comparison-note {
    font-size: 12px;
    color: #888;
    margin-top: 10px;
    font-style: italic;
}

/* --- Pro / Contro --- */
.procontro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 20px 0;
}
.procontro__col {
    background: var(--table-1-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}
.procontro__col--pro { border-top: 3px solid #22c55e; }
.procontro__col--con { border-top: 3px solid #ef4444; }
.procontro__heading {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
}
.procontro__col--pro .procontro__heading { color: #16a34a; }
.procontro__col--con .procontro__heading { color: #dc2626; }
.procontro__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.procontro__list li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-color);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    padding-left: 22px;
    position: relative;
}
.procontro__list li:last-child { border-bottom: none; }
.procontro__col--pro .procontro__list li::before {
    content: "+";
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
}
.procontro__col--con .procontro__list li::before {
    content: "−";
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 700;
}

/* --- FAQ --- */
.faq-block { margin: 24px 0; }
.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-item__q {
    width: 100%;
    background: var(--table-1-color);
    border: none;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 600;
    padding: 16px 44px 16px 18px;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}
.faq-item__q:hover { background: var(--table-2-color); }
.faq-item__q::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--button-bg-color);
}
.faq-item.active .faq-item__q::after { content: "−"; }
.faq-item__a {
    display: none;
    padding: 0 18px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
    background: #fff;
}
.faq-item__a a { color: var(--button-bg-color); text-decoration: underline; }
.faq-item.active .faq-item__a { display: block; }

/* --- Responsible Gambling --- */
.rg-block {
    background: var(--table-1-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}
.rg-block__links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rg-block__links li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.rg-block__links li:last-child { border-bottom: none; }
.rg-block__links li a {
    color: var(--button-bg-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.rg-block__links li a:hover { text-decoration: underline; }
.rg-block__links li span {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.rg-warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 13px;
    line-height: 1.7;
    color: #991b1b;
}
.rg-warning a { color: var(--button-bg-color); text-decoration: underline; }

/* --- Info Bar --- */
.info-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px auto;
    max-width: 1110px;
    border: 1px solid var(--border-color);
}
.info-bar__item {
    background: var(--table-1-color);
    padding: 16px 14px;
    text-align: center;
}
.info-bar__label {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-bar__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--title-color);
}
.info-bar__value a { color: var(--button-bg-color); text-decoration: none; }

/* --- CTA Pair --- */
.cta-pair {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}
.cta-pair .main-button { flex: 1; text-align: center; min-width: 180px; margin-top: 0; }
.main-button--outline {
    background: transparent !important;
    border: 2px solid var(--button-bg-color) !important;
    color: var(--button-bg-color) !important;
}
.main-button--outline:hover { background: rgba(42, 65, 183, 0.05) !important; }

/* --- Page Disclaimer --- */
.page-disclaimer {
    background: var(--table-1-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    margin: 32px auto 0;
    max-width: 1110px;
    font-size: 12px;
    line-height: 1.6;
    color: #888;
}
.page-disclaimer p { margin-bottom: 8px; }
.page-disclaimer p:last-child { margin-bottom: 0; }
.page-disclaimer a { color: var(--button-bg-color); text-decoration: underline; }

/* --- Footer badges --- */
.footer__images span {
    background: var(--table-2-color) !important;
    color: var(--title-color) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .toc-block,
    .info-bar,
    .related-games,
    .page-disclaimer { margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 768px) {
    .author-block { flex-direction: column; align-items: center; text-align: center; }
    .stats-row { grid-template-columns: 1fr; }
    .related-games__grid { grid-template-columns: 1fr; }
    .procontro { grid-template-columns: 1fr; }
    .info-bar { grid-template-columns: repeat(2, 1fr); }
    .comparison-table th,
    .comparison-table td { padding: 8px 10px; font-size: 12px; }
    .cta-pair { flex-direction: column; }
    .cta-pair .main-button { min-width: 100%; }
}
@media (max-width: 480px) {
    .stat-box__value { font-size: 22px; }
}