/* Casinoidag Spel frontend. Turkos profil som matchar ovriga Casinoidag-plugins. */

.cidag-spel-wrap,
.cidag-spel-wrap * {
    box-sizing: border-box;
}
.cidag-spel-wrap {
    overflow-x: auto;
    margin: 1.2em 0;
    border: 1px solid #d7e4e2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(18, 49, 59, 0.05);
}

.cidag-spel-tabell {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97em;
}
/* Temat ritar en egen ram pa varje tabell och cell i .entry-content, en tunn
   linje i rgba(0,0,0,.1). Childtemat nollar den bara for sina egna tabeller,
   alltsa de som ligger i .cid-tabell-wrap eller ar direkta barn till
   .entry-content. Vara tabeller ar varken det, sa de behall temats ram: en gra
   linje runt hela tabellen och en mellan varje kolumn, innanfor var egen ram
   (v1.2.11). Bara ovan-, vanster- och hogerkanten nollas. Underkanten lamnas
   at kaskaden, sa radlinjerna och radkortslaget pa smal skarm ar ororda. */
.cidag-spel-tabell.cidag-spel-tabell.cidag-spel-tabell {
    border: 0;
}
.cidag-spel-tabell.cidag-spel-tabell.cidag-spel-tabell th,
.cidag-spel-tabell.cidag-spel-tabell.cidag-spel-tabell td {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
/* Tabellen ska fylla sin ram helt (v1.2.1). Temat lagger en marginal pa varje
   table, och eftersom ramen ar en egen behallare runt tabellen syntes marginalen
   som ett tomt vitt falt ovanfor rubrikraden och ett under sista raden. Med
   marginalen borta ligger den morka rubrikraden an mot ramen och far dess rundade
   horn. Klassen upprepas och !important behovs eftersom temats regel kan ligga
   hogre an var. Det galler bara marginalen inuti var egen ram, samma grepp som
   CTA-lanken redan anvander for sin textfarg. */
.cidag-spel-wrap.cidag-spel-wrap.cidag-spel-wrap .cidag-spel-tabell,
.cidag-spel-wrap.cidag-spel-wrap.cidag-spel-wrap table {
    margin: 0 !important;
}
/* Ramen ska inte heller ha egen luft innanfor kanten. */
.cidag-spel-wrap.cidag-spel-wrap.cidag-spel-wrap {
    padding: 0;
}
/* Temats tabellbehallare, om den anda hamnar innanfor var ram (v1.2.2).
   Childtemat lindar varje tabell i .entry-content i en egen div .cid-tabell-wrap
   med marginal, ram och rundade horn. Vi ritar redan den ramen sjalva, sa den
   inre behallarens marginal syns som ett tomt falt ovanfor rubrikraden och ett
   under sista raden, och min-width 640px slar sonder radkortslayouten pa mobil.
   Temat hoppar over vara tabeller fran och med 1.1.6, men regeln star kvar sa
   pluginet ser ratt ut aven pa en aldre temaversion. */
.cidag-spel-wrap.cidag-spel-wrap.cidag-spel-wrap .cid-tabell-wrap {
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.cidag-spel-wrap.cidag-spel-wrap.cidag-spel-wrap .cid-tabell-wrap > table {
    min-width: 0;
}
.cidag-spel-tabell thead th {
    background: #12313b;
    color: #fff;
    text-align: left;
    padding: 0.6em 0.8em;
    font-weight: 600;
}
.cidag-spel-tabell tbody td {
    padding: 0.55em 0.8em;
    border-bottom: 1px solid #d7e4e2;
    vertical-align: middle;
}
.cidag-spel-tabell tbody tr:nth-child(even) { background: #f3f7f6; }
.cidag-spel-tabell tbody tr:last-child td { border-bottom: none; }
/* Lankar i tabellceller (leverantorer och speltitlar) i paletten. CTA-knappen undantas. */
.cidag-spel-tabell tbody td a:not(.cidag-spel-cta) {
    color: #087f7c;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.cidag-spel-tabell tbody td a:not(.cidag-spel-cta):hover { color: #056561; }
.cidag-spel-lev-titlar a { color: #087f7c; }
.cidag-spel-tabell.cidag-sortbar thead th { cursor: pointer; user-select: none; white-space: nowrap; }
.cidag-spel-tabell.cidag-sortbar thead th:hover { background: #075f5d; }
.cidag-sort-pil { opacity: 0.45; font-size: 0.8em; margin-left: 5px; }
.cidag-spel-tabell.cidag-sortbar thead th[aria-sort] .cidag-sort-pil { opacity: 1; }

.cidag-spel-cta {
    display: inline-block;
    padding: 0.55em 1em;
    background: #087f7c;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
}
/* Tvinga vit text i alla lanklagen sa temats lankfarg inte slar over. */
.cidag-spel-cta,
.cidag-spel-cta:link,
.cidag-spel-cta:visited,
.cidag-spel-cta:hover,
.cidag-spel-cta:focus,
.cidag-spel-cta:active {
    color: #fff !important;
    text-decoration: none !important;
}
.cidag-spel-cta:hover { background: #056561; }

.cidag-spel-snitt {
    border: 1px solid #cfe3df;
    border-left: 4px solid #087f7c;
    border-radius: 12px;
    padding: 1em 1.1em;
    margin: 1.4em 0;
    background: #f3f7f6;
    box-shadow: 0 4px 14px rgba(18, 49, 59, 0.04);
}
.cidag-spel-snitt-rubrik { font-weight: 700; color: #12313b; margin-bottom: 0.2em; }
.cidag-spel-snitt-tal { font-size: 2em; font-weight: 700; color: #12313b; line-height: 1.1; }
.cidag-spel-snitt-not { color: #40575c; margin-top: 0.3em; }
.cidag-spel-snitt-fot { color: #62767c; font-size: 0.9em; margin-top: 0.5em; }
.cidag-spel-snitt-jmf { display: inline-block; margin-top: 0.35em; padding: 2px 10px; border-radius: 999px; font-size: 0.85em; font-weight: 600; background: #edf3f2; color: #40575c; }
.cidag-spel-snitt-jmf--over { background: #e4f4ea; color: #145e2e; }
.cidag-spel-snitt-jmf--under { background: #fdeaea; color: #b3261e; }
.cidag-spel-snitt-lank { margin-top: 0.6em; font-size: 0.9em; color: #40575c; }
.cidag-spel-snitt-lank a { color: #087f7c; }

.cidag-spel-lev-block { margin: 1.2em 0; }
.cidag-spel-lev-head {
    display: flex;
    gap: 1.2em;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
.cidag-spel-lev-logo {
    max-width: 160px;
    height: auto;
    border: 1px solid #d7e4e2;
    border-radius: 6px;
    padding: 0.4em;
    background: #fff;
}
.cidag-spel-lev-lista { margin: 0; padding: 0; list-style: none; }
.cidag-spel-lev-lista li {
    padding: 0.25em 0;
    border-bottom: 1px dashed #d7e4e2;
}
.cidag-spel-lev-profil { margin: 0.8em 0 1.2em; }
/* Radrubrikerna i faktatabellen (v1.2.0). Bakgrunden maste sattas explicit.
   Temat lagger en mork bakgrund pa varje th, avsedd for tabellhuvuden, och den
   slog igenom pa tbody th ocksa. Etiketten fick da mork text pa mork platta och
   blev helt olaslig, och kolumnen sag ut som en andra rubrikrad. Klassen upprepas
   sa regeln sakert vinner over temats. transparent i stallet for en egen farg gor
   att varannanrad-tonen fortsatter in i etikettkolumnen. */
.cidag-spel-fakta-tabell.cidag-spel-fakta-tabell.cidag-spel-fakta-tabell tbody th {
    padding: 0.55em 0.8em;
    border-bottom: 1px solid #d7e4e2;
    text-align: left;
    font-weight: 600;
    background: transparent;
    color: #12313b;
    vertical-align: middle;
    width: 38%;
}
.cidag-spel-fakta-tabell.cidag-spel-fakta-tabell.cidag-spel-fakta-tabell tbody tr:last-child th { border-bottom: none; }
/* Samma sak for radrubriker i ovriga tabeller, sa en framtida th i tbody inte
   ateruppstar som en mork platta. */
.cidag-spel-tabell.cidag-spel-tabell.cidag-spel-tabell tbody th {
    background: transparent;
    color: #12313b;
}
/* Tabellhuvudet ska daremot vara morkt, aven om temat sager nagot annat. */
.cidag-spel-tabell.cidag-spel-tabell.cidag-spel-tabell thead th {
    background: #12313b;
    color: #fff;
}
.cidag-spel-lev-titlar { color: #40575c; margin: 1em 0 1.2em; }

/* Faktaruta on game pages. */
.cidag-fakta { margin: 1.2em 0 1.6em; }
.cidag-fakta-betyg {
    display: inline-block;
    background: #12313b;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.3em 0.85em;
    margin-bottom: 0.85em;
}
.cidag-betygmodell { margin: -0.3em 0 1em; }
.cidag-betygmodell > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 600; color: #087f7c;
}
.cidag-betygmodell > summary::-webkit-details-marker { display: none; }
.cidag-betygmodell > summary::before { content: "+"; font-weight: 700; font-size: 0.95rem; line-height: 1; }
.cidag-betygmodell[open] > summary::before { content: "\2212"; }
.cidag-betygmodell__inner { margin-top: 10px; display: grid; gap: 8px; max-width: 460px; }
.cidag-betygmodell__rad {
    display: grid; grid-template-columns: minmax(96px, auto) 1fr minmax(64px, auto);
    align-items: center; gap: 12px; font-size: 0.82rem; color: #12313b;
}
.cidag-betygmodell__namn small { color: #62767c; font-weight: 400; }
.cidag-betygmodell__bar { height: 6px; background: #d7e4e2; border-radius: 4px; overflow: hidden; }
.cidag-betygmodell__bar > span { display: block; height: 100%; background: #087f7c; border-radius: 4px; }
.cidag-betygmodell__varde { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cidag-betygmodell__not { margin: 10px 0 0; font-size: 0.78rem; color: #62767c; line-height: 1.5; }
.cidag-betygmodell__manuell { margin: -0.3em 0 1em; font-size: 0.82rem; color: #62767c; }
@media (max-width: 480px) {
    .cidag-betygmodell__rad { grid-template-columns: 1fr auto; }
    .cidag-betygmodell__bar { grid-column: 1 / -1; order: 3; }
}

.cidag-spel-version {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.cidag-spel-version--hogsta { background: #e7f3ec; color: #145e2e; }
.cidag-spel-version--sankt { background: #fbeaea; color: #b32d2e; }

.cidag-fakta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.cidag-fakta-cell {
    background: #f3f7f6;
    border: 1px solid #d7e4e2;
    border-radius: 10px;
    padding: 0.6em 0.8em;
}
.cidag-fakta-cell .k { display: block; font-size: 0.82em; color: #62767c; }
.cidag-fakta-cell .v { display: block; font-weight: 600; color: #12313b; margin-top: 2px; }
.cidag-fakta-avvik {
    margin-top: 12px;
    padding: 10px 13px;
    background: #e7f3f1;
    border-left: 3px solid #087f7c;
    border-radius: 8px;
    font-size: 0.9em;
    line-height: 1.5;
    color: #12313b;
}
.cidag-fakta-avvik-tagg {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    color: #fff;
    background: #087f7c;
    padding: 1px 8px;
    border-radius: 20px;
    margin-right: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}
.cidag-fakta-avvik b { color: #056561; font-variant-numeric: tabular-nums; }
.cidag-fakta-avvik-txt { color: #62767c; }
.cidag-fakta-video {
    position: relative;
    padding-top: 56.25%;
    margin-top: 1.1em;
    border-radius: 12px;
    overflow: hidden;
}
.cidag-fakta-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cidag-spel-ej { color: #62767c; font-style: italic; }

/* Spelgalleri: rutnat med spelkort och ladda fler. */
.cidag-spel-galleri { margin: 1.4em 0; }
.cidag-galleri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.cidag-spel-kort {
    display: flex;
    flex-direction: column;
    border: 1px solid #d7e4e2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-decoration: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cidag-spel-kort:hover { box-shadow: 0 6px 18px rgba(18, 49, 59, 0.12); transform: translateY(-2px); }
.cidag-spel-kort__bild {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: #12313b;
    overflow: hidden;
}
.cidag-spel-kort__bild img,
.cidag-kort-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cidag-kort-platshallare {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.4em;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #075f5d, #12313b);
}
.cidag-spel-kort__titel {
    padding: 0.6em 0.7em 0.1em;
    font-weight: 600;
    color: #12313b !important;
    line-height: 1.25;
}
.cidag-spel-kort__fot {
    margin-top: auto;
    padding: 0.3em 0.7em 0.7em;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cidag-spel-kort__lev {
    font-size: 0.85em;
    color: #62767c !important;
}
.cidag-spel-kort__rtp {
    font-size: 0.82em;
    font-weight: 600;
    color: #12313b !important;
}
.cidag-spel-kort__lanserad {
    font-size: 0.82em;
    color: #62767c !important;
}
.cidag-spel-kort__vol {
    font-size: 0.82em;
    color: #62767c !important;
}
.cidag-galleri-fot { text-align: center; margin-top: 1.3em; }
.cidag-galleri-mer {
    display: inline-block;
    padding: 0.7em 1.6em;
    background: #087f7c;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
}
.cidag-galleri-mer:hover { background: #056561; }
.cidag-galleri-mer[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 600px) {
    .cidag-galleri-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* Verktygsrad: sok, tillverkarfilter och sortering. */
.cidag-galleri-verktyg {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.1em;
}
.cidag-galleri-sok,
.cidag-galleri-lev,
.cidag-galleri-sort,
.cidag-galleri-vol {
    padding: 0.5em 0.7em;
    border: 1px solid #cfe3df;
    border-radius: 8px;
    font-size: 0.95em;
    background: #fff;
    color: #12313b;
}
.cidag-galleri-sok { flex: 1 1 200px; min-width: 0; }
.cidag-galleri-lev,
.cidag-galleri-sort,
.cidag-galleri-vol { flex: 0 1 auto; }
.cidag-galleri-tom { color: #62767c; margin: 0.4em 0 0.2em; }
/* Egenskapsfilter: ja-falt som klickbara chip-etiketter. */
.cidag-galleri-egenskaper { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cidag-galleri-egenskap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35em 0.7em;
    border: 1px solid #cfe3df;
    border-radius: 20px;
    font-size: 0.85em;
    color: #12313b;
    background: #fff;
    cursor: pointer;
    user-select: none;
}
.cidag-galleri-egenskap input { margin: 0; cursor: pointer; }
.cidag-galleri-egenskap:has(input:checked) { background: #e7f3f1; border-color: #087f7c; color: #056561; font-weight: 600; }

/* Aggregerad RTP-insikt ovanfor per-casino-tabellen (variabla slots). */
.cidag-spel-insikt { margin: 0 0 18px; padding: 16px 18px; background: #f3f7f6; border: 1px solid #dfeae8; border-radius: 10px; }
.cidag-spel-insikt-tal { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 14px; }
.cidag-spel-insikt-cell { display: flex; flex-direction: column; gap: 2px; }
.cidag-spel-insikt-cell .k { font-size: 0.78rem; color: #62767c; }
.cidag-spel-insikt-cell .v { font-size: 1.15rem; font-weight: 700; color: #12313b; font-variant-numeric: tabular-nums; }
.cidag-spel-insikt-rubrik { display: block; font-weight: 700; color: #12313b; font-size: 0.9rem; margin-bottom: 8px; }
.cidag-spel-insikt-dist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cidag-spel-insikt-dist li { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 12px; }
.cidag-spel-insikt-dist .rtp { font-weight: 600; color: #056561; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cidag-spel-insikt-dist .stapel { height: 9px; border-radius: 5px; background: #dfeae8; overflow: hidden; }
.cidag-spel-insikt-dist .stapel > span { display: block; height: 100%; background: #087f7c; border-radius: 5px; }
.cidag-spel-insikt-dist .n { font-size: 0.85rem; color: #40575c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cidag-spel-insikt-not { margin: 10px 0 0; font-size: 0.82rem; color: #62767c; line-height: 1.5; }
@media (max-width: 480px) { .cidag-spel-insikt-dist li { grid-template-columns: 64px 1fr auto; gap: 8px; } }

/* Tabeller blir etiketterade radkort pa smala skarmar. */
@media (max-width: 700px) {
    .cidag-spel-wrap--kort {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .cidag-spel-wrap--kort .cidag-spel-tabell,
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody,
    .cidag-spel-wrap--kort .cidag-spel-tabell tr,
    .cidag-spel-wrap--kort .cidag-spel-tabell td {
        display: block;
        width: 100%;
    }
    .cidag-spel-wrap--kort .cidag-spel-tabell thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody {
        display: grid;
        gap: 12px;
    }
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody tr,
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody tr:nth-child(even) {
        padding: 7px 13px;
        border: 1px solid #d7e4e2;
        border-left: 3px solid #087f7c;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(18, 49, 59, 0.05);
    }
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody td {
        display: grid;
        grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid #dfeae8;
        overflow-wrap: anywhere;
    }
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody td:last-child {
        border-bottom: 0;
    }
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody td::before {
        content: attr(data-label);
        color: #62767c;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.35;
        text-transform: uppercase;
    }
    .cidag-spel-wrap--kort .cidag-spel-cta {
        width: 100%;
        text-align: center;
    }

    .cidag-spel-wrap--fakta {
        overflow: visible;
    }
    .cidag-spel-wrap--fakta .cidag-spel-fakta-tabell {
        table-layout: fixed;
    }
    .cidag-spel-wrap--fakta .cidag-spel-fakta-tabell tbody th,
    .cidag-spel-wrap--fakta .cidag-spel-fakta-tabell tbody td {
        padding: 0.7em 0.8em;
        overflow-wrap: anywhere;
    }
    .cidag-spel-wrap--fakta .cidag-spel-fakta-tabell tbody th {
        width: 42%;
    }
}

@media (max-width: 420px) {
    .cidag-spel-wrap--kort .cidag-spel-tabell tbody td {
        grid-template-columns: minmax(96px, 0.4fr) minmax(0, 1fr);
        gap: 9px;
    }
}

/* Redaktorsnotis vid tomt galleri (v1.2.0). Visas bara for inloggad redaktor,
   aldrig for besokaren, sa den far ett tydligt avvikande utseende. */
.cidag-galleri-redaktorsnotis {
    margin: 1em 0;
    padding: 0.7em 0.9em;
    border-left: 4px solid #d08c00;
    background: #fdf6e6;
    color: #4a3a10;
    font-size: 0.95em;
}

/* Uppgift som ingen matt an (v1.2.6). Nedtonad sa den inte lases som ett varde. */
.cidag-spel-osatt { color: #62767c; }