.form-control , textarea ,.form-select{
    border: 1px solid var(--bs-gray-600);
    resize: none;
    color: var(--bs-gray-800);
}

input::placeholder, textarea::placeholder {
    color: var(--bs-gray-800);
}

input::-webkit-calendar-picker-indicator {
    display: none;
    cursor: pointer;
}

.form-control:focus, .form-select:focus {
    outline: none;
    border: 1px solid var(--bs-purple-dark);
}

input[type="date"]:focus , .customer-service-email-input:focus , .custom-select:focus {
    outline: none;
    border-color: none;
}

.not-robot-btn{
    border: 1px solid var(--bs-gray-700);
    border-radius: 12px;
    width: fit-content;
}

.custom-checkbox {
    width: 2.5rem;
    height: 2.5rem;
}

.customer-service-input , .custom-select{
    border-color: #ACACAC;
    color: #8D8D8D;
}

.custom-select {
    width: 100%;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.customer-service-header{
    background: url(../assets/images/customer-service-bg.jpg) no-repeat;
    background-size: cover;
    height: 18rem;
    border-radius: 2.4rem;
}

/* ---------------- required markers, hints and errors (item 43) ---------------- */
.req-mark {
    color: var(--bs-danger);
    margin-inline-start: 0.2rem;
}

.field-hint {
    color: #6C757D;
}

.field-error {
    color: var(--bs-danger);
}

.form-summary {
    color: var(--bs-danger);
    border: 1px solid var(--bs-danger);
    border-radius: 12px;
    padding: 1.2rem 1.6rem;
}

/* One red outline on whichever control the field wraps, so a plain input and a
   composed field (phone, date) fail the same way. */
.field-invalid > .form-control,
.field-invalid > .form-select,
.field-invalid > .not-robot-btn {
    border-color: var(--bs-danger);
}

.field-invalid > .form-control:focus,
.field-invalid > .form-select:focus {
    border-color: var(--bs-danger);
}

/* ---------------- phone field (item 48) ---------------- */
/* The country code is fixed, so it is furniture rather than something to type
   past: it sits in its own cell and the caret starts on the subscriber digits. */
.phone-field {
    padding: 0;
}

.phone-prefix {
    color: var(--bs-custom-gray-dark);
    background-color: var(--bs-gray-100);
    border-inline-end: 1px solid var(--bs-gray-600);
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.phone-input {
    direction: ltr;
    text-align: start;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* the number reads left-to-right even inside the Arabic page */
[dir="rtl"] .phone-input {
    text-align: right;
}

/* ---------------- date field (item 46) ---------------- */
.date-field {
    padding: 0;
}

.date-input {
    direction: ltr;
    text-align: start;
    min-width: 0;
}

[dir="rtl"] .date-input {
    text-align: right;
}

.date-trigger {
    cursor: pointer;
    border-inline-start: 1px solid var(--bs-gray-600) !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.date-trigger:hover,
.date-trigger:focus-visible {
    background-color: var(--bs-gray-100) !important;
}

/* ---------------- services select (item 47) ---------------- */
/* A long service name used to slide under the caret on narrow screens. */
.form-select {
    text-overflow: ellipsis;
    padding-inline-end: 4rem !important;
}

/* ---------------- the robot check ---------------- */
.not-robot-btn {
    cursor: pointer;
}

.custom-checkbox {
    accent-color: var(--bs-purple-dark);
    flex-shrink: 0;
}

/* ---------------- result popups: success (item 44) and failure ---------------- */
/* Bootstrap modals dressed like the inline panel they replaced: purple border
   on the light ground, and the .footer-content corner radius (item 62). */
.form-result-modal {
    --bs-modal-width: 64rem;
    --bs-modal-margin: 1.6rem;
    --bs-modal-bg: var(--bs-gray-100);
    --bs-modal-border-color: var(--bs-purple-dark);
    --bs-modal-border-radius: 3.6rem;
}

/* keep the heading clear of the close button */
.form-result-modal h2 {
    padding-inline: 3rem;
}

.form-result-mark {
    color: var(--bs-purple-dark);
}

.form-result-mark-failure {
    color: var(--bs-danger);
}

/* while the booking is being sent */
.submit-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

@media (max-width: 575px) {
    .not-robot-field,
    .not-robot-field > .not-robot-btn,
    .submit-btn,
    .form-result-modal .btn-reset-form {
        width: 100%;
    }

    .submit-btn {
        justify-content: center;
    }
}

/* ---------------- technical-support forms ---------------- */
/* Sign-in and password reset: one centred column, as in the approved design. */
.support-form {
    width: 100%;
    max-width: 72rem;
}

.support-form input {
    min-width: 0;
}

/* The input inside the bordered wrapper drops its own outline, so the wrapper
   has to show where the keyboard is. */
.customer-service-input:focus-within {
    border-color: var(--bs-purple-dark);
}

.field-invalid > .customer-service-input,
.field-invalid > .customer-service-input:focus-within {
    border-color: var(--bs-danger);
}

.password-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.password-toggle:hover img {
    opacity: 0.7;
}

.form-status {
    color: var(--bs-purple-dark);
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-purple-dark);
    border-radius: 12px;
    padding: 1.2rem 1.6rem;
}