.ihp-root,
.ihp-root * {
    box-sizing: border-box;
}

.ihp-root {
    /* Keep the widget inside its Elementor column/container.
       width:auto is important here: width:100% + user-set left/right margins
       can make the page wider than the mobile viewport. */
    width: auto;
    max-width: 100%;
    min-width: 0;
}

.elementor-widget-interactive-hover-panels,
.elementor-widget-interactive-hover-panels > .elementor-widget-container {
    min-width: 0;
    max-width: 100%;
}

.ihp-panels {
    --ihp-panel-height: 304px;
    --ihp-collapsed-width: 94px;
    --ihp-mobile-closed-height: 92px;
    --ihp-speed: 450ms;
    --ihp-closed-title-offset: 18px;
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ihp-panel {
    position: relative;
    isolation: isolate;
    flex: 0 0 var(--ihp-collapsed-width);
    height: var(--ihp-panel-height);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    background-color: #222;
    background-image: var(--ihp-bg-image, none);
    background-position: var(--ihp-bg-position, center center);
    background-size: cover;
    background-repeat: no-repeat;
    transition:
        flex-basis var(--ihp-speed) cubic-bezier(.22,.61,.36,1),
        flex-grow var(--ihp-speed) cubic-bezier(.22,.61,.36,1),
        height var(--ihp-speed) cubic-bezier(.22,.61,.36,1),
        transform var(--ihp-speed) ease;
    -webkit-tap-highlight-color: transparent;
}

.ihp-panel.is-active {
    flex: 1 1 0%;
}

.ihp-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(0,0,0,.18);
    transition: background var(--ihp-speed) ease, opacity var(--ihp-speed) ease;
}

.ihp-panel.is-active::before {
    background: linear-gradient(180deg, rgba(0,0,0,.02) 24%, rgba(0,0,0,.58) 100%);
}

.ihp-panel[style*="--ihp-has-custom-overlay:1"].is-active::before {
    background: linear-gradient(180deg, rgba(0,0,0,.02) 24%, var(--ihp-custom-active-overlay, rgba(0,0,0,.58)) 100%) !important;
}

.ihp-panel__content {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    padding: 26px 30px 28px;
    overflow: hidden;
    pointer-events: none;
}

.ihp-panel__title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    transform-origin: left bottom;
    transition:
        transform var(--ihp-speed) cubic-bezier(.22,.61,.36,1),
        opacity calc(var(--ihp-speed) * .7) ease;
}

.ihp-panel:not(.is-active) .ihp-panel__content {
    padding: 0;
    justify-content: flex-end;
    align-items: center;
}

.ihp-panel:not(.is-active) .ihp-panel__title {
    position: absolute;
    left: 50%;
    bottom: var(--ihp-closed-title-offset);
    width: max-content;
    max-width: calc(var(--ihp-panel-height) - (var(--ihp-closed-title-offset) * 2));
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%) rotate(-90deg) translateX(50%);
    transform-origin: center bottom;
}

.ihp-panel__description {
    overflow-wrap: anywhere;
    color: #f2f2f2;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    max-width: 660px;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity calc(var(--ihp-speed) * .72) ease calc(var(--ihp-speed) * .18),
        transform var(--ihp-speed) ease calc(var(--ihp-speed) * .12);
}

.ihp-panel:not(.is-active) .ihp-panel__description {
    opacity: 0;
    transform: translateY(14px);
    visibility: hidden;
    transition-delay: 0ms;
}

.ihp-panel:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* JS also adds this class from the widget's actual rendered width.
   This protects narrow Elementor columns and mobile previews even when the
   browser/layout viewport is wider than the visible widget area. */
.ihp-root.ihp-is-vertical .ihp-panels {
    flex-direction: column;
}

.ihp-root.ihp-is-vertical .ihp-panel,
.ihp-root.ihp-is-vertical .ihp-panel.is-active {
    flex: 0 0 auto;
    width: 100%;
    height: var(--ihp-mobile-closed-height);
}

.ihp-root.ihp-is-vertical .ihp-panel.is-active {
    height: var(--ihp-panel-height);
}

.ihp-root.ihp-is-vertical .ihp-panel:not(.is-active) .ihp-panel__content {
    padding: 8px 16px;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.ihp-root.ihp-is-vertical .ihp-panel:not(.is-active) .ihp-panel__title {
    position: static;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none;
    margin: 0;
}

.ihp-root.ihp-is-vertical .ihp-panel:not(.is-active) .ihp-panel__description {
    display: none;
}

/* Tablet/mobile vertical accordion option: 1024px */
@media (max-width: 1024px) {
    .ihp-root.ihp-breakpoint-1024 .ihp-panels {
        flex-direction: column;
    }

    .ihp-root.ihp-breakpoint-1024 .ihp-panel,
    .ihp-root.ihp-breakpoint-1024 .ihp-panel.is-active {
        flex: 0 0 auto;
        width: 100%;
        height: var(--ihp-mobile-closed-height);
    }

    .ihp-root.ihp-breakpoint-1024 .ihp-panel.is-active {
        height: var(--ihp-panel-height);
    }

    .ihp-root.ihp-breakpoint-1024 .ihp-panel:not(.is-active) .ihp-panel__content {
        /* Keep the closed-card title vertically centered, but left aligned.
           A small fixed padding keeps 64-70px closed heights usable. */
        padding: 8px 16px;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
    }

    .ihp-root.ihp-breakpoint-1024 .ihp-panel:not(.is-active) .ihp-panel__title {
        position: static;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        transform: none;
        margin: 0;
    }

    /* Hidden descriptions must not occupy flex space in short closed cards.
       This is what keeps the title visible when Mobile Closed Height is 70px. */
    .ihp-root.ihp-breakpoint-1024 .ihp-panel:not(.is-active) .ihp-panel__description {
        display: none;
    }
}

/* Default mobile vertical accordion: 767px */
@media (max-width: 767px) {
    .ihp-root.ihp-breakpoint-767 .ihp-panels {
        flex-direction: column;
    }

    .ihp-root.ihp-breakpoint-767 .ihp-panel,
    .ihp-root.ihp-breakpoint-767 .ihp-panel.is-active {
        flex: 0 0 auto;
        width: 100%;
        height: var(--ihp-mobile-closed-height);
    }

    .ihp-root.ihp-breakpoint-767 .ihp-panel.is-active {
        height: var(--ihp-panel-height);
    }

    .ihp-root.ihp-breakpoint-767 .ihp-panel:not(.is-active) .ihp-panel__content {
        /* Keep the closed-card title vertically centered, but left aligned.
           A small fixed padding keeps 64-70px closed heights usable. */
        padding: 8px 16px;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
    }

    .ihp-root.ihp-breakpoint-767 .ihp-panel:not(.is-active) .ihp-panel__title {
        position: static;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        transform: none;
        margin: 0;
    }

    /* Do not let the invisible description push/clip the title. */
    .ihp-root.ihp-breakpoint-767 .ihp-panel:not(.is-active) .ihp-panel__description {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ihp-panel,
    .ihp-panel::before,
    .ihp-panel__title,
    .ihp-panel__description {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

/* -------------------------------------------------------------------------
 * Overflow hardening (v1.0.4)
 *
 * Elementor pages can inherit responsive margins/widths from a desktop
 * layout. On a narrow viewport those values may make the widget's margin box
 * wider than its parent even though the panels themselves are responsive.
 * These rules keep this widget from creating document-level horizontal scroll.
 * ---------------------------------------------------------------------- */
.elementor-widget-interactive-hover-panels,
.elementor-widget-interactive-hover-panels > .elementor-widget-container,
.elementor-widget-interactive-hover-panels .ihp-root,
.elementor-widget-interactive-hover-panels .ihp-panels {
    min-width: 0;
    max-width: 100%;
}

/* Clip only horizontal paint/scroll overflow generated inside this widget.
   `overflow-x: clip` does not add a scrollbar like overflow:auto can. */
.elementor-widget-interactive-hover-panels,
.elementor-widget-interactive-hover-panels > .elementor-widget-container,
.ihp-root,
.ihp-panels {
    overflow-x: clip;
}

/* JS adds this only when the rendered widget escapes its Elementor parent.
   It is intentionally targeted instead of globally hiding page overflow. */
.ihp-root.ihp-force-contained {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ihp-root.ihp-force-contained .ihp-panels,
.ihp-root.ihp-has-overflow .ihp-panels {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* A vertical layout must always use the available inline width, even if a
   theme or another plugin has a generic `.ihp-panel` / flex rule. */
.ihp-root.ihp-is-vertical,
.ihp-root.ihp-is-vertical .ihp-panels {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.ihp-root.ihp-is-vertical .ihp-panels {
    display: flex !important;
    flex-direction: column !important;
}

.ihp-root.ihp-is-vertical .ihp-panel,
.ihp-root.ihp-is-vertical .ihp-panel.is-active {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* On actual phone widths, horizontal outer margins are the most common cause
   of the "whole page can be dragged sideways" symptom. Use the widget's
   responsive padding control for mobile inset spacing instead. */
@media (max-width: 767px) {
    .elementor-widget-interactive-hover-panels,
    .elementor-widget-interactive-hover-panels > .elementor-widget-container,
    .elementor-widget-interactive-hover-panels .ihp-root,
    .elementor-widget-interactive-hover-panels .ihp-panels {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor-widget-interactive-hover-panels .ihp-root {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Always make phones vertical. This fallback does not depend on JS or on
       the selected Elementor breakpoint class being initialized in time. */
    .elementor-widget-interactive-hover-panels .ihp-panels {
        display: flex !important;
        flex-direction: column !important;
    }

    .elementor-widget-interactive-hover-panels .ihp-panel,
    .elementor-widget-interactive-hover-panels .ihp-panel.is-active {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor-widget-interactive-hover-panels .ihp-panel:not(.is-active) {
        height: var(--ihp-mobile-closed-height) !important;
    }

    .elementor-widget-interactive-hover-panels .ihp-panel.is-active {
        height: var(--ihp-panel-height) !important;
    }
}

/* If "Tablet + Mobile" is selected, apply the same containment on tablet. */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-widget-interactive-hover-panels .ihp-root.ihp-breakpoint-1024 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .elementor-widget-interactive-hover-panels .ihp-root.ihp-breakpoint-1024 .ihp-panels {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}