/* =========================
       NURSES LIST SECTION
    ========================= */
    .nurses-list-section {
        padding: 70px 0;
        background: #f1f9ff;
    }

    .page-title {
        text-align: center;
        margin-bottom: 40px;
    }

    /* لیست کلی */
    .nurses-list {
        width: 100%;
    }

    /* در بخش NURSES LIST SECTION */

.nurses-table-header {
    display: grid;
    /* grid-template-columns: 90px 1fr 120px 180px 120px 160px; <-- این خط را ویرایش کنید */
    grid-template-columns: 90px 1fr 120px 180px 120px 180px; /* 160px را به 180px تغییر دادم */
    background: #129990;
    color: white;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 600;
    margin-bottom: 10px;
}

.nurse-row {
    display: grid;
    /* grid-template-columns: 90px 1fr 120px 180px 120px 160px; <-- این خط را ویرایش کنید */
    grid-template-columns: 90px 1fr 120px 180px 120px 180px; /* 160px را به 180px تغییر دادم */
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #eee;
    transition: 0.2s;
}

.view-btn {
    /* padding: 8px 14px; <-- اگر این padding باعث مشکل شده، ممکن است نیاز به تنظیم داشته باشد */
    padding: 8px 18px; /* کمی padding افقی را بیشتر کردم */
    background: #129990;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    /* width: auto; <-- اطمینان حاصل کنید که عرض ثابتی اینجا تعریف نشده باشد */
    display: inline-block; /* اطمینان از اینکه رفتار درستی در گرید دارد */
}


    .nurse-row:hover {
        background: #fafafa;
    }

    .profile-cell img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }

    .view-btn:hover {
        background: #096B68;
    }

    .nurses-filter-section {
        margin: 30px 0;
    }

    .filter-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .search-box {
        display: flex;
        background: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        margin-right: 200px;
    }

    .search-box input {
        border: none;
        padding: 10px 14px;
        width: 240px;
        outline: none;
    }

    .search-box button {
        border: none;
        background: #129990;
        color: white;
        padding: 10px 10px;
        margin-right: 300px;
        cursor: pointer;
        font-size: 16px;
    }

    .search-box button:hover {
        background: #096B68;
    }

    .filters {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-left: 100px;
    }

    .filters select {
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

    #clearFilters {
        background: #ff5252;
        color: white;
        border: none;
        padding: 10px 14px;
        border-radius: 8px;
        cursor: pointer;
    }

    #clearFilters:hover {
        background: #e04848;
    }

    .no-result {
        display: none;
        text-align: center;
        padding: 40px;
        font-size: 18px;
        color: #777;
    }

    /* filters */
    .filter-btn {
        border: none;
        padding: 10px 16px;
        border-radius: 8px;
        background: #f2f2f2;
        cursor: pointer;
        transition: .25s;
        font-size: 14px;
    }

    .filter-btn:hover {
        background: #e0e0e0;
    }

    .filter-btn.active {
        background: #90D1CA;
        color: #fff;
    }

    /* =========================
       PUBLIC NURSE PROFILE
    ========================= */

    #profileContainer {
        max-width: 900px;
        margin: 40px auto;
    }

    /* کارت اصلی */
    .profile-card {
        background: #ffffff;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    }

    /* ================= HEADER ================= */

    .profile-header {
        text-align: center;
        padding-bottom: 25px;
        border-bottom: 1px solid #eee;
        margin-bottom: 30px;
    }

    .profile-header img {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
        border: 4px solid #e6f5f3;
    }

    .profile-header h2 {
        margin: 10px 0 8px;
        color: #096B68;
    }

    .profile-meta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #666;
        font-size: 14px;
    }

    .profile-meta .dot {
        width: 5px;
        height: 5px;
        background: #aaa;
        border-radius: 50%;
    }

    .rating {
        margin-top: 10px;
        color: #ffa41c;
        font-weight: bold;
        font-size: 15px;
    }

    /* ================= SECTIONS ================= */

    .profile-section {
        margin-top: 35px;
    }

    .profile-section h3 {
        margin-bottom: 15px;
        font-size: 18px;
        color: #096B68;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* اطلاعات اصلی */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }

    .info-grid div {
        background: #f8f8f8;
        padding: 15px;
        border-radius: 12px;
        text-align: center;
    }

    .info-grid span {
        font-size: 13px;
        color: #888;
    }

    .info-grid p {
        margin-top: 5px;
        font-weight: bold;
    }

    /* ================= COURSES ================= */

    .courses {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .course-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f9f9f9;
        padding: 12px 15px;
        border-radius: 12px;
    }

    .course-item p {
        margin: 3px 0 0;
        font-size: 13px;
        color: #666;
    }

    /* ================= STATUS ================= */

    .status-box {
        background: #e6f5f3;
        color: #096B68;
        padding: 12px;
        border-radius: 12px;
        text-align: center;
        font-weight: bold;
    }

    /* ================= REVIEWS ================= */

    .review-box {
        background: #FFFBDE;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .review-box span {
        display: block;
        font-size: 12px;
        color: #777;
        margin-bottom: 5px;
    }

    /* ================= ACTIONS ================= */

    .profile-actions {
        margin-top: 35px;
        display: flex;
        gap: 15px;
    }

    .profile-actions button {
        flex: 1;
        padding: 14px;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        font-size: 15px;
        font-weight: bold;
        transition: 0.3s;
    }

    /* دکمه ثبت درخواست */
    .profile-actions .primary {
        background: #129990;
        color: white;
    }

    .profile-actions .primary:hover {
        background: #096B68;
    }

    /* دکمه بازگشت */
    .profile-actions .secondary {
        background: #f0f0f0;
        color: rgb(62, 62, 62);
    }

    .profile-actions .secondary:hover {
        background: #ddd;
    }

    .request-form-card {
        background: #ffffff;
        padding: 35px 30px;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        max-width: 600px;
        margin: 40px auto;
        font-family: sans-serif;
    }

    .request-form-card h2 {
        text-align: center;
        color: #096B68;
        margin-bottom: 25px;
    }

    .request-form-card label {
        display: block;
        margin-top: 15px;
        font-weight: 600;
        color: #096B68;
        font-size: 14px;
    }

    .request-form-card input,
    .request-form-card textarea {
        width: 100%;
        padding: 10px 14px;
        margin-top: 6px;
        border-radius: 12px;
        border: 1px solid #ddd;
        box-sizing: border-box;
        font-size: 14px;
        transition: border 0.25s;
    }

    .request-form-card input:focus,
    .request-form-card textarea:focus {
        border-color: #129990;
        outline: none;
    }

    .request-form-card textarea {
        resize: vertical;
        height: 80px;
    }

    .form-actions {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        margin-top: 25px;
    }

    .form-actions button {
        flex: 1;
        padding: 12px 0;
        font-size: 15px;
        font-weight: bold;
        border-radius: 12px;
        cursor: pointer;
        transition: 0.3s;
        border: none;
    }

    /* دکمه ارسال فرم */
    .form-actions .primary {
        background: #129990;
        color: #fff;
    }

    .form-actions .primary:hover {
        background: #096B68;
    }

    /* دکمه بازگشت */
    .form-actions .secondary {
        background: #f0f0f0;
        color: #3e3e3e;
    }

    .request-success {
        max-width: 400px;
        margin: 60px auto;
        text-align: center;
        font-size: 18px;
        color: #2e7d32;
        font-weight: bold;
    }

    .request-success button {
        margin-top: 25px;
        padding: 12px 0;
        width: 100%;
        border-radius: 12px;
        background: #129990;
        color: #fff;
        border: none;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
    }

    .request-success button:hover {
        background: #096B68;
    }

    /* =========================
       MEDIA QUERIES FOR RESPONSIVENESS
    ========================= */

    /* Smaller screens (tablets and phones) */
    @media (max-width: 991px) {
        .nurses-table-header,
        .nurse-row {
            /* grid-template-columns: 70px 1fr 100px 150px 100px 130px; <-- این خط */
            grid-template-columns: 70px 1fr 100px 150px 100px 130px; /* Adjusted for smaller screens */
            padding: 10px 15px;
        }

        .profile-cell img {
            width: 40px;
            height: 40px;
        }

        .search-box {
            margin-right: 100px; /* Reduced margin */
            width: auto; /* Allow it to shrink */
            flex-grow: 1; /* Allow search box to take available space */
        }

        .search-box input {
            width: auto; /* Adjust width */
        }

        .search-box button {
            margin-right: 0; /* Remove right margin on button */
            padding: 10px 12px;
        }

        .filters {
            margin-left: 0; /* Remove left margin */
            justify-content: center; /* Center filters */
            width: 100%; /* Take full width */
        }

        .filter-row {
            justify-content: center; /* Center content in filter row */
        }

        .profile-header img {
            width: 100px;
            height: 100px;
        }

        .profile-header h2 {
            font-size: 20px;
        }

        .profile-meta {
            font-size: 13px;
        }

        .profile-section h3 {
            font-size: 17px;
        }

        .info-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }

        .course-item {
            padding: 10px;
        }

        .course-item p {
            font-size: 12px;
        }

        .profile-actions {
            flex-direction: column; /* Stack buttons vertically */
            gap: 10px;
        }

        .profile-actions button {
            flex: none; /* Remove flex grow */
            width: 100%; /* Full width buttons */
            font-size: 14px;
        }

        .request-form-card {
            padding: 25px 20px;
            margin: 30px auto;
        }

        .request-form-card h2 {
            font-size: 20px;
            margin-bottom: 20px;
        }

        .request-form-card label {
            font-size: 13px;
            margin-top: 12px;
        }

        .request-form-card input,
        .request-form-card textarea {
            padding: 8px 12px;
            font-size: 13px;
        }

        .form-actions {
            flex-direction: column;
            gap: 10px;
        }

        .form-actions button {
            padding: 10px 0;
            font-size: 14px;
        }
    }

    /* Extra small screens (phones) */
    @media (max-width: 575px) {
        .nurses-table-header,
        .nurse-row {
            /* grid-template-columns: 70px 1fr 100px 150px 100px 130px; <-- این خط */
            grid-template-columns: 70px 1fr 100px 150px 100px 130px; /* Adjusted for smaller screens */
            padding: 10px 15px;
        }

        .profile-cell img {
            width: 35px;
            height: 35px;
        }

        .view-btn {
            font-size: 12px;
            padding: 6px 10px;
        }

        .search-box {
            margin-right: 0; /* Remove margin completely */
            width: 100%; /* Take full width */
            flex-direction: column; /* Stack input and button */
        }

        .search-box input {
            width: 100%;
            padding: 10px;
        }

        .search-box button {
            width: 100%;
            margin-right: 0;
        }

        .filters {
            flex-direction: column; /* Stack filters */
            align-items: center;
        }

        .filters select,
        #clearFilters,
        .filter-btn {
            width: 100%; /* Full width for filters */
        }

        .nurses-filter-section {
            margin: 20px 0;
        }

        .profile-card {
            padding: 25px;
        }

        .profile-header img {
            width: 80px;
            height: 80px;
        }

        .profile-header h2 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .profile-meta {
            font-size: 12px;
            flex-wrap: wrap; /* Allow meta to wrap */
            justify-content: center;
        }

        .profile-section h3 {
            font-size: 16px;
            flex-direction: column; /* Stack title and icon */
            text-align: center;
        }

        .info-grid {
            grid-template-columns: 1fr; /* Single column */
        }

        .info-grid div {
            padding: 12px;
        }

        .course-item {
            flex-direction: column; /* Stack course item content */
            align-items: flex-start;
            gap: 8px;
        }

        .course-item p {
            margin-top: 0;
        }

        .request-form-card {
            margin: 20px auto;
            padding: 20px 15px;
        }

        .request-form-card h2 {
            font-size: 18px;
        }

        .request-success {
            font-size: 16px;
            max-width: 90%;
            margin: 40px auto;
        }
    }

    /* تنظیمات اصلی سطر پرستار */
.nurse-row {
    display: grid !important; /* استفاده از گرید برای کنترل ستون‌ها */
    
    /* تعریف ستون‌ها: 
       1. ستون اول: عرض ثابت برای عکس (مثلا 60px)
       2. ستون دوم: ستون نام که فضای باقی‌مانده را می‌گیرد (1fr)
       3. ستون سوم: ستون تجربه (خودکار)
       4. ستون چهارم: ستون تخصص (خودکار)
       5. ستون پنجم: ستون ریتینگ (خودکار)
       6. ستون ششم: ستون دکمه (عرض ثابت برای اینکه زیر هم باشند)
    */
    grid-template-columns: 60px 1fr auto auto auto 120px; 
    
    align-items: center; /* تراز عمودی همه در وسط ردیف */
    gap: 15px; /* فاصله بین ستون‌ها */
    padding: 10px;
    border-bottom: 1px solid #eee; /* یا هر استایلی که برای جداکننده دارید */
}

/* مدیریت المان‌های داخل گرید */
.nurse-row .profile-cell {
    grid-column: 1; /* ستون اول */
    justify-self: center;
}

.nurse-row .name {
    grid-column: 2; /* ستون دوم - این بخش اگر طولانی شود، بقیه را هل نمی‌دهد چون عرض ستون 1fr است */
    white-space: nowrap; /* جلوگیری از شکستن نام به خط بعد (اختیاری) */
    overflow: hidden; /* اگر نام خیلی طولانی بود، مخفی شود */
    text-overflow: ellipsis; /* اگر نام طولانی بود، سه نقطه (...) بگذارد */
}

.nurse-row .experience { grid-column: 3; }
.nurse-row .specialty { grid-column: 4; }
.nurse-row .rating { grid-column: 5; }

/* در کد HTML شما، دکمه داخل یک div است که فرزند مستقیم nurse-row است */
/* ما باید آن div والد دکمه را هدف قرار دهیم */
.nurse-row > div:last-child {
    grid-column: 6; /* ستون آخر - همیشه در ستون ششم قرار می‌گیرد */
    display: flex;
    justify-content: center; /* دکمه را در وسط ستون خودش قرار می‌دهد */
}

.nurse-row .view-btn {
    width: 100%; /* دکمه تمام عرض ستون خودش را بگیرد */
    white-space: nowrap; /* جلوگیری از شکسته شدن متن داخل دکمه */
}

/* --- حالت ریسپانسیو (موبایل) --- */
@media (max-width: 768px) {
    .nurse-row {
        /* در موبایل گرید را از حالت ستونی به حالت منعطف تغییر می‌دهیم */
        grid-template-columns: auto 1fr; /* عکس و نام در ردیف اول، بقیه در ردیف‌های بعدی */
        gap: 10px;
    }

    .nurse-row .profile-cell {
        grid-column: 1;
        grid-row: 1;
    }

    .nurse-row .name {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    /* بقیه اطلاعات را در ردیف‌های جدید زیر هم می‌چینیم */
    .nurse-row .experience, 
    .nurse-row .specialty, 
    .nurse-row .rating,
    .nurse-row > div:last-child {
        grid-column: 1 / span 2; /* همه را در عرض کامل صفحه قرار بده */
        grid-row: auto; 
        justify-self: center; /* وسط چین کردن در موبایل */
        width: 100%;
    }

    .nurse-row > div:last-child {
        order: 10; /* مطمئن شو دکمه آخرین چیزی است که دیده می‌شود */
        margin-top: 10px;
    }
}


/* رسپانسیو شده */