/* simple mobile-first styles */
/* --- START: New Color Palette --- */
:root {
    --primary-blue: #1E3A8A; /* গাঢ় নীল (বিশ্বাসযোগ্যতা) */
    --secondary-blue: #1565C0; /* একটিভ বাটন বা হাইলাইট */
    --accent-green: #4CAF50; /* Success, স্বাস্থ্য, সরকারি */
    --background-light: #FAFAFA; /* Clean white/grey background */
    --card-hover-grey: #E0E0E0; /* ইন্টারঅ্যাক্টিভ ফিলিং */
    --text-primary-dark: #212121; /* Readable text */
    --top-menu-bg-light: #E3F2FD; /* হালকা নীল ব্যাকগ্রাউন্ড */
    --notification-red: #FF5252; /* Notification / Updates Section background */
    --notification-text-white: #FFFFFF; /* Notification / Updates Section text */
    --footer-dark-grey: #424242; /* Footer background */
    --text-muted-light: #B0BEC5; /* Footer text muted */

    /* Blood Donors Page Specific Colors (retained or adjusted for new theme) */
    --blood-primary-blue: #1084D0; /* For header, main buttons */
    --blood-success-green: #2EC76B; /* For eligible status, call button */
    --blood-secondary-blue-gray: #78C0E0; /* For update button */
    --blood-danger-red: #dc3545; /* For not eligible status, specific counts */
    --blood-light-red-bg: #f8d7da; /* For blood group background */
    --blood-light-green-bg-summary: #e8f5e9; /* Light green for eligible summary */
    --blood-light-red-bg-summary: #ffebee; /* Light red for not eligible summary */
    --blood-light-gray-bg-summary: #eceff1; /* Light gray for no info summary */
    --border-light: #dee2e6; /* Light border color */
}
/* --- END: New Color Palette --- */

body {
    font-family: 'Noto Sans Bengali', sans-serif;
    background: var(--background-light);
    color: var(--text-primary-dark);
    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 */
    }
}

/* --- Header Section (1) --- */
.site-header {
    background-color: var(--primary-blue); /* গাঢ় নীল ব্যাকগ্রাউন্ড */
    color: white; /* সাদা টেক্সট */
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1020; /* Increased z-index to be on top of other content */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.site-header .navbar-brand {
    color: white; /* সাদা টেক্সট */
    font-weight: 800;
    font-size: 20px;
    display: flex;
    align-items: center;
}
.site-header .navbar-brand:hover {
    color: #f0f0f0; /* Slight hover effect */
}
.site-header .navbar-brand .tagline {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
    opacity: 0.9;
}
.site-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}
.site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* --- End Header Section --- */


/* --- Top Menu / Navigation Bar (2) --- */
.navbar-nav .nav-link {
    color: var(--notification-text-white); /* সাদা টেক্সট */
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--top-menu-bg-light); /* হালকা নীল হাইলাইট */
}
/* Responsive adjustments for the navigation menu */
@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        background-color: var(--primary-blue); /* গাঢ় নীল ব্যাকগ্রাউন্ড যখন খোলা */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 10px 15px;
    }
    .navbar-nav .nav-item {
        margin: 5px 0;
    }
}
/* --- End Top Menu --- */


/* --- Hero Section (3) --- */
.hero-section {
    background: linear-gradient(to right, var(--top-menu-bg-light), var(--background-light));
    border: 1px solid var(--top-menu-bg-light); /* হালকা নীল বর্ডার */
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.hero-section h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-blue);
    margin-bottom: 10px;
}
.hero-section p {
    font-size: 1.1rem;
    color: var(--text-primary-dark);
    opacity: 0.9;
}
/* --- End Hero Section --- */


/* --- Notification / Updates Section (4) --- */
.notification-bar {
    background-color: var(--notification-red); /* লাল ব্যাকগ্রাউন্ড */
    color: var(--notification-text-white); /* সাদা টেক্সট */
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.scrolling-text {
    display: inline-block;
    padding-left: 100%; /* Start off-screen */
    animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}
/* --- End Notification Section --- */


/* --- Sections (Grid Cards Format) (5) --- */
.section-title {
    font-weight: 800;
    margin-top: 25px; /* Increased margin-top for separation */
    border-bottom: 2px solid var(--top-menu-bg-light); /* হালকা নীল বর্ডার */
    padding-bottom: 10px;
    font-size: 20px; /* Slightly larger title */
    color: var(--text-primary-dark);
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default 3 columns */
    gap: 14px;
    margin-top: 15px; /* Slight adjustment for spacing */
}
@media (max-width: 600px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr); /* Keep 3 columns for smaller tablets/large phones */
        gap: 10px;
    }
}
@media (max-width: 420px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr); /* Keep 3 columns for very small screens */
        gap: 8px;
    }
}

/* Index Page specific card & icon */
.card-small {
    background: var(--background-light); /* হালকা ছায়া */
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* Softer shadow */
    transition: all 0.2s ease-in-out;
}
.card-small:hover {
    background-color: var(--card-hover-grey); /* Hover effect */
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.cat-icon {
    width: 68px; /* Slightly larger icons */
    height: 68px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto 8px; /* Adjusted size and margin for index icons */
    background-color: var(--secondary-blue); /* Icon background color */
    position: relative; /* For pseudo-element */
}

/* Fallback background for cat-icon if actual image doesn't load */
.cat-icon img:not([src]) {
    content: ''; /* Ensure content exists for pseudo-element to render */
    display: block;
    width: 40px; /* Size of the fallback circle */
    height: 40px;
    background-color: white; /* White circle background */
    border-radius: 50%; /* Make it a circle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Ensure it's behind the actual image if it loads */
}

.cat-icon img {
    max-width: 70%; /* Adjust icon image size within the wrapper */
    max-height: 70%;
    display: block;
    object-fit: contain;
    position: relative; /* Bring image to front if it loads */
    z-index: 2; /* Ensure the actual image is above the white circle fallback */
    /* filter: brightness(0) invert(1); /* Make icons white if they are dark - REMOVED for original colors */ */
}
.card-small .fw-bold {
    color: var(--text-primary-dark);
    font-size: 0.95rem; /* Slightly smaller for better fit */
}
/* --- End Sections --- */


/* --- Footer Section (6) --- */
.site-footer {
    background-color: var(--footer-dark-grey); /* গাঢ় ধূসর */
    color: var(--text-muted-light); /* হালকা ধূসর টেক্সট */
    padding: 20px 0;
    font-size: 0.85rem;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}
.site-footer a {
    color: var(--text-muted-light);
    transition: color 0.3s ease;
}
.site-footer a:hover {
    color: white; /* সাদা হাইলাইট */
}
/* --- End Footer Section --- */


/* 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: 56px; /* Slightly larger icon size for list style */
    height: 56px; /* Slightly larger icon size for list style */
    border-radius: 50%; /* Circular for list style */
    background-color: var(--secondary-blue); /* Use secondary blue for icon background */
    position: relative; /* For pseudo-element */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Slight shadow for the icon */
}
/* Fallback background for detail-item-image-wrapper if actual image doesn't load */
.detail-item-image-wrapper.list-style img:not([src]) {
    content: '';
    display: block;
    width: 35px; /* Size of the fallback circle */
    height: 35px;
    background-color: white; /* White circle background */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.detail-item-image-wrapper.list-style img {
    /* filter: brightness(0) invert(1); /* Make icons white - REMOVED for original colors */ */
    max-width: 70%;
    max-height: 70%;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 2;
}
/* 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 */
    background-color: var(--background-light); /* Light background for blog images */
}
.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: var(--text-primary-dark);
}
.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 */
    background-color: var(--secondary-blue); /* Use secondary blue for phone button */
    border-color: var(--secondary-blue);
    color: white;
}
.detail-blog-item .blog-phone-btn:hover {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* 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: 12px; /* More rounded corners */
    margin-bottom: 12px; /* Increased margin between items */
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* Stronger shadow */
    padding: 15px; /* Increased padding inside the item */
    transition: all 0.2s ease-in-out;
}
.list-group-item:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
}

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

.list-group-item .item-name {
    font-weight: bold;
    font-size: 1.15rem; /* Larger for name */
    margin-bottom: 2px; /* Space after name */
    line-height: 1.3;
    color: var(--text-primary-dark);
}
.list-group-item .item-details { /* Changed order to show details (position) after name */
    font-size: 1rem; /* Readable for details (position) */
    color: #6c757d;
    line-height: 1.3;
    margin-top: 2px;
    margin-bottom: 4px; /* Space before phone number */
}
.list-group-item .item-phone {
    font-size: 1.05rem; /* Larger for phone number */
    color: var(--secondary-blue);
    line-height: 1.3;
    text-decoration: none;
    display: flex; /* For inline icon */
    align-items: center;
}
.list-group-item .item-phone::before {
    content: '📞'; /* Phone icon emoji */
    margin-right: 5px;
    font-size: 0.9em;
}


/* 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 (integrated with new theme variables) --- */
/* Overall header for blood donors page */
.blood-donor-page-header {
    background-color: var(--background-light); /* Light background for the header section */
    padding: 15px 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}
.blood-donor-page-header .h4-custom {
    color: var(--primary-blue); /* Primary blue 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%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary-dark);
}
.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 {
    background-color: var(--secondary-blue); /* Blue background for the wrapper */
    border-radius: 8px; /* Rounded corners for the square */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px; /* Fixed size */
    height: 72px;
    margin: 0 auto 12px;
    overflow: hidden;
    position: relative; /* Needed for pseudo-element positioning */
}

/* This creates the white circle visually, behind the actual image */
.cta-card .icon-wrapper::before {
    content: '';
    display: block;
    position: absolute;
    width: 40px; /* Size of the white circle */
    height: 40px;
    background-color: white; /* White circle background */
    border-radius: 50%; /* Make it a circle */
    z-index: 1; /* Ensure it's below the actual image */
}

/* This styles the actual image if it loads. It will overlay the white circle. */
.cta-card .icon-wrapper img {
    display: block;
    max-width: 60%; /* Adjust size of the image within the wrapper */
    max-height: 60%;
    object-fit: contain;
    background-color: transparent; /* Ensure no forced background on the image */
    border-radius: 0; /* No forced shape on the image */
    position: relative; /* Make sure it can sit above the ::before pseudo-element */
    z-index: 2; /* Ensure the actual image is above the white circle pseudo-element */
}

.cta-card .card-text {
    font-weight: 700;
    font-size: 1.05rem;
    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;
    }
    .donor-search-bar .btn {
        width: 100%;
    }
}


/* Blood Bank Header specific styles */
.blood-bank-header .btn-danger {
    background-color: var(--secondary-blue); /* Secondary blue for registration button */
    border-color: var(--secondary-blue);
}
.blood-bank-header p.fs-5 .text-danger {
    color: var(--blood-danger-red) !important;
}

/* Blood Group Filter Buttons */
.blood-group-filters h5.text-secondary {
    color: var(--text-primary-dark);
}
.blood-group-filters .btn-danger {
    background-color: var(--accent-green); /* Accent green for active filter */
    border-color: var(--accent-green);
}
.blood-group-filters .btn-outline-danger {
    color: var(--text-primary-dark);
    border-color: var(--border-light);
}
.blood-group-filters .btn-outline-danger .badge {
    color: var(--blood-danger-red);
}

/* Donation Summary Cards */
.donation-summary-cards .summary-eligible { background-color: var(--blood-light-green-bg-summary); }
.donation-summary-cards .summary-not-eligible { background-color: var(--blood-light-red-bg-summary); }
.donation-summary-cards .summary-no-info { background-color: var(--blood-light-gray-bg-summary); }
.donation-summary-cards .summary-eligible .card-title { color: var(--accent-green); }
.donation-summary-cards .summary-not-eligible .card-title { color: var(--blood-danger-red); }

/* Donor Profile Search Form */
.donor-search-form .btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Donor List Title */
h5.text-danger {
    color: var(--primary-blue) !important; /* Primary blue for Donor List title */
}

/* Individual donor card styles */
.donor-card {
    border: 1px solid var(--border-light); /* Light border */
}
.donor-card .status-indicator.yes { background-color: var(--accent-green); }
.donor-card .status-indicator.no { background-color: var(--blood-danger-red); }
.donor-card .donor-icon-wrapper {
    background-color: var(--blood-danger-red); /* Retain red for blood drop icon */
}
/* Ensure the blood drop icon (if it's a silhouette) is white on its red background */
.donor-icon-wrapper img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Re-added filter to make icon white on red background */
}

.donor-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.blood-group {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--blood-danger-red); /* Specific blood red */
    margin-bottom: 12px;
    padding: 5px 10px;
    background-color: var(--blood-light-red-bg); /* Specific light red bg */
    border-radius: 5px;
}
.info-line {
    font-size: 1rem;
    color: #495057;
    margin-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}
.contact-button-group {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}
.btn-call, .btn-update-donation {
    padding: 8px 18px;
    font-size: 0.95rem;
    border-radius: 7px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #fff;
    border: none;
}
.btn-call {
    background-color: var(--accent-green); /* Theme's accent green */
}
.btn-update-donation {
    background-color: var(--secondary-blue); /* Theme's secondary blue */
}

.update-donation-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0;
    display: none;
}
.update-donation-form .form-label { font-size: 0.9rem; }
.update-donation-form .form-control-sm {
    height: calc(2.2rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
}
.update-donation-form .btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    background-color: var(--primary-blue); /* Theme's primary blue */
    border-color: var(--primary-blue);
}
.update-donation-form .alert-warning {
    font-size: 0.8rem;
    padding: 0.75rem;
}

.important-note {
    background-color: #ffeeba;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    color: #664d03;
}
.important-note ul { margin-bottom: 0; padding-left: 20px; }
.card.p-3.shadow-sm.mt-4 h5.text-danger {
    color: var(--primary-blue) !important; /* Primary blue for registration form title */
}
.card.p-3.shadow-sm.mt-4 .btn-danger {
    background-color: var(--secondary-blue); /* Theme's secondary blue */
    border-color: var(--secondary-blue);
}
.form-label .fas {
    color: var(--secondary-blue); /* Theme's secondary blue */
    margin-right: 5px;
}
/* --- END: Blood Donors Page Specific Styles --- */