/*!
 * cd-lightbox — оформление. Иконки нарисованы в CSS и SVG прямо здесь,
 * чтобы не тянуть шрифт иконок и не плодить запросы.
 */

.cdlb-lock { overflow: hidden; }

.cdlb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    background: #141414;
    font: 13px/1.4 Arial, Helvetica, sans-serif;
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
}
.cdlb--open { display: block; }
.cdlb * { box-sizing: border-box; }

/* --- сцена ---------------------------------------------------------------- */

.cdlb__stage {
    position: absolute;
    inset: 44px 0 146px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
.cdlb--nostrip .cdlb__stage { bottom: 38px; }
.cdlb--nocap .cdlb__stage { bottom: 108px; }
.cdlb--nocap.cdlb--nostrip .cdlb__stage { bottom: 0; }

.cdlb__img {
    max-width: calc(100% - 24px);
    max-height: 100%;
    display: block;
    margin: auto;
    cursor: zoom-in;
    transition: opacity .15s;
    box-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.cdlb--zoom .cdlb__stage { cursor: zoom-out; }
.cdlb--zoom .cdlb__img {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}
.cdlb--loading .cdlb__img { opacity: .25; }

.cdlb__spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: cdlb-spin .8s linear infinite;
}
.cdlb--loading .cdlb__spinner { display: block; }
@keyframes cdlb-spin { to { transform: rotate(360deg); } }

/* --- счётчик и подпись ---------------------------------------------------- */

.cdlb__counter {
    position: absolute;
    left: 12px;
    top: 0;
    height: 44px;
    line-height: 44px;
    padding: 0 8px;
    font-size: 15px;
    color: #b8b8b8;
}

.cdlb__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 108px;
    height: 38px;
    line-height: 22px;
    padding: 8px 60px;
    overflow: hidden;
    text-align: center;
    font-size: 14px;
    color: #e6e6e6;
}
.cdlb--nostrip .cdlb__caption { bottom: 0; }
.cdlb--nocap .cdlb__caption { display: none; }

/* --- панель кнопок -------------------------------------------------------- */

.cdlb__bar {
    position: absolute;
    right: 6px;
    top: 0;
    height: 44px;
    display: flex;
    align-items: center;
}

.cdlb__btn,
.cdlb__nav {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    color: #ddd;
}
.cdlb__btn {
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 20px 20px;
    opacity: .75;
    transition: opacity .15s;
}
.cdlb__btn:hover,
.cdlb__btn:focus-visible { opacity: 1; outline: none; }
.cdlb__btn--on { opacity: 1; background-color: rgba(255, 255, 255, .16); }

/* Иконки: белые контуры, экранированный SVG в url(). */
.cdlb__btn--zoom   { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M7.5 10.5h6M10.5 7.5v6'/%3E%3C/svg%3E"); }
.cdlb__btn--play   { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E"); }
.cdlb__btn--on.cdlb__btn--play { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6 4.5h4v15H6zM14 4.5h4v15h-4z'/%3E%3C/svg%3E"); }
.cdlb__btn--full   { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M15 20h5v-5M9 20H4v-5'/%3E%3C/svg%3E"); }
.cdlb__btn--thumbs { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='2.5' y='7' width='5.5' height='10' rx='1'/%3E%3Crect x='9.25' y='7' width='5.5' height='10' rx='1'/%3E%3Crect x='16' y='7' width='5.5' height='10' rx='1'/%3E%3C/svg%3E"); }
.cdlb__btn--close  { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* --- стрелки -------------------------------------------------------------- */

.cdlb__nav {
    position: absolute;
    top: 50%;
    width: 54px;
    height: 88px;
    margin-top: -44px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 28px 28px;
    opacity: .55;
    transition: opacity .15s;
}
.cdlb__nav:hover,
.cdlb__nav:focus-visible { opacity: 1; outline: none; }
.cdlb__nav--prev {
    left: 0;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4 7 12l8 8'/%3E%3C/svg%3E");
}
.cdlb__nav--next {
    right: 0;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 4 8 8-8 8'/%3E%3C/svg%3E");
}

/* --- лента миниатюр ------------------------------------------------------- */

.cdlb__strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 108px;
    padding: 12px 8px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: safe center;
    background: rgba(0, 0, 0, .35);
    scrollbar-width: thin;
}
.cdlb--nostrip .cdlb__strip { display: none; }
.cdlb__strip:empty { display: none; }

.cdlb__thumb {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 96px;
    height: 84px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    background: #000;
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s, border-color .15s;
    overflow: hidden;
}
.cdlb__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cdlb__thumb:hover { opacity: .85; }
.cdlb__thumb--on { opacity: 1; border-color: #fff; }

/* --- телефоны ------------------------------------------------------------- */

@media (max-width: 640px) {
    .cdlb__stage  { inset: 44px 0 116px; }
    .cdlb--nostrip .cdlb__stage { bottom: 34px; }
    .cdlb--nocap .cdlb__stage { bottom: 82px; }
    .cdlb--nocap.cdlb--nostrip .cdlb__stage { bottom: 0; }
    .cdlb__strip  { height: 82px; padding: 8px 6px; }
    .cdlb__thumb  { width: 66px; height: 62px; }
    .cdlb__nav    { width: 40px; background-size: 22px 22px; }
    .cdlb__caption { bottom: 82px; height: 34px; padding: 6px 44px; font-size: 13px; }
    .cdlb__counter { font-size: 13px; }
}

/* Пользователь просил не анимировать — не анимируем. */
@media (prefers-reduced-motion: reduce) {
    .cdlb__spinner { animation: none; }
    .cdlb__img, .cdlb__btn, .cdlb__nav, .cdlb__thumb { transition: none; }
}