/**
 * BVS Image Accordion - Remote.com Style 2-Column Image & Accordion
 * Developed by Dominykas Vitkauskas (https://domvit.lt)
 * Plugin: BVS Elements
 * 
 * High Specificity & Theme-Override Protection
 */

/* ==================== HIGH SPECIFICITY RESET ==================== */
.elementor-widget-bvs-image-accordion .bvs-image-accordion-container,
.bvs-image-accordion-container,
.bvs-image-accordion-container * {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
}

/* Main Container Scope */
.elementor-widget-bvs-image-accordion .bvs-image-accordion-container,
.bvs-image-accordion-container {
    width: 100% !important;
    max-width: var(--bvs-img-acc-max-width, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;

    /* Default CSS Variables */
    --bvs-img-acc-active-bg: #3d0c1e;
    --bvs-img-acc-active-title: #ffffff;
    --bvs-img-acc-active-desc: rgba(255, 255, 255, 0.88);
    --bvs-img-acc-active-icon: #ffffff;
    --bvs-img-acc-inactive-title: #111111;
    --bvs-img-acc-inactive-icon: #313131;
    --bvs-img-acc-divider: #e5e7eb;
    --bvs-img-acc-btn-text: #ffffff;
    --bvs-img-acc-btn-border: rgba(255, 255, 255, 0.4);
    --bvs-img-acc-btn-hover-bg: rgba(255, 255, 255, 0.15);
    --bvs-img-acc-grid-color: rgba(0, 0, 0, 0.08);
}

/* ==================== SECTION HEADER (Remote.com Style) ==================== */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__header-block,
.bvs-image-accordion-container .bvs-image-accordion__header-block {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: var(--bvs-img-acc-header-spacing, 40px) !important;
    max-width: var(--bvs-img-acc-header-max-width, 100%) !important;
    position: relative !important;
}

/* Subtitle / Eyebrow */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__subtitle,
.bvs-image-accordion-container .bvs-image-accordion__subtitle {
    display: inline-block !important;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bvs-img-acc-subtitle-color, #611b2b) !important;
    margin: 0 0 var(--bvs-img-acc-subtitle-spacing, 12px) 0 !important;
    padding: 0 !important;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* Main Heading Title */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__heading,
.bvs-image-accordion-container .bvs-image-accordion__heading {
    font-size: var(--bvs-img-acc-header-title-size, 2.375rem);
    font-weight: 700;
    line-height: 1.18;
    color: var(--bvs-img-acc-header-title-color, #191414) !important;
    margin: 0 0 var(--bvs-img-acc-header-title-spacing, 16px) 0 !important;
    padding: 0 !important;
    letter-spacing: -0.025em;
}

@media (max-width: 767px) {
    .elementor-widget-bvs-image-accordion .bvs-image-accordion__heading,
    .bvs-image-accordion-container .bvs-image-accordion__heading {
        font-size: 1.75rem;
        line-height: 1.25;
    }
}

/* Description / Paragraph */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__description,
.bvs-image-accordion-container .bvs-image-accordion__description {
    font-size: var(--bvs-img-acc-header-desc-size, 1.0625rem);
    font-weight: 400;
    line-height: 1.62;
    color: var(--bvs-img-acc-header-desc-color, #5e5856) !important;
    max-width: var(--bvs-img-acc-header-desc-max-width, 740px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bvs-image-accordion-container .bvs-image-accordion__description p {
    margin: 0 0 12px 0 !important;
    color: inherit !important;
    font-size: inherit;
    line-height: inherit;
}

.bvs-image-accordion-container .bvs-image-accordion__description p:last-child {
    margin-bottom: 0 !important;
}

/* 2-Column Grid Layout */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__layout,
.bvs-image-accordion-container .bvs-image-accordion__layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 48px !important;
    width: 100% !important;
}

/* Image Position Toggle */
.bvs-image-accordion-container .bvs-image-accordion__layout--image-right {
    flex-direction: row-reverse !important;
}

/* Columns Base */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__media-col,
.bvs-image-accordion-container .bvs-image-accordion__media-col {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.elementor-widget-bvs-image-accordion .bvs-image-accordion__accordion-col,
.bvs-image-accordion-container .bvs-image-accordion__accordion-col {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ==================== LEFT COLUMN (IMAGE CONTAINER) ==================== */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__media-wrapper,
.bvs-image-accordion-container .bvs-image-accordion__media-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* Media Stack Container */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__media-stack,
.bvs-image-accordion-container .bvs-image-accordion__media-stack {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Individual Image Items inside Stack */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__media-item,
.bvs-image-accordion-container .bvs-image-accordion__media-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transform: scale(0.97) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.elementor-widget-bvs-image-accordion .bvs-image-accordion__media-item:first-child,
.bvs-image-accordion-container .bvs-image-accordion__media-item:first-child {
    position: relative !important; /* Establishes natural flow height of container */
}

.elementor-widget-bvs-image-accordion .bvs-image-accordion__media-item--active,
.bvs-image-accordion-container .bvs-image-accordion__media-item--active {
    opacity: 1 !important;
    transform: scale(1) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* Image Element */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__media-item img,
.bvs-image-accordion-container .bvs-image-accordion__media-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 0;
    box-shadow: none;
}


/* ==================== RIGHT COLUMN (ACCORDION) ==================== */
.elementor-widget-bvs-image-accordion ul.bvs-image-accordion__list,
.bvs-image-accordion-container ul.bvs-image-accordion__list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    gap: 8px !important;
}

/* Accordion Item */
.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item,
.bvs-image-accordion-container li.bvs-image-accordion__item {
    position: relative !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item::before,
.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item::after,
.bvs-image-accordion-container li.bvs-image-accordion__item::before,
.bvs-image-accordion-container li.bvs-image-accordion__item::after {
    content: none !important;
}

/* Inactive Items State */
.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active),
.bvs-image-accordion-container li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active) {
    background-color: transparent !important;
    border-bottom: 1px solid var(--bvs-img-acc-divider, #e5e7eb) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active):hover,
.bvs-image-accordion-container li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active):hover {
    background-color: var(--bvs-img-acc-inactive-hover-bg, rgba(0, 0, 0, 0.015)) !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active):hover .bvs-image-accordion__title,
.bvs-image-accordion-container li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active):hover .bvs-image-accordion__title {
    color: var(--bvs-img-acc-inactive-hover-title, var(--bvs-img-acc-inactive-title, #111111)) !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active):hover .bvs-image-accordion__icon,
.bvs-image-accordion-container li.bvs-image-accordion__item:not(.bvs-image-accordion__item--active):hover .bvs-image-accordion__icon {
    color: var(--bvs-img-acc-inactive-hover-icon, var(--bvs-img-acc-inactive-icon, #313131)) !important;
}

/* Active Item State (Dark Card) */
.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item--active,
.bvs-image-accordion-container li.bvs-image-accordion__item--active {
    background-color: var(--bvs-img-acc-active-bg, #3d0c1e) !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(61, 12, 30, 0.18) !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item--active:hover,
.bvs-image-accordion-container li.bvs-image-accordion__item--active:hover {
    background-color: var(--bvs-img-acc-active-hover-bg, var(--bvs-img-acc-active-bg, #3d0c1e)) !important;
}

/* Header Trigger Button */
.elementor-widget-bvs-image-accordion button.bvs-image-accordion__header,
.bvs-image-accordion-container button.bvs-image-accordion__header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 8px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    text-align: left !important;
    color: var(--bvs-img-acc-inactive-title, #111111) !important;
    transition: color 0.25s ease, padding 0.25s ease !important;
    font-family: inherit;
    gap: 16px !important;
    user-select: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item--active button.bvs-image-accordion__header,
.bvs-image-accordion-container li.bvs-image-accordion__item--active button.bvs-image-accordion__header {
    color: var(--bvs-img-acc-active-title, #ffffff) !important;
    padding: 24px 24px 12px 24px !important;
}

/* Header Left Content */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__header-left,
.bvs-image-accordion-container .bvs-image-accordion__header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
}

/* Icon */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__icon,
.bvs-image-accordion-container .bvs-image-accordion__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    font-size: 18px !important;
    color: var(--bvs-img-acc-inactive-icon, #313131) !important;
    transition: color 0.25s ease !important;
}

.bvs-image-accordion-container .bvs-image-accordion__icon svg,
.bvs-image-accordion-container .bvs-image-accordion__icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    fill: currentColor !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item--active .bvs-image-accordion__icon,
.bvs-image-accordion-container li.bvs-image-accordion__item--active .bvs-image-accordion__icon {
    color: var(--bvs-img-acc-active-icon, #ffffff) !important;
}

/* Title (Typography configurable via Elementor) */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__title,
.bvs-image-accordion-container .bvs-image-accordion__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: inherit !important;
    transition: color 0.25s ease !important;
    letter-spacing: -0.01em;
}

/* Chevron */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__chevron,
.bvs-image-accordion-container .bvs-image-accordion__chevron {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important;
}

.bvs-image-accordion-container .bvs-image-accordion__chevron svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    fill: none !important;
    transition: transform 0.35s ease !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item--active .bvs-image-accordion__chevron,
.bvs-image-accordion-container li.bvs-image-accordion__item--active .bvs-image-accordion__chevron {
    transform: rotate(180deg) !important;
}

/* Panel Content */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__panel,
.bvs-image-accordion-container .bvs-image-accordion__panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden !important;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease,
                padding 0.3s ease !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.elementor-widget-bvs-image-accordion li.bvs-image-accordion__item--active .bvs-image-accordion__panel,
.bvs-image-accordion-container li.bvs-image-accordion__panel {
    opacity: 1 !important;
    padding: 0 24px 24px 24px !important;
}

.elementor-widget-bvs-image-accordion .bvs-image-accordion__content,
.bvs-image-accordion-container .bvs-image-accordion__content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bvs-img-acc-active-desc, rgba(255, 255, 255, 0.88)) !important;
    margin-bottom: 20px !important;
}

.bvs-image-accordion-container .bvs-image-accordion__content p {
    margin: 0 0 10px 0 !important;
    color: inherit !important;
    font-size: inherit;
    line-height: inherit;
}
.bvs-image-accordion-container .bvs-image-accordion__content p:last-child {
    margin-bottom: 0 !important;
}

/* CTA Pill Button (Scalable payroll →) */
.elementor-widget-bvs-image-accordion .bvs-image-accordion__button-wrapper,
.bvs-image-accordion-container .bvs-image-accordion__button-wrapper {
    display: flex !important;
    align-items: center !important;
    margin-top: 16px !important;
}

.elementor-widget-bvs-image-accordion a.bvs-image-accordion__button,
.bvs-image-accordion-container a.bvs-image-accordion__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 9px 20px !important;
    border-radius: 9999px !important;
    border: 1px solid var(--bvs-img-acc-btn-border, rgba(255, 255, 255, 0.4)) !important;
    background-color: transparent !important;
    color: var(--bvs-img-acc-btn-text, #ffffff) !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    line-height: 1.2;
}

.elementor-widget-bvs-image-accordion a.bvs-image-accordion__button:hover,
.bvs-image-accordion-container a.bvs-image-accordion__button:hover {
    background-color: var(--bvs-img-acc-btn-hover-bg, rgba(255, 255, 255, 0.15)) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-1px) !important;
}

.bvs-image-accordion-container a.bvs-image-accordion__button svg {
    width: 15px !important;
    height: 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: transform 0.2s ease !important;
}

.bvs-image-accordion-container a.bvs-image-accordion__button:hover svg {
    transform: translateX(3px) !important;
}

/* Focus styles for accessibility */
.bvs-image-accordion-container button.bvs-image-accordion__header:focus-visible {
    outline: 2px solid var(--bvs-img-acc-active-bg, #3d0c1e) !important;
    outline-offset: 2px !important;
    border-radius: 8px !important;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 991px) {
    .elementor-widget-bvs-image-accordion .bvs-image-accordion__layout,
    .bvs-image-accordion-container .bvs-image-accordion__layout {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .elementor-widget-bvs-image-accordion .bvs-image-accordion__media-col,
    .bvs-image-accordion-container .bvs-image-accordion__media-col,
    .elementor-widget-bvs-image-accordion .bvs-image-accordion__accordion-col,
    .bvs-image-accordion-container .bvs-image-accordion__accordion-col {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-widget-bvs-image-accordion .bvs-image-accordion__media-wrapper,
    .bvs-image-accordion-container .bvs-image-accordion__media-wrapper {
        min-height: 280px !important;
        padding: 24px !important;
    }
}