/* ============================================================
   SmartlyHost — Order form theming
   ------------------------------------------------------------
   Styles Blesta's order plugin (wizard / ajax / boxes flow)
   to match the SmartlyHost client theme. Self-contained:
   carries its own brand tokens so it works regardless of which
   base order template you cloned from.

   HOW TO USE (update-safe):
   This file is meant to be loaded ON TOP of a standard order
   template, NOT to replace core markup. See INSTALLATION guide:
   load it via the order template's structure or via the client
   theme's structure.pdt (recommended) so Blesta updates to the
   order plugin never overwrite your styling.
   ============================================================ */

:root{
  --st-primary:#ca201f; --st-primary-600:#b01a19; --st-primary-700:#8f1413;
  --st-primary-soft:#fdeceb; --st-ink:#1f1f1f; --st-body:#555; --st-muted:#9a9a9a;
  --st-line:#ececec; --st-surface:#fff; --st-bg:#f7f7f8; --st-bg-2:#efeff1;
  --st-radius:16px; --st-radius-sm:10px; --st-radius-lg:22px;
  --st-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --st-shadow:0 4px 20px rgba(15,23,42,.06);
  --st-shadow-lg:0 18px 50px rgba(15,23,42,.10);
}

/* ---- General order canvas ---- */
#order_wizard, #order_main, .order_form, .order-form, body.order {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--st-body);
}

/* ---- Step / progress bar (wizard) ---- */
.order_wizard_steps, .wizard-steps, .order-steps, ul.steps {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  justify-content: center;
}
.order_wizard_steps li, .wizard-steps li, ul.steps li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  color: var(--st-muted);
  font-weight: 600;
  font-size: .9rem;
}
.order_wizard_steps li.active, .wizard-steps li.active,
.order_wizard_steps li.current, ul.steps li.active {
  background: var(--st-primary);
  border-color: var(--st-primary);
  color: #fff;
}
.order_wizard_steps li.complete, .wizard-steps li.complete {
  background: var(--st-primary-soft);
  border-color: var(--st-primary-soft);
  color: var(--st-primary);
}

/* ---- Package selection cards / boxes ---- */
.pricing, .packages, .package_list, .order-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.package, .pricing .package, .pricing-box, .package-box, .order-package {
  background: var(--st-surface);
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-radius) !important;
  box-shadow: var(--st-shadow);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.package:hover, .pricing-box:hover, .package-box:hover, .order-package:hover {
  transform: translateY(-4px);
  box-shadow: var(--st-shadow-lg);
  border-color: var(--st-primary) !important;
}
/* Featured / popular package */
.package.featured, .pricing-box.featured, .package.popular {
  border: 2px solid var(--st-primary) !important;
}
.package.featured::before, .package.popular::before {
  content: "POPULAIRE";
  position: absolute;
  top: 14px; right: -34px;
  transform: rotate(45deg);
  background: var(--st-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .25rem 2.5rem;
}
.package h2, .package h3, .package .package-name, .pricing-box .title {
  color: var(--st-ink);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: .75rem;
}
.package .price, .pricing-box .price, .package-price {
  color: var(--st-primary);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin: .5rem 0;
}
.package .price small, .package-price small, .package .term {
  color: var(--st-muted);
  font-size: .85rem;
  font-weight: 600;
}
.package ul, .package .features {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  text-align: left;
}
.package ul li, .package .features li {
  padding: .45rem 0 .45rem 1.6rem;
  position: relative;
  border-bottom: 1px solid var(--st-line);
  font-size: .92rem;
}
.package ul li::before, .package .features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--st-primary);
  font-weight: 800;
}

/* ---- Buttons (inherit theme look) ---- */
.order_form .btn, .order-form .btn, #order_wizard .btn,
.btn-order, button.order, input[type="submit"] {
  border-radius: var(--st-radius-sm);
  font-weight: 600;
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
}
.btn-primary, .order_form .btn-primary, .btn-order,
button.order, input[type="submit"] {
  background: var(--st-primary) !important;
  border-color: var(--st-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(202,32,31,.22);
}
.btn-primary:hover, .btn-order:hover, button.order:hover,
input[type="submit"]:hover {
  background: var(--st-primary-600) !important;
  border-color: var(--st-primary-600) !important;
  box-shadow: 0 8px 22px rgba(202,32,31,.30);
}
.btn-secondary, .btn-default {
  background: var(--st-surface) !important;
  border-color: var(--st-line) !important;
  color: var(--st-ink) !important;
}

/* ---- Order summary box ---- */
.order_summary, .summary, .order-summary, #summary {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow);
  padding: 1.5rem;
}
.order_summary h3, .summary h3, .order-summary h3 {
  color: var(--st-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--st-line);
  padding-bottom: .75rem;
  margin-bottom: 1rem;
}
.order_summary .total, .summary .total, .order-summary .total {
  color: var(--st-primary);
  font-size: 1.5rem;
  font-weight: 800;
}

/* ---- Form fields ---- */
.order_form .form-control, .order-form .form-control,
#order_wizard input, #order_wizard select, #order_wizard textarea {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  padding: .65rem .9rem;
  color: var(--st-ink);
}
.order_form .form-control:focus, #order_wizard input:focus,
#order_wizard select:focus {
  border-color: var(--st-primary);
  box-shadow: 0 0 0 4px rgba(202,32,31,.12);
  outline: none;
}
.order_form label, .order-form label { color: var(--st-ink); font-weight: 600; }

/* ---- Config option groups ---- */
.config_options, .package-options, .order-options {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 1.5rem;
  box-shadow: var(--st-shadow-sm);
}

/* ---- Tables in order (e.g. cart) ---- */
.order_form table, .order-form table {
  background: var(--st-surface);
  border-radius: var(--st-radius);
  overflow: hidden;
}
.order_form table thead th, .order-form table thead th {
  background: var(--st-bg);
  color: var(--st-muted);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  border: none;
}

/* ---- Section titles ---- */
.order_form h1, .order-form h1, #order_wizard h1 {
  color: var(--st-ink);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .pricing, .packages, .package_list { grid-template-columns: 1fr; }
  .package .price { font-size: 1.8rem; }
}