/* Platform-defined customer form fields (Client service request modal) */

.create-account .platform-customer-form-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: stretch;
}

.create-account .platform-customer-form-section[hidden] {
    display: none !important;
}

.create-account .client-form-loading {
    padding: 12px;
    font-size: 14px;
    color: var(--khames-design-system-colors-gray-dark, #666);
    text-align: center;
}

.create-account .req-star,
.create-account .label .req-star,
.create-account .client-form-label .req-star {
    color: var(--colors-additional-failure, #db3a34) !important;
    margin-inline-start: 4px;
    font-weight: 700;
}

.create-account .client-form-desc {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--khames-design-system-colors-gray-dark, #666);
    line-height: 1.4;
}

.create-account .client-form-error {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--colors-additional-failure, #db3a34);
    line-height: 1.35;
    unicode-bidi: plaintext;
    text-align: start;
}

.create-account .client-form-field.has-error .field {
    border-color: var(--colors-additional-failure, #db3a34) !important;
}

/* Dynamic selects: full width, clickable, dropdown not clipped */
.create-account .client-form-field .field.client-form-field-control--select {
    overflow: visible;
}

.create-account .client-form-field .field .client-form-select:not(.client-select-native--hidden),
.create-account .client-form-field .field select.client-form-input:not(.client-select-native--hidden) {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 1.25rem;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

[dir="ltr"] .create-account .client-form-field .field .client-form-select,
[dir="ltr"] .create-account .client-form-field .field select.client-form-input,
html[dir="ltr"] .create-account .client-form-field .field .client-form-select,
html[dir="ltr"] .create-account .client-form-field .field select.client-form-input {
    text-align: left;
    direction: ltr;
}

[dir="rtl"] .create-account .client-form-field .field .client-form-select,
[dir="rtl"] .create-account .client-form-field .field select.client-form-input,
html[dir="rtl"] .create-account .client-form-field .field .client-form-select,
html[dir="rtl"] .create-account .client-form-field .field select.client-form-input {
    text-align: right;
    direction: rtl;
}

.create-account .client-form-field .label {
    z-index: 0;
    pointer-events: none;
}

.create-account .client-form-field .field input,
.create-account .client-form-field .field textarea,
.create-account .client-form-field .field select,
.create-account .client-form-field .field .client-form-input {
    pointer-events: auto;
    touch-action: manipulation;
}

.create-account .client-form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.create-account .client-form-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.create-account .client-form-file-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.create-account .client-form-file-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--colors-primary-500, #6a5d8b);
}

.create-account .client-form-file-name {
    font-size: 13px;
    color: var(--khames-design-system-colors-gray-dark, #666);
}

.create-account .client-form-field-control--radio .field {
    align-items: flex-start;
    flex-direction: column;
}

.create-account .client-form-photos-upload.field-2 {
    cursor: pointer;
}

.create-account .client-form-image-gallery {
    width: 100%;
    font-size: 13px;
    color: var(--colors-primary-500, #6a5d8b);
    margin-bottom: 6px;
}

#create-account #service-request-photos-section[hidden],
.create-account #service-request-photos-section[hidden] {
    display: none !important;
}

/* City + shared service-request field validation */
.create-account .service-request-field.has-error .field {
    border-color: var(--colors-additional-failure, #db3a34) !important;
}

.create-account .service-request-field-error {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--colors-additional-failure, #db3a34);
    line-height: 1.35;
    unicode-bidi: plaintext;
    text-align: start;
}

.create-account .service-request-form-alert {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
    unicode-bidi: plaintext;
    text-align: start;
}

.create-account .service-request-form-alert.is-error {
    background-color: #fef2f2;
    border: 1px solid var(--colors-additional-failure, #db3a34);
    color: #991b1b;
}

.create-account .service-request-form-alert.is-success {
    background-color: #ecfdf5;
    border: 1px solid var(--colors-additional-success, #49a078);
    color: #065f46;
}