/* Star rating widget for comments */
.star-rating-widget {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.2em;
}
.star-rating-widget input[type="radio"] {
    display: none;
}
.star-rating-widget .star-label {
    cursor: pointer;
    font-size: 1.5em;
    color: #ccc;
    margin: 0;
    padding: 0 2px;
    transition: color 0.2s;
}
.star-rating-widget .star-label .star-icon {
    pointer-events: none;
}
.star-rating-widget input[type="radio"]:checked ~ .star-label .star-icon,
.star-rating-widget input[type="radio"]:checked + .star-label .star-icon {
    color: #ffc107;
}
.star-rating-widget .star-label:hover ~ .star-label .star-icon,
.star-rating-widget .star-label:hover .star-icon {
    color: #ffc107;
}
.comment-rating .star-icon {
    font-size: 1.1em;
    vertical-align: middle;
}
/* static/css/custom_styles.css */

:root {
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;

    --color-bg: #F8F9FA; /* Основной фон страницы */
    --color-surface: #ffffff; /* Фон для карточек, шапки */
    --color-surface-alt: #FAF7F0;
    --color-primary: #2E7D32; /* Основной зеленый */
    --color-primary-rgb: 46, 125, 50; /* RGB для основного зеленого */
    --color-primary-dark: #1B5E20; /* Темный зеленый для акцентов */
    --color-primary-light: #4CAF50; /* Светлый зеленый для акцентов/hover */
    --color-text-dark: #333333; /* Основной текст */
    --color-text-medium: #555555; /* Второстепенный текст */
    --color-text-light: #777777; /* Светлый текст (для meta, etc.) */
    --color-border: #bdbdbd; /* Цвет границ */

    --border-radius-sm: 0.25rem; /* Bootstrap .rounded-1 */
    --border-radius-md: 0.375rem; /* Bootstrap .rounded-2 */
    --border-radius-lg: 0.5rem;  /* Bootstrap .rounded-3 */

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 10px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
}

/* Utilities */
.ws-nowrap { white-space: nowrap; }
.avatar-30 { width:30px; height:30px; object-fit:cover; }
.avatar-50 { width:50px !important; height:50px !important; object-fit:cover; border-radius:50%; display:inline-block; }
.search-form-narrow { max-width: 400px; min-width: 200px; }
.d-none { display:none !important; }

/* Fix: dark mode dropdown first item white flash */
:root.dark-mode .dropdown-menu .dropdown-item,
:root.dark-mode .dropdown-menu .dropdown-item:first-child {
    background-color: transparent !important;
    color: #ffffff !important;
}
:root.dark-mode .dropdown-menu .dropdown-item:hover,
:root.dark-mode .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--color-primary, #4CAF50) !important;
}

/* static/css/custom_styles.css */

body {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    line-height: 1.6;
    background-color: var(--color-bg); /* Наш основной светло-серый фон #F8F9FA */

    /* Паттерн из ЕДВА ЗАМЕТНЫХ диагональных линий */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 15px, /* Ширина прозрачной полосы - увеличена для большей разреженности */
        rgba(224, 224, 224, 0.2) 15px, /* Цвет линии: наш --color-border (#E0E0E0) с прозрачностью 0.2 (20%) */
        rgba(224, 224, 224, 0.2) 16px  /* Толщина линии: 1px (16px - 15px) */
    );
    /* Если хочешь, чтобы фон не двигался при прокрутке: */
    /* background-attachment: fixed; */
}

/* Light mode: make page background a touch darker for better glass contrast */
html:not(.dark-mode) body {
    /* Slightly darker than #F8F9FA for clearer outlines */
    background-color: #F2F3F5 !important;
    /* Make the diagonal pattern a hair more visible, still subtle */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 14px,
        rgba(210, 210, 210, 0.25) 14px,
        rgba(210, 210, 210, 0.25) 15px
    );
}

/* Sticky header: keep navbar attached to the top without extra spacing */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1200; /* keep header and its dropdowns above page content */
}
/* When a modal is open, let it sit on top of the header */
body.modal-open .site-header { z-index: 0; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 500; /* Montserrat medium */
    color: var(--color-text-dark);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h1 { font-size: 2.25rem; } /* ~36px */
h2 { font-size: 1.875rem; } /* ~30px */
h3 { font-size: 1.5rem; }   /* ~24px */

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--color-primary-light);
    text-decoration: none; /* Bootstrap убирает по умолчанию, но лучше явно указать */
}

.navbar { /* Базовая шапка на светлой теме */
    background-color: var(--color-surface) !important; /* Переопределяем bg-light */
    box-shadow: var(--shadow-sm);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Если navbar получает стеклянный класс, не перекрываем его сплошным фоном */
.navbar.glass-visible { background-color: transparent !important; }

@media (prefers-color-scheme: dark) {
    /* Темная тема: базовый — тёмный фон, стеклянный — прозрачен */
    .navbar { background-color: #111 !important; }
    .navbar.glass-visible { background-color: transparent !important; }
    /* Усилим читаемость для стеклянной шапки на тёмном фоне */
    .navbar.glass-visible {
        -webkit-backdrop-filter: saturate(150%) blur(12px) brightness(1.10) contrast(1.02);
        backdrop-filter: saturate(150%) blur(12px) brightness(1.10) contrast(1.02);
        border: 1px solid transparent; /* показать градиентную окантовку из .glass-visible */
    }
}

.navbar-brand {
    font-family: var(--font-secondary);
    font-weight: 700; /* Bold Montserrat */
    font-size: 1.75rem;
    color: var(--color-primary) !important;
}
.navbar-brand:hover {
    color: var(--color-primary-light) !important;
}

.nav-link {
    font-family: var(--font-primary);
    font-weight: 500; /* Medium Roboto */
    color: var(--color-text-medium) !important;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem 0.75rem !important; /* Немного кастомизируем отступы */
    border-bottom: 2px solid transparent; /* Для будущего hover эффекта */
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.nav-link:hover,
.nav-link.active { /* Для активной ссылки (если есть такой класс) */
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary);
}

/* Кнопка поиска */
.navbar .form-control { /* Обращение к input поиска внутри navbar */
    border-radius: var(--border-radius-md);
    border-color: var(--color-border);
}
.navbar .btn-outline-success { /* Кнопка поиска */
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--border-radius-md);
    font-weight: 500;
}
.navbar .btn-outline-success:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* Стили для выпадающего меню пользователя */
.navbar .dropdown-menu {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border);
    z-index: 1050; /* above page content/filters, below modal (1055) */
}

/* Prevent navbar glass edge overlay from sitting above dropdowns */
.navbar.glass-edge-refraction{ position: relative; isolation: isolate; }
.navbar.glass-edge-refraction::after{ z-index: 0; }
.navbar .dropdown-menu{ position: absolute; z-index: 1050; }
.navbar .dropdown-item {
    font-weight: 500;
}
.navbar .dropdown-item:hover {
    background-color: var(--color-bg);
    color: var(--color-primary);
}

/* Счетчик корзины */
#cart-link {
    font-weight: 500;
}
#cart-count {
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: 0.15em 0.4em;
    border-radius: 50%;
    font-size: 0.8em;
    position: relative;
    top: -2px;
    left: 2px;
}


footer.bg-light {
    background-color: var(--color-surface-alt) !important;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-medium);
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

footer p {
    margin-bottom: 0;
    font-size: 0.9rem;
}


.comment-rating .rating-star {
    text-decoration: none;
    cursor: pointer;
}

/* Prevent image modal from immediately re-opening when clicking backdrop/close (click passes through) */
body.modal-open .comment-image-container {
    pointer-events: none;
}

/* Stabilize modal image painting to avoid flicker on mouse move */
.modal .modal-body .zoom-image {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: opacity;
}
/* Button Styles */
.btn {
    font-family: var(--font-secondary); /* Montserrat для кнопок */
    font-weight: 500;
    padding: 0.65rem 1.25rem; /* Немного увеличим паддинги для "воздуха" */
    border-radius: var(--border-radius-md);
    transition: all 0.25s ease-in-out;
    box-shadow: var(--shadow-sm);
    border-width: 1px; /* Убедимся, что у всех кнопок есть рамка */
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0px); /* Возвращаем на место при нажатии */
    box-shadow: var(--shadow-sm);
}

/* Palette alignment: override Bootstrap utility colors to site palette */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.text-info { color: var(--color-primary-light) !important; }
.bg-info { background-color: var(--color-primary-light) !important; }
.border-info { border-color: var(--color-primary-light) !important; }

/* Buttons using info variant align to green palette */
.btn-info {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
.btn-info:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}
.btn-info:active { background-color: var(--color-primary) !important; }

/* Remove default blue focus rings; use green, consistent and accessible */
.btn:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn:active:focus,
.btn-close:focus,
a.btn:focus,
button:focus,
button:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.35) !important;
}

/* Outline variants mapped to brand palette */
.btn-outline-primary,
.btn-outline-info {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-info:hover {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-outline-primary:active,
.btn-outline-info:active {
    color: #fff !important;
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Primary link utility color */
.link-primary { color: var(--color-primary) !important; }
.link-primary:hover { color: var(--color-primary-dark) !important; }

/* Badge info mapped to palette */
.badge-info { background-color: var(--color-primary-light) !important; }

/* Form controls and checks focus already use primary; ensure checkboxes/radios too */
.form-check-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25) !important;
}
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Pagination focus */
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25) !important;
    border-color: var(--color-primary) !important;
}

/* A11y: clear focus for common interactive elements */
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.35) !important;
    border-color: var(--color-primary) !important;
}

/* Make the whole card appear focused when its stretched-link gets focus */
.card:has(.stretched-link:focus-visible),
.subscription-box-card:has(.stretched-link:focus-visible) {
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25), var(--shadow-lg) !important;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    /* Reduce motion for hover/focus effects */
    * {
        scroll-behavior: auto !important;
    }
    .card,
    .subscription-box-card,
    .btn,
    .theme-toggle-btn {
        transition: none !important;
    }
    .card:hover,
    .subscription-box-card:hover {
        transform: none !important;
    }
}

/* Product/Eco-box cards improvements */
.product-card .card-title a,
.subscription-box-card .card-title a {
    display: -webkit-box;
    line-clamp: 2; /* standard property */
    -webkit-line-clamp: 2; /* clamp to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.stretched-link { position: relative; z-index: 1; }
.stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Card title link interactivity and accessibility */
.card .card-title a {
    cursor: pointer;
    transition: color 0.15s ease, text-decoration-color 0.2s ease;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
.card .card-title a:hover,
.card .card-title a:focus {
    color: var(--color-primary) !important;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
}
.card .card-title a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Alert info palette remap */
/* Profile Update: hide file input off-screen but keep it focusable via label click */
.avatar-field .js-avatar-input {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}
.alert-info {
    background-color: rgba(var(--color-primary-rgb), 0.10) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-dark) !important;
}
.alert-info .alert-link,
.alert-info a { color: var(--color-primary) !important; }

/* Product card common styles */
.product-card { border-color: var(--color-border); }
.product-card .card-img-top { height: 200px; object-fit: cover; }
.product-card .card-title a { color: var(--color-text-dark); }
.dark-mode .product-card .card-title a { color: var(--color-text-dark); }
.product-card .price { color: var(--color-primary); font-size: 1.05rem; }
.product-card .product-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.product-card .add-to-cart-btn { white-space: nowrap; }
.product-card .add-to-cart-btn i { margin-right: .25rem; }

/* Subscription box card styles */
.subscription-box-card { cursor: pointer; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.subscription-box-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg) !important; }
.subscription-box-card .form-check-input:checked + .form-check-label {
    background-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    font-weight: bold;
}
.subscription-box-card .form-check-label { transition: background-color 0.2s ease, color 0.2s ease; }

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-surface);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:focus-visible {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-surface) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-secondary { /* Если используешь .btn-secondary */
    background-color: var(--color-text-medium);
    border-color: var(--color-text-medium);
    color: var(--color-surface);
}
.btn-secondary:hover {
    background-color: var(--color-text-dark);
    border-color: var(--color-text-dark);
/* --- Anti-flicker: temporarily disable transitions/animations on tab activation --- */
html.suspend-transitions *,
html.suspend-transitions *::before,
html.suspend-transitions *::after {
    transition: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    /* Respect users who prefer less motion */
    .animate-pop,
    .is-removing {
        transition: none !important;
        animation: none !important;
    }
}
    color: var(--color-surface);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.btn-lg { /* Для больших кнопок, если нужны */
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
}


.list-group-item {
    font-family: var(--font-primary);
    font-weight: 500; /* Medium Roboto */
    color: var(--color-text-medium);
    border-color: var(--color-border);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    /* Во избежание мерцаний на переключениях вкладок и тем отключаем плавные переходы */
    transition: none;
    border-left: 3px solid transparent; /* Для активного состояния */
}

.list-group-item:first-child {
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
}
.list-group-item:last-child {
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--color-primary);
    /* избегаем смены фона, чтобы не было блика при возврате во вкладку */
    border-left-color: var(--color-primary-light);
}

.list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
    border-left-color: var(--color-primary); /* Яркая левая граница для активного элемента */
}
.list-group-item.active:hover {
    background-color: var(--color-primary); /* Чтобы не менялся цвет при наведении на активный */
    color: var(--color-surface);
}



.card {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background-color: var(--color-surface-alt);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    box-shadow: var(--shadow-lg); /* Увеличенная тень при наведении */
    transform: translateY(-6px); /* Поднимаем карточку немного выше */
}

.card-img-top {
    border-top-left-radius: var(--border-radius-lg); /* Синхронизируем скругление с карточкой */
    border-top-right-radius: var(--border-radius-lg);
    /* object-fit: cover; - у тебя уже есть в product_list.html, это хорошо */
    /* height: 200px; - у тебя уже есть, можно оставить или сделать адаптивным */
    max-height: 220px; /* Или другое значение */
    object-fit: cover; /* Гарантирует, что изображение покроет область без искажений */
}

/* Subscription Boxes: keep full image visible without cropping */
.subscription-box-card .subscription-box-img {
    height: 220px;
    width: 100%;
    object-fit: contain; /* show full image */
    background-color: #f7f7f7; /* neutral backdrop */
}

.subscription-box-detail-img {
    width: 100%;
    height: 100%;
    max-height: 480px; /* prevent huge vertical stretch on tall images */
    object-fit: contain; /* show full image */
    background-color: #111; /* subtle dark backdrop like challenge hero */
}

/* Challenge detail hero image: keep aspect ratio, avoid excessive cropping */
.challenge-detail-card .challenge-hero-img {
    display: block;
    width: 100%;
    max-height: 400px;
    object-fit: contain; /* show full image without distortion */
    background-color: #111; /* subtle backdrop in dark sections */
}

.card-body {
    padding: 1.25rem; /* Стандартный паддинг Bootstrap, можно немного увеличить */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Чтобы card-body занимал доступное пространство, если карточка выровнена по высоте */
}

.card-title {
    font-family: var(--font-secondary); /* Montserrat */
    font-size: 1.15rem; /* Немного больше, чем h5 по умолчанию */
    font-weight: 700; /* Bold */
    margin-bottom: 0.75rem;
}

.card-title a {
    color: var(--color-text-dark);
    text-decoration: none;
}
.card-title a:hover {
    color: var(--color-primary);
}

.card-text { /* Для цены или краткого описания */
    font-family: var(--font-primary);
    color: var(--color-text-medium);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.card-text strong { /* Для цены, если она внутри .card-text */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-dark); /* Или var(--color-primary) для акцента */
}

/* Кнопка "Dodaj do koszyka" внутри карточки */
.card .btn {
    margin-top: auto; /* Прижимает кнопку к низу карточки, если card-body это flex-column */
    font-weight: 500; /* Немного выделим */
    padding: 0.5rem 1rem; /* Можно сделать чуть меньше, чем основные кнопки */
    font-size: 0.9rem;
}

/* Cart Link Animation in Header */
header .navbar #cart-link { /* Селектор из предыдущих шагов */
    /* ... существующие стили для #cart-link ... */
    position: relative; /* Для позиционирования эффектов, если понадобятся */
    transition: transform 0.2s ease-out; /* Плавный переход для transform */
    will-change: transform; /* Подсказка браузеру для сглаживания */
}

header .navbar #cart-count { /* Селектор из предыдущих шагов */
    /* ... существующие стили для #cart-count ... */
    transition: transform 0.18s ease-out; /* Только transform — избегаем мерцания фона */
    will-change: transform; /* Оптимизация компоновки */
    backface-visibility: hidden; /* Убирает артефакты при масштабировании */
    /* transform-origin: center; */ /* Если будем использовать scale */
}

/* Класс для анимации увеличения */
header .navbar #cart-link.animate-pop #cart-count {
    transform: scale(1.12); /* Более мягкое увеличение без смены фона */
}

/* Add to Cart Button Success Animation */
.add-to-cart-btn.is-success {
    background-color: var(--color-primary-light) !important; /* Или другой цвет успеха, например, более светлый зеленый */
    /* border-color: var(--color-primary-light) !important; */
    /* color: var(--color-surface) !important; */
    /* Можно добавить иконку галочки через ::after или заменить текст */
    position: relative; /* Если будем добавлять псевдоэлементы */
}

.add-to-cart-btn.is-success .bi-cart-plus::before { /* Если у тебя иконка внутри кнопки */
    content: "\f26a"; /* Bootstrap Icon "check-circle-fill" или "check-lg" (\f28a) */
    /* Убедись, что исходная иконка скрыта или заменена */
}

.django-messages .alert {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    margin-bottom: 1rem; /* Добавим отступ, если несколько сообщений */
}

.django-messages .alert.show { /* Bootstrap добавляет .show для видимости */
    opacity: 1;
    transform: translateY(0);
}

/* Для плавного исчезновения при закрытии (Bootstrap это тоже должен делать) */
.django-messages .alert:not(.show) { /* Когда класс .show удаляется */
    opacity: 0;
    /* transform: translateY(-20px); // можно убрать, чтобы просто исчезало */
}

/* Enhanced Link Hovers */
p a, li a { /* Ссылки внутри параграфов или элементов списка */
    position: relative; /* Для позиционирования псевдоэлемента */
    /* color: var(--color-primary); - уже определено глобально */
    /* text-decoration: none; - уже определено глобально */
}

p a::after, li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 0px; /* Немного ниже текста */
    right: 0;
    background: var(--color-primary-light);
    transition: width 0.3s ease, left 0.3s ease; /* Плавное появление */
}

p a:hover::after, li a:hover::after {
    width: 100%;
    left: 0;
    /* background: var(--color-primary-light); // цвет уже задан */
}

/* Убедимся, что для ссылок в навигации или кнопок этот эффект не применяется, если не нужно */
.nav-link::after, .btn::after {
    display: none !important;
}

/* Cart Item Removal Animation */
.cart-item { /* Класс для строки <tr> в таблице корзины */
    transition: opacity 0.4s ease-out, max-height 0.4s ease-out, padding 0.4s ease-out, border 0.4s ease-out;
    overflow: hidden; /* Важно, чтобы max-height работало как ожидается */
    display: table-row; /* Убедимся, что это строка таблицы */
}

.cart-item.is-removing {
    opacity: 0;
    max-height: 0 !important; /* Устанавливаем максимальную высоту в 0, чтобы строка "схлопнулась" */
    /* Убираем padding и border, чтобы они не мешали схлопыванию */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

/* Для ячеек внутри удаляемой строки, чтобы их содержимое тоже плавно исчезало */
.cart-item.is-removing td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Можно также анимировать opacity для содержимого ячеек, если нужно */
    /*opacity: 0; 
    transition: opacity 0.2s ease-out;*/
}

/* Form Styles */
.form-control,
.form-select { /* Для выпадающих списков, если будут */
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    width: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: 0.65rem 1rem; /* Сделаем чуть выше стандартных */
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: block;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25); /* Используем цвет из переменной, если она есть для RGB */
    /* Если нет --color-primary-rgb, можно явно указать: */
    /* box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25); */ /* Пример RGB для #2E7D32 */
    background-color: var(--color-surface); /* Убедимся, что фон не меняется на системный */
    color: var(--color-text-dark);
    outline: 0;
}

/* Для placeholder'ов */
.form-control::placeholder {
    color: var(--color-text-light);
    opacity: 1; /* Firefox по умолчанию ставит opacity меньше 1 */
}

.form-label {
    display: block; /* Занимает всю ширину, следующее поле будет под ней */
    text-align: left; /* Явно выравниваем по левому краю */
    margin-bottom: 0.35rem; /* Небольшой отступ под меткой */
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-text-medium);
    font-size: 0.9rem;
}

/* Стилизация сообщений об ошибках Bootstrap */
.invalid-feedback {
    font-family: var(--font-primary);
    font-size: 0.875em;
    /* цвет ошибки Bootstrap (.text-danger) обычно достаточно хорош */
}
.is-invalid { /* Для поля с ошибкой */
    border-color: #dc3545 !important; /* Стандартный цвет ошибки Bootstrap */
}
.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Стили для сообщений об общих ошибках формы (non-field errors) */
.alert-danger ul { /* Если ошибки выводятся списком внутри .alert-danger */
    padding-left: 1.5rem;
    margin-bottom: 0;
}
textarea.form-control {
    min-height: 100px;
}
.registration-page .card .card-body { /* Пример, если добавишь класс .registration-page к body или main */
     padding: 2rem; /* Больше отступов */
}

/* Заголовки внутри карточек с формами */
.card .card-title.text-center { /* Для заголовков типа "Utwórz konto", "Logowanie" */
    font-family: var(--font-secondary);
    font-weight: 700; /* Bold */
    font-size: 1.75rem; /* Чуть больше */
    color: var(--color-text-dark);
    margin-bottom: 1.5rem; /* Больше отступ снизу */
}

.card .card-body p.text-center.text-muted { /* Для подзаголовков типа "Proszę wypełnić formularz..." */
    font-size: 0.95rem;
    margin-bottom: 2rem !important; /* Больше отступ снизу */
}

/* Ссылки под формой (типа "Masz już konto? Zaloguj się") */
.card .card-body p.mt-4.text-center a {
    font-weight: 500; /* Сделаем чуть жирнее */
    /* color: var(--color-primary); - уже должно наследоваться */
}



/* Blog Comment Form Styles */
.comment-form textarea.form-control { /* Обращение к textarea в форме комментариев */
    min-height: 100px; /* Минимальная высота */
}

.comments-section .comment-form {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: var(--color-surface); /* Белый фон для формы */
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}
.comments-section .comment-form h3 { /* Заголовок "Leave a comment" */
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

/* Horizontal Rule (HR) Styles */
hr {
    border: none; /* Убираем стандартную рамку */
    height: 1px; /* Толщина линии */
    background-color: var(--color-border); /* Используем наш цвет для границ (#E0E0E0) */
    margin-top: 2rem; /* Отступы сверху и снизу */
    margin-bottom: 2rem;
}

.hr-eco {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-primary), rgba(0, 0, 0, 0));
    text-align: center;
    overflow: visible;
    margin: 2rem 0;
}

.hr-eco::after {
    content: '🌿';
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.2em;
    padding: 0 0.5em;
    background: var(--color-bg);
}



/* Product Stock Status Styles */
.stock-info {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius-sm);
    display: inline-block; /* Чтобы padding и border-radius работали корректно */
    margin-top: 0.5rem;
}

.stock-available {
    color: var(--color-primary); /* Зеленый */
    background-color: rgba(var(--color-primary-rgb), 0.1); /* Слегка зеленый фон (требует --color-primary-rgb) */
    /* Или фиксированный цвет: background-color: #e8f5e9; */
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    /* Или: border: 1px solid #a5d6a7; */
}
.stock-available .bi { /* Если добавим иконку */
    margin-right: 0.3em;
}

.stock-low {
    color: #E65100; /* Оранжевый для предупреждения */
    background-color: #FFF3E0; /* Светло-оранжевый фон */
    border: 1px solid #FFCC80;
}
.stock-low .bi {
    margin-right: 0.3em;
}

.stock-out { /* Для "Brak produktu" */
    /* Bootstrap .alert-warning уже неплох, но можно кастомизировать */
    /* Например, сделать его менее громоздким, если это не .alert */
    color: #B71C1C; /* Темно-красный */
    background-color: #FFEBEE; /* Очень светло-красный фон */
    border: 1px solid #FFCDD2;
}
.stock-out .bi {
    margin-right: 0.3em;
}

@media (max-width: 575.98px) {
    h1 {
        font-size: 1.75rem; /* Уменьшаем самый большой заголовок */
    }
    .card-title {
        font-size: 1.05rem; /* Уменьшаем заголовки карточек */
    }
    .display-5 { /* Цена на странице товара */
        font-size: 2rem; /* Уменьшаем display-5 */
    }
    .navbar .form-control,
    .navbar .btn-outline-success { /* Поиск в шапке */
        font-size: 0.85rem; /* Уменьшаем шрифт для элементов поиска */
    }
    /* Если нужно скрыть поиск в шапке на очень маленьких экранах (но Bootstrap бургер обычно скрывает форму поиска сам, если она часть .navbar-collapse) */
    /*
    .navbar form.d-flex {
        display: none !important;
    }
    */
}

/* Стили для планшетов (например, меньше 992px - Bootstrap breakpoint 'lg', когда шапка переходит в мобильный вид) */
@media (max-width: 991.98px) {
    /* Например, если сайдбар с категориями занимает слишком много места */
    /* aside.col-lg-3 {
        margin-bottom: 1.5rem; // Уменьшить отступ или изменить ширину
    } */
}

/* Homepage Specific Styles */

/* Hero Section */
.hero-section .display-4 { /* Заголовок в Hero */
    /* color: var(--color-primary); -- можно сделать зеленым или оставить как есть (text-success) */
    font-weight: 700; /* Убедимся, что он жирный */
}
.hero-section .lead {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
}

/* Features Section */
.feature-item {
    background-color: var(--color-surface); /* Белый фон для контраста с основным фоном страницы */
    /* transition для hover эффекта, если нужен */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.feature-item i.display-3 { /* Иконки преимуществ */
    font-size: 3rem !important; /* Убедимся, что размер display-3 применился */
    color: var(--color-primary); /* Основной зеленый цвет */
}
.feature-item h4 {
    margin-top: 1rem;
    font-family: var(--font-secondary);
    font-weight: 700;
}

/* Popular Categories Section */
.category-card {
    background-color: var(--color-surface-alt); /* Наш бежевый фон */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.category-card .card-title {
    color: var(--color-text-dark);
    font-weight: 500; /* Medium */
}
.category-card .card-title:hover {
    color: var(--color-primary);
}
/* Если будешь добавлять изображения в карточки категорий: */
.category-card .card-img-top {
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
    height: 150px; /* Пример высоты */
    object-fit: cover;
}


/* Blog Post Preview on Homepage */
.blog-post-preview { /* Это .card, так что наследует стили .card */
    background-color: var(--color-surface-alt);
}
.blog-post-preview .card-title {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}
.blog-post-preview .card-text.text-muted small {
    font-size: 0.85em;
}

.border-bottom-dashed {
    border-bottom: 1px dashed var(--color-border) !important; /* Пунктирная линия */
    padding-bottom: 1rem !important; /* Увеличим отступ снизу, если есть разделитель */
}
.border-bottom-dashed:last-child {
    border-bottom: none !important; /* У последнего комментария убираем линию */
}

/* Subscription Box List Styles */
.subscription-box-card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Наследует стили .card, так что фон уже var(--color-surface-alt) */
}
.subscription-box-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg) !important; /* Используем более заметную тень */
}
/* Стилизация кнопки выбора внутри карточки подписки */
.subscription-box-card .form-check-label.btn { /* Более специфичный селектор */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.subscription-box-card .form-check-input:checked + .form-check-label.btn {
    background-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    font-weight: bold;
    box-shadow: none; /* Убираем тень у активной кнопки, чтобы она не "прыгала" */
}


/* Header Search Form Styles */
header .navbar form.d-flex input.form-control {
    /* Зададим максимальную ширину для поля поиска */
    max-width: 180px; /* Поэкспериментируй с этим значением (например, 150px, 200px) */
    /* Можно также уменьшить его padding, если он слишком большой, но это может повлиять на высоту */
    /* padding-top: 0.375rem; */
    /* padding-bottom: 0.375rem; */
    /* font-size: 0.9rem; */ /* Можно и шрифт чуть уменьшить */
    transition: max-width 0.3s ease-in-out; /* Плавный переход при фокусе, если будем увеличивать */
}

/* Опционально: увеличивать поле поиска при фокусе */
header .navbar form.d-flex input.form-control:focus {
    max-width: 250px; /* Увеличивается при клике/фокусе */
}

/* Можно немного уменьшить кнопку поиска, если нужно еще место */
header .navbar form.d-flex button.btn-outline-success {
    padding: 0.375rem 0.6rem; /* Уменьшаем паддинги кнопки */
    font-size: 0.9rem; /* Уменьшаем шрифт кнопки */
}

/* --- Зеленая пагинация --- */
.pagination .page-link {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: #fff;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
}
.pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
}
.pagination .page-item.disabled .page-link {
    color: var(--color-border);
    background-color: #fff;
    border-color: var(--color-border);
}
/* --- конец --- */

/* Mobile Navigation Improvements */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        padding: 1rem 0;
    }
    
    .navbar .nav-link {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        margin: 0;
    }
    
    .navbar .dropdown-menu {
        border: none;
        background-color: rgba(0,0,0,0.02);
        box-shadow: none;
        padding-left: 1rem;
    }
    
    .navbar form.d-flex {
        flex-direction: column;
        align-items: stretch !important;
        margin: 0.5rem 0;
        max-width: 100%;
    }
    
    .navbar form.d-flex input.form-control,
    .navbar form.d-flex button {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    .navbar-nav {
        margin-bottom: 1rem !important;
    }
}

/* Mini-Cart Preview Styles */
.cart-preview-dropdown {
    width: 320px;
    padding: 0;
    margin-top: 0.5rem;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cart-preview-items {
    max-height: 300px;
    overflow-y: auto;
}

.cart-preview-item {
    transition: background-color 0.2s ease;
}

.cart-preview-item:hover {
    background-color: rgba(0,0,0,0.02);
}

.cart-preview-img img {
    object-fit: cover;
}

/* Ensure dropdown doesn't close when clicking inside */
@media (min-width: 992px) {
    #cart-dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Ensure spinner color on buttons (e.g., add-to-cart) follows brand */
.btn .spinner-border { color: currentColor; }
.add-to-cart-btn .spinner-border {
    color: var(--color-surface) !important; /* white spinner on green button */
}

/* Accessibility: visible skip link for keyboard users */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: .5rem .75rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: .25rem;
    z-index: 10000;
}
.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;
}

/* Center single-card pages like profile edit and avoid touching footer */
.page-centered {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 576px) {
    .page-centered { min-height: auto; }
}

/* Product filters: refine number input spinners */
.product-filters input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
.product-filters input[type="number"]::-webkit-outer-spin-button,
.product-filters input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Optional: custom subtle stepper via background icon (keeps UX clean). You can remove this if not desired. */
.product-filters .number-field { position: relative; }
.product-filters .number-field .input-wrap { position: relative; }
.product-filters .number-field input[type="number"] {
    padding-right: 2.75rem;
    height: calc(2.375rem + 2px); /* match .form-control default height */
    line-height: 1.5;
}
.product-filters .number-field .spinner-buttons {
    position: absolute;
    right: .5rem; /* inside the input padding */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    z-index: 1;
    pointer-events: none; /* let clicks through except on buttons */
}
.product-filters .number-field .spinner-buttons .spinner-btn { pointer-events: auto; }
.product-filters .number-field .spinner-btn {
    width: .9rem;  /* compact */
    height: .9rem;
    border: 1px solid var(--color-border);
    border-radius: .25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.06));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-medium);
    line-height: 1;
}
.product-filters .number-field .spinner-btn:hover { filter: brightness(1.1); }
.product-filters .number-field .spinner-btn:active { filter: brightness(0.95); }
.product-filters .number-field .spinner-btn.up::before,
.product-filters .number-field .spinner-btn.down::before{
    content: '';
    display: block;
    width: .6rem;
    height: .6rem;
    mask: center/contain no-repeat;
    -webkit-mask: center/contain no-repeat;
    background-color: currentColor;
}
.product-filters .number-field .spinner-btn.up::before{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 14l5-5 5 5H7z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 14l5-5 5 5H7z"/></svg>');
}
.product-filters .number-field .spinner-btn.down::before{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 10h10l-5 5-5-5z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 10h10l-5 5-5-5z"/></svg>');
}

/* Clean, non-blue select styling for filters */
.product-filters .form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--color-border);
    padding-right: 2.5rem; /* room for custom caret */
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%2399a1a7' d='M3.204 5h9.592L8 10.481 3.204 5z'/%3e%3c/svg%3e");
    background-image: var(--bs-form-select-bg-img);
    background-position: right .85rem center;
    background-size: 16px 12px;
}
.product-filters .form-select:focus {
    border-color: #198754; /* bootstrap success */
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
    outline: none;
}
.product-filters .form-select:hover {
    border-color: color-mix(in srgb, var(--color-border) 70%, #198754 30%);
}

/* Pseudo select (custom dropdown) */
.product-filters .pseudo-select { position: relative; }
.product-filters{ position: relative; z-index: 1010; /* above product grid/cards, below sticky header */ }
.product-filters .pseudo-select-toggle {
    width: 100%;
    text-align: left;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--color-border);
    border-radius: .375rem;
    padding: .375rem 2.25rem .375rem .75rem; /* match .form-select/.form-control heights */
    min-height: calc(2.25rem + 2px);
}
.product-filters .pseudo-select-toggle:focus { outline: none; border-color: #198754; box-shadow: 0 0 0 0.2rem rgba(25,135,84,.25); }
.product-filters .pseudo-select .caret {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    width: .8rem; height: .8rem; background-color: var(--color-text-medium);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 10h10l-5 5-5-5z"/></svg>') center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 10h10l-5 5-5-5z"/></svg>') center/contain no-repeat;
}
.product-filters .pseudo-select-menu {
    position: absolute; left: 0; right: 0; margin-top: .25rem; z-index: 1020; /* above cards, below header */
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--color-border);
    border-radius: .375rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.2);
    list-style: none; padding: .25rem 0; display: none;
}
.product-filters .pseudo-select.open .pseudo-select-menu { display: block; }
.product-filters .pseudo-select-menu li { padding: .375rem .75rem; cursor: pointer; }
.product-filters .pseudo-select-menu li:hover { background: rgba(25,135,84,.1); }
.product-filters .pseudo-select-menu li.selected { background: rgba(25,135,84,.15); font-weight: 500; }