/*
 * Silverhost customer data forms (loaded on every page of the theme, cart included).
 *
 *   1. Shared pieces: inline errors (js/forms.js), custom checkbox, check card, company block,
 *      terms acceptance row. Used by register.php and the silverhost_flow checkout.
 *   2. register.php (clientregister.tpl): page heading, sections and fields, scoped to .sh-reg.
 *
 * Checkout-only adjustments live in orderforms/silverhost_flow/css/checkout.css.
 */

/* ---------- 1. Shared ---------- */
.sh-field-error {
    display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0 !important;
    color: var(--sh-danger); font-size: .875rem; font-weight: 500; line-height: 1.4;
}
.sh-field-error::before {
    content: "!"; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
    background: var(--sh-danger); color: var(--sh-on-danger); font-size: .75rem; font-weight: 700; line-height: 1;
}
.has-sh-error .form-control, .has-sh-error select {
    border-color: var(--sh-danger) !important;
}
.has-sh-error .form-control:focus, .has-sh-error select:focus { box-shadow: 0 0 0 3px rgb(159 28 28 / .18) !important; }
.has-sh-error > label { color: var(--sh-danger) !important; }
.sh-tos.has-sh-error > label { color: inherit !important; } /* keep the terms sentence readable; the box and message carry the error */

/* Custom checkbox (no iCheck): petrol on light, cyan on the dark confirm panel */
.sh-checkbox {
    -webkit-appearance: none; appearance: none; flex-shrink: 0; position: static !important; opacity: 1 !important;
    width: 22px; height: 22px; margin: 1px 0 0 !important; padding: 0;
    border: 2px solid var(--sh-hairline-strong); border-radius: 6px;
    background: var(--sh-surface) center / 14px 14px no-repeat; cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.sh-checkbox:hover { border-color: var(--sh-petrol); }
.sh-checkbox:focus { outline: none; }
.sh-checkbox:focus-visible { box-shadow: 0 0 0 3px rgb(81 206 233 / .55); border-color: var(--sh-petrol); }
.sh-checkbox:checked {
    background-color: var(--sh-petrol); border-color: var(--sh-petrol);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%2351cee9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sh-checkbox-on-dark { border-color: rgb(242 247 248 / .8); background-color: rgb(242 247 248 / .06); }
.sh-checkbox-on-dark:hover { border-color: var(--sh-cyan); background-color: rgb(81 206 233 / .12); }
.sh-checkbox-on-dark:focus-visible { border-color: var(--sh-cyan); box-shadow: 0 0 0 3px rgb(81 206 233 / .5); }
.sh-checkbox-on-dark:checked {
    background-color: var(--sh-cyan); border-color: var(--sh-cyan);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%230a2c36' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Check card: a whole-row clickable tickbox with a title and a hint */
.sh .sh-check-card {
    display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 16px 18px;
    border: 1px solid var(--sh-hairline-strong); border-radius: 14px; background: var(--sh-surface);
    cursor: pointer; font-weight: 400; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.sh .sh-check-card:hover { border-color: var(--sh-petrol); }
.sh .sh-check-card:has(.sh-checkbox:checked) {
    border-color: var(--sh-petrol); background: var(--sh-tint); box-shadow: inset 0 0 0 1px var(--sh-petrol);
}
.sh-check-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.sh-check-text strong { font-size: 1rem; font-weight: 600; color: var(--sh-ink); }
.sh-check-text span { font-size: .875rem; color: var(--sh-muted); }

/* Company block (silverhost/includes/sh-company-fields.tpl) */
.sh-company { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--sh-hairline); }
.sh-company:has(> [data-shc-toggle-wrap][hidden]) { display: none; }
.sh-company [hidden] { display: none !important; }
.sh-company-fields { margin-top: 20px; }
.sh .sh-company-title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: var(--sh-ink); }
@media (prefers-reduced-motion: no-preference) {
    .sh-company-fields:not([hidden]) { animation: sh-form-reveal .35s var(--sh-ease) both; }
}
@keyframes sh-form-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sh-other-fields { margin-top: 16px; }

/* Terms acceptance row */
.sh-tos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.sh .sh-tos > label { flex: 1; min-width: 0; margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.45; cursor: pointer; }
.sh-tos .sh-field-error { flex-basis: 100%; margin: 0 0 0 34px !important; }
.sh-tos-light {
    padding: 14px 16px; border: 1px solid var(--sh-hairline-strong); border-radius: 12px; background: var(--sh-canvas);
    transition: border-color .2s, background-color .2s;
}
.sh-tos-light:has(.sh-checkbox:checked) { border-color: var(--sh-petrol); background: var(--sh-tint); }
.sh-tos-light.has-sh-error { border-color: var(--sh-danger); background: var(--sh-danger-bg); }
.sh-tos-light a { color: var(--sh-cyan-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 2. register.php ---------- */
.sh-page-clientregister .sh-pagehead { display: none; } /* this template has its own heading */
/* Nexus's "¿Ya está registrado?" sidebar repeats the login link of the heading: drop it so the form is centred */
.sh-page-clientregister #main-body .row > .col-lg-4.col-xl-3:has(.sidebar) { display: none; }
.sh-page-clientregister #main-body .primary-content { flex: 0 0 100%; max-width: 100%; }
.sh-reg { max-width: 780px; margin: 8px auto 56px; }
.sh-reg-head { margin-bottom: 24px; }
.sh .sh-reg-title { margin: 4px 0 8px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1; }
.sh-reg-head .sh-muted { max-width: 60ch; font-size: 1rem; margin: 0; }
.sh-reg-head a { color: var(--sh-cyan-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.sh-form, .sh-form #containerNewUserSignup { display: grid; gap: 20px; }
.sh-form #containerNewUserSecurity.w-hidden { display: none; }
.sh-form-section {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); padding: 20px;
}
@media (min-width: 768px) { .sh-form-section { padding: 28px; } }
.sh .sh-form-title { display: flex; align-items: center; margin: 0 0 4px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.sh-form-num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin-right: 10px;
    border-radius: 50%; background: var(--sh-petrol); color: var(--sh-petrol-mark); font-size: .875rem; font-weight: 600;
}
.sh .sh-form-sub { margin: 0 0 20px; font-size: .9375rem; color: var(--sh-muted); }
.sh-form .sh-fields { display: grid; gap: 0 16px; }
@media (min-width: 576px) { .sh-form .sh-fields { grid-template-columns: 1fr 1fr; } .sh-form .sh-field-full { grid-column: 1 / -1; } }
.sh-form .sh-field { margin-bottom: 16px; min-width: 0; }
.sh .sh-form .sh-field > label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: var(--sh-ink); }
.sh-form .sh-optional { font-weight: 400; color: var(--sh-muted); }
.sh .sh-form .sh-field .form-control, .sh .sh-form .sh-field select { width: 100%; min-height: 48px; padding: 10px 14px; font-size: 1rem; }
.sh-form .sh-field-help { display: block; margin-top: 6px; font-size: .8125rem; color: var(--sh-muted); font-weight: 400; }
.sh-form .sh-field .intl-tel-input, .sh-form .sh-field .iti { width: 100%; display: block; }
.sh-form .password-strength-meter .progress { height: 8px; margin: 14px 0 6px; }
.sh-form .generate-password { min-height: 44px; gap: 8px; }
.sh-reg-confirm { display: grid; gap: 18px; }
.sh-reg-optin { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--sh-hairline); }
.sh .sh-reg-optin-title { margin: 0 0 2px; font-weight: 600; }
.sh-reg-optin .sh-muted { margin: 0; font-size: .875rem; }
.sh-reg-captcha:not(:has(*)) { display: none; }
.sh-reg-captcha .row { justify-content: flex-start !important; margin: 0; }
.sh-reg-captcha .text-center { text-align: left !important; }
.sh-reg-captcha .recaptcha-container { margin: 0 !important; }
.sh-reg-captcha .form-group { margin-bottom: 0; }
.sh-reg-submit { justify-self: start; min-height: 56px; }
@media (max-width: 575.98px) { .sh-reg-submit { justify-self: stretch; justify-content: space-between; } }

/* "La empresa está en mi misma dirección" */
.sh-same-address {
    display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 16px; padding: 12px 14px;
    border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-control); background: var(--sh-canvas); cursor: pointer;
}
.sh-same-address:hover { border-color: var(--sh-hairline-strong); }
.sh-same-address .sh-checkbox { margin-top: 2px; flex-shrink: 0; }
.sh-same-address > span { display: flex; flex-direction: column; gap: 2px; }
.sh-same-address strong { font-size: .9375rem; font-weight: 500; color: var(--sh-ink); }
.sh-same-address > span > span { font-size: .8125rem; color: var(--sh-muted); }
[data-shc-address][hidden] { display: none !important; }

/* Address copied but region not recognised: show only the company region field */
[data-shc-address].is-region-only > .sh-field:not(:has(#customfield55)) { display: none; }
[data-shc-address].is-region-only { grid-template-columns: 1fr; }
.sh .sh-region-note { margin: 0 0 8px; font-size: .875rem; color: var(--sh-ink); }