/* DEÜ Logo Slider Frontend Styles */

.deu-logo-slider-wrapper {
	position: relative;
	margin: 20px 0;
	width: 100%;
}

/* Grayscale */
.deu-logo-slider-wrapper.grayscale-true img {
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}
.deu-logo-slider-wrapper.grayscale-true img:hover {
	filter: grayscale(0%);
}

/* Tooltips */
.deu-logo-item {
	position: relative;
	text-align: center;
	padding: 10px;
}
.deu-logo-item[data-tooltip]:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #666666;
	color: #fff;
	padding: 6px 14px;
	border-radius: 4px;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	z-index: 20;
	pointer-events: none;
	box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}
.deu-logo-item[data-tooltip]:hover::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: #666666 transparent transparent transparent;
	z-index: 20;
	pointer-events: none;
}
.deu-logo-item img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Themes */
/* Theme 1: Minimalist Lift */
.deu-logo-theme-theme-1 .deu-logo-item { 
    border: 1px solid #f0f0f0; 
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
}
.deu-logo-theme-theme-1 .deu-logo-item:hover { 
    border-color: #0073aa; 
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 115, 170, 0.1);
}

/* Theme 2: Premium Shadow Glow */
.deu-logo-theme-theme-2 .deu-logo-item { 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    border-radius: 10px; 
    background: #fff; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.deu-logo-theme-theme-2 .deu-logo-item:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transform: scale(1.03);
}

/* Theme 3: Modern Rounded */
.deu-logo-theme-theme-3 .deu-logo-item img { 
    border-radius: 50%; 
    border: 3px solid #eee; 
    transition: all 0.3s ease;
    padding: 10px;
    background: #fff;
}
.deu-logo-theme-theme-3 .deu-logo-item:hover img {
    border-color: #0073aa;
    box-shadow: 0 0 15px rgba(0, 115, 170, 0.2);
    transform: rotate(5deg) scale(1.05);
}

/* Theme 4: Clean Zoom */
.deu-logo-theme-theme-4 .deu-logo-item {
    border-radius: 8px;
    background: #fff;
    transition: box-shadow 0.3s ease;
}
.deu-logo-theme-theme-4 .deu-logo-item img { 
    transition: transform 0.5s ease; 
}
.deu-logo-theme-theme-4 .deu-logo-item:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.deu-logo-theme-theme-4 .deu-logo-item:hover img { 
    transform: scale(1.12); 
}

/* Theme 5: Dynamic Background Plate */
.deu-logo-theme-theme-5 .deu-logo-item { 
    background: #f8f9fa; 
    border-radius: 12px; 
    padding: 25px; 
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.deu-logo-theme-theme-5 .deu-logo-item:hover {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* Grid Layout */
.deu-logo-layout-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}
.deu-logo-layout-grid .deu-logo-item {
	flex: 0 0 calc((100% / var(--items-count, 4)) - 20px);
    max-width: calc((100% / var(--items-count, 4)) - 20px);
	box-sizing: border-box;
}

/* List Layout */
.deu-logo-layout-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.deu-logo-layout-list .deu-logo-item {
	display: flex;
	align-items: center;
	text-align: left;
}
.deu-logo-layout-list .deu-logo-item img {
	margin: 0 20px 0 0;
	max-width: 150px;
}

/* Filter Layout */
.deu-logo-filter-buttons {
	text-align: center;
	margin-bottom: 20px;
}
.deu-logo-filter-buttons button {
	background: #eee;
	border: none;
	padding: 8px 15px;
	margin: 0 5px;
	cursor: pointer;
	border-radius: 4px;
}
.deu-logo-filter-buttons button.active {
	background: #333;
	color: #fff;
}
.deu-logo-layout-filter .deu-logo-item {
	width: calc((100% / var(--items-count, 4)) - 20px);
	margin-bottom: 20px;
}

/* Table Layout */
.deu-logo-layout-table {
	width: 100%;
	border-collapse: collapse;
}
.deu-logo-layout-table td {
	padding: 15px;
	border: 1px solid #ddd;
	text-align: center;
}

/* Responsive Layouts */
@media (max-width: 1024px) {
    .deu-logo-layout-grid .deu-logo-item,
    .deu-logo-layout-filter .deu-logo-item {
        flex: 0 0 calc((100% / var(--items-tablet, 3)) - 20px);
        max-width: calc((100% / var(--items-tablet, 3)) - 20px);
        width: calc((100% / var(--items-tablet, 3)) - 20px);
    }
}

@media (max-width: 768px) {
    .deu-logo-layout-grid .deu-logo-item,
    .deu-logo-layout-filter .deu-logo-item {
        flex: 0 0 calc((100% / var(--items-mobile, 2)) - 20px);
        max-width: calc((100% / var(--items-mobile, 2)) - 20px);
        width: calc((100% / var(--items-mobile, 2)) - 20px);
    }
    
    .deu-logo-layout-table, 
    .deu-logo-layout-table tbody, 
    .deu-logo-layout-table tr, 
    .deu-logo-layout-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    .deu-logo-layout-table tr {
        margin-bottom: 15px;
    }
    
    .deu-logo-layout-table td:empty {
        display: none;
    }
    
    .deu-logo-slider-wrapper {
        padding: 0;
    }
}

@media (max-width: 480px) {
    .deu-logo-layout-list .deu-logo-item {
        flex-direction: column;
        text-align: center;
    }
    
    .deu-logo-layout-list .deu-logo-item img {
        margin: 0 auto 15px auto;
    }
}

/* Slick Slider Arrows Optimization */
.deu-logo-slider-wrapper .slick-prev,
.deu-logo-slider-wrapper .slick-next {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
    transition: all 0.3s ease;
}

.deu-logo-slider-wrapper .slick-prev:hover,
.deu-logo-slider-wrapper .slick-next:hover,
.deu-logo-slider-wrapper .slick-prev:focus,
.deu-logo-slider-wrapper .slick-next:focus {
    background: #0073aa;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.deu-logo-slider-wrapper .slick-prev:before, 
.deu-logo-slider-wrapper .slick-next:before {
    color: #333 !important;
    font-size: 24px;
    opacity: 1;
    transition: color 0.3s ease;
    line-height: 40px;
}

.deu-logo-slider-wrapper .slick-prev:hover:before,
.deu-logo-slider-wrapper .slick-next:hover:before,
.deu-logo-slider-wrapper .slick-prev:focus:before,
.deu-logo-slider-wrapper .slick-next:focus:before {
    color: #ffffff !important;
}

.deu-logo-slider-wrapper .slick-prev {
    left: -20px;
}

.deu-logo-slider-wrapper .slick-next {
    right: -20px;
}

/* Slick Slider Dots Optimization */
.deu-logo-slider-wrapper .slick-dots {
    bottom: -35px;
}
.deu-logo-slider-wrapper .slick-dots li {
    margin: 0 6px;
    width: 12px;
    height: 12px;
}
.deu-logo-slider-wrapper .slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
}
.deu-logo-slider-wrapper .slick-dots li button:before {
    font-size: 14px;
    color: #ccc;
    opacity: 1;
    width: 12px;
    height: 12px;
    line-height: 12px;
    transition: all 0.3s ease;
}
.deu-logo-slider-wrapper .slick-dots li.slick-active button:before,
.deu-logo-slider-wrapper .slick-dots li:hover button:before {
    color: #0073aa;
    transform: scale(1.3);
}

/* Add padding to the wrapper so arrows and dots don't get cut off */
.deu-logo-slider-wrapper {
    padding: 0px;
    margin-bottom: 50px;
}