:root {
    --primary-color: #2c3e50;
    --secondary-color: #34495e;
    --accent-color: #1abc9c;
    --teal-light: #76ead7;
    --teal-dark: #16a085;
    --light-color: #f5f7f8;
    --text-color: #2c3e50;
    --dark-slate: #1a2530;
    --medium-slate: #546e7a;
}

.modal-content {
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    border: none;
    border-radius: 15px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid rgba(26, 188, 156, 0.2);
    background: linear-gradient(to right, #1abc9c, #16a085);
    color: white;
    border-radius: 15px 15px 0 0;
    padding: 20px;
    position: relative;
    text-align: center; /* وسط‌چین متن */
}

    .modal-header .modal-title {
        width: 100%;
        text-align: center;
        padding: 0 30px; /* فضای کافی برای دکمه بستن */
    }


.btn-close {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    filter: invert(1);
    opacity: 0.8;
    transition: opacity 0.3s;
}

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

.login-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--teal-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 20px rgba(26, 188, 156, 0.3);
    border: 3px solid white;
}

    .login-icon i {
        font-size: 2rem;
        color: white;
    }


/* Fix for asp:Button icon overlapping text */
    .btn-modal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-modal::before {
        content: "\f2f6"; /* Font Awesome sign-in-alt icon */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 14px;
    }

    /* Ensure proper spacing for button text */
    .btn-modal[type="submit"] {
        padding: 12px 24px;
        text-align: center;
    }