/**
 * Nexus Morphing AI – Styles publics (frontend)
 * Version: 1.0.0
 */

:root {
  --nma-primary:   #4F46E5;
  --nma-success:   #10B981;
  --nma-warning:   #F59E0B;
  --nma-danger:    #EF4444;
  --nma-gray-100:  #F3F4F6;
  --nma-gray-200:  #E5E7EB;
  --nma-gray-500:  #6B7280;
  --nma-gray-700:  #374151;
  --nma-gray-900:  #111827;
  --nma-radius:    12px;
  --nma-radius-sm: 6px;
  --nma-shadow:    0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --nma-shadow-lg: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}

/* ─── Reset minimal ────────────────────────────────────────────────────── */
.nma-tool *, .nma-gamified * { box-sizing: border-box; }

/* ─── Micro-SaaS Tool ──────────────────────────────────────────────────── */
.nma-tool {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--nma-radius);
  padding: 28px;
  margin: 32px 0;
  color: #fff;
  box-shadow: var(--nma-shadow-lg);
  position: relative;
  overflow: hidden;
}
.nma-tool::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
}
.nma-tool--calculator { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.nma-tool--quiz       { background: linear-gradient(135deg, #059669, #047857); }
.nma-tool--simulator  { background: linear-gradient(135deg, #DC2626, #9D174D); }
.nma-tool--checklist  { background: linear-gradient(135deg, #D97706, #B45309); }
.nma-tool--estimator  { background: linear-gradient(135deg, #0891B2, #0E7490); }

.nma-tool__badge {
  display: inline-block;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.nma-tool__title { font-size: 22px; font-weight: 800; margin: 0 0 8px; line-height: 1.2; }
.nma-tool__description { font-size: 14px; opacity: .85; margin: 0 0 20px; line-height: 1.5; }

/* Form fields */
.nma-field { margin-bottom: 14px; }
.nma-field__label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
.nma-field__wrap { display: flex; align-items: center; gap: 6px; }
.nma-field__input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 8px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: border-color .15s, background .15s;
  backdrop-filter: blur(4px);
}
.nma-field__input::placeholder { color: rgba(255,255,255,.5); }
.nma-field__input:focus { outline: none; border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.2); }
.nma-field__unit { font-size: 13px; opacity: .7; min-width: 30px; }

/* Submit */
.nma-tool__submit {
  width: 100%;
  padding: 14px;
  background: rgba(255,255,255,.95);
  color: var(--nma-primary);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
  transition: all .2s;
  letter-spacing: .02em;
}
.nma-tool__submit:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }

/* Result */
.nma-tool__result {
  margin-top: 20px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  animation: nma-fade-in .3s ease;
}
.nma-tool__result-label { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.nma-tool__result-value { font-size: 36px; font-weight: 900; margin: 0 0 12px; }

/* Share button */
.nma-btn--share {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.nma-btn--share:hover { background: rgba(255,255,255,.35); }

/* ─── Gamified Widget ──────────────────────────────────────────────────── */
.nma-gamified {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 360px;
  background: var(--nma-gray-900);
  color: #fff;
  border-radius: var(--nma-radius);
  box-shadow: var(--nma-shadow-lg);
  overflow: hidden;
  z-index: 9999;
  animation: nma-slide-up .4s cubic-bezier(.16,1,.3,1);
}

.nma-gamified__trigger { padding: 20px; text-align: center; }
.nma-gamified__badge-preview { font-size: 48px; margin-bottom: 8px; }
.nma-gamified__title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.nma-gamified__subtitle { font-size: 13px; opacity: .7; margin: 0 0 14px; line-height: 1.4; }

/* Quiz */
.nma-gamified__quiz-container { padding: 16px; }
.nma-gamified__progress { height: 4px; background: rgba(255,255,255,.1); margin-bottom: 16px; border-radius: 2px; overflow: hidden; }
.nma-gamified__progress-bar { height: 100%; background: linear-gradient(90deg, var(--nma-primary), var(--nma-success)); border-radius: 2px; transition: width .4s ease; }

/* Question */
.nma-quiz-question h5 { font-size: 15px; font-weight: 700; margin: 0 0 12px; line-height: 1.4; }
.nma-quiz-options { display: flex; flex-direction: column; gap: 8px; }
.nma-quiz-option {
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  color: #fff;
}
.nma-quiz-option:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.nma-quiz-option--selected { border-color: var(--nma-primary); background: rgba(79,70,229,.3); }
.nma-quiz-option--correct  { border-color: var(--nma-success); background: rgba(16,185,129,.2); }
.nma-quiz-option--wrong    { border-color: var(--nma-danger); background: rgba(239,68,68,.2); }

.nma-quiz-explanation { font-size: 12px; margin-top: 8px; padding: 8px; background: rgba(255,255,255,.08); border-radius: 6px; opacity: .8; display: none; }

/* Navigation */
.nma-gamified__navigation { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Result */
.nma-gamified__result { padding: 20px; text-align: center; }
.nma-gamified__badge-earned { font-size: 56px; animation: nma-bounce .6s ease; }
.nma-gamified__result-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.nma-btn--success { background: var(--nma-success); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.nma-btn--success:hover { background: #059669; }
.nma-btn--primary { background: var(--nma-primary); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.nma-btn--primary:hover { background: #4338CA; }
.nma-btn--secondary { background: rgba(255,255,255,.1); color: #fff; border: 2px solid rgba(255,255,255,.2); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }

/* Close button */
.nma-gamified__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.nma-gamified__close:hover { color: #fff; }

/* ─── Animations ───────────────────────────────────────────────────────── */
@keyframes nma-fade-in   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nma-slide-up  { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes nma-bounce    { 0%,20%,60%,100%{transform:translateY(0)} 40%{transform:translateY(-16px)} 80%{transform:translateY(-8px)} }

/* ─── Dark mode support ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .nma-tool { opacity: .95; }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nma-gamified { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
  .nma-tool { padding: 20px; }
  .nma-tool__title { font-size: 18px; }
}