/* Lipa Mdogo Mdogo — front-end. Scoped under .lmm so it won't leak into the theme. */
.lmm, .lmm * { box-sizing: border-box; }
.lmm {
  --lmm-gold:#C79A54;
  --lmm-gold-2:#d8ab63;
  --lmm-ink:#1a1712;
  --lmm-cream:#F4F1EC;
  --lmm-green:#1F7A34;
  font-family: Arial, Helvetica, sans-serif;
  color:#20201c;
}
.lmm-wrap { max-width:1200px; margin:0 auto; padding:clamp(28px,5vw,64px) clamp(18px,4vw,40px); }

/* ===== Section layout: intro left, panel right ===== */
.lmm-section .lmm-wrap {
  display:grid; grid-template-columns:1.05fr minmax(320px,440px);
  gap:clamp(28px,4vw,60px); align-items:start;
}
.lmm-intro { min-width:0; }
.lmm-eyebrow {
  text-transform:uppercase; letter-spacing:.3em; font-weight:700;
  color:var(--lmm-gold); font-size:13px; margin:0 0 14px;
}

/* ===== Bulging / heartbeat heading (Times New Roman, like the luxury hero) ===== */
.lmm-bulge {
  font-family:"Times New Roman", Times, serif; font-weight:bold;
  line-height:1.04; margin:0 0 16px; color:var(--lmm-ink);
  font-size:clamp(2.1rem,4.6vw,3.9rem); letter-spacing:.01em;
}
.lmm-bulge-sm { font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:4px; }
.lmm-ltr, .lmm-sp {
  display:inline-block; transform-origin:50% 55%; will-change:transform;
  animation:lmmBulge 4.6s ease-out var(--d,0s) infinite;
}
.lmm-sp { animation:none; }
@keyframes lmmBulge {
  0%   { transform:scale(1);    }
  3%   { transform:scale(1.4);  }  /* lub */
  7%   { transform:scale(1);    }
  11%  { transform:scale(1.5);  }  /* dub */
  17%  { transform:scale(1);    }
  100% { transform:scale(1);    }
}
@media (prefers-reduced-motion:reduce) {
  .lmm-ltr { animation:none; }
}

.lmm-sub { font-size:clamp(15px,1.3vw,18px); line-height:1.6; color:#4a443c; max-width:40em; margin:0 0 24px; }

/* ===== Steps ===== */
.lmm-steps { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lmm-step { display:flex; gap:12px; align-items:flex-start; }
.lmm-step-n {
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--lmm-gold); color:#141210; font-weight:bold;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.lmm-step b { display:block; color:var(--lmm-ink); font-size:15px; }
.lmm-step i { display:block; font-style:normal; color:#6a6358; font-size:13px; line-height:1.45; margin-top:2px; }

/* ===== Panel (form / dashboard) ===== */
.lmm-panel {
  background:#fff; border:1px solid #e7e1d6; border-radius:16px;
  padding:clamp(20px,2vw,28px); box-shadow:0 20px 50px rgba(40,30,10,.10);
}
.lmm-panel-solo { max-width:460px; margin:0 auto; }

.lmm-tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid #eee; }
.lmm-tab {
  background:none; border:0; padding:10px 4px; margin-right:14px; cursor:pointer;
  font-size:15px; font-weight:700; color:#8a8378; border-bottom:2px solid transparent;
}
.lmm-tab.is-active { color:var(--lmm-ink); border-bottom-color:var(--lmm-gold); }
.lmm-tabpane { display:none; }
.lmm-tabpane.is-active { display:block; }

.lmm-field { margin-bottom:12px; }
.lmm-field label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#8a8378; font-weight:700; margin-bottom:5px; }
.lmm-field input {
  width:100%; padding:11px 13px; border:1px solid #d8d2c6; border-radius:9px;
  font-size:15px; color:var(--lmm-ink); background:#fdfcfa; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.lmm-field input:focus { border-color:var(--lmm-gold); box-shadow:0 0 0 3px rgba(199,154,84,.15); }
.lmm-hint { font-size:12.5px; color:#8a8378; margin:4px 0 14px; }
.lmm-hint a { color:var(--lmm-gold); }

.lmm-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px; border:0; border-radius:9px; cursor:pointer;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:14px;
  transition:background .25s, transform .2s;
}
.lmm-btn-gold { background:var(--lmm-gold); color:#141210; }
.lmm-btn-gold:hover { background:var(--lmm-gold-2); transform:translateY(-1px); }
.lmm-btn[disabled] { opacity:.6; cursor:default; transform:none; }

.lmm-msg, .lmm-pay-msg { margin-top:10px; font-size:13.5px; min-height:1em; }
.lmm-msg.is-error, .lmm-pay-msg.is-error { color:#b3261e; }
.lmm-msg.is-ok, .lmm-pay-msg.is-ok { color:var(--lmm-green); }

/* ===== Dashboard ===== */
.lmm-dash-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.lmm-dash-hi { margin:0; color:#6a6358; font-size:14px; }
.lmm-logout { font-size:13px; color:var(--lmm-gold); text-decoration:none; white-space:nowrap; }
.lmm-empty { color:#6a6358; }

.lmm-plans { display:flex; flex-direction:column; gap:16px; }
.lmm-plan { border:1px solid #ece6da; border-radius:14px; padding:16px; background:#fdfcfa; }
.lmm-plan-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.lmm-plan-item { margin:0; font-size:17px; color:var(--lmm-ink); }
.lmm-plan-ref { font-size:12px; color:#9a948a; }

.lmm-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:30px; white-space:nowrap; }
.lmm-badge-active { background:#fff4e0; color:#9a6b12; }
.lmm-badge-completed { background:#e4f6e9; color:#1f7a34; }
.lmm-badge-cancelled { background:#f1f1f1; color:#777; }

.lmm-progress { height:8px; background:#eee5d5; border-radius:20px; overflow:hidden; margin:8px 0 12px; }
.lmm-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--lmm-gold),var(--lmm-gold-2)); border-radius:20px; transition:width .6s ease; }

.lmm-figures { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.lmm-figures b { display:block; font-size:15px; color:var(--lmm-ink); }
.lmm-figures i { display:block; font-style:normal; font-size:11px; color:#9a948a; text-transform:uppercase; letter-spacing:.05em; }

.lmm-pay { background:#fff; border:1px dashed #e0d7c5; border-radius:10px; padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lmm-pay-amt { width:150px; }
.lmm-pay-phone { width:170px; }
.lmm-pay input { padding:10px 12px; border:1px solid #d8d2c6; border-radius:8px; font-size:14px; }
.lmm-pay .lmm-btn { width:auto; padding:11px 18px; }
.lmm-pay-msg { flex-basis:100%; }

.lmm-history { margin-top:12px; }
.lmm-history summary { cursor:pointer; font-size:13px; color:var(--lmm-gold); font-weight:700; }
.lmm-history table { width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; }
.lmm-history th, .lmm-history td { text-align:left; padding:7px 8px; border-bottom:1px solid #eee; }
.lmm-history th { color:#8a8378; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.lmm-pay-row-pending td { color:#9a6b12; }
.lmm-pay-row-failed td { color:#b3261e; text-decoration:line-through; }

/* ===== Responsive ===== */
@media (max-width:900px) {
  .lmm-section .lmm-wrap { grid-template-columns:1fr; }
  .lmm-steps { grid-template-columns:1fr; }
  .lmm-figures { grid-template-columns:repeat(2,1fr); }
  .lmm-pay-amt, .lmm-pay-phone { width:100%; }
  .lmm-pay .lmm-btn { width:100%; }
}