/* ==========================================================================
   LI Plans Ofertas — Widget Elementor
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banner "Assine e Ganhe"
   -------------------------------------------------------------------------- */
.li-plans__ofertas-banner {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145.26deg, #E4F808 20.05%, #BAFFFE 69.54%, #F1F987 102.2%);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  min-height: 80px;
}

.li-plans__ofertas-banner-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 76px;
}

.li-plans__ofertas-banner-label {
  font-family: var(--font-family-body, Inter);
  font-size: 9px;
  font-weight: 500;
  color: #3C402B;
  line-height: 1.2;
  display: block;
  letter-spacing: 0.02em;
}

.li-plans__ofertas-banner-text {
  font-family: var(--font-family-body, Inter);
  font-size: 11px;
  font-weight: 600;
  color: #00363A;
  line-height: 1.2;
  margin: 0;
}

.li-plans__ofertas-banner-link,
.li-plans__ofertas-banner-link:visited {
  font-family: var(--font-family-body, Inter);
  font-size: 9px;
  font-weight: 500;
  color: #3C402B !important;
  line-height: 1.2;
  text-decoration: underline !important;
  text-decoration-color: #3C402B !important;
  text-underline-offset: 2px;
  display: inline-block;
  margin-top: 2px;
}

.li-plans__ofertas-banner-link:hover {
  color: var(--brand-green-500, #00363A) !important;
  text-decoration-color: var(--brand-green-500, #00363A) !important;
}

.li-plans__ofertas-banner-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72px;
  height: auto;
  pointer-events: none;
  object-fit: contain;
  object-position: bottom right;
}

/* --------------------------------------------------------------------------
   Card destaque — banner
   -------------------------------------------------------------------------- */
.li-plans__card--featured .li-plans__ofertas-banner {
  background: linear-gradient(145.26deg, #E4F808 20.05%, #BAFFFE 69.54%, #F1F987 102.2%);
}

.li-plans__card--featured .li-plans__ofertas-banner-label,
.li-plans__card--featured .li-plans__ofertas-banner-link {
  color: #3C402B !important;
}

.li-plans__card--featured .li-plans__ofertas-banner-text {
  color: #00363A;
}

/* --------------------------------------------------------------------------
   Item Canva Pro
   -------------------------------------------------------------------------- */
.li-plans__feature-item--canva {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.li-plans__feature-icon--canva {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 42px;
  margin-top: 0;
}

.li-plans__canva-logo {
  display: block;
  width: 40px;
  height: 38px;
  border-radius: 6px;
  border: 0.65px solid #CEFC88;
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: hidden;
  background: none;
}

.li-plans__canva-logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

.li-plans__canva-check {
  position: absolute;
  right: -2px;
  top: -2px;
  width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li-plans__canva-text {
  font-family: var(--font-family-body, Inter);
  font-size: var(--font-size-14, 14px);
  font-weight: 400;
  color: var(--neutral-500, #3C402B);
  line-height: 160%;
  padding-top: 2px;
}

.li-plans__card--featured .li-plans__canva-text {
  color: rgba(255, 255, 255, 0.9);
}

.li-plans__canva-text strong {
  font-weight: 600;
}

/* ==========================================================================
   Tablet intermediário — 769px até 1190px
   Slider idêntico ao mobile
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1190px) {

  /* Grid vira slider horizontal */
  .li-plans--ofertas .li-plans__grid {
    display: flex !important;
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 20px 0 0 !important;
    margin-right: -16px !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .li-plans--ofertas .li-plans__grid::-webkit-scrollbar {
    display: none;
  }

  .li-plans--ofertas .li-plans__card {
    flex: 0 0 70% !important;
    scroll-snap-align: start !important;
    border-radius: 20px !important;
    margin-left: 0 !important;
  }

  .li-plans--ofertas .li-plans__card--featured {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 16px 48px rgba(0, 54, 58, 0.28) !important;
  }

  /* Mostra navegação */
  .li-plans--ofertas .li-plans__slider-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px 0 !important;
  }

  /* Dots */
  .li-plans--ofertas .li-plans__dots {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .elementor-kit-5 .li-plans--ofertas .li-plans__dot,
  .li-plans--ofertas .li-plans__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 100px !important;
    background: #C3CAD4 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.25s ease, width 0.25s ease !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  .elementor-kit-5 .li-plans--ofertas .li-plans__dot.is-active,
  .li-plans--ofertas .li-plans__dot.is-active {
    background: #00363A !important;
    width: 22px !important;
  }

  .li-plans--ofertas .li-plans__arrow:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
  }

  /* Setas */
  .li-plans--ofertas .li-plans__arrows {
    display: flex !important;
    gap: 8px !important;
  }

  .elementor-kit-5 .li-plans--ofertas .li-plans__arrow,
  .li-plans--ofertas .li-plans__arrow {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #00363A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #ffffff !important;
    transition: opacity 0.2s ease !important;
    padding: 0 !important;
  }

  .elementor-kit-5 .li-plans--ofertas .li-plans__arrow:hover,
  .li-plans--ofertas .li-plans__arrow:hover {
    background: #00363A !important;
    color: #ffffff !important;
  }

  .elementor-kit-5 .li-plans--ofertas .li-plans__arrow:disabled,
  .li-plans--ofertas .li-plans__arrow:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
  }

  .li-plans--ofertas .li-plans__card-inner {
    padding: 26px 22px 24px !important;
  }

  .li-plans--ofertas .li-plans__card--featured .li-plans__card-inner {
    padding-top: 40px !important;
  }
}

/* ==========================================================================
   Mobile — ajustes específicos do banner + cores das setas
   ========================================================================== */
@media (max-width: 768px) {
  .li-plans__ofertas-banner {
    padding: 10px 8px;
    min-height: 76px;
  }

  .li-plans__ofertas-banner-img {
    width: 64px;
  }

  .li-plans__ofertas-banner-content {
    padding-right: 68px;
  }

  /* Setas mobile */
  .elementor-kit-5 .li-plans--ofertas .li-plans__arrow,
  .li-plans--ofertas .li-plans__arrow {
    background: #00363A !important;
    border: none !important;
    color: #ffffff !important;
    transition: opacity 0.2s ease !important;
  }

  .elementor-kit-5 .li-plans--ofertas .li-plans__arrow:hover,
  .li-plans--ofertas .li-plans__arrow:hover {
    background: #00363A !important;
    color: #ffffff !important;
  }

  .elementor-kit-5 .li-plans--ofertas .li-plans__arrow:disabled,
  .li-plans--ofertas .li-plans__arrow:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
  }
}