/* ─── Single illustration image ─── */
.page-illustration { left: 89px; top: 440px; width: 362px; }

/* ─── Signup page illustration positions ─── */
.ill-bg-simple    { top: 48.03%; right: 68.66%; bottom: 23.49%; left:  9.38%; }
.ill-shadow       { top: 79.87%; right: 72.19%; bottom: 18.01%; left: 12.54%; }
.ill-window       { top: 51.95%; right: 71.25%; bottom: 27.09%; left: 11.60%; }
.ill-shop-roof    { top: 49.78%; right: 70.62%; bottom: 46.72%; left: 10.97%; }
.ill-shoes        { top: 54.34%; right: 83.76%; bottom: 28.83%; left: 12.61%; }
.ill-mannequins   { top: 55.05%; right: 71.97%; bottom: 27.61%; left: 18.70%; }
.ill-floor        { top: 76.71%; right: 70.13%; bottom: 22.84%; left: 10.48%; }
.ill-character    { top: 56.65%; right: 84.36%; bottom: 18.55%; left:  6.18%; }

/* ─── Panel title line-height fix ─── */
.panel-title { line-height: 0; }

/* ─── Form sections ─── */
.form-body    { display: flex; flex-direction: column; align-items: center; width: 100%; }
.form-sections { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.fields-and-btn {
  display: flex; flex-direction: column; gap: 36px; width: 100%;
  margin: 0; padding: 0; border: none; background: none;
}
.fields      { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.field-group { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.field-label.sm { font-size: 16px; }

/* ─── Phone field ─── */
.phone-wrap {
  display: flex; align-items: center; gap: 12px;
  height: 52px; background: #fff; border: 1px solid #c6b8b8;
  border-radius: 10px; padding: 6px 18px; width: 100%;
  position: relative;
}
.phone-wrap:focus-within { border-color: #ec8402; }
.country-part { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; cursor: pointer; }
.flag-wrap { width: 24px; height: 17.143px; border-radius: 3.429px; box-shadow: 0 0.429px 0.857px 0 rgba(0,0,0,0.05); overflow: hidden; position: relative; flex-shrink: 0; }
.flag-wrap img { position: absolute; height: 140%; left: 0; top: -20%; width: 100%; max-width: none; }
.code-arrow { display: flex; align-items: center; gap: 8px; }
.dial-code { font-size: 14px; font-weight: 600; color: rgba(17,17,17,0.7); letter-spacing: 0.35px; white-space: nowrap; }
.arrow-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; transform: rotate(180deg); flex-shrink: 0; }
.arrow-icon img { width: 14px; height: 14px; display: block; }
.phone-divider { width: 1px; height: 25px; background: #d9d9d9; flex-shrink: 0; }
.phone-input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 400; color: #191c1d; letter-spacing: 0.35px; }
.phone-input::placeholder { color: rgba(72,95,132,0.7); }

/* ─── Country dropdown ─── */
.country-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: -18px; width: 220px; background: #fff; border: 1px solid #e1e3e4; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); z-index: 200; max-height: 220px; overflow-y: auto; }
.country-part.open .country-dropdown { display: block; }
.country-part.open .arrow-icon { transform: rotate(0deg); }
.country-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; font-weight: 500; color: #191c1d; cursor: pointer; }
.country-opt:hover { background: #f4f6fa; }
.country-opt .o-flag-img { width: 24px; height: 17px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.country-opt .o-name { flex: 1; }
.country-opt .o-code { color: rgba(72,95,132,0.7); font-size: 13px; }

/* ─── Divider ─── */
.divider-row { display: flex; align-items: center; width: 342px; height: 24px; flex-shrink: 0; }
.divider-line { flex: 1; height: 1px; min-width: 0; background: #e1e3e4; }
.divider-text { padding: 0 16px; font-size: 16px; font-weight: 700; color: rgba(72,95,132,0.4); letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; line-height: 24px; }

/* ─── Social buttons ─── */
.social-row { display: flex; align-items: flex-start; gap: 15px; width: 100%; }
.btn-social { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid #f4e437; border-radius: 10px; padding: 6px 18px; overflow: hidden; text-decoration: none; cursor: pointer; }
.btn-social .s-icon { position: relative; flex-shrink: 0; width: 24px; height: 24px; overflow: hidden; }
.btn-social .s-icon img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s-icon-google { width: 24px; height: 24px; overflow: hidden; flex-shrink: 0; position: relative; }
.s-icon-google img { position: absolute; top: 6.25%; left: 7.81%; right: 7.74%; bottom: 6.29%; width: calc(100% - 7.81% - 7.74%); height: calc(100% - 6.25% - 6.29%); }
.btn-social span { font-size: 16px; font-weight: 600; color: #1a1a1a; white-space: nowrap; line-height: 40px; }

/* ─── Sign-in link ─── */
.signin-row { padding-top: 48px; width: 100%; }
.signin-link { display: flex; align-items: flex-start; justify-content: center; gap: 4px; }
.signin-link .s-text { font-size: 14px; font-weight: 500; color: #485f84; line-height: 20px; white-space: nowrap; }
.signin-link a { font-size: 14px; font-weight: 700; color: #ec8402; line-height: 20px; text-decoration: none; white-space: nowrap; }
.signin-link a:hover { text-decoration: underline; }