/* ===== SLEEP DEVICE WIDGET FOR ELEMENTOR ===== */

/* Import Dana Font */
@import url('fonts/dana-font.css');

/* Variables */
:root {
    --sdw-bg: #eceef4;
    --sdw-text: #2D3436; /* primary text for strong contrast */
    --sdw-muted: #636E72; /* secondary text */
    --sdw-title: #2D3436; /* headlines */
    --sdw-card: #ffffff;
    --sdw-blue: #74b9ff; /* supporting tint */
    --sdw-blue-strong: #0984E3; /* primary CTA */
    --sdw-blue-alt: #6cb2d9;
    --sdw-pink: #e08aa4;
    --sdw-pink-strong: #d76b8c;
    --sdw-orange: #eba06b;
    --sdw-orange-strong: #df7e3f;
    --sdw-yellow: #e9ba68;
    --sdw-yellow-strong: #d79f3a;
    --sdw-teal: #7fd1cc;
    --sdw-teal-strong: #55b9b2;
    --sdw-calm: #549180;
    --sdw-float-distance: 8px;
    --sdw-float-scale: 1.02;
    --sdw-float-duration: 3s;
    /* Font family variable for consistent usage with comprehensive Persian font fallbacks */
    --sdw-font-family: "Dana", "Vazirmatn", "Tahoma", "IRANSans", "Tehran Sans", "Arial Unicode MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Apply Dana font to all widget text elements with cross-browser compatibility */
.elementor-widget-sleep_device_features,
.elementor-widget-sleep_device_features *,
.elementor-widget-sleep_device_features .sleep-experience,
.elementor-widget-sleep_device_features .sleep-experience * {
    font-family: var(--sdw-font-family);
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Layout Components */
.elementor-widget-sleep_device_features .sleep-experience {
    padding: 32px 24px 32px;
    display: flex;
    align-items: center;
    overflow-y: auto; /* Allow scrolling on very small screens */
    position: relative; /* Ensure proper stacking context */
    z-index: 1; /* Establish a new stacking context */
    font-family: var(--sdw-font-family);
}

.elementor-widget-sleep_device_features .sleep-experience.full-height {
    height: 100vh;
    height: 100dvh;
}

.elementor-widget-sleep_device_features .container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.elementor-widget-sleep_device_features .title {
    font-family: var(--sdw-font-family);
    font-weight: 700; /* stronger hierarchy */
    font-size: clamp(26px, 4.2vw, 44px);
    line-height: 1.2; /* tighter for desktop fit */
    text-align: center;
    color: var(--sdw-title);
    margin: 32px 0 8px; /* further increased top margin */
}

.elementor-widget-sleep_device_features .lead {
    font-family: var(--sdw-font-family);
    max-width: 980px;
    margin: 0 auto 12px; /* further reduced bottom margin */
    text-align: center;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6; /* tighter for desktop fit */
    color: var(--sdw-muted);
}

.elementor-widget-sleep_device_features .content-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px; /* reduced gap for desktop fit */
}

.elementor-widget-sleep_device_features .center-image {
    position: relative;
}

.elementor-widget-sleep_device_features .center-image .base-image {
    width: 540px;
    max-width: 36vw;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.18));
    border-radius: 12px;
}

.elementor-widget-sleep_device_features .center-image .overlay-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 540px;
    max-width: 36vw;
    height: auto;
    display: block;
    border-radius: 12px;
    cursor: pointer;
}

.elementor-widget-sleep_device_features .center-image .overlay-image.has-float-animation {
    animation: sdwFloatAnimation var(--sdw-float-duration) ease-in-out infinite;
}

@keyframes sdwFloatAnimation {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        transform: translateX(-50%) translateY(calc(-1 * var(--sdw-float-distance))) scale(var(--sdw-float-scale));
    }
}

.elementor-widget-sleep_device_features .features {
    display: flex;
    flex-direction: column;
    gap: 32px; /* reduced gap for desktop fit */
    list-style: none;
    padding: 0;
    margin: 0;
}

.elementor-widget-sleep_device_features .feature {
    display: flex;
    align-items: center;
    gap: 18px; /* slightly reduced */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    border-radius: 16px;
    padding: 20px; /* slightly reduced */
    background-color: transparent;
}

.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature:hover,
.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature.is-hovered {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Mirror alignment for the left column to keep icons on outer side */
.elementor-widget-sleep_device_features .features-left .feature {
    flex-direction: row-reverse;
}

.elementor-widget-sleep_device_features .text h2 {
    font-family: var(--sdw-font-family);
    margin: 0 0 4px; /* tighter spacing */
    font-weight: 600; /* feature titles */
    /* font-size removed to allow Elementor controls to take precedence */
    color: var(--sdw-title);
    transition: color 0.3s ease;
    position: relative;
}

.elementor-widget-sleep_device_features .text h2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sdw-blue-strong);
    transition: width 0.3s ease;
}

.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature:hover .text h2,
.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature.is-hovered .text h2 {
    color: var(--sdw-blue-strong);
}

.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature:hover .text h2::after,
.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature.is-hovered .text h2::after {
    width: 100%;
}

.elementor-widget-sleep_device_features .text p {
    font-family: var(--sdw-font-family);
    margin: 0;
    /* font-size removed to allow Elementor controls to take precedence */
    color: var(--sdw-muted);
    max-width: 450px;
    line-height: 1.7; /* tighter for desktop fit */
}

.elementor-widget-sleep_device_features .icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature:hover .icon,
.elementor-widget-sleep_device_features .sleep-experience.has-animations .feature.is-hovered .icon {
    transform: scale(1.1);
    animation: sdwPulseGlow 2s ease-in-out infinite;
}

@keyframes sdwPulseGlow {
    0%, 100% {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    }
    50% {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    }
}

.elementor-widget-sleep_device_features .icon svg {
    color: #fff;
    width: 26px;
    height: 26px;
    display: block;
}

.elementor-widget-sleep_device_features .is-blue {
    background: linear-gradient(145deg, var(--sdw-blue), var(--sdw-blue-strong));
}

.elementor-widget-sleep_device_features .is-pink {
    background: linear-gradient(145deg, var(--sdw-pink), var(--sdw-pink-strong));
}

.elementor-widget-sleep_device_features .is-orange {
    background: linear-gradient(145deg, var(--sdw-orange), var(--sdw-orange-strong));
}

.elementor-widget-sleep_device_features .is-yellow {
    background: linear-gradient(145deg, var(--sdw-yellow), var(--sdw-yellow-strong));
}

.elementor-widget-sleep_device_features .is-teal {
    background: linear-gradient(145deg, var(--sdw-teal), var(--sdw-teal-strong));
}

.elementor-widget-sleep_device_features .is-blue-alt {
    background: linear-gradient(145deg, var(--sdw-blue-alt), #4c95bd);
}

/* Decorative connectors from icons toward center image */
.elementor-widget-sleep_device_features .features-left .icon::after,
.elementor-widget-sleep_device_features .features-right .icon::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    width: clamp(42px, 5vw, 84px);
    pointer-events: none;
    z-index: 0;
}

/* Left column: point connector toward center (to the right) */
.elementor-widget-sleep_device_features .features-left .icon::after {
    inset-inline-start: 100%;
    background: linear-gradient(90deg, rgba(84, 145, 128, 0.0), rgba(84, 145, 128, 0.45));
}

/* Right column: point connector toward center (to the left) */
.elementor-widget-sleep_device_features .features-right .icon::after {
    inset-inline-end: 100%;
    background: linear-gradient(270deg, rgba(84, 145, 128, 0.0), rgba(84, 145, 128, 0.45));
}

/* Background gradient simulation */
.elementor-widget-sleep_device_features .sleep-experience.has-gradient {
    background: radial-gradient(1200px 900px at 50% 120px,
    rgba(84, 145, 128, 0.22) 0%,
    rgba(84, 145, 128, 0.12) 35%,
    rgba(84, 145, 128, 0.06) 60%,
    var(--sdw-bg) 100%);
}

/* Animations for elements */
@keyframes sdwFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sdwFadeInScale {
    from {
        opacity: 0.7;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fade in animation for elements when they enter viewport */
.elementor-widget-sleep_device_features .feature.animate-in {
    animation: sdwFadeInUp 0.6s ease-out forwards;
}

.elementor-widget-sleep_device_features .center-image.animate-in {
    animation: sdwFadeInScale 0.8s ease-out forwards;
}

/* Responsive */
/* Class-based responsive behaviors driven by JS .mobile-view for per-instance control */
.elementor-widget-sleep_device_features .sleep-experience.mobile-view .content-grid {
    grid-template-columns: 1fr;
    gap: 32px;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view .features-left .feature {
    flex-direction: row;
}

/* Default: hide connectors when in mobile-view; can be overridden by .show-connectors-mobile */
.elementor-widget-sleep_device_features .sleep-experience.mobile-view .features-left .icon::after,
.elementor-widget-sleep_device_features .sleep-experience.mobile-view .features-right .icon::after {
    display: none;
}

/* Override: explicitly show connectors on mobile if enabled */
.elementor-widget-sleep_device_features .sleep-experience.mobile-view.show-connectors-mobile .features-left .icon::after,
.elementor-widget-sleep_device_features .sleep-experience.mobile-view.show-connectors-mobile .features-right .icon::after {
    display: block;
}

/* Disable float animation on mobile if animations are disabled */
.elementor-widget-sleep_device_features .sleep-experience.mobile-view.no-mobile-animations .center-image .overlay-image.has-float-animation {
    animation: none !important;
}

/* Mobile layout: horizontal carousel for features */
.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-layout-horizontal .features {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-layout-horizontal .features::-webkit-scrollbar {
    height: 6px;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-layout-horizontal .features::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-layout-horizontal .feature {
    min-width: 80%;
    scroll-snap-align: start;
}

/* Mobile section ordering */
.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-image-first .content-grid > .center-image {
    order: 1;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-image-first .content-grid > .features-left {
    order: 2;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-image-first .content-grid > .features-right {
    order: 3;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-left-first .content-grid > .features-left {
    order: 1;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-left-first .content-grid > .center-image {
    order: 2;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-left-first .content-grid > .features-right {
    order: 3;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-right-first .content-grid > .features-right {
    order: 1;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-right-first .content-grid > .center-image {
    order: 2;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-order-right-first .content-grid > .features-left {
    order: 3;
}

/* Mobile alignment helpers */
.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-align-center .feature {
    align-items: center;
    text-align: center;
}

.elementor-widget-sleep_device_features .sleep-experience.mobile-view.mobile-align-stretch .features {
    align-items: stretch;
}

@media (max-width: 1300px) {
    .elementor-widget-sleep_device_features .content-grid {
        grid-template-columns: 1fr;
        gap: 24px; /* reduced for mobile stacking */
    }

    .elementor-widget-sleep_device_features .features-left .feature {
        flex-direction: row;
    }

    /* MODIFIED: Make center image significantly bigger on mobile */
    .elementor-widget-sleep_device_features .center-image .base-image,
    .elementor-widget-sleep_device_features .center-image .overlay-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ADDED: Reduce container padding to give more space for the image */
    .elementor-widget-sleep_device_features .sleep-experience {
        padding: 24px 12px 24px;
    }

    .elementor-widget-sleep_device_features .features {
        gap: 24px; /* further reduced for mobile */
    }

    .elementor-widget-sleep_device_features .text h2 {
        /* font-size removed to allow Elementor responsive controls to take precedence */
    }

    .elementor-widget-sleep_device_features .text p {
        /* font-size removed to allow Elementor responsive controls to take precedence */
        line-height: 1.6;
    }

    /* Hide connectors on stacked layout */
    .elementor-widget-sleep_device_features .features-left .icon::after,
    .elementor-widget-sleep_device_features .features-right .icon::after {
        display: none;
    }

    /* Mobile-specific adjustments for animations */
    .elementor-widget-sleep_device_features .sleep-experience.has-animations:not(.no-mobile-animations) .features-left .feature,
    .elementor-widget-sleep_device_features .sleep-experience.has-animations:not(.no-mobile-animations) .features-right .feature {
        animation: sdwFadeInUp 0.8s ease-out both;
    }

    .elementor-widget-sleep_device_features .sleep-experience.has-animations:not(.no-mobile-animations) .features .feature:nth-child(1) {
        animation-delay: 0.6s;
    }

    .elementor-widget-sleep_device_features .sleep-experience.has-animations:not(.no-mobile-animations) .features .feature:nth-child(2) {
        animation-delay: 0.8s;
    }

    .elementor-widget-sleep_device_features .sleep-experience.has-animations:not(.no-mobile-animations) .features .feature:nth-child(3) {
        animation-delay: 1.0s;
    }
}

@media (max-width: 600px) {
    /* MODIFIED: Keep maximum size for very small screens with even less padding */
    .elementor-widget-sleep_device_features .center-image .base-image,
    .elementor-widget-sleep_device_features .center-image .overlay-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ADDED: Further reduce padding on very small screens */
    .elementor-widget-sleep_device_features .sleep-experience {
        padding: 20px 8px 20px;
    }

    .elementor-widget-sleep_device_features .features {
        gap: 20px; /* minimal gap for very small screens */
    }

    .elementor-widget-sleep_device_features .feature {
        padding: 16px; /* reduced padding for mobile */
    }
}

/* ===== ENHANCED CROSS-BROWSER DANA FONT SUPPORT ===== */

/* Ensure font loading across all browsers and contexts */
.elementor-widget-sleep_device_features,
.elementor-widget-sleep_device_features .sleep-experience,
.elementor-widget-sleep_device_features .title,
.elementor-widget-sleep_device_features .lead,
.elementor-widget-sleep_device_features .text h2,
.elementor-widget-sleep_device_features .text h3,
.elementor-widget-sleep_device_features .text p,
.elementor-widget-sleep_device_features .btn {
    font-family: var(--sdw-font-family) !important;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Internet Explorer compatibility */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .elementor-widget-sleep_device_features,
    .elementor-widget-sleep_device_features * {
        font-family: "Tahoma", "Arial Unicode MS", Arial, sans-serif !important;
    }
}

/* Safari specific optimizations */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .elementor-widget-sleep_device_features {
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke: 0.01em transparent;
    }
}

/* Chrome and Edge Chromium optimizations */
@supports (font-variation-settings: normal) {
    .elementor-widget-sleep_device_features {
        font-variant-ligatures: common-ligatures;
        font-variant-numeric: oldstyle-nums;
    }
}

/* Firefox specific font rendering */
@-moz-document url-prefix() {
    .elementor-widget-sleep_device_features {
        -moz-font-feature-settings: "kern" 1, "liga" 1;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Fallback for browsers that don't support Dana font */
@supports not (font-family: "Dana") {
    .elementor-widget-sleep_device_features,
    .elementor-widget-sleep_device_features * {
        font-family: "Vazirmatn", "Tahoma", "Arial Unicode MS", Arial, sans-serif !important;
    }
}

/* Ensure proper RTL text rendering for Persian content */
.elementor-widget-sleep_device_features[lang="fa"],
.elementor-widget-sleep_device_features[dir="rtl"],
.elementor-widget-sleep_device_features .persian-text {
    direction: rtl;
    text-align: right;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

/* Force font inheritance for all nested elements */
.elementor-widget-sleep_device_features input,
.elementor-widget-sleep_device_features textarea,
.elementor-widget-sleep_device_features select,
.elementor-widget-sleep_device_features button {
    font-family: inherit !important;
}

/* Preload indicator for font loading */
.elementor-widget-sleep_device_features.font-loading {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.elementor-widget-sleep_device_features.font-loaded {
    opacity: 1;
}