/* Import variables */
@import 'variables.css';

/* Common component styles */

/* Buttons */
.ds-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
    border-radius: var(--radius-pill);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    transition: transform 80ms ease-out; /* №95: only the move of a pressed button, never the shadows (П-118) */
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
}

.ds-button--primary {
    background: var(--color-primary);
    color: var(--color-dark-blue);
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.12), inset -8px 8px 15px rgba(255, 255, 255, 0.04);
}

.ds-button--primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/*.ds-button--primary:focus:not(:disabled) {
    background: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: 0 0 0 2px var(--color-dark-blue), 0 0 0 4px var(--color-primary);
}*/

.ds-button--primary:active:not(:disabled) {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: scale(0.98);
}

.ds-button--secondary {
    background: var(--color-gray-200);
    color: var(--color-white);
    border: 1px solid var(--color-stroke);
}

.ds-button--secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

.ds-button--secondary:focus:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    box-shadow: 0 0 0 2px var(--color-dark-blue), 0 0 0 4px var(--color-gray-300);
}

.ds-button--secondary:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    transform: scale(0.98);
}

/* Save button variant - gray background */
.ds-button--save {
    background: #E0E5EC;
    color: var(--color-dark-blue);
}

.ds-button--save:hover:not(:disabled) {
    background: #D0D5DC;
    color: var(--color-dark-blue);
}

.ds-button--save:focus:not(:disabled) {
    background: #D0D5DC;
    color: var(--color-dark-blue);
    box-shadow: 0 0 0 2px var(--color-dark-blue), 0 0 0 4px #E0E5EC;
}

.ds-button--save:active:not(:disabled) {
    background: #D0D5DC;
    color: var(--color-dark-blue);
    transform: scale(0.98);
}

.ds-button--large {
    height: 45px;
    font-size: var(--font-size-lg);
    padding: var(--spacing-sm) var(--spacing-xl);
    line-height: 120%;
}

/* Close button */
.ds-button-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds-button-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ds-button-close:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.ds-button-close .ds-icon {
    width: 16px;
    height: 16px;
}

.ds-button--medium {
    height: 36px;
    font-size: var(--font-size-md);
}

.ds-button--small {
    height: 30px;
    font-size: var(--font-size-sm);
}

.ds-button:disabled {
    opacity: var(--opacity-medium);
    cursor: not-allowed;
}

/* Full width modifier */
.ds-button--full-width {
    width: 100%;
}

/* №95: depth of variant B (variables.css) on the dark pages, the fallbacks are the former flat look (?fx=nodepth).
   The orange buttons keep their colour - the same highlight and shade lie over it; on hover and when pressed black
   6% / 8% over #FF9F1C and white text, as in the Figma "Ilia theme". The glass ones look like the tiles of the home page */
.ds-page--dark .ds-button--primary {
    background: var(--surface-raised-bg, linear-gradient(transparent, transparent)), var(--color-primary);
    box-shadow: var(--shadow-raised, 4px 4px 15px rgba(0, 0, 0, 0.12), inset -8px 8px 15px rgba(255, 255, 255, 0.04));
}

.ds-page--dark .ds-button--primary:hover:not(:disabled) {
    background: var(--surface-raised-bg, linear-gradient(transparent, transparent)), linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), var(--color-primary);
}

.ds-page--dark .ds-button--secondary {
    background: var(--surface-raised-bg, var(--color-gray-200));
    border-color: var(--surface-raised-border, var(--color-stroke));
    box-shadow: var(--shadow-raised, none);
}

/* The former hover is white 25%: 18% drawn over 8% gives the same */
.ds-page--dark .ds-button--secondary:hover:not(:disabled),
.ds-page--dark .ds-button--secondary:focus:not(:disabled),
.ds-page--dark a[role="button"].simple-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
    background-image: var(--surface-raised-bg, linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)));
}

/* №95: pressed buttons, tiles and the ⋮ menu - a little lower and smaller, darker, the shadow inside. Only the move is
   animated (80 ms), the shadow changes at once and the action never waits for it. The two buttons at the bottom of a
   card ("ערוך" / "שלח") are part of its edge: they only get darker, a move would push them out of the card.
   iPhone Safari shows :active thanks to the empty passive touchstart listener in _Host.cshtml */
.action_button,
.simple-button,
.more_options,
.report-options-menu .dropdown-item {
    transition: transform 80ms ease-out;
}

.ds-page--dark .ds-button:active:not(:disabled):not(.disabled),
.home_page.dark .ds-button:active:not(:disabled):not(.disabled),
.ds-page--dark .action_button:active:not(.disabled),
.ds-page--dark .simple-button:active:not(.disabled),
.ds-page--dark .more_options:active:not(.disabled),
.home_page.dark .more_options:active:not(.disabled),
.ds-page--dark .report-options-menu .dropdown-item:active:not(:disabled),
.home_page.dark .report-options-menu .dropdown-item:active:not(:disabled) {
    transform: var(--press-transform);
}

.ds-page--dark .ds-button--secondary:active:not(:disabled):not(.disabled),
.home_page.dark .ds-button--secondary:active:not(:disabled):not(.disabled),
.ds-page--dark .action_button:active:not(.disabled),
.ds-page--dark .simple-button:active:not(.disabled) {
    background: var(--surface-pressed-bg, rgba(255, 255, 255, 0.25)) !important;
    box-shadow: var(--shadow-pressed, none);
}

.ds-page--dark .ds-button--primary:active:not(:disabled):not(.disabled),
.home_page.dark .ds-button--primary:active:not(:disabled):not(.disabled) {
    background: var(--surface-pressed-bg, linear-gradient(transparent, transparent)), linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--color-primary);
    box-shadow: var(--shadow-pressed, none);
}

.ds-page--dark .leftbutton:active:not(.disabled),
.home_page.dark .leftbutton:active:not(.disabled),
.ds-page--dark .rightbutton:active:not(.disabled),
.home_page.dark .rightbutton:active:not(.disabled),
.ds-page--dark .report-options-menu .dropdown-item:active:not(:disabled),
.home_page.dark .report-options-menu .dropdown-item:active:not(:disabled) {
    background: rgba(0, 0, 0, 0.25);
    box-shadow: var(--shadow-pressed-inner, none);
}

/* Cards */
.ds-card {
    background: var(--color-gray-200);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-md);
    backdrop-filter: var(--blur-effect-xs);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ds-card__content {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
    flex-grow: 1;
    color: var(--color-white);
}

.ds-card__actions {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.ds-card__action {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: var(--spacing-sm) 0;
    color: var(--color-white);
    border-top: 1px solid var(--color-gray-300);
    cursor: pointer;
}

.ds-card__action--left {
    border-right: 1px solid var(--color-gray-300);
    border-radius: 0 0 0 var(--radius-lg);
}

.ds-card__action--right {
    border-left: 1px solid var(--color-gray-300);
    border-radius: 0 0 var(--radius-lg) 0;
}

/* Input fields */
.ds-input {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    /* П-104: a raised label stands wholly above the field border, not on it */
    --ds-input-label-raised-top: -23px;
}

/* П-104: room above a field with a label, so the raised label does not touch the field above */
.ds-input--labeled {
    margin-top: 23px;
}

.ds-input.ds-input--error .ds-input__field {
    border-color: #FF0000;
}

.ds-input.ds-input--error .ds-input__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-input.ds-input--error .ds-input__label {
    color: var(--ds-input-label-error);
}

.ds-input__field {
    background: var(--color-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: rgba(0, 0, 0, 0.87);
    height: 56px;
    width: 100%;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.32);
    font-size: 1rem;
    line-height: 1.4375em;
    text-align: start;
    direction: inherit;
}

.ds-input__field:focus {
    outline: none;
    border-color: var(--border-focused);
    background: var(--background-focused);
}

.ds-input__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover);
}

.ds-input__field:disabled {
    opacity: var(--opacity-medium);
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.05);
}

/* П-138: a phone field is written left to right ("+" at the start of the number), but on a Hebrew page
   it stays aligned to the right like the other fields */
.ds-input__field[dir="ltr"] {
    direction: ltr; /* the field itself has "direction: inherit" above, which would win over dir="ltr" */
}

[dir="rtl"] .ds-input__field[dir="ltr"] {
    text-align: right;
}

/* Placeholder text alignment */
.ds-input__field::placeholder {
    text-align: start;
}

.ds-input__label {
    position: absolute;
    left: 12px; /* Fallback for older browsers */
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%); /* Vertical centering */
    pointer-events: none;
    transform-origin: left center; /* Fallback for older browsers */
    transform-origin: inline-start center;
    max-width: calc(100% - 24px);
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                top 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    font-family: var(--font-family-primary);
    line-height: 1.4375em;
    color: var(--ds-input-label-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    padding: 0 4px;
    z-index: 1;
    text-align: start;
}

/* RTL fallback for older browsers */
html[dir="rtl"] .ds-input__label {
    left: auto;
    right: 12px;
    transform-origin: right center;
}

/* Active state - label moves to top and changes color */
.ds-input--active .ds-input__label {
    top: var(--ds-input-label-raised-top);
    font-size: 13px;
    font-weight: 500;
    transform: none;
    background-color: transparent;
    color: var(--ds-input-label-active);
}

/* Field filled by browser autofill (no change event yet): the label moves up too, not over the value */
.ds-input__field:-webkit-autofill ~ .ds-input__label {
    top: var(--ds-input-label-raised-top);
    font-size: 13px;
    font-weight: 500;
    transform: none;
    background-color: transparent;
    color: var(--ds-input-label-active);
}

/* Field of a plain HTML form (invisible placeholder " ", see DsInput) with text in it: the label is up (П-095).
   A separate rule: a browser that does not know one of the selectors drops only its own rule */
.ds-input__field[placeholder=" "]:not(:placeholder-shown) ~ .ds-input__label {
    top: var(--ds-input-label-raised-top);
    font-size: 13px;
    font-weight: 500;
    transform: none;
    background-color: transparent;
    color: var(--ds-input-label-active);
}

/* ...but a field with an error keeps its red label */
.ds-input--error .ds-input__field[placeholder=" "]:not(:placeholder-shown) ~ .ds-input__label {
    color: var(--ds-input-label-error);
}

/* Without border radius */
.ds-input-rectangle {
    border-radius: unset !important;
}
/* Password toggle button */
.ds-input__toggle-password,
.ds-input__search-button {
    position: absolute;
    inset-inline-end: 12px; /* RTL-aware positioning */
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.54);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-default);
    outline: none;
    width: 24px;
    height: 24px;
    z-index: 2;
}

/* The "eye" of a password field (П-092): a dark icon on a light round chip, so it is clearly visible
   on any field colour - light, dark, or the light colour Chrome gives an autofilled field */
.ds-input__toggle-password {
    width: 32px;
    height: 32px;
    padding: 6px;
    color: #11151F;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.ds-input__toggle-password:hover {
    color: #000000;
    background: #FFFFFF;
    border-radius: 50%;
}

.ds-input__toggle-password:focus-visible {
    color: var(--color-secondary);
    background: rgba(0, 140, 255, 0.08);
    border-radius: 50%;
}

.ds-input__toggle-password svg {
    width: 20px;
    height: 20px;
}

/* Padding adjustment for input with icon */
.ds-input--has-icon .ds-input__field {
    padding-inline-end: 48px; /* RTL-aware padding */
}

/* Dark theme */
.ds-page--dark .ds-input__field {
    background: var(--color-gray-200);
    border-color: var(--border-default-dark);
    color: var(--color-white);
}

.ds-page--dark .ds-input__label {
    color: var(--ds-input-label-default);
}

.ds-page--dark .ds-input__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover-dark);
}

.ds-page--dark .ds-input__field:focus {
    border-color: var(--border-focused-dark);
    background: var(--background-focused-dark);
}

/* Active state for dark theme: the raised label is light (П-104) */
.ds-page--dark .ds-input--active .ds-input__label {
    background-color: transparent;
    color: var(--ds-input-label-active);
}

/* Placeholder color for dark theme to match label */
.ds-page--dark .ds-input__field::placeholder {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1; /* Firefox fix */
}

/* Password toggle for dark theme */
.ds-page--dark .ds-input__toggle-password {
    color: #11151F;
}

.ds-page--dark .ds-input__toggle-password:hover {
    color: #000000;
    background: #FFFFFF;
}

.ds-page--dark .ds-input__toggle-password:focus-visible {
    color: var(--color-secondary);
    background: rgba(0, 140, 255, 0.12);
}

/* Error state for dark theme */
.ds-page--dark .ds-input.ds-input--error .ds-input__field {
    border-color: #FF0000;
}

.ds-page--dark .ds-input.ds-input--error .ds-input__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-page--dark .ds-input.ds-input--error .ds-input__label {
    color: var(--ds-input-label-error);
}

/* Number Input Component */
.ds-number {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.ds-number.ds-number--error .ds-number__field {
    border-color: #FF0000;
}

.ds-number.ds-number--error .ds-number__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-number.ds-number--error .ds-number__label {
    color: var(--ds-input-label-error);
}

.ds-number__field {
    background: var(--color-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: rgba(0, 0, 0, 0.87);
    height: 56px;
    width: 100%;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.32);
    font-size: 1rem;
    line-height: 1.4375em;
    text-align: end; /* Right-align numbers by default */
    direction: inherit;
}

/* Hide spinners when ds-number--no-spinners class is applied */
.ds-number--no-spinners .ds-number__field::-webkit-outer-spin-button,
.ds-number--no-spinners .ds-number__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ds-number--no-spinners .ds-number__field[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ds-number__field:focus {
    outline: none;
    border-color: var(--border-focused);
    background: var(--background-focused);
}

.ds-number__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover);
}

.ds-number__field:disabled {
    opacity: var(--opacity-medium);
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Number field placeholder alignment */
.ds-number__field::placeholder {
    text-align: end;
}

/* Compact modifier - 36px height */
.ds-number--compact .ds-number__field {
    height: 36px;
    padding: var(--spacing-sm);
    font-size: 0.875rem;
    line-height: 1.25em;
    border-radius: 8px;
}

.ds-number--compact .ds-number__label {
    top: 50%;
    transform: translateY(-50%); /* Vertical centering for compact mode */
    font-size: 0.875rem;
    line-height: 1.25em;
}

.ds-number__label {
    position: absolute;
    left: 12px; /* Fallback for older browsers */
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%); /* Vertical centering */
    pointer-events: none;
    transform-origin: left center; /* Fallback for older browsers */
    transform-origin: inline-start center;
    max-width: calc(100% - 24px);
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                top 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    font-family: var(--font-family-primary);
    line-height: 1.4375em;
    color: var(--ds-input-label-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    padding: 0 4px;
    z-index: 1;
    text-align: start;
}

/* RTL fallback for older browsers */
html[dir="rtl"] .ds-number__label {
    left: auto;
    right: 12px;
    transform-origin: right center;
}

/* Focus, has-value, or has-placeholder state - label moves to top */
.ds-number--active .ds-number__label {
    top: -9px;
    font-size: 12px;
    transform: none;
    background-color: var(--color-white);
    color: var(--ds-input-label-active);
}

/* Compact version active state adjustment */
.ds-number--compact.ds-number--active .ds-number__label {
    top: -8px;
    font-size: 10px;
    transform: none;
}

/* RTL support for number fields */
html[dir="rtl"] .ds-number__field {
    text-align: start; /* In RTL, start means right-aligned in the logical sense */
}

html[dir="rtl"] .ds-number__field::placeholder {
    text-align: start;
}

/* Dark theme support */
.ds-page--dark .ds-number__field {
    background: var(--color-gray-200);
    border-color: var(--border-default-dark);
    color: var(--color-white);
}

.ds-page--dark .ds-number__label {
    color: var(--ds-input-label-default);
    background-color: transparent;
}

.ds-page--dark .ds-number--active .ds-number__label {
    background-color: var(--color-background);
    color: var(--ds-input-label-default);
}

.ds-page--dark .ds-number__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover-dark);
}

.ds-page--dark .ds-number__field:focus {
    border-color: var(--border-focused-dark);
    background: var(--background-focused-dark);
}

/* Active state for dark theme */
.ds-page--dark .ds-number--active .ds-number__label {
    background-color: transparent;
}

/* Placeholder color for dark theme */
.ds-page--dark .ds-number__field::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1; /* Firefox fix */
}

/* Error state for dark theme */
.ds-page--dark .ds-number.ds-number--error .ds-number__field {
    border-color: #FF0000;
}

.ds-page--dark .ds-number.ds-number--error .ds-number__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-page--dark .ds-number.ds-number--error .ds-number__label {
    color: var(--ds-input-label-error);
}

/* Status */
.ds-status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 26px;
    border-radius: 20px;
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    color: #000000;
}

.ds-status--inprogress {
    background: var(--color-status-inprogress);
}

.ds-status--draft {
    background: var(--color-status-draft);
}

.ds-status--ready-to-sign {
    background: var(--color-status-ready-to-sign);
}

.ds-status--sent {
    background: var(--color-status-sent);
}

.ds-status--signed {
    background: var(--color-status-signed);
}

.ds-status--invoice {
    background: var(--color-status-invoice);
}

.ds-status--canceled {
    background: var(--color-status-canceled);
}

/* Role */
.ds-role {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*
*/
    width: 96px;
    height: 26px;
    border-radius: 20px;
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    color: #FFFFFF;
}

.ds-role--sysadmin {
    background: var(--color-role-sysadmin);
}

.ds-role--admin {
    background: var(--color-role-admin);
}

.ds-role--technician {
    background: var(--color-role-technician);
}

.ds-role--subcontractor {
    background: var(--color-role-subcontractor);
}


/* Textarea */
.ds-textarea {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.ds-textarea.ds-textarea--error .ds-textarea__field {
    border-color: #FF0000;
}

.ds-textarea.ds-textarea--error .ds-textarea__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-textarea.ds-textarea--error .ds-textarea__label {
    color: #FF0000;
}

.ds-textarea__field {
    background: var(--color-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    min-height: 100px;
    resize: vertical;
    font-family: var(--font-family-primary);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.32);
    font-size: 1rem;
    line-height: 1.4375em;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.ds-textarea__field:focus {
    outline: none;
    border-color: var(--border-focused);
    background: var(--background-focused);
}

.ds-textarea__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover);
}

.ds-textarea__field:disabled {
    opacity: var(--opacity-medium);
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.05);
}

.ds-textarea__label {
    position: absolute;
    left: 12px;
    top: 16px;
    pointer-events: none;
    transform-origin: left top;
    max-width: calc(100% - 24px);
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                top 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    font-family: var(--font-family-primary);
    line-height: 1.4375em;
    color: rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    padding: 0 4px;
    z-index: 1;
}

/* RTL fallback for older browsers */
html[dir="rtl"] .ds-textarea__label {
    left: auto;
    right: 12px;
    transform-origin: right center;
}

/* Focus, has-value, or has-placeholder state - label moves to top */
.ds-textarea--focused .ds-textarea__label,
.ds-textarea--has-value .ds-textarea__label,
.ds-textarea--has-placeholder .ds-textarea__label {
    top: -9px;
    transform: scale(0.75);
    background-color: transparent;
}

/* Label color in focused state */
.ds-textarea--focused .ds-textarea__label {
    color: var(--label-focused);
}

/* Dark theme */
.ds-page--dark .ds-textarea__field {
    background: var(--color-gray-200);
    border-color: var(--border-default-dark);
    color: var(--color-white);
}

.ds-page--dark .ds-textarea__label {
    color: var(--ds-input-label-default);
}

.ds-page--dark .ds-textarea__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover-dark);
}

.ds-page--dark .ds-textarea__field:focus {
    border-color: var(--border-focused-dark);
    background: var(--background-focused-dark);
}

.ds-page--dark .ds-textarea--focused .ds-textarea__label,
.ds-page--dark .ds-textarea--has-value .ds-textarea__label,
.ds-page--dark .ds-textarea--has-placeholder .ds-textarea__label {
    background-color: transparent;
}

/* Label color in focused state for dark theme */
.ds-page--dark .ds-textarea--focused .ds-textarea__label {
    color: var(--label-focused-dark);
}

/* Error state for dark theme */
.ds-page--dark .ds-textarea.ds-textarea--error .ds-textarea__field {
    border-color: #FF0000;
}

.ds-page--dark .ds-textarea.ds-textarea--error .ds-textarea__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-page--dark .ds-textarea.ds-textarea--error .ds-textarea__label {
    color: #FF0000;
}

/* Select */
.ds-select {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.ds-select.ds-select--error .ds-select__field {
    border-color: #FF0000;
}

.ds-select.ds-select--error .ds-select__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-select.ds-select--error .ds-select__label {
    color: #FF0000;
}

.ds-select__field {
    background: var(--color-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: rgba(0, 0, 0, 0.87);
    height: 56px;
    width: 100%;
    appearance: none;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-size: 1rem;
    line-height: 1.4375em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.54)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
}

.ds-select__field:focus {
    outline: none;
    border-color: var(--border-focused);
    background: var(--background-focused);
}

.ds-select__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover);
}

.ds-select__field:disabled {
    opacity: var(--opacity-medium);
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.05);
}

.ds-select__label {
    position: absolute;
    left: 12px;
    top: 18px;
    pointer-events: none;
    transform-origin: left top;
    max-width: calc(100% - 24px);
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                top 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    font-family: var(--font-family-primary);
    line-height: 1.4375em;
    color: rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    padding: 0 4px;
    z-index: 1;
}

/* Focus, has-value, or has-placeholder state - label moves to top */
.ds-select--focused .ds-select__label,
.ds-select--has-value .ds-select__label,
.ds-select--has-placeholder .ds-select__label {
    top: -9px;
    font-size: 12px;
    transform: none;
    background-color: transparent;
}

/* Label color in focused state */
.ds-select--focused .ds-select__label {
    color: var(--label-focused);
}

.ds-select__field option {
    background: var(--color-white);
    color: rgba(0, 0, 0, 0.87);
    padding: var(--spacing-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-default);
}

.ds-select__field option:hover {
    background: rgba(0, 0, 0, 0.08);
}

.ds-select__field option:focus {
    background: rgba(0, 0, 0, 0.12);
    outline: none;
}

.ds-select__field option:active {
    background: rgba(0, 0, 0, 0.16);
}

/* Dark theme */
.ds-page--dark .ds-select__field {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: var(--border-default-dark);
    color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.ds-page--dark .ds-select__label {
    color: var(--ds-input-label-default);
}

.ds-page--dark .ds-select__field:hover:not(:focus):not(:disabled) {
    border-color: var(--border-hover-dark);
}

.ds-page--dark .ds-select__field:focus {
    border-color: var(--border-focused-dark);
    background: var(--background-focused-dark);
}

.ds-page--dark .ds-select--focused .ds-select__label,
.ds-page--dark .ds-select--has-value .ds-select__label,
.ds-page--dark .ds-select--has-placeholder .ds-select__label {
    background-color: transparent;
}

/* Label color in focused state for dark theme */
.ds-page--dark .ds-select--focused .ds-select__label {
    color: var(--label-focused-dark);
}

.ds-page--dark .ds-select__field option {
    background: var(--color-dark-blue);
    color: var(--color-white);
    padding: var(--spacing-md);
}

.ds-page--dark .ds-select__field option:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ds-page--dark .ds-select__field option:focus {
    background: var(--color-gray-200);
}

.ds-page--dark .ds-select__field option:active {
    background: rgba(255, 255, 255, 0.20);
}

/* Error state for dark theme */
.ds-page--dark .ds-select.ds-select--error .ds-select__field {
    border-color: #FF0000;
}

.ds-page--dark .ds-select.ds-select--error .ds-select__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-page--dark .ds-select.ds-select--error .ds-select__label {
    color: #FF0000;
}

/* Containers */
.ds-container-section {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    background: var(--color-gray-200);
    border: 1px solid var(--color-stroke);
    margin: var(--spacing-md) 0;
}

.ds-container-card {
    padding: var(--spacing-lg);
    background: var(--color-gray-200);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-md);
    backdrop-filter: var(--blur-effect-xs);
    margin: var(--spacing-md) 0;
}

.ds-container-panel {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-stroke);
    margin: var(--spacing-sm) 0;
}

/* Alerts */
.ds-alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    margin: var(--spacing-md) 0;
}

.ds-alert--dense {
    padding: var(--spacing-sm);
}

.ds-alert__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.ds-alert--info {
    background: rgba(0, 140, 255, 0.2);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.ds-alert--success {
    background: rgba(41, 193, 11, 0.2);
    border-color: var(--color-status-signed);
    color: var(--color-white);
}

.ds-alert--warning {
    background: rgba(255, 159, 28, 0.2);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.ds-alert--error {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--color-status-canceled);
    color: var(--color-white);
}

/* Custom Dropdown */
.ds-dropdown {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.ds-dropdown.ds-dropdown--error .ds-dropdown__field {
    border-color: #FF0000;
}

.ds-dropdown.ds-dropdown--error .ds-dropdown__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-dropdown.ds-dropdown--error .ds-dropdown__label {
    color: #FF0000;
}

.ds-dropdown__field {
    background: var(--color-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: rgba(0, 0, 0, 0.87);
    height: 56px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-default);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.32);
    font-size: 1rem;
    line-height: 1.4375em;
    outline: none;
}

.ds-dropdown--open .ds-dropdown__field {
    border-radius: var(--radius-md) var(--radius-md) 0px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ds-dropdown__field:focus {
    border-color: var(--border-focused);
    background: var(--background-focused);
}

.ds-dropdown__field:hover:not(:focus) {
    border-color: var(--border-hover);
}

.ds-dropdown--disabled .ds-dropdown__field {
    opacity: var(--opacity-medium);
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.05);
}

.ds-dropdown--readonly .ds-dropdown__field {
    cursor: default;
    background-color: rgba(0, 0, 0, 0.02);
}

.ds-dropdown--readonly .ds-dropdown__field:hover {
    border-color: var(--border-input);
}

.ds-dropdown__value {
    flex: 1;
    text-align: start;
    direction: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-dropdown__placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.ds-dropdown__arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    color: rgba(0, 0, 0, 0.54);
}

.ds-dropdown__arrow--open {
    transform: rotate(180deg);
}

.ds-dropdown__label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%); /* Vertical centering */
    pointer-events: none;
    transform-origin: left center;
    max-width: calc(100% - 24px);
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
                top 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    font-family: var(--font-family-primary);
    line-height: 1.4375em;
    color: rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    padding: 0 4px;
    z-index: 1;
    background-color: transparent;
}

/* RTL fallback for older browsers */
html[dir="rtl"] .ds-dropdown__label {
    left: auto;
    right: 12px;
    transform-origin: right center;
}

/* Focus, has-value, or has-placeholder state - label moves to top */
.ds-dropdown--focused .ds-dropdown__label,
.ds-dropdown--has-value .ds-dropdown__label,
.ds-dropdown--has-placeholder .ds-dropdown__label {
    top: -9px;
    font-size: 12px;
    transform: none;
}

/* Label color in focused state */
.ds-dropdown--focused .ds-dropdown__label {
    color: var(--label-focused);
}

.ds-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-dropdown-menu);
    border-left: 1px solid var(--border-default);
    border-right: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    border-radius: 0px 0px var(--radius-md) var(--radius-md);
    backdrop-filter: var(--blur-effect-l);
    z-index: var(--z-index-dropdown);
    max-height: 200px;
    overflow-y: auto;
}

/* Special handling for dropdown in modal - ensure it's always visible */
.ds-modal .ds-dropdown__menu {
    /* For max 3 items: 49px per item = ~147px + borders/padding = ~160px */
    max-height: 160px;
}

/* If dropdown is near bottom of modal, position it upward */
.ds-modal .ds-dropdown:last-child .ds-dropdown__menu,
.ds-modal .ds-form-row:last-child .ds-dropdown__menu {
    top: auto;
    bottom: 100%;
    border-top: 1px solid var(--border-default);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0px 0px;
}

/* When dropdown opens upward, modify field border radius and hide label */
.ds-modal .ds-dropdown:last-child.ds-dropdown--open .ds-dropdown__field,
.ds-modal .ds-form-row:last-child .ds-dropdown--open .ds-dropdown__field {
    border-radius: 0px 0px var(--radius-md) var(--radius-md);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Hide label when dropdown opens upward to prevent partial visibility */
.ds-modal .ds-dropdown:last-child.ds-dropdown--open .ds-dropdown__label,
.ds-modal .ds-form-row:last-child .ds-dropdown--open .ds-dropdown__label {
    opacity: 0;
    visibility: hidden;
}

.ds-dropdown__option {
    padding: var(--spacing-md);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-default);
    font-size: 1rem;
    line-height: 1.4375em;
    height: 49px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

.ds-dropdown__option:last-child {
    border-bottom: none;
    border-radius: 0px 0px var(--radius-md) var(--radius-md);
}

/* Remove border radius from last option when dropdown opens upward */
.ds-modal .ds-dropdown:last-child .ds-dropdown__option:last-child,
.ds-modal .ds-form-row:last-child .ds-dropdown__option:last-child {
    border-radius: 0;
}

.ds-dropdown__option:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ds-dropdown__option:active,
.ds-dropdown__option--selected {
    background: rgba(255, 255, 255, 0.20);
}

/* №70: "No results found" line under the search - not clickable */
.ds-dropdown__option--empty,
.ds-dropdown__option--empty:hover,
.ds-dropdown__option--empty:active {
    background: none;
    cursor: default;
    opacity: 0.7;
}

/* Multiselect specific styles */
.ds-dropdown--multiselect .ds-dropdown__option {
    padding: 8px 12px;
}

.ds-dropdown__option-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-dropdown__option-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.ds-dropdown__option-text {
    flex: 1;
    cursor: pointer;
}

/* Dark theme */
.ds-page--dark .ds-dropdown__menu {
    border-left: 1px solid var(--border-default-dark);
    border-right: 1px solid var(--border-default-dark);
    border-bottom: 1px solid var(--border-default-dark);
}

/* Dark theme support for modal dropdown positioning */
.ds-page--dark .ds-modal .ds-dropdown:last-child .ds-dropdown__menu,
.ds-page--dark .ds-modal .ds-form-row:last-child .ds-dropdown__menu {
    border-top: 1px solid var(--border-default-dark);
    border-bottom: none;
}

/* Dark theme: seamless connection when dropdown opens upward */
.ds-page--dark .ds-modal .ds-dropdown:last-child.ds-dropdown--open .ds-dropdown__field,
.ds-page--dark .ds-modal .ds-form-row:last-child .ds-dropdown--open .ds-dropdown__field {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Dark theme: hide label when dropdown opens upward */
.ds-page--dark .ds-modal .ds-dropdown:last-child.ds-dropdown--open .ds-dropdown__label,
.ds-page--dark .ds-modal .ds-form-row:last-child .ds-dropdown--open .ds-dropdown__label {
    opacity: 0;
    visibility: hidden;
}

.ds-page--dark .ds-dropdown__field {
    background: var(--color-gray-200);
    border-color: var(--border-default-dark);
    color: var(--color-white);
}

.ds-page--dark .ds-dropdown--open .ds-dropdown__field {
    border-radius: var(--radius-md) var(--radius-md) 0px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ds-page--dark .ds-dropdown__placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.ds-page--dark .ds-dropdown__arrow {
    color: rgba(255, 255, 255, 0.7);
}

.ds-page--dark .ds-dropdown__label {
    color: var(--ds-input-label-default);
    background-color: transparent;
}

.ds-page--dark .ds-dropdown__field:hover:not(:focus) {
    border-color: var(--border-hover-dark);
}

.ds-page--dark .ds-dropdown__field:focus {
    border-color: var(--border-focused-dark);
    background: var(--background-focused-dark);
}

.ds-page--dark .ds-dropdown--focused .ds-dropdown__label,
.ds-page--dark .ds-dropdown--has-value .ds-dropdown__label,
.ds-page--dark .ds-dropdown--has-placeholder .ds-dropdown__label {
    background-color: transparent;
}

/* Label color in focused state for dark theme */
.ds-page--dark .ds-dropdown--focused .ds-dropdown__label {
    color: var(--label-focused-dark);
}

/* Error state for dark theme */
.ds-page--dark .ds-dropdown.ds-dropdown--error .ds-dropdown__field {
    border-color: #FF0000;
}

.ds-page--dark .ds-dropdown.ds-dropdown--error .ds-dropdown__field:focus {
    border-color: #FF0000;
    box-shadow: 0px 0px 0px 1px #FF0000;
}

.ds-page--dark .ds-dropdown.ds-dropdown--error .ds-dropdown__label {
    color: #FF0000;
}

/* Tab Navigation Component */
.ds-tabs {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

/* Tab wrapper for auth pages - natural width for proper alignment */
.ds-auth-tabs .ds-tabs {
    width: auto;
}

/* RTL support for active tab indicator */
html[dir="rtl"] .ds-tab--active::after {
    left: auto !important;
    right: 0 !important;
}

.ds-tab {
    position: relative;
    display: flex;
    align-items: center;
    font-family: 'Geist', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
    padding-bottom: 4px;
}

.ds-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}

.ds-tab--active {
    color: var(--color-white);
}

.ds-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 10px;
}

/* Section Headers */
.ds-section-title {
    font-family: 'Geist', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-white);
    margin: 0;
}

.ds-section-wrapper {
    margin-bottom: 10px;
}

.ds-section-wrapper--first {
    margin-top: 24px;
}

.ds-section-wrapper--rest {
    margin-top: 32px;
}

/* Authentication Layout Components */
.ds-auth-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    overflow: hidden;
}

/* Auth tabs container - aligns tabs to the left by default */
.ds-auth-tabs {
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Align tabs to the left in LTR */
}

/* RTL support - align tabs to the right */
html[dir="rtl"] .ds-auth-tabs {
    justify-content: flex-start;
}

.ds-auth-content {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 0 var(--spacing-lg) 0;
    min-height: 0;
    margin-left:auto;
    margin-right:auto;
}

.ds-auth-form {
    width: 100%;
    max-width: var(--width-content-container);
    display: flex;
    flex-direction: column;
}

/* Checkbox Component */
.ds-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-checkbox input[type="checkbox"] {
    width: 13px;
    height: 13px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    outline: none;
    transition: all 0.2s ease;
}

.ds-checkbox input[type="checkbox"]:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ds-checkbox input[type="checkbox"]:focus-visible {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(0, 140, 255, 0.2);
}

.ds-checkbox input[type="checkbox"]:checked {
    border-color: var(--color-white);
}

.ds-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ds-checkbox label {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #FFFFFF;
    cursor: pointer;
    margin: 0;
    user-select: none;
    text-decoration: underline;
}

.ds-checkbox-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #FFFFFF;
}

.ds-checkbox-link {
    color: var(--color-secondary);
    text-decoration: underline;
    cursor: pointer;
}

/* Split row component for forms */
.ds-row--space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

/* Validation message component */
.ds-validation-message {
    color: var(--color-error);
    font-size: 12px;
    margin-top: 4px;
    display: block;
    line-height: 1.2;
    font-family: 'Manrope', sans-serif;
}

/* Auth link components */
.ds-auth-link {
    text-decoration: underline;
    color: #A0A0A0;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
}

.ds-auth-link:hover {
    opacity: 0.8;
    color: #A0A0A0;
}

/* Auth footer component - for "New here? Sign up" sections */
.ds-auth-footer {
    font-family: 'Geist', sans-serif;
    font-weight: 106;
    font-size: 12px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.ds-auth-footer a {
    color: #FFFFFF;
    font-weight: 126;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.ds-auth-footer a:hover {
    opacity: 0.8;
    color: #FFFFFF;
}

/* RTL support for auth footer */
html[dir="rtl"] .ds-auth-footer {
    direction: rtl;
}