/* =============================================================================
   ADHDity — 05-steps.css
   Section: 12. Clickable Steps
   ============================================================================= */

.adhdity-recipes .ar-stepsbox {
  margin: 6px 0 16px;
}

.adhdity-recipes .ar-stepshead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.adhdity-recipes .ar-steps-reset {
  appearance: none;
  border: 1px solid #D8DEE7;
  background: #FFFFFF;
  color: #475467;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.adhdity-recipes .ar-steps-reset:hover { background: #F8FAFC; border-color: #C9D3E0; }
.adhdity-recipes .ar-steps-reset:active { transform: translateY(1px); }

.adhdity-recipes .ar-stepslist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.adhdity-recipes .ar-stepitem { margin: 0; padding: 0; }

/* Step button */
.adhdity-recipes .ar-step {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  appearance: none;
  border: 1.5px solid #E7E5E4;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 14px 15px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: none;
}

.adhdity-recipes .ar-step:hover { background: #FCFCFD; border-color: #D7DDE5; transform: translateY(-1px); }
.adhdity-recipes .ar-step:active { transform: translateY(1px); }

.adhdity-recipes .ar-step__num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
  color: #47604C;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  margin-top: 1px;
}

.adhdity-recipes .ar-step__text {
  flex: 1 1 auto;
  min-width: 0;
  color: #1F2937;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
}

/* States */
.adhdity-recipes .ar-step.is-start { border-color: #D8E3D8; background: #FCFEFC; }
.adhdity-recipes .ar-step.is-start .ar-step__num { background: #E7EEE8; color: #365C3F; }

.adhdity-recipes .ar-step.is-active { border-color: #D7E3D9; background: #F9FCF9; box-shadow: 0 0 0 3px rgba(54,92,63,0.05); }
.adhdity-recipes .ar-step.is-active .ar-step__num { background: #E3ECE4; color: #2F5E3B; }

.adhdity-recipes .ar-step.is-done { background: #F4F7FB; border-color: #D4DCE7; }
.adhdity-recipes .ar-step.is-done .ar-step__num { background: #2FA660; color: #FFFFFF; }
.adhdity-recipes .ar-step.is-done .ar-step__text { color: #5B6472; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: #8B95A5; }

/* Progress bar */
.adhdity-recipes .ar-stepsprogress { margin-top: 14px; }

.adhdity-recipes .ar-stepsprogress__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.adhdity-recipes .ar-stepsprogress__text {
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 900;
  color: #334155;
  letter-spacing: 0.01em;
}

.adhdity-recipes .ar-stepsprogress__bar { width: 100%; height: 10px; background: #EEF2F6; border-radius: 999px; overflow: hidden; }
.adhdity-recipes .ar-stepsprogress__fill { display: block; width: 0%; height: 100%; border-radius: 999px; background: #2FA660; transition: width .22s ease; }

/* Spacing */
.adhdity-recipes .ar-stepsbox + .ar-tip,
.adhdity-recipes .ar-stepsbox + .ar-note,
.adhdity-recipes .ar-stepsbox + .ar-tags { clear: both; }

/* Full Shutdown expanded steps */
.adhdity-recipes.is-fullshutdown .ar-fs__full .ar-stepsbox { margin-top: 8px; }
.adhdity-recipes.is-fullshutdown .ar-fs__full .ar-step { background: rgba(255,255,255,0.88); }
.adhdity-recipes.is-fullshutdown .ar-fs__full .ar-step.is-active { background: #F9FCF9; }
.adhdity-recipes.is-fullshutdown .ar-fs__full .ar-step.is-done { background: #F4F7FB; }

/* Responsive */
@media (max-width: 767px) {
  .adhdity-recipes .ar-step { gap: 12px; padding: 13px 14px; border-radius: 16px; }
  .adhdity-recipes .ar-step__num { width: 34px; height: 34px; flex-basis: 34px; font-size: 14px; }
  .adhdity-recipes .ar-step__text { font-size: 15px; line-height: 1.5; }
  .adhdity-recipes .ar-steps-reset { padding: 7px 11px; font-size: 12px; }
  .adhdity-recipes .ar-stepsprogress__text { font-size: 13px; }
}

@media (max-width: 420px) {
  .adhdity-recipes .ar-step { padding: 12px 12px; gap: 10px; }
  .adhdity-recipes .ar-step__num { width: 32px; height: 32px; flex-basis: 32px; font-size: 13px; }
  .adhdity-recipes .ar-step__text { font-size: 14.5px; }
}