/* --- VARIABLES & FONTS --- */
:root {
    --iias-brand: #57068c;       /* IIAS Purple */
    --iias-brand-hover: #450470;
    --iias-yellow: #ffce00;      /* Benefits Yellow */
    --iias-bg: #f9f9f9;
    --iias-card-bg: #ffffff;
    --iias-text: #333333;
    --iias-muted: #6b7280;
    --iias-radius: 8px;
}

.iias-container {
    max-width: 1100px;
    margin: 20px auto;
    padding: 20px;
    font-family: 'Montserrat', sans-serif !important;
    background: var(--iias-bg);
    color: var(--iias-text);
}

.iias-container * { box-sizing: border-box; }

/* --- HEADER --- */
.iias-site-header { margin-bottom: 20px; }
.iias-brand h1 { font-size: 24px; margin: 0; color: #222; }
.iias-brand p { margin: 0; color: var(--iias-muted); font-size: 14px; }

/* --- HERO SECTION (with Image) --- */
.iias-hero {
    background-size: cover;
    background-position: center;
    border-radius: var(--iias-radius);
    overflow: hidden;
    margin-bottom: 40px;
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
}
.iias-hero-overlay {
    background: linear-gradient(90deg, rgba(87,6,140,0.9) 0%, rgba(87,6,140,0.4) 100%);
    width: 100%; height: 100%;
    display: flex; align-items: center; padding: 40px;
}
.iias-hero-content h2 { color: #fff; font-size: 28px; font-weight: 700; margin: 0 0 10px 0; }
.iias-hero-content p { color: #eee; font-size: 16px; margin-bottom: 20px; max-width: 600px; }

.iias-cta {
    display: inline-block;
    background: var(--iias-yellow);
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
}
.iias-cta:hover { background: #ffd633; }

/* --- BENEFITS SECTION --- */
.iias-benefits-wrap { margin-bottom: 40px; text-align: center; }
.iias-section-header h3 { font-size: 24px; margin-bottom: 10px; color: #333; }
.iias-section-header span { color: var(--iias-brand); font-weight: 700; }
.iias-benefits-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px; margin-top: 20px;
}
.iias-benefit-card {
    background: #ede3f1;   /* The light purple from your request */
    padding: 20px; 
    border-radius: var(--iias-radius);
    text-align: left; 
    display: flex; 
    flex-direction: column;
    transition: transform 0.3s ease;
}

/* Optional: Add a slight hover effect */
.iias-benefit-card:hover { 
    transform: translateY(-5px); 
    background: #e5dbe9; /* Slightly darker on hover */
}
.iias-benefit-card .iias-icon {
    width: 40px; height: 40px; background: #57068C; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.iias-benefit-card h4 { margin: 0 0 5px 0; font-size: 16px; font-weight: 700; }
.iias-benefit-card p { font-size: 13px; margin: 0; line-height: 1.4; }

/* --- CONTROLS --- */
.iias-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.iias-search { flex: 1; display: flex; gap: 8px; min-width: 300px; }
.iias-search input, .iias-search select, #iias-clear {
    padding: 10px 12px; border-radius: 6px; border: 1px solid #ddd;
    font-family: inherit; font-size: 14px;
}
.iias-search input { flex: 1; }
#iias-clear { background: #fff; cursor: pointer; }
#iias-clear:hover { background: #f0f0f0; }

/* --- GRID & CARDS --- */
.iias-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }

/* Job Cards */
.iias-jobs-list { display: flex; flex-direction: column; gap: 15px; }
.iias-job-card {
    background: var(--iias-card-bg);
    padding: 20px; border-radius: var(--iias-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex; justify-content: space-between; gap: 15px;
    border: 1px solid transparent; transition: 0.3s;
}
.iias-job-card:hover { border-color: var(--iias-brand); box-shadow: 0 6px 15px rgba(87,6,140,0.1); }

.iias-job-info h3 { margin: 0; font-size: 18px; color: #222; }
.iias-meta { color: var(--iias-muted); font-size: 13px; margin-top: 5px; }
.iias-tags { display: flex; gap: 8px; margin-top: 10px; }
.iias-tag {
    background: #f3e5f5; color: var(--iias-brand);
    padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600;
}
/* Add spacing around the tags in the modal */
.iias-m-meta-row {
    margin-top: 20px;    /* Space above the tags */
    margin-bottom: 20px; /* Space below the tags */
}
/* BUTTONS */
.iias-btns { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; min-width: 100px; }

/* Base Button Style - PILL SHAPE ADDED HERE */
.iias-btn {
    padding: 10px 24px;       /* Increased padding for a fuller look */
    border-radius: 50px;      /* 50px makes it fully rounded (Pill shape) */
    cursor: pointer;
    font-size: 14px; 
    font-weight: 600;         /* Slightly bolder text like your screenshot */
    text-decoration: none;
    text-align: center; 
    display: inline-block; 
    transition: all 0.3s ease;
    text-transform: capitalize; /* Ensures "Admission" looks proper */
}

/* APPLY BUTTON (The purple filled button) */
.iias-apply {
    background-color: var(--iias-brand); /* Purple #57068c */
    color: #fff !important;
    border: 2px solid var(--iias-brand);
}

/* Hover Effect for Apply */
.iias-apply:hover {
    background-color: transparent;
    color: var(--iias-brand) !important;
    border: 2px solid var(--iias-brand);
}

/* VIEW BUTTON (Outline style - optional, keeps design consistent) */
.iias-view {
    background-color: transparent;
    color: var(--iias-brand);
    border: 2px solid var(--iias-brand); /* Thicker border to match */
}

.iias-view:hover {
    background-color: #f3e5f5;
}

/* --- SIDEBAR --- */
.iias-card {
    background: var(--iias-card-bg); padding: 20px;
    border-radius: var(--iias-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.iias-card h4 { margin: 0 0 15px 0; font-size: 16px; }
.iias-filters label { display: block; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.iias-footer { margin-top: 40px; color: var(--iias-muted); font-size: 13px; text-align: center; }

/* --- MODAL --- */
.iias-modal {
    position: fixed; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6); padding: 20px; z-index: 99999;
}
.iias-modal.open { display: flex; }
/* --- MODAL PANEL (Updated for Scrolling) --- */
.iias-panel {
    width: 100%; 
    max-width: 600px; 
    background: white;
    padding: 30px; 
    border-radius: 12px; 
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    
    /* NEW: Limits height to 85% of screen and sets up layout */
    max-height: 85vh; 
    display: flex;
    flex-direction: column; 
}

/* --- SCROLLABLE DESCRIPTION AREA --- */
/* This ensures only the text scrolls, not the buttons */
#iias-m-desc {
    flex: 1;            /* Takes up remaining space */
    overflow-y: auto;   /* Enables vertical scrolling */
    margin: 15px 0;     /* Space above and below text */
    padding-right: 10px;/* Prevents text from hitting the scrollbar */
    
    /* Text Formatting */
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* --- OPTIONAL: Make the scrollbar look pretty (Modern Browsers) --- */
#iias-m-desc::-webkit-scrollbar {
    width: 8px;
}
#iias-m-desc::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
#iias-m-desc::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
#iias-m-desc::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}
.iias-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #999; }
.iias-pill {
    display: inline-block; background: #eee; padding: 4px 10px;
    border-radius: 20px; font-size: 12px; margin-right: 5px; color: #555;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .iias-grid { grid-template-columns: 1fr; }
    .iias-controls { flex-direction: column; align-items: stretch; }
}
/* --- MODAL CONTENT FORMATTING --- */
#iias-m-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

#iias-m-desc p {
    margin-bottom: 15px; /* Adds space between paragraphs */
}

#iias-m-desc ul, #iias-m-desc ol {
    margin-bottom: 15px;
    padding-left: 20px; /* Indents the bullet points */
}

#iias-m-desc li {
    margin-bottom: 8px; /* Space between list items */
    list-style-type: disc; /* Ensures bullets show up */
}

#iias-m-desc strong, #iias-m-desc b {
    color: #000;
    font-weight: 700;
}
/* --- MODAL TITLE FIX --- */
#iias-m-title {
    font-size: 22px;          /* Slightly smaller font to ensure it fits */
    white-space: nowrap;      /* Forces the text to stay on one line */
    overflow: hidden;         /* Hides any text that goes beyond the box */
    text-overflow: ellipsis;  /* Adds "..." if the title is extremely long */
    margin: 0;
    flex: 1;                  /* Allows title to take up all available space */
    padding-right: 20px;      /* clear space between title and the 'X' button */
}
/* --- EQUAL SPACING FIX --- */

/* 1. Hide the grey separator line (it adds unwanted extra space) */
.iias-panel hr {
    display: none !important;
}

/* 2. Set exactly equal space above and below the pills */
.iias-m-meta-row {
    margin-top: 15px !important;    /* Space between Title and Pills */
    margin-bottom: 15px !important; /* Space between Pills and Job Description */
}

/* 3. Remove the top margin from the text so it doesn't double up */
#iias-m-desc {
    margin-top: 0 !important;
}