/* Responsive - Aggiornato per compatibilità con responsive-fix.css */
@media screen and (max-width: 768px) {
	/* Assicura che il body non abbia overflow */
	body {
		overflow-x: hidden !important;
		width: 100% !important;
		max-width: 100vw !important;
	}

	#compare-form {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto auto auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.header-container {
		flex-direction: row;
		align-items: center;
		text-align: center;
		width: 100%;
		max-width: 100vw;
		justify-content: space-between;
		overflow: hidden;
		background: #f7f5f4;
		padding: 5px 10px;
	}
	.header-logo img {
		width: 80px;
		height: auto;
	}
	.header-menu {
		flex-direction: column;
		gap: 8px;
		width: 100%;
		max-width: 100%;
	}
	.header-container.show nav.header-navigation {
		position: fixed;
		right: 0;
		background: #f7f5f4;
		height: 100%;
		width: 290px;
		top: 186px;
		z-index: 999;
		visibility: visible;
		opacity: 1;
		transition: .5s;
		display: block;
	}
	.mneu-icon{
		display:block;
	}
	.header-menu > li > a {
		width: 100%;
		text-align: center;
		max-width: 100%;
	}

	.header-title {
		text-align: center;
		margin: 10px 0;
		width: 100%;
		max-width: 100%;
	}

	.vs-divider {
		margin: 10px 0;
		align-self: center;
		max-width: 100%;
	}

	.site-features-tooltip {
		min-width: 250px;
		max-width: calc(100vw - 20px);
		left: 10px;
		right: 10px;
		transform: none;
	}

	.site-image-wrapper:hover .site-features-tooltip {
		transform: none;
	}

	.site-features-tooltip::after {
		left: 50%;
	}

	.pros-cons { 
		grid-template-columns: 1fr; 
		width: 100%;
		max-width: 100%;
	}

	.overview-grid, .pros-cons {
		grid-template-columns: 1fr;
		gap: 20px;
		width: 100%;
		max-width: 100%;
	}

	.sites-overview {
		flex-direction: column;
		gap: 20px;
		width: 100%;
		max-width: 100%;
	}

	.charts-grid {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
	}

	.cta-buttons {
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 100%;
	}

	.footer-main {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 0 16px;
		width: 100%;
		max-width: 100%;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 14px 16px;
		width: 100%;
		max-width: 100%;
	}

	.hero-section,
	.deals-section,
	.category-section,
	.category-section-directories {
		width: 100%;
		max-width: 100vw;
		overflow: hidden;
	}

	.container {
		width: 100%;
		max-width: 100%;
		padding: 0 15px;
		box-sizing: border-box;
	}

	/* Fix per immagini e media */
	img, video, iframe {
		max-width: 100%;
		height: auto;
	}

	/* Fix per tabelle */
	table {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		display: block;
	}

	/* FAQ Section Mobile */
	.faq-section {
		padding: 40px 0;
	}

	.faq-section h2 {
		font-size: 1.8rem;
		margin-bottom: 30px;
	}

	.faq-container {
		padding: 0 10px;
	}

	.faq-item {
		margin-bottom: 12px;
		border-radius: 8px;
	}

	.faq-question {
		padding: 16px 18px;
	}

	.faq-question h3 {
		font-size: 1rem;
		padding-right: 15px;
	}

	.faq-toggle {
		width: 28px;
		height: 28px;
		font-size: 1rem;
	}

	.faq-item.active .faq-answer {
		padding: 16px 18px;
		max-height: 300px;
	}

	.faq-answer p {
		font-size: 0.95rem;
	}

	/* Blog Section Mobile */
	.blog-section .container {
		flex-direction: column;
		gap: 30px;
	}

	.blog-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.blog-card {
		margin-bottom: 20px;
	}

	.blog-card-content {
		padding: 20px;
	}

	.blog-card-title {
		font-size: 1.1rem;
	}

	.blog-card-meta {
		flex-direction: column;
		gap: 5px;
	}

	.blog-card-footer {
		flex-direction: column;
		gap: 15px;
		align-items: flex-start;
	}

	.blog-sidebar {
		width: 100%;
		order: -1;
	}

	.sidebar-widget {
		padding: 20px;
		margin-bottom: 20px;
	}

	.blog-hero {
		padding: 60px 0 30px 0;
	}

	.blog-title {
		font-size: 2rem;
	}

	.blog-meta {
		flex-direction: column;
		gap: 10px;
	}

	.blog-content-grid {
		flex-direction: column;
		gap: 30px;
	}

	.blog-post-content {
		padding: 25px;
	}

	.blog-post-text {
		font-size: 1rem;
	}

	.blog-author-bio {
		flex-direction: column;
		text-align: center;
		gap: 15px;
	}

	.social-share-buttons {
		flex-direction: column;
		gap: 10px;
	}

	.related-posts-grid {
		grid-template-columns: 1fr;
	}

	.blog-pagination .page-numbers {
		width: 35px;
		height: 35px;
		font-size: 0.9rem;
	}

	.sites-container {
		flex-direction: column;
	}
	.vs-badge {
		margin: 20px 0;
	}
	.comparisons-grid {
		grid-template-columns: 1fr;
	}

	.category-box-directories {
		flex: 0 0 100%;
		max-width: 100%;
		min-width: auto;
	}

	.home-categories-grid-directories {
		gap: 15px;
		padding: 20px 10px 40px 10px;
	}

	.category-sites-list-directories li {
		font-size: 14px;
	}

	.category-description-directories {
		margin: 10px;
		min-height: auto;
	}
.comparison-box {
    margin: 0 0 30px;
}
	.category-box-directories .category-header-directories {
		padding: 10px 10px;
		gap: 7px;	
	}

	.category-box-directories .category-header-directories a {
		font-size: 16px;
	}
	.category-view-all-btn svg {position: absolute;height: auto;width: 29px;top: 5px;right: 20px;}

	.category-view-all-btn {
		padding-left: 27px !important;
		text-align: left;
		position: relative;
	}
	.category-hero-content h1 {
		font-size: 36px;
	}
	.category-hero-wrapper {
		min-height: 360px;
	}
	.category-box-directories .category-header-directories::before {
		width: 15px;
		height: 15px;
		margin-right: 3px;
	}
	.reviews-container {
		display: block;
		padding: 0;
	}
	.reviews-slider {
		margin-bottom: 40px;
	}
	.reviews-main-title {
		font-size: 2rem;
	}
	.reviews-slider,
	.review-form {
		padding: 20px;
	}

	/* Hero responsive */
	.review-hero {
		min-height: 300px;
	}

	.single-hero-content {
		padding: 60px 0;
	}

	.hero-main h1 {
		font-size: 2.5rem;
		margin-bottom: 15px;
	}

	.hero-rating {
		gap: 10px;
		margin-bottom: 20px;
	}

	.rating-stars {
		font-size: 1.5rem;
	}

	.rating-value {
		font-size: 1.2rem;
	}

	.rating-count {
		font-size: 0.9rem;
	}

	.hero-description {
		font-size: 1rem;
		margin-top: 15px;
	}

	/* Hero video preview */
	.single-hero-content {
		display: flex;
		flex-direction: column;
		gap: 30px;
		align-items: center;
	}

	.hero-video-preview {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}

	.video-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 45%; /* Aspect ratio più largo per mobile */
		background: #000;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	}

	.video-container iframe,
	.video-container video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
		object-fit: cover;
		object-position: center;
	}

	.video-container video {
		background: #000;
		object-fit: cover;
		object-position: center;
	}

	.video-label {
		text-align: center;
		margin-top: 10px;
		font-size: 0.9rem;
		color: #666;
		font-weight: 500;
	}

	/* Video CTA Buttons - Mobile */
	.video-cta-buttons {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 15px;
		width: 100%;
	}

	.video-cta-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 16px;
		border: none;
		border-radius: 6px;
		font-size: 0.85rem;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
		transition: all 0.3s ease;
		text-align: center;
		min-height: 40px;
	}

	.visit-site-btn {
		background: linear-gradient(135deg, #28a745, #20c997);
		color: white;
		box-shadow: 0 3px 12px rgba(40, 167, 69, 0.3);
	}

	.visit-site-btn:hover {
		background: linear-gradient(135deg, #218838, #1ea085);
		transform: translateY(-1px);
		box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
		color: white;
		text-decoration: none;
	}

	.compare-btn {
		background: linear-gradient(135deg, #6c757d, #495057);
		color: white;
		box-shadow: 0 3px 12px rgba(108, 117, 125, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	.compare-btn:hover {
		background: linear-gradient(135deg, #5a6268, #343a40);
		transform: translateY(-1px);
		box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
	}

	.compare-btn img {
		width: 14px;
		height: 14px;
		filter: brightness(0) invert(1);
	}

	/* Compare dropdown menu for video CTA - Mobile */
	.hero-video-preview .compare-dropdown {
		position: relative;
		width: 100%;
	}

	.hero-video-preview .compare-menu {
		position: fixed;
		top: auto;
		left: auto;
		right: auto;
		background: white;
		border-radius: 6px;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
		padding: 15px;
		margin-top: 6px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: all 0.3s ease;
		z-index: 9999;
		width: 280px;
		max-width: 90vw;
	}

	.hero-video-preview .compare-dropdown:hover .compare-menu,
	.hero-video-preview .compare-menu:hover {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.hero-video-preview .compare-form {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.hero-video-preview .compare-option {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.hero-video-preview .compare-option label {
		font-size: 0.8rem;
		font-weight: 600;
		color: #333;
		margin: 0;
	}

	.hero-video-preview .compare-input,
	.hero-video-preview .compare-category-select,
	.hero-video-preview .compare-site-select {
		padding: 6px 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 0.8rem;
		background: white;
	}

	.hero-video-preview .compare-submit {
		background: #b80000;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.3s ease;
		font-size: 0.85rem;
	}

	.hero-video-preview .compare-submit:hover {
		background: #9a0000;
	}

	/* Overview responsive */
	.overview {
		padding: 40px 0;
		min-height: auto;
	}

	.overview-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.key-data {
		padding-right: 0;
		padding-left: 0;
		text-align: center;
	}

	.overview-gallery {
		padding-left: 0;
		padding-right: 0;
	}

	.key-data h2 {
		font-size: 1.53rem;
		margin-bottom: 26px;
		text-align: center;
	}

	.metric-item {
		padding: 13px 0;
		gap: 10px;
	}

	.metric-icon {
		width: 30px;
		height: 30px;
	}

	.metric-icon img {
		width: 18px;
		height: 18px;
	}

	.metric-icon img[alt="User Feedback"] {
		width: 20px;
		height: 14px;
	}

	.metric-label {
		font-size: 0.72rem;
	}

	.metric-value {
		font-size: 0.85rem;
	}

	.gallery-grid {
		gap: 10px;
	}

	.gallery-item {
		width: 80px;
	}

	.gallery-item img {
		width: 80px;
	}

	.placeholder-image {
		width: 80px;
		height: 60px;
		font-size: 0.7rem;
	}

	.media-preview {
		flex-direction: column;
	}
	.overview-grid {
		display: block;
	}

	.review-content {
		padding: 40px 0;
	}

	.review-title {
		font-size: 2rem;
	}

	.review-main-grid {
		gap: 20px;
	}

	.pros-box,
	.cons-box {
		padding: 15px;
		border-radius: 10px;	
	}
	.faq-box {
		margin-top: 40px;
	}
	.cta-title {
		font-size: 1.8rem;
		margin-bottom: 25px;
	}

	.cta-button {
		padding: 15px 25px;
		font-size: 1rem;
	}

	.cta-background-text {
		font-size: 3rem;
	}

	.review-cta-banner {
		height: 250px;
		margin-top: 0;
		display: block;
		padding: 20px;
	}

	.cta-content {
		padding: 0;
		margin-left: 0;
	}

	.cta-brand-logo {
		bottom: 15px;
		right: 20px;
		padding: 8px;
	}

	.cta-brand-logo img {
		width: 60px;
		height: 45px;
	}
	.footer-content {
		display: block;
	}
	.hero-content img {
		margin-left: 10vw;
		width: 0px;
	}
	.header-menu {
		gap: 0px;
	}
	.hero-content.visible {
		padding: 10px;
	}
	.about-section {
		width: 100%;
	}
	.about-content {
		max-width: 100%;
	}
	.container.about-flex {
		width: 100%;
		padding: 0 15px;
		display: block;
	}
	.about-content h3 {
	     font-size: 28px;
        line-height: 32px;
        margin-top: 20px;
	}
	.custom-comparisons-section {
    padding: 20px 0;
}
	.about-content h2 {
		font-size: 20px;
		font-weight: 600;
		color: #AA0E83;
		margin: 0;
		margin-bottom: -10px;
	}
	.comparisons-images-grid {
		display: block;
		flex-wrap: wrap;
	}
	.comparisons-images-grid {
		margin-top: -43px;
	}
	.deals-row {
		display: block;
	}
	.deals-text {
		flex: 0 0 40%;
		max-width: 100%;
	}
	.deals-banner {
		flex: 0 0 60%;
		max-width: 100%;
		min-height: auto;
	}
	.deals-main {
		font-size: 40px;
		margin-bottom: 16px;
	}
	.category-hero {
		padding: 80px 15px;
	}
	.category-body .sites-grid {
		grid-template-columns: repeat(1, 1fr);
		padding: 0 15px;
	}	
	.categories-grid {
		grid-template-columns: repeat(1, 260px);
	}	
	.category-body .sites-grid .site-card .show-more-btn, .category-body .sites-grid .site-card .compare-btn {
		flex: 0 0 100% !important;
	}
	.category-body .sites-grid .site-card .site-actions {
		flex-wrap: wrap;
	}
	.category-body .sites-grid .site-card .site-actions .compare-btn img {
		margin: 0 0 0 10px;
	}	
	.category-hero h1 {
		font-size: 32px;
	}	
	.comparison-table-wrapper {
		width: 100%;
		overflow-x: auto;              /* Enable horizontal scrolling */
		-webkit-overflow-scrolling: touch;
		display: block;
	}

	.comparison-table {
		width: 100%;
		min-width: 600px;              /* Force table to have a minimum width */
		border-collapse: collapse;
	}
	.sites-overview {
		padding: 0px;
		flex-wrap: wrap;
	}
	img.site-overview-img {
		position: unset;
		top: -70px;
		right: 45px;
	}
	.site-overview.winner {
		padding: 70px 0 70px 0;
		min-height: 350px;
	}
	.winner-badge {
		display: inline-block;
		margin-top: 15px;
	}
	.site-overview {
		padding: 70px 0 70px 0;
		min-height: 350px;
	}
	section.compare-overview {
		background-size: cover;
		padding: 20px;
	}
	.charts-grid {
		flex: 0 0 100%;
	}
	.chart-item {
		margin: 10px 0;
	}
	.cta-buttons {
		flex-wrap: wrap;
	}
	.compare-overview-title h3 {
		font-size: 30px;
	}
	.compare-overview-title {
		margin-top: 18px;
	}
	.sites-overview {
		margin: 0px 0;
	}
	.compare-hero h1 {
		font-size: 30px;
		font-weight: bold !important;
	}
	section.compare-hero {
		padding: 50px 15px;
	}
}


@media screen and (max-width: 1024px) {
	.review-main-grid {
		gap: 10px;
		display: block;
		margin-bottom: 20px;	   
	}
	.gallery-grid:after {
		right: 0;

		top: 60px;
		height: 250px;
	}
	.pros-cons-column {
		order: -1;
	}
}

@media screen and (max-width: 1200px) {
	.category-box-directories {
		flex: 0 0 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}
	nav.header-navigation {
		display: none;
	}
}

/* Best Sites Section - Mobile */
@media screen and (max-width: 768px) {
	.best-sites-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		max-width: 100%;
		margin: 20px auto;
		padding: 0 15px;
	}
	
	.best-sites-grid .site-card {
		padding: 10px;
		border-radius: 8px;
		min-height: auto;
	}
	
	.best-sites-grid .site-card .site-logo {
		max-width: 80px;
		max-height: 50px;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	.best-sites-grid .site-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	}
}

@media screen and (max-width: 480px) {
	.best-sites-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		max-width: 100%;
		padding: 0 10px;
	}
	
	.best-sites-grid .site-card {
		padding: 8px;
		border-radius: 6px;
	}
	
	.best-sites-grid .site-card .site-logo {
		max-width: 70px;
		max-height: 45px;
	}
}