z-text-input::part(input) {
    background: #fff !important; /* Explicitly set to white */
}

z-password-input::part(input) {
    background: #fff !important; /* Explicitly set to white */
}

z-select::part(selectable) {
  background: #fff !important;
}

z-select::part(placeholder) {
  color: #23366F !important;
  background: #fff !important; /* If needed */
}

z-number-input::part(input) {
    background: #fff !important; /* Explicitly set to white */
}

z-text-input::part(input):-webkit-autofill,
z-password-input::part(input):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    background-color: #fff !important;
    -webkit-text-fill-color: #23366F !important;
    font-family: 'Zurich Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/*Registration Form Styles*/
.custom-form {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 350px;
  
}
.reg-wrapper {
  padding: 0 10rem 0 10rem;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 24px;
  padding: 0.7rem;
  width: 100%;
  min-height: 48px;
  transition: box-shadow 0.2s;
  height: 48px;
}

.input-wrapper:hover,
.input-wrapper:focus {
  border-color:var(--z-input--border-color--shaped--hover, var(--zc-blue-light)); /* Zurich blue tint, subtle shadow */
  background: #ffffff;
  border: var(--_border-width) solid transparent;
}

.floating-label-group {
  position: relative;
  width: 100%;
}

.custom-input {
  width: 100%;
  border: none;
  border-radius: 24px;
  background: #fff;
  font-size: 18px;
  font-family: Zurich Sans;
  color: #23366F;
  padding: 4px 8px; /* Default: vertical centering */
  height: 40px;   /* Ensures vertical alignment */
  outline: none;
  font-style: normal;
  font-weight: 300;
  box-sizing: border-box;
  transition: padding 0.2s;
  line-height: 150%;
}

.floating-label {
  position: absolute;
  left: 8px;
  top: 18px;
  font-size: 12px;
  color: #2167AE;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s;
  font-weight: 500;
}

.custom-input:focus,
.custom-input:not(:placeholder-shown) {
  padding-top: 18px;
  padding-bottom: 6px;
  left: 9px;
}

/* Float label up when input is active or filled */
.custom-input:focus + .floating-label,
.custom-input:not(:placeholder-shown) + .floating-label {
  top: 1px;
  font-size: 13px;
  color:#2167AE;
  opacity: 1;
}


/* Hide label when not active */
.custom-input:placeholder-shown + .floating-label {
  opacity: 0;
}

.custom-input::placeholder{
 font-size: 15px;
  color: #2167AE;
  opacity: 1;
  font-style: normal;
  font-family: Zurich Sans;
  font-weight: 300;
}

.custom-select-wrapper {
  width: 100%;
  position: relative;
  border-radius: 24px;
  transition: box-shadow 0.2s;
  height: 56px;
  min-height: 56px;
}

/* Hide label by default */
.custom-select-wrapper .floating-label {
  opacity: 0;
  position: absolute;
  left: 20px;
  top: 18px;
  font-size: 18px;
  color: #2167AE;
  pointer-events: none;
  transition: all 0.2s;
}

/* Only show and float when .active is present */
.custom-select-wrapper .floating-label.active {
  opacity: 1;
  top: 2px;
  font-size: 13px;
  color: #23366F;
}

.custom-select-wrapper:hover,
.custom-select-wrapper:focus {
  border-color: #91BFE3; /* Zurich blue tint, subtle shadow */
}

.select-style {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #ffffff;
  border: none;
  border-radius: 24px;
  height: 48px;
  font-size: 18px;
  padding: 10px 20px;
  width: 100%;
  color: #2167AE;
  cursor: pointer;
}

.custom-btn {
  min-height: 48px;
  background: #cfd2d5;       /* Light grey background */
  color: #9ea5a9;            /* Medium grey text */
  border: none;
  border-radius: 24px;       /* Fully rounded corners */
  font-size: 18px;
  cursor: not-allowed;       /* Shows disabled cursor */
  opacity: 1;                /* Ensures full opacity for color */
  text-align: center;
  font-style: Light;
  font-family: Zurich Sans;
  height: 56px;
}

.custom-btn:not([disabled]) {
  background: #2167AE;      /* Zurich blue */
  color: #fff;              /* White text */
  cursor: pointer;
  box-shadow: 0 2px 8px #91BFE3; /* Optional: subtle blue shadow */
}

.help-icon {
  position: absolute;
  cursor: pointer;
  display: flex;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  color: #2167AE;
  pointer-events: none;
  display: flex;
  transform: translateY(-50%);
}

.help-icon svg {
  width: 20px;
}

.tooltip {
  visibility: hidden;
  opacity: 0;
  width: 350px;
  background: #2167AE;
  color: #fff;
  text-align: left;
  border-radius: 8px;
  padding: 8px 12px;
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-size: 16px;
  transition: opacity 0.2s;
  pointer-events: none;
}

.help-icon:hover .tooltip,
.help-icon:focus .tooltip {
  visibility: visible;
  opacity: 1;
}

.helper-text {
    margin-top: 3px;
    margin-left: 24px;
    font-size: 12px;
    color: #23366F;
    font-family: Zurich Sans;
    font-style: Medium;
    opacity: 0.8;
    font-weight: 500;
}


/* Error: label floats up and is red when input is focused or filled */
.input-wrapper.error .custom-input:focus + .floating-label,
.input-wrapper.error .custom-input:not(:placeholder-shown) + .floating-label {
    top: 1px !important;
    font-size: 13px !important;
    color: #d32f2f !important;
    opacity: 1 !important;
    left: 8px !important;
    transition: all 0.2s;
}

/* Error: label down and red when input is empty */
.input-wrapper.error .custom-input:placeholder-shown + .floating-label {
    top: 18px !important;
    font-size: 18px !important;
    color: #d32f2f !important;
    opacity: 1 !important;
    left: 8px !important;
    transition: all 0.2s;
}

/* Error input text color */
.input-wrapper.error .custom-input {
    color: #d32f2f !important;
}

/* Error border */
.input-wrapper.error {
    border: 2px solid #d32f2f !important;
    box-shadow: none !important;
}

/* Error helper text */
.helper-text.error {
    color: #d32f2f;
    font-size: 0.9em;
    margin-top: 3px;
    margin-left: 24px;
    font-weight: 500;
    font-family: Zurich Sans;
}


.reg-container {  
    padding: 0 10rem 0 10rem;
}

/* --- Responsive styles --- */
@media (max-width: 900px) {
    .reg-container {
        padding: 0 2rem 0 2rem;
    }
}
@media (max-width: 600px) {
    .reg-container {
        padding: 0 0.5rem 0 0.5rem;
    }
    .custom-form {
        width: 100% !important;
        min-width: 0;
        padding-top: 10px;
        gap: 16px;
    }
    .password-requirements li {
        font-size: 0.95rem;
    }
}

/* Scoped to tpAddUser component only */
c-tp-add-user .form-field z-text-input::part(input) {
    background: #ECEEEF !important;
}

c-tp-add-user .form-field z-select::part(placeholder) {
    background: #ECEEEF !important;
}

c-tp-manage-users .form-field z-text-input::part(input) {
    background: #ECEEEF !important;
}

c-tp-create-claim .form-field z-select::part(placeholder) {
    background: #ECEEEF !important;
}

c-document-upload .zds-file-details z-select::part(placeholder) {
    background: #ECEEEF !important;
}

c-tp-claim-form .form-field z-select::part(placeholder) {
    background: #ECEEEF !important;
}

/* Scoped for Manage Users Component Only */
.search-wrap z-text-input::part(input) {
    background: #ECEEEF !important;
}

.filter z-select::part(selectable) {
  background: #ECEEEF !important;
}

.filter z-select::part(placeholder) {
  background: #ECEEEF !important;
  
}
.select-wrapper  z-select::part(selectable) {
  background: #ECEEEF !important;
}
.select-wrapper z-select::part(placeholder) {
  background: #ECEEEF !important;
  
}

.custom-input:-webkit-autofill,
.custom-input:-webkit-autofill:focus,
.custom-input:-webkit-autofill:hover,
.custom-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    background-color: #fff !important;
    color: #23366F !important;
    -webkit-text-fill-color: #23366F !important;
    transition: background-color 5000s ease-in-out 0s;
}


input.claim-input:-webkit-autofill,
textarea.claim-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #23366F !important;
}