:root {
  color-scheme: light;

  /* Input Primitives (reusable spacing/radius vars) */
  --nexus-sys-input-radius: var(--nexus-ref-shape-corner-small);
  --nexus-sys-input-padding-x: var(--nexus-ref-spacing-14);
  --nexus-sys-input-padding-y: var(--nexus-ref-spacing-10);
  --nexus-sys-input-padding-inline-end: 35px;
  --nexus-sys-input-padding-inline-start: var(--nexus-ref-spacing-14);
  --nexus-sys-input-destructive-icon-padding-inline-end: var(--nexus-ref-spacing-14);

  /* Spacing */
  --nexus-sys-input-label-gap: var(--nexus-ref-spacing-6);
  --nexus-sys-input-hintText-gap: var(--nexus-ref-spacing-6);
  --nexus-sys-input-gap: var(--nexus-ref-spacing-6);

  /* Input border width */
  --nexus-sys-input-border-width: 1px;

  /* Input transition timing */
  --nexus-sys-input-transition-duration: 0.15s;

  /* Input cursor color */
  --nexus-sys-input-cursor-color: var(--nexus-ref-primary-30);

  /* Text Colors */
  --nexus-sys-input-label-color: var(--nexus-ref-neutral-50);
  --nexus-sys-input-hintText-color: var(--nexus-ref-neutral-80);
  --nexus-sys-input-hintText-destructive-color: var(--nexus-ref-error-90);

  /* Input Colors - Placeholder State */
  --nexus-sys-color-input-placeholder-background: var(--nexus-ref-primary-100);
  --nexus-sys-color-input-placeholder-border: var(--nexus-ref-neutral-90);
  --nexus-sys-color-input-placeholder-text: var(--nexus-ref-neutral-80);
  --nexus-sys-color-input-placeholder-shadow: none;

  /* Input Colors - Filled State */
  --nexus-sys-color-input-filled-background: var(--nexus-ref-primary-100);
  --nexus-sys-color-input-filled-border: var(--nexus-ref-neutral-90);
  --nexus-sys-color-input-filled-text: var(--nexus-ref-neutral-20);
  --nexus-sys-color-input-filled-shadow: none;

  /* Input Colors - Focused State */
  --nexus-sys-color-input-focused-background: var(--nexus-ref-primary-100);
  --nexus-sys-color-input-focused-border: var(--nexus-ref-primary-80);
  --nexus-sys-color-input-focused-text: var(--nexus-ref-neutral-20);
  --nexus-sys-color-input-focused-shadow: 0 0 0 3px var(--nexus-ref-primary-90);

  /* Input Colors - Disabled State */
  --nexus-sys-color-input-disabled-background: var(--nexus-ref-neutral-100);
  --nexus-sys-color-input-disabled-border: var(--nexus-ref-neutral-90);
  --nexus-sys-color-input-disabled-text: var(--nexus-ref-neutral-80);
  --nexus-sys-color-input-disabled-shadow: none;

  /* Input Colors - Error State */
  --nexus-sys-color-input-error-background: var(--nexus-ref-primary-100);
  --nexus-sys-color-input-error-border: var(--nexus-ref-error-95);
  --nexus-sys-color-input-error-text: var(--nexus-ref-neutral-20);
  --nexus-sys-color-input-error-shadow: none;
  --nexus-sys-color-input-error-focused-shadow: 0 0 0 3px var(--nexus-ref-error-100);


  --nexus-sys-color-input-address-text-color: var(--nexus-ref-neutral-80);
  --nexus-sys-color-input-currency-text-color: var(--nexus-ref-neutral-80);

  /* Icon Dimensions */
  --nexus-sys-icon-leading-size: 15px;
  --nexus-sys-icon-trailing-size: 16px;
  --nexus-sys-icon-payment-width: 35px;
  --nexus-sys-icon-payment-height: 24px;

  /* Spacing Values */
  --nexus-sys-spacing-icon-gap: var(--nexus-ref-spacing-8);
  --nexus-sys-spacing-leading-text-padding: var(--nexus-ref-spacing-12);
  --nexus-sys-otp-gap-sm: var(--nexus-ref-spacing-8);
  --nexus-sys-otp-gap-md: var(--nexus-ref-spacing-12);
  /* OTP Input Size Variables */
  --nexus-sys-otp-size-sm-width: 64px;
  --nexus-sys-otp-size-sm-height: 64px;

  --nexus-sys-otp-size-md-width: 80px;
  --nexus-sys-otp-size-md-height: 80px;

  --nexus-sys-otp-size-lg-width: 96px;
  --nexus-sys-otp-size-lg-height: 96px;

  --nexus-sys-color-input-otp-separator: var(--nexus-ref-neutral-90);

  /* OTP Disabled Colors */
  --nexus-sys-color-input-otp-disabled-background: var(--nexus-ref-neutral-100);
  --nexus-sys-color-input-otp-disabled-border: var(--nexus-ref-neutral-90);
  --nexus-sys-color-input-otp-disabled-text: var(--nexus-ref-primary-80);
  --nexus-sys-color-input-otp-disabled-placeholder: var(--nexus-ref-primary-80);

  /* OTP Focus Colors */
  --nexus-sys-color-input-otp-focused-border: var(--nexus-ref-primary-80);
  --nexus-sys-color-input-otp-focused-shadow: 0 0 0 3px var(--nexus-ref-primary-90);

  /* OTP Filled Colors */
  --nexus-sys-color-input-otp-filled-background: var(--nexus-sys-color-input-filled-background);
  --nexus-sys-color-input-otp-filled-text: var(--nexus-ref-primary-30);
  --nexus-sys-color-input-otp-filled-border: var(--nexus-ref-primary-80);

  --nexus-sys-color-input-otp-placeholder: var(--nexus-ref-neutral-90);

}

/* ------------------------
   Wrapper = visual box
------------------------- */
.nexus-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  position: relative;
  border-radius: var(--nexus-sys-input-radius);
  border: var(--nexus-sys-input-border-width) solid var(--nexus-sys-color-input-placeholder-border);
  background: var(--nexus-sys-color-input-placeholder-background);
  box-shadow: none;
  padding: 0 var(--nexus-sys-input-padding-x);
  transition: all 0.15s ease;
  box-sizing: border-box;
  gap: var(--nexus-sys-spacing-icon-gap);
  font-weight: var(--nexus-sys-typescale-font-weight-regular);


}

/* ------------------------
actual <input>
------------------------- */
.nexus-input-wrapper .nexus-input-component {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  /* Allow input to shrink */
  width: 100%;
  font: inherit;
  font-size: var(--nexus-sys-typescale-text-md-font-size);
  line-height: var(--nexus-sys-typescale-text-md-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-regular);

  height: 100%;
  cursor: text;
  caret-color: var(--nexus-sys-input-cursor-color);
  outline: none;
  box-sizing: border-box;
  padding: 0;

  /* Default vars */
  color: var(--nexus-com-input-text-color);

  /* Remove mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;

}

/* Placeholder text */
.nexus-input-component::placeholder {
  color: var(--nexus-sys-color-input-placeholder-text);
  opacity: 1;
}

/* Placeholder shown */
.nexus-input-wrapper:has(.nexus-input-component:placeholder-shown) {
  background: var(--nexus-sys-color-input-placeholder-background);
  border-color: var(--nexus-sys-color-input-placeholder-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-placeholder-text);
}

/* Filled */
.nexus-input-wrapper:has(.nexus-input-component:not(:placeholder-shown)) {
  background: var(--nexus-sys-color-input-filled-background);
  border-color: var(--nexus-sys-color-input-filled-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-filled-text);
}

/* Focused */
.nexus-input-wrapper:has(.nexus-input-component:focus) {
  background: var(--nexus-sys-color-input-focused-background);
  border-color: var(--nexus-sys-color-input-focused-border);
  box-shadow: var(--nexus-sys-color-input-focused-shadow);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-focused-text);
}

/* Disabled */
.nexus-input-wrapper:has(.nexus-input-component:disabled) {
  border-color: var(--nexus-sys-color-input-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
  --nexus-com-input-text-color: var(--nexus-sys-color-input-disabled-text);
}

.nexus-input-wrapper:has(.nexus-input-component:disabled) .nexus-input-component {
  cursor: not-allowed;
}

/* Disable leading dropdown when input is disabled */
.nexus-input-wrapper:has(.nexus-input-component:disabled) .nexus-leading-dropdown select {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--nexus-sys-color-input-disabled-text);

}

/* Disable trailing dropdown when input is disabled */
.nexus-input-wrapper:has(.nexus-input-component:disabled) .nexus-trailing-dropdown select {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--nexus-sys-color-input-disabled-text);
}

/* Error - only show when user has interacted (not just focused empty required field) */
.nexus-input-wrapper:has(.nexus-input-component:invalid:not(:placeholder-shown)) {
  background: var(--nexus-sys-color-input-error-background);
  border-color: var(--nexus-sys-color-input-error-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-error-text);
}

.nexus-input-wrapper:has(.nexus-input-component:invalid:not(:placeholder-shown):focus) {
  box-shadow: var(--nexus-sys-color-input-error-focused-shadow);
}

/* Error state from JS validation: parent group has .has-error OR input has aria-invalid="true" */
.nexus-input-group.has-error .nexus-input-wrapper,
.nexus-input-wrapper:has(.nexus-input-component[aria-invalid="true"]) {
  background: var(--nexus-sys-color-input-error-background);
  border-color: var(--nexus-sys-color-input-error-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-error-text);
}
.nexus-input-group.has-error .nexus-input-wrapper:focus-within,
.nexus-input-wrapper:has(.nexus-input-component[aria-invalid="true"]:focus) {
  box-shadow: var(--nexus-sys-color-input-error-focused-shadow);
}

/* Leading Icon Styling */
.nexus-leading-icon {
  width: var(--nexus-sys-icon-leading-size);
  height: var(--nexus-sys-icon-leading-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

.email-icon {
  background-image: url('../icons/email.svg');
}

.search-icon {
  background-image: url('../icons/search.svg');
}

.payment-icon {
  background-image: url('../icons/Payment\ method\ icon.svg');
  width: var(--nexus-sys-icon-payment-width);
  height: var(--nexus-sys-icon-payment-height);
}

/* Leading Icon Styling */
.nexus-trailing-icon {
  width: var(--nexus-sys-icon-trailing-size);
  height: var(--nexus-sys-icon-trailing-size);
  background-repeat: no-repeat;
  background-position: end;
  background-size: contain;
  flex-shrink: 0;
  margin-inline-start: var(--nexus-sys-spacing-trailing-gap);
}

.help-icon {
  background-image: url('../icons/help-circle.svg');
}

.nexus-leading-text {
  width: auto;
  height: 100%;
  flex-shrink: 0;
  font-size: var(--nexus-sys-typescale-text-md-font-size);
  line-height: var(--nexus-sys-typescale-text-md-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-regular);
  color: var(--nexus-sys-color-input-address-text-color);
  border-inline-end: 1px solid var(--nexus-ref-neutral-90);
  display: flex;
  align-items: center;
  padding-inline-end: var(--nexus-sys-spacing-leading-text-padding);
}

/* .nexus-input-wrapper:has(.leading-text){
  direction: ltr;
} */
.nexus-leading-text::after {
  content: "https://";
}


.nexus-leading-currency {
  flex-shrink: 0;
  color: var(--nexus-sys-color-input-currency-text-color);
}


.nexus-trailing-dropdown select {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  /* re-enable for the select itself */
  outline: none;
}

.nexus-trailing-dropdown select:focus-visible {
  outline: none;

}

.nexus-input-wrapper:has(.nexus-trailing-dropdown select option:checked[value="SYP"]) .nexus-leading-currency::after {
  content: "SYP";
}

.nexus-input-wrapper:has(.nexus-trailing-dropdown select option:checked[value="USD"]) .nexus-leading-currency::after {
  content: "$";
}

.nexus-input-wrapper:has(.nexus-trailing-dropdown select option:checked[value="EUR"]) .nexus-leading-currency::after {
  content: "€";
}





/* Hide trailing icon when input is invalid (only after user interaction) */
.nexus-input-wrapper:has(.nexus-input-component:invalid:not(:placeholder-shown)) .nexus-trailing-icon {
  display: none;
}

/* Automatic Destructive Icon for Invalid Inputs (only after user interaction) */
.nexus-input-wrapper:has(.nexus-input-component:invalid:not(:placeholder-shown))::after {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url('../icons/destructivIcon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  order: 1;
}

/* Position destructive icon before trailing dropdown */
.nexus-input-wrapper:has(.nexus-input-component:invalid:not(:placeholder-shown)):has(.nexus-trailing-dropdown)::after {
  order: 1;
}

.nexus-input-wrapper:has(.nexus-input-component:invalid:not(:placeholder-shown)) .nexus-trailing-dropdown {
  order: 2;
}


/* Input Group Layout */
.nexus-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--nexus-sys-input-gap);
}

.nexus-input-group label {
  font-size: var(--nexus-sys-typescale-text-sm-font-size);
  line-height: var(--nexus-sys-typescale-text-sm-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-medium);
  color: var(--nexus-sys-input-label-color);
  display: block;
}

.nexus-input-group small {
  font-size: var(--nexus-sys-typescale-text-sm-font-size);
  line-height: var(--nexus-sys-typescale-text-sm-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-regular);
  color: var(--nexus-sys-input-hintText-color);
  display: block;
}

/* Change label color to error when input is invalid (only after user interaction) */
.nexus-input-group:has(.nexus-input-component:invalid:not(:placeholder-shown)) small {
  color: var(--nexus-sys-input-hintText-destructive-color);
}

/* Alternative approach for browsers that don't support :has() */
.nexus-input-component:invalid:not(:placeholder-shown)~small {
  color: var(--nexus-sys-input-hintText-destructive-color);
}

/* Change label color to error when textarea is invalid (only after user interaction) */
.nexus-input-group:has(.nexus-text-area:invalid:not(:placeholder-shown)) small {
  color: var(--nexus-sys-input-hintText-destructive-color);
}

/* Error message color when group has .has-error or input has aria-invalid (JS validation) */
.nexus-input-group.has-error small.nexus-error,
.nexus-input-group:has(.nexus-input-component[aria-invalid="true"]) small.nexus-error {
  color: var(--nexus-sys-input-hintText-destructive-color);
}





/* Autofill styling - remove browser blue background, use design system colors */
.nexus-input-component:-webkit-autofill,
.nexus-input-component:-webkit-autofill:hover,
.nexus-input-component:-webkit-autofill:focus,
.nexus-input-component:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--nexus-sys-color-input-filled-background) inset !important;
  box-shadow: 0 0 0 30px var(--nexus-sys-color-input-filled-background) inset !important;
  -webkit-text-fill-color: var(--nexus-sys-color-input-filled-text) !important;
  background-color: var(--nexus-sys-color-input-filled-background) !important;
  background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Ensure autofill doesn't override our border and background */
.nexus-input-wrapper:has(.nexus-input-component:-webkit-autofill) {
  background: var(--nexus-sys-color-input-filled-background) !important;
  border-color: var(--nexus-sys-color-input-filled-border) !important;
}

/* Autofill styling - remove browser blue background, use design system colors */
.nexus-text-area:-webkit-autofill,
.nexus-text-area:-webkit-autofill:hover,
.nexus-text-area:-webkit-autofill:focus,
.nexus-text-area:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--nexus-sys-color-input-filled-background) inset !important;
  box-shadow: 0 0 0 30px var(--nexus-sys-color-input-filled-background) inset !important;
  -webkit-text-fill-color: var(--nexus-sys-color-input-filled-text) !important;
  background-color: var(--nexus-sys-color-input-filled-background) !important;
  background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Ensure autofill doesn't override our border and background */
.nexus-text-area-wrapper:has(.nexus-text-area:-webkit-autofill) {
  background: var(--nexus-sys-color-input-filled-background) !important;
  border-color: var(--nexus-sys-color-input-filled-border) !important;
}

.nexus-leading-dropdown {
  /* Leading dropdown container */
}

.nexus-leading-dropdown select {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  /* re-enable for the select itself */
  outline: none;

}

.nexus-leading-dropdown select:focus-visible {
  outline: none;
}

.dial-code {
  color: var(--nexus-ref-neutral-40);

}

.nexus-input-wrapper:has(.nexus-input-component:not(:placeholder-shown)) .dial-code,
.nexus-input-wrapper:has(.nexus-input-component:focus) .dial-code {
  color: var(--nexus-ref-neutral-60);
}

.nexus-input-wrapper:has(.nexus-leading-dropdown select option:checked[value="IQ"]) .dial-code::after {
  content: "+964";
}

.nexus-input-wrapper:has(.nexus-leading-dropdown select option:checked[value="US"]) .dial-code::after {
  content: "+1";
}

.nexus-input-wrapper:has(.nexus-leading-dropdown select option:checked[value="GB"]) .dial-code::after {
  content: "+44";
}

.nexus-input-wrapper:has(.nexus-leading-dropdown select option:checked[value="AE"]) .dial-code::after {
  content: "+971";
}


.nexus-text-area-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  border-radius: var(--nexus-sys-input-radius);
  border: var(--nexus-sys-input-border-width) solid var(--nexus-sys-color-input-placeholder-border);
  background: var(--nexus-sys-color-input-placeholder-background);
  box-shadow: none;
  padding: var(--nexus-sys-input-padding-y) var(--nexus-sys-input-padding-x);
  transition: all 0.15s ease;
  box-sizing: border-box;

  /* Remove mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

}

.nexus-text-area {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  width: 100%;
  font: inherit;
  resize: none;
  caret-color: var(--nexus-sys-input-cursor-color);

  /* Remove mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Placeholder shown */
.nexus-text-area-wrapper:has(.nexus-text-area:placeholder-shown) {
  background: var(--nexus-sys-color-input-placeholder-background);
  border-color: var(--nexus-sys-color-input-placeholder-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-placeholder-text);
}

/* Filled */
.nexus-text-area-wrapper:has(.nexus-text-area:not(:placeholder-shown)) {
  background: var(--nexus-sys-color-input-filled-background);
  border-color: var(--nexus-sys-color-input-filled-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-filled-text);
}

/* Focused */
.nexus-text-area-wrapper:has(.nexus-text-area:focus) {
  background: var(--nexus-sys-color-input-focused-background);
  border-color: var(--nexus-sys-color-input-focused-border);
  box-shadow: var(--nexus-sys-color-input-focused-shadow);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-focused-text);
}

/* Disabled */
.nexus-text-area-wrapper:has(.nexus-text-area:disabled) {
  background: var(--nexus-sys-color-input-disabled-background);
  border-color: var(--nexus-sys-color-input-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
  --nexus-com-input-text-color: var(--nexus-sys-color-input-disabled-text);
}

.nexus-text-area-wrapper:has(.nexus-text-area:disabled) .nexus-text-area {
  cursor: not-allowed;
}

/* Error */
.nexus-text-area-wrapper:has(.nexus-text-area:invalid:not(:placeholder-shown)) {
  background: var(--nexus-sys-color-input-error-background);
  border-color: var(--nexus-sys-color-input-error-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-error-text);
}

.nexus-text-area-wrapper:has(.nexus-text-area:invalid:focus) {
  box-shadow: var(--nexus-sys-color-input-error-focused-shadow);
}

/* Textarea error from JS: parent .has-error or aria-invalid="true" */
.nexus-input-group.has-error .nexus-text-area-wrapper,
.nexus-text-area-wrapper:has(.nexus-text-area[aria-invalid="true"]) {
  background: var(--nexus-sys-color-input-error-background);
  border-color: var(--nexus-sys-color-input-error-border);
  --nexus-com-input-text-color: var(--nexus-sys-color-input-error-text);
}
.nexus-input-group.has-error .nexus-text-area-wrapper:focus-within,
.nexus-text-area-wrapper:has(.nexus-text-area[aria-invalid="true"]:focus) {
  box-shadow: var(--nexus-sys-color-input-error-focused-shadow);
}



/* Direction Toggle Button */
.direction-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.direction-btn {
  background: var(--nexus-ref-primary-20);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



.direction-btn:active {
  transform: translateY(0);
}

/* RTL specific button positioning */
[dir="rtl"] .direction-toggle {
  right: unset;
  left: 20px;
}

/* Grid Layout */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
}

/* Card Component */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Row Layout */
.row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* Swatch Component */
.swatch {
  display: inline-block;
  padding: 4px 8px;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  width: 100%;
  margin-bottom: 8px;
}

/* Muted Text */
.muted {
  color: #64748b;
  font-size: 14px;
}

input[type="tel"] {
  all: unset;
  /* removes browser defaults */
  direction: inherit;
  text-align: inherit;

  /* Layout */
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;

  /* Typography */
  font-family: inherit;
  font-weight: var(--nexus-sys-typescale-font-weight-regular);
  font-size: var(--nexus-sys-typescale-text-md-font-size);
  line-height: var(--nexus-sys-typescale-text-md-line-height);

  /* Spacing */
  /* padding: 0 8px; */
  border-radius: var(--nexus-sys-input-radius);

  /* Visual via variables (set by state) */
  background: var(--nexus-com-input-background-color, var(--nexus-sys-color-input-default-background));
  color: var(--nexus-com-input-text-color, var(--nexus-sys-color-input-default-text));
  border: var(--nexus-sys-input-border-width) solid var(--nexus-com-input-border-color, var(--nexus-sys-color-input-default-border));
  box-shadow: var(--nexus-com-input-shadow, var(--nexus-sys-color-input-default-shadow));

  /* Interactions */
  cursor: text;
  caret-color: var(--nexus-sys-input-cursor-color);
  outline: none;

  /* Transitions */
  transition:
    color var(--nexus-sys-input-transition-duration) ease,
    background-color var(--nexus-sys-input-transition-duration) ease,
    border-color var(--nexus-sys-input-transition-duration) ease,
    box-shadow var(--nexus-sys-input-transition-duration) ease;

  /* Box Model */
  box-sizing: border-box;
}

/* nexus otp  */

.nexus-otp-container {
  display: flex;
  align-items: center;
  gap: var(--nexus-sys-otp-gap-sm);

}

.nexus-otp-container[nexus-otp-size="md"],
.nexus-otp-container[nexus-otp-size="lg"] {
  gap: var(--nexus-sys-otp-gap-md);
}



.nexus-otp-separator {
  color: var(--nexus-sys-color-input-otp-separator);
  user-select: none;
  font-size: var(--nexus-sys-typescale-display-xl-font-size);
  line-height: var(--nexus-sys-typescale-display-xl-line-height);
}



.nexus-otp-input {
  text-align: center;
  border: var(--nexus-sys-input-border-width) solid var(--nexus-sys-color-input-placeholder-border);
  border-radius: var(--nexus-sys-input-radius);
  outline: none;
  transition: border-color 0.3s ease;
  font-family: inherit;
  background: var(--nexus-sys-color-input-placeholder-background);
  box-sizing: border-box;
  /* Remove mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  color: var(--nexus-sys-color-input-otp-filled-text);
  caret-color: var(--nexus-sys-input-cursor-color);
  font-weight: var(--nexus-sys-typescale-font-weight-medium);
}

.nexus-otp-input::placeholder {
  color: var(--nexus-sys-color-input-otp-placeholder);

}

/* Default size (medium) */
.nexus-otp-input,
.nexus-otp-container[nexus-otp-size="md"] .nexus-otp-input {
  max-width: var(--nexus-sys-otp-size-md-width);
  width: 100%;
  height: var(--nexus-sys-otp-size-md-height);
  font-size: var(--nexus-sys-typescale-display-lg-font-size);
  line-height: var(--nexus-sys-typescale-display-lg-line-height);
}

/* Small size */
.nexus-otp-container[nexus-otp-size="sm"] .nexus-otp-input {
  max-width: var(--nexus-sys-otp-size-sm-width);
  width: 100%;
  height: var(--nexus-sys-otp-size-sm-height);
  font-size: var(--nexus-sys-typescale-display-lg-font-size);
  line-height: var(--nexus-sys-typescale-display-lg-line-height);
}

/* Large size */
.nexus-otp-container[nexus-otp-size="lg"] .nexus-otp-input {
  max-width: var(--nexus-sys-otp-size-lg-width);
  width: 100%;
  height: var(--nexus-sys-otp-size-lg-height);
  font-size: var(--nexus-sys-typescale-display-xl-font-size);
  line-height: var(--nexus-sys-typescale-display-xl-line-height);
}

.nexus-otp-input:focus {
  border-color: var(--nexus-sys-color-input-otp-focused-border);
  box-shadow: var(--nexus-sys-color-input-otp-focused-shadow);
}

.nexus-otp-input:focus::placeholder {
  opacity: 0;
}

.nexus-otp-input:not(:placeholder-shown) {
  border-color: var(--nexus-sys-color-input-otp-filled-border);
}

/* Auto-focus next input when current is filled */
.nexus-otp-input:not(:placeholder-shown)+.nexus-otp-input {
  /* This will be handled by the input event listener in the script */
}

/* Style for filled inputs */
.nexus-otp-input:not(:placeholder-shown) {
  background: var(--nexus-sys-color-input-otp-filled-background);
  color: var(--nexus-sys-color-input-otp-filled-text);
}

/* Disabled OTP input styles */
.nexus-otp-input:disabled {
  background: var(--nexus-sys-color-input-otp-disabled-background);
  border-color: var(--nexus-sys-color-input-otp-disabled-border);
  color: var(--nexus-sys-color-input-otp-disabled-text);
  cursor: not-allowed;
  opacity: 0.6;
}

.nexus-otp-input:disabled::placeholder {
  color: var(--nexus-sys-color-input-otp-disabled-placeholder);
  opacity: 0.8;
}

.nexus-otp-input:disabled:focus {
  border-color: var(--nexus-sys-color-input-otp-disabled-border);
  box-shadow: none;
}