/* ---------------------------------------------------------------------------
   sfsu — the customer sign-up form when it sits on a WEBSITE page.

   The form itself is the shipped register view, so its markup is the admin
   area's Bootstrap. Dropped onto a website page that markup has no grid to sit
   in, which is why the fields bunched to the left and the footer rode up
   alongside them. This sheet gives it a column of its own and dresses it to
   match the page.

   Every colour is DERIVED from the page's own text colour using color-mix, so
   the form follows whatever theme preset is applied — light, mid or dark —
   without a single colour being hardcoded. Nothing here uses !important: each
   selector is scoped under .sfsu-signup, which already outranks the plain
   Bootstrap classes it is correcting.

   Namespace: .sfsu-* only. It styles no element outside its own container.
--------------------------------------------------------------------------- */

.sfsu-signup {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 16px;
    color: inherit;
    font: inherit;
}

/* The admin grid means nothing here — everything is one readable column. */
.sfsu-signup [class*="col-md-"],
.sfsu-signup [class*="col-sm-"],
.sfsu-signup [class*="col-xs-"] {
    width: 100%;
    max-width: 100%;
    float: none;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

.sfsu-signup .row { margin-left: 0; margin-right: 0; }

/* The panel the form sits in: a soft card that reads on any background. */
.sfsu-signup .panel_s,
.sfsu-signup .panel-body {
    background: color-mix(in srgb, currentColor 6%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 14px;
    box-shadow: none;
    padding: clamp(18px, 4vw, 32px);
}
.sfsu-signup .panel_s .panel-body {
    background: none;
    border: 0;
    padding: 0;
}

.sfsu-signup h4,
.sfsu-signup h3 {
    color: inherit;
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    margin: 0 0 14px;
}

.sfsu-signup label,
.sfsu-signup .control-label {
    display: block;
    color: inherit;
    opacity: .85;
    font-size: .95rem;
    font-weight: 500;
    margin-bottom: 6px;
}

/* The fields themselves. */
.sfsu-signup input[type="text"],
.sfsu-signup input[type="email"],
.sfsu-signup input[type="password"],
.sfsu-signup input[type="tel"],
.sfsu-signup input[type="url"],
.sfsu-signup input[type="number"],
.sfsu-signup select,
.sfsu-signup textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;                 /* comfortable on a thumb */
    padding: 10px 14px;
    margin-bottom: 16px;
    font: inherit;
    font-size: 1rem;                  /* never below 16px on a phone */
    color: inherit;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.sfsu-signup input::placeholder,
.sfsu-signup textarea::placeholder { color: inherit; opacity: .45; }

.sfsu-signup input:focus,
.sfsu-signup select:focus,
.sfsu-signup textarea:focus {
    border-color: color-mix(in srgb, currentColor 60%, transparent);
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* A select needs its own arrow once the browser chrome is replaced. */
.sfsu-signup select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

/* Checkboxes and their labels sit on one line, not stacked. */
.sfsu-signup .checkbox label,
.sfsu-signup .form-group.checkbox label { display: inline; opacity: 1; }
.sfsu-signup input[type="checkbox"] { width: auto; min-height: 0; margin-right: 8px; }

/* The button. Borrows the page's own link colour so it matches the theme. */
.sfsu-signup button[type="submit"],
.sfsu-signup .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
    padding: 12px 28px;
    margin-top: 8px;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: inherit;
    background: color-mix(in srgb, currentColor 16%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.sfsu-signup button[type="submit"]:hover,
.sfsu-signup .btn:hover {
    background: color-mix(in srgb, currentColor 26%, transparent);
    border-color: color-mix(in srgb, currentColor 65%, transparent);
}

/* The spam trap. The DECOY fields are the plainly-named ones and they carry
   .honey-element; the REAL fields are the oddly-suffixed ones beside them.
   That is the opposite way round to how it reads, and hiding by name suffix
   hides the real inputs and shows the decoys - which is exactly what happened
   here first time. Hide the class, never the name. The customer area hides
   these through its own stylesheet, which a website page does not load. */
.sfsu-signup .honey-element {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Validation messages, kept legible on any background. */
.sfsu-signup .text-danger,
.sfsu-signup .help-block { color: inherit; opacity: .8; font-size: .9rem; }

.sfsu-signup-note { margin: 0; opacity: .85; }

/* Two columns of fields once there is room for them. */
@media (min-width: 768px) {
    .sfsu-signup { padding-inline: 0; }
    .sfsu-signup-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
    }
}

/* ---------------------------------------------------------------------------
   Centre the form on the page.

   The preset's form sat in a container narrower than the section and pinned to
   the left, which left the whole right-hand side empty. These two rules centre
   THAT container and nothing else: each one requires .sfsu-signup-slot to be
   inside it, so a row or cell anywhere else on the site cannot match. No
   !important, and the selector is more specific than the builder's own.
--------------------------------------------------------------------------- */
.gjs-row:has(> .gjs-cell .sfsu-signup-slot),
.gjs-row:has(> .gjs-cell > .sfsu-signup-slot) {
    margin-inline: auto;
}

.gjs-cell:has(> .sfsu-signup-slot) {
    margin-inline: auto;
}

/* Fallback for a browser without :has() — the form still centres itself
   inside whatever box it is given, it simply keeps that box's position. */
.sfsu-signup-slot {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}