/* MemoPryl — Reusable Component Library */

/* ============ RATING BLOCK ============ */
.rating-block{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.rating-block .stars{color:var(--gold);letter-spacing:2px;font-size:1.1rem;font-weight:700}
.rating-block .rating-number{font-weight:700;color:var(--navy)}
.rating-block .rating-count{color:var(--gray-500);font-size:.9rem}
.rating-block.compact{font-size:.88rem;gap:6px}
.rating-block.compact .stars{font-size:.95rem}

/* ============ BENEFIT CARDS ============ */
.benefit-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:30px 24px;text-align:center;transition:all .3s ease;height:100%;
}
.benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--green)}
.benefit-icon{
  width:68px;height:68px;border-radius:50%;background:var(--green-soft);
  display:grid;place-items:center;margin:0 auto 18px;color:var(--green-dark);
}
.benefit-icon svg{width:34px;height:34px}
.benefit-title{font-size:1.1rem;margin-bottom:8px;color:var(--navy)}
.benefit-desc{font-size:.93rem;color:var(--gray-700);margin:0;line-height:1.55}

/* ============ TRUST BADGES ============ */
.trust-badges{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  margin:30px 0;
}
.trust-badge{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 16px;background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--radius);min-width:110px;
  font-size:.78rem;font-weight:600;color:var(--navy);text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .25s;
}
.trust-badge:hover{transform:translateY(-3px)}
.trust-badge svg{width:32px;height:32px;color:var(--green-dark)}
.trust-badge.gold svg{color:var(--gold)}
.trust-badge.navy svg{color:var(--navy)}

/* ============ REVIEW CARDS ============ */
.review-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:24px;transition:all .3s;display:flex;flex-direction:column;height:100%;
}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.reviewer-photo{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--green-soft);border:2px solid var(--white);
  box-shadow:var(--shadow-sm);
}
.reviewer-info{display:flex;flex-direction:column;flex:1;min-width:0}
.reviewer-name{font-weight:700;color:var(--navy);font-size:.97rem}
.reviewer-location{font-size:.8rem;color:var(--gray-500)}
.review-card .stars{color:var(--gold);letter-spacing:1px;font-size:.95rem;margin-top:2px}
.verified-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;
  color:var(--cta-green);background:rgba(13,128,80,.12);
  padding:4px 10px;border-radius:12px;white-space:nowrap;
}
.review-title{font-size:1.02rem;color:var(--navy);margin:6px 0 8px}
.review-text{font-size:.93rem;color:var(--gray-700);line-height:1.6;margin:0 0 12px;flex:1}
.review-date{font-size:.78rem;color:var(--gray-500);margin-top:auto}

/* ============ PRICING CARDS ============ */
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  align-items:stretch;margin-top:30px;
}
.pricing-card{
  background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius-lg);
  padding:30px 24px 26px;position:relative;display:flex;flex-direction:column;
  transition:all .3s;text-align:center;
}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pricing-card.best{
  border:3px solid var(--green);background:var(--green-soft);
  transform:scale(1.04);box-shadow:0 12px 36px rgba(46,204,143,.18);
}
.pricing-card.best:hover{transform:scale(1.04) translateY(-4px)}
.ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-weight:800;font-size:.78rem;
  padding:6px 18px;border-radius:14px;letter-spacing:.06em;
  box-shadow:0 4px 12px rgba(46,204,143,.4);text-transform:uppercase;
}
.pricing-badge{
  display:inline-block;font-weight:800;font-size:.82rem;color:var(--gold);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;
}
.pricing-card.best .pricing-badge{color:var(--green-dark)}
.pricing-card .stars{color:var(--gold);font-size:1rem;letter-spacing:1px;margin-bottom:14px}
.pricing-bottles{height:130px;display:grid;place-items:center;margin-bottom:14px}
.pricing-bottles img{max-height:130px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}
.pricing-title{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.pricing-supply{font-size:.85rem;color:var(--gray-500);margin-bottom:14px}
.pricing-per-bottle{font-size:1.4rem;font-weight:800;color:var(--green-dark);line-height:1}
.pricing-per-bottle small{font-size:.7rem;color:var(--gray-500);font-weight:500;display:block;margin-top:4px}
.pricing-totals{margin:10px 0 14px;font-size:.95rem}
.pricing-totals .old{text-decoration:line-through;color:var(--gray-500);margin-right:8px}
.pricing-totals .new{font-weight:800;color:var(--navy);font-size:1.2rem}
.pricing-save{
  display:inline-block;background:var(--orange);color:#fff;
  font-weight:800;font-size:.85rem;padding:5px 14px;border-radius:14px;margin-bottom:14px;
}
.pricing-features{
  list-style:none;padding:0;margin:0 0 18px;text-align:left;font-size:.9rem;
}
.pricing-features li{padding:4px 0;color:var(--gray-700);display:flex;align-items:center;gap:8px}
.pricing-features li::before{
  content:"✓";color:var(--green);font-weight:800;flex-shrink:0;
}
.pricing-cta{margin-top:auto}
.pricing-payments{
  display:flex;justify-content:center;gap:6px;margin-top:14px;align-items:center;
  font-size:.74rem;color:var(--gray-500);
}
.pricing-payments .pm{
  display:inline-block;padding:3px 6px;background:#fff;border:1px solid var(--gray-200);
  border-radius:4px;font-weight:700;color:var(--navy);font-size:.7rem;
}
.pricing-discount-label{
  display:block;margin-top:10px;font-size:.78rem;font-weight:700;
  color:var(--green-dark);letter-spacing:.05em;
}

.stock-notice{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:24px auto 0;padding:12px 18px;background:#fff;
  border:1px dashed var(--green);border-radius:var(--radius);
  font-size:.9rem;color:var(--gray-700);max-width:560px;
}
.pulse-dot{
  width:10px;height:10px;background:var(--green);border-radius:50%;
  animation:pulse 1.5s infinite;flex-shrink:0;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(46,204,143,.6)}
  70%{box-shadow:0 0 0 12px rgba(46,204,143,0)}
  100%{box-shadow:0 0 0 0 rgba(46,204,143,0)}
}
.intl-notice{
  font-size:.85rem;color:var(--gray-500);text-align:center;margin-top:12px;
}

/* ============ CTA BUTTONS ============ */
.btn{
  display:inline-block;font-weight:700;font-family:inherit;
  border:0;cursor:pointer;text-align:center;text-decoration:none;
  transition:all .25s ease;line-height:1;
}
.btn-primary{
  background:var(--cta-green);color:#fff !important;
  padding:18px 36px;font-size:1.05rem;border-radius:8px;
  box-shadow:0 6px 22px rgba(13,128,80,.35);
  animation:pulseGlow 2.4s infinite;
}
.btn-primary:hover{background:var(--cta-green-hover);transform:scale(1.03);color:#fff !important}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 6px 22px rgba(13,128,80,.35)}
  50%{box-shadow:0 6px 28px rgba(13,128,80,.55)}
}
.btn-secondary{
  background:transparent;color:var(--navy) !important;
  padding:16px 32px;font-size:1rem;border-radius:8px;
  border:2px solid var(--navy);
}
.btn-secondary:hover{background:var(--navy);color:#fff !important}
.btn-pricing{
  display:block;width:100%;background:var(--cta-green);color:#fff !important;
  padding:14px 18px;font-size:.95rem;letter-spacing:.08em;
  text-transform:uppercase;border-radius:8px;font-weight:800;
  box-shadow:0 4px 14px rgba(13,128,80,.35);
}
.btn-pricing:hover{background:var(--cta-green-hover);color:#fff !important;transform:translateY(-2px)}
.pricing-card.best .btn-pricing{animation:pulseGlow 2.4s infinite}
.btn-large{padding:22px 44px;font-size:1.15rem}

.cta-sub{
  font-size:.83rem;color:var(--gray-500);margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}
.cta-sub::before{content:"🔒";margin-right:2px}

/* ============ INGREDIENT IMAGE BOX (page hero) ============ */
.ingredient-hero{
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(135deg,var(--green-soft),#fff);
  padding:50px;border-radius:var(--radius-lg);margin:30px 0;
}
.ingredient-hero img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
@media(max-width:780px){.ingredient-hero{grid-template-columns:1fr;padding:30px 24px}}

/* ============ PRICING RESPONSIVE ============ */
@media (max-width:980px){
  .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:30px auto 0}
  .pricing-card.best{transform:none}
  .pricing-card.best:hover{transform:translateY(-4px)}
}

/* ============ OFFER CTA BLOCK (replaces pricing cards on landing) ============ */
.offer-cta-block{
  background:linear-gradient(135deg,#fff 0%,var(--green-soft) 100%);
  border:3px solid var(--green);
  border-radius:var(--radius-lg);
  padding:40px;margin-top:20px;
  box-shadow:0 12px 36px rgba(46,204,143,.15);
  position:relative;overflow:hidden;
}
.offer-cta-block::before{
  content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(46,204,143,.18),transparent 70%);border-radius:50%;
  pointer-events:none;
}
.offer-cta-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;
  position:relative;z-index:2;
}
.offer-cta-visual img{
  width:100%;max-width:380px;border-radius:var(--radius);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.18));margin:0 auto;
}
.offer-cta-text h3{color:var(--navy)}
.offer-bullets{
  list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px;
  font-size:.97rem;color:var(--navy);font-weight:500;
}
.offer-bullets li{display:flex;align-items:center;gap:6px}
@media (max-width:780px){
  .offer-cta-block{padding:28px 22px}
  .offer-cta-grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .offer-bullets{text-align:left;max-width:340px;margin:0 auto 22px}
  .offer-cta-visual img{max-width:260px}
}