/* register.css — the store sign-up wizard (/register/): the step rail with «نیلا» on the
   right (stepper.css), the form in the middle, a live phone preview of the booking page on
   the left. Site skin tokens throughout. */
.rg { max-width: 1280px; margin: 0 auto; padding: 26px 20px 72px; }

/* three columns: the rail, the form card, the phone */
.rg-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.rg-rail { position: sticky; top: 88px; padding: 20px 16px 16px; border-radius: 24px; border: 1px solid var(--ln);
  background: linear-gradient(180deg, color-mix(in srgb, var(--br) 7%, var(--sf)) 0%, var(--sf) 55%); box-shadow: 0 30px 60px -44px rgba(15, 31, 58, .5); }
.rg-rail .sx-prog { padding: 12px 14px; border-radius: 16px; background: var(--sf); border: 1px solid color-mix(in srgb, var(--br) 14%, var(--ln)); }
.rg-rail .ot-desk.rc-guide { max-width: none; margin-top: 4px; }
.rg-card { padding: 28px 28px 22px; border-radius: 24px; min-width: 0; }
.rg-card h2 { font-size: 22px; margin-top: 0; }
.rg-card .r-cta { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--ln); }
.rg-side { position: sticky; top: 88px; display: grid; justify-items: center; }

.rg-perks { list-style: none; margin: 18px 0 0; padding: 14px 16px; display: grid; gap: 8px; border-radius: 16px;
  background: color-mix(in srgb, var(--br) 6%, var(--sf)); border: 1px solid color-mix(in srgb, var(--br) 18%, var(--ln)); }
.rg-perks li { position: relative; padding-inline-start: 26px; font-size: 13.5px; color: var(--mu); }
.rg-perks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff; background: var(--ok, #16A34A); }
.rg-perks b { color: var(--ink); }

.rg-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-cats .r-chip span { font-size: 15px; }
.rg-link { justify-self: start; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--br); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.rg-link[hidden] { display: none; }

.rg-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--ac, #F2A93B) 10%, var(--sf)); border: 1px dashed color-mix(in srgb, var(--ac, #F2A93B) 55%, var(--ln)); }
.rg-suggest[hidden] { display: none; }
.rg-suggest > span { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.rg-suggest .r-chip { padding: 6px 12px; font-size: 12.5px; }

.rg-addrow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 140px auto; gap: 12px; align-items: start; }
.rg-addrow .rg-addbtn { padding-top: 27px; }
.rg-addrow .r-f { margin-bottom: 0; }
.rg-addrow .rg-addbtn .btn { min-height: 46px; white-space: nowrap; }
.r-list { display: grid; gap: 8px; margin-bottom: 12px; }
.r-list:empty { display: none; }
.r-list .r-item { animation: rgIn .3s cubic-bezier(.2, .8, .2, 1); }
.rg-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: var(--br); }
.rg-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rg-presets button { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ln); background: var(--sf); color: var(--mu); font: inherit; font-size: 12px; cursor: pointer; }
.rg-presets button:hover { color: var(--br); border-color: var(--br); }
@keyframes rgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ phone preview */
.rg-phone { width: 100%; max-width: 300px; border-radius: 34px; border: 9px solid #0F172A; background: var(--sf); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15, 31, 58, .55); }
.rg-phone-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; direction: ltr; background: var(--s2, var(--bg)); font-size: 11px; color: var(--mu); }
.rg-phone-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #16A34A); flex: none; }
.rg-phone-bar b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-pv { max-height: 440px; overflow: auto; padding-bottom: 14px; scrollbar-width: thin; }
.pv-cover { position: relative; height: 72px; background: linear-gradient(135deg, var(--br), color-mix(in srgb, var(--br) 40%, var(--ac, #F2A93B))); }
.pv-logo { position: absolute; bottom: -22px; inset-inline-start: 14px; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  font-size: 22px; font-weight: 900; color: var(--br); background: var(--sf); box-shadow: 0 6px 16px rgba(15, 31, 58, .2); }
.pv-head { display: grid; gap: 4px; padding: 30px 14px 4px; }
.pv-head b { font-size: 15px; color: var(--ink); }
.pv-cat { justify-self: start; padding: 1px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--br); background: var(--bs); }
.pv-stars { font-size: 11px; color: #F59E0B; }
.pv-stars small { color: var(--mu); }
.pv-ghost { color: var(--mu) !important; opacity: .65; font-weight: 600; }
.pv-sec { padding: 12px 14px 6px; font-size: 11.5px; font-weight: 800; color: var(--mu); }
.pv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--ln); font-size: 12.5px; color: var(--ink); animation: rgIn .3s cubic-bezier(.2, .8, .2, 1); }
.pv-row small { display: block; font-size: 10.5px; color: var(--mu); }
.pv-row b { color: var(--br); font-size: 12px; white-space: nowrap; }
.pv-skel span, .pv-skel b { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--ln), var(--s2, var(--bg)), var(--ln));
  background-size: 200% 100%; animation: pvShine 1.6s linear infinite; }
.pv-skel span { width: 60%; }
.pv-skel b { width: 22%; }
@keyframes pvShine { to { background-position: -200% 0; } }
.pv-more { margin: 0 14px; font-size: 11.5px; color: var(--mu); }
.pv-team { display: flex; gap: 6px; padding: 0 14px; }
.pv-team span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff;
  background: var(--br); border: 2px solid var(--sf); animation: rgIn .3s; }
.pv-team span:nth-child(2n) { background: #EC4899; }
.pv-team span:nth-child(3n) { background: #14B8A6; }
.pv-team span.pv-ghost-av { background: var(--ln); }
.pv-hours { padding: 0 14px; font-size: 12px; line-height: 1.9; color: var(--mu); }
.pv-hours b { color: var(--ink); }
.pv-cta { margin: 14px 12px 0; padding: 9px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--br); }

/* ------------------------------------------------------------ narrower screens */
@media (max-width: 1180px) {
  .rg-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .rg-side { display: none; }
}
@media (max-width: 900px) {
  .rg { padding: 14px 14px 56px; }
  .rg-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rg-rail { position: static; padding: 14px; border-radius: 20px; box-shadow: none; }
  .rg-rail .sx-prog { padding: 0; border: 0; background: none; }
  .rg-rail .sx-logo { width: 38px; height: 38px; border-radius: 12px; font-size: 16px; }
  .rg-rail .ot-desk { order: 3; margin-top: 0; }
  .rg-card { padding: 20px 16px 16px; border-radius: 20px; }
}
@media (max-width: 560px) {
  .rg-addrow { grid-template-columns: 1fr 1fr; }
  .rg-addrow .rg-grow, .rg-addrow .rg-addbtn { grid-column: 1 / -1; }
  .rg-addrow .rg-addbtn { padding-top: 0; }
  .rg-addrow .rg-addbtn .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .r-list .r-item, .pv-row, .pv-team span { animation: none; }
  .pv-skel span, .pv-skel b { animation: none; }
}