/* Via Marketing Profit Planner: Frontend styles */
.vmpp{
  direction: rtl;
  /* Inherit typography from the website/theme */
  font-family: inherit;
  color: #111827;
  background: #F9FAFB;
  padding: 18px;
  border-radius: 16px;
  --vmpp-primary: #4361EC;
  --vmpp-primary-rgb: 67,97,236;
  --vmpp-border: #E5E7EB;
  --vmpp-card: #FFFFFF;
  --vmpp-muted: #6B7280;
  --vmpp-success: #10B981;
  --vmpp-warning: #F59E0B;
  --vmpp-error: #EF4444;
  --vmpp-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --vmpp-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}

/* Typography (inherit font-family; sizes per spec) */
.vmpp h2{
  font-weight:700;
  font-size:1.5rem;
  line-height:1.3em;
  letter-spacing:0.32px;
}
.vmpp h3{
  font-weight:700;
  font-size:1.3rem;
  line-height:1.4em;
  letter-spacing:0.32px;
}
.vmpp h4{
  font-weight:700;
  font-size:1.2rem;
  line-height:1.5em;
  letter-spacing:0.32px;
}
.vmpp p{
  font-weight:400;
  font-size:1rem;
  line-height:1.5em;
  letter-spacing:0.32px;
}
.vmpp button,
.vmpp .vmpp__btn,
.vmpp input[type="button"],
.vmpp input[type="submit"]{
  font-family: inherit;
  font-weight:500;
  font-size:1.1rem;
  line-height:1.5em;
  letter-spacing:0.32px;
}

@media (min-width: 768px){
  .vmpp h2{font-size:2rem}
  .vmpp h3{font-size:1.7rem}
  .vmpp h4{font-size:1.5rem}
  .vmpp p{font-size:1rem}
  .vmpp button,
  .vmpp .vmpp__btn,
  .vmpp input[type="button"],
  .vmpp input[type="submit"]{font-size:1.2rem}
}
@media (min-width: 1025px){
  .vmpp h2{font-size:3.5rem}
  .vmpp h3{font-size:3rem}
  .vmpp h4{font-size:2.5rem}
  .vmpp p{font-size:1.1rem}
  .vmpp button,
  .vmpp .vmpp__btn,
  .vmpp input[type="button"],
  .vmpp input[type="submit"]{font-size:1.25rem}
}
.vmpp *{box-sizing:border-box;max-width:100%}
.vmpp__card{
  background: var(--vmpp-card);
  border: 1px solid var(--vmpp-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--vmpp-shadow);
}
.vmpp__hero{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(var(--vmpp-primary-rgb),.06), rgba(255,255,255,1));
}
.vmpp__title{
  margin:0 0 8px;
  color: var(--vmpp-primary);
}
.vmpp__subtitle{
  margin:0 0 10px;
  color: var(--vmpp-muted);
}
.vmpp__bullets{margin:0;padding-right:18px;color:#111;font-size:14px;line-height:1.6}
.vmpp__bullets li{margin:4px 0}
.vmpp__heroBadge{
  flex:0 0 auto;
  text-align:center;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(var(--vmpp-primary-rgb),.2);
  background: rgba(var(--vmpp-primary-rgb),.06);
  min-width: 120px;
}
.vmpp__badgeTop{font-weight:700;color:var(--vmpp-primary);font-size:14px;letter-spacing:.5px}
.vmpp__badgeMid{font-weight:800;font-size:18px;margin-top:2px}
.vmpp__badgeBot{font-size:12px;color:var(--vmpp-muted);margin-top:2px}

.vmpp__grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width: 900px){
  .vmpp__grid{grid-template-columns:1.2fr .8fr;align-items:start}
  .vmpp__preview{position:sticky;top:18px}
}

.vmpp__steps{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.vmpp__dot{
  width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--vmpp-border);
  background:#fff;
  color: var(--vmpp-muted);
  font-weight:700;
}
.vmpp__dot.is-active{background:var(--vmpp-primary);border-color:var(--vmpp-primary);color:#fff}
.vmpp__dot.is-done{background:var(--vmpp-success);border-color:var(--vmpp-success);color:#fff}

.vmpp__progressRow{display:flex;justify-content:space-between;gap:10px;color:var(--vmpp-muted);font-size:12px;margin-bottom:8px}
.vmpp__stepLbl{color:#111;font-weight:700}
.vmpp__progress{height:8px;background:var(--vmpp-border);border-radius:999px;overflow:hidden;margin-bottom:12px}
.vmpp__progressBar{height:100%;width:0%;background:linear-gradient(90deg,var(--vmpp-primary),rgba(var(--vmpp-primary-rgb),.6));transition:width .25s ease}

.vmpp__step{min-height:220px}
.vmpp__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vmpp__field{margin-bottom:14px}
.vmpp label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:#111}
.vmpp__req{color:var(--vmpp-error)}

/* Label + tooltip */
.vmpp__labelRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.vmpp__labelRow label{margin-bottom:0}

.vmpp__help{
  flex:0 0 auto;
  position:relative;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--vmpp-border);
  background:var(--vmpp-card);
  color:var(--vmpp-muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
}
.vmpp__help:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:2px}
.vmpp__help::after{
  content:attr(data-tip);
  position:absolute;
  z-index:30;
  bottom:calc(100% + 10px);
  right:0;
  max-width:280px;
  width:max-content;
  background:var(--vmpp-card);
  color:var(--vmpp-text);
  border:1px solid var(--vmpp-border);
  border-radius:12px;
  box-shadow:var(--vmpp-shadow);
  padding:10px 12px;
  font-weight:400;
  font-size:0.95rem;
  line-height:1.4em;
  letter-spacing:0.32px;
  white-space:normal;
  text-align:right;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.vmpp__help:hover::after,
.vmpp__help:focus::after,
.vmpp__help.is-open::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.vmpp input, .vmpp select, .vmpp textarea{
  width:100%;
  border:2px solid var(--vmpp-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vmpp select{padding-left:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center}
.vmpp input:focus, .vmpp select:focus, .vmpp textarea:focus{
  outline:none;border-color:var(--vmpp-primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.vmpp__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:2px solid var(--vmpp-border);
  background:#fff;
  cursor:pointer;
  font-weight:500;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  min-height:44px;
}
.vmpp__pill:hover{transform:translateY(-1px);border-color:rgba(var(--vmpp-primary-rgb),.35)}
.vmpp__pill.is-active{background:var(--vmpp-primary);border-color:var(--vmpp-primary);color:#fff}

.vmpp__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 12px;
  padding: 12px 16px;
  border: 2px solid transparent;
  background: var(--vmpp-primary);
  color:#fff;
  font-weight:500;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  min-height:48px;
}
.vmpp__btn:hover{transform:translateY(-1px);box-shadow:var(--vmpp-shadow-lg)}
.vmpp__btn:active{transform:translateY(0);box-shadow:var(--vmpp-shadow)}
.vmpp__btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.vmpp__btn--block{width:100%}
.vmpp__btn--ghost{background:#fff;border-color:var(--vmpp-border);color:#111}
.vmpp__btn--ghost:hover{border-color:var(--vmpp-primary);color:var(--vmpp-primary);background:rgba(var(--vmpp-primary-rgb),.04)}
.vmpp__btn--wa{
  background: linear-gradient(135deg,#25D366,#128C7E);
}
.vmpp__nav{display:flex;gap:10px;justify-content:space-between;margin-top:12px}
.vmpp__tip{
  margin-top:12px;
  background: rgba(var(--vmpp-primary-rgb),.08);
  border: 1px solid rgba(var(--vmpp-primary-rgb),.2);
  padding: 10px 12px;
  border-radius: 12px;
  color: #1f2937;
  font-size: 13px;
}

.vmpp__messages{margin-top:10px}
.vmpp__msg{
  display:flex;gap:10px;align-items:flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--vmpp-border);
  background:#fff;
  margin: 8px 0;
  font-size: 14px;
}
.vmpp__msg--error{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: #991b1b}
.vmpp__msg--success{border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); color: #065f46}
.vmpp__msg--info{border-color: rgba(var(--vmpp-primary-rgb),.3); background: rgba(var(--vmpp-primary-rgb),.06); color: #1f2937}

.vmpp__previewHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.vmpp__previewTitle{margin:0;font-size:18px}
.vmpp__live{display:flex;gap:8px;align-items:center;color:var(--vmpp-success);font-size:12px}
.vmpp__pulse{width:8px;height:8px;border-radius:999px;background:var(--vmpp-success);opacity:.9;animation:vmppPulse 2s infinite}
@keyframes vmppPulse{0%,100%{opacity:1}50%{opacity:.25}}

.vmpp__kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.vmpp__kpi{padding:12px;border-radius:12px;border:1px solid var(--vmpp-border);background:linear-gradient(135deg,#fff,rgba(var(--vmpp-primary-rgb),.05))}
.vmpp__kpiLbl{font-size:12px;color:var(--vmpp-muted)}
.vmpp__kpiVal{font-size:20px;font-weight:900;margin-top:2px}
.vmpp__roiBox{padding:12px;border-radius:12px;border:1px solid var(--vmpp-border);background:#fff;margin-bottom:12px}
.vmpp__roiRow{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.vmpp__roiLbl{color:var(--vmpp-muted);font-size:13px}
.vmpp__roiVal{font-weight:900;font-size:20px}
.vmpp__roiBar{height:8px;border-radius:999px;background:var(--vmpp-border);overflow:hidden}
.vmpp__roiFill{height:100%;width:0%;background:linear-gradient(90deg,var(--vmpp-error),var(--vmpp-warning),var(--vmpp-success));transition: width .3s ease}
.vmpp__roiHint{margin-top:8px;color:var(--vmpp-muted);font-size:13px;line-height:1.4}
.vmpp__cta{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.vmpp__tiny{font-size:12px;color:var(--vmpp-muted);line-height:1.4}

.vmpp__previewBody{margin-top:12px}
.vmpp__planSection{margin-top:14px}
.vmpp__planSection h4{margin:0 0 8px}
.vmpp__planTag{display:inline-block;background:rgba(var(--vmpp-primary-rgb),.08);border:1px solid rgba(var(--vmpp-primary-rgb),.2);padding:6px 10px;border-radius:999px;font-size:12px;margin:4px 6px 0 0}

.vmpp__overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index:9998;
}
.vmpp__modal{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(640px,94vw);
  max-height:92vh;
  overflow:auto;
  z-index:9999;
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow: var(--vmpp-shadow-lg);
}
.vmpp__modalClose{
  position:absolute;top:10px;left:10px;
  width:36px;height:36px;border-radius:12px;
  border:1px solid var(--vmpp-border);
  background:#fff;color:#111;font-size:22px;line-height:1;cursor:pointer
}
.vmpp__modalTitle{margin:0 0 8px;font-size:18px}
.vmpp__modalSub{margin:0 0 14px;color:var(--vmpp-muted);font-size:14px;line-height:1.5}
.vmpp__consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#111;margin:10px 0}
.vmpp__consent input{width:auto;margin-top:2px}
.vmpp__hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}

@media (prefers-color-scheme: dark){
  .vmpp{
    color:#F9FAFB;background:#111827;
    --vmpp-card:#0B1220;--vmpp-border:#243042;--vmpp-muted:#D1D5DB;
  }
  .vmpp__btn--ghost{background:#0B1220;color:#F9FAFB}
  .vmpp input,.vmpp select,.vmpp textarea{background:#0B1220;color:#F9FAFB}
  .vmpp__roiBox,.vmpp__kpi,.vmpp__card{background:#0B1220}
  .vmpp__hero{background:linear-gradient(135deg,rgba(var(--vmpp-primary-rgb),.2),rgba(11,18,32,1))}
}
@media (prefers-reduced-motion: reduce){
  .vmpp *{transition:none !important;animation:none !important}
}
@media (max-width: 520px){
  .vmpp{padding:14px}
  .vmpp__card{padding:14px}
  .vmpp__kpiVal{font-size:18px}
  .vmpp__nav{flex-direction:column}
}