/* ============================================================
   Roxana Tailor Made — builder
   Self-contained: works with or without the Roxana theme tokens.
   ============================================================ */

.rx-tm,
.rx-tm *,
.rx-tm-success,
.rx-tm-success * { box-sizing: border-box; }

.rx-tm,
.rx-tm-mini {
  --tm-ink: var(--ink, #14121f);
  --tm-ink-2: var(--ink-2, #3a3654);
  --tm-muted: var(--muted, #6b6880);
  --tm-line: var(--line, #e7e5f0);
  --tm-soft: var(--surface-2, #f7f6fc);
  --tm-purple: var(--brand-purple, #6a4bd1);
  --tm-magenta: var(--brand-magenta, #ec1e9b);
  --tm-ease: var(--ease, cubic-bezier(.22,.61,.36,1));
  --tm-font: var(--font-heading, 'Outfit', system-ui, sans-serif);
}

.rx-tm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 3.4vw, 44px);
  align-items: start;
  margin-block: clamp(28px, 4vw, 52px);
  color: var(--tm-ink);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

/* ---------- Form shell ---------- */
.rx-tm__form {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--tm-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(20, 18, 31, .05);
}

.rx-tm__progress { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.rx-tm-steps { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; flex: 1; }
.rx-tm-steps li { flex: 1; display: flex; align-items: center; gap: 10px; }
.rx-tm-steps li::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--tm-line); transition: background .3s var(--tm-ease); }
.rx-tm-steps li:last-child::after { display: none; }
.rx-tm-steps li span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tm-line);
  transition: background .3s var(--tm-ease), transform .3s var(--tm-ease);
}
.rx-tm-steps li.is-active span { background: var(--tm-purple); transform: scale(1.25); }
.rx-tm-steps li.is-done span { background: var(--tm-purple); }
.rx-tm-steps li.is-done::after { background: rgba(106, 75, 209, .4); }
.rx-tm__stepcount { margin: 0; font-family: var(--tm-font); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); white-space: nowrap; }

/* ---------- Steps ---------- */
.rx-tm-step { display: none; margin: 0; padding: 0; border: 0; animation: rxTmIn .28s var(--tm-ease); }
.rx-tm-step.is-active { display: block; }
@keyframes rxTmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rx-tm-step__legend { display: flex; gap: 12px; align-items: flex-start; padding: 0; margin-bottom: 20px; }
.rx-tm-step__num {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(106, 75, 209, .1); color: var(--tm-purple);
  font-family: var(--tm-font); font-size: 12px; font-weight: 700;
}
.rx-tm-step__legend strong { display: block; font-family: var(--tm-font); font-size: clamp(1.1rem, .98rem + .45vw, 1.32rem); font-weight: 600; line-height: 1.25; }
.rx-tm-step__legend small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--tm-muted); }

/* ---------- Fields ---------- */
.rx-tm-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.rx-tm-field > span { font-family: var(--tm-font); font-size: 13px; font-weight: 600; color: var(--tm-ink-2); }
.rx-tm-field > span em { color: var(--tm-magenta); font-style: normal; }
.rx-tm-label { font-family: var(--tm-font); font-size: 13px; font-weight: 600; color: var(--tm-ink-2); margin-bottom: 9px; display: block; }
.rx-tm-field--inline { margin-top: 14px; }

:is(.rx-tm, .rx-tm-mini) input[type="text"],
:is(.rx-tm, .rx-tm-mini) input[type="email"],
:is(.rx-tm, .rx-tm-mini) input[type="tel"],
:is(.rx-tm, .rx-tm-mini) input[type="month"],
:is(.rx-tm, .rx-tm-mini) input[type="number"],
:is(.rx-tm, .rx-tm-mini) select,
:is(.rx-tm, .rx-tm-mini) textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--tm-line);
  border-radius: 12px;
  background: #fff;
  color: var(--tm-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  transition: border-color .18s var(--tm-ease), box-shadow .18s var(--tm-ease);
}
:is(.rx-tm, .rx-tm-mini) textarea { min-height: 110px; resize: vertical; }
:is(.rx-tm, .rx-tm-mini) input:focus,
:is(.rx-tm, .rx-tm-mini) select:focus,
:is(.rx-tm, .rx-tm-mini) textarea:focus { outline: none; border-color: var(--tm-purple); box-shadow: 0 0 0 3px rgba(106, 75, 209, .14); }
:is(.rx-tm, .rx-tm-mini) input::placeholder,
:is(.rx-tm, .rx-tm-mini) textarea::placeholder { color: #a9a5be; }

.rx-tm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rx-tm-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rx-tm-phone { display: flex; gap: 8px; }
.rx-tm-phone select { flex: 0 0 118px; }
.rx-tm-phone input { flex: 1; }

.rx-tm-check { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; font-size: 14px; color: var(--tm-ink-2); cursor: pointer; }
.rx-tm-check input { width: 18px; height: 18px; accent-color: var(--tm-purple); }

.rx-tm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--tm-muted); cursor: pointer; }
.rx-tm-consent input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--tm-purple); flex: 0 0 auto; }

.rx-tm-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---------- Chips ---------- */
.rx-tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-tm-chip { position: relative; display: inline-flex; cursor: pointer; }
.rx-tm-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rx-tm-chip > span {
  display: inline-flex; align-items: center;
  padding: 10px 15px;
  border: 1px solid var(--tm-line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  color: var(--tm-ink-2);
  transition: all .18s var(--tm-ease);
}
.rx-tm-chip:hover > span { border-color: rgba(106, 75, 209, .45); color: var(--tm-purple); }
.rx-tm-chip input:checked + span {
  border-color: var(--tm-purple);
  background: var(--tm-purple);
  color: #fff;
  box-shadow: 0 8px 18px rgba(106, 75, 209, .22);
}
.rx-tm-chip input:focus-visible + span { outline: 2px solid var(--tm-purple); outline-offset: 2px; }

/* ---------- Style cards ---------- */
.rx-tm-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rx-tm-style { position: relative; cursor: pointer; }
.rx-tm-style input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rx-tm-style > span {
  display: flex; flex-direction: column; gap: 3px;
  height: 100%; padding: 14px;
  border: 1px solid var(--tm-line);
  border-radius: 14px;
  background: #fff;
  transition: all .18s var(--tm-ease);
}
.rx-tm-style strong { font-family: var(--tm-font); font-size: 14px; font-weight: 600; color: var(--tm-ink); }
.rx-tm-style small { font-size: 12px; line-height: 1.4; color: var(--tm-muted); }
.rx-tm-style:hover > span { border-color: rgba(106, 75, 209, .4); }
.rx-tm-style input:checked + span {
  border-color: var(--tm-purple);
  background: rgba(106, 75, 209, .06);
  box-shadow: inset 0 0 0 1px var(--tm-purple);
}
.rx-tm-style input:focus-visible + span { outline: 2px solid var(--tm-purple); outline-offset: 2px; }

/* ---------- Navigation ---------- */
.rx-tm__nav { display: flex; gap: 10px; margin-top: 8px; }
.rx-tm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--tm-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s var(--tm-ease);
}
.rx-tm-btn--primary { background: var(--tm-purple); color: #fff; box-shadow: 0 10px 24px rgba(106, 75, 209, .24); }
.rx-tm-btn--primary:hover { background: #5b3ec0; color: #fff; transform: translateY(-1px); }
.rx-tm-btn--ghost { background: transparent; color: var(--tm-ink-2); border-color: var(--tm-line); }
.rx-tm-btn--ghost:hover { border-color: var(--tm-purple); color: var(--tm-purple); }
.rx-tm-btn[disabled] { opacity: .6; pointer-events: none; }
.rx-tm__nav .rx-tm-btn--primary { flex: 1; }
.rx-tm__nav .rx-tm-btn--primary[hidden],
.rx-tm__nav .rx-tm-btn--ghost[hidden] { display: none; }
.rx-tm__nav .rx-tm-btn--ghost { flex: 0 0 auto; }

.rx-tm__status { min-height: 20px; margin: 12px 0 0; font-size: 13.5px; color: var(--tm-magenta); }
.rx-tm__status.is-error { color: #c02626; }

.rx-tm-turnstile { margin-top: 14px; }

/* ---------- Summary ---------- */
.rx-tm__summary {
  position: sticky; top: 104px;
  padding: 22px;
  border: 1px solid rgba(106, 75, 209, .16);
  border-radius: 20px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(236, 30, 155, .07), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(46, 125, 224, .07), transparent 55%),
    #fff;
  box-shadow: 0 14px 36px rgba(20, 18, 31, .05);
}
.rx-tm-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rx-tm-summary__eyebrow { font-family: var(--tm-font); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tm-purple); }
.rx-tm-summary__badge { padding: 3px 9px; border-radius: 999px; background: rgba(106, 75, 209, .1); color: var(--tm-purple); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rx-tm-summary__list { margin: 0 0 14px; padding: 0; }
.rx-tm-summary__list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--tm-soft); }
.rx-tm-summary__list > div:last-child { border-bottom: 0; }
.rx-tm-summary__list dt { font-family: var(--tm-font); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tm-muted); }
.rx-tm-summary__list dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--tm-ink); }
.rx-tm-summary__note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--tm-muted); }

/* ---------- Success ---------- */
.rx-tm-success { margin-block: clamp(28px, 4vw, 56px); }
.rx-tm-success__inner {
  max-width: 620px; margin-inline: auto; padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--tm-line); border-radius: 24px; background: #fff;
  text-align: center; box-shadow: 0 20px 50px rgba(20, 18, 31, .06);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}
.rx-tm-success__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: rgba(106, 75, 209, .1); color: var(--tm-purple, #6a4bd1); }
.rx-tm-success__icon svg { width: 26px; height: 26px; }
.rx-tm-success h2 { margin: 0 0 10px; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--ink, #14121f); }
.rx-tm-success p { margin: 0 0 10px; color: var(--ink-2, #3a3654); line-height: 1.6; }
.rx-tm-success__ref { font-size: 13px; color: var(--muted, #6b6880); }
.rx-tm-success__ref strong { color: var(--ink, #14121f); letter-spacing: .04em; }
.rx-tm-success__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .rx-tm { grid-template-columns: 1fr; }
  .rx-tm__summary { position: static; order: 2; }
  .rx-tm__form { order: 1; }
}

@media (max-width: 720px) {
  .rx-tm__form { padding: 20px 17px; border-radius: 20px; }
  .rx-tm-row,
  .rx-tm-row--three { grid-template-columns: 1fr; }
  .rx-tm-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-tm-phone select { flex-basis: 108px; }
  .rx-tm__nav { flex-wrap: wrap; }
  .rx-tm__nav .rx-tm-btn { flex: 1 1 100%; }
  .rx-tm__nav .rx-tm-btn--ghost { flex: 1 1 100%; }
  .rx-tm-steps li { gap: 6px; }
  .rx-tm__stepcount { font-size: 11px; }
  .rx-tm-summary__list > div { grid-template-columns: 86px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rx-tm-step { animation: none; }
  .rx-tm * { transition: none !important; }
}

/* ============================================================
   Homepage mini builder
   ============================================================ */
.rx-tm-mini {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.6vw, 48px);
  border: 1px solid rgba(106, 75, 209, .15);
  border-radius: 28px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(46, 125, 224, .07), transparent 55%),
    radial-gradient(110% 120% at 100% 100%, rgba(236, 30, 155, .07), transparent 55%),
    #fff;
  box-shadow: 0 22px 60px rgba(106, 75, 209, .09);
  color: var(--tm-ink);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.rx-tm-mini__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 12px;
  font-family: var(--tm-font); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tm-purple);
}
.rx-tm-mini__eyebrow::before { content: ""; width: 24px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, var(--tm-purple), var(--tm-magenta)); }

.rx-tm-mini h2 {
  margin: 0 0 14px;
  font-family: var(--tm-font);
  font-size: clamp(1.65rem, 1.3rem + 1.7vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--tm-ink);
  text-wrap: balance;
}
.rx-tm-mini__copy p { max-width: 46ch; margin: 0; color: var(--tm-muted); font-size: 14.5px; line-height: 1.66; }

.rx-tm-mini__list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.rx-tm-mini__list li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--tm-ink-2); }
.rx-tm-mini__list li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--tm-purple);
  border-bottom: 2px solid var(--tm-purple);
  transform: rotate(-45deg);
}

.rx-tm-mini__form { display: flex; flex-direction: column; gap: 14px; }
.rx-tm-mini__row { display: flex; flex-direction: column; gap: 8px; }
.rx-tm-mini__row--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rx-tm-mini__label { font-family: var(--tm-font); font-size: 13px; font-weight: 600; color: var(--tm-ink-2); }
.rx-tm-mini .rx-tm-field { margin: 0; }
.rx-tm-mini .rx-tm-field > span { font-size: 12.5px; }

.rx-tm-chips--sm { gap: 6px; }
.rx-tm-chips--sm .rx-tm-chip > span { padding: 8px 12px; font-size: 12.5px; }

.rx-tm-mini__counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rx-tm-mini__count { display: flex; flex-direction: column; gap: 3px; }
.rx-tm-mini__count input { width: 100%; text-align: center; padding-inline: 4px; }
.rx-tm-mini__count small { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tm-muted); text-align: center; }

.rx-tm-mini__consent { font-size: 12px; }
.rx-tm-mini__submit { width: 100%; margin-top: 2px; }
.rx-tm-mini__status { min-height: 16px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--tm-magenta); }
.rx-tm-mini__more { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--tm-muted); text-decoration: underline; text-underline-offset: 3px; }
.rx-tm-mini__more:hover { color: var(--tm-purple); }

.rx-tm-mini__done { padding: 10px 4px; text-align: center; }
.rx-tm-mini__done strong { display: block; margin-bottom: 8px; font-family: var(--tm-font); font-size: 20px; color: var(--tm-ink); }
.rx-tm-mini__done p { margin: 0 0 8px; color: var(--tm-muted); font-size: 13.5px; line-height: 1.6; }
.rx-tm-mini__ref { font-size: 12px !important; letter-spacing: .02em; }
.rx-tm-mini__ref span { font-weight: 700; color: var(--tm-ink); }

@media (max-width: 980px) {
  .rx-tm-mini { grid-template-columns: 1fr; align-items: start; gap: 26px; }
}

@media (max-width: 520px) {
  .rx-tm-mini { padding: 22px 17px; border-radius: 22px; }
  .rx-tm-mini__row--split { grid-template-columns: 1fr; }
  .rx-tm-mini__counts input { width: 100%; }
}