/**
 * Dalog Addons - Frontend Styles
 * 
 * @package Dalog_Addons
 * @author Nubesti LLC
 * @link https://nubesti.com
 */

/* ==========================================================================
   Image Swap Widget
   ========================================================================== */

.dalog-image-swap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.dalog-image-swap img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}

.dalog-image-swap .image-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animation: Fade (default) */
.dalog-image-swap.animation-fade .image-hover {
    opacity: 0;
}

.dalog-image-swap.animation-fade:hover .image-hover {
    opacity: 1;
}

/* Animation: Shrink */
.dalog-image-swap.animation-shrink .image-hover {
    opacity: 0;
    transform: scale(1);
}

.dalog-image-swap.animation-shrink:hover .image-normal {
    transform: scale(0.92);
}

.dalog-image-swap.animation-shrink:hover .image-hover {
    opacity: 1;
    transform: scale(0.92);
}

/* Animation: Slide Left */
.dalog-image-swap.animation-slide-left .image-hover {
    transform: translateX(-100%);
    opacity: 1;
}

.dalog-image-swap.animation-slide-left:hover .image-hover {
    transform: translateX(0);
}

/* Animation: Slide Right */
.dalog-image-swap.animation-slide-right .image-hover {
    transform: translateX(100%);
    opacity: 1;
}

.dalog-image-swap.animation-slide-right:hover .image-hover {
    transform: translateX(0);
}

/* Animation: Slide Up */
.dalog-image-swap.animation-slide-up .image-hover {
    transform: translateY(-100%);
    opacity: 1;
}

.dalog-image-swap.animation-slide-up:hover .image-hover {
    transform: translateY(0);
}

/* Animation: Slide Down */
.dalog-image-swap.animation-slide-down .image-hover {
    transform: translateY(100%);
    opacity: 1;
}

.dalog-image-swap.animation-slide-down:hover .image-hover {
    transform: translateY(0);
}

/* Animation: Zoom In */
.dalog-image-swap.animation-zoom-in .image-hover {
    transform: scale(0);
    opacity: 1;
}

.dalog-image-swap.animation-zoom-in:hover .image-hover {
    transform: scale(1);
}

/* Animation: Zoom Out */
.dalog-image-swap.animation-zoom-out .image-hover {
    transform: scale(1.5);
    opacity: 0;
}

.dalog-image-swap.animation-zoom-out:hover .image-hover {
    transform: scale(1);
    opacity: 1;
}

/* Animation: Flip Horizontal */
.dalog-image-swap.animation-flip-horizontal {
    perspective: 1000px;
}

.dalog-image-swap.animation-flip-horizontal .image-normal,
.dalog-image-swap.animation-flip-horizontal .image-hover {
    backface-visibility: hidden;
    transition: transform 0.6s ease;
}

.dalog-image-swap.animation-flip-horizontal .image-hover {
    transform: rotateY(180deg);
    opacity: 1;
}

.dalog-image-swap.animation-flip-horizontal:hover .image-normal {
    transform: rotateY(-180deg);
}

.dalog-image-swap.animation-flip-horizontal:hover .image-hover {
    transform: rotateY(0deg);
}

/* Animation: Flip Vertical */
.dalog-image-swap.animation-flip-vertical {
    perspective: 1000px;
}

.dalog-image-swap.animation-flip-vertical .image-normal,
.dalog-image-swap.animation-flip-vertical .image-hover {
    backface-visibility: hidden;
    transition: transform 0.6s ease;
}

.dalog-image-swap.animation-flip-vertical .image-hover {
    transform: rotateX(180deg);
    opacity: 1;
}

.dalog-image-swap.animation-flip-vertical:hover .image-normal {
    transform: rotateX(-180deg);
}

.dalog-image-swap.animation-flip-vertical:hover .image-hover {
    transform: rotateX(0deg);
}

/* ==========================================================================
   Dalog Divider Widget
   ========================================================================== */

.dalog-divider-wrapper {
    display: flex;
    width: 100%;
}

.dalog-divider {
    flex: none;
}

/* ==========================================================================
   Dalog Diagram Widget
   ========================================================================== */

.dalog-diagram-box {
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 24px 26px;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #e5e7eb;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.dalog-diagram-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #1e293b;
    border-top: 4px solid #38bdf8;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: dalog-diagram-spin 1s linear infinite;
}

@keyframes dalog-diagram-spin {
    to {
        transform: rotate(360deg);
    }
}

.dalog-diagram-box h3 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

.dalog-diagram-box p {
    font-size: 14px;
    margin: 6px 0;
    line-height: 1.5;
}

.dalog-diagram-recommendation {
    color: #94a3b8;
}

/* ==========================================================================
   Gradient Button Widget
   ========================================================================== */

.dalog-gradient-button-wrapper {
    display: block;
}

.dalog-gradient-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    /* Spacing - defaults that can be overridden by Elementor */
    padding: 16px 32px;

    /* Typography */
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    /* Border */
    --dalog-border-width: 2px;
    border: var(--dalog-border-width) solid transparent;
    border-radius: 100px;

    /* Background - Gradient Border Effect */
    background:
        linear-gradient(var(--dalog-bg-color, #fff), var(--dalog-bg-color, #fff)) padding-box,
        var(--dalog-gradient) border-box;

    /* Shadow */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    /* Animation */
    transition-property: background, color, box-shadow, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-out;

    /* Cursor */
    cursor: pointer;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;

    /* Position for pseudo-elements */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Hover State - Using pseudo-element for complete coverage with -2px offset */
.dalog-gradient-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--dalog-gradient-hover);
    border-radius: 100px;
    opacity: 0;
    transition: opacity 300ms ease-out;
    z-index: -1;
}

.dalog-gradient-button:hover::before {
    opacity: 1;
}

/* Ensure text and icon stay above the overlay */
.dalog-gradient-button .dalog-button-text,
.dalog-gradient-button .dalog-button-icon {
    position: relative;
    z-index: 1;
}

/* Hover State - Color and transform */
.dalog-gradient-button:hover {
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Focus State */
.dalog-gradient-button:focus {
    outline: 2px solid rgba(28, 86, 160, 0.5);
    outline-offset: 2px;
}

/* Active State */
.dalog-gradient-button:active {
    transform: scale(0.98);
}

/* Icon Styles */
.dalog-gradient-button .dalog-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dalog-gradient-button .dalog-button-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.dalog-gradient-button .dalog-button-icon i {
    font-size: inherit;
    line-height: 1;
}

/* Text Styles */
.dalog-gradient-button .dalog-button-text {
    display: inline-block;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
    .dalog-gradient-button {
        min-width: auto;
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

/* Note: Dark mode background is now controlled via Elementor settings */

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dalog-gradient-button {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Dalog Iconos Widget
   ========================================================================== */

.dalog-iconos-wrapper {
    display: block;
    position: relative;
}

.dalog-iconos-icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    cursor: pointer;
    text-decoration: none;
}

.dalog-iconos-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Apply color to SVG paths - Normal state */
.dalog-iconos-icon svg path,
.dalog-iconos-icon svg circle,
.dalog-iconos-icon svg rect,
.dalog-iconos-icon svg polygon,
.dalog-iconos-icon svg ellipse {
    fill: var(--dalog-icon-color, #9C9B9B);
    transition: fill 300ms ease-out;
}

/* Hover state - solid color fallback */
.dalog-iconos-icon:not(.dalog-iconos-gradient-hover):hover svg path,
.dalog-iconos-icon:not(.dalog-iconos-gradient-hover):hover svg circle,
.dalog-iconos-icon:not(.dalog-iconos-gradient-hover):hover svg rect,
.dalog-iconos-icon:not(.dalog-iconos-gradient-hover):hover svg polygon,
.dalog-iconos-icon:not(.dalog-iconos-gradient-hover):hover svg ellipse {
    fill: var(--dalog-icon-hover-color, #1C56A0);
}

/* Editor placeholder */
.dalog-iconos-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--dalog-icon-color, #9C9B9B);
}

/* ==========================================================================
   Dalog Iconos - Hover Animations
   ========================================================================== */

/* Scale Animation */
.dalog-iconos-anim-scale {
    transition: transform var(--dalog-transition-duration, 300ms) ease-out;
}

.dalog-iconos-anim-scale:hover {
    transform: scale(1.1);
}

/* Fill Animations - Base Setup */
.dalog-iconos-anim-fill-up,
.dalog-iconos-anim-fill-down,
.dalog-iconos-anim-fill-left,
.dalog-iconos-anim-fill-right {
    position: relative;
    overflow: visible;
}

/* Create overlay for fill effect using a pseudo-element with SVG copy */
.dalog-iconos-anim-fill-up::after,
.dalog-iconos-anim-fill-down::after,
.dalog-iconos-anim-fill-left::after,
.dalog-iconos-anim-fill-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    pointer-events: none;
    transition: clip-path var(--dalog-transition-duration, 300ms) ease-out;
}

/* Fill Up - starts from bottom */
.dalog-iconos-anim-fill-up::after {
    clip-path: inset(100% 0 0 0);
}

.dalog-iconos-anim-fill-up:hover::after {
    clip-path: inset(0 0 0 0);
}

/* Fill Down - starts from top */
.dalog-iconos-anim-fill-down::after {
    clip-path: inset(0 0 100% 0);
}

.dalog-iconos-anim-fill-down:hover::after {
    clip-path: inset(0 0 0 0);
}

/* Fill Left - starts from right */
.dalog-iconos-anim-fill-left::after {
    clip-path: inset(0 0 0 100%);
}

.dalog-iconos-anim-fill-left:hover::after {
    clip-path: inset(0 0 0 0);
}

/* Fill Right - starts from left */
.dalog-iconos-anim-fill-right::after {
    clip-path: inset(0 100% 0 0);
}

.dalog-iconos-anim-fill-right:hover::after {
    clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   Dalog Iconos - Entrance Animations
   ========================================================================== */

/* Base setup for entrance animations */
.dalog-iconos-entrance {
    position: relative;
}

/* Entrance overlay positioning */
.dalog-iconos-entrance-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ==========================================================================
   Dalog Diagram 1 Widget
   ========================================================================== */

.dalog-diagram1-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dalog-diagram1-container svg {
    width: 100%;
    height: auto;
}

/* Dalog Diagram 2 Styles */
.dalog-diagram2-container {
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

.dalog-diagram2-container .reveal-item {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Gradient items reveal effect using clip-path */
.dalog-diagram2-container .reveal-item:has(path[style*="fill:url"]) {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
    transform: none;
    transition: clip-path 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dalog-diagram2-container.is-visible .reveal-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--delay, 0) * 1s);
}

.dalog-diagram2-container.is-visible .reveal-item:has(path[style*="fill:url"]) {
    clip-path: inset(0 0 0 0);
    transition-delay: calc(var(--delay, 0) * 1s);
}

/* Animation trigger class applied via JS */
.dalog-scroll-animate {
    opacity: 1;
}

/* ==========================================================================
   Dalog 3D Carousel Widget Styles - Horizontal Layout
   ========================================================================== */

.dalog-carousel-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 0;
    overflow: hidden;
    z-index: 1;
    isolation: isolate;
}

.dalog-carousel-3d-wrapper:focus {
    outline: none;
}

.dalog-carousel-3d {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 540px;
    perspective: 1200px;
    z-index: 1;
}

/* Slide Base */
.dalog-carousel-slide {
    position: absolute;
    width: 620px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: auto;
    transform-origin: center center;
    left: 50%;
    top: 0;
}

/* Default positions for initial render (before JS) */
.dalog-carousel-slide:nth-child(1) {
    transform: translateX(calc(-50% - 400px)) scale(0.75) rotateY(-25deg);
    opacity: 0.7;
    z-index: 1;
}

.dalog-carousel-slide:nth-child(2) {
    transform: translateX(-50%) scale(1) rotateY(0deg);
    opacity: 1;
    z-index: 10;
}

.dalog-carousel-slide:nth-child(3) {
    transform: translateX(calc(-50% + 400px)) scale(0.75) rotateY(25deg);
    opacity: 0.7;
    z-index: 1;
}

/* Dynamic classes - HIGHER PRIORITY (added by JS) */
.dalog-carousel-slide.left {
    transform: translateX(calc(-50% - 400px)) scale(0.75) rotateY(-25deg) !important;
    opacity: 0.7 !important;
    z-index: 1 !important;
}

.dalog-carousel-slide.center,
.dalog-carousel-slide.active {
    transform: translateX(-50%) scale(1) rotateY(0deg) !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

.dalog-carousel-slide.right {
    transform: translateX(calc(-50% + 400px)) scale(0.75) rotateY(25deg) !important;
    opacity: 0.7 !important;
    z-index: 1 !important;
}

/* Hide button on non-active slides - DEPRECATED */

/* ============================================
   SLIDE CONTAINER (Simplified - No Monitor Frame)
   ============================================ */

/* Slide Container */
.dalog-slide-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Slide Image */
.dalog-slide-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 12px;
}

.dalog-slide-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.dalog-carousel-slide:hover .dalog-slide-image img {
    transform: scale(1.02);
}

/* Text Overlay on Image */
.dalog-slide-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.dalog-slide-overlay .dalog-slide-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.dalog-slide-overlay .dalog-slide-desc {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

/* Legacy Monitor Styles (kept for backward compatibility) */
.dalog-monitor {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dalog-monitor-screen {
    position: relative;
    width: 320px;
    height: 200px;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 8px;
    overflow: hidden;
}

.dalog-monitor-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.dalog-monitor-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.dalog-monitor-stand {
    display: none;
    /* Hidden by default now */
}

/* Legacy styles for backward compatibility */
.dalog-slide-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dalog-slide-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

.dalog-slide-desc {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Per-Slide Button - Matches Gradient Button Widget */
.dalog-slide-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    /* Sizing */
    padding: 12px 28px;

    /* Typography */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;

    /* Border - Gradient Effect */
    --dalog-border-width: 2px;
    border: var(--dalog-border-width) solid transparent;
    border-radius: 100px;

    /* Background - Gradient Border Effect (transparent center, gradient border) */
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--dalog-gradient, linear-gradient(90deg, #E2133B 0%, #1C56A0 50%, #4ABCDB 100%)) border-box;

    /* Text Color */
    color: #1a1a2e !important;

    /* Animation */
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

    /* Cursor */
    cursor: pointer;

    /* Position for pseudo-elements */
    position: relative;
    overflow: hidden;
}

/* Hover State - Fill with gradient */
.dalog-slide-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dalog-gradient, linear-gradient(90deg, #E2133B 0%, #1C56A0 50%, #4ABCDB 100%));
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.dalog-slide-button:hover::before {
    opacity: 1;
}

.dalog-slide-button:hover {
    background: var(--dalog-gradient, linear-gradient(90deg, #E2133B 0%, #1C56A0 50%, #4ABCDB 100%));
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* ============================================
   MAIN BUTTON BELOW CAROUSEL
   ============================================ */

.dalog-carousel-button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding: 20px 0;
}

.dalog-carousel-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.3px;
    border: 2px solid transparent;
    border-radius: 100px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--dalog-gradient, linear-gradient(90deg, #E2133B 0%, #1C56A0 50%, #4ABCDB 100%)) border-box;
    color: #333 !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    z-index: 1;
}

/* Gradient fill overlay - extends beyond borders to cover corners */
.dalog-carousel-main-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--dalog-gradient, linear-gradient(90deg, #E2133B 0%, #1C56A0 50%, #4ABCDB 100%));
    border-radius: 100px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.dalog-carousel-main-button:hover::before {
    opacity: 1;
}

.dalog-carousel-main-button:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Navigation Arrows */
.dalog-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 20;
    color: #333;
}

.dalog-carousel-nav:hover {
    background: linear-gradient(90deg, #E2133B, #1C56A0);
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.dalog-carousel-prev {
    left: 20px;
}

.dalog-carousel-next {
    right: 20px;
}

/* Navigation Dots */
.dalog-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.dalog-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.dalog-carousel-dot:hover {
    background: #999;
    transform: scale(1.2);
}

.dalog-carousel-dot.active {
    background: linear-gradient(90deg, #E2133B, #1C56A0);
    transform: scale(1.3);
}

.dalog-carousel-dot:focus {
    outline: 2px solid #1C56A0;
    outline-offset: 2px;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
    .dalog-carousel-slide {
        width: 300px;
    }

    .dalog-carousel-slide.left {
        transform: translateX(-90%) scale(0.75);
    }

    .dalog-carousel-slide.right {
        transform: translateX(90%) scale(0.75);
    }

    .dalog-carousel-nav {
        width: 40px;
        height: 40px;
    }

    .dalog-carousel-prev {
        left: 10px;
    }

    .dalog-carousel-next {
        right: 10px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .dalog-carousel-3d {
        min-height: 380px;
    }

    .dalog-carousel-slide {
        width: 280px;
    }

    .dalog-carousel-slide.left {
        transform: translateX(-75%) scale(0.7);
        opacity: 0.4;
    }

    .dalog-carousel-slide.right {
        transform: translateX(75%) scale(0.7);
        opacity: 0.4;
    }

    .dalog-slide-image {
        height: 160px;
    }

    .dalog-slide-content {
        padding: 20px;
    }

    .dalog-slide-title {
        font-size: 18px;
    }

    .dalog-slide-desc {
        font-size: 13px;
    }

    .dalog-carousel-nav {
        width: 36px;
        height: 36px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .dalog-carousel-3d-wrapper {
        padding: 40px 0;
    }

    .dalog-carousel-3d {
        min-height: 340px;
    }

    .dalog-carousel-slide {
        width: 260px;
    }

    .dalog-carousel-slide.left,
    .dalog-carousel-slide.right {
        opacity: 0.3;
        transform: translateX(-60%) scale(0.65);
    }

    .dalog-carousel-slide.right {
        transform: translateX(60%) scale(0.65);
    }

    .dalog-slide-image {
        height: 140px;
    }

    .dalog-slide-button {
        padding: 10px 24px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Dalog Timeline Widget
   ========================================================================== */

.dalog-timeline-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
    padding-left: 60px;
}

.dalog-timeline-line {
    position: absolute;
    left: 39px;
    top: 40px;
    bottom: 40px;
    width: 4px;
    border-radius: 2px;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 2.5s ease-out;
}

.dalog-timeline-container.is-visible .dalog-timeline-line {
    transform: scaleY(1);
}

.dalog-timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.dalog-timeline-step:last-child {
    margin-bottom: 0;
}

.dalog-timeline-container.is-visible .dalog-timeline-step {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--delay, 0) * 1s);
}

.dalog-timeline-icon-wrapper {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-left: -60px;
}

.dalog-timeline-icon {
    font-size: 40px;
    color: #9C9B9B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dalog-timeline-icon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.dalog-timeline-content {
    flex: 1;
    padding-top: 15px;
}

.dalog-timeline-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

.dalog-timeline-desc {
    margin: 0;
    font-size: 15px;
    color: #575756;
    line-height: 1.6;
}

/* Timeline Responsive */
@media (max-width: 767px) {
    .dalog-timeline-container {
        padding-left: 50px;
    }

    .dalog-timeline-line {
        left: 29px;
    }

    .dalog-timeline-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-left: -50px;
    }

    .dalog-timeline-icon {
        font-size: 28px;
    }

    .dalog-timeline-icon svg {
        width: 28px;
        height: 28px;
    }

    .dalog-timeline-step {
        gap: 16px;
        margin-bottom: 40px;
    }

    .dalog-timeline-content {
        padding-top: 10px;
    }

    .dalog-timeline-title {
        font-size: 16px;
    }

    .dalog-timeline-desc {
        font-size: 14px;
    }
}

/* ==========================================================================
   Dalog Circular Features Widget
   ========================================================================== */

.dalog-circular-features-wrapper {
    width: 100%;
    margin: 0 auto;
}

.dalog-circular-features-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* Diagram Column */
.dalog-circular-features-diagram {
    position: relative;
    width: 300px;
    flex-shrink: 0;
}

.dalog-cf-sector {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    transform-origin: center;
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
}

.dalog-cf-sector:hover,
.dalog-cf-sector.active {
    transform: scale(1.05);
    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.3));
    z-index: 2;
}

/* Icons Layer */
.dalog-cf-icons-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Base Icon Style */
.dalog-cf-icon,
.dalog-cf-center-icon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Icon Positioning (assuming 500x500 SVG viewBox) */
/* Top Left */
.dalog-cf-icon-tl {
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%);
}

/* Top Right */
.dalog-cf-icon-tr {
    top: 25%;
    left: 75%;
    transform: translate(-50%, -50%);
}

/* Bottom Right */
.dalog-cf-icon-br {
    top: 75%;
    left: 75%;
    transform: translate(-50%, -50%);
}

/* Bottom Left */
.dalog-cf-icon-bl {
    top: 75%;
    left: 25%;
    transform: translate(-50%, -50%);
}

/* Center Icon */
.dalog-cf-center-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    z-index: 10;
    color: rgba(255, 255, 255, 0.8);
}

/* Display Image Column */
.dalog-circular-features-display {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 250px;
}

.dalog-circular-features-display img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease;
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .dalog-circular-features-container {
        flex-direction: column;
    }

    .dalog-circular-features-display {
        width: 100%;
    }
}

/* 3D Carousel Mobile Responsive */
@media (max-width: 768px) {
    .dalog-carousel-3d-wrapper {
        padding: 40px 0;
    }

    .dalog-carousel-3d {
        min-height: 400px;
        perspective: 600px;
        /* Reduced perspective for mobile */
    }

    .dalog-carousel-slide {
        width: 80vw !important;
        /* Force width on mobile */
        max-width: 320px;
    }

    /* Adjust positions for mobile - closer stacking */
    .dalog-carousel-slide:nth-child(1),
    .dalog-carousel-slide.left {
        transform: translateX(calc(-50% - 30px)) scale(0.85) rotateY(-10deg) !important;
        opacity: 0.5 !important;
        z-index: 5 !important;
    }

    .dalog-carousel-slide:nth-child(2),
    .dalog-carousel-slide.center,
    .dalog-carousel-slide.active {
        transform: translateX(-50%) scale(1) rotateY(0deg) !important;
        z-index: 20 !important;
        opacity: 1 !important;
    }

    .dalog-carousel-slide:nth-child(3),
    .dalog-carousel-slide.right {
        transform: translateX(calc(-50% + 30px)) scale(0.85) rotateY(10deg) !important;
        opacity: 0.5 !important;
        z-index: 5 !important;
    }

    .dalog-slide-image {
        height: 220px !important;
        /* Smaller image height on mobile */
    }
}

/* ================================================================
   Header Fixes — Template: elementor-20 (Header)
   Sticky: bdt-sticky (Element Pack / UIkit)
   ================================================================ */

/* Fix 1: Prevent header from dropping when sticky activates.
   When UIkit sets position:sticky + top:0, the margin-top remains
   applied, pushing the header 5–18 px below the viewport top. */
.elementor-20 .elementor-element.elementor-element-0c1af2a.bdt-active {
    margin-top: 0 !important;
}

/* Fix 2: Maintain pill (f8757c1) width in fixed-sticky mode.
   UIkit sets width:{viewport}px !important on the outer container;
   reinforce max-width on the pill so it does not expand to 100%.  */
@media (min-width: 768px) and (max-width: 1365px) {
    .elementor-20 .elementor-element.elementor-element-0c1af2a.bdt-sticky-fixed
        > .e-con-inner
        > .elementor-element-f8757c1 {
        flex-basis: 85% !important;
        max-width: 85% !important;
    }
}
@media (min-width: 1366px) and (max-width: 1499px) {
    .elementor-20 .elementor-element.elementor-element-0c1af2a.bdt-sticky-fixed
        > .e-con-inner
        > .elementor-element-f8757c1 {
        flex-basis: 88% !important;
        max-width: 88% !important;
    }
}
@media (min-width: 1500px) and (max-width: 1536px) {
    .elementor-20 .elementor-element.elementor-element-0c1af2a.bdt-sticky-fixed
        > .e-con-inner
        > .elementor-element-f8757c1 {
        flex-basis: 85% !important;
        max-width: 85% !important;
    }
}
@media (min-width: 1600px) and (max-width: 1679px) {
    .elementor-20 .elementor-element.elementor-element-0c1af2a.bdt-active
        > .e-con-inner
        > .elementor-element-f8757c1 {
        flex-basis: 88% !important;
        max-width: 88% !important;
    }
}

/* Fix 3: Mobile menu (ElementsKit) container width alignment.
   When the hamburger opens, constrain the panel to align with the pill. */
.elementor-20 .elementor-element.elementor-element-d29357a
    .elementskit-menu-container {
    box-sizing: border-box;
    max-width: 100%;
}

/* Fix 4: Heading alignment in mega-menu dropdown.
   ac76e4d and 73098f6 have text-align:center — override to start (left). */
.elementor-20 .elementor-element.elementor-element-ac76e4d,
.elementor-20 .elementor-element.elementor-element-73098f6 {
    text-align: start !important;
}

/* Fix 5: EH360 icon-box in Solutions panel — left-align icon + title.
   d0a26c8 uses block-start (icon on top) so flex-direction is column;
   Elementor's base defaults align-items to center, pushing the icon and
   text block to the horizontal center.  Override to flex-start.
   At max-width:767px post-20.css adds text-align:center — override it too. */
.elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-icon-box-wrapper {
    align-items: flex-start !important;
}
@media (max-width: 767px) {
    .elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-icon-box-wrapper {
        text-align: start !important;
        align-items: flex-start !important;
    }
}

/* Fix 6a: Desktop CTA buttons at tablet (768–1024px).
   The pill's 50/50 logo–hamburger split leaves no room; shrink both to 25%
   and reveal b0bd125 at 50%. */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-20 .elementor-element.elementor-element-1a4a6dc {
        flex-basis: 25% !important;
        max-width: 25% !important;
    }
    .elementor-20 .elementor-element.elementor-element-0cc010b {
        flex-basis: 25% !important;
        max-width: 25% !important;
    }
    .elementor-20 .elementor-element.elementor-element-b0bd125 {
        display: flex !important;
        flex-basis: 50% !important;
        max-width: 50% !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }
    .elementor-20 .elementor-element.elementor-element-b0bd125 .dalog-gradient-button {
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* Fix 6b: Styles for the CTA <li> injected into the mobile accordion menu.
   The JS handles display via inline style !important (beats any stylesheet
   !important).  This block only adds layout + separator. */
.dalog-mobile-cta-item {
    list-style: none;
    padding: 16px 20px 8px;
    margin-top: 4px;
}
@media (min-width: 768px) {
    .dalog-mobile-cta-item {
        display: none !important;
    }
}

/* Fix 7: Gap 10px entre filas en las secciones de Solutions en mobile.
   572f33a = Application-Specific Solutions, 142d0d5 = Monitoring Technologies.
   Post-20.css establece row-gap:20px en esos contenedores; igualarlo a Industries. */
@media (max-width: 767px) {
    .elementor-20 .elementor-element.elementor-element-572f33a,
    .elementor-20 .elementor-element.elementor-element-142d0d5 {
        --row-gap: 10px;
        gap: 10px 0px !important;
    }
}

/* Mobile menu list: 95% width, left-aligned */
@media (max-width: 1024px) {
    .elementor-element-05aafcf .e-n-menu-heading {
        width: 95% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* Mobile menu: merge the <ul> pill and the CTA div into one visual block.
   The <ul> gets only top radius; CTA div only bottom radius.
   flex-grow:0 on the <ul> prevents it from filling the full wrapper height,
   which would otherwise push the CTA div to the bottom of the screen. */
@media (max-width: 767px) {
    .elementor-element-05aafcf .e-n-menu-heading {
        flex-grow: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        padding-bottom: 0 !important;
        /* Sombra continua del bloque menú+CTA: misma sombra en ambas piezas,
           recortada en la costura para que se lea como un solo bloque.
           clip-path inset negativo deja pasar la sombra por los otros lados. */
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24) !important;
        clip-path: inset(-12px -12px 0px -12px);
    }
    .elementor-element-05aafcf .dalog-mobile-cta-item {
        background: #fff !important;
        border-radius: 0 0 24px 24px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        width: 95% !important;
        margin: 0 auto 0 0 !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24) !important;
        clip-path: inset(0px -12px -12px -12px);
    }
    /* El wrapper del dropdown tiene overflow-x:hidden / overflow-y:auto y
       recorta la sombra inferior del CTA (último hijo, al ras del borde).
       El padding inferior da espacio para que la sombra se vea: los scroll
       containers recortan en el padding box, no en el content box. */
    .elementor-element-05aafcf .e-n-menu-wrapper {
        padding-bottom: 14px !important;
    }
}

/* ==========================================================================
   Fix 8: Solutions mega-menu mobile — card borders + icon alignment
   Group containers (572f33a, 142d0d5) already have white bg + 10px radius
   from Elementor settings; here we add the visible border and center items.
   Individual icon-box items get their own card border + row layout.
   Icon column is fixed at 50px so all icons align vertically.
   ========================================================================== */
@media (max-width: 767px) {

    /* ── Mega menu container: remove backdrop-filter + white background ── */
    .elementor-20 .elementor-element.elementor-element-94b8995,
    .elementor-20 .elementor-element.elementor-element-183e716,
    .elementor-20 .elementor-element.elementor-element-d1a912b,
    .elementor-20 .elementor-element.elementor-element-94b8995 > .e-con-inner,
    .elementor-20 .elementor-element.elementor-element-183e716 > .e-con-inner,
    .elementor-20 .elementor-element.elementor-element-d1a912b > .e-con-inner,
    .elementor-element-05aafcf .e-n-menu-content,
    .elementor-element-05aafcf .e-n-menu-content > .e-con,
    .elementor-element-05aafcf .e-n-menu-heading {
        background-color: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ── Group containers: box-shadow card effect (same as Industries cards) ── */
    .elementor-20 .elementor-element.elementor-element-572f33a,
    .elementor-20 .elementor-element.elementor-element-142d0d5 {
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Individual item cards: all icon-boxes inside the mega menu content ──
       Targets: EH360 (d0a26c8) + App Spec Solutions items (2bb88df, 393b933, 3b1a359)
       + Monitoring Tech items (44057e4, 9ebc78a, a8d07d2) */
    .elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-widget-container,
    .elementor-20 .elementor-element.elementor-element-2bb88df .elementor-widget-container,
    .elementor-20 .elementor-element.elementor-element-393b933 .elementor-widget-container,
    .elementor-20 .elementor-element.elementor-element-3b1a359 .elementor-widget-container,
    .elementor-20 .elementor-element.elementor-element-44057e4 .elementor-widget-container,
    .elementor-20 .elementor-element.elementor-element-9ebc78a .elementor-widget-container,
    .elementor-20 .elementor-element.elementor-element-a8d07d2 .elementor-widget-container {
        background: #FFFFFF;
        border: none;
        border-radius: 10px;
        box-shadow: none;
        padding: 10px 14px;
        box-sizing: border-box;
    }

    /* ── Force row layout: icon left, text right, vertically centered ── */
    .elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-icon-box-wrapper,
    .elementor-20 .elementor-element.elementor-element-2bb88df .elementor-icon-box-wrapper,
    .elementor-20 .elementor-element.elementor-element-393b933 .elementor-icon-box-wrapper,
    .elementor-20 .elementor-element.elementor-element-3b1a359 .elementor-icon-box-wrapper,
    .elementor-20 .elementor-element.elementor-element-44057e4 .elementor-icon-box-wrapper,
    .elementor-20 .elementor-element.elementor-element-9ebc78a .elementor-icon-box-wrapper,
    .elementor-20 .elementor-element.elementor-element-a8d07d2 .elementor-icon-box-wrapper {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        text-align: start !important;
    }

    /* ── Fixed icon column: 50px keeps all icons vertically aligned ── */
    .elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-icon-box-icon,
    .elementor-20 .elementor-element.elementor-element-2bb88df .elementor-icon-box-icon,
    .elementor-20 .elementor-element.elementor-element-393b933 .elementor-icon-box-icon,
    .elementor-20 .elementor-element.elementor-element-3b1a359 .elementor-icon-box-icon,
    .elementor-20 .elementor-element.elementor-element-44057e4 .elementor-icon-box-icon,
    .elementor-20 .elementor-element.elementor-element-9ebc78a .elementor-icon-box-icon,
    .elementor-20 .elementor-element.elementor-element-a8d07d2 .elementor-icon-box-icon {
        flex: 0 0 50px;
        width: 50px !important;
        margin-block-end: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Uniform icon size: font-size for font icons ── */
    .elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-icon,
    .elementor-20 .elementor-element.elementor-element-2bb88df .elementor-icon,
    .elementor-20 .elementor-element.elementor-element-393b933 .elementor-icon,
    .elementor-20 .elementor-element.elementor-element-3b1a359 .elementor-icon,
    .elementor-20 .elementor-element.elementor-element-44057e4 .elementor-icon,
    .elementor-20 .elementor-element.elementor-element-9ebc78a .elementor-icon,
    .elementor-20 .elementor-element.elementor-element-a8d07d2 .elementor-icon {
        font-size: 40px !important;
    }

    /* ── SVG icon size: font-size alone doesn't resize inline SVGs ── */
    .elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-icon svg,
    .elementor-20 .elementor-element.elementor-element-2bb88df .elementor-icon svg,
    .elementor-20 .elementor-element.elementor-element-393b933 .elementor-icon svg,
    .elementor-20 .elementor-element.elementor-element-3b1a359 .elementor-icon svg,
    .elementor-20 .elementor-element.elementor-element-44057e4 .elementor-icon svg,
    .elementor-20 .elementor-element.elementor-element-9ebc78a .elementor-icon svg,
    .elementor-20 .elementor-element.elementor-element-a8d07d2 .elementor-icon svg {
        width: 40px !important;
        height: auto !important;
    }

    /* ── Center the mega-menu content items within the panel ── */
    .elementor-20 .elementor-element-05aafcf .e-n-menu-content .e-con-inner {
        align-items: center !important;
    }

    /* ── EH360 widget: full width ── */
    .elementor-20 .elementor-element.elementor-element-d0a26c8 {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── EH360 wrapper container (8b811e6): force 100% width on mobile.
       Elementor sets --width:33.333% for desktop columns; override for mobile. ── */
    .elementor-20 .elementor-element.elementor-element-8b811e6 {
        width: 100% !important;
        max-width: 100% !important;
        --width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24) !important;
    }

    /* ── EH360 inner widget-container: no extra shadow (8b811e6 is the card) ── */
    .elementor-20 .elementor-element.elementor-element-d0a26c8 .elementor-widget-container {
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 10px 14px !important;
    }
}

/* About Us — sección "Why Customers Trust DALOG" (widget HTML, prefijo d2).
   En móvil las líneas decorativas (::before/::after con width calc(50% + 70px))
   sobresalen del viewport en pantallas angostas y generan scroll horizontal.
   Fix: recortarlas en el wrapper y alargarlas a 50vw para que siempre lleguen
   exactamente al borde, en cualquier ancho de pantalla. */
@media (max-width: 766px) {
    /* El recorte va en el contenedor full-bleed de la sección (6bf298b8,
       el de la imagen de fondo), no en .d2-wrapper: el wrapper tiene 10px
       de padding lateral heredado y cortaba las líneas antes del borde. */
    .elementor-2790 .elementor-element.elementor-element-6bf298b8 {
        overflow: hidden;
    }
    .elementor-2790 .d2-item:nth-of-type(2) .d2-icon-wrap::before,
    .elementor-2790 .d2-item:nth-of-type(4) .d2-icon-wrap::after,
    .elementor-2790 .d2-item:nth-of-type(6) .d2-icon-wrap::before,
    .elementor-2790 .d2-item:nth-of-type(8) .d2-icon-wrap::after {
        width: 50vw !important;
    }
}