/**
 * Modern Profile Edit Page Styles
 * 
 * Styles for the account profile edit form including:
 * - "Edit your Account" section
 * - "Social Media & Payment Information" section
 * - Modern form inputs and styling
 * 
 * @package Ethos
 */

/* ==========================================================================
   Profile Edit Container
   ========================================================================== */

.ihc-ap-wrap {
    /* max-width: 1400px; */
    margin: 0 auto;
    padding: 40px 100px 40px 100px; /* Increased left/right padding */
    /* max-width: 1600px; Optional: limit max width for better readability */
}

.iump-user-page-wrapper {
    padding: 0;
}

.iump-user-page-box {
    background: transparent;
    padding: 0;
}

/* ==========================================================================
   Profile Grid Layout (Side by Side)
   ========================================================================== */

.ethos-profile-grid-container {
    display: flex !important;
    flex-direction: row !important; /* Side by side by default */
    flex-wrap: wrap !important; /* Allow wrapping for social media form below */
    gap: 30px !important;
    align-items: stretch !important; /* Stretch items to match heights */
    margin-top: 20px;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* CRITICAL OVERRIDE: When both Personal Details AND Change Password forms are present, ALWAYS use row */
.ethos-profile-grid-container .iump-user-page-wrapper + .iump-register-form.ethos-change-password-form,
.ethos-profile-grid-container .iump-user-page-wrapper + .ethos-change-password-form,
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.ethos-change-password-form),
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.iump-register-form.ethos-change-password-form) {
    /* Parent container should be row */
}

.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.ethos-change-password-form),
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.iump-register-form.ethos-change-password-form) {
    flex-direction: row !important; /* Force row - highest specificity */
    flex-wrap: nowrap !important;
}

/* Ensure both flex items are equal width - override any plugin styles */
.ethos-profile-grid-container > * {
    min-width: 0 !important; /* Prevent overflow */
    flex: 0 0 calc(50% - 15px) !important; /* Exactly 50% minus half the gap */
    max-width: calc(50% - 15px) !important;
    width: calc(50% - 15px) !important;
    box-sizing: border-box !important;
}

/* When social media form is hidden (brand users), make form take full width */
body.user-role-contributor .ethos-profile-grid-container,
.user-role-contributor .ethos-profile-grid-container {
    flex-direction: column !important; /* Stack vertically */
}

body.user-role-contributor .ethos-profile-grid-container > *,
.user-role-contributor .ethos-profile-grid-container > * {
    flex: 1 1 100% !important; /* Full width when stacked */
}

/* Also handle when form is hidden via display:none - but ONLY if metadata fields, not password form */
.ethos-profile-grid-container:has(.ethos-metadata-fields[style*="display: none"]):not(:has(.iump-register-form.ethos-change-password-form)):not(:has(.ethos-change-password-form)),
.ethos-profile-grid-container:has(.ethos-metadata-fields[style*="display:none"]):not(:has(.iump-register-form.ethos-change-password-form)):not(:has(.ethos-change-password-form)),
.ethos-profile-grid-container:has(.ethos-metadata-fields.hidden):not(:has(.iump-register-form.ethos-change-password-form)):not(:has(.ethos-change-password-form)) {
    flex-direction: column !important; /* Stack vertically */
}

.ethos-profile-grid-container:has(.ethos-metadata-fields[style*="display: none"]):not(:has(.iump-register-form.ethos-change-password-form)):not(:has(.ethos-change-password-form)) > *,
.ethos-profile-grid-container:has(.ethos-metadata-fields[style*="display:none"]):not(:has(.iump-register-form.ethos-change-password-form)):not(:has(.ethos-change-password-form)) > *,
.ethos-profile-grid-container:has(.ethos-metadata-fields.hidden):not(:has(.iump-register-form.ethos-change-password-form)):not(:has(.ethos-change-password-form)) > * {
    flex: 1 1 100% !important; /* Full width when stacked */
}

/* CRITICAL: Ensure container with both Personal Details AND Change Password stays side-by-side */
/* This must come AFTER all other flex-direction rules to override them */
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.iump-register-form.ethos-change-password-form),
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.ethos-change-password-form),
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.iump-register-form:has(input[name="current_pass"], input[name="old_pass"], input[name="new_pass1"], input[name="pass1"])),
.ihc-ap-wrap .ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.ethos-change-password-form) {
    flex-direction: row !important; /* Force side-by-side - HIGHEST PRIORITY */
    flex-wrap: wrap !important; /* Allow wrapping so social media form can be below */
    display: flex !important;
}

/* Default: forms are side by side with flex-direction: row */
/* Only stack vertically when explicitly needed (single form, or brand user, or metadata hidden) */

/* Make the main form wrapper a flex item - FORCE EQUAL WIDTH */
.ethos-profile-grid-container > .iump-user-page-wrapper {
    flex: 0 0 calc(50% - 15px) !important; /* Exactly 50% minus half the gap - no grow/shrink */
    min-width: 0 !important; /* Prevent overflow */
    max-width: calc(50% - 15px) !important; /* Cap at 50% minus gap */
    width: calc(50% - 15px) !important; /* Explicit width */
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent content overflow */
    order: 1 !important; /* First item - Personal Details */
}

/* Ensure inner Personal Details form elements take full width */
.ethos-profile-grid-container > .iump-user-page-wrapper > *,
.ethos-profile-grid-container > .iump-user-page-wrapper .iump-user-page-box,
.ethos-profile-grid-container > .iump-user-page-wrapper .iump-register-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure Personal Details form wrapper has same styling as Change Password form */
.ethos-profile-grid-container > .iump-user-page-wrapper .iump-register-form {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%) !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* When social media form is hidden, make form wrapper span full width */
body.user-role-contributor .ethos-profile-grid-container > .iump-user-page-wrapper,
.user-role-contributor .ethos-profile-grid-container > .iump-user-page-wrapper,
.ethos-profile-grid-container:has(.ethos-metadata-fields[style*="display: none"]) > .iump-user-page-wrapper,
.ethos-profile-grid-container:has(.ethos-metadata-fields[style*="display:none"]) > .iump-user-page-wrapper {
    flex: 1 1 100% !important; /* Full width */
    max-width: 100% !important;
}

/* When NOT in grid container (brand users), ensure form takes full width */
body.user-role-contributor .ihc-ap-wrap > .iump-user-page-wrapper,
body.user-role-contributor .ihc-ap-wrap .iump-user-page-box,
body.user-role-contributor .ihc-ap-wrap .iump-register-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make user page box stretch */
.ethos-profile-grid-container .iump-user-page-box {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

/* Make metadata fields a flex item - full width below Personal Details and Change Password */
.ethos-profile-grid-container > .ethos-metadata-fields {
    flex: 1 1 100% !important; /* Full width - wraps to new line */
    min-width: 0 !important; /* Prevent overflow */
    max-width: 100% !important; /* Full width */
    width: 100% !important; /* Explicit full width */
    display: flex !important;
    flex-direction: column !important;
    margin-top: 30px !important; /* Add gap above when below other forms */
    box-sizing: border-box !important;
    order: 3 !important; /* Ensure it appears after Personal Details and Change Password */
}

/* Make Change Password form a flex item - FORCE EQUAL WIDTH */
.ethos-profile-grid-container > .iump-register-form.ethos-change-password-form,
.ethos-profile-grid-container > .ethos-change-password-form {
    flex: 0 0 calc(50% - 15px) !important; /* Exactly 50% minus half the gap - no grow/shrink */
    min-width: 0 !important; /* Prevent overflow */
    max-width: calc(50% - 15px) !important; /* Cap at 50% minus gap */
    width: calc(50% - 15px) !important; /* Explicit width */
    display: flex !important;
    flex-direction: column !important;
    margin-top: 0 !important; /* No top margin when side by side */
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent content overflow */
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%) !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    order: 2 !important; /* Second item - Change Password */
}

/* Ensure forms inside grid have full width and height */
.ethos-profile-grid-container .iump-register-form {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Ensure Personal Details form wrapper and inner box take full width */
.ethos-profile-grid-container > .iump-user-page-wrapper .iump-user-page-box,
.ethos-profile-grid-container > .iump-user-page-wrapper .iump-register-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure social media form matches Personal Details form width exactly */
/* Note: Width is controlled by grid, not set to 100% */
.ethos-profile-grid-container > .ethos-metadata-fields {
    min-width: 0 !important; /* Prevent overflow */
}


/* ==========================================================================
   Avatar Field - Hide initially to prevent flash before JS moves it
   ========================================================================== */

/* Hide avatar field initially - will be shown after JS moves it to top */
.iump-register-form form .iump-form-line-register.iump-form-ihc_avatar:not(.ethos-avatar-moved),
.iump-register-form .iump-form-ihc_avatar:not(.ethos-avatar-moved) {
    display: none !important;
}

/* Show avatar after it's been moved to top */
.iump-register-form form .iump-form-line-register.iump-form-ihc_avatar.ethos-avatar-moved,
.iump-register-form .iump-form-ihc_avatar.ethos-avatar-moved {
    display: block !important;
}

/* Avatar container - white background with border matching other inputs */
.iump-register-form form .iump-form-line-register.iump-form-ihc_avatar.ethos-avatar-moved,
.iump-register-form .iump-form-ihc_avatar.ethos-avatar-moved,
.iump-form-line-register.iump-form-ihc_avatar {
    background-color: #fff !important;
    padding: 20px !important;
    border: 2px solid #eae9f3 !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure avatar wrapper is properly contained and aligned */
.iump-form-ihc_avatar .ihc-upload-image-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   Edit Your Account Section
   ========================================================================== */

.ihc-ap-wrap h3:not(.ethos-form-header) {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #181818 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #e9463b !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.5 !important;
}

/* Header when moved inside the form - match Social Media header styling */
.iump-register-form .ethos-form-header,
.iump-register-form h3.ethos-form-header,
.iump-user-page-box .iump-register-form h3.ethos-form-header,
.iump-user-page-wrapper .iump-register-form h3.ethos-form-header,
.ihc-ap-wrap .iump-user-page-wrapper .iump-user-page-box .iump-register-form h3.ethos-form-header {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #181818 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #e9463b !important;
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #e9463b !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.5 !important;
}

/* Hide original password change title - custom header will replace it */
/* This hides it immediately on page load to prevent flash before JavaScript runs */
.iump-user-page-box-title {
    display: none !important;
}

/* Paragraph styling - match header styles */
.ihc-ap-wrap p:not(.ethos-field-help-text),
.ihc-ap-theme-3 .ihc-ap-wrap p:not(.ethos-field-help-text),
.ihc-ap-wrap > p:not(.ethos-field-help-text),
.ihc-user-page-content-wrapper p:not(.ethos-field-help-text) {
    color: #181818 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
    font-family: 'Poppins', sans-serif !important;
}


/* Help text styling - smaller font size */
.ethos-field-help-text {
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ==========================================================================
   Form Container
   ========================================================================== */

.iump-register-form {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Make form stretch to fill container height */
.ethos-profile-grid-container .iump-register-form {
    height: 100%;
}

/* Push submit button to bottom of form */
.iump-register-form form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.iump-register-form .iump-submit-form {
    margin-top: auto;
    padding-top: 20px;
}

/* ==========================================================================
   Form Fields - General
   ========================================================================== */

.iump-form-line-register,
.iump-form-line {
    margin-bottom: 20px; /* Match social media form spacing */
}

/* Labels - match positioning and styling for both forms */
.iump-labels-register,
.iump-label,
.iump-register-form label,
.ethos-metadata-fields label,
.ethos-metadata-fields .iump-labels-register,
.ethos-metadata-fields .iump-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    text-align: left !important; /* Ensure labels are left-aligned */
    width: 100% !important;
}

/* Ensure labels are always visible for email and username fields */
.iump-form-line-register.iump-form-user_email label,
.iump-form-line-register.iump-form-user_login label,
.iump-form-line-register.iump-form-username label,
.iump-form-line-register[id*="user_email"] label,
.iump-form-line-register[id*="user_login"] label,
.iump-register-form label[for*="user_email"],
.iump-register-form label[for*="user_login"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Style required asterisk to match plugin styling */
.ihc-required-sign {
    color: #e9463b !important;
    font-weight: 700 !important;
}

/* Ensure both forms use identical border-radius - override any plugin styles */
/* Target all inputs with maximum specificity to ensure they match */
.iump-register-form input[type="text"],
.iump-register-form input[type="email"],
.iump-register-form input[type="password"],
.iump-register-form input[type="tel"],
.iump-register-form input[type="url"],
.iump-register-form input[type="number"],
.iump-register-form select,
.iump-register-form textarea,
.iump-register-form .ihc-form-control,
.ethos-metadata-fields input[type="text"],
.ethos-metadata-fields input[type="email"],
.ethos-metadata-fields input[type="password"],
.ethos-metadata-fields input[type="tel"],
.ethos-metadata-fields input[type="url"],
.ethos-metadata-fields input[type="number"],
.ethos-metadata-fields select,
.ethos-metadata-fields textarea,
.ethos-metadata-fields .ihc-form-control,
.iump-user-page-box input[type="text"],
.iump-user-page-box input[type="email"],
.iump-user-page-box input[type="password"],
.iump-user-page-box input[type="tel"],
.iump-user-page-box input[type="url"],
.iump-user-page-box select,
.iump-user-page-box textarea,
.iump-user-page-box .ihc-form-control {
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -o-border-radius: 4px !important;
    border-radius: 4px !important;
}

/* Input fields - apply to both main form and social media form with exact matching */
/* Exclude WordPress admin bar inputs */
.ihc-form-control:not(#wpadminbar .ihc-form-control):not(.adminbar-input),
input[type="text"]:not(#wpadminbar input):not(.adminbar-input),
input[type="email"]:not(#wpadminbar input):not(.adminbar-input),
input[type="password"]:not(#wpadminbar input):not(.adminbar-input),
input[type="tel"]:not(#wpadminbar input):not(.adminbar-input),
input[type="url"]:not(#wpadminbar input):not(.adminbar-input),
select:not(#wpadminbar select),
textarea:not(#wpadminbar textarea),
.iump-register-form input[type="text"],
.iump-register-form input[type="email"],
.iump-register-form input[type="password"],
.iump-register-form input[type="tel"],
.iump-register-form input[type="url"],
.iump-register-form input[type="number"],
.iump-register-form select,
.iump-register-form textarea,
.iump-register-form .ihc-form-control,
.ethos-metadata-fields input[type="text"],
.ethos-metadata-fields input[type="email"],
.ethos-metadata-fields input[type="password"],
.ethos-metadata-fields input[type="tel"],
.ethos-metadata-fields input[type="url"],
.ethos-metadata-fields input[type="number"],
.ethos-metadata-fields select,
.ethos-metadata-fields textarea,
.ethos-metadata-fields .ihc-form-control,
.iump-user-page-box input[type="text"],
.iump-user-page-box input[type="email"],
.iump-user-page-box input[type="password"],
.iump-user-page-box input[type="tel"],
.iump-user-page-box input[type="url"],
.iump-user-page-box select,
.iump-user-page-box textarea,
.iump-user-page-box .ihc-form-control {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #eae9f3 !important;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -o-border-radius: 4px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    color: #181818 !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    min-height: 44px !important;
    height: auto !important;
}

/* Focus states - apply to both forms */
.ihc-form-control:focus,
/* Exclude admin bar from focus styles */
input[type="text"]:focus:not(#wpadminbar input):not(.adminbar-input),
input[type="email"]:focus:not(#wpadminbar input):not(.adminbar-input),
input[type="password"]:focus:not(#wpadminbar input):not(.adminbar-input),
input[type="tel"]:focus:not(#wpadminbar input):not(.adminbar-input),
input[type="url"]:focus:not(#wpadminbar input):not(.adminbar-input),
select:focus:not(#wpadminbar select),
textarea:focus:not(#wpadminbar textarea),
.iump-register-form input[type="text"]:focus,
.iump-register-form input[type="email"]:focus,
.iump-register-form input[type="password"]:focus,
.iump-register-form input[type="tel"]:focus,
.iump-register-form input[type="url"]:focus,
.iump-register-form select:focus,
.iump-register-form textarea:focus,
.ethos-metadata-fields input[type="text"]:focus,
.ethos-metadata-fields input[type="email"]:focus,
.ethos-metadata-fields input[type="password"]:focus,
.ethos-metadata-fields input[type="tel"]:focus,
.ethos-metadata-fields input[type="url"]:focus,
.ethos-metadata-fields select:focus,
.ethos-metadata-fields textarea:focus {
    outline: none !important;
    border-color: #e9463b !important;
    box-shadow: 0 0 0 3px rgba(233, 70, 59, 0.1) !important;
}

.ihc-form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #b5b5b5;
    font-style: italic;
}

/* Select dropdowns - match styling for both forms */
select,
.iump-register-form select,
.ethos-metadata-fields select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    appearance: none !important;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* ==========================================================================
   Social Media & Payment Information Section
   ========================================================================== */

.ethos-metadata-fields {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%) !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important; /* Match Personal Details form width */
    min-width: 0 !important; /* Prevent overflow */
}

/* Make metadata form content stretch */
.ethos-metadata-fields form,
.ethos-metadata-form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Push submit button to bottom in metadata form */
.ethos-metadata-submit {
    margin-top: auto;
}

/* When fields are in grid layout */
.ethos-profile-grid-container .ethos-metadata-fields {
    margin-top: 0;
    padding-top: 40px;
    border-top: none;
    margin-bottom: 0;
}

/* When fields are stacked (not in grid) */
.iump-register-form + .ethos-metadata-fields,
.ihc-ap-wrap > .ethos-metadata-fields:not(.ethos-profile-grid-container .ethos-metadata-fields),
.iump-user-page-box > .ethos-metadata-fields:not(.ethos-profile-grid-container .ethos-metadata-fields) {
    margin-top: 60px;
    padding-top: 50px;
    margin-bottom: 40px;
    border-top: 3px solid #eae9f3;
}

/* Separate form styling */
.ethos-metadata-form {
    margin-top: 0;
}

.ethos-metadata-submit {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eae9f3;
    text-align: center !important;
}

.ethos-metadata-submit input[type="submit"],
.ethos-metadata-submit .button-primary.button-large {
    display: inline-block !important;
    margin: 0 auto !important;
}

.ethos-metadata-fields h3 {
    font-size: 22px;
    font-weight: 600;
    color: #181818;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9463b;
    font-family: 'Poppins', sans-serif;
}

/* Social Media Fields */
.ethos-metadata-fields .iump-form-line-register {
    margin-bottom: 20px;
}

/* Payment Information Section */
.ethos-metadata-fields .iump-form-uap_affiliate_paypal_email {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eae9f3;
    margin-top: 10px;
}

.ethos-metadata-fields .iump-form-uap_affiliate_paypal_email label {
    color: #e9463b;
    font-weight: 700;
}

.ethos-field-help-text {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin-bottom: 0;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.iump-submit-form {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 2px solid #eae9f3;
}

/* Submit buttons - ensure both main form and social media form use same styling */
.iump-submit-form input[type="submit"],
.ihc-submit-form input[type="submit"],
.ethos-metadata-submit input[type="submit"],
.iump-register-form input[type="submit"],
.ethos-metadata-form input[type="submit"],
button[type="submit"],
.button-primary.button-large {
    background: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(233, 70, 59, 0.3) !important;
}

.iump-submit-form input[type="submit"]:hover,
.ihc-submit-form input[type="submit"]:hover,
.ethos-metadata-submit input[type="submit"]:hover,
.iump-register-form input[type="submit"]:hover,
.ethos-metadata-form input[type="submit"]:hover,
button[type="submit"]:hover,
.button-primary.button-large:hover {
    background: #cc3c32 !important;
    background-color: #cc3c32 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(233, 70, 59, 0.4) !important;
}

.iump-submit-form input[type="submit"]:active,
.ihc-submit-form input[type="submit"]:active,
.ethos-metadata-submit input[type="submit"]:active,
.iump-register-form input[type="submit"]:active,
.ethos-metadata-form input[type="submit"]:active,
button[type="submit"]:active,
.button-primary.button-large:active {
    transform: translateY(0) !important;
}

/* ==========================================================================
   Exclude WordPress Admin Bar from form styles
   ========================================================================== */

/* Ensure admin bar inputs are not affected by profile form styles */
#wpadminbar input[type="text"],
#wpadminbar input[type="email"],
#wpadminbar input[type="password"],
#wpadminbar input[type="search"],
#wpadminbar .adminbar-input {
    width: auto !important;
    padding: 0 3px 0 24px !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    color: #c3c4c7 !important;
    background-color: rgba(255, 255, 255, 0) !important;
    min-height: 24px !important;
    height: 24px !important;
    box-shadow: none !important;
    transition: width 400ms ease, background 400ms ease !important;
}

#wpadminbar .adminbar-input:focus {
    width: 200px !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 992px) {
    /* Stack forms vertically on tablets and mobile */
    .ethos-profile-grid-container {
        flex-direction: column !important; /* Stack vertically on tablets */
        gap: 30px;
    }
    
    .ethos-profile-grid-container > .iump-user-page-wrapper,
    .ethos-profile-grid-container > .ethos-profile-grid-wrapper,
    .ethos-profile-grid-container > .ethos-metadata-fields,
    .ethos-profile-grid-container > .iump-register-form.ethos-change-password-form,
    .ethos-profile-grid-container > .ethos-change-password-form {
        flex: 1 1 100% !important; /* Full width when stacked */
        max-width: 100% !important;
    }
    
    .ethos-profile-grid-wrapper .ethos-metadata-fields {
        margin-top: 0;
        border-top: 3px solid #eae9f3;
        padding-top: 40px;
    }
}

@media (max-width: 767px) {
    .ihc-ap-wrap {
        padding: 20px 15px;
    }
    
    .ethos-profile-grid-container {
        gap: 20px;
    }
    
    .iump-register-form {
        padding: 25px 20px;
    }
    
    .ethos-metadata-fields {
        padding: 25px 20px;
    }
    
    .ihc-ap-wrap h3:not(.ethos-form-header),
    .ethos-metadata-fields h3 {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   Additional Form Elements
   ========================================================================== */

/* Country Selector (if present) */
.iump-user-page-box select[name*="country"],
.iump-user-page-box select[name*="Country"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #eae9f3;
    border-radius: 8px;
    font-size: 15px;
}

/* Select2 dropdown styling - match other input fields */
.select2-container {
    width: 100% !important;
}

/* Override plugin's 45px border-radius with higher specificity */
.ihc-register-9 .iump-form-line-register .select2-selection,
.select2-container .select2-selection--single,
.ihc-register-9 .select2-container .select2-selection--single {
    height: 44px !important;
    border: 2px solid #eae9f3 !important;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -o-border-radius: 4px !important;
    -ms-border-radius: 4px !important;
    border-radius: 4px !important;
    padding: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    position: relative !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 12px 45px 12px 16px !important;
    line-height: 1.5 !important;
    color: #181818 !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
    top: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #333 transparent transparent transparent !important;
    border-width: 6px 6px 0 6px !important;
    margin-top: -3px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 35px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #999 !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    z-index: 10 !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #e9463b !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    outline: none !important;
    border-color: #e9463b !important;
    box-shadow: 0 0 0 3px rgba(233, 70, 59, 0.1) !important;
}

.select2-container--open .select2-selection--single {
    border-color: #e9463b !important;
}

/* Dropdown styling */
.select2-dropdown {
    border: 2px solid #eae9f3 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-top: 4px !important;
    background: #fff !important;
}

/* Search input field inside dropdown */
.select2-search--dropdown .select2-search__field {
    border: 2px solid #eae9f3 !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    color: #181818 !important;
    background: #fff !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 5px !important;
    width: calc(100% - 10px) !important;
    box-sizing: border-box !important;
}

.select2-search--dropdown .select2-search__field:focus {
    outline: none !important;
    border-color: #e9463b !important;
    box-shadow: 0 0 0 3px rgba(233, 70, 59, 0.1) !important;
}

.select2-search--dropdown {
    padding: 5px !important;
    background: #fff !important;
}

.select2-results__option {
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    color: #181818 !important;
}

.select2-results__option--highlighted {
    background-color: #e9463b !important;
    color: #fff !important;
}

.select2-results__option--selected {
    background-color: #f5f5f5 !important;
    color: #181818 !important;
}

/* Results container - styling for scrollbar */
.select2-results {
    max-height: 300px !important;
}

/* Custom scrollbar styling for Select2 dropdown - Webkit browsers */
.select2-results__options::-webkit-scrollbar {
    width: 8px !important;
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 4px !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 4px !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #999 !important;
}

/* Firefox scrollbar styling */
.select2-results__options {
    scrollbar-width: thin !important;
    scrollbar-color: #ccc #f5f5f5 !important;
}

/* Country flags in Select2 dropdown */
.ethos-country-flag {
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

.select2-results__option .ethos-country-flag,
.select2-selection__rendered .ethos-country-flag {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.select2-results__option .ethos-country-name,
.select2-selection__rendered .ethos-country-name {
    vertical-align: middle;
}

/* Checkbox and Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-right: 8px;
    cursor: pointer;
}

/* Error Messages */
.ihc-register-error,
.ihc-form-error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Success Messages */
.ihc-register-success {
    color: #28a745;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Loading States */
.ihc-form-control:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================================
   Enhanced Avatar Crop Preview
   ========================================================================== */

/* Larger crop preview for better visibility of larger images */
/* Crop modal container - responsive and properly sized */
#croppicModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ethos-enhanced-crop-preview,
#croppicModal .ihc-croppicModalObj {
    max-width: 900px !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    margin: 20px !important;
}

/* Enhance crop modal container */
#croppicModal .ethos-enhanced-crop-preview .cropImgWrapper,
#croppicModal .cropImgWrapper {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

/* Responsive modal sizing */
@media (max-width: 768px) {

    .ethos-profile-grid-container > .iump-user-page-wrapper {
        width: 100% !important;
    }

    .ethos-profile-grid-container > .iump-user-page-wrapper .iump-register-form {
        padding: 10px !important;
    }

    .ethos-metadata-fields {
        padding: 10px !important;
    }

    .ethos-enhanced-crop-preview,
    #croppicModal .ihc-croppicModalObj {
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 10px !important;
    }
}

/* Make crop controls more visible */
#croppicModal .cropControls {
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
}

/* Improve crop box visibility */
#croppicModal .cropImgWrapper {
    border: 2px solid rgba(233, 70, 59, 0.8) !important;
    box-shadow: 0 0 20px rgba(233, 70, 59, 0.3) !important;
}

/* ==========================================================================
   Avatar Display After Cropping
   ========================================================================== */

/* ==========================================================================
   Avatar Display - Proper sizing and cover fit
   ========================================================================== */

/* Avatar wrapper - flexbox to position avatar and buttons side by side */
.ihc-upload-image-wrapper {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertically center avatar and buttons */
    gap: 15px !important;
    width: auto !important;
    min-width: auto !important;
    overflow: visible !important; /* Allow shadow to show beyond avatar circle */
}

/* Inner wrapper container - this is the circular image container */
.ihc-upload-image-wrapper .ihc-upload-image-wrapp {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50% !important;
    overflow: hidden !important; /* Keep hidden for circular crop */
    position: relative !important;
    min-height: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
    margin: 0 !important; /* Remove auto margin, keep on left */
    padding: 0 !important; /* Remove any padding */
    flex-shrink: 0 !important; /* Don't shrink the avatar circle */
    display: block !important;
    visibility: visible !important;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3) !important; /* Shadow aligned with circle */
    border: 1px solid #fff !important; /* White border to match */
    box-sizing: border-box !important; /* Include border in size calculation */
    background: transparent !important; /* Ensure no background */
}

/* Ensure wrapper acts as a clipping container */
.ihc-upload-image-wrapper .ihc-upload-image-wrapp * {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Center loader over the circular avatar */
/* If loader is in outer wrapper, position at center of 110px circle (55px from top) */
.ihc-upload-image-wrapper .loader,
.ihc-upload-image-wrapper .cssload-wrapper {
    position: absolute !important;
    top: 55px !important; /* Center of 110px circle = 55px from top of outer wrapper */
    left: 50% !important; /* Center horizontally relative to outer wrapper */
    transform: translate(-50%, -50%) !important; /* Center the loader itself */
    z-index: 100 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* If loader is inside the circular wrapper, use percentage-based centering */
.ihc-upload-image-wrapper .ihc-upload-image-wrapp .loader,
.ihc-upload-image-wrapper .ihc-upload-image-wrapp .cssload-wrapper {
    position: absolute !important;
    top: 50% !important; /* Center vertically within the 100px circle */
    left: 50% !important; /* Center horizontally within the 100px circle */
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
    margin: 0 !important;
    pointer-events: none !important;
}


/* Avatar images - use cover to fill circular container, size to fit container */
.ihc-upload-image-wrapper .ihc-upload-image-wrapp img,
.ihc-upload-image-wrapper .ihc-upload-image-wrapp .croppedImg,
.ihc-upload-image-wrapper .ihc-upload-image-wrapp img.croppedImg,
.ihc-upload-image-wrapper .ihc-upload-image-wrapp .ihc-member-photo:not(.ihc-no-avatar) {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Use cover to fill the circular container */
    object-position: center center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 50% !important; /* Ensure circular shape */
    aspect-ratio: 1 / 1 !important; /* Force square aspect ratio to maintain circular shape */
}

/* Ensure cropped images maintain aspect ratio */
.ihc-upload-image-wrapper .ihc-upload-image-wrapp .croppedImg,
.ihc-upload-image-wrapper .ihc-upload-image-wrapp img.croppedImg {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Fallback for images directly in wrapper (not in wrapp container) */
.ihc-upload-image-wrapper > img:not(.ihc-no-avatar),
.ihc-upload-image-wrapper > .croppedImg {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
}

/* No avatar placeholder */
.ihc-upload-image-wrapper .ihc-no-avatar {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    border-radius: 50% !important;
    display: block !important;
    box-shadow: none !important; /* Remove any plugin shadows */
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important; /* Position absolutely within wrapper */
    top: 0 !important;
    left: 0 !important;
    background-size: 120% 120% !important; /* Scale up to ensure coverage */
    background-position: 50% 45% !important; /* Adjust vertical position - move up slightly */
    background-repeat: no-repeat !important;
    background-color: #f0f0f0 !important; /* Light gray background to match circle */
    transform: none !important; /* Remove any transforms that might offset it */
    box-sizing: border-box !important;
}

/* Profile page avatar images */
.ihc-member-photo,
.ihc-user-page-avatar img,
.ihc-user-page-avatar .ihc-member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Override plugin shadow and margin on avatar - remove shadow from inner element */
.ihc-upload-image-wrapper .ihc-upload-image-wrapp .ihc-member-photo:not(.ihc-no-avatar) {
    box-shadow: none !important; /* Remove shadow from inner element - shadow is on wrapper */
    margin: 0 !important; /* Remove plugin margins that cause misalignment */
    border: none !important; /* Border is on wrapper now */
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important; /* Clip content to circle */
    position: absolute !important; /* Position absolutely to fill container */
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Special styling for placeholder when it has both classes */
.ihc-upload-image-wrapper .ihc-no-avatar.ihc-member-photo {
    box-shadow: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    overflow: hidden !important;
    position: absolute !important; /* Position absolutely to align properly */
    top: 0 !important;
    left: 0 !important;
    background-size: 120% 120% !important; /* Scale up to ensure coverage */
    background-position: 50% 45% !important; /* Adjust vertical position - move up slightly */
    background-repeat: no-repeat !important;
    background-color: #f0f0f0 !important; /* Light gray background to match circle */
    transform: none !important; /* Remove any transforms that might offset it */
    box-sizing: border-box !important;
}

/* Clear any float or spacing from clear div */
.ihc-upload-image-wrapper .ihc-clear {
    display: none !important; /* Hide clear div that might cause spacing issues */
}

/* Content left container - buttons beside avatar (not below), vertically centered */
.ihc-upload-image-wrapper .ihc-content-left {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important; /* Buttons side by side horizontally */
    align-items: center !important; /* Vertically center buttons with avatar */
    justify-content: flex-start !important; /* Align to left */
    gap: 6px !important; /* Reduced gap between buttons */
    visibility: visible !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

/* Remove any spacing between direct children in button container */
.ihc-upload-image-wrapper .ihc-content-left > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ihc-upload-image-wrapper .ihc-content-left > * + * {
    margin-left: 6px !important; /* Only add gap between siblings */
}

/* Fix the hidden upload form that has display: flex causing spacing issues */
.ihc-upload-image-wrapper form.js_ihc_trigger_avatar,
.ihc-upload-image-wrapper form[class*="js_ihc_trigger_avatar"],
.ihc-upload-image-wrapper form.imgUploadForm,
.ihc-upload-image-wrapper .ihc-content-left form {
    display: none !important; /* Hide the form, it's just for file input */
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Ensure file input itself is hidden but functional */
.ihc-upload-image-wrapper form input[type="file"],
.ihc-upload-image-wrapper input[type="file"][id*="imgUploadField"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* Upload button - ensure it's visible when there's no image */
.ihc-upload-image-wrapper .ihc-avatar-trigger {
    display: inline-block !important;
}

/* Override plugin's hide when no image - show upload button */
.ihc-upload-image-wrapper .ihc-avatar-trigger:not(.ihc-display-none) {
    visibility: visible !important;
    opacity: 1 !important;
}

/* When there's an image, hide upload button (normal behavior) */
.ihc-upload-image-wrapper .ihc-avatar-trigger.ihc-display-none {
    display: none !important;
}

/* Upload button styling - match remove button border-radius, width, and border width */
.ihc-upload-image-wrapper .ihc-avatar-trigger .ihc-upload-avatar,
.ihc-upload-image-wrapper #ihc-avatar-button {
    border-radius: 4px !important; /* Match remove button border-radius */
    width: 100px !important; /* Match remove button width */
    padding: 8px 16px !important; /* Match remove button padding */
    text-align: center !important;
    box-sizing: border-box !important; /* Include padding and border in width */
    border-width: 1px !important; /* Match remove button border width */
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
    height: auto !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
}

/* Remove button styling */
.ihc-upload-image-wrapper .ihc-upload-image-remove-bttn {
    display: inline-block !important;
    visibility: visible !important;
    margin: 0 !important; /* Remove all margins */
    padding: 8px 16px !important;
    background: #fff !important;
    border: 1px solid #e9463b !important;
    color: #e9463b !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    width: 100px !important; /* Match upload button width */
    text-align: center !important;
    box-sizing: border-box !important; /* Include padding and border in width */
    vertical-align: middle !important;
    line-height: normal !important;
    height: auto !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
}

.ihc-upload-image-wrapper .ihc-upload-image-remove-bttn:hover {
    background: #e9463b;
    color: #fff;
}

/* ==========================================================================
   FINAL OVERRIDE: Ensure both forms have IDENTICAL border-radius
   This rule comes last to override any plugin styles with maximum specificity
   ========================================================================== */

/* Force identical border-radius AND height for ALL inputs and selects in both forms */
.ihc-ap-wrap .iump-register-form.ihc-register-9 input[type="text"],
.ihc-ap-wrap .iump-register-form.ihc-register-9 input[type="email"],
.ihc-ap-wrap .iump-register-form.ihc-register-9 input[type="password"],
.ihc-ap-wrap .iump-register-form.ihc-register-9 input[type="tel"],
.ihc-ap-wrap .iump-register-form.ihc-register-9 input[type="url"],
.ihc-ap-wrap .iump-register-form.ihc-register-9 input[type="number"],
.ihc-ap-wrap .iump-register-form.ihc-register-9 select,
.ihc-ap-wrap .iump-register-form.ihc-register-9 .ihc-form-control,
.ihc-ap-wrap .ethos-metadata-fields input[type="text"],
.ihc-ap-wrap .ethos-metadata-fields input[type="email"],
.ihc-ap-wrap .ethos-metadata-fields input[type="password"],
.ihc-ap-wrap .ethos-metadata-fields input[type="tel"],
.ihc-ap-wrap .ethos-metadata-fields input[type="url"],
.ihc-ap-wrap .ethos-metadata-fields input[type="number"],
.ihc-ap-wrap .ethos-metadata-fields select,
.ihc-ap-wrap .ethos-metadata-fields .ihc-form-control {
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -o-border-radius: 4px !important;
    -ms-border-radius: 4px !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    line-height: 1.5 !important;
    min-height: 44px !important;
    height: auto !important;
}

/* Textareas should have different height - ensure they match between forms */
.ihc-ap-wrap .iump-register-form.ihc-register-9 textarea,
.ihc-ap-wrap .ethos-metadata-fields textarea {
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -o-border-radius: 4px !important;
    -ms-border-radius: 4px !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    line-height: 1.5 !important;
    min-height: 120px !important;
    height: auto !important;
}

/* ==========================================================================
   FINAL OVERRIDE: Ensure "Edit your Account" header matches Social Media header
   ========================================================================== */

/* Force header styling to match - highest specificity - target ALL possible locations including plugin theme classes */
.ihc-ap-theme-3 .ihc-ap-wrap h3.ethos-form-header,
.ihc-ap-theme-3 .iump-user-page-wrapper .iump-user-page-box .iump-register-form h3.ethos-form-header,
.ihc-ap-theme-3 .iump-register-form h3.ethos-form-header,
.ihc-ap-wrap .iump-user-page-wrapper .iump-user-page-box .iump-register-form h3.ethos-form-header,
.iump-user-page-wrapper .iump-user-page-box .iump-register-form h3.ethos-form-header,
.iump-user-page-box .iump-register-form h3.ethos-form-header,
.iump-register-form h3.ethos-form-header,
.ihc-ap-wrap form .ethos-form-header,
.ethos-profile-grid-container .iump-register-form h3.ethos-form-header,
h3.ethos-form-header,
.ethos-form-header,
.ihc-ap-wrap h3.ethos-form-header,
form h3.ethos-form-header,
.iump-register-form.ihc-register-9 h3.ethos-form-header {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #181818 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #e9463b !important;
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #e9463b !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   FINAL OVERRIDE: Ensure paragraph styling matches header styles
   ========================================================================== */

/* Force paragraph styling to match - highest specificity - exclude help text */
.ihc-ap-theme-3 .ihc-ap-wrap p:not(.ethos-field-help-text),
.ihc-ap-wrap p:not(.ethos-field-help-text),
.ihc-ap-wrap > p:not(.ethos-field-help-text),
.ihc-user-page-content-wrapper p:not(.ethos-field-help-text),
.ihc-ap-wrap .ihc-user-page-content-wrapper p:not(.ethos-field-help-text) {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #181818 !important;
    margin-bottom: 0px !important;
    margin-top: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.5 !important;
}

/* Help text - smaller font, different color */
.ethos-field-help-text {
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ==========================================================================
   FINAL OVERRIDE: Force side-by-side layout when both forms are present
   ========================================================================== */

/* ABSOLUTE FINAL OVERRIDE - Must be at the end to override everything */
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.ethos-change-password-form),
.ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.iump-register-form.ethos-change-password-form),
.ihc-ap-wrap .ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.ethos-change-password-form),
.ihc-ap-wrap .ethos-profile-grid-container:has(.iump-user-page-wrapper):has(.iump-register-form.ethos-change-password-form) {
    flex-direction: row !important; /* FORCE ROW - HIGHEST PRIORITY */
    flex-wrap: nowrap !important;
    display: flex !important;
}

/* Remove margins from register template classes */
.ihc-register-10,
.ihc-register-8,
.ihc-register-9 {
    margin: 0 !important;
}

.iump-register-form.ihc-register-10,
.iump-register-form.ihc-register-8,
.iump-register-form.ihc-register-9 {
    margin: 0 !important;
}