/* ==============================================
   Optimized CSS for My Custom Registrations Plugin
   ============================================== */

/* ----- Base Reset & Wrapper Styles ----- */
#custom-registration-forms-wrapper {
    all: initial;
    display: block;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    color: #111827;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Reset only necessary elements within our wrapper */
#custom-registration-forms-wrapper *,
#custom-registration-forms-wrapper *::before,
#custom-registration-forms-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    font-family: inherit;
    line-height: inherit;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    list-style: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Remove unwanted content before radio buttons */
#custom-registration-forms-wrapper input[type="radio"] + label:before,
#custom-registration-forms-wrapper input[type="checkbox"] + label:before {
    content: none !important;
    display: none !important;
}

/* ----- Layout & Containers ----- */
#custom-registration-forms-wrapper > .max-w-7xl {
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    #custom-registration-forms-wrapper > .max-w-7xl.sm\:px-6 {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    #custom-registration-forms-wrapper > .max-w-7xl.lg\:px-8 {
        padding: 0 2rem;
    }
    #custom-registration-forms-wrapper .lg\:grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 3rem;
    }
    #custom-registration-forms-wrapper .lg\:col-span-6 {
        grid-column: span 6;
    }
    #custom-registration-forms-wrapper .lg\:mt-0 {
        margin-top: 0;
    }
    #custom-registration-forms-wrapper .lg\:max-w-none {
        max-width: none;
    }
    #custom-registration-forms-wrapper .lg\:mx-0 {
        margin: 0;
    }
}

/* ----- Spacing Utilities ----- */
#custom-registration-forms-wrapper .mt-6 { margin-top: 1.5rem; }
#custom-registration-forms-wrapper .mt-3 { margin-top: 0.75rem; }
#custom-registration-forms-wrapper .mt-1 { margin-top: 0.25rem; }
#custom-registration-forms-wrapper .mb-3 { margin-bottom: 0.75rem; }
#custom-registration-forms-wrapper .mb-4 { margin-bottom: 1rem; }
#custom-registration-forms-wrapper .mb-6 { margin-bottom: 1.5rem; }
#custom-registration-forms-wrapper .pb-6 { padding-bottom: 1.5rem; }
#custom-registration-forms-wrapper .pt-4 { padding-top: 1rem; }
#custom-registration-forms-wrapper .px-4 { padding: 0 1rem; }
#custom-registration-forms-wrapper .py-3 { padding: 0.75rem 1.0rem; }
#custom-registration-forms-wrapper .-mx-4 { margin: 0 -1rem; }

@media (min-width: 768px) {
    #custom-registration-forms-wrapper .md\:mt-6 { margin-top: 1.5rem; }
    #custom-registration-forms-wrapper .md\:mt-12 { margin-top: 3rem; }
    #custom-registration-forms-wrapper .md\:mx-0 { margin: 0; }
    #custom-registration-forms-wrapper .md\:p-8 { padding: 2rem; }
    #custom-registration-forms-wrapper .md\:mr-2 { margin-right: 0.5rem; }
}

@media (min-width: 640px) {
    #custom-registration-forms-wrapper .sm\:mt-5 { margin-top: 1.25rem; }
    #custom-registration-forms-wrapper .sm\:my-10 { margin: 2.5rem 0; }
    #custom-registration-forms-wrapper .sm\:gap-2 { gap: 0.5rem; }
}

/* ----- Typography ----- */
#custom-registration-forms-wrapper .heading {
    font-weight: 600;
    color: #111827;
}
#custom-registration-forms-wrapper .text-2xl { font-size: 1.5rem; line-height: 2rem; }
#custom-registration-forms-wrapper .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
#custom-registration-forms-wrapper .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
#custom-registration-forms-wrapper .text-base { font-size: 1rem; line-height: 1.5rem; }
#custom-registration-forms-wrapper .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
#custom-registration-forms-wrapper .text-xs { font-size: 0.73rem; line-height: 1rem; }
#custom-registration-forms-wrapper .font-semibold { font-weight: 600; }
#custom-registration-forms-wrapper .font-medium { font-weight: 500; }
#custom-registration-forms-wrapper .leading-5 { line-height: 2.15rem; }

@media (min-width: 640px) {
    #custom-registration-forms-wrapper .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    #custom-registration-forms-wrapper .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/*
  Specific styles for the label text of the "monthly_budget" input
  to ensure it fits on one line with a smaller font, desired line height, and bold weight.
*/
/*
  Ensure consistent single-line behavior for label texts within the
  'Bedrag per agenda bezoeker' and 'Vul maximaal budget per maand in' row.
*/
/* ----- Buttons ----- */
#custom-registration-forms-wrapper .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #ffffff;
    text-transform: none; /* From previous step */
    letter-spacing: normal; /* Add this line to ensure normal character spacing */
}

/* The rest of your button styles remain the same */
#custom-registration-forms-wrapper .button-primary {
    background-color: #ec4899;
}

#custom-registration-forms-wrapper .button-primary:hover {
    background-color: #db2777;
}

#custom-registration-forms-wrapper .button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
#custom-registration-forms-wrapper div.flex.space-x-2[x-show="typeOfProfile == 'bid'"] > label > div.label {
    font-size: 0.75rem;        /* Smaller font size */
    line-height: 1.25rem;      /* Reinforce requested line-height */
    font-weight: 600;          /* Reinforce bold weight */
    white-space: nowrap;       /* Reinforce no-wrap */
    overflow: hidden;          /* Reinforce overflow hidden */
    text-overflow: ellipsis;   /* Reinforce ellipsis */
}
/*
  Specific styles for the label text of the "monthly_budget" input
  to make its font smaller, while maintaining single-line behavior and line height.
*/
#custom-registration-forms-wrapper label:has(input[name="monthly_budget"]) > div.label {
    font-size: 0.75rem;        /* Smaller font size */
    line-height: 1.25rem;      /* Reinforce requested line-height */
    font-weight: 600;          /* Reinforce bold weight */
    white-space: nowrap;       /* Reinforce no-wrap */
    overflow: hidden;          /* Reinforce overflow hidden */
    text-overflow: ellipsis;   /* Reinforce ellipsis */
}
/* ----- Colors ----- */
#custom-registration-forms-wrapper .text-gray-500 { color: #6b7280; }
#custom-registration-forms-wrapper .text-gray-900 { color: #111827; }
#custom-registration-forms-wrapper .text-red-400 { color: #ef4444; }
#custom-registration-forms-wrapper .text-pink-500 { color: #ec4899; }
#custom-registration-forms-wrapper .bg-gray-50 { background-color: #f9fafb; }
#custom-registration-forms-wrapper .bg-green-100 { background-color: #d1fae5; }
#custom-registration-forms-wrapper .border-green-400 { border-color: #34d399; }
#custom-registration-forms-wrapper .text-green-700 { color: #047857; }
#custom-registration-forms-wrapper .bg-white { background-color: #ffffff; }
#custom-registration-forms-wrapper .bg-gray-100 { background-color: #f3f4f6; }

/* ----- Borders & Shadows ----- */
#custom-registration-forms-wrapper .border-b { border-bottom: 1px solid #e5e7eb; }
#custom-registration-forms-wrapper .border { border: 1px solid #e5e7eb; }
#custom-registration-forms-wrapper .border-gray-100 { border-color: #f3f4f6; }
#custom-registration-forms-wrapper .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
#custom-registration-forms-wrapper .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* ----- Rounded Corners ----- */
#custom-registration-forms-wrapper .rounded { border-radius: 0.25rem; }
#custom-registration-forms-wrapper .rounded-lg { border-radius: 0.5rem; }
#custom-registration-forms-wrapper .rounded-sm { border-radius: 0.125rem; }
#custom-registration-forms-wrapper .rounded-l-md { border-radius: 0.375rem 0 0 0.375rem; }

/* ----- Display & Layout ----- */
#custom-registration-forms-wrapper .block { display: block; }
#custom-registration-forms-wrapper .flex { display: flex; }
#custom-registration-forms-wrapper .hidden { display: none; }
#custom-registration-forms-wrapper .w-full { width: 100%; }
#custom-registration-forms-wrapper .h-full { height: 100%; }
#custom-registration-forms-wrapper .relative { position: relative; }
#custom-registration-forms-wrapper .mx-auto { margin: 0 auto; }
#custom-registration-forms-wrapper .overflow-hidden { overflow: hidden; }
#custom-registration-forms-wrapper .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#custom-registration-forms-wrapper .items-center { align-items: center; }
#custom-registration-forms-wrapper .justify-between { justify-content: space-between; }
#custom-registration-forms-wrapper .gap-1 { gap: 0.25rem; }
#custom-registration-forms-wrapper .grid { display: grid; }
#custom-registration-forms-wrapper .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ----- Form Elements ----- */
/* Input Fields */
#custom-registration-forms-wrapper .form-input,
#custom-registration-forms-wrapper input[type="text"],
#custom-registration-forms-wrapper input[type="number"],
#custom-registration-forms-wrapper input[type="email"] {
    display: block;
    width: 100%;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    font-family: inherit;
    color: #111827;
    border-radius: 0.25rem;
}

#custom-registration-forms-wrapper .form-input:focus,
#custom-registration-forms-wrapper input[type="text"]:focus,
#custom-registration-forms-wrapper input[type="number"]:focus,
#custom-registration-forms-wrapper input[type="email"]:focus {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.5);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Labels */
#custom-registration-forms-wrapper label {
    display: block;
    margin-bottom: 1rem;
    width: 100%;
}

#custom-registration-forms-wrapper .label-text {
    display: block;
    font-size: 0.875rem;
    color: #111827;
    font-weight: 600;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
}

#custom-registration-forms-wrapper .required {
    color: #ef4444;
    margin-left: 0.25rem;
}

/* Radio & Checkbox Inputs - Enhanced with proper selectors */
#custom-registration-forms-wrapper input[type="radio"],
#custom-registration-forms-wrapper input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#custom-registration-forms-wrapper input[type="radio"] {
    border-radius: 100%;
}

#custom-registration-forms-wrapper input[type="radio"]:checked {
    background-color: #ec4899;
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Radio/Checkbox Container */
#custom-registration-forms-wrapper .flex.items-center.mt-1 {
    display: flex;
    align-items: center;
    margin: 0.25rem 0 0.5rem;
    gap: 0.5rem;
}

#custom-registration-forms-wrapper .flex.items-center.mt-1 label {
    display: flex;
    align-items: center;
    margin: 0;
    flex-grow: 1;
    width: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
}

/* ----- Buttons ----- */
#custom-registration-forms-wrapper .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #ffffff;
}

#custom-registration-forms-wrapper .button-primary {
    background-color: #ec4899;
}

#custom-registration-forms-wrapper .button-primary:hover {
    background-color: #db2777;
}

#custom-registration-forms-wrapper .button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ----- Links ----- */
#custom-registration-forms-wrapper a {
    color: inherit;
}

#custom-registration-forms-wrapper a.underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}

#custom-registration-forms-wrapper a.hover\:underline:hover {
    text-decoration: underline;
}

/* ----- Icons ----- */
/* Font Awesome Icons */
#custom-registration-forms-wrapper .fa-solid {
    display: inline-block;
    font-family: "Font Awesome 6 Solid";
    font-weight: 900;
    font-size: 1em;
    vertical-align: -0.125em;
    line-height: 1;
    margin-right: 0.25rem;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: inherit;
}

/* Custom Check Mark Icon */
#custom-registration-forms-wrapper .icon-check-mark {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 0.25rem;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Custom Question Mark Icon */
#custom-registration-forms-wrapper .icon-question-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.25em;
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 768px) {
    #custom-registration-forms-wrapper .icon-check-mark.md--mr-2,
    #custom-registration-forms-wrapper li .fa-solid.md\:mr-2 {
        margin-right: 0.5rem;
    }
}

/* Flag Icons */
#custom-registration-forms-wrapper img.inline-block.h-3.w-4.rounded-sm {
    height: 0.75rem;
    width: 1rem;
    border-radius: 0.125rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* ----- International Telephone Input ----- */
#custom-registration-forms-wrapper .iti { /* Main wrapper for the intl-tel-input instance */
    width: 100%;
    display: flex;
    align-items: stretch; /* Ensures selected flag part and tel input part are same height */
    position: relative;
    margin-bottom: 0; /* Consistent with your original styling */
}

/* Container for the selected flag button/dropdown */
#custom-registration-forms-wrapper .iti__flag-container {
    flex-shrink: 0;
    position: relative; /* For dropdown positioning relative to this */
    z-index: 2; /* Ensures it's visually above the text input if overlapping issues occur */
    display: flex;
    align-items: stretch;
}

/* The clickable button showing the selected flag and dropdown arrow */
#custom-registration-forms-wrapper .iti__selected-flag {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%; /* Takes full height of its container */
    padding: 0.5rem 0.75rem; /* Matches your .form-input padding */
    border-radius: 0.25rem 0 0 0.25rem; /* Left side rounded corners */
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-right: none; /* To visually merge with the telephone input's border */
    cursor: pointer;
    box-sizing: border-box;
    font-size: 1rem; /* Matches .form-input */
    line-height: 1.5rem; /* Matches .form-input */
    color: #111827; /* text-gray-900 */
    text-align: left;
    gap: 0.5rem; /* Space between flag icon and arrow */
    /* Explicit min-height to match .iti__tel-input for robustness */
    min-height: calc(1.5rem + (0.5rem * 2) + (1px * 2));
}

#custom-registration-forms-wrapper .iti__selected-flag:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}

/* The actual telephone input field */
#custom-registration-forms-wrapper .iti__tel-input {
    flex-grow: 1; /* Takes up remaining width */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-left: none; /* Visually merges with the .iti__selected-flag */
    border-radius: 0 0.25rem 0.25rem 0; /* Right side rounded, left side flat */
    padding: 0.5rem 0.75rem; /* Matches your .form-input padding */
    font-size: 1rem; /* Matches .form-input */
    line-height: 1.5rem; /* Matches .form-input */
    background-color: #ffffff; /* bg-white */
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Matches .form-input shadow */
    font-family: inherit; /* Inherits from wrapper */
    color: #111827; /* text-gray-900 */
    min-height: calc(1.5rem + (0.5rem * 2) + (1px * 2)); /* line-height + top/bottom padding + top/bottom border */
    box-sizing: border-box; /* Consistent box model */
    margin: 0; /* Reset any potential browser default margins */
    position: relative; /* For z-index on focus */
    -webkit-appearance: none; /* Reset appearance */
    -moz-appearance: none;
    appearance: none;
    text-align: left !important; /* Add this line */
    padding-left: 30px !important;

}

#custom-registration-forms-wrapper .iti__tel-input:focus {
    border-color: #ec4899; /* pink-500, your focus color */
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.5); /* Your focus ring */
    outline: none; /* Remove default outline */
    z-index: 3; /* Bring to front when focused */
}

/* Flag icon within the selected flag button */
#custom-registration-forms-wrapper .iti__selected-flag .iti__flag {
    /* The library styles these with background images for each country */
    /* Ensure vertical alignment if necessary, though flex 'align-items: center' on parent helps */
    display: inline-block;
    vertical-align: middle;
    /* margin-right: 6px; /* Library default, handled by 'gap' on parent now */
}

/* Dropdown arrow within the selected flag button */
#custom-registration-forms-wrapper .iti__selected-flag .iti__arrow {
    width: 0;
    height: 0;
    border-top: 4px solid #555555; /* Arrow color and size */
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    /* margin-left: auto; /* Not needed if 'gap' and 'justify-content' are used on parent */
}
#custom-registration-forms-wrapper .iti__selected-flag .iti__arrow--up { /* When dropdown is open */
    border-top: none;
    border-bottom: 4px solid #555555;
}

/* The dropdown list of countries */
#custom-registration-forms-wrapper .iti__country-list {
    position: absolute;
    top: 100%; /* Positions below the flag container */
    left: 0; /* Aligns with the left of the flag container */
    z-index: 1000; /* High z-index to appear above other content */
    padding: 0;
    margin: 2px 0 0 0; /* Small offset from the input */
    max-height: 200px; /* Limits height and makes it scrollable */
    overflow-y: auto;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.25rem; /* rounded-md */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    background-color: #ffffff; /* bg-white */
    list-style: none; /* Remove default ul styling */
    /* Width can be tricky; library might control it. Using a min-width is a good idea. */
    /* Default is often width of the input. Or use iti--dropdown-full-width class on .iti for wider. */
    min-width: 280px; /* Adjust as needed for appearance */
    width: 385px; /* Using CSS variable from your original CSS */
}

/* Utility class from the library to hide the dropdown */
#custom-registration-forms-wrapper .iti__country-list.iti__hide {
    display: none;
}

/* Individual country item in the dropdown */
#custom-registration-forms-wrapper .iti__country {
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 1rem;
    line-height: 1.5rem;
    background-color: #ffffff; /* Ensure no transparency issues */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between flag, name, dial code */
    white-space: nowrap; /* Prevent long country names from wrapping */
}

#custom-registration-forms-wrapper .iti__country.iti__highlight, /* Item highlighted via keyboard */
#custom-registration-forms-wrapper .iti__country:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}

/* Flag icon within a dropdown list item */
#custom-registration-forms-wrapper .iti__country .iti__flag {
     margin-right: 0; /* Rely on parent 'gap' for spacing */
}

/* Search input field, if you enable it in JS options (not currently enabled) */
#custom-registration-forms-wrapper .iti__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: none; /* remove all borders */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200, only bottom */
    border-radius: 0; /* No radius for search input */
    font-size: 1rem;
    line-height: 1.5rem;
    background-color: #ffffff;
    color: #111827;
    font-family: inherit;
}

#custom-registration-forms-wrapper .iti__search-input:focus {
    border-color: #ec4899; /* pink-500 */
    box-shadow: none; /* No extra shadow for the search input */
    outline: none;
}

/* Dial code displayed next to the country name in the dropdown */
#custom-registration-forms-wrapper .iti__dial-code {
    color: #6b7280; /* text-gray-500 */
    margin-left: auto; /* Pushes it to the right end */
}

/* ----- Responsive Grid ----- */
@media (min-width: 640px) {
    #custom-registration-forms-wrapper .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #custom-registration-forms-wrapper .flex.space-x-2 {
        gap: 0.5rem;
    }
    #custom-registration-forms-wrapper .grid.sm\:grid-cols-3.sm\:gap-2 {
        gap: 0.5rem;
    }
}

/* ----- Image Styles ----- */
#custom-registration-forms-wrapper .info-image-below-text {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
#custom-registration-forms-wrapper input[type="radio"],
#custom-registration-forms-wrapper input[type="checkbox"] {
    /* Aggressive reset, then re-apply properties */
    all: unset !important; /* Clears appearance, box-shadows, etc. */
    display: inline-block !important; /* Needed for width/height to apply correctly */
    vertical-align: middle !important; /* Align with text */
    height: 1rem !important; /* h-4 */
    width: 1rem !important; /* w-4 */
    flex-shrink: 0 !important; /* Prevent shrinking in flex containers */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #d1d5db !important; /* gray-300 */
    background-color: #ffffff !important;
    transition-property: all !important;
    transition-duration: 150ms !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important; /* For potential custom checkmark/dot positioning */
}
#custom-registration-forms-wrapper input[type="radio"] {
    border-radius: 100% !important; /* Force circle for radios */
}
#custom-registration-forms-wrapper input[type="radio"]:checked {
    background-color: #ec4899 !important; /* pink-500 */
    border-color: transparent !important; /* Border should be hidden when checked */
    /* Custom checked dot (white circle on pink background) */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important; /* Ensure it covers the input area */
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/*
  CSS Workaround to hide the duplicated flag from the improperly nested
  outer intl-tel-input instance.
  The primary fix should be in the JavaScript initialization or by resolving conflicts.
*/
#custom-registration-forms-wrapper div.iti.iti--inline-dropdown > div.iti__flag-container {
    display: none !important;
}

/*
  Ensure the inner, correct instance (which is also a .iti div)
  is displayed correctly if the above rule somehow affects its layout.
  It should normally be display: flex by the library for separate-dial-code.
*/
#custom-registration-forms-wrapper div.iti.iti--inline-dropdown > div.iti.iti--separate-dial-code {
    display: flex !important; /* Or simply remove this rule if the inner one displays fine after hiding the outer flag */
    width: 100% !important; /* Ensure it takes full width if its parent was messed up */
}
#custom-registration-forms-wrapper input[type="checkbox"]:checked {
    background-color: #ec4899 !important; /* pink-500 */
    border-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
#custom-registration-forms-wrapper input[type="checkbox"] {
    all: unset !important; 
    display: inline-block !important; 
    vertical-align: middle !important; 
    height: 1.25rem !important; /* For h-5 */
    width: 1.25rem !important;  /* For w-5 */
    flex-shrink: 0 !important; 
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #d1d5db !important; 
    background-color: #ffffff !important; 
    border-radius: 0.25rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    position: relative !important;
    transition-property: all !important;
    transition-duration: 150ms !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#custom-registration-forms-wrapper input[type="checkbox"]:checked {
    background-color: #ec4899 !important; 
    border-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

}
/* ==============================================
   Additional Mobile Optimizations
   ============================================== */

/* --- Stacking for specific two-column field groups on mobile --- */

/* Target containers for Voornaam/Achternaam and Bedrag/Budget that are currently flex rows */
#custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name"]):has(input[name="last_name"][id="last_name"]),
#custom-registration-forms-wrapper #doctor-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name_doctor"]):has(input[name="last_name"][id="last_name_doctor"]),
#custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2[x-show="typeOfProfile == 'bid'"]:has(input[name="cpc"]):has(input[name="monthly_budget"]) {
    flex-direction: column; /* Stack items vertically on mobile */
    gap: 0; /* Remove horizontal gap if 'space-x-2' implements it directly */
}

/* Adjust child labels within these stacked containers */
#custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name"]):has(input[name="last_name"][id="last_name"]) > label,
#custom-registration-forms-wrapper #doctor-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name_doctor"]):has(input[name="last_name"][id="last_name_doctor"]) > label,
#custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2[x-show="typeOfProfile == 'bid'"]:has(input[name="cpc"]):has(input[name="monthly_budget"]) > label {
    margin-left: 0 !important; /* Override space-x-* if it's margin-based */
    margin-right: 0 !important;
    width: 100%; /* Ensure labels take full width when stacked */
}

/* Ensure vertical spacing between stacked labels using their existing bottom margins (e.g., mb-2) */

#custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name"]):has(input[name="last_name"][id="last_name"]) > label + label,
#custom-registration-forms-wrapper #doctor-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name_doctor"]):has(input[name="last_name"][id="last_name_doctor"]) > label + label,
#custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2[x-show="typeOfProfile == 'bid'"]:has(input[name="cpc"]):has(input[name="monthly_budget"]) > label + label {
    margin-top: 0.5rem; /* Or 1rem, adjust as needed */
}


/* Reset specific label styling for CPC/Monthly Budget when stacked on mobile */
/* This makes them consistent with other labels on mobile devices */
#custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2[x-show="typeOfProfile == 'bid'"]:has(input[name="cpc"]):has(input[name="monthly_budget"]) > label > div.label {
    font-size: 0.875rem;   /* Default label font size (text-sm) */
    line-height: 1.25rem;  /* Default label line height for text-sm */
    white-space: normal;   /* Allow text wrapping */
    overflow: visible;     /* Ensure text is not cut off */
    text-overflow: clip;   /* Default text overflow */
}

/* --- Full-width buttons on mobile for registration forms --- */
#custom-registration-forms-wrapper #clinic-registration-form button[type="submit"],
#custom-registration-forms-wrapper #doctor-registration-form button[type="submit"] {
    width: 100%;
    justify-content: center; /* Center text if button is flex */
}

/* --- Responsive adjustments for larger screens (sm breakpoint: 640px and up) --- */
@media (min-width: 640px) {
    /* Revert to row layout for the specific field groups */
    #custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name"]):has(input[name="last_name"][id="last_name"]),
    #custom-registration-forms-wrapper #doctor-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name_doctor"]):has(input[name="last_name"][id="last_name_doctor"]),
    #custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2[x-show="typeOfProfile == 'bid'"]:has(input[name="cpc"]):has(input[name="monthly_budget"]) {
        flex-direction: row; /* Horizontal layout on larger screens */
        gap: 0.5rem; /* Assuming space-x-2 corresponds to 0.5rem gap. */
                     /* If space-x-2 is margin-based, its original rules should take over. */
    }

    /* If space-x-2 is margin based (e.g., > * + * { margin-left: 0.5rem; }), ensure it re-applies */
    #custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name"]):has(input[name="last_name"][id="last_name"]) > label + label,
    #custom-registration-forms-wrapper #doctor-registration-form div.flex.space-x-2:has(input[name="first_name"][id="first_name_doctor"]):has(input[name="last_name"][id="last_name_doctor"]) > label + label,
    #custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2[x-show="typeOfProfile == 'bid'"]:has(input[name="cpc"]):has(input[name="monthly_budget"]) > label + label {
        margin-top: 0; /* Remove any top margin from stacked state */
        /* margin-left: 0.5rem !important; /* Uncomment and adjust if space-x-2 specific margin needs to be forced back */
    }

    /* Restore specific label styling for CPC/Monthly Budget on larger screens */
    #custom-registration-forms-wrapper #clinic-registration-form div.flex.space-x-2[x-show="typeOfProfile == 'bid'"]:has(input[name="cpc"]):has(input[name="monthly_budget"]) > label > div.label {
        font-size: 0.75rem;    /* Smaller font size for these specific labels on desktop */
        line-height: 1.25rem;
        white-space: nowrap;   /* Prevent wrapping */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Revert registration buttons to auto width on larger screens */
    #custom-registration-forms-wrapper #clinic-registration-form button[type="submit"],
    #custom-registration-forms-wrapper #doctor-registration-form button[type="submit"] {
        width: auto; /* Or 'initial' or specific width as per original design */
    }
}
/* General Admin Styling for Registrations Plugin */

/* --- Top Level Admin Menu --- */
/* Icon color for your custom menu */
#adminmenu #toplevel_page_my-registrations .wp-menu-image dashicons-before::before {
    color: #a78bfa; /* Example: A nice violet color */
}

/* Active state for your custom menu */
#adminmenu #toplevel_page_my-registrations.current .wp-menu-image dashicons-before::before,
#adminmenu #toplevel_page_my-registrations.wp-has-current-submenu .wp-menu-image dashicons-before::before,
#adminmenu #toplevel_page_my-registrations:hover .wp-menu-image dashicons-before::before {
    color: #8b5cf6; /* Darker violet for hover/active */
}

/* Style for your overview page wrap */
.wrap#my-registrations-overview { /* You might need to add id="my-registrations-overview" to your overview page div */
    background-color: #f9fafb;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
}
.wrap#my-registrations-overview h1 {
    color: #374151;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 10px;
}

/* --- CPT List Tables (clinic_registration & doctor_registration) --- */

/* Style for Status column */
.column-registration_status .post-state {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px; /* Pill shape */
    font-size: 0.85em;
    font-weight: 600;
    text-transform: capitalize;
    color: #fff;
    border: 1px solid transparent;
}

.column-registration_status .status-pending {
    background-color: #fbbf24; /* Amber */
    border-color: #f59e0b;
    color: #78350f;
}

.column-registration_status .status-verified {
    background-color: #34d399; /* Emerald */
    border-color: #059669;
    color: #065f46;
}

.column-registration_status .status-rejected {
    background-color: #f87171; /* Red */
    border-color: #ef4444;
    color: #991b1b;
}

/* Style for Assigned User link */
.column-assigned_user a {
    color: #4f46e5; /* Indigo */
    font-weight: 500;
}
.column-assigned_user a:hover {
    color: #3730a3;
}

/* Alternating row colors for better readability */
.wp-list-table tbody tr:nth-child(odd) {
    /* background-color: #f9fafb; */ /* Subtle odd row color */
}
.wp-list-table tbody tr:hover {
    background-color: #eff6ff; /* Light blue hover */
}


/* --- Meta Box Styling (Registration Details & Verification) --- */
#my_registration_details.postbox {
    border-left: 4px solid #a78bfa; /* Accent border color */
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#my_registration_details .hndle {
    background-color: #f3f4f6; /* Lighter gray for handle */
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 15px;
    font-size: 1.1em;
    font-weight: 600;
    color: #1f2937;
}

#my_registration_details .inside {
    padding: 15px;
}

#my_registration_details h3,
#my_registration_details h4 {
    color: #374151;
    font-size: 1.1em;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d1d5db;
    padding-bottom: 8px;
}
#my_registration_details h3:first-child,
#my_registration_details h4:first-child {
    margin-top: 0;
}

#my_registration_details .form-table th {
    font-weight: 600;
    color: #4b5563;
    width: 180px; /* Adjust as needed */
    padding-right: 15px;
}
#my_registration_details .form-table td {
    color: #1f2937;
}
#my_registration_details .form-table td strong#registration-status-display {
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 4px;
}
#my_registration_details .form-table td strong.status-pending { background-color: #fef3c7; color: #92400e; }
#my_registration_details .form-table td strong.status-verified { background-color: #d1fae5; color: #065f46; }
#my_registration_details .form-table td strong.status-rejected { background-color: #fee2e2; color: #991b1b; }


#my_registration_details #user-assignment-section {
    background-color: #f9fafb;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
    border: 1px solid #e5e7eb;
}

#my_registration_details select,
#my_registration_details input[type="text"],
#my_registration_details textarea {
    border-radius: 4px;
    border-color: #d1d5db;
    box-shadow: none;
}
#my_registration_details input[type="text"]:focus,
#my_registration_details textarea:focus {
    border-color: #8b5cf6; /* Violet focus */
    box-shadow: 0 0 0 1px #8b5cf6;
}

#my_registration_details .button-primary {
    background-color: #8b5cf6 !important; /* Violet */
    border-color: #7c3aed !important;
    color: white !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#my_registration_details .button-primary:hover {
    background-color: #7c3aed !important;
}
#my_registration_details .button-secondary {
    border-color: #d1d5db;
    color: #374151;
}
#my_registration_details .button-secondary:hover {
    border-color: #9ca3af;
    color: #1f2937;
}

#my_registration_details .spinner.is-active { /* Ensure spinner is visible */
    visibility: visible;
    margin-left: 8px;
}
#status-update-message, #user-creation-message {
    display: inline-block; /* To show messages next to buttons */
    margin-left: 10px;
    font-style: italic;
    color: #4b5563;
}
#status-update-message.success, #user-creation-message.success {
    color: #059669;
}
#status-update-message.error, #user-creation-message.error {
    color: #dc2626;
}

/* Styling for AJAX response messages in meta box */
.my-meta-box-message {
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    display: block; /* Or inline-block if preferred */
}
.my-meta-box-message.success {
    background-color: #d1fae5; /* Light green */
    border: 1px solid #6ee7b7;
    color: #065f46; /* Dark green */
}
.my-meta-box-message.error {
    background-color: #fee2e2; /* Light red */
    border: 1px solid #fca5a5;
    color: #991b1b; /* Dark red */
}
/*working */