/*
 * Updated Styles for Advanced SEO Content Box Widget
 * This stylesheet is synchronized with the latest PHP and JS versions.
 */

/* ==========================================================================
   Widget Wrapper
   ========================================================================== */
.seo-content-box {
  position: relative; /* Necessary for the ::after pseudo-element */
  margin-bottom: 15px;
}

/* ==========================================================================
   Content Area
   ========================================================================== */
.seo-content-box-text {
  /* This transition is crucial for the smooth expand/collapse animation driven by JS */
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
  will-change: max-height;
}

.seo-content-box-text.collapsed {
  position: relative;
}

/* ==========================================================================
   Gradient & Blur Effect (using ::after pseudo-element)
   ========================================================================== */

/* Base styles for the overlay effect element */
.seo-content-box-text.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%; /* Default height for the effect area */
  pointer-events: none; /* Allows text selection even with the overlay */

  /* Set initial state to invisible */
  opacity: 0;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  
  /* Smooth transition for enabling/disabling effects */
  transition: opacity 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
}

/* --- Conditional Styles based on Widget Settings --- */

/* Apply GRADIENT when enabled */
.gradient-effect-enabled .seo-content-box-text.collapsed::after {
  opacity: 1;
  background: linear-gradient(180deg, rgba(var(--sc-gradient-rgb), 0) 0%, rgba(var(--sc-gradient-rgb), 1) 90%);
}

/* Apply BLUR when enabled */
.blur-effect-enabled .seo-content-box-text.collapsed::after {
  opacity: 1; /* Ensure it's visible even if gradient is off */
  backdrop-filter: blur(var(--sc-blur-px));
  -webkit-backdrop-filter: blur(var(--sc-blur-px));
}

/* ==========================================================================
   Toggle Button & Icons
   ========================================================================== */

/* Wrapper for the button, controlled by Elementor's alignment settings */
.seo-content-toggle-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

/* Base structure for the button/text toggle */
.seo-content-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  text-decoration: none;
  width: fit-content; /* Prevents button from taking full width by default */
  transition: all 0.2s ease;
}

/* Styles specifically for when the toggle is just text */
.seo-toggle-type-text {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 5px !important;
}

/* --- Icon Visibility Logic --- */

/* Icon container base style */
.seo-toggle-icon {
  display: inline-flex;
  align-items: center;
}

/* Hide the 'less' icon by default */
.seo-toggle-icon-less {
  display: none !important;
}

/* When the box is expanded, hide the 'more' icon */
.is-expanded .seo-toggle-icon-more {
  display: none !important;
}

/* When the box is expanded, show the 'less' icon */
.is-expanded .seo-toggle-icon-less {
  display: inline-flex !important;
}