/**
 * A modern, deliberate visual design for Tutor LMS's own student
 * registration form - not just this plugin's added fields, but the
 * WHOLE form (Tutor's built-in first name/last name/email/password
 * fields included). Tutor's own default look reads as dated/"typical
 * WP backend" (small type, no breathing room, no card definition), and
 * since this plugin already renders its own fields with Tutor's exact
 * class names (see PTRF_Registration::render_field()), styling those
 * same class names here gives the ENTIRE form one consistent, modern
 * appearance with a single stylesheet - not a per-field patch.
 *
 * Deliberately scoped under #tutor-registration-wrap (Tutor's own
 * wrapper ID around the whole form) so nothing here reaches outside
 * this one page - normal ID+class specificity is used on purpose here
 * (not zeroed out via :where()), since the point IS to confidently
 * override Tutor's own default rules, not just fill gaps where they're
 * missing.
 */
:root {
    --ptrf-accent: #2563eb;
    --ptrf-accent-hover: #1d4fd1;
    /* Slightly softened from a near-black #1a1d23 - the customer found
     * typed-in field text (numbers, phone code/number) too stark/sharp
     * against the light input background. Still dark enough to read
     * easily, just not full black. */
    --ptrf-text: #33373f;
    --ptrf-muted: #6b7280;
    --ptrf-border: #e2e4e9;
    --ptrf-danger-bg: #fdecea;
    --ptrf-danger-text: #b42318;
    --ptrf-danger-border: #f6c6c1;
}

#tutor-registration-wrap {
    /* Tutor's own template hardcodes max-width: 520px as an INLINE
     * style on this element (templates/dashboard/registration.php) -
     * inline styles beat any external stylesheet rule regardless of
     * selector specificity, so !important is the only way to widen it
     * from here. --ptrf-form-width is set by a small inline <style>
     * block PTRF_Registration::maybe_enqueue_frontend_script() adds
     * right after this stylesheet, from the admin's own "Form
     * settings" width field (PTRF_Fields::get_form_width()) - the
     * 800px here is only the fallback for the rare case that inline
     * block didn't load for some reason, matching this setting's own
     * default value. */
    max-width: var(--ptrf-form-width, 800px) !important;
    background: #fff;
    border: 1px solid var(--ptrf-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.08);
    padding: 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ptrf-text);
}

#tutor-registration-wrap .tutor-form-group {
    margin-bottom: 4px;
}

#tutor-registration-wrap .tutor-block {
    display: block;
}

#tutor-registration-wrap .tutor-mb-3 {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ptrf-muted);
    letter-spacing: 0.01em;
}

/*
 * The " *" a Required field's own label gets (PTRF_Registration::
 * field_label_html()) - a plain color/weight nudge, not its own
 * separate visual language, since it's a single character sitting
 * inline in an existing label. Deliberately NOT scoped under
 * #tutor-registration-wrap like the rule above, unlike most of this
 * file - field_label_html() is also reused by the student dashboard's
 * own "My Information" tab (a separate template, outside that ID -
 * see its own docblock), so this needs to reach both pages, same
 * reasoning as .ptrf-dropzone/.ptrf-phone-field further down.
 */
.ptrf-required {
    color: var(--ptrf-danger-text, #b42318);
    font-weight: 700;
}

/*
 * Student's own "My Information" dashboard tab (includes/templates/
 * dashboard-registration-info.php) - that page isn't inside
 * #tutor-registration-wrap, so none of this stylesheet's other
 * (scoped) rules below reach it. Deliberately unscoped, same reasoning
 * as .ptrf-required above.
 */
.ptrf-info-row:not(:last-child) {
    border-bottom: 1px solid #f0f0f1;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

/* A row with no Edit button at all (Username, GDPR consent) - muted,
 * calmer text so it visually reads as "this one's locked" next to the
 * editable rows around it, instead of standing out as bold/emphasized. */
.ptrf-info-readonly {
    color: #6b7280;
    font-weight: 400;
}

/* The last field row above intentionally has no bottom margin of its
 * own (it's the end of the list, not a divider) - without this, the
 * submit button sits flush against it. */
.ptrf-info-submit {
    margin-top: 24px;
}

#tutor-registration-wrap .tutor-mb-8 {
    margin-bottom: 20px;
}

#tutor-registration-wrap .tutor-mt-4 {
    margin-top: 6px;
}

#tutor-registration-wrap .tutor-mt-8 {
    margin-top: 24px;
}

#tutor-registration-wrap .tutor-fs-7 {
    font-size: 12px;
}

#tutor-registration-wrap .tutor-color-muted {
    color: var(--ptrf-muted);
}

#tutor-registration-wrap .tutor-input-field {
    position: relative;
}

#tutor-registration-wrap .tutor-form-control,
#tutor-registration-wrap .tutor-input,
#tutor-registration-wrap select.tutor-form-control,
#tutor-registration-wrap textarea.tutor-form-control {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    font-family: inherit;
    border: 1px solid var(--ptrf-border);
    border-radius: 8px;
    background: #fafafa;
    color: var(--ptrf-text);
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#tutor-registration-wrap .tutor-form-control:hover,
#tutor-registration-wrap .tutor-input:hover {
    border-color: #c7cad1;
}

#tutor-registration-wrap .tutor-form-control:focus,
#tutor-registration-wrap .tutor-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ptrf-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#tutor-registration-wrap .tutor-btn {
    display: inline-block;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

#tutor-registration-wrap .tutor-btn-primary {
    background: var(--ptrf-accent);
    color: #fff;
    border-color: var(--ptrf-accent);
}

#tutor-registration-wrap .tutor-btn-primary:hover {
    background: var(--ptrf-accent-hover);
}

#tutor-registration-wrap .tutor-btn-primary:active {
    transform: scale(0.98);
}

#tutor-registration-wrap .tutor-btn-block {
    display: block;
    width: 100%;
    margin-top: 8px;
}

#tutor-registration-wrap .tutor-btn-link {
    background: none;
    border: none;
    color: var(--ptrf-accent);
    padding: 0;
    font-weight: 600;
    font-size: 14px;
}

#tutor-registration-wrap .tutor-btn-link:hover {
    color: var(--ptrf-accent-hover);
}

#tutor-registration-wrap .tutor-flex {
    display: flex;
}

#tutor-registration-wrap .tutor-items-center {
    align-items: center;
}

#tutor-registration-wrap .tutor-justify-center {
    justify-content: center;
}

#tutor-registration-wrap .tutor-gap-2 {
    gap: 8px;
}

#tutor-registration-wrap .tutor-small {
    font-size: 14px;
    color: var(--ptrf-muted);
}

#tutor-registration-wrap .tutor-form-row {
    margin-bottom: 20px;
}

#tutor-registration-wrap .tutor-input-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#tutor-registration-wrap .tutor-checkbox {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--ptrf-accent);
}

/*
 * Radio buttons in a "Radio buttons" field - same fixed-size override
 * as .tutor-checkbox above, and for the same reason: without an
 * explicit width/height here, a radio's native rendered size can end
 * up stretched by something outside this plugin's own styling (seen
 * live - an option whose label text wrapped onto two lines rendered
 * its own radio circle dramatically larger than the single-line
 * options beside it). This selector also covers the student dashboard
 * "My Information" tab's own radio rendering (.ptrf-lock-field, a
 * SEPARATE template outside #tutor-registration-wrap - see that
 * template's own docblock for why) and the admin Submissions editor
 * uses the identical .ptrf-lock-field wrapper class too, though
 * wp-admin's own core CSS already keeps native radios a consistent
 * size there regardless.
 */
#tutor-registration-wrap .tutor-radio,
.ptrf-lock-field .tutor-radio {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--ptrf-accent);
}

#tutor-registration-wrap .tutor-label {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
}

#tutor-registration-wrap .tutor-label a {
    color: var(--ptrf-accent);
    text-decoration: underline;
}

#tutor-registration-wrap .tutor-alert {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

#tutor-registration-wrap .tutor-alert-error {
    background: var(--ptrf-danger-bg);
    color: var(--ptrf-danger-text);
    border: 1px solid var(--ptrf-danger-border);
}

#tutor-registration-wrap .tutor-alert-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#tutor-registration-wrap .tutor-alert-icon svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

#tutor-registration-wrap .tutor-alert-text {
    font-size: 13.5px;
    line-height: 1.5;
}

#tutor-registration-wrap .badge,
#tutor-registration-wrap code {
    font-size: 12px;
}

/*
 * Two fields per row instead of one long single-file column.
 *
 * Tutor's own registration.php puts its built-in fields (First Name,
 * Last Name, User Name, E-Mail, Password, Password confirmation) as
 * flat siblings directly inside #tutor-registration-form, then wraps
 * this plugin's own fields (from PTRF_Registration::render_fields())
 * one level deeper, inside a `.tutor-form-row > .tutor-form-col-12 >
 * .tutor-form-group` container it adds around the
 * tutor_student_reg_form_middle hook. Both groups get their own grid
 * below - two separate grids because they're two separate DOM levels,
 * not because they're styled differently.
 *
 * For Tutor's own fields: turning the form itself into a 2-column
 * grid naturally pairs consecutive fields (First+Last, Username+
 * Email, Password+Confirmation) without needing to name each one -
 * anything that ISN'T a short `.tutor-form-group`/
 * `.tutor-password-strength-checker` field (the validation alert, the
 * form-row wrapping this plugin's fields, the terms/consent row, the
 * submit button) is forced to span the full row instead, which also
 * fails safe if a future Tutor version adds another full-width block
 * here under a class name we don't recognize yet.
 */
#tutor-registration-wrap #tutor-registration-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    align-items: start;
}

#tutor-registration-wrap #tutor-registration-form > *:not(.tutor-form-group):not(.tutor-password-strength-checker) {
    grid-column: 1 / -1;
}

/*
 * This plugin's own fields: same idea, one level deeper - but a
 * 6-column grid rather than a plain 2-column one, so a per-field
 * "Width" choice (PTRF_Fields::widths(), rendered as each field's own
 * data-ptrf-width attribute) can mix half/third/full-width fields in
 * the same flowing layout: half spans 3 of 6 columns (two per row),
 * third spans 2 of 6 (three per row), full spans all 6. Grid's default
 * (non-"dense") auto-placement wraps a field that doesn't fit in the
 * remaining space of its row to the next row without ever reordering
 * fields out of the admin's own configured order, which is why
 * grid-auto-flow is deliberately left at its default rather than set
 * to `dense`.
 */
#tutor-registration-wrap .tutor-form-row > .tutor-form-col-12 > .tutor-form-group {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 16px;
    align-items: start;
}

#tutor-registration-wrap .ptrf-field[data-ptrf-width="half"] {
    grid-column: span 3;
}

#tutor-registration-wrap .ptrf-field[data-ptrf-width="third"] {
    grid-column: span 2;
}

#tutor-registration-wrap .ptrf-field[data-ptrf-width="full"] {
    grid-column: span 6;
}

/*
 * A radio-buttons or checkbox-group field renders one row per option -
 * this just tidies the vertical rhythm between them, same spacing
 * idea as Tutor's own .tutor-input-field/.tutor-mb-4 utility classes
 * already applied inline by PTRF_Registration's own renderer.
 */
#tutor-registration-wrap .ptrf-field[data-ptrf-type="radio"] .tutor-input-wrapper,
#tutor-registration-wrap .ptrf-field[data-ptrf-type="checkbox_group"] .tutor-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * "Layout" (PTRF_Fields::save()'s own 'layout' property, Radio
 * buttons/Multiple choice only) - vertical (the default, one option
 * per line) needs no extra rule at all, since that's already the
 * natural block-stacked result of .ptrf-choice-list's own children
 * being plain <div>s (see render_radio()/render_checkbox_group()).
 * Horizontal instead lays every option out in a wrapping row.
 */
#tutor-registration-wrap .ptrf-field[data-ptrf-layout="horizontal"] .ptrf-choice-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 4px;
}

#tutor-registration-wrap .ptrf-field[data-ptrf-layout="horizontal"] .ptrf-choice-list .tutor-input-field {
    margin-bottom: 0;
}

/*
 * A divider is a heading, not a field - it should never look like it
 * has its own input box, and its heading shouldn't butt right up
 * against the field above it.
 */
#tutor-registration-wrap .ptrf-field[data-ptrf-type="divider"] {
    border-top: 1px solid var(--ptrf-border);
    padding-top: 16px;
}

/*
 * Anything else that ends up in this same wrapper isn't rendered by
 * this plugin at all. Tutor fires BOTH tutor_student_reg_form_middle
 * (where this plugin's fields render, see the docblock above) AND
 * register_form (WordPress core's own hook - Cloudflare Turnstile
 * integrations and passwordless/passkey login plugins commonly use
 * this one) inside the exact same wrapper div, one right after the
 * other. Previously only Turnstile's specific markup was exempted
 * from the two-column pairing above, which meant a SECOND unrelated
 * integration (a "Register with password / Or" passkey prompt, seen
 * live) got sucked into pairing with this plugin's own last field
 * instead of being left alone - confirmed live, not assumed.
 *
 * The general, correct rule: pairing should only ever apply to this
 * plugin's OWN fields (.ptrf-field) - literally anything else in this
 * wrapper, from any hook callback, present or future, known or
 * unknown, defaults to full width instead of being forced into a
 * grid cell it was never designed for. This replaces needing to
 * chase down and specifically exempt every third-party integration
 * one at a time.
 */
#tutor-registration-wrap .tutor-form-row > .tutor-form-col-12 > .tutor-form-group > *:not(.ptrf-field) {
    grid-column: 1 / -1;
}

/*
 * Cloudflare Turnstile specifically still gets its own rule on top of
 * the general one above: its widget markup can't be targeted directly
 * (confirmed live, it's an <iframe id="cf-chl-widget-RANDOM"> inside a
 * CLOSED shadow root, with its visible host div's layout coming from a
 * per-render random id like #dbrMC3 via a dynamically injected <style>
 * block - neither the shadow root's contents nor a random id are
 * reachable from an external stylesheet, by design), but its stable
 * hidden result field (name="cf-turnstile-response" - the name the
 * server-side validation actually reads, so it can't be randomized)
 * lets :has() find its light-DOM wrapper to left-align it nicely,
 * rather than just leaving it as a bare full-width block.
 */
#tutor-registration-wrap .cf-turnstile,
#tutor-registration-wrap .tutor-form-row > .tutor-form-col-12 > .tutor-form-group > *:has(input[name="cf-turnstile-response"]) {
    display: flex;
    justify-content: flex-start;
    margin: 4px 0 0;
}

/*
 * A WebAuthn passwordless-login button and its "Or" divider - from a
 * SEPARATE plugin (iThemes/Solid Security: itsec-* id prefix,
 * confirmed via the site owner's own DevTools inspection), also
 * hooked onto register_form alongside Turnstile. Not part of Tutor
 * LMS or this plugin. The button ships `disabled` in its own markup
 * and isn't currently functional on this site, so hidden here at the
 * site owner's explicit request - Turnstile itself is deliberately
 * left alone above, since it's a separate concern (its own known,
 * separately-tracked connectivity issue) from this non-functional
 * WebAuthn option.
 */
#tutor-registration-wrap #itsec-webauthn-register__submit,
#tutor-registration-wrap #itsec-pwls-login-fallback_or {
    display: none !important;
}

/*
 * Number-type fields: something outside this stylesheet - most likely
 * Tutor's own bundled CSS, which isn't available to inspect locally
 * since it's a compiled build artifact, not present in Tutor's own
 * GitHub source - appears to suppress the browser's native up/down
 * spinner arrows on <input type="number">. Forced back on here,
 * !important because whatever rule is doing the hiding may well beat
 * a plain descendant selector otherwise.
 */
#tutor-registration-wrap input[type="number"] {
    -moz-appearance: auto !important;
}

#tutor-registration-wrap input[type="number"]::-webkit-inner-spin-button,
#tutor-registration-wrap input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: auto !important;
    opacity: 1 !important;
    margin-left: 8px;
}

/*
 * .ptrf-dropzone / .ptrf-consent-modal / .ptrf-phone-field - deliberately
 * NOT scoped under #tutor-registration-wrap like every rule above this
 * point, unlike the rest of this file. These three are shared, unmodified,
 * with the student dashboard's own "My Information" tab (see that
 * template's own docblock for why it doesn't use #tutor-registration-wrap
 * scoping at all), so their rules need to reach both pages - safe to
 * leave unscoped since the class names themselves are specific enough
 * to this plugin's own markup, same reasoning as assets/datepicker.css.
 */
.ptrf-dropzone {
    position: relative;
}

.ptrf-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ptrf-dropzone-input:disabled {
    cursor: not-allowed;
}

.ptrf-dropzone-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 24px 16px;
    border: 2px dashed var(--ptrf-border, #e2e4e9);
    border-radius: 10px;
    background: #fafafa;
    color: var(--ptrf-muted, #6b7280);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ptrf-dropzone-icon {
    color: var(--ptrf-muted, #6b7280);
}

.ptrf-dropzone-text {
    font-size: 13.5px;
}

.ptrf-dropzone-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--ptrf-text, #1a1d23);
}

.ptrf-dropzone:hover .ptrf-dropzone-label,
.ptrf-dropzone.is-dragover .ptrf-dropzone-label {
    border-color: var(--ptrf-accent, #2563eb);
    background: #f5f8ff;
}

.ptrf-dropzone-input:disabled + .ptrf-dropzone-label {
    cursor: not-allowed;
    opacity: 0.6;
}

/*
 * The GDPR/consent "Read more" trigger and its modal - see
 * PTRF_Registration::consent_modal_trigger().
 */
.ptrf-consent-link {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    color: var(--ptrf-accent, #2563eb);
    font-weight: 600;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.ptrf-consent-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    /* [hidden] is how this element stays closed by default (assets/
     * consent-modal.js only ever toggles the `hidden` IDL attribute) -
     * this must stay display:none until that's explicitly lifted below,
     * not the other way around. */
    display: none;
    padding: 20px;
}

.ptrf-consent-modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ptrf-consent-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.5);
}

.ptrf-consent-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.2);
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 32px 24px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ptrf-consent-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
}

.ptrf-consent-modal-close:hover {
    background: #f3f4f6;
}

.ptrf-consent-modal-body {
    font-size: 14px;
    line-height: 1.6;
    color: #1a1d23;
}

body.ptrf-modal-open {
    overflow: hidden;
}

/*
 * Phone country-code select, sitting before the actual number input -
 * see assets/phone-widget.js.
 */
.ptrf-phone-field {
    display: flex;
    gap: 8px;
}

.ptrf-phone-field .ptrf-phone-code {
    /* This <select> deliberately isn't marked up with .tutor-form-
     * control/.tutor-input (see PTRF_Registration::render_text_like())
     * since it's this plugin's own addition, not one of Tutor's own
     * field classes - so it needs its own copy of that same look here,
     * or it falls back to the browser's bare native <select> styling
     * (different border/height/text color than everything beside it -
     * confirmed, not just theorized, from how it actually looked). */
    flex: 0 0 auto;
    width: auto;
    max-width: 160px;
    padding: 12px 10px;
    font-size: 15px;
    line-height: 1.5;
    font-family: inherit;
    border: 1px solid var(--ptrf-border);
    border-radius: 8px;
    background: #fafafa;
    color: var(--ptrf-text);
    box-sizing: border-box;
}

.ptrf-phone-field .ptrf-phone-code:hover {
    border-color: #c7cad1;
}

.ptrf-phone-field .ptrf-phone-code:focus {
    outline: none;
    background: #fff;
    border-color: var(--ptrf-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ptrf-phone-field .ptrf-phone-number {
    flex: 1 1 auto;
}

@media (max-width: 560px) {
    #tutor-registration-wrap {
        padding: 28px 20px;
        border-radius: 10px;
    }

    #tutor-registration-wrap #tutor-registration-form,
    #tutor-registration-wrap .tutor-form-row > .tutor-form-col-12 > .tutor-form-group {
        grid-template-columns: 1fr;
    }
}