/* =====================================================================
   Stránka Binga (/:lang/bingo, /:lang/bingo-download).
   Rozvržení editoru (náhled vlevo, karty vpravo) přebírá z theme.css přes
   #crossword_page / #preview-wrapper / #customize-wrapper; tady jsou jen
   prvky, které křížovka nemá. Vzhled samotné karty: bingo-card.css.
   ===================================================================== */

/* Obsah karet editoru zarovnaný vlevo (.page zarovnává na střed). */
.bingo-page #customize-wrapper { text-align: left; }

/* Záložky obsahu jsou vidět hned (u křížovky je odkrývá JS po načtení). */
.bingo-page #bingo-tab-content { visibility: visible; }

/* Po zakoupení bez lhůty na úpravy jen 1 záložka (theme.css počítá na úzkém editoru se 4 sloupci). */
@media (max-width: 1100px) {
    #customize-wrapper > .nav-tabs.bingo-tabs-1 { grid-template-columns: minmax(0, 1fr); }
}

/* Náhled karty: A4 v mm zmenšená na šířku sloupce (měřítko počítá editor.js). */
.bingo-preview {
    position: relative;
    width: 100%;
    max-width: 397px;
    aspect-ratio: 210 / 297;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0 24px 50px -24px rgba(23, 56, 54, 0.35), 0 2px 6px rgba(23, 56, 54, 0.06);
}
.bingo-preview-sheet { position: absolute; top: 0; left: 0; transform-origin: top left; }
/* Nadpis a mřížku jde v náhledu posouvat tažením (editor.js) – jako u křížovky. */
.bingo-preview.is-draggable :is(.bingo-head, .bingo-letters, .bingo-grid) { cursor: grab; touch-action: none; user-select: none; }
.bingo-preview.is-dragging, .bingo-preview.is-dragging * { cursor: grabbing !important; }
.bingo-size-value { min-width: 44px; font-weight: 600; white-space: nowrap; }
#crossword_page.bingo-page input[type="range"] { flex: 1 1 auto; min-width: 0; }
.bingo-preview-sheet .bingo-sheet { font-family: initial; }
/* Záložka Stáhnout: karta ze serveru na papíře (jako u křížovky). Obrázek má
   dvojnásobné rozlišení, zobrazuje se zmenšený na velikost .html-overlay. */
.bingo-page #paper-wrapper { margin: 0 auto; }
.bingo-page #overlayContent img { display: block; width: 100%; height: 100%; }

.bingo-preview-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px auto 0;
    max-width: 397px;
}
.bingo-nav-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--mp-ink);
    box-shadow: var(--mp-shadow);
}
.bingo-nav-btn:disabled { opacity: 0.4; }
.bingo-nav-btn:not(:disabled):hover { background: var(--mp-hero); color: var(--mp-accent); }
.bingo-card-of { min-width: 92px; color: var(--mp-muted); font-size: 14px; font-weight: 600; text-align: center; }
.bingo-shuffle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--mp-input-line);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--mp-accent);
    font-size: 14px;
    font-weight: 700;
}
.bingo-shuffle:hover { background: var(--mp-hero-soft); }
.bingo-preview-count { display: flex; flex-basis: 100%; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.bingo-preview-count label { color: var(--mp-muted); font-size: 14px; font-weight: 600; }
/* `hidden` musí vyhrát i nad pravidly typu #crossword_page .step-hint { display: … } */
#crossword_page.bingo-page [hidden] { display: none !important; }

/* Políčka */
.bingo-items-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.bingo-count {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--mp-secret-soft);
    color: var(--mp-secret-ink);
    font-size: 14px;
    font-weight: 700;
}
.bingo-count.is-ready { background: var(--mp-success-soft); color: #1D5E3B; }
.bingo-items-list { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: bingo-item; }
.bingo-item-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    counter-increment: bingo-item;
}
.bingo-item-row::before {
    content: counter(bingo-item);
    color: var(--mp-muted);
    font: 700 13px/1 var(--mp-font-display);
    text-align: right;
}
.bingo-mode-order .bingo-item-row { grid-template-columns: 26px minmax(0, 1fr); }
.bingo-item-row .form-control { min-height: 42px; padding: 10px 14px; border-radius: 14px; background-color: #FFFFFF; }
.bingo-item-row .form-control[readonly] { background-color: var(--mp-input-bg); color: var(--mp-muted); }
.bingo-item-row .form-control.is-duplicate { border-color: #E3B341; }
.bingo-item-row .removeButton { display: inline-grid; place-items: center; }
.bingo-items-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Okno s tipy: "Přidat všechny" nad seznamem */
.bingo-tips-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.bingo-add-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--mp-input-line);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--mp-accent);
    font-weight: 700;
}
.bingo-add-all:hover { background: var(--mp-hero-soft); color: var(--mp-accent); }
.bingo-page .step-card input.form-control,
.bingo-page .step-card select.form-select { border-color: var(--mp-input-line); border-radius: 12px; }

.bingo-messages { margin: 10px 0 0; padding: 0; list-style: none; }
#crossword_page .bingo-message { position: relative; margin-top: 6px; padding-left: 18px; font-size: 14px; line-height: 1.45; text-align: left; }
.bingo-message::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.bingo-message.is-info { color: var(--mp-muted); }
.bingo-message.is-success { color: var(--mp-success); }
.bingo-message.is-warning { color: #9A6A00; }
.bingo-message.is-error { color: #C0392B; font-weight: 600; }

.bingo-note {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--mp-hero-soft);
    color: var(--mp-muted);
    font-size: 14px;
    line-height: 1.45;
}
.bingo-note .bi { flex: none; margin-top: 2px; color: var(--mp-accent); }

/* Volné políčko uprostřed: samostatná vysouvací karta pod políčky */
/* Sbalený řádek: tlačítko (dlaždice, název, stav, šipka); přepínač je až ve vysunuté části */
.bingo-free-head { display: flex; }
.bingo-free-toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 20px;
    border: 0;
    background: transparent;
    color: var(--mp-ink);
    text-align: left;
}
.bingo-free-toggle:hover .bingo-free-title { color: var(--mp-accent); }
.bingo-free-toggle .chevron { flex: none; margin-left: auto; color: var(--mp-muted); transition: transform 0.2s; }
.bingo-free-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.bingo-free-thumb {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px dashed var(--mp-input-line);
    border-radius: 9px;
    color: #FFFFFF;
}
.bingo-free-thumb.is-on { border-style: solid; border-color: transparent; }
.bingo-free-thumb svg { width: 18px; height: 18px; fill: currentColor; }
.bingo-free-titles { display: flex; flex-direction: column; min-width: 0; }
.bingo-free-title { font-weight: 700; line-height: 1.3; transition: color 0.15s; }
.bingo-free-switch { margin: 0 20px; padding-top: 14px; padding-bottom: 16px; border-top: 1px solid var(--mp-line); }
.bingo-free-switch .form-check-label { font-weight: 600; }

/* Přepínače binga (volné políčko, záhlaví): barva webu a hover, který reaguje i na popisek */
.bingo-switch .form-check-input:checked { border-color: var(--mp-accent); background-color: var(--mp-accent); }
.bingo-switch .form-check-label { color: var(--mp-ink); }
.bingo-switch .form-check-input:not(:disabled),
.bingo-switch .form-check-input:not(:disabled) + .form-check-label { cursor: pointer; }
.bingo-switch .form-check-input { transition: border-color 0.15s, box-shadow 0.15s, filter 0.15s; }
.bingo-switch:hover .form-check-input:not(:disabled) {
    border-color: var(--mp-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-accent) 28%, transparent);
}
.bingo-switch:hover .form-check-input:checked:not(:disabled) { filter: brightness(1.12); }
.bingo-page .bingo-free-panel .bingo-free-help { color: var(--mp-muted); font-size: 13px; line-height: 1.4; }
.bingo-free-help[hidden] { display: none; }
.bingo-free-body { padding: 0 20px 20px; }
.bingo-free-body[hidden] { display: none; }
.bingo-free-fields { display: flex; flex-direction: column; gap: 12px; }
.bingo-free-text-field { max-width: 320px; }
.bingo-free-text-field .control-label { display: block; margin-bottom: 4px; font-weight: 600; }
.bingo-free-text-field .form-control { background: #FFFFFF; }

/* Velikost karty (5×5 / 4×4): přepínač ve stylu pilulek */
.bingo-size-options { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bingo-size-options .control-label { margin-right: 4px; font-weight: 600; }
.bingo-size-option {
    padding: 6px 14px;
    border: 1px solid var(--mp-input-line);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--mp-ink);
    font-size: 14px;
    font-weight: 700;
}
.bingo-size-option:hover:not(:disabled):not(.is-selected) { background: var(--mp-hero-soft); }
.bingo-size-option.is-selected { border-color: var(--mp-accent); background: var(--mp-accent); color: var(--mp-accent-ink); }
.bingo-size-option:disabled:not(.is-selected) { opacity: 0.5; }

/* Záhlaví nad mřížkou (karta v Nadpisech i v bloku vzhledu, přepínač nahoře v těle karty jako u volného políčka) */
.bingo-header-switch { margin: 0 0 14px; }
/* Popisek stejný jako u volného políčka (theme.css jinak zmenšuje #crossword_page .controls label) */
#crossword_page .bingo-header-switch .form-check-label { font-size: inherit; font-weight: 600; }
.bingo-header-fields[hidden] { display: none; }
[data-header-text] { letter-spacing: 0.12em; font-weight: 700; }
.bingo-page .bingo-header-card .bingo-help { margin-top: 10px; font-size: 13px; }

/* Ikonka volného políčka */
.bingo-free-icons { display: flex; flex-direction: column; gap: 4px; }
.bingo-free-icons .control-label { font-weight: 600; }
.bingo-free-icon-options { display: flex; flex-wrap: wrap; gap: 8px; }
.bingo-free-icon-option {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--mp-input-line);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--mp-accent);
}
.bingo-free-icon-option svg { width: 20px; height: 20px; fill: currentColor; }
.bingo-free-icon-option:hover:not(.is-selected) { background: var(--mp-hero-soft); }
.bingo-free-icon-option.is-selected { border-color: var(--mp-accent); background: var(--mp-accent); color: var(--mp-accent-ink); }

/* Barvy */
.bingo-color-group + .bingo-color-group { margin-top: 16px; }
.bingo-color-group .control-label { display: block; margin-bottom: 8px; }
.bingo-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bingo-swatch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: var(--swatch, #FFFFFF);
    box-shadow: 0 0 0 1px var(--mp-input-line);
    cursor: pointer;
}
.bingo-swatch.is-selected { box-shadow: 0 0 0 3px var(--mp-accent); }
.bingo-swatch:focus-visible,
.bingo-swatch-custom:focus-within { outline: 3px solid var(--mp-accent); outline-offset: 2px; }
.bingo-swatch-custom {
    overflow: hidden;
    background: conic-gradient(#E05A5A, #E0C35A, #5AE07A, #5AC3E0, #7A5AE0, #E05AC3, #E05A5A);
}
.bingo-swatch-custom.is-selected { background: var(--swatch); }
.bingo-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Počet karet */
.bingo-cards-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.bingo-cards-row label { font-weight: 600; }
#crossword_page .bingo-stepper { display: inline-flex; align-items: center; gap: 8px; }
#crossword_page .bingo-card-count { width: 72px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
#crossword_page .bingo-card-count::-webkit-inner-spin-button, #crossword_page .bingo-card-count::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#crossword_page .bingo-stepper button:disabled { opacity: 0.4; }
.bingo-cards-range { color: var(--mp-muted); font-size: 14px; }
/* .page p (style.css) jinak nastaví větší písmo a zarovnání na střed. */
.bingo-page .step-card .bingo-help { margin: 10px 0 0; color: var(--mp-muted); font-size: 14px; line-height: 1.5; text-align: left; }
.bingo-save-error { margin: 10px 0 0; color: #C0392B; font-weight: 600; }

.bingo-order-button,
#saveBingoVersion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    font-size: 16px;
    line-height: 1.2;
}
.bingo-order-button { width: 100%; }

/* Telefon: náhled nad editorem přes celou šířku */
@media (max-width: 855px) {
    #crossword_page.bingo-page #preview-wrapper,
    #crossword_page.bingo-page #customize-wrapper { float: none; width: 100% !important; max-width: none; margin: 0 0 18px; }
}