/* Main Styles - Additional Customizations */

/* Smooth Scrolling Offset for Fixed Header */
html {
    scroll-padding-top: calc(var(--header-height) + 20px);
}

/* Body Padding for Fixed Header */
body {
    padding-top: 0;
}

/* Focus Styles for Accessibility */
*:focus-visible {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
}

/* Selection Styles */
::selection {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-light);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-text);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-dark);
}

/* Loading State for Form */
.consultation-form.loading {
    opacity: 0.6;
    pointer-events: none;
}

.consultation-form.loading .btn--submit {
    position: relative;
}

.consultation-form.loading .btn--submit::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Form Success Message */
.form-success-message {
    padding: var(--spacing-md);
    background-color: #D1FAE5;
    color: #065F46;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* Form Error Message */
.form-error-message {
    padding: var(--spacing-md);
    background-color: #FEE2E2;
    color: #991B1B;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* Input Field Error State */
.form__input.error,
.form__select.error {
    border-color: var(--color-primary-red);
    background-color: #FEF2F2;
}

.form__error-text {
    color: var(--color-primary-red);
    font-size: var(--font-size-sm);
    margin-top: 4px;
    display: none;
}

.form__group.has-error .form__error-text {
    display: block;
}