/* ============================================
   Book Detail (scoped CSS, no Bootstrap deps)
   ============================================ */

/* 1) Убиваме фоновата снимка само тук, пазим темата (цветовете) */
html.book-detail,
body.book-detail {
    /*background-image: none !important;*/
    /*background-color: var(--bg-page, transparent) !important;*/
}

/* ако фонът е на псевдо-елементи (оверлеи) */
html.book-detail::before,
html.book-detail::after,
body.book-detail::before,
body.book-detail::after {
    /*background-image: none !important;*/
    background-color: var(--bg-page, transparent) !important;
}

/* ако фонът е върху вътрешни контейнери */
body.book-detail .page::before,
body.book-detail .page::after,
body.book-detail .container::before,
body.book-detail .container::after {
    /*background-image: none !important;*/
    background-color: var(--bg-page, transparent) !important;
}

/* по желание: ако някъде ползваш CSS променлива за фон */
body.book-detail {
    --site-bg-image: none;
    color: var(--txt);
    font-size: 0.92rem; /* по-компактна типография само тук */
}

/* 2) Контейнер на страницата */
.book-detail .book-detail-page {
    color: var(--txt);
    max-width: 1250px;
}

/* 3) Двуколонен лейаут (без Bootstrap) — стабилен и без застъпване */
.book-detail .bd-grid {
    display: grid;
    /* Лява колона фиксирана ~260px; дясна е еластична, но с умерен максимум */
    grid-template-columns: minmax(140px, 320px) minmax(480px, 880px);
    gap: 20px;
    align-items: start;
    justify-content: center; /* центрира целия grid в контейнера */
    grid-auto-rows: minmax(min-content, max-content);
}

/* По-рано сгъваме към една колона, за да няма шанс за „настъпване“ */
@media (max-width: 980px) {
    .book-detail .bd-grid {
        grid-template-columns: 1fr;
    }
}

/* Предпазни пояси срещу наслояване и раздуване */
.book-detail .bd-left,
.book-detail .bd-right {
    position: relative;
    z-index: 0;
    min-width: 0; /* важно за grid — забранява раздуване */
}

.book-detail .bd-left {
    z-index: 1;
}

/* ако все пак има наслояване, корицата да е над дясната */

.book-detail .bd-right * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 4) Карти (общ вид) */
.book-detail .bd-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 10px 12px; /* по-малък падинг за компактност */
}

/* позволяваме popover-а на flatpickr да се вижда от картата */
.book-detail .ub-completed-date.bd-card {
    overflow: visible;
}

/* 5) Ляв панел — стек от карти */
.book-detail .bd-left {
    display: grid;
    gap: 12px;
}

/* Корица (по-малка, с ясен контур) */
.book-detail .cover-card {
    padding: 8px;
}

.book-detail .bd-cover {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: calc(var(--radius-sm) - 2px);
    border: 1px solid var(--border);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
    background: #fafafa;
    max-height: 420px; /* ограничаваме височината */
}

.book-detail .bd-cover.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt-dim);
    background: linear-gradient(180deg, #f7f7f7, #ececec);
}

/* Метаданни (автор/жанрове) */
.book-detail .bd-meta {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

.book-detail .meta-label {
    font-weight: 600;
    color: var(--txt);
    font-size: .95em;
}

.book-detail .meta-value {
    color: var(--txt-dim);
}

.book-detail .meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.book-detail .chip {
    display: inline-flex;
    align-items: center;
    padding: 23px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--txt-dim);
    font-size: .82rem;
}

/* Релса: статуси + любима (по-дребни бутони) */
.book-detail .ub-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.book-detail .ub-form {
    margin: 0;
}

.book-detail .ub-statuses {
    display: flex;
    gap: 6px;
}

.book-detail .ub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.book-detail .ub-btn:hover {
    background: var(--primary-soft);
    border-color: hsl(var(--p-h) 60% 60%);
}

.book-detail .ub-btn.is-active {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
}

.book-detail .ub-btn.fav {
    width: 36px;
    height: 36px;
    font-size: 17px;
}

/* 6) Заглавия/текстове (по-компактни) */
.book-detail .bd-title {
    margin: 0 0 4px 0;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    line-height: 1.25;
    font-weight: 800;
    color: var(--txt);
}

.book-detail .bd-subtitle {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--txt);
}

.book-detail .bd-sublead {
    margin: 0;
    color: var(--txt-dim);
}

/* 7) Описание */
.book-detail .bd-desc {
    color: #2b2b2b;
    line-height: 1.65;
}

/* 8) Агрегирани оценки */
.book-detail .rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.book-detail .badge-avg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid hsl(var(--p-h) 60% 70%);
    color: var(--txt);
    font-weight: 700;
    font-size: .9rem;
}

.book-detail .bd-ratings {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
    color: var(--txt-dim);
}

.book-detail .bd-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* 9) Десен панел */
.book-detail .bd-right {
    display: grid;
    gap: 12px;
}

/* 10) Рецензии — карти, компактни */
.book-detail .reviews-list {
    display: grid;
    gap: 10px;
}

.book-detail .review-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 10px 12px;
}

.book-detail .review-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: .92rem;
    color: var(--txt);
}

.book-detail .review-user {
    font-weight: 600;
    color: var(--txt);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.book-detail .review-user:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.book-detail .review-sub {
    margin-top: 2px;
    font-size: .9rem;
    color: var(--txt-dim);
}

.book-detail .review-title {
    display: block;
    margin-top: 6px;
}

.book-detail .review-body {
    margin-top: 4px;
    line-height: 1.55;
}

.book-detail .dot {
    color: var(--txt-dim);
}

/* 11) Бутони — компактни версии (не пречим на глобалните) */
.book-detail .btn {
    height: 40px;
    padding: 10px;
    margin-top: 8px;
    font-size: .6rem;
    border-radius: var(--radius-sm);
}

/* 12) Мобилни корекции */
@media (max-width: 640px) {
    .book-detail .book-detail-page {
        font-size: 0.9rem;
    }

    .book-detail .bd-card {
        padding: 8px 10px;
    }

    .book-detail .bd-cover {
        max-height: 360px;
    }

    .book-detail .ub-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
}

/* --- Anti-overlap fixes --- */
.book-detail .bd-grid {
    position: relative;
    isolation: isolate; /* нов stacking context – нищо външно не „плува“ отгоре */
}

/* всяка карта е собствен слой, но базово под другите */
.book-detail .bd-card {
    position: relative;
    z-index: 0;
    overflow: hidden; /* нищо вътре да не „излиза“ извън картата */
}

/* лявата колона да стои над дясната, ако се засекат */
.book-detail .bd-left {
    position: relative;
    z-index: 2;
}

.book-detail .bd-right {
    position: relative;
    z-index: 1;
}

/* в дясната колона да не се раздува текстът/таблиците и да не изтласкват лявата */
.book-detail .bd-right,
.book-detail .bd-right * {
    min-width: 0; /* важно за grid: забранява хоризонтално раздуване */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* гаранция: изображения/ блокове вътре да не „прескачат“ */
.book-detail .bd-right img,
.book-detail .bd-right video,
.book-detail .bd-right iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

.book-detail .cover-card {
    position: relative; /* за да може overlay да се позиционира вътре */
}

.book-detail .fav-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10; /* гарантира, че ще е над корицата */
    margin: 0;
}

.book-detail .fav-overlay .ub-btn.fav {
    background: #fff;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background .2s, color .2s, border-color .2s;
}

.book-detail .fav-overlay .ub-btn.fav:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}

.bd-cover {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f2f2f2;
}


/* ============================================
   Notes & Emotions (fits Book Detail theme)
   ============================================ */

/* Общи дребни помощници */
.book-detail .grid {
    display: grid;
    gap: .5rem;
}

.book-detail .list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Лични бележки ---------- */
/* Текстовото поле вътре в .bd-card */
.book-detail #noteForm textarea {
    width: 100%;
    min-height: 120px;
    max-height: 400px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--txt);
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.book-detail #noteForm textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
    background: #fff;
}

/* Броячът долу вдясно */
.book-detail #noteCounter {
    margin-top: 6px;
    text-align: right;
    color: var(--txt-dim);
    font-size: .85rem;
}

/* Индикация за „записано“ (бутонът получава .is-active от JS) */
.book-detail #noteForm .btn.is-active {
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
}

@keyframes blinkSaved {
    0% {
        filter: none;
    }
    50% {
        filter: brightness(1.06);
    }
    100% {
        filter: none;
    }
}

.book-detail #noteForm .btn.is-active {
    animation: blinkSaved .6s ease;
}

/* ---------- Емоции по страница ---------- */
.book-detail #emotionForm .emotion-layout {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 10px;
    align-items: start;
}

.book-detail #emotionForm .emotion-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.book-detail #emotionForm .emotion-right {
    min-width: 0;
}

/* Page input */
.book-detail #emotionForm input[type="number"] {
    height: 38px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--txt);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Text area */
.book-detail #emotionForm textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--txt);
    font: inherit;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.book-detail #emotionForm input::placeholder,
.book-detail #emotionForm textarea::placeholder {
    font-size: 0.75rem;
    color: var(--txt-dim);
}

.book-detail #emotionForm input:focus,
.book-detail #emotionForm textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
}

/* Бутоните вляво */
.book-detail #emotionForm .btn {
    width: 100%;
    margin: 0;
    justify-content: center;
}

.book-detail #emotionForm .emoji-toggle {
    width: 44px;
    height: 44px;
    margin: 0;
    align-self: flex-start;
}

/* Списък с емоции */
.book-detail #emotionList {
    display: grid;
    gap: 8px;
    margin-top: .5rem;
}

/* Единичен ред „емоция“ */
.book-detail .emotion-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
}

/* Значка за страница (стр. N) */
.book-detail .emotion-item strong {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #fff;
    color: var(--txt);
    font-weight: 700;
    font-size: .65rem;
    margin-right: 6px;
}

/* Текстът след значката да стои в реда елегантно */
.book-detail .emotion-item strong + * {
    color: var(--txt);
}

/* Бутон „Изтрий“ — умалена outline версия */
.book-detail .emotion-item .btn.btn-sm.btn-outline {
    height: 30px;
    padding: 0 10px;
    font-size: .85rem;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--border);
    color: var(--txt-dim);
    transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}

.book-detail .emotion-item .btn.btn-sm.btn-outline:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
}

@media (max-width: 520px) {
    .book-detail #emotionForm .emotion-layout {
        grid-template-columns: 1fr;
    }

    .book-detail #emotionForm .emotion-left {
        display: grid;
        grid-template-columns: 90px auto auto;
        gap: 8px;
        align-items: start;
    }

    .book-detail #emotionForm .emotion-left .btn {
        width: auto;
    }
}

/* Формата за филтър по страница */
.book-detail #emotionFilterForm .grid {
    grid-template-columns: 1fr auto;
}

.book-detail #emotionFilterForm input[type="number"] {
    /*height: 38px;*/
    flex: 1 1 100px; /* ще расте, но започва от ~160px */
    max-width: 245px; /* не позволява да стане прекалено широко */
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--txt);
}

.book-detail #emotionFilterForm input[type="number"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
}

/* Малък текст под формите */
.book-detail .bd-card .text-dim small {
    color: var(--txt-dim);
}

/* Фокус състояния на форми вътре в .bd-card да не „скачат“ */
.book-detail .bd-card input,
.book-detail .bd-card textarea {
    box-sizing: border-box;
}

/* Лека отстъп между картите, ако се ползват последователно */
.book-detail .bd-card + .bd-card {
    margin-top: 0; /* вече имаш gap в grid; запазваме чисто подравняване */
}


.book-detail .emoji-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: .25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.book-detail .emoji-toggle:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
}

.book-detail .emoji-wrap {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.book-detail .emoji-wrap input[type="text"],
.book-detail #noteForm textarea {
    flex: 1 1 auto;
    min-width: 0;
}

emoji-picker {
    --emoji-size: 16px; /* може 18px ако искаш още по-дребни */
    font-size: 0.35rem; /* за текста в търсачката/табовете */
}

/* ============================================
   UserBook Completed Date Form
   ============================================ */
.book-detail .ub-completed-date {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 0.88rem;
}

.book-detail .ub-completed-date label {
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 4px;
    display: inline-block;
}

.book-detail .ub-completed-date input[type="date"] {
    width: 100%;
    max-width: 200px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--txt);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.book-detail .ub-completed-date input[type="date"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsl(var(--p-h) 90% 85% / .6);
    background: #fff;
}

.book-detail .ub-completed-date button {
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--primary-soft);
    color: var(--txt);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.book-detail .ub-completed-date button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

@media (max-width: 520px) {
    .book-detail .ub-completed-date {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .book-detail .ub-completed-date input[type="date"] {
        max-width: 100%;
    }
}

/* === Date Picker (small, site-themed) ============================== */

.date-picker-wrapper {
    position: relative;
    display: block;
    width: 100%;
    color: var(--txt-dim, #6b7280);
}

/* flatpickr wrap-ва input-а в .flatpickr-wrapper */
.date-picker-wrapper .flatpickr-wrapper {
    display: block;
    width: 100%;
}

/* Самото поле */
.date-picker-wrapper input,
.date-picker-wrapper .flatpickr-input {
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    height: 2.25rem;
    padding: 0 .75rem;
    padding-right: 2.5rem; /* място за иконката вътре */
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--bg, #fff);
    color: var(--ch-txt, #111827);
    font-size: .9rem;
    line-height: 1.2;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* Placeholder */
.date-picker-wrapper input::placeholder,
.date-picker-wrapper .flatpickr-input::placeholder {
    color: var(--txt-dim, #6b7280);
    opacity: .9;
    font-size: .9rem;
}

/* Hover */
.date-picker-wrapper input:hover,
.date-picker-wrapper .flatpickr-input:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border, #e5e7eb));
}

/* Focus */
.date-picker-wrapper:focus-within {
    color: var(--primary);
}

.date-picker-wrapper input:focus,
.date-picker-wrapper .flatpickr-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0),
    0 0 0 3px rgba(99, 102, 241, .15);
}

/* Disabled / readonly */
.date-picker-wrapper input:disabled,
.date-picker-wrapper input[readonly],
.date-picker-wrapper .flatpickr-input:disabled,
.date-picker-wrapper .flatpickr-input[readonly] {
    background: color-mix(in srgb, var(--bg, #fff) 85%, #000 15%);
    color: color-mix(in srgb, var(--ch-txt, #111827) 65%, #000 35%);
    cursor: not-allowed;
}

/* Error */
.date-picker-wrapper.is-invalid input,
.date-picker-wrapper.is-invalid .flatpickr-input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

/* Compact */
.date-picker-wrapper.is-compact input,
.date-picker-wrapper.is-compact .flatpickr-input {
    height: 2rem;
    font-size: .85rem;
    padding-right: 2rem;
}

/* Иконката стои ВЪТРЕ в полето */
.date-picker-wrapper .calendar-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--txt-dim);
    z-index: 5;
}

/* Flatpickr popup calendar */
.flatpickr-calendar {
    position: absolute;
    z-index: 100000 !important;
    border: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    border-radius: 12px;
    font-size: .9rem;
}

.flatpickr-months,
.flatpickr-weekdays {
    background: #fff;
    color: var(--ch-txt, #111827);
}

.flatpickr-day {
    border-radius: 8px;
}

.flatpickr-day.today {
    border-color: color-mix(in srgb, var(--primary) 35%, #ddd);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.flatpickr-day:hover {
    background: color-mix(in srgb, var(--primary) 12%, #fff);
}

/* Модал за първо задаване на дата */
#statusDateDialog {
    position: fixed;
    top: 18vh;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    overflow: visible;
    max-width: 420px;
    width: min(90vw, 420px);
    z-index: 100020;
}


/*бутони под корицата*/
/* БАЗА – включи това веднъж */
:root {
    --ub-size: 2.2rem; /* размер на бутона */
    --ub-icon: 22px; /* размер на иконата */
    --ub-opsz: 22; /* optical size за Material Symbols (число, без px) */

    --ub-accent: #0ea5e9;
    --ub-accent-12: rgba(14, 165, 233, .12);
    --ub-accent-18: rgba(14, 165, 233, .18);
    --ub-border: rgba(0, 0, 0, .12);
    --ub-hover: rgba(0, 0, 0, .06);
    --ub-hover-dark: rgba(255, 255, 255, .08);
}

.material-symbols-outlined {
    /* 'opsz' ≈ към пикселния размер за по-чист рендер */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' var(--ub-opsz, 22);
    font-size: var(--ub-icon, 22px);
    line-height: 1;
}

.ub-statuses {
    display: flex;
    gap: .35rem;
}

.ub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ub-size, 2.2rem);
    height: var(--ub-size, 2.2rem);
    border-radius: calc(var(--ub-size, 2.2rem) / 4);
    transition: background .2s ease;
}

/* Предпочитание: само bg да се променя при hover */
.ub-btn:hover {
    background: var(--ub-hover);
}

/* Тъмен режим */
@media (prefers-color-scheme: dark) {
    .ub-btn:hover {
        background: var(--ub-hover-dark);
    }
}

/* Ако искаш активните да са „плътни“ (по желание) */
.ub-btn.is-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' var(--ub-opsz, 22);
}


/*вариант 1*/

/* Добави клас ub--v1-outline на контейнер */
.ub--v1-outline .ub-btn {
    background: transparent;
    border: 1px solid var(--ub-border);
    color: inherit;
}

.ub--v1-outline .ub-btn:hover {
    background: var(--ub-hover);
}

.ub--v1-outline .ub-btn.is-active {
    border-color: var(--ub-accent);
    background: var(--ub-accent-12);
}

/*вариант 2*/
/* Добави клас ub--v2-soft на контейнер */
.ub--v2-soft .ub-btn {
    background: rgba(0, 0, 0, .035);
    border: 1px solid transparent;
}

.ub--v2-soft .ub-btn:hover {
    background: rgba(0, 0, 0, .08);
}

.ub--v2-soft .ub-btn.is-active {
    background: var(--ub-accent-18);
    border-color: transparent; /* стои изчистено */
    color: var(--ub-accent);
}

/*вариант 3*/
/* Добави клас ub--v3-ghost на контейнер */
.ub--v3-ghost .ub-btn {
    background: transparent;
    border: 1px solid transparent;
    position: relative;
}

.ub--v3-ghost .ub-btn:hover {
    background: var(--ub-hover);
}

/* малка точка отдолу като активен индикатор */
.ub--v3-ghost .ub-btn.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .18rem;
    width: .32rem;
    height: .32rem;
    border-radius: 999px;
    background: var(--ub-accent);
    transform: translateX(-50%);
}

/*вариант 4*/
/* Добави клас ub--v4-pill на контейнер */
.ub--v4-pill .ub-btn {
    border-radius: 999px; /* пълен „pill“ */
    background: transparent;
    border: 1px solid transparent;
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); /* резерв за ринга */
}

.ub--v4-pill .ub-btn:hover {
    background: var(--ub-hover);
}

/* пръстен/halo при активен */
.ub--v4-pill .ub-btn.is-active {
    background: var(--ub-accent-12);
    box-shadow: 0 0 0 2px var(--ub-accent-12);
    color: var(--primary);
}

.ub--size-sm {
    --ub-size: 2.0rem;
    --ub-icon: 20px;
    --ub-opsz: 20;
}

/* Средни (по подразбиране) */
.ub--size-md {
    --ub-size: 2.2rem;
    --ub-icon: 22px;
    --ub-opsz: 22;
}

/* Големи */
.ub--size-lg {
    --ub-size: 2.6rem;
    --ub-icon: 26px;
    --ub-opsz: 26;
}

/* Много големи */
.ub--size-xl {
    --ub-size: 3.0rem;
    --ub-icon: 30px;
    --ub-opsz: 30;
}

/*Вариант 0*/
/*.material-symbols-outlined{*/
/*    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;*/
/*    font-size: 22px; line-height: 1;*/
/*  }*/
/*  .ub-btn{*/
/*    display:inline-flex; align-items:center; justify-content:center;*/
/*    width:2.2rem; height:2.2rem; border-radius:0.5rem;*/
/*    transition: background .2s ease, color .2s ease;*/
/*  }*/
/*  .ub-btn:hover{ background: rgba(0,0,0,.06); } !* само bg при hover *!*/
/*  .ub-btn.is-active{ color:#0ea5e9; }           !* активен акцент *!*/
/*  .sr-only{*/
/*    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;*/
/*    clip:rect(0,0,0,0);white-space:nowrap;border:0;*/
/*  }*/

.ub--size-xl {
    --ub-size: 1.6rem;
    --ub-icon: 28px;
    --ub-opsz: 30;
}

.ub--size-xl .ub-btn {
    width: var(--ub-size);
    height: var(--ub-size);
    border-radius: calc(var(--ub-size) / 4);
}

/* Иконата – с по-висока специфичност и last-resort !important,
   ако някъде другаде имаш твърдо 22px */
.ub--size-xl .ub-btn .material-symbols-outlined {
    font-size: var(--ub-icon) !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' var(--ub-opsz) !important;
}

.flash-pill {
    margin-top: .5rem;
    display: inline-block;
    padding: .35rem .7rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: .9rem;
    background: var(--primary-soft, #eef6ff);
    color: var(--primary, #0b5ed7);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .03);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

.flash-pill.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.flash-pill.is-error {
    background: var(--danger-soft, #ffe8ea);
    color: var(--danger, #b00020);
}


/* === Mobile re-order for Book Detail ================================== */
@media (max-width: 880px) {
    /* Сплескваме колоните: правим децата им директни grid-елементи */
    .book-detail .bd-grid > .bd-left,
    .book-detail .bd-grid > .bd-right {
        display: contents;
    }

    /* Едноколонен grid с именовани зони в точната поредност */
    .book-detail .bd-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
      "cover"
      "status"
      "completed"
      "header"
      "meta"
      "desc"
      "ratings"
      "reviews"
      "notes"
      "emotions";
        gap: 10px;
    }

    /* Връзка секция → зона */
    .book-detail .section-cover {
        grid-area: cover;
    }

    .book-detail .section-status {
        grid-area: status;
    }

    .book-detail .ub-completed-date {
        grid-area: completed;
    }

    /* може да има няколко – ще се подредят един след друг */
    .book-detail .section-header {
        grid-area: header;
    }

    .book-detail .section-meta {
        grid-area: meta;
    }

    .book-detail .section-desc {
        grid-area: desc;
    }

    .book-detail .section-ratings {
        grid-area: ratings;
    }

    .book-detail .section-reviews {
        grid-area: reviews;
    }

    .book-detail .section-notes {
        grid-area: notes;
    }

    .book-detail .section-emotions {
        grid-area: emotions;
    }
}

/* =========================
   Review Like Button
   ========================= */

/* базов вид (наследява .btn, но го дооформяме) */
.review-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 36px;
    padding: 0 12px;

    border-radius: 999px;

    /* по-лек, “chip” стил */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .14);
    color: #111;

    /* да не се разтяга */
    width: auto;
    white-space: nowrap;

    /* плавност */
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}

/* hover */
.review-like-btn:hover {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .22);
}

/* натиснато */
.review-like-btn:active {
    transform: translateY(1px);
}

/* keyboard focus (видимо) */
.review-like-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .18);
}

/* активен (лайкнато) */
.review-like-btn.is-active {
    background: rgba(220, 38, 38, .10); /* леко червено */
    border-color: rgba(220, 38, 38, .45);
    color: #b91c1c; /* по-тъмно червено за текста */
}

/* hover когато е активен */
.review-like-btn.is-active:hover {
    background: rgba(220, 38, 38, .14);
    border-color: rgba(220, 38, 38, .55);
}

/* броячът */
.review-like-btn .review-like-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 26px;
    height: 22px;
    padding: 0 8px;

    border-radius: 999px;

    font-weight: 700;
    font-size: .85rem;
    line-height: 1;

    background: rgba(0, 0, 0, .06);
    color: inherit;
}

/* броячът при активен */
.review-like-btn.is-active .review-like-count {
    background: rgba(220, 38, 38, .16);
}

/* ако бутонът е disabled (по желание, ако го ползваш в JS) */
.review-like-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* Popover за likes (hover) */
.review-like-pop {
    position: absolute;
    z-index: 999999;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.review-like-pop__head {
    padding: 10px 12px;
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    background: #fafafa;
}

.review-like-pop__body {
    padding: 10px 12px;
    max-height: 280px;
    overflow: auto;
}

.review-like-pop__loading,
.review-like-pop__empty {
    font-size: .9rem;
    color: #6b7280;
}

.review-like-pop__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.review-like-pop__item {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
}

.review-like-pop__user {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    text-decoration: none;
    color: #111;
    font-size: .9rem;
    line-height: 1.1;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: #fff;
    width: auto;
    white-space: nowrap;
}

.review-like-pop__user:hover {
    background: #f3f4f6;
}

.review-like-pop__more {
    margin-top: 10px;
    font-size: .88rem;
    color: #6b7280;
    font-weight: 600;
}

@media (hover: none) {
    .review-like-btn {
        position: relative;
    }

    .review-like-btn::after {
        content: "hold";
        position: absolute;
        top: -10px;
        right: -6px;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        transform: scale(.9);
        opacity: .0; /* по default скрито */
        pointer-events: none;
    }

    .review-like-btn:active::after {
        opacity: 1; /* показва се докато държиш */
    }
}

.book-detail .bd-card.section-status {
    position: relative;
    overflow: visible !important;
    z-index: 25;
    min-height: 74px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 18px;
    padding-left: 12px;
}

.book-detail .section-status .ub-rail {
    position: relative;
    overflow: visible !important;
    padding-right: 0;
}

.book-detail .section-status #ubStatusForm {
    position: relative;
    overflow: visible;
}

.book-detail .section-status .ub-status-wrap {
    position: relative;
    width: 100%;
    padding-right: 0;
    padding-bottom: 0;
    overflow: visible;
}

.book-detail .section-status .ub--v4-pill {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.book-detail .section-status .ub--v4-pill::-webkit-scrollbar {
    display: none;
}

.book-detail .section-status .ub-help {
    position: absolute;
    right: 0px;
    bottom: -8px;
    z-index: 30;
}

.book-detail .section-status .ub-help-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}


.book-detail .ub-help-menu,
.book-detail .ub-help-menu * {
    background-clip: padding-box;
}

.book-detail .ub-help-title {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 10px;
    color: #222;
}

.book-detail .ub-help-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: start;
    font-size: .9rem;
    line-height: 1.35;
    color: #444;
}

.book-detail .ub-help-item + .ub-help-item {
    margin-top: 8px;
}

.book-detail .ub-help-item .material-symbols-outlined {
    font-size: 20px;
    color: #666;
    margin-top: 1px;
}

@media (max-width: 640px) {
    .book-detail .bd-card.section-status {
        min-height: 92px;
        padding-top: 12px;
        padding-right: 10px;
        padding-bottom: 26px;
        padding-left: 10px;
    }

    .book-detail .section-status .ub-help {
        right: 8px;
        bottom: 12px;
    }

}

.book-detail .ub-help-menu[hidden] {
    display: none !important;
}


.book-detail .bd-context-box {
    margin-top: 12px;
    background: #eef6ff;
    border: 1px solid #93c5fd;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.book-detail .bd-context-line + .bd-context-line {
    margin-top: 6px;
}

.book-detail .date-save-btn {
    margin-top: 0.5rem;
}

.book-detail .emotion-filter-form {
    margin-top: 0.75rem;
}

.book-detail .emotion-filter-grid {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

.book-detail .emotion-list {
    margin-top: 0.75rem;
}

.book-detail .emotion-pagination {
    margin-top: 0.5rem;
}

.book-detail .note-emoji-toggle {
    margin-top: 0.35rem;
}

.book-detail .review-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.book-detail .reviews-pagination {
    margin-top: 0.75rem;
}

.book-detail .status-date-dialog {
    padding: 0;
    border: none;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
}

.book-detail .status-date-dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.book-detail .status-date-form {
    padding: 1rem 1rem 0.75rem;
}

.book-detail .status-date-title {
    margin: 0 0 0.5rem 0;
}

.book-detail .status-date-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.book-detail .ciela-note {
    font-size: 0.85rem;
    color: var(--txt-dim);
}

.book-detail .meta-value--genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.book-detail .genre-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--txt-dim);
    font-size: 0.82rem;
}


/*========================*/

.book-detail .section-notes,
.book-detail .section-emotions,
.book-detail .section-status,
.book-detail .section-reviews,
.book-detail .book-detail-page > .card-base,
.book-detail .bd-grid,
.book-detail .bd-left,
.book-detail .bd-right,
.book-detail .reviews-list,
.book-detail .review-card,
.book-detail .review-actions {
    overflow: visible !important;
}

.book-detail .emoji-trigger-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 30;
}

.book-detail .emoji-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    right: auto;
    bottom: auto;
    z-index: 100050;
    width: min(320px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.book-detail .emoji-popover[hidden] {
    display: none !important;
}

.book-detail .emoji-popover__picker {
    display: block;
    width: 100%;
    max-height: min(360px, 60vh);
}

.book-detail .review-actions {
    position: relative;
}

.book-detail .review-like-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(360px, calc(100vw - 24px));
    z-index: 200;
}

.book-detail .review-like-pop__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fafafa;
}

.book-detail .review-like-pop__body {
    max-height: min(280px, 50vh);
    overflow: auto;
    overscroll-behavior: contain;
}

.book-detail .ub-help-menu {
    position: absolute;
    right: 0;
    left: auto;
    top: auto;
    bottom: calc(100% + 10px);
    width: min(320px, calc(100vw - 24px));
    padding: 12px;
    border-radius: 14px;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .22);
    z-index: 100010;
    isolation: isolate;
    overflow: hidden;
}

@media (max-width: 640px) {
    .book-detail .emoji-popover {
        left: 0;
        width: min(300px, calc(100vw - 24px));
    }

    .book-detail .review-like-pop {
        left: auto;
        right: 0;
        width: min(300px, calc(100vw - 24px));
    }

    .book-detail .ub-help-menu {
        right: 0;
        left: auto;
        bottom: auto;
        top: calc(100% + 10px);
        width: min(290px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }
}

.book-detail .emoji-trigger-wrap--up .emoji-popover {
    top: auto;
    bottom: calc(100% + 8px);
}

.book-detail .section-emotions {
    z-index: 40;
}

.book-detail .section-ratings {
    z-index: 1;
}

.book-detail .section-emotions .emoji-trigger-wrap {
    z-index: 50;
}

.book-detail .section-reviews,
.book-detail .section-reviews .review-card {
    z-index: auto;
}

.book-detail .section-reviews .review-actions {
    position: relative;
    z-index: 20;
}

.book-detail .section-reviews .review-like-pop {
    z-index: 30;
}

.book-detail .book-detail-page > .card-base::after {
    z-index: 0;
}

.book-detail .book-detail-page > .card-base > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .book-detail .emoji-trigger-wrap,
    .book-detail .emoji-trigger-wrap--up {
        position: static;
    }

    .book-detail .emoji-popover,
    .book-detail .emoji-trigger-wrap--up .emoji-popover {
        position: fixed;
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 10px;
        width: auto;
        max-width: none;
        z-index: 100500;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
    }

    .book-detail .emoji-popover__picker {
        display: block;
        width: 100%;
        max-height: min(62vh, 430px);
    }
}

.book-detail .emoji-popover {
    position: fixed;
    z-index: 100500;
    width: min(320px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.book-detail .emoji-popover[hidden] {
    display: none !important;
}

.book-detail .emoji-popover__picker {
    display: block;
    width: 100%;
    max-height: min(360px, 60vh);
}

@media (max-width: 640px) {
    .book-detail .emoji-popover {
        position: fixed;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: 10px !important;
        width: auto;
        max-width: none;
        z-index: 100500;
        border-radius: 16px;
    }

    .book-detail .emoji-popover__picker {
        max-height: min(62vh, 430px);
    }
}