/* General Styles */
body {
    font-family: 'Poppins', sans-serif;
    background-color: hsl(80, 60%, 95%); /* Light lime green */
    color: hsl(200, 15%, 20%); /* Dark blue-grey for readability */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: hsl(200, 25%, 15%); /* Slightly darker for headings */
}

a {
    color: hsl(120, 50%, 40%); /* Vibrant green for links */
    text-decoration: none;
}

a:hover {
    color: hsl(120, 60%, 30%);
    text-decoration: underline;
}

.btn-primary {
    background-color: hsl(120, 50%, 50%); /* Vibrant green button */
    border-color: hsl(120, 50%, 50%);
    color: #fff;
    transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.btn-primary:hover {
    background-color: hsl(120, 60%, 40%);
    border-color: hsl(120, 60%, 40%);
    color: #fff;
}

.btn-outline-secondary {
    color: hsl(200, 15%, 20%);
    border-color: hsl(200, 15%, 20%);
}

.btn-outline-secondary:hover {
    background-color: hsl(200, 15%, 20%);
    color: #fff;
}

.card {
    border: none;
    border-radius: 0.75rem;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

/* Age Verification Splash Screen */
.age-verification-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Dark overlay */
    z-index: 1080; /* Above all other content */
}

.age-verification-splash h1 {
    color: #fff;
    font-size: 2rem;
}

.age-verification-splash p {
    color: #ccc;
}

/* Cookie Banner */
.cookie-banner {
    background-color: hsl(200, 30%, 25%); /* Darker blue-grey */
    color: #fff;
    z-index: 1070; /* Below age verification, above main content */
    display: none; /* Hidden by default, shown by JS after age verification */
    animation: none; /* No animations */
}

.cookie-banner .btn-light {
    background-color: #fff;
    color: hsl(200, 30%, 25%);
    border-color: #fff;
}

.cookie-banner .btn-outline-light {
    color: #fff;
    border-color: #fff;
}

.cookie-banner .btn-light:hover,
.cookie-banner .btn-outline-light:hover {
    opacity: 0.8;
}

/* Header */
header {
    background-color: hsl(80, 60%, 90%); /* Slightly darker lime for header */
    border-bottom: 1px solid hsl(80, 40%, 85%);
    z-index: 1060;
    animation: none; /* No animations */
}

.navbar-brand img {
    max-height: 40px;
}

.navbar-nav .nav-link {
    color: hsl(200, 15%, 20%);
    font-weight: 600;
    padding: 0.5rem 1rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: hsl(120, 50%, 40%);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, hsl(120, 50%, 50%) 0%, hsl(80, 60%, 40%) 100%); /* Green gradient */
    padding-top: 8rem; /* Space for fixed header */
    padding-bottom: 8rem;
    animation: none; /* No animations */
}

.hero-section h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
}

.hero-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.hero-section img {
    max-width: 100%;
    height: auto;
}

/* Rating List Section */
.rating-list-section {
    background-color: hsl(80, 60%, 98%); /* Lighter lime for content block */
    animation: none; /* No animations */
}

.rating-card {
    display: flex;
    flex-direction: row;
    background-color: #fff;
}

.rating-card .row.g-0 {
    width: 100%;
}

.rating-card-img {
    height: 100%;
    object-fit: contain;
    border-top-left-radius: calc(0.75rem - 1px);
    border-bottom-left-radius: calc(0.75rem - 1px);
}

@media (max-width: 767.98px) {
    .rating-card .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .rating-card .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .rating-card-img {
        border-top-right-radius: calc(0.75rem - 1px);
        border-bottom-left-radius: 0;
        max-height: 250px;
        width: 100%;
    }
}

.rating-stars i {
    color: gold;
    font-size: 1.2rem;
}

/* Comparison Table Section */
.comparison-table-section {
    background-color: hsl(80, 60%, 95%);
    animation: none; /* No animations */
}

.sticky-header {
    position: sticky;
    top: 70px; /* Adjust based on header height + cookie banner if visible */
    background-color: hsl(80, 60%, 90%); /* Match header or distinct */
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.table-responsive {
    border-radius: 0.75rem;
    overflow: hidden;
}

.table th, .table td {
    padding: 1rem;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: hsl(80, 60%, 99%);
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #fff;
}

/* Rating Criteria Section */
.rating-criteria-section {
    background-color: hsl(80, 60%, 98%);
    animation: none; /* No animations */
}

.accordion-item {
    border: 1px solid hsl(80, 40%, 85%);
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-button {
    background-color: #fff;
    color: hsl(200, 15%, 20%);
    font-weight: 600;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}

.accordion-button:not(.collapsed) {
    color: hsl(120, 50%, 40%);
    background-color: hsl(80, 60%, 90%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
}

.accordion-body {
    background-color: #f8fcf5;
    padding: 1.25rem;
    border-top: 1px solid hsl(80, 40%, 85%);
}

/* Articles Block Section */
.articles-block-section {
    background-color: hsl(80, 60%, 95%);
    animation: none; /* No animations */
}

.article-card img {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: calc(0.75rem - 1px);
    border-top-right-radius: calc(0.75rem - 1px);
}

/* Disclaimer Block */
.disclaimer-block {
    background-color: hsl(0, 80%, 90%); /* Light red/orange for warning */
    padding: 3rem 0;
    border-top: 5px solid hsl(0, 70%, 70%); /* Darker red border */
    border-bottom: 5px solid hsl(0, 70%, 70%);
    animation: none; /* No animations */
}

.disclaimer-content {
    background-color: #fff;
    border: 1px solid hsl(0, 70%, 70%);
    border-radius: 0.75rem;
    color: hsl(200, 15%, 20%);
}

.disclaimer-content h3 {
    color: hsl(0, 70%, 50%); /* Red for warning title */
}

/* Footer */
.footer-section {
    background-color: hsl(200, 30%, 20%); /* Dark blue-grey */
    color: #f8f9fa;
    animation: none; /* No animations */
}

.footer-section a {
    color: #f8f9fa;
}

.footer-section a:hover {
    color: hsl(120, 50%, 50%);
}

.footer-logos {
    gap: 1rem; /* Spacing between logos */
}

.footer-logos img {
    max-width: 120px; /* Limit width as requested */
    height: auto;
    object-fit: contain;
    filter: none; /* No grayscale */
    transition: none; /* No hover effects */
}

.footer-logos .18-plus-icon {
    max-width: 60px;
    filter: invert(10%) sepia(90%) saturate(7000%) hue-rotate(350deg) brightness(90%) contrast(100%); /* Red color for 18+ icon */
}

/* Utility for spacing with fixed cookie banner */
body.cookie-banner-active main {
    padding-top: 56px; /* Adjust this value based on actual cookie banner height */
}

@media (max-width: 991.98px) {
    .navbar-nav {
        display: none; /* Hide nav links on small screens */
    }
}
/* Styles for the .rightsFieldUnit container */
.rightsFieldUnit {
    padding-top: 3rem;    /* Top padding for the content block */
    padding-bottom: 3rem; /* Bottom padding for the content block */
    padding-left: 1.5rem; /* Left padding for the content block */
    padding-right: 1.5rem; /* Right padding for the content block */
    max-width: 960px;     /* Optional: Limit width for better readability on large screens */
    margin-left: auto;    /* Center the block if max-width is applied */
    margin-right: auto;   /* Center the block if max-width is applied */
    color: hsl(200, 15%, 20%); /* Default text color for the block */
}

/* Heading styles within .rightsFieldUnit */
.rightsFieldUnit h1 {
    font-size: 2.25rem; /* Moderate font size for H1 */
    margin-top: 2.5rem;   /* Top margin for H1 */
    margin-bottom: 1.25rem; /* Bottom margin for H1 */
    line-height: 1.2;     /* Line height for H1 */
    color: hsl(200, 25%, 15%); /* Darker color for headings */
}

.rightsFieldUnit h2 {
    font-size: 1.8rem;    /* Moderate font size for H2 */
    margin-top: 2rem;     /* Top margin for H2 */
    margin-bottom: 1rem;  /* Bottom margin for H2 */
    line-height: 1.3;     /* Line height for H2 */
    color: hsl(200, 25%, 15%); /* Darker color for headings */
}

.rightsFieldUnit h3 {
    font-size: 1.5rem;    /* Moderate font size for H3 */
    margin-top: 1.75rem;  /* Top margin for H3 */
    margin-bottom: 0.8rem; /* Bottom margin for H3 */
    line-height: 1.4;     /* Line height for H3 */
    color: hsl(200, 25%, 15%); /* Darker color for headings */
}

.rightsFieldUnit h4 {
    font-size: 1.25rem;   /* Moderate font size for H4 */
    margin-top: 1.5rem;   /* Top margin for H4 */
    margin-bottom: 0.7rem; /* Bottom margin for H4 */
    line-height: 1.5;     /* Line height for H4 */
    color: hsl(200, 25%, 15%); /* Darker color for headings */
}

.rightsFieldUnit h5 {
    font-size: 1.1rem;    /* Moderate font size for H5 */
    margin-top: 1.25rem;  /* Top margin for H5 */
    margin-bottom: 0.6rem; /* Bottom margin for H5 */
    line-height: 1.5;     /* Line height for H5 */
    color: hsl(200, 25%, 15%); /* Darker color for headings */
}

/* Paragraph styles within .rightsFieldUnit */
.rightsFieldUnit p {
    font-size: 1rem;      /* Base font size for paragraphs */
    margin-bottom: 1rem;  /* Bottom margin for paragraphs */
    line-height: 1.7;     /* Line height for better readability */
}

/* Unordered list styles within .rightsFieldUnit */
.rightsFieldUnit ul {
    list-style-type: disc; /* Default disc bullet points */
    margin-top: 1rem;     /* Top margin for lists */
    margin-bottom: 1rem;  /* Bottom margin for lists */
    padding-left: 1.5rem; /* Indentation for list items */
}

/* List item styles within .rightsFieldUnit */
.rightsFieldUnit li {
    font-size: 1rem;      /* Font size for list items */
    margin-bottom: 0.5rem; /* Bottom margin for list items */
    line-height: 1.7;     /* Line height for list items */
}
/* Обёртка должна скроллиться */
.table-responsive-09cx {
  width: 100%;
  overflow-x: auto;            /* горизонтальный скролл */
  -webkit-overflow-scrolling: touch;
}
@media (max-width:1199px) {
    .table-responsive-09cx {
  display: block;    }
}
/* Ключ: не даём таблице сжиматься, даём ей быть шире обёртки */
.table-responsive-09cx > .table {
  width: max-content;          /* ширина по контенту — станет шире контейнера */
  min-width: 720px;            /* чтобы на телефоне точно появился скролл */
  border-collapse: collapse;
}

/* Чтобы колонки не переносились и реально создавали ширину */
.table-responsive-09cx th,
.table-responsive-09cx td {
  white-space: nowrap;
}

/* На ≥768px возвращаем нормальное поведение без скролла */
@media (min-width: 768px) {
  .table-responsive-09cx > .table {
    width: 100%;
    min-width: 0;
  }
}

/* Если где-то выше стоит overflow:hidden — снимаем его по оси X */
.comparison-table-section,
.comparison-table-section .container {
  overflow-x: visible;
}