/* ============================================================
   DIVEASSURE TRUST STRIP — GRID VERSION
   Dark card · 4-column grid · stacks on mobile
   Same HTML, just grid instead of flex
   ============================================================ */
.assure-strip-wrapper {
   padding: 3rem 0 !important;
   background: #ebefff !important;
}

.assure-strip {
   position: relative;
   display: grid !important;
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
   gap: 32px;
   width: 100%;
   padding: 28px 32px !important;
   background: var(--bee-dark);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px !important;
   box-shadow: 0 20px 50px rgba(2, 16, 31, 0.18);
   overflow: hidden;
   transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.assure-strip:hover {
   transform: translateY(-3px);
   box-shadow: 0 28px 60px rgba(2, 16, 31, 0.25);
}

/* Shimmer overlay on hover */
.assure-strip::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg,
         transparent 0%,
         rgba(255, 219, 27, 0.06) 50%,
         transparent 100%);
   pointer-events: none;
   transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 1;
}

.assure-strip:hover::before {
   left: 100%;
}

/* Gold left-border accent */
.assure-strip::after {
   content: "";
   position: absolute;
   top: 16px;
   bottom: 16px;
   left: 0;
   width: 3px;
   background: linear-gradient(180deg, var(--bee-gold), transparent);
   border-radius: 0 3px 3px 0;
   pointer-events: none;
   z-index: 2;
}

/* ---------- Logo (column 1) ---------- */
.assure-strip .assure-icon {
   width: 110px;
   position: relative;
   z-index: 2;
   padding: 10px;
   display: flex;
   background: rgb(52 184 139);
   height: 70px;
   border-radius: 10px;
}

.assure-strip .assure-icon img {
   width: 100%;
   height: auto;
   display: block;
   filter: brightness(0) invert(1);
   opacity: 0.95;
}

/* ---------- Content (column 2 — 1fr fills available) ---------- */
.assure-strip .assure-content {
   position: relative;
   z-index: 2;
   min-width: 0;
   /* allow text to wrap inside the 1fr column */
}

/* Title row — grid: title on left, pill on right (or wrap if needed) */
.assure-strip .assure-title-row {
   display: grid !important;
   grid-template-columns: auto auto;
   justify-content: start;
   align-items: center;
   gap: 12px;
   width: 100%;
   margin: 0;
}

.assure-strip .assure-title,
.assure-strip .assure-title .elementor-heading-title {
   font-size: 28px !important;
   font-weight: 600;
   color: #fff;
   margin: 0;
   line-height: 1.3;
   letter-spacing: -0.2px;
   white-space: nowrap;
}

.assure-strip .assure-title strong {
   color: var(--bee-gold);
   font-weight: 700;
}

/* Recommended pill */
.assure-strip .assure-recommend-pill {
   display: inline-grid !important;
   grid-template-columns: auto auto;
   align-items: center;
   gap: 6px;
   padding: 4px 10px 4px 8px;
   background: rgba(93, 202, 165, 0.15);
   border: 1px solid rgba(93, 202, 165, 0.3);
   border-radius: 999px;
   width: max-content;
}

.assure-strip .assure-recommend-pill::before {
   content: "";
   width: 6px;
   position: relative;
   height: 6px;
   background: var(--bee-teal);
   border-radius: 50%;
   animation: assurePulse 2s ease-in-out infinite;
   box-shadow: 0 0 0 0 rgba(93, 202, 165, 0.6);
}

@keyframes assurePulse {

   0%,
   100% {
      opacity: 1;
      box-shadow: 0 0 0 0 rgba(93, 202, 165, 0.6);
   }

   50% {
      opacity: 0.7;
      box-shadow: 0 0 0 6px rgba(93, 202, 165, 0);
   }
}

.assure-strip .assure-recommend-pill .e-paragraph-base,
.assure-strip .assure-recommend-pill p {
   font-size: 10px;
   font-weight: 700;
   color: var(--bee-teal);
   letter-spacing: 0.8px;
   text-transform: uppercase;
   margin: 0;
   line-height: 1;
   white-space: nowrap;
}

/* Description */
.assure-strip .assure-desc {
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.8);
   margin: 8px 0 0 !important;
   max-width: 560px;
}

/* ---------- Stats (column 3) ---------- */
.assure-strip .assure-stats {
   display: grid !important;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
   align-items: center;
   gap: 16px;
   position: relative;
   z-index: 2;
}

.assure-strip .assure-stat {
   display: grid !important;
   justify-items: center;
   gap: 2px;
   min-width: 60px;
}

.assure-strip .assure-stat .elementor-heading-title {
   font-size: 20px;
   font-weight: 700;
   color: #fff;
   margin: 0;
   line-height: 1;
   letter-spacing: -0.5px;
   white-space: nowrap;
}

.assure-strip .assure-stat .e-paragraph-base,
.assure-strip .assure-stat p {
   font-size: 10px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 0.8px;
   text-transform: uppercase;
   margin: 0;
   line-height: 1;
}

.assure-strip .assure-stat-divider {
   width: 1px;
   height: 36px;
   padding: 0 !important;
   min-width: 1px !important;
   background: rgba(255, 255, 255, 0.12);
}

/* ---------- CTA Button (column 4) ---------- */
.assure-strip .assure-cta {
   position: relative;
   z-index: 2;
}

.assure-strip .assure-cta .elementor-button {
   white-space: nowrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — tighter gaps */
@media (max-width: 1024px) {
   .assure-strip {
      gap: 24px;
      padding: 24px 28px;
   }

   .assure-strip .assure-desc {
      font-size: 12.5px;
   }
   .assure-strip .assure-recommend-pill{
       display:none !important;
   }
}

/* Smaller tablet — drop stats column to save space */
@media (max-width: 900px) {
   .assure-strip {
      grid-template-columns: auto 1fr auto;
      gap: 20px;
   }

   .assure-strip .assure-stats {
      display: none;
      /* hide stats at this size, button still visible */
   }

   .assure-strip .assure-icon {
      width: 70px;
   }
}

/* Mobile — single column stack */
@media (max-width: 700px) {
   .assure-strip {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 24px 22px;
      text-align: left;
   }

   .assure-strip::after {
      top: 0;
      left: 16px;
      right: 16px;
      bottom: auto;
      width: auto;
      height: 3px;
      background: linear-gradient(90deg, var(--bee-gold), transparent);
      border-radius: 0 0 3px 3px;
   }

   .assure-strip .assure-icon {
      width: 70px;
   }

   /* Re-show stats on mobile, horizontal row */
   .assure-strip .assure-stats {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      justify-content: start;
      gap: 18px;
   }

   .assure-strip .assure-stat {
      justify-items: start;
   }

   .assure-strip .assure-title,
   .assure-strip .assure-title .elementor-heading-title {
      font-size: 17px;
      white-space: normal;
   }

   .assure-strip .assure-desc {
      font-size: 13px;
      max-width: none;
   }

   .assure-strip .assure-cta {
      width: 100%;
   }

   .assure-strip .assure-cta .elementor-button {
      width: 100%;
      justify-content: center;
   }
}

@media (max-width: 480px) {
   .assure-strip {
      padding: 20px 18px;
      border-radius: 16px;
   }

   .assure-strip .assure-title,
   .assure-strip .assure-title .elementor-heading-title {
      font-size: 16px;
   }
}