/* Theme Variables */
:root {
    /* Light theme colors */
    --egea-bg-primary: #ffffff;
    --egea-bg-secondary: #f5f5f5;
    --egea-bg-tertiary: #e0e0e0;
    --egea-text-primary: #212121;
    --egea-text-secondary: #666666;
    --egea-text-tertiary: #999999;
    --egea-border-color: #e0e0e0;
    --egea-accent-color: #007cba;
    --egea-accent-hover: #005a87;

    /* Transitions */
    --egea-transition-fast: 0.2s ease;
    --egea-transition-normal: 0.3s ease;
    --egea-transition-slow: 0.6s ease;

    /* integration platforms */

    --wix-color: #166AEA;
    --f-color: #F6C833;
    --code-color: #0ACE5A;
    --magento-color: #F26322;
    --shopify-color: #8DB849;
    --wordpress-color: #00749A;
    --bigcommerce-color: #0D52FF;
    --woocommerce-color: #873EFF;
}

[data-theme="dark"] {
    /* Dark theme colors */
    --egea-bg-primary: #1a1a1a;
    --egea-bg-secondary: #2a2a2a;
    --egea-bg-tertiary: #3a3a3a;
    --egea-text-primary: #ffffff;
    --egea-text-secondary: #b0b0b0;
    --egea-text-tertiary: #808080;
    --egea-border-color: #3a3a3a;
    --egea-accent-color: #4fc3f7;
    --egea-accent-hover: #29b6f6;
}

/* Theme toggle button */
.egea-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--egea-accent-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all var(--egea-transition-normal);
}

.egea-theme-toggle:hover {
    background: var(--egea-accent-hover);
    transform: scale(1.1);
}

.egea-theme-toggle svg {
    width: 24px;
    height: 24px;
}

/* Smooth transitions for theme switching */
* {
    transition: background-color var(--egea-transition-normal),
        color var(--egea-transition-normal),
        border-color var(--egea-transition-normal);
}



/* start of background grid lines */

/* Outer wrapper - provides 2 grid lines */
div[data-barba="wrapper"],
main[data-barba="container"] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* Grid lines from outer wrapper */
div[data-barba="wrapper"]::before,
div[data-barba="wrapper"]::after,
main[data-barba="container"]::before,
main[data-barba="container"]::after,
body.post-template-default.single.single-post::before,
body.post-template-default.single.single-post::after,
body.post-template-default.single.single-post>div[data-barba="wrapper"]>main[data-barba="container"]>div.elementor-location-single::before,
body.page-id-24 main#content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #30313182;
    z-index: 0;
    pointer-events: none;
    min-height: 100vh;
}

/* Position outer wrapper lines at 25% and 75% of 1200px viewport */
div[data-barba="wrapper"]::before {
    left: 50%;
    transform: translateX(-600px);
    /* -300px from center */
}

div[data-barba="wrapper"]::after {
    right: 50%;
    transform: translateX(600px);
    z-index: -1;
    /* +300px from center */
}

/* Position inner wrapper lines at 0% and 50% of the 1200px container */
main[data-barba="container"]::before {
    left: 50%;
    transform: translateX(-200px);
}

main[data-barba="container"]::after {
    right: 50%;
    transform: translateX(200px);
    z-index: -1;
}

body.post-template-default.single.single-post {
    background-color: linear-gradient(180deg,
            var(--e-global-color-878dda3) 0%,
            var(--e-global-color-ffd9d88) 20%);
    min-height: 100%;
    position: relative;
}

body.post-template-default.single.single-post::before {
    left: 50%;
    transform: translateX(-400px);
}

body.post-template-default.single.single-post::after {
    right: 50%;
    transform: translateX(400px);
    z-index: -1;
}

body.post-template-default.single.single-post>div[data-barba="wrapper"]>main[data-barba="container"]>div.elementor-location-single::before,
body.page-id-24 main#content::before {
    right: 50%;
}

/*contact us page*/
body.page-id-24 main[data-barba="container"]::before {
    transform: translateX(-300px);
}

body.page-id-24 main[data-barba="container"]::after {
    transform: translateX(300px);
}

/* ──────────── MOBILE: up to ~767px ──────────── */

/* hide all of your wrapper-based lines… */
@media (max-width: 767px) {

    div[data-barba="wrapper"]::before,
    div[data-barba="wrapper"]::after,
    main[data-barba="container"]::before,
    main[data-barba="container"]::after,
    body.post-template-default.single.single-post>div[data-barba="wrapper"]>main[data-barba="container"]>div.elementor-location-single::before {
        display: none !important;
    }

    /* …then draw just two fixed lines 20px in from each edge */
    body::before,
    body::after,
    body.post-template-default.single.single-post::before,
    body.post-template-default.single.single-post::after {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #30313182;
        pointer-events: none;
        z-index: 0;
        transform: translateX(-0.5px);
    }

    body::before,
    body.post-template-default.single.single-post::before {
        left: 20px;
    }

    body::after,
    body.post-template-default.single.single-post::after {
        right: 20px;
    }


}


/* ────────── TABLET / SMALL DESKTOP: 768px – 1199px ────────── */

/* switch from pixel-offsets to percentages so the lines “shrink‐in” */
@media (min-width: 768px) and (max-width: 1199px) {

    /* outer wrapper lines: 25% and 75% of the container */
    div[data-barba="wrapper"]::before {
        left: 25%;
        transform: translateX(-0.5px);
    }

    div[data-barba="wrapper"]::after {
        left: 75%;
        transform: translateX(-0.5px);
    }

    /* inner wrapper lines: center ± (200 px/1200 px = 16.67%) → 33.33% & 66.67% */
    main[data-barba="container"]::before {
        left: calc(50% - 16.667%);
        transform: translateX(-0.5px);
    }

    main[data-barba="container"]::after {
        left: calc(50% + 16.667%);
        transform: translateX(-0.5px);
    }

    /* if you still need your “post-template” lines at ±400px → 33.33%/66.67%… */
    body.post-template-default.single.single-post::before {
        left: calc(50% - 33.333%);
        transform: translateX(-0.5px);
    }

    body.post-template-default.single.single-post::after {
        left: calc(50% + 33.333%);
        transform: translateX(-0.5px);
    }

    /* and any page-ID-24 overrides, likewise */
    body.page-id-24 main[data-barba="container"]::before {
        left: calc(50% - 25%);
        transform: translateX(-0.5px);
    }

    body.page-id-24 main[data-barba="container"]::after {
        left: calc(50% + 25%);
        transform: translateX(-0.5px);
    }
}


/* end of background grid lines */



/*  start of cross edges section styling */
.egea-integrations-grid,
.egea-footer-banner-section,
.egea-paginated-blog-section,
.egea-testimonials-section {
    position: relative !important;
    /* establish positioning context */
}

body main[data-barba="container"] .egea-testimonials-section>div.swiper {
    position: unset;
}

body main[data-barba="container"] .egea-integrations-grid::before,
body main[data-barba="container"] .egea-footer-banner-section::before,
body main[data-barba="container"] .egea-integrations-grid::after,
body main[data-barba="container"] .egea-footer-banner-section::after,
body main[data-barba="container"] .egea-paginated-blog-section::before,
body main[data-barba="container"] .egea-paginated-blog-section>*::before,
body main[data-barba="container"] .egea-testimonials-section::before,
body main[data-barba="container"] .egea-testimonials-section>div.swiper::before,
body main[data-barba="container"] .egea-paginated-blog-section::after,
body main[data-barba="container"] .egea-paginated-blog-section>*::after,
body main[data-barba="container"] .egea-testimonials-section::after,
body main[data-barba="container"] .egea-testimonials-section>div.swiper::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    background-image: url("/wp-content/plugins/eulav-grow-ele-addon/assets/images/green-cross.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

body main[data-barba="container"] .egea-integrations-grid::after,
body main[data-barba="container"] .egea-footer-banner-section::after,
body main[data-barba="container"] .egea-paginated-blog-section::after,
body main[data-barba="container"] .egea-testimonials-section::after {
    bottom: -10px;
    right: -10px;
    top: unset;
    left: unset;
}

body main[data-barba="container"] .egea-paginated-blog-section>*::before,
body main[data-barba="container"] .egea-testimonials-section>div.swiper::before {
    bottom: -10px;
    left: -10px;
    top: unset;
    right: unset;
}

body main[data-barba="container"] .egea-paginated-blog-section>*::after,
body main[data-barba="container"] .egea-testimonials-section>div.swiper::after {
    top: -10px;
    right: -10px;
    left: unset;
}

/* end of cross edge section styling  */

/* Base styles for all integration items */
body main[data-barba="container"] [class^="egea-integration-item-"],
body main[data-barba="container"] [class*=" egea-integration-item-"] {
    border: 0.5px solid #30313182;
    cursor: pointer;
    transition: all 800ms ease-out;
}

/* Default state for images inside integration items */
body main[data-barba="container"] [class^="egea-integration-item-"] img,
body main[data-barba="container"] [class*=" egea-integration-item-"] img {
    filter: brightness(400%) saturate(0%);
    transition: filter 800ms ease-out;
}

/* Hover state - revert image filter */
body main[data-barba="container"] [class^="egea-integration-item-"]:hover img,
body main[data-barba="container"] [class*=" egea-integration-item-"]:hover img {
    filter: unset !important;
}

/* Platform-specific hover effects */
body main[data-barba="container"] .egea-integration-item-wix:hover {
    border-color: var(--wix-color);
}

body main[data-barba="container"] .egea-integration-item-f:hover {
    border-color: var(--f-color);
}

body main[data-barba="container"] .egea-integration-item-code:hover {
    border-color: var(--code-color);
}

body main[data-barba="container"] .egea-integration-item-magento:hover {
    border-color: var(--magento-color);
}

body main[data-barba="container"] .egea-integration-item-shopify:hover {
    border-color: var(--shopify-color);
}

body main[data-barba="container"] .egea-integration-item-wordpress:hover {
    border-color: var(--wordpress-color);
}

body main[data-barba="container"] .egea-integration-item-bigcommerce:hover {
    border-color: var(--bigcommerce-color);
}

body main[data-barba="container"] .egea-integration-item-woocommerce:hover {
    border-color: var(--woocommerce-color);
}

/*end of integrations styling */

/*start of egea-features-section animation styling */
.egea-features-section .animated-feature-items-row .animated-feature-image-container {
    position: relative;
}

.egea-features-section .animated-feature-items-row .animated-feature-image-container:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #141516 0%, rgba(26, 26, 26, 0) 78.5%);
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

body.page-id-25 .egea-features-section .animated-feature-items-row .animated-feature-image-container:before {
    background: linear-gradient(180.49deg, rgba(8, 9, 10, 0) -4.31%, #08090A 55.36%);
    z-index: 1;
}

.egea-features-section .animated-feature-items-row .animated-feature-image-container img {
    transform-origin: top left;
    max-width: unset !important;
    filter: grayscale(100%) contrast(1);
    transition: all 800ms ease-out;
    animation-timing-function: ease-out;
    animation-duration: 800ms;
}

.egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(1) .animated-feature-image-container:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(2.05deg, #141516 54.39%, rgba(26, 26, 26, 0) 71.03%);
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

body.home .egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(1) .animated-feature-image-container>img:nth-child(2) {
    z-index: 2;
    transition-duration: 400ms;
    animation-duration: 400ms;
    transform: translate(38.8px, 145.37px);
}

body.home .egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(1) .animated-feature-image-container>img:nth-child(1) {
    transform: translate(72.41px, 74px);
}

body.home .egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(1) .animated-feature-image-container>img:nth-child(2):hover {
    filter: unset !important;
    transform: translate(38.8px, 105.37px);
}

body.home .egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(1) .animated-feature-image-container>img:nth-child(1):hover {
    filter: unset !important;
    transform: translate(72.41px, 34px);
}

body.home .egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(2) .animated-feature-image-container>img:nth-child(2) {
    transform: translate(47px, 26px);
}

body.home .egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(2) .animated-feature-image-container>img:nth-child(1) {
    z-index: 9;
    transform: translate(84px, 62px);
}

body.home .egea-features-section .animated-feature-items-row>.animated-feature-item:nth-child(3) .animated-feature-image-container>img {
    z-index: 0;
    transform: translate(32px, 6px);
}

body.page-id-25 .egea-features-section .animated-feature-items-row>.animated-feature-image-container:nth-child(1) img {
    transform: translate(-25px, -37px);
}

body.page-id-25 .egea-features-section .animated-feature-items-row>.animated-feature-image-container:nth-child(2) img:first-of-type {
    filter: grayscale(400%) contrast(1) opacity(0.3);
    z-index: 2;
}

body.page-id-25 .egea-features-section .animated-feature-items-row>.animated-feature-image-container:nth-child(2) img:last-of-type {
    transform: translate(-125px, -122px);
}

body.page-id-25 .egea-features-section .animated-feature-items-row>.animated-feature-image-container:nth-child(3) img {
    transform: translate(-186px, -139px);
}

.egea-features-section .animated-feature-items-row .animated-feature-image-container:not(.e-cd095cb-1f0d7ce):hover img {
    filter: unset !important;
}

@media (max-width: 767px) {
    .egea-features-section .animated-feature-items-row .animated-feature-image-container img {
        filter: unset !important;
    }
}

/*end of egea-features-section animation styling */

/*start of egea-benefits-section animation styling */
.egea-benefits-section .egea-benefit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1);
    transform-origin: top left;
}

.egea-benefits-section .egea-benefits-items-row>.egea-benefit-col,
.egea-benefits-section .egea-benefit-image {
    transition: all 800ms ease-out;
    animation-timing-function: ease-out;
    animation-duration: 800ms;
}

.egea-benefits-section .egea-benefits-items-row>.egea-benefit-col:hover .egea-benefit-image {
    filter: unset !important;
}

.egea-benefits-section .egea-benefits-items-row>.egea-benefit-col:first-of-type .egea-benefit-image {
    transform: scale(2.915) translate(-149px, -74.67px);
}

.egea-benefits-section .egea-benefits-items-row>.egea-benefit-col:nth-child(2) .egea-benefit-image {
    transform: scale(2.495) translate(-238.08px, -62.53px);
}

.egea-benefits-section .egea-benefits-items-row>.egea-benefit-col:nth-child(3) .egea-benefit-image {
    transform: scale(1.045) translate(-176.08px, 17.225px);
}

.egea-benefits-section .egea-benefits-items-row>.egea-benefit-col:nth-child(3) .egea-benefit-image-box img:first-of-type {
    filter: grayscale(100%) contrast(1);
    transition: all 800ms ease-out;
    animation-timing-function: ease-out;
    animation-duration: 800ms;
}

.egea-benefits-section .egea-benefits-items-row>.egea-benefit-col:nth-child(3):hover .egea-benefit-image-box img:first-of-type {
    inset-block-start: 31.71px;
    filter: unset !important;
}

@media (max-width: 767px) {
    .egea-benefits-section .egea-benefits-items-row img {
        filter: unset !important;
    }
}

/*end of egea-benefits-section animation styling */


/* start of gutenberg block styles */
body .egea-pro-tip-block p,
body .egea-pro-tip-block li {
    color: white;
}

@media screen and (max-width: 767px) {
    body .egea-pro-tip-block, body .egea-agent-comment-block {
        padding: 20px !important;
    }
    
}

/* end of gutenberg block styles */

/* */

body.egea-spa-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #08090A;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
}


/** START OF ELEMENTOR FORM TOAST STYLING **/
.elementor-form > .elementor-message {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  width: max-content;
  max-width: 350px;
  margin-top: 20px;
  padding: 12px 18px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #ffffff;
  background-color: #08090A;
  box-shadow: 0px 0px 20px 0px rgb(187 187 187 / 26%);
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35);
}
.elementor-form > .elementor-message.active {
  transform: translateX(-30px);
}
.elementor-form > .elementor-message.elementor-message-danger {
  border-left: 8px solid rgb(255, 89, 67);
}
.elementor-form > .elementor-message.elementor-message-success {
  border-left: 8px solid rgb(28, 189, 28);
}
.elementor-form > .elementor-message:before {
  content: "";
  margin: 0px;
  display:none;
}
.elementor-form > .elementor-message .blob-exit {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 5px;
  cursor: pointer;
  z-index: 999991;
}
.elementor-form > .elementor-message .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: #ddd;
}
.elementor-form > .elementor-message .progress::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.elementor-form
  > .elementor-message.elementor-message-success
  .progress::before {
  background-color: #40f467;
}
.elementor-form
  > .elementor-message.elementor-message-danger
  .progress::before {
  background-color: #f45b40;
}
.elementor-form > .elementor-message .progress.active::before {
  -webkit-transition: width 5s ease-in-out;
  -moz-transition: width 5s ease-in-out;
  -o-transition: width 5s ease-in-out;
  transition: width 5s ease-out;
  width: 0%;
}
@keyframes progress {
  100% {
    right: 100%;
  }
}
.elementor-form > .elementor-message .blob-exit {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-image: url(../images/cancel.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  margin-left: 5px;
  margin-bottom: -4px;
}
/** END OF ELEMENTOR FORM TOAST STYLING **/