/*
 * Registration card: a wide form with a two-column field grid (after ilmCode Printing's register page), themed
 * with the shop's own --sp-* colours instead of a fixed brand colour.
 */
.rg { background: var(--sp-soft, #f7f9fc); padding: 34px 0 60px; color: var(--sp-ink, #0f172a); }
.rg *, .rg *::before, .rg *::after { box-sizing: border-box; }
.rg-wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.rg-head { text-align: center; margin-bottom: 24px; }
.rg-mark {
    display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px;
    border-radius: 14px; background: var(--sp-brand, #ff5722); color: #fff; font-size: 22px;
}
.rg h1 { margin: 0; font-size: 28px; font-weight: 800; }
.rg-sub { margin: 8px 0 0; font-size: 15px; color: var(--sp-muted, #64748b); }
.rg-card { padding: 26px 32px 32px; border: 1px solid var(--sp-line, #e6eaf0); border-radius: 16px; background: #fff; }

.rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.rg-full { grid-column: 1 / -1; }
.rg-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.rg-field input:not([type=checkbox]):not([type=hidden]):not(.gp-search), .rg-field select {
    width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--sp-line, #e6eaf0); border-radius: 10px;
    background: #fff; font: inherit; font-size: 15px; color: var(--sp-ink, #0f172a); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.rg-field input:focus, .rg-field select:focus { border-color: var(--sp-brand, #ff5722); box-shadow: 0 0 0 3px rgba(255, 87, 34, .14); }
.rg-field small { display: block; margin-top: 6px; font-size: 12px; color: var(--sp-muted, #64748b); }
.rg-field em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--sp-red, #e11d48); }

.rg .gp.sp-phone-gp { height: 46px; }

.pw { position: relative; }
.pw input { padding-right: 44px !important; }
.pw button { position: absolute; top: 0; right: 0; height: 46px; width: 44px; border: 0; background: transparent; color: var(--sp-muted, #64748b); cursor: pointer; }

.rg-terms { margin: 22px 0 0; font-size: 13.5px; color: var(--sp-muted, #64748b); }
.rg-terms a { color: var(--sp-ink, #0f172a); text-decoration: underline; }
.rg-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
.rg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 13px 24px; border: 0; border-radius: 10px; background: var(--sp-brand, #ff5722); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: filter .15s;
}
.rg-btn:hover { filter: brightness(.93); color: #fff; }
.rg-foot { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--sp-muted, #64748b); }
.rg-foot a { color: var(--sp-brand, #ff5722); font-weight: 700; text-decoration: none; }
.rg-foot a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .rg-card { padding: 20px 16px 24px; }
    .rg-grid { grid-template-columns: 1fr; }
}