/* CODSHIPX_R118_R2_COMPACT_ANIMATED_BEGIN */

/* =========================================================
   COMPACT 3-CARD PREMIUM LAYOUT
   ========================================================= */

.r7-addons-page .cx-addon-grid {
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* Group headings stay full width */
.r7-addons-page
.cx-addon-grid > div[style*="grid-column"] {
  grid-column: 1 / -1 !important;
  padding-top: 10px !important;
  margin-bottom: -2px !important;
}

/* =========================================================
   CARD BASE
   ========================================================= */

.r7-addons-page .cx-addon-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  padding: 18px !important;
  border-radius: 21px !important;

  border:
    1px solid rgba(166,190,142,.48) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.995),
      rgba(249,252,245,.985)
    ) !important;

  box-shadow:
    0 10px 28px rgba(24,39,64,.055),
    0 2px 6px rgba(24,39,64,.035),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  transform:
    translate3d(0,0,0)
    scale(1);

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    border-color .3s ease !important;

  animation:
    cxR118R2Enter
    .68s
    cubic-bezier(.18,.88,.24,1)
    both !important;
}

/* Strong animated top light */
.r7-addons-page .cx-addon-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: -95px !important;
  left: -45px !important;
  width: 230px !important;
  height: 230px !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(170,243,49,.20) 0%,
      rgba(170,243,49,.06) 40%,
      transparent 69%
    ) !important;

  pointer-events: none !important;

  animation:
    cxR118R2FloatGlow
    7s
    ease-in-out
    infinite !important;
}

/* Moving shine beam */
.r7-addons-page .cx-addon-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  top: -60% !important;
  left: -80% !important;

  width: 48% !important;
  height: 220% !important;

  transform:
    rotate(18deg)
    translateX(0);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.68),
      transparent
    ) !important;

  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep content above animations */
.r7-addons-page .cx-addon-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.r7-addons-page .cx-addon-card:hover {
  transform:
    translate3d(0,-7px,0)
    scale(1.012) !important;

  border-color:
    rgba(130,204,62,.78) !important;

  box-shadow:
    0 22px 45px rgba(27,45,70,.10),
    0 12px 32px rgba(116,190,48,.10),
    0 0 0 1px rgba(152,225,75,.10),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.r7-addons-page .cx-addon-card:hover::after {
  opacity: .68 !important;
  animation:
    cxR118R2Shine
    .95s
    cubic-bezier(.2,.7,.2,1)
    1 !important;
}

/* =========================================================
   ACTIVE CARD
   ========================================================= */

.r7-addons-page
.cx-addon-card:has(.v1b1-addon-status .active) {
  border-color:
    rgba(132,213,43,.84) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfff4 52%,
      #f0fadf 100%
    ) !important;

  box-shadow:
    0 17px 38px rgba(102,171,36,.12),
    0 0 0 1px rgba(144,220,52,.11),
    inset 0 1px 0 #fff !important;

  animation:
    cxR118R2Enter .68s cubic-bezier(.18,.88,.24,1) both,
    cxR118R2ActiveBreath 4.5s ease-in-out infinite !important;
}

/* =========================================================
   ICON
   ========================================================= */

.r7-addons-page .commerce-icon {
  width: 43px !important;
  height: 43px !important;
  min-width: 43px !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      #f4efff,
      #fbf9ff
    ) !important;

  box-shadow:
    0 8px 20px rgba(110,79,207,.09),
    inset 0 1px 0 #fff !important;

  animation:
    cxR118R2IconFloat
    3.8s
    ease-in-out
    infinite !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}

.r7-addons-page
.cx-addon-card:hover
.commerce-icon {
  transform:
    translateY(-3px)
    rotate(-6deg)
    scale(1.08) !important;

  box-shadow:
    0 13px 26px rgba(110,79,207,.15) !important;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.r7-addons-page .cx-addon-card h2 {
  margin-top: 6px !important;
  margin-bottom: 5px !important;

  font-size:
    clamp(21px,1.55vw,28px) !important;

  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
}

.r7-addons-page .cx-addon-card > div > p {
  margin-top: 4px !important;
  margin-bottom: 11px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.r7-addons-page .section-kicker {
  font-size: 10px !important;
  letter-spacing: .13em !important;
}

/* =========================================================
   PREMIUM BADGE
   ========================================================= */

.r7-addons-page
.cx-addon-card > span:not(.commerce-icon) {
  backdrop-filter: blur(10px);
}

/* =========================================================
   FEATURES - SMALLER + CLEANER
   ========================================================= */

.r7-addons-page .cx-addon-feature-list {
  display: grid !important;
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 7px !important;
  margin-top: 4px !important;
}

.r7-addons-page
.cx-addon-feature-list > span {
  min-height: 42px !important;

  display: flex !important;
  align-items: center !important;

  gap: 7px !important;
  padding: 8px 9px !important;

  border-radius: 12px !important;

  border:
    1px solid rgba(211,220,229,.84) !important;

  background:
    linear-gradient(
      145deg,
      rgba(252,253,254,.98),
      rgba(248,251,245,.98)
    ) !important;

  font-size: 10.5px !important;
  line-height: 1.28 !important;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease !important;
}

.r7-addons-page
.cx-addon-feature-list > span:hover {
  transform:
    translateY(-2px)
    scale(1.015) !important;

  border-color:
    rgba(161,203,108,.72) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f5fbe9
    ) !important;
}

.r7-addons-page
.cx-addon-feature-list > span i {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 8px !important;

  background:
    linear-gradient(
      145deg,
      #effbdc,
      #e5f8c7
    ) !important;

  color: #6ea825 !important;
}

/* =========================================================
   PRICE
   ========================================================= */

.r7-addons-page .v1b4-addon-price {
  margin-top: 12px !important;
  padding: 13px 14px !important;

  border-radius: 14px !important;

  border:
    1px solid rgba(187,207,158,.66) !important;

  background:
    linear-gradient(
      135deg,
      #f7fceb,
      #f0f8df
    ) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease !important;
}

.r7-addons-page
.cx-addon-card:hover
.v1b4-addon-price {
  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(99,147,38,.06) !important;
}

.r7-addons-page .v1b4-addon-price strong {
  font-size: 16px !important;
  letter-spacing: -.025em !important;
}

.r7-addons-page .v1b4-addon-price small {
  font-size: 9.5px !important;
}

/* =========================================================
   STATUS
   ========================================================= */

.r7-addons-page .v1b1-addon-status {
  margin-top: 9px !important;
  padding: 12px 13px !important;

  border-radius: 14px !important;

  border:
    1px solid rgba(214,222,231,.82) !important;

  background:
    linear-gradient(
      145deg,
      #fafbfd,
      #f6f8fa
    ) !important;
}

.r7-addons-page
.v1b1-addon-status:has(.active) {
  border-color:
    rgba(174,215,112,.66) !important;

  background:
    linear-gradient(
      145deg,
      #f7fde9,
      #eef8d8
    ) !important;
}

.r7-addons-page
.v1b1-addon-status .active {
  font-size: 11px !important;
  font-weight: 850 !important;
}

.r7-addons-page
.v1b1-addon-status small {
  font-size: 9.5px !important;
}

.r7-addons-page
.v1b1-addon-status .active::before {
  width: 8px !important;
  height: 8px !important;

  animation:
    cxR118R2Dot
    1.8s
    ease-in-out
    infinite !important;
}

/* =========================================================
   CTA BUTTONS
   ========================================================= */

.r7-addons-page
.cx-addon-card .button {
  position: relative !important;
  overflow: hidden !important;

  min-height: 45px !important;
  padding: 10px 14px !important;

  border-radius: 13px !important;

  font-size: 11.5px !important;
  font-weight: 850 !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.r7-addons-page
.cx-addon-card .button.primary {
  border: 0 !important;

  background:
    linear-gradient(
      110deg,
      #b7f731 0%,
      #8be900 42%,
      #74d900 67%,
      #9eef1d 100%
    ) !important;

  background-size:
    220% 100% !important;

  color: #123006 !important;

  box-shadow:
    0 9px 20px rgba(117,211,0,.18),
    inset 0 1px 0 rgba(255,255,255,.45) !important;

  animation:
    cxR118R2ButtonGradient
    4s
    ease
    infinite !important;
}

.r7-addons-page
.cx-addon-card .button.primary::after {
  content: "" !important;

  position: absolute !important;
  top: -60% !important;
  left: -45% !important;

  width: 26% !important;
  height: 220% !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.62),
      transparent
    ) !important;

  transform:
    rotate(15deg)
    translateX(-250%) !important;

  animation:
    cxR118R2ButtonShine
    3.5s
    ease-in-out
    infinite !important;
}

.r7-addons-page
.cx-addon-card .button.primary:hover {
  transform:
    translateY(-2px)
    scale(1.012) !important;

  box-shadow:
    0 14px 27px rgba(117,211,0,.26),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* Disabled buttons still elegant */
.r7-addons-page
.cx-addon-card .button:disabled {
  min-height: 45px !important;
  opacity: .60 !important;

  border:
    1px solid rgba(213,220,227,.8) !important;

  background:
    linear-gradient(
      145deg,
      #fafbfc,
      #f5f7f8
    ) !important;

  color: #8d99a7 !important;
}

/* =========================================================
   WHATSAPP CARD
   ========================================================= */

.r7-addons-page .cx-addon-whatsapp {
  border-color:
    rgba(72,196,123,.30) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f4fcf7
    ) !important;
}

/* =========================================================
   HEADER COMPACT
   ========================================================= */

.r7-addons-page .module-head {
  margin-bottom: 16px !important;
  padding: 16px 19px !important;
  border-radius: 18px !important;
}

.r7-addons-page .module-head h1 {
  font-size: 22px !important;
  line-height: 1.08 !important;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes cxR118R2Enter {
  0% {
    opacity: 0;
    transform:
      translate3d(0,22px,0)
      scale(.965);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform:
      translate3d(0,0,0)
      scale(1);
    filter: blur(0);
  }
}

@keyframes cxR118R2FloatGlow {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50% {
    transform:
      translate3d(18px,16px,0)
      scale(1.12);
  }
}

@keyframes cxR118R2Shine {
  0% {
    left: -75%;
  }

  100% {
    left: 145%;
  }
}

@keyframes cxR118R2IconFloat {
  0%,
  100% {
    transform:
      translate3d(0,0,0);
  }

  50% {
    transform:
      translate3d(0,-4px,0);
  }
}

@keyframes cxR118R2Dot {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(132,219,22,.10),
      0 0 10px rgba(132,219,22,.30);
  }

  50% {
    box-shadow:
      0 0 0 7px rgba(132,219,22,.04),
      0 0 20px rgba(132,219,22,.52);
  }
}

@keyframes cxR118R2ButtonGradient {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes cxR118R2ButtonShine {
  0%,
  58% {
    transform:
      rotate(15deg)
      translateX(-300%);
  }

  78%,
  100% {
    transform:
      rotate(15deg)
      translateX(650%);
  }
}

@keyframes cxR118R2ActiveBreath {
  0%,
  100% {
    box-shadow:
      0 17px 38px rgba(102,171,36,.10),
      0 0 0 1px rgba(144,220,52,.09);
  }

  50% {
    box-shadow:
      0 22px 48px rgba(102,171,36,.15),
      0 0 0 2px rgba(144,220,52,.14);
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {
  .r7-addons-page .cx-addon-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {
  .r7-addons-page .cx-addon-grid {
    grid-template-columns: 1fr !important;
    gap: 13px !important;
  }

  .r7-addons-page .cx-addon-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .r7-addons-page
  .cx-addon-feature-list {
    grid-template-columns: 1fr !important;
  }

  .r7-addons-page .cx-addon-card:hover {
    transform:
      translate3d(0,-2px,0) !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .r7-addons-page .cx-addon-card,
  .r7-addons-page .cx-addon-card::before,
  .r7-addons-page .cx-addon-card::after,
  .r7-addons-page .commerce-icon,
  .r7-addons-page .button.primary,
  .r7-addons-page .button.primary::after,
  .r7-addons-page
  .v1b1-addon-status .active::before {
    animation: none !important;
    transition: none !important;
  }
}

/* CODSHIPX_R118_R2_COMPACT_ANIMATED_END */