/* assets/css/main.css */
/* Общая структура личного кабинета */
/* Убираем все лишнее из меню */
.woocommerce-MyAccount-navigation-link a::before {
    display: none !important;
}

.woocommerce-MyAccount-navigation ul {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation {
    background: none !important;
    border: none !important;
}

.woocommerce-MyAccount-navigation-link {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.woocommerce-MyAccount-navigation-link a {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #666666 !important;
    font-size: 14px !important;
}

.woocommerce-MyAccount-navigation-link.is-active a {
    color: #000000 !important;
    font-weight: 500 !important;
}

/* Скрываем кнопку выхода */
.woocommerce-MyAccount-navigation-link--customer-logout {
    display: none !important;
}

/* Стили для страницы лояльности */
.dionis-loyalty {
    padding: 40px;
}

.loyalty-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.loyalty-stat {
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
	color: #000;
}

.stat-label {
    color: #7a7a7a;
    font-size: 14px;
}

.loyalty-scale {
    margin-bottom: 40px;
}

.loyalty-scale h3,
.loyalty-levels h3,
.loyalty-rules h3 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}

.scale-progress {
    background: #F5F5F5;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.progress-bar {
    height: 4px;
    background: #E0E0E0;
    margin-bottom: 10px;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.3s ease;
}

.progress-level {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}


.loyalty-levels {
    margin-bottom: 40px;
}

.levels-grid {
    background: #F5F5F5;
    padding: 20px;
    border-radius: 4px;
}

.level-row {
    display: grid;
    grid-template-columns: 60px repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 15px;
    align-items: center;
    font-size: 14px;
}

.level-row:last-child {
    margin-bottom: 0;
}

.level-amount {
    text-align: center;
}

.level-cashback {
    text-align: center;
    color: #666;
}

.level-cashback.active {
    color: #4CAF50;
    font-weight: 500;
}

.loyalty-rules p {
    color: #666;
    font-size: 14px;
}

/* Orders page styles */
.order-block {
    background: #FFFFFF;
    border-bottom: 1px solid #E6E6E6;
    
   
}

.order-details {
    padding: 20px;
    
}

.order-info-row {
    display: grid;
    grid-template-columns: 1fr; /* Один столбец */
    gap: 0px; /* Отступ между строками */
    font-size: 14px;
    color: #666666;
}

.order-info-row .value {
    color: #362F28; /* Цвет для значений */

}

.order-products {
    padding: 0 0 20px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1px;
}

.product-card {
    background: #F2F2F2;
    border-radius: 0px;
    padding: 15px;
    position: relative;
}

.product-status {
    position: absolute;
    top: 15px;
    left: 13px;
    background: #FFF;
    color: #362F28;
    padding: 4px 8px;
    border-radius: 0px;
    font-size: 10px;
    text-transform: uppercase;
	font-weight: 600;
	line-height: 1em;
}

.product-image {
    
    text-align: center;
    aspect-ratio: 3 / 4; /* Устанавливаем соотношение сторон 3:4 */
    width: 100%; /* Контейнер занимает всю ширину родителя */
    display: grid; /* Используем grid для центрирования */
    place-items: center; /* Центрируем изображение по вертикали и горизонтали */
    overflow: hidden; /* Прячем выходящее за рамки содержимое */
    
}

.product-image img {
    max-width: 100%; /* Изображение не будет выходить за пределы контейнера по ширине */
    max-height: 100%; /* Изображение не будет выходить за пределы контейнера по высоте */
    object-fit: contain; /* Изображение сохраняет пропорции и полностью помещается в контейнер */
}

.product-info {
    
}


.product-header {
    display: inline-flex; /* Располагаем элементы в одной строке */
    gap: 10px; /* Отступ между названием и ценой */
    align-items: flex-start; /* Выравниваем элементы по верхнему краю */
    justify-content: flex-start; /* Располагаем все элементы слева */
}
.product-name {
    font-weight: 400;
   
	font-size: 14px;
}

.product-size {
    color: #666666;
    font-size: 14px;
    margin-bottom: 8px;
}

.product-price {
    font-weight: bold;
    color: #000000;
}

/* Status colors */
.product-status.processing {
    background: #E3F2FD;
    color: #1565C0;
}

.product-status.completed {
    background: #E8F5E9;
    color: #2E7D32;
}

.product-status.в-обработке {
    background: #FFF3CD;
    color: #856404;
}

/* Responsive styles */
@media (max-width: 768px) {
    .order-info-row {
        grid-template-columns: 1fr;
    }
    
    .order-products {
        grid-template-columns: repeat(2, 1fr); /* Два элемента в ряду */
    }
    
    .woocommerce-MyAccount-navigation {
        border-right: 0;
        border-bottom: 1px solid #e3e3e3;
        padding-right: 0;
        padding-bottom: 20px;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-overlay::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* Общие стили для страницы лояльности */
/* Базовый контейнер */
.account-content-wrapper {
    margin-top: 52px !important;
    margin-left: 103px !important;
    width: 664px !important;
    position: relative;
}

/* Статистика */
.loyalty-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 48px;
    position: relative;
}





.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
}

.stat-label {
    color: #666666;
    font-size: 14px;
}

/* Разделительная линия после статистики */
.loyalty-divider {
    position: absolute;
    left: -103px;
    right: -100vw;
    height: 1px;
    background: #e3e3e3;
}

/* Секции */
.loyalty-section {
    margin-top: 20px;
	padding-top: 52px;
	
}

.loyalty-section h3 {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0px;
	line-height: 1em;
}

/* Шкала успеха */
.progress-bar {
    height: 40px;
    border-radius: 90px;
    background: #FFF;
    border: 2px solid #F5F5F5; /* Задаём толщину, стиль и цвет бордера */
    position: relative;
    margin: 20px 0 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(156, 71, 33, 0) 0%, #c84308 100%);
    position: absolute;
    left: 0;
    top: 0;
}

.progress-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 0px 0px;
    z-index: 2;
    font-weight: 600;
    font-size: 10px;
}

.current-level {
    color: #000;
    border-radius: 54px;
    padding: 8px 12px;
    background: #fff;
}

.total-spent {
    color: #fff;
    font-size: 12px !important;
}

.next-level {
    color: #7a7a7a;
    border-radius: 54px;
    padding: 8px 12px;
    background: #fff;
}

.progress-message {
    font-size: 14px;
    color: #000;
    margin-top: 8px;
}

/* Все уровни */
.levels-container {
    margin-top: 20px;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
    position: relative;
    height: 138px;
}

/* Заголовок "Сумма" */
.label-title.sum-title {
    position: absolute;
    left: 32px;
    top: 24px;
    color: #666;
    font-size: 14px;
	line-height: 1em;
}

/* Значения сумм */
.amounts {
    position: absolute;
    left: 122px;
    right: 60px;
    top: 24px;
    display: flex;
    justify-content: space-between;
}

.amounts span {
    flex: 0 0 auto;
    font-size: 14px;
    position: absolute;
    transform: translateX(-50%);
	white-space: nowrap; /* Предотвращаем перенос текста */
	font-weight: 500;
}

.amounts span:nth-child(1) {
    left: 0%;
}

.amounts span:nth-child(2) {
    left: 50%;
}

.amounts span:nth-child(3) {
    left: 100%;
}

/* Линия с точками */
.level-dots {
    position: absolute;
    left: 122px;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    display: flex;
    align-items: center;
}

.level-dots .line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #f2f2f2;
    z-index: 1;
}

.dot {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f2f2f2;
    color: #7a7a7a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
	font-weight: 600;
    z-index: 2;
    transform: translateX(-50%);
}

.dot:nth-child(2) {
    left: 0%;
}

.dot:nth-child(3) {
    left: 50%;
}

.dot:nth-child(4) {
    left: 100%;
}

.dot.active {
    background: #c84308;
	color: #fff;
}

.account-content-wrapper {
    padding-bottom: 70px;
}

/* Заголовок "Кэшбек" */
.label-title.cashback-title {
    position: absolute;
    left: 32px;
    top: 94px;
    color: #666;
    font-size: 14px;
}

/* Значения кэшбека */
.cashbacks {
    position: absolute;
    left: 122px;
    right: 60px;
    top: 94px;
    display: flex;
    justify-content: space-between;
	font-weight: 500;
}

.cashbacks span {
    flex: 0 0 auto;
    font-size: 14px;
    position: absolute;
    transform: translateX(-50%);
}

.cashbacks span:nth-child(1) {
    left: 0%;
}

.cashbacks span:nth-child(2) {
    left: 50%;
}

.cashbacks span:nth-child(3) {
    left: 100%;
}

/* Активные значения */
.amounts span.active,
.cashbacks span.active {
    font-weight: 700;
    color: #000;
}

/* Списание баллов */
.loyalty-section:last-child {
    margin-top: 20px;
}

.bonus-rules {
    font-size: 14px;
    color: #000;
    margin-top: 10px;
	font-weight: 500;
}

#password_1 {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .loyalty-stats {
       margin-top: 48px;
    }
	
	.loyalty-stats {
    display: flex;
    justify-content: space-between; /* Равномерное распределение элементов с отступами */
    margin-bottom: 0px;
    position: relative;
	gap: 0px;
}

	.loyalty-stats > * {
    flex: 1; /* Элементы растягиваются равномерно */
    margin: 0 auto; /* Горизонтальные отступы между элементами */
}

	/* Убираем внешние отступы для крайних элементов */
	.loyalty-stats > *:first-child {
    margin-left: 0;
}

	.loyalty-stats > *:last-child {
    margin-right: 0;
}
	.stat-value {
	font-size: 20px;
}
	.stat-label {
	font-size: 14px;
}
	
	.label-title.sum-title {
    
    left: 22px;
    top: 24px;
    
}
    .label-title.cashback-title {
    
    left: 22px;
    top: 94px;
    
}
	.dionis-edit-account-form {
		margin-bottom: 20px;
	}
}




.custom-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    height: 100%; /* Настройте под нужную высоту */
    line-height: 1.5;
    color: #000 !important; /* Черный цвет текста по умолчанию */
	padding-top: 270px;
}

@media (max-width: 768px) {
    .custom-block {
        padding: 0 0 100px 0 !important;
		height: 60vh !important;
    }
}

.empty-text1 {
    margin-bottom: 16px;
    color: #000 !important; /* Черный цвет текста */
    text-align: center !important; /* Дополнительное выравнивание по центру */
    width: 100%; /* Чтобы текст не был ограничен */
}

.custom-block .catalog-button {
    display: inline-block;
    background-color: #007bff; /* Основной цвет кнопки */
    color: #fff;
    border: none;
    width: 370px; /* Ширина кнопки */
    height: 52px; /* Высота кнопки */
    line-height: 52px; /* Вертикальное выравнивание текста внутри кнопки */
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-radius: 4px; /* Закругление углов */
    text-decoration: none;
}

.custom-block .catalog-button:hover {
    background-color: #0056b3; /* Цвет кнопки при наведении */
}