/**
 * 888 Pokies Widget — Shared Base CSS
 * @version 1.4.0
 * Reset, CSS variables, font import
 */

/* ── CSS Variables on :root so they work everywhere ── */
:root {
    --bg: #f5f0e8;
    --bg2: #ede5d8;
    --white: #fff;
    --border: rgba(0,0,0,.08);
    --border2: rgba(0,0,0,.14);
    --text: #111810;
    --text2: #5a5a5a;
    --text3: #9a9a9a;

    /* Green */
    --green: #16a34a;
    --green-d: #14532d;
    --green-dd: #0d3d1f;
    --green-l: #dcfce7;
    --green-ll: #f0fdf4;
    --green-mid: #15803d;
    --g1: #14532d;
    --g2: #16a34a;
    --g3: #22c55e;

    /* Gold */
    --gold: #ca8a04;
    --gold-d: #92400e;
    --gold-dd: #78350f;
    --gold-l: #fef9c3;
    --gold-ll: #fefce8;
    --gold-mid: #d97706;
    --go1: #78350f;
    --go2: #ca8a04;
    --go3: #fbbf24;

    /* Red */
    --red: #dc2626;
    --red-d: #7f1d1d;
    --red-dd: #450a0a;
    --red-l: #fee2e2;
    --red-ll: #fef2f2;
    --red-mid: #b91c1c;
    --r1: #7f1d1d;
    --r2: #dc2626;
    --r3: #f87171;

    /* Legacy aliases */
    --orange: var(--gold-mid);
    --orange-l: var(--gold-l);
    --blue: #2471a3;
    --blue-l: #e8f4fc;
    --outback: #b8854a;
    --outback-l: #f5ede4;
    --sand: #d9cbb8;

    /* Gradients */
    --grad-green: linear-gradient(135deg, var(--g1), var(--g2));
    --grad-gold: linear-gradient(135deg, var(--go1), var(--go2));
    --grad-red: linear-gradient(135deg, var(--r1), var(--r2));
    --grad-au: linear-gradient(135deg, var(--g1) 0%, var(--g2) 40%, var(--go2) 75%, var(--r2) 100%);
    --grad-au-h: linear-gradient(90deg, var(--g1) 0%, var(--g2) 40%, var(--go2) 75%, var(--r2) 100%);

    /* Shadows */
    --sh: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
    --sh-lg: 0 8px 32px rgba(0,0,0,.08);
    --sh-green: 0 4px 16px rgba(22,163,74,.25);
    --sh-gold: 0 4px 16px rgba(202,138,4,.25);
    --sh-red: 0 4px 16px rgba(220,38,38,.25);

    /* Radii */
    --r: 16px;
    --r-s: 10px;
    --r-xs: 8px;

}

/* ── Widget root inherits variables + base styles ── */
.pokies-888-wrap {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 16px;
    background: #f5f0e8;
    color: #111810;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ── Reset inside widget ── */
.pokies-888-wrap *,
.pokies-888-wrap *::before,
.pokies-888-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.pokies-888-wrap a {
    text-decoration: none;
}

.pokies-888-wrap button {
    font-family: inherit;
    cursor: pointer;
}

/* ── Body: set background when widget is present ── */
body:has(.pokies-888-wrap) {
    background: #f5f0e8;
    overflow-x: hidden;
}

.elementor-widget-888pokies {
    overflow-x: hidden;
}

/* ── Wrap ── */
.pokies-888-wrap .wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 40px;
}

/* ── Layout grids ── */
.pokies-888-wrap .layout-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

.pokies-888-wrap .layout-grid > .main-col {
    min-width: 0;
}

.pokies-888-wrap .layout-grid > .side-col {
    position: sticky;
    top: 70px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pokies-888-wrap .layout-grid-2 {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
    margin-bottom: 28px;
}

.pokies-888-wrap .layout-grid-2 > .main-col-2 {
    min-width: 0;
}

.pokies-888-wrap .layout-grid-2 > .side-col-2 {
    position: sticky;
    top: 70px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Section heads ── */
.pokies-888-wrap .sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pokies-888-wrap .sec-head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    margin-bottom: 0;
}

.pokies-888-wrap .sec-head-in h2,
.pokies-888-wrap .sec-head-in p {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.pokies-888-wrap .sec-head-in a {
    font-size: 16px;
    font-weight: 600;
    color: #16a34a;
    text-decoration: none;
    white-space: nowrap;
}

/* ── Colour helpers ── */
.pokies-888-wrap .c-green { color: #4ade80 !important; }
.pokies-888-wrap .c-gold  { color: #fbbf24 !important; }
.pokies-888-wrap .c-red   { color: #f87171 !important; }
.pokies-888-wrap .c-g     { color: #34d399; }
.pokies-888-wrap .c-y     { color: #FFCD00; }
.pokies-888-wrap .c-c     { color: #67e8f9; }

/* ── Gradient backgrounds for game cards ── */
.pokies-888-wrap .g1  { background: linear-gradient(145deg,#1a2e1a,#2a5a2a,#3a7a3a); }
.pokies-888-wrap .g2  { background: linear-gradient(145deg,#1a3040,#2a5570,#3a7a9a); }
.pokies-888-wrap .g3  { background: linear-gradient(145deg,#4a1a30,#7a2a50,#9a3a6a); }
.pokies-888-wrap .g4  { background: linear-gradient(145deg,#2a3a10,#4a6a20,#5a8a2a); }
.pokies-888-wrap .g5  { background: linear-gradient(145deg,#2a1a4a,#4a3070,#6a4a90); }
.pokies-888-wrap .g6  { background: linear-gradient(145deg,#1a2550,#2a4080,#3a5aa0); }
.pokies-888-wrap .g7  { background: linear-gradient(145deg,#4a2510,#7a4020,#9a5a2a); }
.pokies-888-wrap .g8  { background: linear-gradient(145deg,#0a3025,#1a5a40,#2a7a5a); }
.pokies-888-wrap .g9  { background: linear-gradient(145deg,#3a3025,#5a4a3a,#7a6a50); }
.pokies-888-wrap .g10 { background: linear-gradient(145deg,#2a2040,#4a3a6a,#5a4a8a); }
.pokies-888-wrap .go  { background: linear-gradient(145deg,#6a4520,#9a6a35,#b8854a); }
.pokies-888-wrap .gr  { background: linear-gradient(145deg,#0a4a5a,#1a7a8a,#2a9aaa); }
.pokies-888-wrap .gb  { background: linear-gradient(145deg,#1a4a10,#2a7a20,#3a9a2a); }
.pokies-888-wrap .gs  { background: linear-gradient(145deg,#8a3a10,#c05a20,#e07a30); }

/* ── Blink animation ── */
.pokies-888-wrap .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: blink 1.8s infinite;
    display: inline-block;
}

.pokies-888-wrap .slive-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 6px rgba(0,132,61,.3);
    animation: blink 1.6s infinite;
    display: inline-block;
}