/*
 * OCM V2 — BettingValley Malaysia Homepage
 * Competitor-inspired layout
 * Colors: #1c222e (blue) | #2db200 (green) | #fe4e00 (orange)
 * Card design updated to match Image 2 layout
 */

/* =============================================
   SUB-NAVIGATION BAR
   ============================================= */
.ocm2-subnav {
    background: #1c222e;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 3px solid #2db200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.ocm2-anchornav {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ocm2-anchornav::-webkit-scrollbar { display: none; }
.ocm2-anchornav li a {
    display: block;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding: 11px 18px;
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s, color 0.2s;
}
.ocm2-anchornav li a:hover,
.ocm2-anchornav li a.active {
    background: #2db200;
    color: #fff;
}

/* =============================================
   BREADCRUMBS
   ============================================= */
.ocm2-breadcrumbs {
    padding: 7px 0;
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}
.ocm2-breadcrumbs .breadcrumbs,
.ocm2-breadcrumbs .breadcrumbs span {
    font-size: 12px;
    color: #777;
}
.ocm2-breadcrumbs .breadcrumbs a {
    color: #fe4e00;
    text-decoration: none;
}
.ocm2-breadcrumbs .breadcrumbs a:hover { text-decoration: underline; }

/* =============================================
   HERO SECTION
   ============================================= */
.ocm2-hero {
    background-color: #1c222e;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
    padding: 40px 0 30px;
}
.ocm2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,14,22,0.93) 0%, rgba(20,30,45,0.90) 100%);
    z-index: 0;
}
.ocm2-hero .container { position: relative; z-index: 1; }
.ocm2-hero h1 {
    color: #fff;
    font-size: 2.6rem;
    line-height: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.ocm2-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: rgba(0,0,0,0.45);
    border-radius: 8px;
    border-left: 4px solid #2db200;
    backdrop-filter: blur(2px);
}
.ocm2-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    font-size: 13px;
    color: #ddd;
}
.ocm2-meta-item i { display: none; }
.ocm2-meta-item .meta-label {
    display: block;
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.ocm2-meta-item strong { color: #fff; }
.ocm2-intro-lead {
    color: #e8e8e8;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* =============================================
   TOP 5 AT A GLANCE
   ============================================= */
.ocm2-glance { padding: 45px 0; }
.ocm2-glance-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.09);
}
.ocm2-glance-table thead tr { background: #2db200; color: #fff; }
.ocm2-glance-table thead th {
    padding: 14px 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
}
.ocm2-glance-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.ocm2-glance-table tbody tr:last-child { border-bottom: none; }
.ocm2-glance-table tbody tr:hover { background: #f5fff2; }
.ocm2-glance-table tbody tr:first-child td { border-top: 2px solid #2db200; }
.ocm2-glance-table tbody td:first-child { border-left: 3px solid #2db200; width: 80px; }
.ocm2-glance-table td {
    padding: 13px 18px;
    font-size: 14px;
    vertical-align: middle;
}
.ocm2-glance-table td:first-child { font-weight: 700; font-size: 15px; color: #1c222e; }

.glance-casino-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.glance-casino-link:hover { text-decoration: none; color: inherit; }
.glance-logo-wrap {
    width: 56px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
}
.glance-logo {
    width: 56px;
    height: 36px;
    object-fit: contain;
    padding: 3px;
    display: block;
}
.glance-logo-init {
    width: 56px;
    height: 36px;
    background: #1c222e;
    color: #2db200;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    letter-spacing: 1px;
}
.glance-rating-modern {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.gr-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #1c222e;
    line-height: 1;
}
.gr-label-exc {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    background: #2db200;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}
.gr-label-vg {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    background: #5cb85c;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}
.glance-bonus {
    color: #fe4e00;
    font-size: 13px;
}
.btn-visit {
    display: inline-block;
    background: #2db200;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 8px 18px;
    border-radius: 5px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background 0.2s;
}
.btn-visit:hover { background: #1c222e; color: #fff; text-decoration: none; }

/* =============================================
   TOP 10 COMPARISON TABLE
   ============================================= */
.ocm2-comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.09);
    font-size: 13.5px;
}
.ocm2-comparison-table thead tr { background: #1c222e; color: #fff; }
.ocm2-comparison-table thead th {
    padding: 13px 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.ocm2-comparison-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.ocm2-comparison-table tbody tr:nth-child(even) { background: #fafafa; }
.ocm2-comparison-table tbody tr:hover { background: #f0fff0; }
.ocm2-comparison-table td {
    padding: 12px 15px;
    vertical-align: middle;
}
.ocm2-comparison-table .casino-name-cell {
    font-weight: 700;
    font-size: 14px;
    color: #1c222e;
}
.ocm2-score-pill {
    display: inline-block;
    color: #2db200;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}
.ocm2-score-pill small {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    margin-left: 1px;
}
.ocm2-comparison-table td a,
.ocm2-glance-table td a {
    color: #1c222e;
    font-weight: 700;
    text-decoration: none;
}
.ocm2-comparison-table td a:hover,
.ocm2-glance-table td a:hover {
    color: #fe4e00;
    text-decoration: underline;
}

/* =============================================
   CASINO CARDS — IMAGE 2 DESIGN
   ============================================= */
.ocm2-card-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
    padding-left: 10px; /* extra breathing room for rank strips */
}

/* Wrapper — add left margin to make room for the rotated rank strip */
.ocm2-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    overflow: visible;           /* allow rank strip to sit outside */
    border: 1px solid #e5e5e5;
    border-left: none;           /* strip replaces border-left */
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    margin-left: 36px;           /* space for the rotated rank label */
}
.ocm2-card:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,0.13);
    transform: translateY(-1px);
}

/* ---- Rotated rank strip ---- */
/* The .ocm2-card-rank sits as an absolute element anchored to the
   left edge of the card, rotated so text reads bottom-to-top        */
.ocm2-card-rank {
    position: absolute;
    left: -36px;                 /* pull it out to the left margin */
    top: 0;
    bottom: 0;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #2db200;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);  /* make it read bottom → top */
    letter-spacing: 1px;
    white-space: nowrap;
    user-select: none;
    background: transparent;
    border-radius: 0;
    border: none;
}
/* Rank colour variants */
.ocm2-card.rank-1 .ocm2-card-rank { color: #2db200; }
.ocm2-card.rank-2 .ocm2-card-rank { color: #2db200; }
.ocm2-card.rank-3 .ocm2-card-rank { color: #2db200; }

/* Left green accent bar on the card itself */
.ocm2-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ddd;
    border-radius: 10px 0 0 10px;
}
.ocm2-card.rank-1::before { background: #2db200; }
.ocm2-card.rank-2::before { background: #4caf50; }
.ocm2-card.rank-3::before { background: #8bc34a; }

/* LEFT panel: logo + stars only (rank moved outside) */
.ocm2-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
    border-right: 1px solid #ebebeb;
    padding: 18px 14px;
    min-width: 100px;
    max-width: 100px;
    flex-shrink: 0;
    gap: 8px;
}

/* Logo — no box, no border, no shadow */
.ocm2-card-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 50px;
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: visible;
    flex-shrink: 0;
    box-shadow: none;
}
.ocm2-card-logo {
    width: 76px;
    height: 50px;
    object-fit: contain;
    padding: 0;
    display: block;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}
.ocm2-card-stars {
    display: flex;
    gap: 1px;
    font-size: 12px;
    color: #f5a623;
    line-height: 1;
}

/* MIDDLE: body */
.ocm2-card-body {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    min-width: 0;
}

/* Row 1: name+tagline left | badge right */
.ocm2-card-toprow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}
.ocm2-card-toprow-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ocm2-card-name {
    font-size: 18px;
    font-weight: 800;
    color: #1c222e;
    line-height: 1.2;
}
.ocm2-card-tagline {
    font-size: 11.5px;
    color: #888;
    font-style: italic;
    line-height: 1.3;
    margin: 0;
}

/* Best-for badge — outlined green pill */
.ocm2-bestfor-badge {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #1a7a00;
    border: 1.5px solid #2db200;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    padding: 5px 13px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Row 2: stat pills */
.ocm2-stat-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid #e8e8e8;
    border-radius: 7px;
    overflow: hidden;
    background: #f9f9f9;
}
.ocm2-stat-pill {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-right: 1px solid #e8e8e8;
    background: #f9f9f9;
}
.ocm2-stat-pill:last-child { border-right: none; }
.ocm2-stat-pill .stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 3px;
}
/* Bonus orange, deposit + withdrawal black */
.ocm2-stat-pill:nth-child(1) .stat-value { color: #fe4e00; }
.ocm2-stat-pill:nth-child(2) .stat-value { color: #1c222e; }
.ocm2-stat-pill:nth-child(3) .stat-value { color: #1c222e; }
.ocm2-stat-pill .stat-value {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

/* Row 3: feature bullets */
.ocm2-feature-chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 0;
}
.ocm2-chip {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    color: #444;
    line-height: 1.45;
}
.ocm2-chip::before {
    content: '●';
    color: #2db200;
    font-size: 7px;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Row 4: trust badges */
.ocm2-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    margin-top: 2px;
}
.ocm2-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid transparent;
}
.ocm2-trust-badge i { font-size: 9px; }
.tbg-blue   { background: #fff; border-color: #1c222e; color: #1c222e; }
.tbg-green  { background: #fff; border-color: #2db200; color: #1a7a00; }
.tbg-orange { background: #fff; border-color: #fe4e00; color: #c0390b; }

/* RIGHT: score block + CTAs */
.ocm2-card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    border-left: 1px solid #efefef;
    min-width: 130px;
    max-width: 130px;
    flex-shrink: 0;
    gap: 10px;
    background: #fff;
}
.ocm2-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 4px;
}
.ocm2-score-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
}
.ocm2-score-denom {
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
}
.ocm2-score-label {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    margin-top: 2px;
}
.ocm2-score-exc  .ocm2-score-num   { color: #2db200; }
.ocm2-score-exc  .ocm2-score-label { background: #2db200; }
.ocm2-score-vg   .ocm2-score-num   { color: #5cb85c; }
.ocm2-score-vg   .ocm2-score-label { background: #5cb85c; }
.ocm2-score-good .ocm2-score-num   { color: #f0ad4e; }
.ocm2-score-good .ocm2-score-label { background: #f0ad4e; }

.ocm2-card-ctas {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.ocm2-btn-play {
    display: block;
    text-align: center;
    background: #fe4e00;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    padding: 9px 12px;
    border-radius: 5px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.2s;
    white-space: nowrap;
}
.ocm2-btn-play:hover { background: #1c222e; color: #fff; text-decoration: none; }
.ocm2-btn-review {
    display: block;
    text-align: center;
    background: transparent;
    color: #1c222e;
    border: 1.5px solid #1c222e;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px;
    padding: 7px 12px;
    border-radius: 5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s;
    white-space: nowrap;
}
.ocm2-btn-review:hover { background: #1c222e; color: #fff; text-decoration: none; }

/* Editor's Pick badge */
.ocm2-editors-pick {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #fe4e00, #c0390b);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 10px;
    padding: 4px 12px 4px 10px;
    border-radius: 0 10px 0 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* =============================================
   INDIVIDUAL CASINO DETAIL SECTIONS
   ============================================= */
.ocm2-casino-section { padding: 50px 0 35px; }
.ocm2-casino-section:nth-child(even) { background: #fff; }
.ocm2-section-anchor {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}
.ocm2-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}
.ocm2-section-header h2 { margin: 0; font-size: 2.1rem; color: #1c222e; }
.ocm2-intro-text {
    font-size: 14.5px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 22px;
    border-left: 4px solid #2db200;
    padding-left: 16px;
}
.ocm2-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}
.ocm2-detail-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #1c222e;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 10px;
}
.ocm2-quick-facts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07);
}
.ocm2-quick-facts-table tr { border-bottom: 1px solid #f0f0f0; }
.ocm2-quick-facts-table tr:last-child { border-bottom: none; }
.ocm2-quick-facts-table th {
    background: #1c222e;
    color: #fff;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: top;
    width: 38%;
}
.ocm2-quick-facts-table td {
    padding: 9px 14px;
    color: #333;
    background: #fff;
    vertical-align: top;
    line-height: 1.5;
}
.ocm2-quick-facts-table tr:nth-child(even) td { background: #fafafa; }
.ocm2-bonus-table-wrap { overflow-x: auto; }
.ocm2-bonus-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07);
}
.ocm2-bonus-table thead tr { background: #2db200; color: #fff; }
.ocm2-bonus-table thead th {
    padding: 9px 13px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ocm2-bonus-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.ocm2-bonus-table tbody tr:nth-child(even) { background: #f2fff0; }
.ocm2-bonus-table tbody tr:nth-child(odd) { background: #fff; }
.ocm2-bonus-table td {
    padding: 9px 13px;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.4;
}
.ocm2-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}
.ocm2-pros-box, .ocm2-cons-box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07);
}
.box-hdr {
    padding: 10px 16px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
}
.ocm2-pros-box .box-hdr { background: #2db200; }
.ocm2-cons-box .box-hdr { background: #d32f2f; }
.ocm2-pc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.ocm2-pc-list li {
    padding: 8px 14px;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}
.ocm2-pc-list li:last-child { border-bottom: none; }
.pros-icon { color: #2db200; font-weight: 700; flex-shrink: 0; }
.cons-icon { color: #d32f2f; font-weight: 700; flex-shrink: 0; }
.ocm2-section-cta {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.ocm2-section-cta .ocm2-btn-play { padding: 11px 30px; font-size: 13px; }
.ocm2-section-cta .ocm2-btn-review { padding: 10px 22px; font-size: 12px; }

/* =============================================
   HOW WE RATE
   ============================================= */
.ocm2-steps-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}
.ocm2-step-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ocm2-step-item:last-child { border-bottom: none; }
.ocm2-step-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #2db200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.ocm2-step-content h4 { font-size: 15px; font-weight: 700; color: #2db200; margin: 0 0 5px; }
.ocm2-step-content p { font-size: 13.5px; color: #555; margin: 0; line-height: 1.7; }
.ocm2-score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ocm2-score-table thead tr { background: #1c222e; color: #fff; }
.ocm2-score-table thead th {
    padding: 13px 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.ocm2-score-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.ocm2-score-table tbody td { padding: 13px 18px; vertical-align: middle; }
.ocm2-score-table .row-excellent { background: #f0fff5; }
.ocm2-score-table .row-verygood  { background: #f5fff0; }
.ocm2-score-table .row-good      { background: #fffdf0; }
.ocm2-score-table .row-notrec    { background: #fff5f5; }
.score-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.tag-excellent { background: #2db200; color: #fff; }
.tag-verygood  { background: #5cb85c; color: #fff; }
.tag-good      { background: #f0ad4e; color: #fff; }
.tag-notrec    { background: #d9534f; color: #fff; }

/* =============================================
   PAYMENT METHODS
   ============================================= */
.ocm2-payment-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ocm2-payment-table thead tr { background: #1c222e; color: #fff; }
.ocm2-payment-table thead th {
    padding: 12px 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ocm2-payment-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.ocm2-payment-table tbody tr:nth-child(even) { background: #fafafa; }
.ocm2-payment-table tbody tr:hover { background: #f0fff0; }
.ocm2-payment-table td { padding: 11px 15px; vertical-align: middle; }
.pay-type-badge {
    display: inline-block;
    background: #e8f7e3;
    color: #1a7a00;
    border: 1px solid #2db200;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 12px;
    white-space: nowrap;
}
.ocm2-preferred-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ocm2-preferred-list li {
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-left: 4px solid #2db200;
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    color: #333;
    line-height: 1.6;
}
.ocm2-preferred-list li strong { color: #1c222e; }

/* =============================================
   GAME TYPES GRID — with background images
   ============================================= */
.ocm2-games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 25px;
}

.ocm2-game-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: none;
    transition: transform 0.25s, box-shadow 0.25s;
    cursor: default;
}

.ocm2-game-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* Background images per game type — applied via nth-child */
.ocm2-game-item:nth-child(1) { background: url('https://images.unsplash.com/photo-1596838132731-3301c3fd4317?w=600&q=80') center/cover no-repeat; }
.ocm2-game-item:nth-child(2) { background: url('https://tse2.mm.bing.net/th/id/OIP.pK09jgFtPDcheW_pXdGJUgHaE1?rs=1&pid=ImgDetMain&o=7&rm=3') center/cover no-repeat; }
.ocm2-game-item:nth-child(3) { background: url('https://www.sportsinsider.com/wp-content/uploads/2022/09/caesarskioks.jpg') center/cover no-repeat; }
.ocm2-game-item:nth-child(4) { background: url('https://images.unsplash.com/photo-1518688248740-7c31f1a945c4?w=600&q=80') center/cover no-repeat; }
.ocm2-game-item:nth-child(5) { background: url('https://images.unsplash.com/photo-1511882150382-421056c89033?w=600&q=80') center/cover no-repeat; }
.ocm2-game-item:nth-child(6) { background: url('https://images.unsplash.com/photo-1541278107931-e006523892df?w=600&q=80') center/cover no-repeat; }
.ocm2-game-item:nth-child(7) { background: url('https://fishing-slots.com/wp-content/uploads/2024/02/fish-table-gambling-games-1024x585.jpg') center/cover no-repeat; }
.ocm2-game-item:nth-child(8) { background: url('https://images.sigma.world/Untitled-design-2025-05-21T175717.363.jpg') center/cover no-repeat; }
.ocm2-game-item:nth-child(9) { background: url('https://images.unsplash.com/photo-1605870445919-838d190e8e1b?w=600&q=80') center/cover no-repeat; }

/* Dark gradient overlay so text is always readable */
.ocm2-game-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 14, 22, 0.15) 0%,
        rgba(10, 14, 22, 0.75) 55%,
        rgba(10, 14, 22, 0.92) 100%
    );
    z-index: 1;
    border-radius: 10px;
    transition: background 0.25s;
}

.ocm2-game-item:hover::before {
    background: linear-gradient(
        to bottom,
        rgba(10, 14, 22, 0.10) 0%,
        rgba(10, 14, 22, 0.65) 50%,
        rgba(10, 14, 22, 0.90) 100%
    );
}

/* Content sits above overlay */
.ocm2-game-item .ocm2-game-icon,
.ocm2-game-item h4,
.ocm2-game-item p {
    position: relative;
    z-index: 2;
}

.ocm2-game-icon {
    font-size: 26px;
    color: #2db200;
    margin-bottom: 6px;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}

.ocm2-game-item h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

.ocm2-game-item p {
    font-size: 12px;
    color: #ddd;
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Padding for the content area at the bottom */
.ocm2-game-item {
    padding: 18px 16px;
}

/* Green top accent line on hover */
.ocm2-game-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2db200;
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.ocm2-game-item:hover::after {
    transform: scaleX(1);
}

/* Responsive */
@media (max-width: 991px) {
    .ocm2-games-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .ocm2-games-grid { grid-template-columns: 1fr 1fr; }
    .ocm2-game-item { min-height: 180px; }
}
@media (max-width: 480px) {
    .ocm2-games-grid { grid-template-columns: 1fr; }
}

/* =============================================
   BONUS TYPES GRID — with background images
   ============================================= */
.ocm2-bonus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 25px;
}

.ocm2-bonus-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 140px;
    display: flex;
    align-items: flex-end;
    border: none;
    transition: transform 0.25s, box-shadow 0.25s;
    padding: 0;
}

.ocm2-bonus-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* Background images per bonus type */
.ocm2-bonus-item:nth-child(1) {
    background: url('https://static.vecteezy.com/system/resources/previews/008/557/055/non_2x/online-casino-welcome-bonus-banner-for-website-with-button-digital-neon-casino-slot-machine-roulette-wheel-playing-cards-vector.jpg') center/cover no-repeat;
}
.ocm2-bonus-item:nth-child(2) {
    background: url('https://pictures.tribuna.com/image/aa62723b-bba0-443f-9f7e-11339ff8e525?width=1920&quality=70') center/cover no-repeat;
}
.ocm2-bonus-item:nth-child(3) {
    background: url('https://images.unsplash.com/photo-1605870445919-838d190e8e1b?w=600&q=80') center/cover no-repeat;
}
.ocm2-bonus-item:nth-child(4) {
    background: url('https://th.bing.com/th/id/R.8461c5a70f76b89004a3c6806f023d91?rik=%2fHTH6m6HUx%2bNtg&riu=http%3a%2f%2fbitpunter.io%2fwp-content%2fuploads%2f2021%2f07%2fBOL_CasinoREBATE_PromoPage_LP_Banner.png&ehk=1tYhG2bkekJxI1ZJenQxeqD6a0LoJEBExsalgt%2flK6A%3d&risl=&pid=ImgRaw&r=0') center/cover no-repeat;
}
.ocm2-bonus-item:nth-child(5) {
    background: url('https://media.assettype.com/analyticsinsight/import/wp-content/uploads/2023/10/Picture1-18.jpg?w=1200&ar=40:21&auto=format%2Ccompress&ogImage=true&mode=crop&enlarge=true&overlay=false&overlay_position=bottom&overlay_width=100') center/cover no-repeat;
}
.ocm2-bonus-item:nth-child(6) {
    background: url('https://images.unsplash.com/photo-1621761191319-c6fb62004040?w=600&q=80') center/cover no-repeat;
}
.ocm2-bonus-item:nth-child(7) {
    background: url('https://media1.sacurrent.com/sacurrent/imager/u/original/35983299/image_alt_tag__best-online-casinos.jpg') center/cover no-repeat;
}
.ocm2-bonus-item:nth-child(8) {
    background: url('https://images.unsplash.com/photo-1607344645866-009c320b63e0?w=600&q=80') center/cover no-repeat;
}

/* Dark gradient overlay for readability */
.ocm2-bonus-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,14,22,0.10) 0%,
        rgba(10,14,22,0.72) 45%,
        rgba(10,14,22,0.93) 100%
    );
    z-index: 1;
    transition: background 0.25s;
}
.ocm2-bonus-item:hover::before {
    background: linear-gradient(
        to bottom,
        rgba(10,14,22,0.05) 0%,
        rgba(10,14,22,0.60) 40%,
        rgba(10,14,22,0.88) 100%
    );
}

/* Green top accent on hover */
.ocm2-bonus-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2db200;
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.ocm2-bonus-item:hover::after {
    transform: scaleX(1);
}

/* Inner content wrapper */
.ocm2-bonus-item > div:last-child {
    position: relative;
    z-index: 2;
    padding: 16px 18px;
    width: 100%;
}

/* Icon */
.ocm2-bonus-icon {
    display: none; /* hide old icon, replaced by bg image */
}

/* Text styles on dark bg */
.ocm2-bonus-item h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.ocm2-bonus-item p {
    font-size: 12.5px;
    color: #ddd;
    margin: 0;
    line-height: 1.55;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Responsive */
@media (max-width: 767px) {
    .ocm2-bonus-grid { grid-template-columns: 1fr; }
    .ocm2-bonus-item { min-height: 130px; }
}

/* =============================================
   LEGAL SECTION
   ============================================= */
.ocm2-legal-block {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.ocm2-legal-hdr {
    background: #2db200;
    color: #fff;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ocm2-legal-hdr i { color: #2db200; }
.ocm2-legal-body {
    padding: 18px 20px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #444;
}
.ocm2-legal-body ul { padding-left: 20px; margin: 10px 0; }
.ocm2-legal-body ul li { margin-bottom: 5px; }
.ocm2-legal-body p { margin-bottom: 10px; }
.ocm2-legal-body p:last-child { margin-bottom: 0; }
.ocm2-risk-box {
    background: #fff8f0;
    border: 1px solid #fe4e00;
    border-left: 4px solid #fe4e00;
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 22px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #444;
}
.ocm2-risk-box strong { color: #c0390b; }

/* =============================================
   REGISTRATION STEPS
   ============================================= */
.ocm2-reg-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 25px 0;
}
.ocm2-reg-step {
    background: #fff;
    border-radius: 10px;
    padding: 24px 18px;
    text-align: center;
    border: 1px solid #e8e8e8;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.ocm2-reg-step-num {
    width: 44px;
    height: 44px;
    background: #2db200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0 auto 14px;
}
.ocm2-reg-step h4 { font-size: 14px; font-weight: 700; color: #1c222e; margin: 0 0 7px; }
.ocm2-reg-step p { font-size: 12.5px; color: #555; margin: 0; line-height: 1.5; }
.ocm2-checklist {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ocm2-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    color: #333;
    line-height: 1.5;
}
.ocm2-checklist li::before {
    content: '✓';
    color: #2db200;
    font-weight: 700;
    flex-shrink: 0;
}

/* =============================================
   FAQ ACCORDION
   ============================================= */
.ocm2-faq-list { margin-top: 25px; }
.ocm2-faq-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
.ocm2-faq-q {
    width: 100%;
    background: none;
    border: none;
    padding: 15px 20px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1c222e;
    gap: 12px;
    transition: background 0.15s;
}
.ocm2-faq-q:hover { background: #f9f9f9; }
.ocm2-faq-q.active { background: #1c222e; color: #fff; }
.ocm2-faq-q .faq-plus {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s;
}
.ocm2-faq-q.active .faq-plus { transform: rotate(45deg); color: #2db200; }
.ocm2-faq-a {
    display: none;
    padding: 15px 20px;
    font-size: 13.5px;
    color: #444;
    line-height: 1.8;
    border-top: 1px solid #f0f0f0;
}
.ocm2-faq-a.open { display: block; }

/* =============================================
   RESPONSIBLE GAMBLING
   ============================================= */
.ocm2-responsible {
    background: linear-gradient(135deg, #1c222e 0%, #2d3748 100%);
    color: #fff;
}
.ocm2-responsible h2 { color: #fff; text-align: center; margin-bottom: 25px; }
.ocm2-resp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.ocm2-resp-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.07);
    border-radius: 8px;
    border-left: 3px solid #2db200;
    line-height: 1.5;
    color: #ddd;
}
.ocm2-resp-list li::before {
    content: '✓';
    color: #2db200;
    font-weight: 700;
    flex-shrink: 0;
}
.ocm2-resp-note {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: #aaa;
    line-height: 1.7;
}
.ocm2-resp-note strong { color: #fff; }

/* =============================================
   CONCLUSION
   ============================================= */
.ocm2-conclusion-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 28px 30px;
    font-size: 14.5px;
    line-height: 1.8;
    color: #333;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.ocm2-conclusion-box p { margin-bottom: 12px; }
.ocm2-conclusion-box p:last-child { margin-bottom: 0; }

/* =============================================
   SCROLL OFFSET
   ============================================= */
section[id],
div[id].ocm2-card {
    scroll-margin-top: 58px;
}

/* =============================================
   QUICK-JUMP CASINO PILLS
   ============================================= */
.ocm2-quickjump {
    background: #1c222e;
    padding: 16px 0;
}
.ocm2-quickjump-label {
    color: #aaa;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ocm2-quickjump-label i { color: #2db200; }
.ocm2-quickjump-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ocm2-qjpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 13px 5px 8px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.ocm2-qjpill:hover {
    background: #2db200;
    border-color: #2db200;
    color: #fff;
    text-decoration: none;
}
.ocm2-qjpill .qj-rank {
    background: rgba(255,255,255,0.15);
    color: #ccc;
    font-size: 10px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ocm2-qjpill:hover .qj-rank {
    background: rgba(0,0,0,0.2);
    color: #fff;
}

/* =============================================
   GAME PROVIDER STRIP — brand-styled cards
   ============================================= */
.ocm2-providers { padding: 40px 0; }
.ocm2-provider-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 25px;
}
.ocm2-provider-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 20px 14px 16px;
    min-height: 110px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}
.ocm2-provider-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: brightness(0.88);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.ocm2-provider-chip:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.ocm2-provider-chip:hover::before { opacity: 1; }

/* Brand color per provider */
.prov-evolution  { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 1px solid #e8c840; }
.prov-sagaming   { background: linear-gradient(135deg, #1c2b4a 0%, #0f1f3d 100%); border: 1px solid #c0392b; }
.prov-aesexy     { background: linear-gradient(135deg, #2d1b3d 0%, #1a0f2e 100%); border: 1px solid #e91e8c; }
.prov-pragmatic  { background: linear-gradient(135deg, #1a1200 0%, #2d1e00 100%); border: 1px solid #f5a623; }
.prov-spadegaming { background: linear-gradient(135deg, #001a0f 0%, #002a18 100%); border: 1px solid #00b36b; }
.prov-asiagaming { background: linear-gradient(135deg, #1a0000 0%, #2d0000 100%); border: 1px solid #e53935; }
.prov-playtech   { background: linear-gradient(135deg, #001433 0%, #002055 100%); border: 1px solid #1565c0; }
.prov-microgaming { background: linear-gradient(135deg, #001a33 0%, #003366 100%); border: 1px solid #29b6f6; }

/* Content z-index above ::before */
.ocm2-provider-chip > * { position: relative; z-index: 1; }

.prov-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.prov-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}
.prov-accent {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    margin: 0 auto 10px;
}
.prov-evolution  .prov-accent  { background: #e8c840; }
.prov-sagaming   .prov-accent  { background: #c0392b; }
.prov-aesexy     .prov-accent  { background: #e91e8c; }
.prov-pragmatic  .prov-accent  { background: #f5a623; }
.prov-spadegaming .prov-accent { background: #00b36b; }
.prov-asiagaming .prov-accent  { background: #e53935; }
.prov-playtech   .prov-accent  { background: #1565c0; }
.prov-microgaming .prov-accent { background: #29b6f6; }

/* Responsive */
@media (max-width: 991px) {
    .ocm2-provider-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .ocm2-provider-grid { grid-template-columns: repeat(2, 1fr); }
    .ocm2-provider-chip { min-height: 90px; padding: 16px 10px 12px; }
}

/* =============================================
   BACK TO TOP BUTTON
   ============================================= */
.ocm2-backtop {
    position: fixed;
    bottom: 80px;
    right: 22px;
    width: 42px;
    height: 42px;
    background: #1c222e;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    z-index: 200;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s, background 0.2s;
    pointer-events: none;
}
.ocm2-backtop.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ocm2-backtop:hover { background: #2db200; }

/* =============================================
   MOBILE STICKY CTA BAR
   ============================================= */
.ocm2-mob-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: #1c222e;
    border-top: 2px solid #2db200;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 -3px 14px rgba(0,0,0,0.2);
}
.ocm2-mob-cta-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ocm2-mob-cta-text .mob-title {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ocm2-mob-cta-text .mob-bonus {
    color: #2db200;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ocm2-mob-cta .mob-btn {
    display: block;
    background: #fe4e00;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 9px 18px;
    border-radius: 5px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.ocm2-mob-cta .mob-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 6px;
    line-height: 1;
    flex-shrink: 0;
}

/* =============================================
   SHARED HELPERS
   ============================================= */
.ocm2-section-h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1c222e;
    margin-top: 0;
    margin-bottom: 10px;
}
.ocm2-section-lead {
    font-size: 14.5px;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.8;
}
.ocm2-divider {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: 30px 0;
}
.bg-ocm-light { background: #f7f7f7; }
.bg-ocm-white { background: #fff; }

/* Override heading margins */
.ocm2-hero h1,
section h2.ocm2-section-h2,
.ocm2-casino-section h2,
.ocm2-casino-section h3,
section h3 {
    margin-top: 0;
}
.ocm2-casino-section h2 { margin-top: 0; margin-bottom: 0; }

/* =============================================
   RESPONSIVE — TABLET
   ============================================= */
@media (max-width: 991px) {
    .ocm2-detail-grid { grid-template-columns: 1fr; }
    .ocm2-games-grid { grid-template-columns: repeat(2, 1fr); }
    .ocm2-reg-steps { grid-template-columns: repeat(2, 1fr); }
    .ocm2-resp-list { grid-template-columns: 1fr; }
    .ocm2-hero h1 { font-size: 2.2rem; line-height: 3rem; }
    .ocm2-provider-chip { min-width: 120px; padding: 12px 16px; }
}

/* =============================================
   RESPONSIVE — MOBILE
   ============================================= */
@media (max-width: 767px) {
    /* Hero */
    .ocm2-hero { padding: 28px 0 20px; }
    .ocm2-hero h1 { font-size: 1.9rem; line-height: 2.7rem; }
    .ocm2-meta-bar { flex-direction: column; gap: 12px; }

    /* Cards stack — keep margin-left for rank strip */
    .ocm2-card {
        flex-wrap: wrap;
        margin-left: 30px;
    }
    .ocm2-card-rank {
        left: -30px;
        width: 26px;
        font-size: 10px;
    }
    .ocm2-card-left {
        flex-direction: row;
        min-width: unset;
        max-width: unset;
        width: 100%;
        padding: 10px 14px;
        gap: 10px;
        justify-content: flex-start;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }
    .ocm2-card-logo-wrap { width: 60px; height: 40px; background: transparent; border: none; box-shadow: none; }
    .ocm2-card-logo { width: 60px; height: 40px; padding: 0; }
    .ocm2-card-stars { font-size: 11px; }
    .ocm2-card-body { padding: 14px 14px 10px; }
    .ocm2-card-toprow { flex-wrap: wrap; gap: 6px; }
    .ocm2-bestfor-badge { align-self: flex-start; }
    .ocm2-stat-pills { grid-template-columns: 1fr 1fr; }
    .ocm2-stat-pill:nth-child(3) {
        border-top: 1px solid #e8e8e8;
        border-right: none;
        grid-column: span 2;
    }
    .ocm2-card-right {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid #f0f0f0;
        max-width: unset;
        min-width: unset;
        width: 100%;
        padding: 12px 14px;
        justify-content: space-between;
        align-items: center;
    }
    .ocm2-score-block { flex-direction: row; align-items: baseline; gap: 6px; }
    .ocm2-score-num { font-size: 26px; }
    .ocm2-score-label { display: none; }
    .ocm2-card-ctas { flex-direction: row; width: auto; }

    /* Other sections */
    .ocm2-pros-cons-grid { grid-template-columns: 1fr; }
    .ocm2-games-grid { grid-template-columns: 1fr; }
    .ocm2-bonus-grid { grid-template-columns: 1fr; }
    .ocm2-reg-steps { grid-template-columns: 1fr; }
    .ocm2-section-header { flex-direction: column; align-items: flex-start; }

    /* Glance table: hide Best For on mobile */
    .ocm2-glance-table td:nth-child(3),
    .ocm2-glance-table th:nth-child(3) { display: none; }

    /* Comparison table scrolls */
    .ocm2-top10-wrap { overflow-x: auto; }
    .ocm2-comparison-table { min-width: 600px; }

    /* Provider grid 2-per-row */
    .ocm2-provider-chip { min-width: calc(50% - 7px); flex: 0 0 calc(50% - 7px); padding: 10px 12px; }

    /* Quick-jump */
    .ocm2-quickjump-pills { gap: 6px; }
    .ocm2-qjpill { font-size: 11px; padding: 4px 10px 4px 6px; }

    /* Glance logo smaller */
    .glance-logo-wrap { width: 44px; height: 30px; }
    .glance-logo { width: 44px; height: 30px; }
    .glance-logo-init { width: 44px; height: 30px; font-size: 11px; }
    .gr-num { font-size: 16px; }

    /* Mobile sticky CTA shows */
    .ocm2-mob-cta { display: flex; }
    .ocm2-backtop { bottom: 68px; }
    body.ocm2-page { padding-bottom: 60px; }
}

@media (max-width: 480px) {
    .ocm2-score-num { font-size: 22px; }
    .ocm2-btn-play,
    .ocm2-btn-review { font-size: 10.5px; padding: 8px 10px; }
}