/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Кнопка добавить в корзину и подробнне о курсе '; */

/* Укажите имя автора между '' */
/* --human-author-css: 'sms'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: ""; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Кнопка добавить в корзину и подробнне о курсе в описании рубрик'; */

/* Основные стили кнопки «Добавить в корзину» */
.my-buy-button {
    display: inline-block;   /* Кнопка ведёт себя как строчный блок: 
                                не занимает всю ширину страницы, но позволяет 
                                задать отступы padding и ширину */
    text-align: left;        /* Текст внутри кнопки прижат к левому краю 
                                (не влияет на расположение иконки, она добавляется после) */
    background-color: #7C916D; /* Цвет фона кнопки (приятный приглушённый зелёный) */
    color: white;               /* Цвет текста кнопки (белый, для контраста) */
    padding: 10px 15px;         /* Внутренние отступы: сверху/снизу 10px, слева/справа 15px 
                                   Это определяет высоту и ширину кнопки */
    text-decoration: none;      /* Убирает стандартное подчёркивание у ссылки */
    border-radius: 5px;         /* Закругление уголков кнопки (5 пикселей — аккуратные скругления) */
    font-weight: bold;          /* Жирное начертание текста */
    transition: background 0.2s; /* Плавное изменение цвета фона при наведении (длительность 0.2 секунды) */
    box-shadow: 0px 0px 8px rgba(0,0,0,0.19) !important; /* Тень кнопки */
}

/* Стили кнопки при наведении курсора мыши */
.my-buy-button:hover {
    background-color: #647557;  /* Более тёмный оттенок для эффекта нажатия/наведения */
    color: white;               /* Цвет текста */
}

/* Добавляем иконку корзины ПОСЛЕ текста кнопки (псевдоэлемент) */
.my-buy-button::after {
    font-family: FontAwesome;   /* Указываем шрифт с иконками (старая версия, используется плагином member-luxe) */
    content: "\f07a";           /* Код иконки корзины (fa-shopping-cart)FontAwesome */
    margin-left: 8px;           /* Отступ слева от текста до иконки */
    display: inline-block !important; /* Принудительно делаем иконку строчно-блочным элементом,
                                         чтобы она находилась рядом с текстом, а не переносилась на новую строку.
                                         !important — на случай, если тема WordPress задаёт другое поведение для псевдоэлементов */
    vertical-align: middle;     /* Выравнивает иконку по вертикали относительно середины текста */
}


/* Стили кнопки «Подробнее о курсе» */
.my-ext-button {
    display: inline-block;      /* Кнопка-блок, не растягивается на всю ширину */
    text-align: left;           /* Текст прижат к левому краю */
    background-color: #6A829F;  /* Основной сине-серый фон */
    color: white;               /* Белый текст */
    padding: 10px 15px;         /* Внутренние отступы (как у корзины) */
    text-decoration: none;      /* Убираем подчёркивание у ссылки */
    border-radius: 5px;         /* Закругление углов */
    font-weight: bold;          /* Жирный шрифт */
    transition: background 0.2s; /* Плавное изменение фона */
    box-shadow: 0px 0px 8px rgba(0,0,0,0.19) !important; /* Та же тень */
}

/* Цвет при наведении (чуть темнее) */
.my-ext-button:hover {
    background-color: #5a6f8a;  /* Более насыщенный оттенок */
    color: white;
}

/* Иконка после текста (стрелка вправо) */
.my-ext-button::after {
    font-family: FontAwesome;   /* Шрифт с иконками (используется MemberLuxe) */
    content: "\f061";           /* Код иконки fa-arrow-right */
    margin-left: 8px;           /* Отступ от текста до иконки */
    display: inline-block !important;
    vertical-align: middle;     /* Выравнивание по вертикали */
}