/* simple mobile-first styles */
body { font-family: 'Noto Sans Bengali', sans-serif; background:#fff; color:#111827; margin:0; }
.container{ max-width:980px; margin:0 auto; padding:12px; } /* Default padding for larger screens */

/* Adjust container padding for small screens to make it feel more "app-like" */
@media (max-width: 576px) {
    .container {
        padding: 8px; /* Slightly less padding on very small screens */
    }
}

.section-title{ font-weight:800; margin-top:18px; border-bottom:2px solid #eee; padding-bottom:10px; font-size:18px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:12px; }
@media (max-width:600px){ .grid-3{ grid-template-columns: repeat(3, 1fr); gap:10px; } }
@media (max-width:420px){ .grid-3{ grid-template-columns: repeat(3,1fr); gap:8px; } } /* Reverted to 3 columns for very small screens */

/* Index Page specific card & icon */
.card-small{ background:#fff; border-radius:12px; padding:10px; text-align:center; box-shadow:0 8px 22px rgba(2,6,23,0.06); } /* Reduced padding slightly for smaller cards */
.cat-icon{ width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0 auto 6px; } /* Adjusted size and margin for index icons */
.cat-icon img{ max-width:100%; max-height:100%; display:block; }

/* Styles for category.php details items */
.detail-item-image-wrapper {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.detail-item-image-wrapper.list-style {
    width: 48px; /* Smaller icon size as per new screenshot */
    height: 48px; /* Smaller icon size as per new screenshot */
    border-radius: 50%; /* Circular for list style */
}
/* Blog style specific image wrapper sizing */
.detail-item-image-wrapper.blog-style {
    width: 100%; /* Image takes full width on mobile */
    height: 180px; /* Fixed height for consistency */
    border-radius: 8px; /* Rectangular for blog style */
}
.detail-item-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Blog style item design for "news-like" appearance */
.detail-blog-item {
    display: flex;
    flex-direction: column; /* Default: stack vertically for mobile */
    gap: 12px;
    align-items: flex-start; /* Align content to the start */
    padding: 15px; /* Slightly more padding for a prominent card */
    border-radius: 12px; /* Slightly more rounded corners */
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); /* More prominent shadow for a single "news" item */
    margin-bottom: 20px; /* More space below */
}

/* Adjustments for larger screens for blog items */
@media (min-width: 768px) { /* On medium screens and up */
    .detail-blog-item {
        flex-direction: row; /* Side-by-side on larger screens */
        align-items: center; /* Vertically center items when side-by-side */
    }
    .detail-item-image-wrapper.blog-style {
        width: 200px; /* Fixed width for image on larger screens */
        height: 120px; /* Fixed height */
    }
}

/* Text styling for blog item */
.detail-blog-item .blog-title {
    font-weight: bold;
    font-size: 1.25rem; /* Larger title for news */
    margin-bottom: 8px;
    line-height: 1.3;
    color: #1a202c;
}
.detail-blog-item .blog-details {
    font-size: 0.95rem; /* Readable text size */
    line-height: 1.5;
    color: #4a5568;
}
.detail-blog-item .blog-phone-btn {
    margin-top: 10px; /* Space above button */
}

/* Existing blog-item styling for index.php */
.blog-item{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:10px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.04); margin-bottom:12px; }
.blog-item img{ width:100px; height:80px; object-fit:cover; border-radius:8px; }

/* Changed list-group-item styling for category.php */
.list-group-item {
    border: none; /* Removed default border */
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08); /* Stronger shadow */
    padding: 12px; /* Ensure sufficient padding inside the item */
}

/* Styling for list items text in category.php */
.list-group-item .item-content {
    display: flex;
    flex-direction: column; /* Stack name, phone, details vertically */
    justify-content: center; /* Center content vertically if space allows */
}

.list-group-item .item-name {
    font-weight: bold;
    font-size: 1.05rem; /* Slightly larger for name */
    margin-bottom: 0; /* No margin below name */
    line-height: 1.3;
    color: #333; /* Slightly darker for better visibility */
}
.list-group-item .item-phone {
    font-size: 0.95rem; /* Slightly larger for phone */
    color: #007bff; /* A blue tint for phone numbers, common in apps */
    line-height: 1.3;
    margin-top: 2px; /* Small space after name */
    text-decoration: none; /* Remove underline for anchor tag */
}
.list-group-item .item-details {
    font-size: 0.95rem; /* Slightly larger for details */
    color: #6c757d; /* Muted grey for details */
    line-height: 1.3;
    margin-top: 2px; /* Small space after phone */
}
/* Ensure the overall flex container aligns items to start if text content is long */
.list-group-item > .d-flex {
    align-items: flex-start; /* Align icon and text block to the top */
}

/* Header adjustments for smaller screens */
.site-header .navbar-brand {
    font-size: 1.1rem; /* Slightly smaller font for brand on small screens */
}


/* --- START: Blood Donors Page Specific Styles --- */
/* Overall header for blood donors page */
.blood-donor-page-header {
    /* Background similar to screenshot */
    background-color: #f8f9fa; /* Light background for the header section */
    padding: 15px 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
}
.blood-donor-page-header h4 {
    color: #dc3545; /* Red color for main title */
    margin-bottom: 0;
    font-weight: 700;
}

/* Call to action cards on the blood donors home view */
.cta-card {
    background:#fff;
    border-radius:12px;
    padding:15px;
    text-align:center;
    box-shadow:0 8px 22px rgba(2,6,23,0.06);
    height: 100%; /* Ensure cards are same height in a grid row */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Remove underline from links */
    color: #111827; /* Default text color */
}
.cta-card:hover {
    box-shadow: 0 10px 28px rgba(2,6,23,0.1);
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
}
.cta-card .icon-wrapper {
    width: 72px;
    height: 72px;
    /* Circular background for icon, but screenshot seems to have white square behind icon */
    /* Let's try to match the screenshot more closely */
    border-radius: 8px; /* Square with rounded corners */
    background-color: transparent; /* No background color, icon image itself has bg */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    flex-shrink: 0;
}
.cta-card .icon-wrapper img {
    max-width: 100%; /* Icons will fit exactly */
    max-height: 100%;
    object-fit: contain;
}
.cta-card .card-text {
    font-weight: 700;
    font-size: 1.05rem; /* Slightly larger text */
    line-height: 1.3;
}

/* Donor search input and button */
.donor-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.donor-search-bar .form-control,
.donor-search-bar .form-select {
    flex-grow: 1;
}
.donor-search-bar .btn {
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .donor-search-bar {
        flex-direction: column; /* Stack vertically on small screens */
    }
    .donor-search-bar .btn {
        width: 100%;
    }
}


/* Donor card styling for grid layout */
.donor-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #dc3545; /* Red border as per screenshot */
    padding: 10px; /* Reduced padding for smaller cards */
    text-align: center; /* Center content in grid item */
    height: 100%; /* Ensure cards in a row have equal height */
    display: flex;
    flex-direction: column; /* Stack contents vertically */
    justify-content: space-between; /* Push bottom content down if space allows */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Subtle shadow */
    position: relative; /* For eligible status absolute positioning */
}
.donor-card .status-indicator {
    position: absolute;
    top: -1px; /* Adjust to sit on border */
    right: -1px; /* Adjust to sit on border */
    background-color: #28a745; /* Green for eligible */
    color: #fff;
    padding: 2px 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
}
.donor-card .status-indicator.no {
    background-color: #dc3545; /* Red for not eligible */
}
.donor-card .donor-icon-wrapper {
    flex-shrink: 0;
    width: 40px; /* Smaller icon size */
    height: 40px; /* Smaller icon size */
    background-color: #dc3545; /* Red background for icon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px; /* Center icon and add margin below */
}
.donor-card .donor-icon-wrapper img {
    width: 60%; /* Adjust icon size inside circle */
    height: 60%;
    object-fit: contain;
    filter: invert(100%); /* Make icon white */
}
.donor-card .donor-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Start content from the top */
    align-items: center; /* Center text content horizontally */
}
.donor-card .donor-name {
    font-weight: bold;
    font-size: 0.95rem; /* Smaller name font for compact card */
    color: #333;
    margin-bottom: 2px;
    line-height: 1.2;
}
.donor-card .blood-group {
    display: inline-block;
    background: #dc3545;
    color: #fff;
    padding: 1px 5px; /* Smaller padding */
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.75rem; /* Smaller blood group font */
    margin-left: 0; /* No margin-left in centered layout */
    margin-bottom: 5px;
}
.donor-card .info-line {
    font-size: 0.8rem; /* Smaller info font */
    color: #6c757d;
    margin-top: 3px;
    line-height: 1.2;
}
.donor-card .contact-button-group {
    display: flex;
    flex-direction: column; /* Stack buttons vertically on small cards */
    gap: 5px;
    width: 100%; /* Ensure buttons take full width */
    margin-top: 10px; /* Space above buttons */
}
.donor-card .contact-button-group .btn {
    width: 100%;
    font-size: 0.8rem;
    padding: 5px 10px;
}
.donor-card .btn-call {
    background-color: #28a745; /* Green call button */
    color: #fff;
    border-color: #28a745;
}
.donor-card .btn-call:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
.donor-card .btn-update-donation {
    background-color: #007bff; /* Blue update button */
    color: #fff;
    border-color: #007bff;
}
.donor-card .btn-update-donation:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.update-donation-form {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
    width: 100%; /* Ensure form takes full width of card */
    display: none; /* Hidden by default */
    text-align: left; /* Align form content left */
}
.update-donation-form .alert-warning {
    font-size: 0.75rem; /* Smaller warning text */
    padding: 6px;
    margin-top: 6px;
}
.update-donation-form .form-control-sm {
    font-size: 0.8rem; /* Smaller date input */
}
/* Ensure buttons in update form are compact */
.update-donation-form .btn-sm {
    padding: 4px 8px;
    font-size: 0.75rem;
}

/* Registration Page specific styles */
.important-note {
    background-color: #fff3cd; /* Light yellow background */
    border-left: 5px solid #ffc107; /* Yellow left border */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #856404;
    font-size: 0.9rem;
}
.important-note strong {
    color: #856404;
}
.important-note ul {
    margin-bottom: 0;
    padding-left: 20px;
}
.important-note li {
    margin-bottom: 5px;
}

/* Font Awesome icons for form labels */
.form-label i {
    margin-right: 5px;
    color: #dc3545; /* Red icon color */
}


/* --- END: Blood Donors Page Specific Styles --- */