/* ══════════════════════════════════════════════════════════════
   Buzz Waves Manager — Public Front-End Styles
   Styles the output of [bwm_projects] [bwm_pricing] [bwm_testimonials]
   and [bwm_services] wherever they're placed (any page/post).
   Mobile-first, fully responsive.
   ══════════════════════════════════════════════════════════════ */

.bwm-projects-grid,
.bwm-pricing-grid,
.bwm-testi-grid,
.bwm-services-list,
.bwm-projects-grid *,
.bwm-pricing-grid *,
.bwm-testi-grid *,
.bwm-services-list * {
  box-sizing: border-box;
}

:root {
  --bwm-blue: #0057ff;
  --bwm-blue2: #003ecc;
  --bwm-ink: #0d1117;
  --bwm-ink2: #3d4452;
  --bwm-ink3: #8b909a;
  --bwm-border: #e8eaed;
  --bwm-bg: #f7f8fc;
  --bwm-r: 14px;
  --bwm-sh: 0 2px 16px rgba(13, 17, 23, .07);
  --bwm-sh2: 0 20px 50px rgba(13, 17, 23, .14);
}

/* ── [bwm_projects] ── */
.bwm-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  width: 100%;
}
.bwm-project-card {
  border-radius: var(--bwm-r);
  overflow: hidden;
  border: 1px solid var(--bwm-border);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bwm-project-card:hover { transform: translateY(-4px); box-shadow: var(--bwm-sh2); }
.bwm-project-img { aspect-ratio: 4/3; background: var(--bwm-bg); overflow: hidden; position: relative; }
.bwm-project-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bwm-live-badge {
  position: absolute; bottom: .8rem; right: .8rem; z-index: 2;
  background: #fff; border-radius: 99px; padding: .25rem .75rem;
  font-size: .7rem; font-weight: 700; display: flex; align-items: center; gap: .35rem;
  border: 1px solid var(--bwm-border); color: var(--bwm-ink);
}
.bwm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: bwm-pulse 2s infinite; }
@keyframes bwm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.bwm-project-info { padding: 1.2rem 1.3rem 1.4rem; }
.bwm-tag {
  display: inline-block; background: var(--bwm-bg); color: var(--bwm-ink2);
  font-size: .68rem; font-weight: 600; padding: .22rem .6rem; border-radius: 99px; margin-bottom: .6rem;
}
.bwm-project-info h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; color: var(--bwm-ink); }
.bwm-project-info p { font-size: .85rem; color: var(--bwm-ink2); line-height: 1.6; margin: 0 0 .8rem; }
.bwm-link {
  font-size: .82rem; font-weight: 600; color: var(--bwm-blue); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.bwm-link:hover { color: var(--bwm-blue2); }

/* ── [bwm_pricing] ── */
.bwm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  width: 100%;
  align-items: stretch;
}
.bwm-plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--bwm-border);
  border-radius: var(--bwm-r);
  padding: 1.8rem 1.6rem;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bwm-plan:hover { transform: translateY(-4px); box-shadow: var(--bwm-sh2); }
.bwm-plan.featured { border-color: var(--bwm-blue); box-shadow: var(--bwm-sh2); }
.bwm-popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--bwm-blue); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 99px;
  white-space: nowrap;
}
.bwm-plan-name { font-size: 1.05rem; font-weight: 700; color: var(--bwm-ink); margin-bottom: .6rem; }
.bwm-plan-price { font-size: 1.9rem; font-weight: 800; color: var(--bwm-ink); line-height: 1.1; }
.bwm-plan-period { font-size: .78rem; color: var(--bwm-ink3); margin-bottom: 1rem; }
.bwm-plan hr { border: none; border-top: 1px solid var(--bwm-border); margin: 1rem 0; }
.bwm-plan-features { list-style: none; margin: 0 0 1.4rem; padding: 0; text-align: left; }
.bwm-plan-features li {
  font-size: .85rem; color: var(--bwm-ink2); padding: .4rem 0 .4rem 1.4rem; position: relative; line-height: 1.5;
}
.bwm-plan-features li::before {
  content: '✓'; position: absolute; left: 0; color: var(--bwm-blue); font-weight: 700;
}
.bwm-plan-cta {
  display: inline-block; width: 100%; background: var(--bwm-blue); color: #fff !important;
  padding: .8rem 1rem; border-radius: 9px; font-weight: 700; font-size: .9rem;
  text-decoration: none; transition: background .15s;
}
.bwm-plan-cta:hover { background: var(--bwm-blue2); }

/* ── [bwm_testimonials] ── */
.bwm-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  width: 100%;
}
.bwm-testi-card { background: var(--bwm-bg); border-radius: var(--bwm-r); padding: 1.6rem; }
.bwm-stars { color: #f5a623; font-size: .9rem; margin-bottom: .8rem; letter-spacing: .1em; }
.bwm-quote { font-size: .9rem; color: var(--bwm-ink2); line-height: 1.7; margin: 0 0 1.2rem; }
.bwm-testi-author { display: flex; align-items: center; gap: .7rem; }
.bwm-testi-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bwm-testi-author strong { display: block; font-size: .86rem; font-weight: 700; color: var(--bwm-ink); }
.bwm-testi-author span { font-size: .72rem; color: var(--bwm-ink3); }

/* ── [bwm_services] ── */
.bwm-services-list { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.bwm-service-row {
  display: flex; gap: 1rem; align-items: flex-start; background: #fff;
  border: 1px solid var(--bwm-border); border-radius: var(--bwm-r); padding: 1.3rem 1.4rem;
}
.bwm-service-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: .3rem; flex-shrink: 0; }
.bwm-service-body h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; color: var(--bwm-ink); }
.bwm-service-body p { font-size: .88rem; color: var(--bwm-ink2); line-height: 1.6; margin: 0 0 .7rem; }
.bwm-service-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.bwm-service-tags span {
  font-size: .72rem; font-weight: 600; color: var(--bwm-ink2); background: var(--bwm-bg);
  padding: .25rem .6rem; border-radius: 99px;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
  .bwm-projects-grid,
  .bwm-testi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .bwm-projects-grid,
  .bwm-testi-grid { grid-template-columns: 1fr; }
  .bwm-pricing-grid { grid-template-columns: 1fr; }
  .bwm-plan-price { font-size: 1.7rem; }
  .bwm-service-row { flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem; }
  .bwm-service-dot { margin-top: 0; }
  .bwm-project-info,
  .bwm-testi-card { padding: 1.1rem 1.15rem 1.3rem; }
}

@media (max-width: 380px) {
  .bwm-plan { padding: 1.5rem 1.2rem; }
  .bwm-testi-author img { width: 34px; height: 34px; }
}