/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */
 
 body {
  font-family: "Poppins", Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}

.wp-block-create-block-sparkle-slider {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}

.sparkle-slide-button {
	padding: 16px 26px;
	border-radius: 9999px;
}

.sparkle-slide {
	min-height: 350px;
    width: 100%;
	height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
	/* flex: 0 0 100%; */
}

.slides-container {
	display: flex;
    height: 100%;
    flex-direction: row;
}

.slides-container-wrapper {
	overflow: hidden;
    height: 100%;
    position: relative;
}

.slider-container-transition {
	transition: transform 7s ease-in-out;
}

.wp-block-create-block-sparkle-slider {
	border: 1px dotted #f00;
}

.sparkle-slider {
	width: 100%;
	min-height: 350px;
	position: relative;
}

.sparkle-slider .slider-inner-blocks-wrapper > .block-editor-inner-blocks {
	overflow: hidden;
	height: 100%;
	position: relative;
}

.sparkle-slider .block-editor-inner-blocks > div {
	display: flex;
	height: 100%;
	flex-direction: row;
}

.sparkle-slider .slide-content-inner-blocks-wrapper > .block-editor-inner-blocks > div {
	flex-wrap: wrap;
}

.sparkle-slide {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.sparkle-slider .slide-content-inner-blocks-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.sparkle-slider .slide-content-inner-blocks-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > div.wp-block {
	margin-left: auto;
	margin-right: auto;
	padding-top: 28px;
	padding-bottom: 28px;
}

.sparkle-slider .slide-content-inner-blocks-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout h2.wp-block, .sparkle-slider .slide-content-inner-blocks-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout p.wp-block {
	padding: 18.5px 0px
}

.slider-inner-blocks-wrapper .sparkle-slide {
	margin-top: 0px;
	margin-bottom: 0px;
}

.slide-content-inner-blocks-wrapper .block-editor-inner-blocks .block-editor-block-list__layout h2, 
.slide-content-inner-blocks-wrapper .block-editor-inner-blocks .block-editor-block-list__layout > p {
	flex: 0 1 100%;
}


.sparkle-slide-button {
	padding: 16px 26px;
}

.sparkle-slider-btn-typo button > span {
	transform: translate(-50%, -50%) rotate(90deg);
}

.sparkle-slider-btn-typo > div {
	display: flex;
	justify-content: space-between;
}

.sparkle-slider-btn-typo .components-button.has-icon .dashicon {
	margin-right: -36px;
}

#wpwrap .editor-styles-wrapper {
	background-color: blue;
}


.wp-block-sparkle-themes-sparkle-slide-buttons .block-editor-inner-blocks .block-editor-block-list__layout .wp-block.sparkle-slide-button.is-style-outline {
	color: #32373c;
	background-color: transparent;
	border: 2px solid #32373c;
	border-radius: 9999px;
}

.wp-block-sparkle-themes-sparkle-slide-buttons .block-editor-inner-blocks .block-editor-block-list__layout {
	display: flex;
	gap: 10px;
	align-items: center;
}

.wp-block-sparkle-themes-sparkle-slide-buttons .block-editor-inner-blocks .block-editor-block-list__layout .wp-block.sparkle-slide-button {
	margin: 0;
	max-width: none;
	background-color: #32373c;
	color: #ffffff;
	border-radius: 9999px;
	cursor: text;
}

.wp-block-sparkle-themes-sparkle-slide-buttons .block-editor-inner-blocks .block-editor-block-list__layout .wp-block.sparkle-slide-button > div {
	word-break: break-all;
}

.parent {
	display: flex;
	flex-wrap: wrap;
	max-height: 200px;
	overflow-y: scroll;
}

.parent .child {
  flex: 0 0 22%; /* 100% / 4 = 25% */
  box-sizing: border-box;
  padding: 10px;
  cursor: pointer;
}


/* overwrite tailwind */
/* Override default lg (1024px) behavior */
@media (min-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }

  .lg\:flex {
    display: flex !important;
  }

  .lg\:block {
    display: block !important;
  }

  .lg\:inline {
    display: inline !important;
  }

  .lg\:inline-block {
    display: inline-block !important;
  }

  
  .lg\:grid {
    display: grid !important;
  }

  .lg\:table {
    display: table !important;
  }
}


@media (min-width: 1280px) {
  .xl\:hidden {
    display: none !important;
  }

  .xl\:flex {
    display: flex !important;
  }

  .xl\:block {
    display: block !important;
  }

  .xl\:inline {
    display: inline !important;
  }

  .xl\:inline-block {
    display: inline-block !important;
  }

  .xl\:grid {
    display: grid !important;
  }

  .xl\:table {
    display: table !important;
  }
}



/* Custom Lightbox Styles */
      .custom-lightbox-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.3s ease,
          visibility 0.3s ease;
      }
      .custom-lightbox-overlay.active {
        opacity: 1;
        visibility: visible;
      }
      .custom-lightbox-content {
        position: relative;
        max-width: 90vw;
        max-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .custom-lightbox-content img {
        max-width: 90vw;
        max-height: 85vh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        transform: scale(0.9);
        transition: transform 0.3s ease;
      }
      .custom-lightbox-overlay.active .custom-lightbox-content img {
        transform: scale(1);
      }
      .custom-lightbox-close {
        position: absolute;
        top: 1px;
        right: 1px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        border-radius: 50%;
        color: black;
        background-color: gray;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        transition:
          background 0.2s ease,
          transform 0.2s ease;
      }
      .custom-lightbox-close:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.1);
      }
      .custom-lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.2s ease,
          transform 0.2s ease;
      }
      .custom-lightbox-nav:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-50%) scale(1.1);
      }
      .custom-lightbox-prev {
        left: -70px;
      }
      .custom-lightbox-next {
        right: -70px;
      }
      .custom-lightbox-counter {
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        font-weight: 500;
      }
      @media (max-width: 768px) {
        .custom-lightbox-nav {
          width: 40px;
          height: 40px;
          font-size: 16px;
        }
        .custom-lightbox-prev {
          left: 10px;
        }
        .custom-lightbox-next {
          right: 10px;
        }
        .custom-lightbox-close {
          top: 134px;
          right: 18px;
          position: fixed;
          z-index: 1;
          color: black;
          background-color: gray;
        }
      }
      /* Gallery image cursor */
      .gallery-image {
        cursor: zoom-in;
      }



      /* Optimize layout for very large screens (1920px+) */
@media (min-width: 1920px) {
  /* Make container wider to fill more of the screen */
  .container {
    max-width: 1800px !important;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Increase base font sizes */
  body {
    font-size: 18px;
  }

  /* Scale up headings */
  h1 {
    font-size: 3.5rem !important;
  }

  h2 {
    font-size: 3rem !important;
  }

  h3 {
    font-size: 2rem !important;
  }

  h4 {
    font-size: 1.5rem !important;
  }

  /* Increase paragraph text */
  p {
    font-size: 1.125rem;
    line-height: 1.75;
  }

  /* Scale up text in specific utility classes */
  .text-sm {
    font-size: 1rem !important;
  }

  .text-base {
    font-size: 1.125rem !important;
  }

  .text-lg {
    font-size: 1.25rem !important;
  }

  .text-xl {
    font-size: 1.5rem !important;
  }

  .text-2xl {
    font-size: 2rem !important;
  }

  .text-3xl {
    font-size: 2.5rem !important;
  }

  .text-4xl {
    font-size: 3.5rem !important;
  }

  .text-5xl {
    font-size: 4rem !important;
  }

  /* Increase button text and padding */
  a,
  button {
    font-size: 1.125rem;
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-500 {
  animation-delay: 0.5s;
}