/*
   Courses Favorites Block Styles
   Файл: assets/css/courses/courses-favorites.css

   НАЗНАЧЕНИЕ:
   - Стили блока избранных тренировок на странице "Мои программы"
   - 14 цветовых схем: 0 (тил, по умолчанию) + 13 дополнительных
   - Слайдер/карусель для листания
   - Выбор цвета карточки (color picker, 2 ряда по 7)
   - Светлая и тёмная темы
*/

/* ========== ОСНОВНОЙ БЛОК ========== */
.cf-block {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dark-theme .cf-block {
    background: rgba(30, 30, 46, 0.9);
}

/* Градиентная рамка */
.cf-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, #2dd4bf, #14b8a6, #0f766e);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: subtract;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.dark-theme .cf-block::before {
    opacity: 0.7;
}

.cf-block > * {
    position: relative;
    z-index: 1;
}

/* ========== СКРЫТИЕ ЭЛЕМЕНТОВ ========== */
.cf-hidden {
    display: none !important;
}

/* ========== АНИМАЦИЯ ПОЯВЛЕНИЯ ========== */
.cf-fade-in {
    animation: cfFadeIn 0.3s ease forwards;
}

/* ========== АНИМАЦИЯ ВЫХОДА КАРТОЧКИ ========== */
.cf-card-exit {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ========== ПОДСКАЗКА ========== */
.cf-hint {
    text-align: center;
}

.cf-hint-text {
    font-size: 0.9em;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.dark-theme .cf-hint-text {
    color: #b3b3cc;
}

/* ========== ШАПКА КОНТЕНТА ========== */
.cf-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.cf-title {
    flex: 1;
    font-size: 1em;
    font-weight: 700;
    color: #1e293b;
}

.dark-theme .cf-title {
    color: #ffffff;
}

.cf-counter {
    font-size: 0.85em;
    color: #64748b;
    font-weight: 600;
}

.dark-theme .cf-counter {
    color: #b3b3cc;
}

/* ========== КНОПКА СВЕРНУТЬ/РАЗВЕРНУТЬ ========== */

.cf-toggle-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.cf-toggle-arrow {
    font-size: 1em;
    color: #64748b;
    transition: transform 0.3s ease;
    display: inline-block;
    line-height: 1;
}

.dark-theme .cf-toggle-arrow {
    color: #b3b3cc;
}

.cf-toggle-arrow.collapsed {
    transform: rotate(-90deg);
}

/* Контейнер слайдера: анимация сворачивания */
.cf-slider-wrapper {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    max-height: 600px;
    opacity: 1;
}

.cf-slider-wrapper.collapsed {
    max-height: 0;
    opacity: 0;
}

/* ========== СЛАЙДЕР ========== */
.cf-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cf-day-container {
    flex: 1;
    min-width: 0;
    position: relative;
    transition: height 0.3s ease;
}

.cf-slider-btn {
    border: none;
    background: none;
    color: #64748b;
    font-size: 2em;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-theme .cf-slider-btn {
    color: #b3b3cc;
}

.cf-slider-btn:hover {
    transform: scale(1.2);
}

.cf-slider-btn:active {
    transform: scale(0.9);
}

/* ========== КАРТОЧКА ТРЕНИРОВКИ ========== */
.cf-day-container .cf-card {
    margin: 0;
    width: 100%;
    opacity: 0;
    animation: cfFadeIn 0.3s ease forwards;
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    box-sizing: border-box;
}

@keyframes cfFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Градиентная рамка карточки */
.cf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: var(--cf-border-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
}

.dark-theme .cf-card::before {
    opacity: 0.85;
}

/* Фон карточки */
.cf-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    background: var(--cf-bg-color, rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

/* Контент выше псевдоэлементов */
.cf-card > * {
    position: relative;
    z-index: 1;
}

/* ========== ЭЛЕМЕНТЫ КАРТОЧКИ ========== */

.cf-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
    position: relative;
}

/* Звезда (удаление) — справа */
.cf-card-star {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1.2;
    max-height: 22px;
    padding: 1px;
    color: var(--cf-accent-color);
    transition: transform 0.2s ease;
}

.cf-card-star:hover {
    transform: scale(1.2);
}

/* Кнопка "Цвет" — слева (зеркально звезде) */
.cf-card-color-btn {
    position: absolute;
    top: 2px;
    left: 0;
    cursor: pointer;
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: var(--cf-accent-color);
    background: transparent;
    border: 1.5px solid var(--cf-accent-color);
    transition: all 0.2s ease;
    opacity: 0.7;
    user-select: none;
}

.cf-card-color-btn:hover {
    opacity: 1;
}

.cf-card-color-btn.active {
    opacity: 1;
    background: var(--cf-accent-color);
    color: white;
}

.cf-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    background: var(--cf-gradient);
    color: white;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.cf-card-title {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--cf-text-color-light, #1e293b);
    margin: 0;
}

.dark-theme .cf-card-title {
    color: var(--cf-text-color-dark, #e0eaff);
}

/* Фокус */
.cf-card-focus {
    font-size: 0.85em;
    line-height: 1.3;
    text-align: center;
    color: #64748b;
    margin: 0;
}

.dark-theme .cf-card-focus {
    color: #b3b3cc;
}

/* Детали: реквизит + сложность */
.cf-card-info {
    display: flex;
    flex-direction: row;
    gap: 16px;
    font-size: 0.8em;
    flex-wrap: wrap;
    margin: 0;
}

.cf-card-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.85em;
}

.dark-theme .cf-card-detail {
    color: #b3b3cc;
}

/* Видео ссылки */
.cf-card-videos {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.cf-video-link {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    color: white;
    background: var(--cf-gradient);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    border: none;
}

.cf-video-link:hover {
    transform: translateY(-2px);
}

/* ========== COLOR PICKER ========== */
.cf-color-picker {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
    animation: cfFadeIn 0.25s ease forwards;
}

.cf-color-options {
    display: grid;
    grid-template-columns: repeat(7, 28px);
    gap: 10px 12px;
    align-items: center;
    justify-content: center;
}

.cf-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2.5px solid transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.cf-color-dot:hover {
    transform: scale(1.15);
}

.cf-color-dot.active {
    border-color: var(--cf-accent-color, #14b8a6);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3);
    transform: scale(1.1);
}

/* ========== 6 ЦВЕТОВЫХ СХЕМ ========== */

/* Схема 0: Тил (по умолчанию) — как шапка и кнопки */
.cf-card.cf-theme-0 {
    --cf-gradient: linear-gradient(135deg, #2dd4bf, #14b8a6);
    --cf-border-gradient: linear-gradient(135deg, rgba(45, 212, 191, 0.45), rgba(20, 184, 166, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #14b8a6;
    --cf-text-color-light: #0f766e;
    --cf-text-color-dark: #5eead4;
}

.dark-theme .cf-card.cf-theme-0 {
    --cf-gradient: linear-gradient(135deg, #2dd4bf, #14b8a6);
    --cf-border-gradient: linear-gradient(135deg, rgba(94, 234, 212, 0.5), rgba(45, 212, 191, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 1: Сапфир (синий) */
.cf-card.cf-theme-5 {
    --cf-gradient: linear-gradient(135deg, #6a9fdb, #5585c4);
    --cf-border-gradient: linear-gradient(135deg, rgba(106, 159, 219, 0.45), rgba(85, 133, 196, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #5b8fd4;
    --cf-text-color-light: #2c5a9e;
    --cf-text-color-dark: #93c5fd;
}

.dark-theme .cf-card.cf-theme-5 {
    --cf-gradient: linear-gradient(135deg, #7baae0, #6393cc);
    --cf-border-gradient: linear-gradient(135deg, rgba(147, 197, 253, 0.5), rgba(107, 165, 224, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 2: Аметист (фиолетовый) */
.cf-card.cf-theme-7 {
    --cf-gradient: linear-gradient(135deg, #9381d4, #7e6bbf);
    --cf-border-gradient: linear-gradient(135deg, rgba(147, 129, 212, 0.45), rgba(126, 107, 191, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #8674c8;
    --cf-text-color-light: #5a3f9e;
    --cf-text-color-dark: #c4b5fd;
}

.dark-theme .cf-card.cf-theme-7 {
    --cf-gradient: linear-gradient(135deg, #a090dc, #8b79c9);
    --cf-border-gradient: linear-gradient(135deg, rgba(196, 181, 253, 0.5), rgba(160, 144, 220, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 3: Изумруд (зелёный) */
.cf-card.cf-theme-2 {
    --cf-gradient: linear-gradient(135deg, #5dba9a, #4da88a);
    --cf-border-gradient: linear-gradient(135deg, rgba(93, 186, 154, 0.45), rgba(77, 168, 138, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #4fad8e;
    --cf-text-color-light: #1f7a5c;
    --cf-text-color-dark: #a7dfc8;
}

.dark-theme .cf-card.cf-theme-2 {
    --cf-gradient: linear-gradient(135deg, #6ec4a5, #5cb393);
    --cf-border-gradient: linear-gradient(135deg, rgba(167, 223, 200, 0.5), rgba(110, 196, 165, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 4: Коралл (тёплый розово-терракотовый) */
.cf-card.cf-theme-12 {
    --cf-gradient: linear-gradient(135deg, #d48f85, #c47a70);
    --cf-border-gradient: linear-gradient(135deg, rgba(212, 143, 133, 0.45), rgba(196, 122, 112, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #cf7e72;
    --cf-text-color-light: #9e4a3e;
    --cf-text-color-dark: #f5bab2;
}

.dark-theme .cf-card.cf-theme-12 {
    --cf-gradient: linear-gradient(135deg, #df9e95, #cf8b82);
    --cf-border-gradient: linear-gradient(135deg, rgba(245, 186, 178, 0.5), rgba(223, 158, 149, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 5: Рубин (розовый) */
.cf-card.cf-theme-10 {
    --cf-gradient: linear-gradient(135deg, #d48ba8, #c47793);
    --cf-border-gradient: linear-gradient(135deg, rgba(212, 139, 168, 0.45), rgba(196, 119, 147, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #cc809e;
    --cf-text-color-light: #9e3c64;
    --cf-text-color-dark: #f9a8d4;
}

.dark-theme .cf-card.cf-theme-10 {
    --cf-gradient: linear-gradient(135deg, #d07090, #c06080);
    --cf-border-gradient: linear-gradient(135deg, rgba(249, 168, 212, 0.55), rgba(208, 112, 144, 0.4));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 6: Лаванда (сиреневый) */
.cf-card.cf-theme-8 {
    --cf-gradient: linear-gradient(135deg, #b89ad0, #a585bd);
    --cf-border-gradient: linear-gradient(135deg, rgba(184, 154, 208, 0.45), rgba(165, 133, 189, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #a88bc4;
    --cf-text-color-light: #6b4892;
    --cf-text-color-dark: #d8c4f0;
}

.dark-theme .cf-card.cf-theme-8 {
    --cf-gradient: linear-gradient(135deg, #c5a9db, #b498ca);
    --cf-border-gradient: linear-gradient(135deg, rgba(216, 196, 240, 0.5), rgba(197, 169, 219, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 7: Селадон (чистый светло-зелёный) */
.cf-card.cf-theme-3 {
    --cf-gradient: linear-gradient(135deg, #9ac8a4, #87b893);
    --cf-border-gradient: linear-gradient(135deg, rgba(154, 200, 164, 0.45), rgba(135, 184, 147, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #94c09c;
    --cf-text-color-light: #5a7a60;
    --cf-text-color-dark: #d0e8d4;
}

.dark-theme .cf-card.cf-theme-3 {
    --cf-gradient: linear-gradient(135deg, #a8d4b0, #98c8a8);
    --cf-border-gradient: linear-gradient(135deg, rgba(208, 232, 212, 0.55), rgba(168, 212, 176, 0.4));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 8: Персик (чистый тёплый оранжевый) */
.cf-card.cf-theme-13 {
    --cf-gradient: linear-gradient(135deg, #f0a883, #e6986b);
    --cf-border-gradient: linear-gradient(135deg, rgba(240, 168, 131, 0.45), rgba(230, 152, 107, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #e89c70;
    --cf-text-color-light: #a55f30;
    --cf-text-color-dark: #f7d0b2;
}

.dark-theme .cf-card.cf-theme-13 {
    --cf-gradient: linear-gradient(135deg, #e8a070, #d89060);
    --cf-border-gradient: linear-gradient(135deg, rgba(240, 192, 152, 0.5), rgba(232, 160, 112, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 9: Вишня (глубокий приглушённый красный) */
.cf-card.cf-theme-9 {
    --cf-gradient: linear-gradient(135deg, #c07078, #b06068);
    --cf-border-gradient: linear-gradient(135deg, rgba(192, 112, 120, 0.45), rgba(176, 96, 104, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #b56870;
    --cf-text-color-light: #883840;
    --cf-text-color-dark: #e8a8ae;
}

.dark-theme .cf-card.cf-theme-9 {
    --cf-gradient: linear-gradient(135deg, #cc8088, #bc7078);
    --cf-border-gradient: linear-gradient(135deg, rgba(232, 168, 174, 0.5), rgba(204, 128, 136, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 10: Морская волна  (бирюзовый) */
.cf-card.cf-theme-1 {
    --cf-gradient: linear-gradient(135deg, #4ab0c2, #3898ae);
    --cf-border-gradient: linear-gradient(135deg, rgba(74, 176, 194, 0.45), rgba(56, 152, 174, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #40a3b8;
    --cf-text-color-light: #1e6478;
    --cf-text-color-dark: #a0d8e8;
}

.dark-theme .cf-card.cf-theme-1 {
    --cf-gradient: linear-gradient(135deg, #5ebccf, #4aa8c2);
    --cf-border-gradient: linear-gradient(135deg, rgba(160, 216, 232, 0.5), rgba(94, 188, 207, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 11: Магнолия (тёплый розово-кремовый, мягче рубина) */
.cf-card.cf-theme-11 {
    --cf-gradient: linear-gradient(135deg, #f0a8c8, #e89cc0);
    --cf-border-gradient: linear-gradient(135deg, rgba(240, 168, 200, 0.5), rgba(232, 156, 192, 0.35));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #ec9bc4;
    --cf-text-color-light: #b54f80;
    --cf-text-color-dark: #f8d0e4;
}

.dark-theme .cf-card.cf-theme-11 {
    --cf-gradient: linear-gradient(135deg, #e8a0c8, #d88fb8);
    --cf-border-gradient: linear-gradient(135deg, rgba(248, 192, 224, 0.6), rgba(232, 160, 200, 0.45));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 12: Индиго (глубокий тёмно-синий) */
.cf-card.cf-theme-4 {
    --cf-gradient: linear-gradient(135deg, #7080b0, #6070a0);
    --cf-border-gradient: linear-gradient(135deg, rgba(112, 128, 176, 0.45), rgba(96, 112, 160, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #6878a8;
    --cf-text-color-light: #3c4878;
    --cf-text-color-dark: #a8b8d8;
}

.dark-theme .cf-card.cf-theme-4 {
    --cf-gradient: linear-gradient(135deg, #808fbe, #7080ae);
    --cf-border-gradient: linear-gradient(135deg, rgba(168, 184, 216, 0.5), rgba(128, 143, 190, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* Схема 13: Серебро (чистый холодный серый) */
.cf-card.cf-theme-6 {
    --cf-gradient: linear-gradient(135deg, #a0a4b0, #9094a0);
    --cf-border-gradient: linear-gradient(135deg, rgba(160, 164, 176, 0.45), rgba(144, 148, 160, 0.3));
    --cf-bg-color: rgba(255, 255, 255, 0.92);
    --cf-accent-color: #989ca8;
    --cf-text-color-light: #505460;
    --cf-text-color-dark: #c8ccd8;
}

.dark-theme .cf-card.cf-theme-6 {
    --cf-gradient: linear-gradient(135deg, #aeb2be, #9ea2ae);
    --cf-border-gradient: linear-gradient(135deg, rgba(200, 204, 216, 0.5), rgba(174, 178, 190, 0.35));
    --cf-bg-color: rgba(30, 30, 46, 0.88);
}

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 480px) {
    .cf-block {
        padding: 16px;
        margin-bottom: 14px;
    }

    .cf-hint-text {
        font-size: 0.85em;
    }

    .cf-header {
        margin-bottom: 12px;
    }

    .cf-title {
        font-size: 0.95em;
    }

    .cf-slider-btn {
        font-size: 1.8em;
    }

    .cf-color-dot {
        width: 26px;
        height: 26px;
    }

    .cf-color-options {
        grid-template-columns: repeat(7, 26px);
        gap: 8px 10px;
    }
}

@media (max-width: 320px) {
    .cf-block {
        padding: 14px;
    }

    .cf-color-options {
        grid-template-columns: repeat(7, 24px);
        gap: 6px 8px;
    }

    .cf-color-dot {
        width: 24px;
        height: 24px;
    }
}