/**
 * Auth Modals CSS
 */

/* Base Modal Styles (vanilla CSS replacement for Bootstrap) */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
    max-width: 500px;
}

.modal.show .modal-dialog {
    pointer-events: auto;
}

.modal-dialog-centered {
    min-height: calc(100% - 1rem);
    display: flex;
    align-items: center;
}

.modal-lg {
    max-width: 800px;
}

body.modal-open {
    overflow: hidden;
}

/* Bootstrap utility classes (vanilla CSS replacements) */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.text-center {
    text-align: center !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.border-0 {
    border: 0 !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-6, .col-md-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.form-group {
    margin-bottom: 1rem;
}

/* Base input styles */
.form-control-login {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
}

.form-control-login:focus {
    border-color: #E50050;
    box-shadow: 0 0 0 3px rgba(229, 0, 80, 0.12);
}

.form-control-login::placeholder {
    color: #adb5bd;
}

/* Input group for password toggle */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control-login {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-left: none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.input-group-text:hover {
    background-color: #e9ecef;
}

/* Close button base style */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
    cursor: pointer;
}

.btn-close:hover {
    opacity: 1;
}

/* Modal styling */
.modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    /* .modal-dialog-centered makes the dialog a flex container, so this is a
       flex item — and flex items size to their content on the main axis rather
       than filling. Without an explicit width the card came out narrower than
       the dialog and sat flush against its left edge, reading as an off-centre,
       left-cropped popup even though .modal.show centres the dialog correctly.
       Bootstrap's own .modal-content carries this width; ours had lost it. */
    width: 100%;
}

.modal-header {
    padding: 0;
    border-bottom: none;
    position: absolute;
    right: 24px;
    top: 24px;
    left: auto;
    width: auto;
    z-index: 20;
    background: transparent;
    pointer-events: none;
}

.modal-header.border-0 {
    border: 0 !important;
}

.modal-header .btn-close {
    box-sizing: border-box;
    background: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M18 6L6 18M6 6l12 12'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    border-radius: 0;
    padding: 0;
    margin: 0;
    opacity: 1;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    pointer-events: auto;
    flex-shrink: 0;
}

.modal-header .btn-close:hover {
    background-color: transparent;
    opacity: 0.6;
}

#loginModal .modal-content,
#signupModal .modal-content {
    position: relative;
}

#loginModal .appointment-form {
    position: relative;
}

.modal-body {
    padding: 0;
}

/* Override appointment form styles for modals */
.modal .appointment-form {
    border-radius: 20px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    height: auto;
    min-height: auto;
    padding: 40px;
    background-color: white;
}

.modal .section-title h3 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.modal .section-title h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.modal .small-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    text-transform: none !important;
    font-weight: 400;
    line-height: 1.5;
}

.modal .policy-link {
    color: var(--primary-color);
    text-decoration: underline;
}

.modal .policy-link:hover {
    color: var(--accent-color);
}

/* Form elements */
.modal .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 0.25em;
}

.modal .form-check-label {
    padding-left: 5px;
}

.modal .password-toggle {
    cursor: pointer;
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-left: none;
    color: #6c757d;
}

.modal .password-toggle:hover {
    background: #e9ecef;
    color: #333;
}

.modal .input-group {
    flex-wrap: initial;
}

.modal .input-group .form-control {
    border-right: none;
}

/* Alert styling */
.modal .alert {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.modal .alert.d-none {
    display: none !important;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
}

/* Responsive adjustments */
/* Modal animations - smooth crossfade */
.modal {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
}

.modal.show {
    opacity: 1;
    pointer-events: auto;
}

.modal .modal-dialog {
    transform: scale(0.95);
    transition: transform 0.2s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* Button base + animation */
.modal .btn-default {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: #E50050;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.2s ease;
    text-decoration: none;
}

.modal .btn-default:hover {
    background: #c9003f;
}

.modal .btn-default::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.modal .btn-default:hover::after {
    width: 300px;
    height: 300px;
}

/* Login subtitle */
.login-subtitle {
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Login privacy link */
.login-privacy-link {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 13px;
}

.login-privacy-link a {
    color: #999;
    text-decoration: none;
}

.login-privacy-link a:hover {
    color: #666;
    text-decoration: underline;
}

/* Social login buttons */
.social-login-buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    /* margin-bottom: 20px;*/
    justify-content: center;
    align-items: center;
}

.btn-social {
    flex: 1;
    max-width: 180px;
    height: 50px;
    padding: 11px;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-social:hover {
    background: #f8f9fa;
    border-color: #ccc;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-social i {
    font-size: 24px;
}

.btn-google {
    border-color: #db4437;
    color: #db4437;
}

.btn-google:hover {
    background: #db4437;
    color: white;
}

.btn-apple {
    border-color: #000;
    color: #000;
}

.btn-apple:hover {
    background: #000;
    color: white;
}

.btn-phone {
    border-color: #0095f6;
    color: #0095f6;
}

.btn-phone:hover {
    background: #0095f6;
    color: white;
}

/* Login first screen — matches Figma phone-auth design */

#loginModal .auth-first-heading {
    margin-bottom: 24px;
    text-align: center;
}

#loginModal .auth-first-heading h2 {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
}

#loginModal .auth-first-heading .login-subtitle {
    margin-bottom: 0;
    color: #888;
}

#loginModal .auth-first-phone-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
    text-align: left;
}

#loginModal .auth-first-phone-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
}

#loginModal .auth-first-country-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: 40px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: default;
    font-family: inherit;
}

#loginModal .auth-first-chevron {
    color: #999;
    flex-shrink: 0;
}

#loginModal .auth-first-phone-field {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 400;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

#loginModal .auth-first-phone-field:focus {
    border-color: var(--primary-color, #e50050);
    box-shadow: 0 0 0 3px rgba(229, 0, 80, 0.1);
}

#loginModal .auth-first-phone-field::placeholder {
    color: #bbb;
}

#loginModal .auth-first-phone-hint {
    font-size: 13px;
    color: #999;
    margin: 0 0 20px;
    text-align: left;
    line-height: 1.4;
}

#loginModal .auth-first-continue-btn {
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 700;
}

#loginModal .auth-first-divider {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#loginModal .auth-first-divider::before,
#loginModal .auth-first-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

#loginModal .auth-first-divider span {
    padding: 0 16px;
    font-size: 13px;
    color: #999;
    text-transform: none;
    font-weight: 400;
}

#loginModal .auth-first-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

#loginModal .auth-first-social-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 8px 16px 8px 44px;
    border: 1.5px solid #e0e0e0;
    border-radius: 50px;
    background: #fff;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    font-family: inherit;
}

#loginModal .auth-first-social-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #333;
}

#loginModal .auth-first-social-label {
    line-height: 1.2;
}

#loginModal .auth-first-social-btn:hover {
    background: #fafafa;
    border-color: #d0d0d0;
}

#loginModal .auth-first-signup-link {
    text-align: center;
    margin: 0 0 16px;
    font-size: 14px;
    color: #000;
    line-height: 1.5;
}

#loginModal .auth-create-account-link {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#loginModal .auth-create-account-link:hover {
    color: #333;
}

#loginModal .login-privacy-link {
    margin-top: 0;
}

@media (max-width: 767px) {
    /* Centred, not top-pinned. flex-start is the usual guard against a centred
       flex item overflowing its scroll container and putting its top out of
       reach — but that cannot happen here: .modal-content below caps at
       calc(100vh - 1rem) and .modal-body scrolls internally, so the card is
       never taller than the viewport. Pinning it to the top only cost the
       vertical centring, leaving the popup sitting against the top edge. */
    .modal.show {
        align-items: center;
    }

    .modal .modal-dialog,
    .modal-dialog {
        margin: 0.5rem auto;
        width: calc(100% - 1rem);
    }

    /* Full-height dialog centring its own content is the same pattern the
       desktop rules use, and degrades safely: if the card ever did outgrow the
       viewport the dialog grows past min-height and the card starts at the top
       rather than being clipped out of reach. */
    .modal-dialog-centered {
        min-height: calc(100% - 1rem);
        align-items: center;
    }

    .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .modal-body {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .modal .appointment-form {
        padding: 30px 20px;
    }

    .modal-header {
        right: 20px;
        top: 20px;
    }

    .modal-header .btn-close {
        background-size: 22px 22px;
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }

    #loginModal .auth-first-heading h2 {
        font-size: 20px;
    }

    #loginModal .auth-first-country-code,
    #loginModal .auth-first-phone-field {
        height: 38px;
    }

    #loginModal .auth-first-continue-btn {
        min-height: 38px;
        padding: 7px 14px;
        font-size: 14px;
    }

    #loginModal .auth-first-social-btn {
        min-height: 38px;
        padding: 7px 14px 7px 40px;
        font-size: 14px;
    }

    #loginModal .auth-first-social-icon {
        left: 14px;
        width: 18px;
        height: 18px;
    }

    .modal .section-title h2 {
        font-size: 24px;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 767px) {
        .modal-content {
            max-height: calc(100dvh - 1rem);
        }

        .modal-body {
            max-height: calc(100dvh - 1rem);
        }
    }
}

@media (max-width: 480px) {
    #loginModal .auth-first-heading h2 {
        font-size: 18px;
    }

    #loginModal .auth-first-heading .login-subtitle {
        font-size: 13px;
    }

    #loginModal .auth-first-country-code,
    #loginModal .auth-first-phone-field {
        height: 36px;
    }

    #loginModal .auth-first-country-code {
        padding: 0 10px;
        font-size: 14px;
    }

    #loginModal .auth-first-phone-field {
        padding: 0 12px;
        font-size: 15px;
    }

    #loginModal .auth-first-phone-hint {
        margin-bottom: 16px;
    }

    #loginModal .auth-first-continue-btn {
        min-height: 36px;
        padding: 6px 12px;
        margin-bottom: 16px;
        font-size: 13px;
    }

    #loginModal .auth-first-divider {
        margin-bottom: 16px;
    }

    #loginModal .auth-first-social-buttons {
        gap: 10px;
        margin-bottom: 20px;
    }

    #loginModal .auth-first-social-btn {
        min-height: 36px;
        padding: 6px 12px 6px 36px;
        font-size: 13px;
    }

    #loginModal .auth-first-social-icon {
        left: 12px;
        width: 16px;
        height: 16px;
    }
}

/* ===================================
   Login Options Modal Styles
   =================================== */

.login-options-modal-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 248, 250, 0.98) 100%);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(229, 0, 80, 0.15), 0 0 0 1px rgba(229, 0, 80, 0.05);
    overflow: hidden;
}

.login-options-container {
    padding: 40px 40px 35px;
    text-align: center;
}

.login-options-logo {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.login-options-logo .logo-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: logoFloat 3s ease-in-out infinite;
    overflow: hidden;
}

.login-options-logo .logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.login-options-title {
    font-size: 28px;
    font-weight: 700;
    color: #2c0d18;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.login-options-description {
    font-size: 15px;
    color: #6b5a60;
    line-height: 1.6;
    margin: 0 0 28px;
    /* max-width: 320px; */
    margin-left: auto;
    margin-right: auto;
}

.login-options-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.login-option-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 14px 20px;
    border-radius: 14px;
    border: 2px solid rgba(213, 190, 198, 0.6);
    background: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.login-option-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(229, 0, 80, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.login-option-btn:hover::before {
    opacity: 1;
}

.login-option-btn:hover {
    border-color: rgba(229, 0, 80, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 0, 80, 0.12);
}

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

.login-option-btn .option-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

.login-option-btn .option-text {
    font-size: 15px;
    font-weight: 600;
    color: #2c0d18;
    position: relative;
    z-index: 1;
}

/* Google button specific */
.google-option-btn:hover {
    border-color: rgba(66, 133, 244, 0.5);
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.12);
}

.google-option-btn:hover::before {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Apple button specific */
.apple-option-btn .option-icon {
    color: #000;
}

.apple-option-btn:hover {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.apple-option-btn:hover::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Email button specific - primary action styling */
.email-option-btn {
    background: linear-gradient(135deg, rgba(255, 244, 248, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border-color: rgba(229, 0, 80, 0.3);
}

.email-option-btn .option-icon {
    color: rgba(229, 0, 80, 1);
}

.email-option-btn:hover {
    background: linear-gradient(135deg, rgba(229, 0, 80, 1) 0%, rgba(180, 0, 60, 1) 100%);
    border-color: rgba(229, 0, 80, 1);
}

.email-option-btn:hover .option-icon,
.email-option-btn:hover .option-text {
    color: white;
}

.login-options-divider {
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.login-options-divider::before,
.login-options-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(213, 190, 198, 0.8) 50%, transparent 100%);
}

.login-options-divider span {
    padding: 0 16px;
    font-size: 13px;
    color: #9a8890;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-options-signup {
    font-size: 14px;
    color: #6b5a60;
    margin: 0;
}

.login-options-signup a {
    color: rgba(229, 0, 80, 1);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.login-options-signup a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: rgba(229, 0, 80, 1);
    transition: width 0.3s ease;
}

.login-options-signup a:hover::after {
    width: 100%;
}

.login-options-signup a:hover {
    color: rgba(180, 0, 60, 1);
}

/* Responsive adjustments for Login Options Modal */
@media (max-width: 575px) {
    .login-options-container {
        padding: 30px 24px 28px;
    }

    .login-options-logo .logo-circle {
        width: 64px;
        height: 64px;
    }

    .login-options-logo .logo-circle img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .login-options-title {
        font-size: 24px;
    }

    .login-options-description {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .login-option-btn {
        padding: 12px 16px;
    }

    .login-option-btn .option-icon {
        width: 32px;
        height: 32px;
        margin-right: 12px;
    }

    .login-option-btn .option-text {
        font-size: 14px;
    }
    .btn-social{
        max-width: 130px;
    }
}

/* Spinner for loading states */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.text-primary {
    color: #e50050 !important;
}

/* Visually hidden - for screen readers only */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Additional spacing utilities */
.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Phone Input Group Styling */
.phone-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.phone-input-group:focus-within {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.country-code-select {
    flex-shrink: 0;
    width: 95px;
    border: none;
    border-right: 1px solid #ddd;
    border-radius: 0;
    padding: 8px 12px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

.country-code-select:focus {
    outline: none;
    background-color: #fff;
}

.phone-divider {
    flex-shrink: 0;
    padding: 0 8px;
    color: #999;
    font-size: 16px;
    user-select: none;
}

.phone-input {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: 8px 12px;
    font-size: 14px;
    min-width: 0;
}

.phone-input:focus {
    outline: none;
    box-shadow: none;
}

/* For signup page form (not modal) */
.appointment-form .phone-input-group {
    border: 1px solid #ddd;
}

.appointment-form .phone-input-group:focus-within {
    border-color: var(--primary-color, #007bff);
}

.appointment-form .country-code-select {
    border-right: 1px solid #ddd;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .country-code-select {
        width: 100px;
        font-size: 13px;
        padding: 8px 28px 8px 10px;
    }
    
    .phone-divider {
        padding: 0 6px;
        font-size: 14px;
    }
    
    .phone-input {
        font-size: 13px;
        padding: 8px 10px;
    }
}