/* ═══════════════════════════════════════════════════
   Mahan Diagnostic — Form Styles v1.1
   Fixes: #1–#11 visual issues
   ═══════════════════════════════════════════════════ */
:root{
  --md-text:    #192F45;
  --md-primary: #C8A24C;
  --md-primary-dark: #a8832c;
  --md-bg:      #FEFEFE;
  --md-border:  #E7E7E7;
  --md-lighten: #F5F1ED;
  --md-muted:   #828B95;
  --md-success: #2EBA69;
  --md-danger:  #ED1C24;
  --md-radius:  12px;
  --md-shadow:  0 4px 24px rgba(25,47,69,.08);
  --md-font:    'IRANSansX',Tahoma,Arial,sans-serif;
}

/* ── Wrap ── */
.mahan-wrap{
  font-family: var(--md-font);
  color: var(--md-text);
  direction: rtl;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 48px;
}

/* ══ FIX #1 & #2: Step progress bar ══ */
.mahan-steps{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}
.mahan-steps::-webkit-scrollbar{ display:none; }

.mahan-step-dot{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* FIX #1: lighten bg, primary text */
.mahan-step-circle{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--md-lighten);     /* FIX #1 */
  border: 2px solid var(--md-lighten);
  color: var(--md-primary);           /* FIX #1 */
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  overflow: hidden;
  flex-shrink: 0;
}

.mahan-step-dot.active .mahan-step-circle{
  background: var(--md-primary);
  border-color: var(--md-primary);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(200,162,76,.2);
}

.mahan-step-dot.done .mahan-step-circle{
  background: var(--md-success);
  border-color: var(--md-success);
}

/* FIX #2: line — lighten color, rounded, gap from circles */
.mahan-step-line{
  width: 24px;
  height: 2px;
  background: var(--md-lighten);   /* FIX #2 */
  border-radius: 50px;             /* FIX #2 */
  margin: 0 5px;                   /* FIX #2: gap */
  flex-shrink: 0;
  transition: background .3s;
}

/* ── Step Header ── */
.mahan-step-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--md-border);
  margin-bottom: 24px;
  min-height: 52px;
}

/* FIX #4 & #6: prev/next labels — two lines */
.mahan-step-prev-label,
.mahan-step-next-label{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 100px;
}
.mahan-step-prev-label{ align-items: flex-end; }   /* right side in RTL */
.mahan-step-next-label{ align-items: flex-start; } /* left side in RTL  */

.mahan-nav-dir{
  font-size: 11px;
  color: var(--md-muted);
  font-weight: 400;
}
.mahan-nav-step-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--md-text);
}

.mahan-step-title-wrap{ text-align: center; }
.mahan-step-number-label{
  display: block;
  font-size: 11px;
  color: var(--md-muted);
  margin-bottom: 4px;
}
.mahan-step-title{
  font-size: 22px;
  font-weight: 700;
  color: var(--md-text);
  margin: 0;
}

/* ══ FIX #3: Step 0 — single column, centered ══ */
.mahan-step-panel[data-step="0"] .mahan-fields-grid{
  grid-template-columns: 1fr !important;
  max-width: 540px;
  margin: 0 auto;
}

/* ── Fields Grid ── */
.mahan-fields-grid{
  display: grid;
  gap: 18px;
}
.mahan-fields-grid.two-col{
  grid-template-columns: 1fr 1fr;
}
@media(max-width:600px){
  .mahan-fields-grid.two-col{ grid-template-columns: 1fr; }
}

.mahan-field label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--md-text);
}
.mahan-field .req{ color: var(--md-danger); }

.mahan-field input[type="text"],
.mahan-field input[type="tel"],
.mahan-field input[type="email"],
.mahan-field select{
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--md-border);
  border-radius: var(--md-radius);
  background: #fff;
  padding: 0 16px;
  font-family: var(--md-font);
  font-size: 14px;
  color: var(--md-text);
  direction: rtl;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.mahan-field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23828B95' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  padding-left: 36px;
}
.mahan-field input:focus,
.mahan-field select:focus{
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(200,162,76,.15);
}
.mahan-field input.invalid,
.mahan-field select.invalid{ border-color: var(--md-danger); }
.mahan-field input::placeholder{ color: var(--md-muted); }

/* ══ FIX #9 & #10 & #11: Questions ══ */
.mahan-questions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* FIX #10: flex row — text RIGHT, options LEFT */
.mahan-question{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-radius: 8px;
  transition: none;
}

/* FIX #9: alternating backgrounds */
.mahan-question:nth-child(odd){
  background: #EFEFEF;
  border: 1.5px solid #EFEFEF;
}
.mahan-question:nth-child(even){
  background: #fff;
  border: 1.5px solid #E8E8E8;
}

/* Remove hover override */
.mahan-question:hover{
  border-color: inherit;
  box-shadow: none;
}
.mahan-question.invalid-q{
  border-color: var(--md-danger) !important;
  box-shadow: 0 0 0 2px rgba(237,28,36,.12);
}
.mahan-question.answered{ /* no style change needed */ }

/* FIX #10: text fills right side */
.mahan-q-text{
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--md-text);
}
.mahan-q-num{
  color: var(--md-primary);
  font-weight: 700;
  margin-left: 5px;
}

/* FIX #10: options fixed on left */
.mahan-q-options{
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-items: center;
}

/* FIX #11: no border on option labels */
.mahan-opt{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border: none;           /* FIX #11 */
  border-radius: 8px;
  background: transparent;
  transition: background .2s;
}
.mahan-opt:hover{ background: rgba(200,162,76,.1); }

.mahan-opt input[type="radio"]{ display: none; }

.mahan-opt-radio{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--md-border);
  background: #fff;
  flex-shrink: 0;
  position: relative;
  transition: all .2s;
}
.mahan-opt-radio::after{
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--md-primary);
  opacity: 0;
  transition: opacity .2s;
}
.mahan-opt input:checked ~ .mahan-opt-radio{ border-color: var(--md-primary); }
.mahan-opt input:checked ~ .mahan-opt-radio::after{ opacity: 1; }
.mahan-opt:has(input:checked){ background: rgba(200,162,76,.08); }
.mahan-opt-label{
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* ══ FIX #8: Nav — prev RIGHT, next LEFT (RTL space-between) ══ */
.mahan-nav{
  display: flex;
  justify-content: space-between;  /* RTL: first=right, last=left */
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* FIX #3: Step 0 nav — center next button */
.mahan-wrap[data-current-step="0"] .mahan-nav{
  justify-content: center;
}
.mahan-wrap[data-current-step="0"] .mahan-btn-next{
  width: 100%;
  max-width: 540px;
  justify-content: center;
}

.mahan-btn-next,
.mahan-btn-prev{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--md-radius);
  font-family: var(--md-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.mahan-btn-next{
  background: var(--md-primary);
  color: #fff;
}
.mahan-btn-next:hover{
  background: var(--md-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,162,76,.35);
}
.mahan-btn-prev{
  background: transparent;
  color: var(--md-text);
  border: 1.5px solid var(--md-border);
}
.mahan-btn-prev:hover{
  border-color: var(--md-primary);
  color: var(--md-primary);
}

/* ── Error / Loading ── */
.mahan-error-msg{
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid rgba(237,28,36,.25);
  color: var(--md-danger);
  font-size: 13px;
}
.mahan-loading{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--md-muted);
  font-size: 14px;
}
.mahan-spinner{
  display: inline-block;
  width: 20px; height: 20px;
  border: 2.5px solid var(--md-border);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: mahan-spin .7s linear infinite;
}
@keyframes mahan-spin{ to{ transform:rotate(360deg); } }

/* ── Results Panel ── */
.mahan-results-panel{
  animation: mahan-fade-in .4s ease;
}
@keyframes mahan-fade-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}

.mahan-chart-wrap{
  background: #192F45;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 28px;
  text-align: center;
}
.mahan-chart-wrap canvas{
  max-width: 440px;
  margin: 0 auto;
  display: block;
}

.mahan-analysis-wrap{
  background: var(--md-lighten);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 28px;
}
.mahan-analysis-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--md-text);
  border-bottom: 2px solid var(--md-primary);
  padding-bottom: 10px;
  display: inline-block;
}

.mahan-result-section{
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--md-border);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.mahan-result-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mahan-result-title{
  font-size: 15px;
  font-weight: 700;
}
.mahan-result-badge{
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.mahan-result-text{
  font-size: 13.5px;
  line-height: 2;
  color: var(--md-text);
  opacity: .88;
  margin: 0;
}

/* FIX #16: Submit area */
.mahan-submit-area{
  text-align: center;
  margin-top: 24px;
}
.mahan-btn-final{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 40px;
  background: var(--md-primary);
  color: #fff;
  border: none;
  border-radius: var(--md-radius);
  font-family: var(--md-font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  min-width: 220px;
}
.mahan-btn-final:hover{
  background: var(--md-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,162,76,.4);
}
.mahan-btn-final:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.mahan-success-msg{
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, #f0fff4, #e6f9ef);
  border: 2px solid var(--md-success);
  border-radius: 16px;
  margin-top: 16px;
}
.mahan-lottie-wrap{
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
  display: block;
}
.mahan-success-msg p{
  font-size: 16px;
  line-height: 1.9;
  color: var(--md-text);
  font-weight: 500;
  margin: 0;
}

/* ── Responsive ── */
@media(max-width:600px){
  .mahan-step-circle{ width:30px; height:30px; font-size:11px; }
  .mahan-step-line{ width:16px; margin:0 3px; }
  .mahan-question{ flex-direction: column; align-items: flex-start; gap:10px; }
  .mahan-q-options{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .mahan-btn-next,.mahan-btn-prev{ height:44px; padding:0 18px; font-size:14px; }
  .mahan-chart-wrap{ padding:16px 10px; }
  .mahan-step-title{ font-size:17px; }
}