/* New business sign up (views/app/signup/public.view.php). Uses v2/tokens.css */
* {box-sizing: border-box;}
html, body {margin: 0;}
.su-body {background: var(--surface); color: var(--ink); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;}
.su-body [hidden] {display: none !important;}
.su input[type=number]::-webkit-inner-spin-button, .su input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
.su input[type=number] {-moz-appearance: textfield;}

.su-top {display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 24px; background: var(--header-bg, #1E2B27);}
.su-logo {height: 26px; width: auto;}
.su-saved {display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,.75);}
.su-saved i {font-size: 15px;}
.su-saved.is-flash {animation: su-flash 1.2s ease-out;}
@keyframes su-flash {0% {color: #fff;} 100% {color: rgba(255,255,255,.75);}}

.su-layout {display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; max-width: 1160px; margin: 0 auto; padding: 32px 24px 64px; align-items: start;}
.su-main {min-width: 0;}

/* Step bar: one segment per step, done steps clickable */
.su-steps {margin-bottom: 16px;}
.su-steps__bar {display: flex; gap: 4px;}
.su-steps__seg {flex: 1; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--lighter); cursor: pointer; transition: background .25s;}
.su-steps__seg:disabled {cursor: default;}
.su-steps__seg.is-done {background: var(--brand);}
.su-steps__seg.is-current {background: var(--ink);}
.su-steps__meta {display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--muted);}
.su-steps__meta b {font-weight: 500; color: var(--slate);}

/* Venue photo beside the form, changes with the step */
.su-photo {position: sticky; top: 24px; height: min(640px, calc(100vh - 48px)); border-radius: 14px; background: #1E2B27 center / cover no-repeat; box-shadow: var(--shadow-sm); transition: background-image .4s;}
.su[data-step="you"] .su-photo, .su[data-step="needs"] .su-photo {background-image: url(../images/signup/bartender.jpg);}
.su[data-step="business"] .su-photo, .su[data-step="review"] .su-photo {background-image: url(../images/signup/restaurant.jpg);}
.su[data-step="venues"] .su-photo, .su[data-step="speed"] .su-photo {background-image: url(../images/signup/bar.jpg);}
.su[data-step="money"] .su-photo, .su[data-step="kit"] .su-photo, .su[data-step="sent"] .su-photo {background-image: url(../images/signup/service.jpg);}
.su[data-step="you"] .su-photo {background-position: 40% center;}

/* Optional extras folded away */
.su-field > span em, .su-more summary em {font-style: normal; font-weight: 400; color: var(--light);}
.su-more {margin-top: 14px; border-top: var(--border-pale-line, 1px solid #EEE); padding-top: 12px;}
.su-more summary {cursor: pointer; font-size: 13px; font-weight: 500; color: var(--slate); list-style: none;}
.su-more summary::-webkit-details-marker {display: none;}
.su-more summary::before {content: "\F0142"; font-family: "Material Design Icons"; margin-right: 4px; display: inline-block; transition: transform .15s;}
.su-more[open] summary::before {transform: rotate(90deg);}

/* Cards */
.su-card {background: var(--white); border: var(--border-default); border-radius: 12px; padding: 32px; box-shadow: var(--shadow-sm);}
.su-card h1 {margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em;}
.su-card h2 {margin: 0 0 10px; font-size: 14px; font-weight: 600;}
.su-lead {margin: 0 0 24px; color: var(--muted);}
.su-center {text-align: center; padding: 56px 32px;}
.su-center p {color: var(--muted); max-width: 420px; margin: 8px auto 20px;}
.su-big {font-size: 44px; color: var(--muted);}
.su-big.is-good {color: var(--brand);}

.su-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 18px;}
.su-field {display: flex; flex-direction: column; gap: 6px; min-width: 0;}
.su-field.is-wide {grid-column: 1 / -1;}
.su-field > span:first-child {font-size: 12px; font-weight: 500; color: var(--slate);}
.su-field input, .su-field select, .su-field textarea {width: 100%; height: 42px; padding: 0 12px; border: var(--border-default); border-radius: var(--radius-md); background: var(--white); color: var(--ink); font: 400 14px/1.3 var(--font); outline: none;}
.su-field input.is-invalid {border-color: var(--danger);}
.su-field textarea {height: auto; padding: 10px 12px; resize: vertical;}
.su-field input:focus, .su-field select:focus, .su-field textarea:focus {border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-pale);}
.su-field input[readonly] {background: var(--surface); color: var(--muted);}
.su-hp {position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}

.su-search, .su-money {position: relative; display: flex; align-items: center;}
.su-search i {position: absolute; left: 12px; font-size: 18px; color: var(--muted);}
.su-search input {padding-left: 38px;}
.su-money b {position: absolute; left: 12px; font-weight: 500; color: var(--muted);}
.su-money input {padding-left: 28px;}
.su-money.is-suffix b {left: auto; right: 12px;}
.su-money.is-suffix input {padding-left: 12px; padding-right: 28px;}

/* Choice cards */
.su-choice {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;}
.su-choice.is-two {grid-template-columns: repeat(2, minmax(0, 1fr));}
.su-choice button {display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: var(--border-default); border-radius: 10px; background: var(--white); color: var(--ink); font: 400 13px/1.35 var(--font); text-align: left; cursor: pointer;}
.su-choice button:hover {border-color: var(--lighter);}
.su-choice button i {font-size: 22px; color: var(--muted); margin-bottom: 4px;}
.su-choice button b {font-weight: 600;}
.su-choice button span {color: var(--muted); font-size: 12px;}
.su-choice button.is-on {border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: #F7FBF9;}
.su-choice button.is-on i {color: var(--brand);}

/* Companies House */
.su-ch {margin-top: 18px;}
.su-ch__results {display: flex; flex-direction: column; gap: 6px; margin-top: 8px;}
.su-ch__item {display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border: var(--border-default); border-radius: var(--radius-md); background: var(--white); color: var(--ink); font: 400 12px/1.4 var(--font); text-align: left; cursor: pointer;}
.su-ch__item:hover {background: var(--surface);}
.su-ch__item b {font-size: 13px; font-weight: 600;}
.su-ch__item span {color: var(--muted);}
.su-ch__item.is-on {border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand);}
.su-ch__item.is-gone b {color: var(--muted);}
.su-ch__item.is-busy {opacity: .6;}
.su-ch__msg {display: flex; align-items: center; gap: 6px; padding: 8px 2px; color: var(--muted); font-size: 13px;}

/* Kit basket */
.su-kit {list-style: none; margin: 16px 0 0; padding: 0; border: var(--border-default); border-radius: 10px; overflow: hidden; background: var(--white);}
.su-kit__item {display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px;}
.su-kit__item + .su-kit__item {border-top: var(--border-faint-line);}
.su-kit__name {display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.su-kit__name b {font-weight: 600;}
.su-kit__name span {color: var(--muted); font-size: 12px;}
.su-kit__item .su-stepper {flex: none; width: 132px;}
.su-kit__item .su-stepper input {width: 100%; min-width: 0; border: 0; text-align: center; font-weight: 600; font: 600 14px/1 var(--font); color: var(--ink); background: transparent; outline: none;}
.su-kit__note {margin: 8px 2px 0; color: var(--muted); font-size: 12px;}
.su-card .su-kit__h {margin: 26px 0 10px;}
.su-basket {margin-top: 20px; padding: 14px 16px; border: var(--border-default); border-radius: 10px; background: var(--surface);}
.su-basket h2 {margin: 0 0 6px;}
.su-basket dl {margin: 0;}
.su-basket dl > div {display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;}
.su-basket dt {color: var(--slate); min-width: 0;}
.su-basket dd {margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums;}
.su-basket .is-sub {margin-top: 6px; padding-top: 8px; border-top: var(--border-faint-line);}
.su-basket .is-total {font-weight: 600; color: var(--ink);}
.su-basket .is-total dt {color: var(--ink);}

/* Venues */
.su-venues {display: flex; flex-direction: column; gap: 14px;}
.su-venue {padding: 18px; border: var(--border-default); border-radius: 10px; background: var(--surface);}
.su-venue .su-grid {margin-top: 10px;}
.su-venue__head {display: flex; align-items: center; justify-content: space-between;}
.su-venue__head b {font-weight: 600;}
.su-add {margin-top: 12px;}
.su-stepper {display: flex; align-items: stretch; height: 42px; border: var(--border-default); border-radius: var(--radius-md); background: var(--white); overflow: hidden;}
.su-stepper button {flex: none; width: 42px; border: 0; background: transparent; color: var(--mid); font-size: 18px; cursor: pointer;}
.su-stepper button:hover {background: var(--hover);}
.su-field .su-stepper input {flex: 1; height: auto; border: 0; border-radius: 0; text-align: center; font-weight: 600; box-shadow: none;}

/* Files */
.su-drop {display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; padding: 26px; border: 1.5px dashed var(--lighter); border-radius: 10px; background: var(--surface); text-align: center; cursor: pointer;}
.su-drop i {font-size: 28px; color: var(--brand);}
.su-drop span {font-size: 12px; color: var(--muted);}
.su-drop.is-over {border-color: var(--brand); background: #F7FBF9;}
.su-drop.is-busy {opacity: .6;}
.su-files {list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px;}
.su-files li {display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: var(--border-default); border-radius: var(--radius-md); background: var(--white);}
.su-files li i {font-size: 18px; color: var(--muted);}
.su-files li span {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.su-files li small {color: var(--muted);}

/* Needs */
.su-needs {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.su-need {position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: var(--border-default); border-radius: 10px; background: var(--white); color: var(--ink); font: 500 13px/1.2 var(--font); text-align: left; cursor: pointer;}
.su-need > i:first-child {font-size: 20px; color: var(--muted);}
.su-need__tick {position: absolute; right: 10px; font-size: 16px; color: var(--brand); opacity: 0;}
.su-need.is-on {border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: #F7FBF9;}
.su-need.is-on > i:first-child {color: var(--brand);}
.su-need.is-on .su-need__tick {opacity: 1;}
.su-top-pick {margin-top: 22px;}
.su-pills {display: flex; flex-wrap: wrap; gap: 6px;}
.su-pill {height: 32px; padding: 0 14px; border: var(--border-default); border-radius: 16px; background: var(--white); color: var(--ink); font: 500 13px/1 var(--font); cursor: pointer;}
.su-pill.is-on {border-color: var(--ink); background: var(--ink); color: #fff;}

/* Speed test */
.su-speed {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 12px;}
.su-speed__dial {display: flex; flex-direction: column; align-items: center; padding: 18px 10px; border: var(--border-default); border-radius: 10px; background: var(--surface);}
.su-speed__dial b {font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em;}
.su-speed__dial span {font-size: 12px; color: var(--muted);}
.su-speed.is-running .su-speed__dial b {color: var(--muted);}
.su-verdict {margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 13px;}
.su-verdict.is-good {background: var(--brand-pale); color: var(--brand-ink);}
.su-verdict.is-ok {background: #FFF6E5; color: #7A4B00;}
.su-verdict.is-poor {background: var(--danger-pale); color: var(--danger);}

/* Review */
.su-review {display: flex; flex-direction: column; gap: 12px;}
.su-review__block {border: var(--border-default); border-radius: 10px; overflow: hidden;}
.su-review__block header {display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface); border-bottom: var(--border-faint-line);}
.su-review__block h2 {margin: 0;}
.su-review__block dl {margin: 0; padding: 6px 14px;}
.su-review__block dl > div {display: flex; gap: 12px; padding: 5px 0;}
.su-review__block dt {flex: 0 0 150px; color: var(--muted);}
.su-review__block dd {margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere;}

/* Buttons */
.su-actions {display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: var(--border-faint-line);}
.su-actions .is-primary:only-child {margin-left: auto;}
.su-btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border: var(--border-default); border-radius: var(--radius-md); background: var(--white); color: var(--ink); font: 500 14px/1 var(--font); text-decoration: none; cursor: pointer;}
.su-btn:hover {background: var(--surface);}
.su-btn i {font-size: 18px;}
.su-btn.is-primary {border-color: var(--brand); background: var(--brand); color: #fff;}
.su-btn.is-primary:hover {background: var(--brand-hover);}
.su-btn.is-sm {height: 30px; padding: 0 10px; font-size: 12px;}
.su-btn:disabled {opacity: .55; cursor: default;}
.su-icon {width: 30px; height: 30px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted); font-size: 17px; cursor: pointer;}
.su-icon:hover {background: var(--hover); color: var(--ink);}

.su-resume {display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--brand-pale); color: var(--brand-ink);}
.su-resume span {flex: 1;}
.su-error {margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--danger-pale); color: var(--danger);}
.su-staff {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 10px 24px; font-size: 13px; background: var(--warning-pale); color: var(--warning);}
.su-staff a {margin-left: auto; color: inherit; font-weight: 500;}
.su-link {display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; color: var(--muted);}
.su-link a {color: var(--brand-ink);}

/* Live pricing ribbon pinned under every step from Business onwards */
.su-plan {display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 14px; border: var(--border-default); border-radius: var(--radius-md); background: var(--brand-pale);}
.su-plan__label {font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-ink); font-weight: 600;}
.su-plan__price {font-size: 20px; color: var(--ink);}
.su-plan__price b {font-weight: 700;}
.su-plan__price span {color: var(--muted); font-size: 13px; margin-left: 2px;}
.su-plan__upfront {padding-left: 10px; border-left: var(--border-default);}
.su-plan__meta {margin-left: auto; font-size: 12px; color: var(--muted);}
@media (max-width: 600px){
  .su-plan__meta {margin-left: 0; width: 100%;}
}

@media (max-width: 1000px){
  .su-layout {grid-template-columns: minmax(0, 1fr); max-width: 760px;}
  .su-photo {display: none;}
  .su[data-step="you"] .su-photo {display: block; grid-row: 1; position: static; height: 180px;}
}
@media (max-width: 860px){
  .su-layout {padding: 18px 14px 48px; gap: 14px;}
  .su[data-step="you"] .su-photo {height: 140px; border-radius: 10px;}
}
@media (max-width: 600px){
  .su-top {height: 54px; padding: 0 16px;}
  .su-card {padding: 22px 16px; border-radius: 10px;}
  .su-grid, .su-choice, .su-choice.is-two {grid-template-columns: minmax(0, 1fr);}
  .su-needs {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .su-speed__dial b {font-size: 22px;}
  .su-review__block dt {flex-basis: 110px;}
  .su-kit__item {padding: 10px 12px;}
  .su-kit__item .su-stepper {width: 112px;}
  .su-kit__item .su-stepper button {width: 36px;}
}