/* ============================================================================
 * orderforms/myhosting/orderform.css
 *
 * Loaded by the order-form templates. Pulls in the main theme stylesheet so
 * cart/domainchecker/configureproduct share the same look as the client area,
 * then adds order-form-only tweaks (step indicator, plan grid).
 * ========================================================================== */

@import url("../../myhosting_theme/css/main.css");

/* WHMCS injects an outer .standard-cart wrapper with Bootstrap-y class names —
   neutralize a few so it matches our visual system. */
body .header, body .footer { display: none; }   /* Use our navbar/footer via include */

/* =========================================================================
 * Step indicator (used by _steps.tpl)
 *
 * Three states, MUTUALLY EXCLUSIVE — only one class is applied per step.
 * Visual hierarchy: done = light green tick, active = solid green pill,
 * upcoming = muted neutral.
 *
 * The `is-active` rule comes LAST so that even if `is-done` is also
 * accidentally applied, the active styling wins.
 * ======================================================================= */

.mh-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  position: relative;
}

.mh-steps__item {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  color: #6B7280;
  position: relative;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.mh-steps__marker {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: #F3F4F6;
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 13px;
}
.mh-steps__body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mh-steps__body strong { color: inherit; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; }
.mh-steps__body small  { color: inherit; opacity: .8; font-size: 12px; font-weight: 400; }

/* ---- DONE state ---- */
.mh-steps__item.is-done {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.20);
  color: #047857;
}
.mh-steps__item.is-done .mh-steps__marker {
  background: #10B981;
  color: #FFFFFF;
}
.mh-steps__item.is-done .mh-steps__body strong { color: #047857; }

/* ---- UPCOMING state ---- (default — already styled above) */

/* ---- ACTIVE state — MUST come last so it always wins ---- */
.mh-steps__item.is-active,
.mh-steps__item.is-active.is-done {
  background: #FFFFFF;
  border-color: #10B981;
  color: #0F2942;
  box-shadow: rgba(16, 185, 129, 0.25) 0px 6px 18px 0px;
}
.mh-steps__item.is-active .mh-steps__marker,
.mh-steps__item.is-active.is-done .mh-steps__marker {
  background: #10B981;
  color: #FFFFFF;
}
.mh-steps__item.is-active .mh-steps__body strong { color: #0F2942; }
.mh-steps__item.is-active .mh-steps__body small  { color: #6B7280; }

/* Connector line between steps (desktop only) */
@media (min-width: 768px) {
  .mh-steps__item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 10px;
    height: 2px;
    background: #E5E7EB;
    z-index: 0;
  }
  .mh-steps__item:last-child::after { display: none; }
  .mh-steps__item.is-done::after { background: #10B981; }
}

@media (max-width: 767px) {
  .mh-steps__item { min-width: 0; padding: 10px 12px; }
  .mh-steps__body small { display: none; }
}

/* =========================================================================
 * Plan grid (cart product picker)
 * ======================================================================= */
.mh-plan-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .mh-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mh-plan-grid { grid-template-columns: repeat(3, 1fr); } }

.mh-plan {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: rgba(15,41,66,0.06) 0px 2px 8px 0px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 4px solid var(--svc-color, #10B981);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mh-plan:hover { transform: translateY(-2px); box-shadow: rgba(15,41,66,0.12) 0px 16px 48px 0px; }
.mh-plan__name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; color: #0F2942; margin:0; }
.mh-plan__price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 30px; color: #0F2942; line-height:1; }
.mh-plan__price small { font-size: 14px; font-weight: 400; color: #6B7280; }
.mh-plan__features { list-style: none; margin: 0; padding: 0; font-size: 14px; color: #1F2937; }
.mh-plan__features li { padding: 4px 0; }
.mh-plan__cta { margin-top: auto; }