.elementor-1495 .elementor-element.elementor-element-4130b442{--display:flex;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}@media(max-width:880px){.elementor-1495 .elementor-element.elementor-element-4130b442{--width:15%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-72a60ded *//* ==========================================
   JHL THEME TOGGLE — FULL EFFECTS VERSION
   Includes: glow, pulse, flicker, tooltip, ripple, wobble
========================================== */

.jhl-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 72px;
    height: 32px;
    padding: 4px 6px;
    border-radius: 999px;
    border: 2px solid #00d4ff;
    background: rgba(0, 212, 255, 0.12);
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden; /* Needed for ripple */
}

/* Hover flicker spark */
.jhl-toggle:hover {
    background: rgba(0, 212, 255, 0.18);
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.8);
}

/* ICON WRAPPER */
.jhl-icon-wrap {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jhl-icon {
    width: 22px;
    height: 22px;
    color: #00d4ff; /* inactive pure cyan */
    transition: color 0.3s ease, filter 0.3s ease;
}

/* Pulse animation for ACTIVE ICON */
@keyframes neonPulse {
    0%, 100% { filter: drop-shadow(0 0 6px #c44cff); }
    50%      { filter: drop-shadow(0 0 14px #c44cff); }
}

/* ACTIVE ICON = purple + pulse */
.jhl-icon-wrap.active .jhl-icon {
    color: #c44cff;
    animation: neonPulse 2.2s ease-in-out infinite;
}

/* Only active icon glows (inactive = no glow) */
.jhl-icon-wrap.active .jhl-icon {
    filter:
        drop-shadow(0 0 6px #c44cff)
        drop-shadow(0 0 14px #c44cff)
        drop-shadow(0 0 22px #c44cff);
}

/* ----------- SLIDING PILL BACKGROUND ----------- */

.jhl-toggle::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 26px;
    border-radius: 999px;
    background: rgba(0, 212, 255, 0.18);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.75);
    transition: left 0.28s cubic-bezier(.4,1.4,.6,1), background 0.25s ease, box-shadow 0.25s ease;
}

/* MICRO WOBBLE ON SLIDE */
@keyframes wobble {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

body.dark-mode .jhl-toggle::before {
    left: calc(100% - 31px);
    background: rgba(196, 76, 255, 0.22);
    box-shadow: 0 0 20px rgba(196, 76, 255, 0.95);
    animation: wobble 0.18s ease-out;
}

/* ----------- RIPPLE EFFECT ON CLICK ----------- */

.jhl-ripple {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(196, 76, 255, 0.4);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

.jhl-ripple.active {
    animation: rippleExpand 0.45s ease-out forwards;
}

@keyframes rippleExpand {
    0%   { transform: scale(0);   opacity: 0.4; }
    100% { transform: scale(6);   opacity: 0;   }
}

/* ----------- TOOLTIP ----------- */

.jhl-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 212, 255, 0.14);
    border: 1px solid #00d4ff;
    color: #00d4ff;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.25s ease;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.jhl-toggle:hover::after {
    opacity: 1;
}/* End custom CSS */