/* ======================================================
   ЦВЕТА ПРОЕКТА (единый источник)
====================================================== */
:root { 
    --wl-white:  #ffffff;
    --wl-foncart: #FAF8FF; /* фон карточки*/
    --wl-lilac:  #E6D9FF; /* вторичный фон */
    --wl-purple: #7A5AF8; /* основной акцент */
    --wl-blue:   #3429D5; /* ссылки / переходы */
    --wl-sky:    #7DD3FC; /* альтернативные действия */
    --wl-maroon: #970000; /* бордовый цвет */
}



/* ======================================================
   ЕДИНАЯ ШИРИНА СТРАНИЦ ВИШЛИСТА
====================================================== */
.wl-dashboard,
.wl-wishlist-edit,
.wl-favorites,
.wl-public-fullwidth .site-main,
.wl-public-fullwidth .wl-page-main {
    width: min(100%, 1180px); /* единая ширина для личных и публичных страниц */
    max-width: 1180px; /* защита от сужения темой */
    margin-left: auto; /* центрируем страницу */
    margin-right: auto; /* центрируем страницу */
    padding-left: 16px; /* безопасный отступ на мобильных */
    padding-right: 16px; /* безопасный отступ на мобильных */
    box-sizing: border-box; /* ширина считается вместе с отступами */
}

.wl-public-fullwidth.content-area,
#primary.wl-public-fullwidth {
    width: 100%; /* публичные страницы не ограничиваются узким контейнером темы */
    max-width: none; /* снимаем ограничение темы */
    margin-left: auto; /* сохраняем выравнивание */
    margin-right: auto; /* сохраняем выравнивание */
}

.wl-public-fullwidth .wl-cards-grid,
.wl-dashboard .wl-cards-grid,
.wl-wishlist-edit .wl-cards-grid,
.wl-favorites .wl-cards-grid {
    width: 100%; /* сетка карточек занимает всю доступную ширину */
}

@media (max-width: 768px) {
    .wl-dashboard,
    .wl-wishlist-edit,
    .wl-favorites,
    .wl-public-fullwidth .site-main,
    .wl-public-fullwidth .wl-page-main {
        padding-left: 12px; /* уменьшаем боковые отступы на мобильных */
        padding-right: 12px; /* уменьшаем боковые отступы на мобильных */
    }
}

/* ======================================================
   СЕТКА КАРТОЧЕК
   профили / вишлисты / подарки
====================================================== */
/* СМОТРЕТЬ СТИЛИ ДОЧЕРНЕЙ ТЕМЫ */

.wl-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.wl-cards-grid .wl-card {
    width: 100%; /* карточка занимает всю ширину своей колонки */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .wl-cards-grid {
        grid-template-columns: 1fr; /* 1 колонка для супер-мобилок */
    }
}


/* ======================================================
   КАРТОЧКИ (общий стиль)
====================================================== */
.wl-card {
    background: var(--wl-foncart);
    border: 1px solid var(--wl-purple);
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;    
}
.wl-card h3,
.wl-card h4 {
    margin: 0 0 6px;
}

/* ===================================================================
   КАРТОЧКА ПОДАРКА
====================================================== */
.wl-gift-card {
    position: relative; /* необходимо для корректного позиционирования звездочки */
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    width: 100%;
}

/* ---- карточки картинка ----- */
.wl-gift-card-left img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* ---- карточки правая сторона ---- */
.wl-gift-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- нижний блок карточки ----- */
.wl-gift-extra {
    grid-column: 1 / -1;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /*height: 100%; /* важно */
}

/* ======================================================
   Прижатие кнопок к низу карточек  
====================================================== */
/* для подарков */
.wl-gift-extra .wl-card-actions {
    margin-top: auto; /* 🔥 прижимает кнопки к низу */
}
/* не для подарков */
.wl-card:not(.wl-gift-card) {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wl-card:not(.wl-gift-card) .wl-card-actions {
    margin-top: auto;
}

/* ======================================================
   ДЕЙСТВИЯ В КАРТОЧКЕ
====================================================== */

.wl-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
@media (max-width: 360px) {
    .wl-card-actions {
        flex-direction: column;
    }

    .wl-card-actions .wl-btn,
    .wl-card-actions .wl-btn-small {
        width: 100%;
    }
}

.wl-card-actions .wl-btn,
.wl-card-actions .wl-btn-small {
    flex: 1;
}

.wl-go-btn {
    text-align: center;      /* текст точно по центру */
}


/* ======================================================
   КНОПКИ В 2 РЯДА (только для МОИХ ВИШЛИСТОВ)
====================================================== */
.wl-card-actions--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.wl-card-actions--grid .wl-btn,
.wl-card-actions--grid .wl-btn-small {
    width: 100%;
}
@media (max-width: 360px) {
    .wl-card-actions--grid {
        grid-template-columns: 1fr;
    }
}
/* ======================================================
   КНОПКА В личный кабинет (на листе избранного)
====================================================== */
.wl-back-to-cabinet {
    margin-top: 40px;
    margin-bottom: 40px; 
    text-align: center;
}

/* ======================================================
   КНОПКИ
====================================================== */

.wl-btn,
.wl-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: all .2s ease;
}

/* размеры */
.wl-btn {
    padding: 6px 14px; /* 6px сверху и снизу, 14px слева и справа */
    font-size: 14px;
}

.wl-btn-small {
    padding: 4px 6px; /* 4px сверху и снизу, 6px слева и справа */
    font-size: 13px;
}

/* ---- типы кнопок ---- */
/* активные кнопки: синий фон - белый текст*/
.wl-btn-primary {
    background: var(--wl-purple);
    color: var(--wl-white);
}
/* сереневая + фиолетовый_текст: перейти - удалить из избранного*/
.wl-btn-secondary {
    background: var(--wl-lilac);
    color: var(--wl-purple);
    border-color: var(--wl-purple);
}
/* ссылка: белый фон - синий текст */
.wl-btn-link {
    background: var(--wl-white);
    color: var(--wl-blue);
    border-color: var(--wl-blue);
}
/* сереневая + синий_текст: в магазин*/
.wl-btn-shop {
    background: var(--wl-lilac);
    color: var(--wl-blue);
    border-color: var(--wl-blue);
}
/* не активная */
/* disabled */
.wl-btn.wl-disabled,
.wl-btn-small.wl-disabled,
.wl-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Кнопка "Забронировать" — свободный подарок */
.wl-btn-reserve {
    background: var(--wl-white);
    color: var(--wl-blue);
    border: 2px solid var(--wl-purple);
}
/* Подарок ЗАБРОНИРОВАН */
.wl-btn-reserve.is-reserved,
.wl-btn-reserve:disabled {
    background: #DFDFDF;
    color: var(--wl-maroon);
    border: 2px solid var(--wl-maroon);
    cursor: not-allowed;
}


/* конкретные кнопки */
#wl-save-wishlist-btn {
    margin: 12px 0; /* 12px сверху и снизу - сохранить данные вишлиста */
}

/* Кнопки в модалке выбора вишлиста */
#wl-select-wishlist-modal .wl-btn {
    margin: 4px;
}
/* Крестик закрытия модалки */
.wl-modal-content {
    position: relative; /* убедись что есть */
    padding-top: 28px;  /* немного воздуха сверху под крестик */
}
.wl-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 30px; /* 🔥 увеличили крестик */
    line-height: 1;
    cursor: pointer;
    color: #999;
    z-index: 10; /* чтобы был поверх всего */
}
.wl-modal-close:hover {
    color: #000;
}
.wl-modal-close:hover {
    color: #000;
}

/* ======================================================
   СТАТУС ПОДАРКА
====================================================== */
.wl-gift-status {
    font-size: 12px;
}
.wl-gift-status.reserved {
    color: var(--wl-maroon);
}
.wl-gift-status.free {
    color: var(--wl-blue);
}

/* ======================================================
   ИЗБРАННОЕ (звезда)
====================================================== */

/* ИЗБРАННОЕ (звезда) */
.wl-gift-fav {
    position: absolute;
    top: -2px;     /* отступ от верхнего края карточки */
    right: -2px;   /* отступ от правого края карточки */
    background: none;
    border: none;
    font-size: 26px;
    color: var(--wl-lilac);
    cursor: pointer;
    z-index: 10;  /* чтобы перекрывала все элементы внутри карточки */
}
.wl-gift-fav.active {
    color: var(--wl-purple);
}


/* ======================================================
   КОММЕНТАРИИ
====================================================== */
.wl-toggle-comment-link {
    cursor: pointer;
    font-size: 12px;
    color: var(--wl-blue);
}
.wl-gift-comment {
    margin-top: 4px;
    font-size: 13px;
}
.wl-gift-comment-block {
    margin-bottom: 16px; /* увеличивает расстояние до кнопок */
}
/* расстояние до кнопок после раскрытия текста*/
.wl-gift-comment {
    margin-top: 6px;
    margin-bottom: 8px;
}

/* ======================================================
   ПОЛЯ ФОРМ (используются на других страницах)
====================================================== */

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select {
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--wl-lilac);
    font-size: 16px;
    font-family: inherit;
    background: var(--wl-white);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--wl-purple);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

.wl-input-full {
    width: 100%;
    margin-top: 0;
}


/* ======================================================
   LABEL’ы ФОРМ
====================================================== */

.wl-form-label {
    display: block;
    font-weight: bold;
    margin-top: 16px;
    margin-bottom: 2px;
}

.wl-form-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.wl-form-inline input,
.wl-form-inline textarea,
.wl-form-inline select {
    width: auto;
}

.wl-checkbox-label input[type="checkbox"] {
    accent-color: var(--wl-blue);
}

/* ======================================================
   ОКНО КОММЕНТАРИЯ И СЧЕТЧИК
====================================================== */
.wl-comment-wrapper {
    position: relative;
    margin-bottom: 18px;
}
.wl-comment-counter {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 12px;
    color: #999;
}

/* ======================================================
   МОДАЛЬНОЕ ОКНО
====================================================== */

.wl-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.wl-modal-content {
    background: var(--wl-white);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    border-radius: 12px;
    text-align: center;
    position: relative;
}

.wl-modal-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}


/* ======================================================
   ПРИОРИТЕТ ПОДАРКА (сердечки)
====================================================== */
.wl-priority {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.wl-heart {
    font-size: 22px;   /* ← увеличьте до нужного */
    line-height: 1;    /* важно, чтобы не «прыгало» */
    color: var(--wl-lilac);

    display: inline-block;
    width: 18px;            /* ← ВАЖНО: реальная ширина */
    text-align: center;

    transform: scaleX(1.35); /* ← растягивает по ширине */
    transform-origin: center;
}

.wl-heart.active {
    color: var(--wl-purple);
}

/* ======================================================
   Ссылка редактировать профиль / Выход из аккаунта
====================================================== */
.wl-user-links {
    margin-top: 0;        /* оставляем маленький отступ сверху */
    margin-bottom: 8px;
}
/* Ссылка остаётся обычным шрифтом */
.wl-user-links .wl-edit-profile {
    font-weight: normal;
    font-size: 14px;
    color: var(--wl-blue);
    text-decoration: none;
}
.wl-user-links .wl-edit-profile:hover {
    text-decoration: underline;
}
/* ======================================================
   Расстояние между элементами статистики и избранным (вишлистов, подарков)
====================================================== */
.wl-user-stats {
    display: flex;
    align-items: center;
    gap: 16px; /* расстояние между элементами внутри */
    margin-top: 8px; /* можно оставить, если нужно */
}
@media (max-width: 480px) {
    .wl-user-stats {
        flex-wrap: wrap; /* разрешаем перенос строк */
    }
    .wl-user-stats .wl-btn {
        width: 100%;     /* кнопка на всю строку */
        margin-top: 0px; /* отступ сверху */
    }
}

/* ======================================================
   СТИЛИ КРЕСТИКА
====================================================== */
.wl-image-url-wrap,
.wl-link-url-wrap  {
    position: relative;
}
.wl-image-url-clear,
.wl-link-url-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #bbb;
    background: #E6D9FF;
    padding: 2px 8px;
    border-radius: 50%;
    display: none;
}
.wl-image-url-wrap input:not(:placeholder-shown) + .wl-image-url-clear {
    display: block;
}
.wl-link-url-wrap input:not(:placeholder-shown) + .wl-link-url-clear {
    display: block;
}

.wl-image-url-clear:hover {
    color: #000;
}
.wl-link-url-clear:hover {
    color: #000;
}

/* ======================================================
   ПУБЛИЧНАЯ ССЫЛКА И КНОПКИ ПОД НЕЙ
====================================================== */
.wl-copy-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.wl-copy-actions {
    display: flex;
    gap: 8px;
}
/* Кнопка "Сохранить данные магазина" */
.wl-wishlist-edit form .wl-copy-actions {
    margin-top: 12px;
}

.wl-copy-wrapper .wl-copy-input {
    width: 100%;
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid var(--wl-purple);
    border-radius: 6px;
}
/* ======================================================
   КНОПКИ ФИЛЬТРА ПОДАРКОВ
====================================================== */
.wl-gifts-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* чтобы кнопки переносились на маленьких экранах */
    margin: 15px 0;
}

.wl-gifts-filter .wl-filter-btn {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid var(--wl-purple);
    background: var(--wl-white);
    color: var(--wl-purple);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wl-gifts-filter .wl-filter-btn:hover {
    background: var(--wl-purple);
    color: var(--wl-white);
}

.wl-gifts-filter .wl-filter-btn.active {
    background: var(--wl-purple);
    color: var(--wl-white);
    border-color: var(--wl-purple);
}

/* адаптив для маленьких экранов */
@media (max-width: 360px) {
    .wl-gifts-filter {
        flex-direction: column;
    }
    .wl-gifts-filter .wl-filter-btn {
        width: 100%;
        text-align: center;
    }
}

/* ======================================================
   Поля ввода в модальном окне бронирования
====================================================== */
#wl-reserve-modal .wl-modal-content input[type="text"],
#wl-reserve-modal .wl-modal-content input[type="email"] {
    width: 100%;       /* на всю ширину контейнера */
    box-sizing: border-box; /* учитывает паддинг и бордер */
    padding: 8px 10px; /* аккуратный внутренний отступ */
    border-radius: 6px;
    border: 1px solid var(--wl-lilac);
    font-size: 14px;
}
/* Для удобства можно добавить небольшие отступы между полями */
#wl-reserve-modal .wl-modal-content label {
    display: block;
    margin-bottom: 12px;
}

/* ======================================================
   Премиум доступ
====================================================== */
.wl-premium-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fafafa;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wl-premium-hero {
    text-align: center;
    margin-bottom: 40px;
}

.wl-premium-hero h1 {
    font-size: 32px;
    font-weight: bold;
    color: #2a2a2a;
    margin-bottom: 10px;
}

.wl-premium-subtitle {
    font-size: 18px;
    color: #777;
}

.wl-premium-benefits {
    margin-bottom: 40px;
}

.wl-premium-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wl-premium-benefits li {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    padding: 15px;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
@media (max-width: 360px) {
    .wl-premium-benefits li {
        flex-direction: row;
        align-items: flex-start;
        font-size: 14px;
    }
}

.wl-premium-benefits .benefit-icon {
    font-size: 24px;
    margin-right: 15px;
    color: #ff7b7b;
}

.wl-premium-buy {
    text-align: center;
}

.wl-premium-buy .single_add_to_cart_button {
    background-color: #28a745;
    color: #fff;
    font-size: 18px;
    padding: 15px 30px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Стили для кнопки "В корзину", как у кнопки "В магазин" */
.wl-premium-buy .single_add_to_cart_button {
    background: var(--wl-lilac);
    color: var(--wl-blue);
    border: 2px solid var(--wl-blue);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    margin-top: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.wl-premium-buy .single_add_to_cart_button:hover {
    background: var(--wl-blue);
    color: var(--wl-white);
}


/* ======================================================
   ОТОБРАЖЕНИЕ НА МОБИЛЬНОМ 
====================================================== */

.wl-public-profile-actions {
    display: flex;          /* ← обязательно */
    align-items: center;
    margin: 12px 0 20px;
    gap: 12px;              /* ← увеличивайте как нужно */
}

@media (max-width: 360px) {
    .wl-public-profile-actions .wl-btn {
        width: 100%;
    }
}
/* ЗАГОЛОВКИ — НЕ ВЫХОДЯТ ЗА ЭКРАН (ограничиваем только вишлист) */
@media (max-width: 360px) {
    .wl-public-wishlist h1 {
        font-size: 22px;
        line-height: 1.3;
    }
    .wl-public-wishlist h4 {
        font-size: 16px;
    }
    .wl-public-wishlist p {
        font-size: 14px;
    }
}

/* ======================================================
   MOBILE — Premium buy (WooCommerce add to cart)
====================================================== */
@media (max-width: 360px) {

    /* форма покупки */
    .wl-premium-buy form.cart {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    /* select вариаций */
    .wl-premium-buy form.cart select {
        width: 100%;
    }

    /* кнопка "В корзину" */
    .wl-premium-buy .single_add_to_cart_button {
        width: 100%;
        margin-top: 10px;
    }
}

/* ======================================================
   MOBILE — кнопка "Перейти в корзину"
====================================================== */
/* Кнопка "Перейти в корзину" — белый текст */
.wl-go-to-cart .wl-btn {
    color: #ffffff;
}
@media (max-width: 360px) {
    .wl-go-to-cart .wl-btn {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}


/* ======================================================
   ПРОЧИЕ СТИЛИ 
====================================================== */
/* Ссылка назад - расстояние справа */
.wl-link {
    margin-right: 20px;
}

/* Расстояние перед социальными кнопками */
.wl-public-fullwidth .entry-social.social-buttons {
    margin-top: 40px;
    margin-bottom: 40px;
}
@media (max-width: 360px) {
    .entry-social.social-buttons {
        text-align: center;
    }

    .entry-social.social-buttons > * {
        max-width: 100%;
    }
}

/* ======================================================
   ИКОНКИ ПОДАРКОВ
====================================================== */
/* ===== Wishlist gift icons preview (равномерное распределение) ===== */
.wl-wishlist-icons {
    display: flex;
    justify-content: space-between; /* равномерно распределяем по ширине */
    align-items: center;
    margin: 12px 0; /* отступ сверху и снизу */
    gap: 8px; /* минимальный промежуток между иконками */
}

.wl-wishlist-icons img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0; /* чтобы не сжимались при малой ширине */
}

.wl-wishlist-icons img.wl-gift-placeholder {opacity: .7;filter: brightness(.9);}

.wl-gift-more {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.wl-gift-more img {
    width: 100%;
    height: 100%;
    filter: brightness(0.9); /* больше 1 → светлее, меньше 1 → темнее */
    opacity: 0.7; /* от 0 (полностью прозрачное) до 1 (непрозрачное) */
}

.wl-gift-more span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    font-weight: bold;
}



/* Кнопка отмены брони выглядит как «Забронирован», но остаётся активной. */
.wl-btn-reserve.reserved.is-reserved,
.wl-btn-reserve.reserved {
    background: #DFDFDF;
    color: var(--wl-maroon);
    border: 2px solid var(--wl-maroon);
    cursor: pointer;
}

/* Пагинация личного кабинета без загрузки всех вишлистов */
.wl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    margin: 0 4px 8px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}

/* Активная страница пагинации */
.wl-pagination .page-numbers.current {
    background: #333;
    border-color: #333;
    color: #fff;
}

/* ======================================================
   ЛИЧНЫЙ КАБИНЕТ — компактное оформление
====================================================== */
.wl-dashboard--cabinet {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wl-dashboard-panel {
    background: #fff;
    border: 1px solid rgba(122, 90, 248, .28);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 8px 22px rgba(61, 21, 112, .05);
}
.wl-dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}
.wl-dashboard-kicker {
    margin-bottom: 4px;
    color: var(--wl-purple);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wl-dashboard-head h2 {
    margin: 0;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.15;
}
.wl-dashboard-fav {
    flex: 0 0 auto;
    margin-top: 2px;
}
.wl-profile-hint {
    margin-top: 2px;
    color: #5f586d;
    font-size: 12px;
}
.wl-premium-line {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
    color: #4f485b;
    font-size: 13px;
    line-height: 1.35;
}
.wl-premium-line strong {
    color: #2f2937;
}
.wl-premium-line-sep {
    color: #8b8397;
}
.wl-premium-left {
    color: var(--wl-maroon);
    font-size: 13px;
}
.wl-user-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 165px));
    gap: 10px;
    margin: 10px 0;
}
.wl-stat-card {
    padding: 8px 12px;
    background: var(--wl-foncart);
    border: 1px solid rgba(122, 90, 248, .35);
    border-radius: 12px;
}
.wl-stat-card span {
    display: block;
    margin-bottom: 2px;
    color: #5f586d;
    font-size: 12px;
}
.wl-stat-card strong {
    display: block;
    font-size: 22px;
    line-height: 1;
}
.wl-dashboard-linkbox {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--wl-foncart);
    border-radius: 12px;
}
.wl-dashboard-linkbox .wl-form-label {
    margin-top: 0;
}

/* Модальные окна добавления/создания вишлиста */
#wl-select-wishlist-modal .wl-modal-content,
#wl-create-wishlist-modal .wl-modal-content,
.wl-create-wishlist-modal-content {
    padding-top: 18px;
}
#wl-select-wishlist-modal .wl-modal-title,
#wl-create-wishlist-modal .wl-modal-title,
.wl-modal-content > h3:first-child,
.wl-modal-content > .wl-modal-title:first-child {
    margin: 0 0 14px;
    line-height: 1.25;
}
#wl-create-wishlist-modal input[type="text"] {
    width: 100%;
    margin: 4px 0 12px;
}
button.wl-modal-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 640px) {
    .wl-dashboard-panel {
        padding: 16px;
        border-radius: 14px;
    }
    .wl-dashboard-head {
        flex-direction: column;
    }
    .wl-dashboard-fav,
    .wl-copy-actions,
    .wl-copy-actions .wl-btn-small,
    .wl-copy-actions a {
        width: 100%;
    }
    .wl-copy-actions {
        flex-direction: column;
    }
    .wl-user-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ======================================================
   РЕДАКТИРОВАНИЕ ВИШЛИСТА — понятная форма настроек
====================================================== */
.wl-wishlist-edit > h2 {
    margin: 14px 0 18px;
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.15;
}

.wl-wishlist-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 920px;
}

.wl-edit-card {
    background: var(--wl-white);
    border: 1px solid rgba(122, 90, 248, .28);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(61, 21, 112, .06);
}

.wl-edit-card--main,
.wl-edit-card--link {
    background: linear-gradient(180deg, #ffffff 0%, var(--wl-foncart) 100%);
}

.wl-edit-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.wl-edit-step {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wl-purple);
    color: var(--wl-white);
    font-weight: 700;
    line-height: 1;
}

.wl-edit-card-head h3 {
    margin: 0 0 4px;
    font-size: 19px;
    line-height: 1.25;
}

.wl-edit-card-head p {
    margin: 0;
    color: #5f586d;
    font-size: 14px;
    line-height: 1.45;
}

.wl-wishlist-settings .wl-form-label {
    margin-top: 12px;
    margin-bottom: 5px;
}

.wl-form-row {
    display: grid;
    grid-template-columns: minmax(180px, 280px);
    gap: 14px;
}

.wl-form-field--date .wl-date-input {
    width: 100%;
}

.wl-options-list {
    display: grid;
    gap: 10px;
}

.wl-option-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    background: var(--wl-foncart);
    border: 1px solid rgba(122, 90, 248, .24);
    border-radius: 14px;
    cursor: pointer;
}

.wl-option-item input[type="checkbox"] {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--wl-blue);
}

.wl-option-item strong,
.wl-option-item small {
    display: block;
}

.wl-option-item strong {
    margin-bottom: 3px;
    line-height: 1.3;
}

.wl-option-item small {
    color: #5f586d;
    line-height: 1.35;
}

.wl-option-item input:disabled + span {
    opacity: .72;
}

.wl-option-item--premium-preview {
    display: block;
    cursor: default;
}

.wl-option-item--premium-preview > span {
    display: block;
}

.wl-premium-note {
    margin-top: 5px;
    font-weight: 400;
    font-size: 12px;
}

.wl-premium-note a {
    font-weight: 400;
}

.wl-premium-all {
    margin-top: 14px;
    font-size: 13px;
}

.wl-premium-all a {
    font-weight: 400;
}

.wl-premium-inline {
    font-size: 12px;
    font-weight: 400;
}

.wl-premium-inline a {
    font-weight: 400;
}

.wl-edit-save-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.wl-edit-save-row #wl-save-wishlist-btn {
    margin: 0;
    padding: 9px 18px;
}

.wl-edit-save-row .wl-limit-warning {
    margin: 0;
}

.wl-edit-card--link .wl-copy-wrapper {
    margin-top: 0;
}

.wl-edit-card--link .wl-copy-input {
    background: var(--wl-white);
}

@media (max-width: 640px) {
    .wl-wishlist-settings {
        gap: 14px;
    }

    .wl-edit-card {
        padding: 15px;
        border-radius: 15px;
    }

    .wl-edit-card-head {
        gap: 10px;
    }

    .wl-form-row {
        grid-template-columns: 1fr;
    }

    .wl-edit-save-row .wl-btn {
        width: 100%;
    }
}

/* ======================================================
   Публичный вишлист — CTA для создания своего вишлиста
====================================================== */
.wl-public-cta {
    display: flex;
    justify-content: center;
    width: 100%;
}

.wl-public-cta--top {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 18px;
}

.wl-public-cta--bottom {
    margin: 28px 0 10px;
}

.wl-public-cta .wl-public-cta-btn {
    padding: 10px 18px;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
}

@media (max-width: 520px) {
    .wl-public-cta--top {
        justify-content: center;
    }

    .wl-public-cta .wl-public-cta-btn {
        width: 100%;
    }
}

/* Публичный каталог образцовых вишлистов — фирменные цвета ItWish. */
.wl-demo-page .wl-page-main {max-width:1180px;margin:0 auto;padding:36px 20px 76px;}
.wl-demo-intro {max-width:none;width:100%;box-sizing:border-box;margin:0 0 34px;line-height:1.65;color:#5B5268;}
.wl-demo-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:28px;align-items:stretch;}
.wl-demo-card {display:flex;flex-direction:column;height:100%;box-sizing:border-box;min-width:0;border:1px solid #E6D9FF;border-radius:18px;overflow:hidden;background:#fff;padding:16px 16px 24px;box-shadow:0 8px 26px rgba(61,21,112,.065);transition:box-shadow .2s ease,transform .2s ease;}
.wl-demo-card:hover {box-shadow:0 12px 32px rgba(61,21,112,.11);transform:translateY(-2px);}
.wl-demo-card-link {text-decoration:none;display:block;color:inherit;}
.wl-demo-card-image {background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;border-radius:13px;}
.wl-demo-card-collage {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:12px;width:100%;}
.wl-demo-card-tile {display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:transparent;border:0;border-radius:20px;overflow:hidden;min-width:0;min-height:0;box-shadow:none;}
.wl-demo-card-tile img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;padding:0;border:0;border-radius:20px;box-sizing:border-box;}
.wl-demo-card-tile--placeholder {background:transparent;}
.wl-demo-card h2 {font-size:20px;margin:22px 6px 9px;line-height:1.4;color:#3D1570;}
.wl-demo-card p {margin:0 6px 24px;color:#5B5268;line-height:1.55;}
.wl-demo-card-button {display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:max-content;max-width:100%;min-width:190px;min-height:44px;margin-top:auto;margin-right:auto;margin-bottom:0;margin-left:auto;flex-shrink:0;align-self:center;padding:11px 20px;border-radius:10px;background:linear-gradient(115deg,#7A5AF8 0%,#635BDF 64%,#648DE9 100%);color:#fff;text-decoration:none;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 5px 16px rgba(122,90,248,.19);transition:background .2s ease,box-shadow .2s ease,transform .2s ease;}
.wl-demo-card-button:visited {color:#fff;}
.wl-demo-card-button:hover,.wl-demo-card-button:focus-visible {background:linear-gradient(115deg,#6848E9 0%,#5148CC 64%,#527CD9 100%);color:#fff;box-shadow:0 7px 19px rgba(122,90,248,.28);}
.wl-demo-card-button:focus-visible {outline:3px solid #7DD3FC;outline-offset:3px;}
.wl-demo-pagination {display:flex;gap:10px;justify-content:center;margin:40px auto;flex-wrap:wrap;}
.wl-demo-pagination a,.wl-demo-pagination strong {padding:8px 13px;border:1px solid #E6D9FF;border-radius:7px;}
.wl-demo-pagination a:hover {background:#FAF8FF;}
@media (max-width:640px) {
  .wl-demo-page .wl-page-main {padding:24px 14px 54px;}
  .wl-demo-grid {gap:18px;}
  .wl-demo-card {padding:12px 12px 20px;}
  .wl-demo-card-image {padding:4px;}
  .wl-demo-card-collage {gap:10px;}
  .wl-demo-card h2 {margin-top:18px;}
  .wl-demo-card p {margin-bottom:22px;}
  .wl-demo-card-button {min-width:180px;}
}
@media (prefers-reduced-motion:reduce) {
  .wl-demo-card,.wl-demo-card-button {transition:none;}
  .wl-demo-card:hover {transform:none;}
}

/* SEO-описания доступны только для демонстрационных вишлистов. */
.wl-demo-seo-text{width:100%;max-width:100%;line-height:1.7;overflow-wrap:anywhere;}
.wl-demo-seo-text--before{margin:20px 0 28px;}
.wl-demo-seo-text--after{margin:30px 0 24px;}
.wl-demo-seo-text p{margin:0 0 1em;}
.wl-demo-seo-text h2,.wl-demo-seo-text h3{margin:1.25em 0 .55em;}

/* Краткое описание образцового вишлиста под заголовком */
.wl-demo-short-intro{margin:12px 0 18px;max-width:920px;font-size:15px;line-height:1.6;color:#5d6270;}
@media (max-width:640px){.wl-demo-short-intro{font-size:14px;line-height:1.55;margin:10px 0 16px;}}

/* ======================================================
   UX 1.0.109 — редактирование вишлиста
====================================================== */
.wl-wishlist-edit .wl-wishlist-settings {
    max-width: 100%;
}

.wl-edit-topnav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 18px;
}

.wl-edit-topnav .wl-btn {
    margin: 0;
}

.wl-optional {
    color: #6f687c;
    font-size: 12px;
    font-weight: 400;
}

.wl-autosave-status {
    min-height: 20px;
    margin-top: 12px;
    color: #6f687c;
    font-size: 13px;
    line-height: 1.4;
}

.wl-autosave-status.is-saving {
    color: #5f586d;
}

.wl-autosave-status.is-saved {
    color: #2e6f42;
}

.wl-autosave-status.is-error {
    color: var(--wl-maroon);
    font-weight: 600;
}

.wl-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.wl-edit-card--gifts {
    background: #fff;
}

.wl-gift-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.wl-gift-toolbar .wl-add-gift-btn,
.wl-add-more-row .wl-add-gift-btn,
.wl-empty-gifts .wl-add-gift-btn {
    padding: 11px 18px;
    font-size: 15px;
    font-weight: 700;
}

.wl-gift-toolbar .wl-gift-sort {
    margin: 0;
}

.wl-gift-sort label {
    display: block;
    margin-bottom: 4px;
    color: #5f586d;
    font-size: 12px;
    font-weight: 600;
}

.wl-empty-gifts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 20px;
    background: var(--wl-foncart);
    border: 1px dashed rgba(122, 90, 248, .45);
    border-radius: 14px;
}

.wl-empty-gifts strong {
    font-size: 17px;
}

.wl-empty-gifts span {
    color: #5f586d;
    font-size: 14px;
}

.wl-empty-gifts .wl-add-gift-btn {
    margin-top: 5px;
}

.wl-add-more-row {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.wl-edit-card--link .wl-copy-actions {
    align-items: stretch;
}

/* Премиум-настройки: блок свёрнут по умолчанию */
.wl-options-details {
    padding: 0;
    overflow: hidden;
}

.wl-options-summary {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding: 18px;
    cursor: pointer;
    list-style: none;
}

.wl-options-summary::-webkit-details-marker {
    display: none;
}

.wl-options-summary-text strong,
.wl-options-summary-text small {
    display: block;
}

.wl-options-summary-text strong {
    margin-bottom: 4px;
    font-size: 19px;
    line-height: 1.25;
}

.wl-options-summary-text small {
    color: #5f586d;
    font-size: 14px;
    line-height: 1.45;
}

.wl-options-chevron {
    margin-top: 2px;
    color: var(--wl-purple);
    font-size: 24px;
    line-height: 1;
    transition: transform .18s ease;
}

.wl-options-details[open] .wl-options-chevron {
    transform: rotate(180deg);
}

.wl-options-content {
    padding: 0 18px 18px 60px;
}

.wl-options-group + .wl-options-group {
    margin-top: 16px;
}

.wl-options-group h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #463d58;
}

/* ======================================================
   UX 1.0.109 — личный кабинет
====================================================== */
.wl-dashboard-guide {
    display: flex;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 11px 14px;
    background: var(--wl-foncart);
    border: 1px solid rgba(122, 90, 248, .28);
    border-radius: 12px;
}

.wl-dashboard-guide strong {
    width: 100%;
    font-size: 15px;
}

.wl-dashboard-guide span {
    color: #342f3d;
    font-size: 14px;
    font-weight: 500;
}

.wl-dashboard-guide b {
    color: var(--wl-purple);
}

.wl-dashboard-guide i {
    margin: 0 5px;
    color: #746b82;
    font-style: normal;
}

.wl-wishlists-title {
    margin: 0 0 12px;
}

.wl-card-nudge {
    margin: 8px 0 10px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 9px;
    color: #5f586d;
    font-size: 12px;
    line-height: 1.4;
}

.wl-card-add-gift {
    display: block;
    width: 100%;
    margin: 10px 0 8px;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .wl-edit-topnav {
        align-items: stretch;
    }

    .wl-edit-topnav .wl-btn {
        width: 100%;
        text-align: center;
    }

    
.wl-gifts-progress {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 14px;
    padding: 11px 13px;
    background: var(--wl-foncart);
    border-radius: 10px;
}

.wl-gifts-progress strong {
    font-size: 14px;
}

.wl-gifts-progress span {
    color: #5f586d;
    font-size: 13px;
    line-height: 1.4;
}

.wl-gift-toolbar {
        align-items: stretch;
    }

    .wl-gift-toolbar .wl-add-gift-btn,
    .wl-gift-toolbar .wl-gift-sort,
    .wl-gift-toolbar .wl-gift-sort select,
    .wl-add-more-row .wl-add-gift-btn,
    .wl-empty-gifts .wl-add-gift-btn {
        width: 100%;
    }

    .wl-options-summary {
        grid-template-columns: 30px 1fr auto;
        gap: 10px;
        padding: 15px;
    }

    .wl-options-content {
        padding: 0 15px 15px;
    }

    .wl-dashboard-guide {
        display: grid;
        gap: 8px;
    }
}


/* ======================================================
   ФОРМА ПОДАРКА — упрощённый сценарий добавления
====================================================== */
.wl-gift-edit-intro {
    margin: 0 0 10px;
    color: #5f586d;
    font-size: 14px;
    line-height: 1.45;
}

.wl-gift-edit-context {
    margin: 0 0 20px;
    color: #1d5fa7;
    font-size: 14px;
    line-height: 1.45;
}

.wl-gift-edit-context a,
.wl-gift-edit-context a:visited {
    color: inherit;
}

.wl-gift-edit-context a:hover,
.wl-gift-edit-context a:focus {
    color: #164b84;
}

.wl-gift-edit-wishlist-title {
    margin-left: 3px;
    color: inherit;
}

.wl-gift-premium-preview {
    margin: 5px 0 14px;
    color: #6b6475;
    font-size: 13px;
    line-height: 1.4;
}

.wl-gift-premium-text {
    margin-bottom: 3px;
}

.wl-gift-premium-preview .wl-premium-note {
    display: inline-block;
    margin-top: 0;
    font-size: 12px;
    font-weight: 400;
}

.wl-gift-save-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

@media (max-width: 600px) {
    .wl-gift-save-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .wl-gift-save-actions .wl-btn {
        width: 100%;
        text-align: center;
    }
}

/* ======================================================
   УДАЛЕНИЕ ИЗОБРАЖЕНИЯ ПОДАРКА ИЗ ПРЕВЬЮ
====================================================== */
.wl-image-placeholder-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    pointer-events: none;
}
.wl-image-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #6b1f2a;
    font-size: 22px;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,.22);
}
.wl-image-preview-remove:hover,
.wl-image-preview-remove:focus {
    background: #fff;
    color: #3f0f16;
    outline: 2px solid rgba(107,31,42,.18);
}
.wl-image-preview-remove[hidden],
.wl-image-placeholder-icon[hidden] {
    display: none !important;
}