.mr-calc-wrap{
  --mr-primary: var(--wp--preset--color--primary, #2682f9);
  --mr-text: #1e2744;
  --mr-bg: #ffffff;
  --mr-border: rgba(0,0,0,.08);
  --mr-muted: rgba(30,39,68,.65);

  font-family: inherit;
  color: var(--mr-text);
}

.mr-card{
  background: var(--mr-bg);
  border: 1px solid var(--mr-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 18px;
  max-width: 720px;
}

.mr-head{ margin-bottom: 14px; }
.mr-title{ margin:0; font-size: 20px; line-height: 1.2; }
.mr-subtitle{ margin:6px 0 0; color: var(--mr-muted); font-size: 14px; }

.mr-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 680px){
  .mr-grid{ grid-template-columns: 1fr; }
}

.mr-field{ display:flex; flex-direction: column; gap:6px; }
.mr-label{ font-size: 13px; color: var(--mr-muted); }

.mr-input{
  width: 100%;
  border: 1px solid var(--mr-border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.mr-input:focus{
  border-color: rgba(38,130,249,.55);
  box-shadow: 0 0 0 4px rgba(38,130,249,.12);
}

.mr-error{ color:#b42318; font-size: 12px; min-height: 14px; }

.mr-actions{
  display:flex;
  justify-content: flex-end;
  margin-top: 12px;
  gap: 10px;
}

.mr-btn{
  border: 1px solid var(--mr-border);
  background: #fff;
  color: var(--mr-text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.mr-btn:hover{ filter: brightness(0.98); }

.mr-btn-primary{
  background: var(--mr-primary);
  border-color: rgba(0,0,0,.05);
  color: #fff;
}
.mr-btn-ghost{
  background: transparent;
}
.mr-btn.is-disabled{
  opacity: .55;
  pointer-events: none;
}

.mr-result{
  margin-top: 14px;
  border-top: 1px dashed var(--mr-border);
  padding-top: 14px;
}
.mr-result-row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mr-pill{
  font-size: 13px;
  color: var(--mr-muted);
  background: rgba(0,0,0,.03);
  border: 1px solid var(--mr-border);
  border-radius: 14px;
  padding: 8px 14px;

  white-space: normal;
  line-height: 1.4;
  word-break: break-word;

  display: inline-block;
  max-width: 520px;  /* 👈 asta îl face să treacă pe 2 rânduri natural */
}
.mr-total{
  text-align:right;
}
.mr-total-label{
  font-size: 12px;
  color: var(--mr-muted);
  letter-spacing: .08em;
}
.mr-total-value{
  font-size: 28px;
  font-weight: 800;
  margin-top: 2px;
}

.mr-cta{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Modal */
.mr-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mr-modal.is-open{ display:block; }
.mr-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.mr-modal-card{
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 760px;
  margin: 6vh auto;
  padding: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  max-height: 90vh;
overflow-y: auto;
}
@media (max-width: 860px){
  .mr-modal-card{ margin: 6vh 12px; }
}

.mr-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mr-modal-title{ font-size: 18px; font-weight: 800; }
.mr-modal-sub{ font-size: 13px; color: var(--mr-muted); margin-top: 4px; }

.mr-x{
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--mr-muted);
}

.mr-toast{
  margin-top: 12px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--mr-border);
  font-weight: 600;
}
.mr-toast.ok{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.25); }
.mr-toast.bad{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); }

.mr-hp{
  display:none !important;
}

/* Spinner */
.mr-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: rgba(255,255,255,1);
  display:inline-block;
  animation: mrspin 0.8s linear infinite;
}
@keyframes mrspin{
  to { transform: rotate(360deg); }
}

body.mr-modal-open{
  overflow: hidden;
}