/**
 * Enhanced Skin for Universal Member Form
 * Modern, clean design for frontend registration forms
 * Responsive card-based layout with smooth interactions
 */

/* Import existing enhanced form CSS */
@import url('../../../assets/css/form-enhanced.css');

/* ==================================================
   CSS VARIABLES - centralize tuning for the enhanced skin
   ================================================== */
:root,
body.umm-registration-page {
    /* Layout widths */
    --umm-form-min-width: 340px;
    --umm-form-pref: 48vw;
    --umm-form-max-width: 880px;
    --umm-modal-min-width: 360px;
    --umm-modal-pref: 44vw;
    --umm-modal-max-width: 760px;
    --umm-inline-min-width: 420px;
    --umm-inline-pref: 52vw;
    --umm-inline-max-width: 960px;

    /* Typography — matches WordPress admin font stack for visual consistency */
    --umm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --umm-font-size-title: 28px;
    --umm-font-size-title-mobile: 24px;
    --umm-font-size-base: 15px;

    /* Colors */
    --umm-bg: #f8f9fa;
    --umm-surface: #ffffff;
    --umm-text: #1a1a1a;
    --umm-muted: #666666;
    --umm-border: #dee2e6;
    --umm-primary: #0073aa;
    --umm-primary-2: #005a87;
    --umm-primary-rgb: 0, 115, 170;
    /* used for focus shadows */
    --umm-error: #dc3545;
    --umm-success: #28a745;

    /* Buttons & UI */
    --umm-btn-radius: 8px;
    --umm-btn-padding-y: 12px;
    --umm-btn-padding-x: 24px;
    --umm-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --umm-shadow-soft: 0 4px 12px rgba(0, 115, 170, 0.12);

    /* Spinner */
    --umm-spinner-size: 16px;
    --umm-spinner-bg: rgba(255, 255, 255, 0.3);
    --umm-spinner-top-color: #ffffff;

    /* Spacing */
    --umm-form-gap: 20px;
}

/* Base form styling */
.umm-form.umm-skin-enhanced {
    font-family: var(--umm-font-family);
    line-height: 1.6;
    color: var(--umm-text);
    font-size: var(--umm-font-size-base);
}

/* Ensure all text inside the enhanced registration form uses the same font-family
   This enforces consistency for nested elements that might otherwise inherit theme fonts */
.umm-form.umm-skin-enhanced,
.umm-form.umm-skin-enhanced *,
body.umm-registration-page,
body.umm-registration-page * {
    font-family: var(--umm-font-family) !important;
}

/* ====================================
   PAGE LAYOUT CUSTOMIZATION
   ==================================== */

/* Frontend registration page wrapper */
html.umm-registration-page,
body.umm-registration-page {
    overflow-x: hidden;
}

body.umm-registration-page {
    background: #f8f9fa;
    color: #333;
    line-height: 1.6;
}

/* Remove default theme margins and padding */
body.umm-registration-page .wp-site-blocks,
body.umm-registration-page main,
body.umm-registration-page article,
body.umm-registration-page .site-main {
    margin: 0;
    padding: 0;
}

/* Frontend registration wrapper */
#umm-registration-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: #f8f9fa;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Registration content container */
.umm-registration-content {
    width: 100%;
    /* Relative width using variables for easy tuning */
    max-width: clamp(var(--umm-form-min-width), var(--umm-form-pref), var(--umm-form-max-width));
    box-sizing: border-box;
    padding: 8px;
    /* small breathing room on large viewports */
}

/* Hide unnecessary theme elements on registration page */
body.umm-registration-page .site-header,
body.umm-registration-page header,
body.umm-registration-page .wp-custom-header,
body.umm-registration-page nav,
body.umm-registration-page .navbar,
body.umm-registration-page .menu,
body.umm-registration-page footer,
body.umm-registration-page .site-footer,
body.umm-registration-page .wp-footer,
body.umm-registration-page .sidebar,
body.umm-registration-page aside,
body.umm-registration-page .widget-area {
    display: none !important;
}

/* Ensure full-width registration area */
body.umm-registration-page {
    margin: 0;
    padding: 0;
}

body.umm-registration-page .container,
body.umm-registration-page .container-fluid,
body.umm-registration-page .content,
body.umm-registration-page .content-area,
body.umm-registration-page .site-content {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Container adjustments for different display modes */
.umm-form.umm-skin-enhanced[data-display="modal"] {
    /* Modal dialog uses relative sizing so it scales nicely on large screens */
    max-width: clamp(var(--umm-modal-min-width), var(--umm-modal-pref), var(--umm-modal-max-width));
    margin: 0 auto;
    background: var(--umm-surface);
    border-radius: var(--umm-btn-radius);
    box-shadow: var(--umm-shadow);
    padding: 32px 24px 24px;
    box-sizing: border-box;
}

.umm-form.umm-skin-enhanced[data-display="inline"] {
    /* Inline form inside page — allow wider layout but constrained */
    max-width: clamp(var(--umm-inline-min-width), var(--umm-inline-pref), var(--umm-inline-max-width));
    background: var(--umm-surface);
    border-radius: var(--umm-btn-radius);
    box-shadow: var(--umm-shadow);
    padding: 32px 24px 24px;
    box-sizing: border-box;
}

/* Form header styling */
.umm-form.umm-skin-enhanced .umm-form-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 0;
    border-bottom: none;
}

.umm-form.umm-skin-enhanced .umm-form-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
    line-height: 1.2;
}

.umm-form.umm-skin-enhanced .umm-form-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Form actions (button container) */
.umm-form.umm-skin-enhanced .umm-form-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #e9ecef;
}

/* Button base styling */
.umm-form.umm-skin-enhanced .umm-btn {
    padding: var(--umm-btn-padding-y) var(--umm-btn-padding-x);
    border: none;
    border-radius: var(--umm-btn-radius);
    cursor: pointer;
    font-size: var(--umm-font-size-base);
    font-family: inherit;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 130px;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 1.2;
}

.umm-form.umm-skin-enhanced .umm-btn:active {
    transform: scale(0.98);
}

/* Primary button (Submit) */
.umm-form.umm-skin-enhanced .umm-btn-primary {
    background: linear-gradient(135deg, var(--umm-primary) 0%, var(--umm-primary-2) 100%);
    color: #fff;
    box-shadow: var(--umm-shadow-soft);
}

.umm-form.umm-skin-enhanced .umm-btn-primary:hover {
    filter: brightness(0.95);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(var(--umm-primary-rgb), 0.18);
    transform: translateY(-2px);
}

.umm-form.umm-skin-enhanced .umm-btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--umm-primary-rgb), 0.12), 0 4px 12px rgba(var(--umm-primary-rgb), 0.12);
}

.umm-form.umm-skin-enhanced .umm-btn-primary:disabled,
.umm-form.umm-skin-enhanced .umm-btn-primary.loading {
    background: #cccccc;
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary button (Cancel) */
.umm-form.umm-skin-enhanced .umm-btn-secondary {
    background: #f5f6f7;
    color: #495057;
    border: 1px solid var(--umm-border);
}

.umm-form.umm-skin-enhanced .umm-btn-secondary:hover {
    background: #e9ecef;
    color: #212529;
    border-color: #adb5bd;
    text-decoration: none;
}

.umm-form.umm-skin-enhanced .umm-btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.06), 0 0 0 1px var(--umm-border);
    border-color: #adb5bd;
}

/* Submit button specific */
.umm-form.umm-skin-enhanced .umm-submit-btn {
    flex: 1;
    min-width: 180px;
}

/* Cancel button specific */
.umm-form.umm-skin-enhanced .umm-cancel-btn {
    flex: 0 1 auto;
    min-width: 130px;
}

/* Loading states */

.umm-form.umm-skin-enhanced .loading-spinner {
    display: none;
}

.umm-form.umm-skin-enhanced .umm-btn.loading {
    pointer-events: none;
}

.umm-form.umm-skin-enhanced .umm-submit-btn.loading .button-text,
.umm-form.umm-skin-enhanced .umm-cancel-btn.loading .button-text {
    display: none;
}

.umm-form.umm-skin-enhanced .umm-submit-btn.loading .loading-spinner,
.umm-form.umm-skin-enhanced .umm-cancel-btn.loading .loading-spinner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.umm-form.umm-skin-enhanced .spinner {
    width: var(--umm-spinner-size);
    height: var(--umm-spinner-size);
    border: 2px solid var(--umm-spinner-bg);
    border-top: 2px solid var(--umm-spinner-top-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Form field adjustments */
.umm-form.umm-skin-enhanced .umm-payroll-details {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
}

.umm-form.umm-skin-enhanced .umm-payroll-details.hidden {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
}

/* Responsive design for mobile devices */
@media (max-width: 600px) {

    /* Page layout adjustments */
    body.umm-registration-page {
        background: #f8f9fa;
    }

    #umm-registration-wrapper {
        padding: 10px;
        min-height: calc(100vh - 20px);
    }

    .umm-registration-content {
        max-width: 100%;
    }

    /* Form adjustments */
    .umm-form.umm-skin-enhanced[data-display="modal"],
    .umm-form.umm-skin-enhanced[data-display="inline"] {
        padding: 24px 16px 16px;
        border-radius: 8px;
    }

    .umm-form.umm-skin-enhanced .umm-form-title {
        font-size: 24px;
    }

    .umm-form.umm-skin-enhanced .umm-form-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .umm-form.umm-skin-enhanced .umm-submit-btn,
    .umm-form.umm-skin-enhanced .umm-cancel-btn {
        flex: 1 1 0%;
        min-width: 0;
        width: auto;
    }
}

/* ====================================
   FORM LAYOUT & STRUCTURE
   ==================================== */

/* Form field layout */
.umm-form.umm-skin-enhanced input.error,
.umm-form.umm-skin-enhanced select.error,
.umm-form.umm-skin-enhanced textarea.error {
    border-color: var(--umm-error);
    background-color: #fff5f5;
}

.umm-form.umm-skin-enhanced input.error:focus,
.umm-form.umm-skin-enhanced select.error:focus,
.umm-form.umm-skin-enhanced textarea.error:focus {
    border-color: var(--umm-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Success states */
.umm-form.umm-skin-enhanced input.success,
.umm-form.umm-skin-enhanced select.success,
.umm-form.umm-skin-enhanced textarea.success {
    border-color: var(--umm-success);
    background-color: #f5fff5;
}

.umm-form.umm-skin-enhanced .success-message {
    display: block;
    color: var(--umm-success);
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

/* Inputs, selects, textareas - base styling */
.umm-form.umm-skin-enhanced input[type="text"],
.umm-form.umm-skin-enhanced input[type="email"],
.umm-form.umm-skin-enhanced input[type="password"],
.umm-form.umm-skin-enhanced input[type="number"],
.umm-form.umm-skin-enhanced input[type="tel"],
.umm-form.umm-skin-enhanced input[type="date"],
.umm-form.umm-skin-enhanced select,
.umm-form.umm-skin-enhanced textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--umm-border);
    border-radius: 6px;
    font-size: var(--umm-font-size-base);
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    background: var(--umm-surface);
    color: var(--umm-text);
}

.umm-form.umm-skin-enhanced input[type="text"]:focus,
.umm-form.umm-skin-enhanced input[type="email"]:focus,
.umm-form.umm-skin-enhanced input[type="password"]:focus,
.umm-form.umm-skin-enhanced input[type="number"]:focus,
.umm-form.umm-skin-enhanced input[type="tel"]:focus,
.umm-form.umm-skin-enhanced input[type="date"]:focus,
.umm-form.umm-skin-enhanced select:focus,
.umm-form.umm-skin-enhanced textarea:focus {
    border-color: var(--umm-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--umm-primary-rgb), 0.08);
}

.umm-form.umm-skin-enhanced input:disabled,
.umm-form.umm-skin-enhanced select:disabled,
.umm-form.umm-skin-enhanced textarea:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
}

/* Textarea styling */
.umm-form.umm-skin-enhanced textarea {
    resize: vertical;
    min-height: 100px;
}

/* Select styling */
.umm-form.umm-skin-enhanced select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23343a40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px;
}

/* Radio and checkbox styling */
.umm-form.umm-skin-enhanced input[type="radio"],
.umm-form.umm-skin-enhanced input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    cursor: pointer;
    accent-color: #0073aa;
    vertical-align: middle;
}

.umm-form.umm-skin-enhanced .umm-form-check,
.umm-form.umm-skin-enhanced .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.umm-form.umm-skin-enhanced .umm-form-check label,
.umm-form.umm-skin-enhanced .form-check label {
    margin-bottom: 0;
    margin-left: 6px;
    cursor: pointer;
    font-weight: 400;
    user-select: none;
}

/* GDPR and consent checkbox labels - always visible */
.umm-form.umm-skin-enhanced .umm-checkbox-group .checkbox-label {
    display: block !important;
    margin-bottom: 0;
    margin-left: 6px;
    cursor: pointer;
    font-weight: 400;
    user-select: none;
    color: var(--umm-text);
    font-size: var(--umm-font-size-base);
    line-height: 1.5;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure checkbox group is always visible */
.umm-form.umm-skin-enhanced .umm-checkbox-group {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Toggle Switch Styling for GDPR and Communication Consent */
.umm-form.umm-skin-enhanced .umm-switch-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.umm-form.umm-skin-enhanced .umm-switch {
    position: relative !important;
    display: inline-block !important;
    width: 60px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
}

.umm-form.umm-skin-enhanced .umm-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

.umm-form.umm-skin-enhanced .umm-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #ccc !important;
    transition: 0.4s !important;
    display: block !important;
}

.umm-form.umm-skin-enhanced .umm-slider::before {
    position: absolute !important;
    content: "" !important;
    height: 26px !important;
    width: 26px !important;
    left: 4px !important;
    bottom: 4px !important;
    background-color: white !important;
    transition: 0.4s !important;
    display: block !important;
}

.umm-form.umm-skin-enhanced .umm-switch input:checked+.umm-slider {
    background-color: var(--umm-primary) !important;
}

.umm-form.umm-skin-enhanced .umm-switch input:focus+.umm-slider {
    box-shadow: 0 0 1px var(--umm-primary) !important;
}

.umm-form.umm-skin-enhanced .umm-switch input:checked+.umm-slider::before {
    transform: translateX(26px) !important;
}

.umm-form.umm-skin-enhanced .umm-slider.umm-round {
    border-radius: 34px !important;
}

.umm-form.umm-skin-enhanced .umm-slider.umm-round::before {
    border-radius: 50% !important;
}

.umm-form.umm-skin-enhanced .umm-switch-label {
    flex: 1 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    user-select: none !important;
    color: var(--umm-text) !important;
    font-family: var(--umm-font-family) !important;
    font-size: var(--umm-font-size-base) !important;
    line-height: 1.5 !important;
    display: block !important;
    visibility: visible !important;
}

.umm-form.umm-skin-enhanced .umm-switch-label .required {
    color: var(--umm-error) !important;
    margin-left: 4px !important;
}

/* Da/Nu switch text labels */
.umm-form.umm-skin-enhanced .umm-switch-text {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 8px !important;
    color: white !important;
    font-family: var(--umm-font-family) !important;
    font-size: 12px !important;
    font-weight: bold !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.umm-form.umm-skin-enhanced input:checked~.umm-switch-text {
    right: auto !important;
    left: 8px !important;
}

.umm-form.umm-skin-enhanced .umm-switch-text::after {
    content: attr(data-off) !important;
}

.umm-form.umm-skin-enhanced input:checked~.umm-switch-text::after {
    content: attr(data-on) !important;
}

/* Adhesion declaration text - keep on single line */
.umm-form.umm-skin-enhanced .umm-adhesion-declaration {
    line-height: 1.6;
}

.umm-form.umm-skin-enhanced .umm-adhesion-declaration strong {
    font-weight: 600;
    color: #2c3e50;
    display: inline;
    white-space: normal;
}

.umm-form.umm-skin-enhanced .umm-adhesion-declaration ul {
    display: block !important;
    margin: 10px 0 !important;
    padding-left: 20px !important;
    list-style-type: disc !important;
}

.umm-form.umm-skin-enhanced .umm-adhesion-declaration ul li {
    display: list-item !important;
    margin: 8px 0 !important;
    line-height: 1.5;
}

/* Error states */
.umm-form.umm-skin-enhanced input.error,
.umm-form.umm-skin-enhanced select.error,
.umm-form.umm-skin-enhanced textarea.error,
.umm-form.umm-skin-enhanced input.umm-input-invalid,
.umm-form.umm-skin-enhanced select.umm-input-invalid,
.umm-form.umm-skin-enhanced textarea.umm-input-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.umm-form.umm-skin-enhanced input.error:focus,
.umm-form.umm-skin-enhanced select.error:focus,
.umm-form.umm-skin-enhanced textarea.error:focus,
.umm-form.umm-skin-enhanced input.umm-input-invalid:focus,
.umm-form.umm-skin-enhanced select.umm-input-invalid:focus,
.umm-form.umm-skin-enhanced textarea.umm-input-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Error message container (inserted by JS). Hidden by default; shown when JS adds validation classes. */
.umm-form.umm-skin-enhanced .umm-field-error {
    display: none;
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

/* When DOM utils add the invalid classes, reveal the injected error node */
.umm-form.umm-skin-enhanced .umm-form-group.umm-field-invalid .umm-field-error,
.umm-form.umm-skin-enhanced .umm-field-invalid .umm-field-error,
.umm-form.umm-skin-enhanced .umm-form-group.umm-input-invalid .umm-field-error {
    display: block;
}

/* Success states */
.umm-form.umm-skin-enhanced input.success,
.umm-form.umm-skin-enhanced select.success,
.umm-form.umm-skin-enhanced textarea.success {
    border-color: #28a745;
    background-color: #f5fff5;
}

.umm-form.umm-skin-enhanced .success-message {
    display: block;
    color: #28a745;
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

/* Ensure employer autocomplete dropdowns (including portalled variants)
   use the enhanced skin typography when the enhanced registration page is active.
   This compensates for the dropdown being rendered at body-level and ensures
   a consistent font and slightly reduced size for suggestions. */
body.umm-registration-page .umm-form.umm-skin-enhanced .umm-employer-suggestions,
body.umm-registration-page .umm-form.umm-skin-enhanced .umm-employer-suggestions-portal,
body.umm-registration-page .umm-employer-suggestions-portal,
body.umm-registration-page .umm-form.umm-skin-enhanced .umm-employer-suggestion,
body.umm-registration-page .umm-employer-suggestion {
    font-family: var(--umm-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: calc(var(--umm-font-size-base) * 0.8) !important;
    line-height: 1.4 !important;
}

body.umm-registration-page .umm-form.umm-skin-enhanced .umm-employer-suggestion .umm-employer-details,
body.umm-registration-page .umm-employer-suggestions-portal .umm-employer-suggestion .umm-employer-details,
body.umm-registration-page .umm-employer-suggestion .umm-employer-details {
    font-size: calc(var(--umm-font-size-base) * 0.7) !important;
}