/* Semester Courses Tabs (Frontend) */
.fd-semester-tabs {
    width: 100%;
}

/* Nav wrapper: arrows left/right, tabs in the middle */
.fd-semester-tabs__nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* arrows at extreme left & right */
    column-gap: 12px;
    margin-bottom: 16px;
}

.fd-semester-tabs__nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;           /* Firefox */
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-width: 0;                    /* IMPORTANT: let it shrink between arrows */
}

/* Hide scrollbar (WebKit) */
/*
.fd-semester-tabs__nav::-webkit-scrollbar {
    display: none;
}
*/

/* Tabs: 4 visible on desktop (25%) */
.fd-semester-tabs__nav-item {
    flex: 0 0 24%;                 /* 4 tabs per row on desktop */
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    padding: 10px 14px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    gap: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hard override any button/inline white-space rules */
.fd-semester-tabs__nav-item,
.fd-semester-tabs__nav-title,
.fd-semester-tabs__nav-summary {
    white-space: normal !important;  /* allow wrapping */
    max-width: 100%;
}

.fd-semester-tabs__nav-title,
.fd-semester-tabs__nav-summary {
    display: block !important;       /* force on separate lines */
    width: 100%;
    text-align: left !important;
}

.fd-semester-tabs__nav-title {
    font-weight: 600;
}

.fd-semester-tabs__nav-summary {
    font-size: 13px;
    opacity: 0.9;
}

/* Active tab */
.fd-semester-tabs__nav-item.is-active {
    background-color: #ffffff;
    border-bottom-color: transparent;
}

/* Arrows */
.fd-semester-tabs__nav-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #ddd;
    background: #f9f9f9;            /* Elementor can override */
    cursor: pointer;
}

/* spacing between icons and tabs */
.fd-semester-tabs__nav-arrow--prev {
    margin-right: 8px;
}

.fd-semester-tabs__nav-arrow--next {
    margin-left: 8px;
}

/* basic chevron SVG size */
.fd-semester-tabs__nav-arrow svg {
    width: 16px;
    height: 16px;
}
/* Mobile-only: completely hide nav arrows; use swipe/drag instead */
@media (max-width: 768px) {
    .fd-semester-tabs__nav-arrow,
    .fd-semester-tabs__nav-arrow--prev,
    .fd-semester-tabs__nav-arrow--next {
        display: none !important;
    }
}

/* Panels */
.fd-semester-tabs__panels {
    border: 1px solid #ddd;
    padding: 16px 20px;
    background-color: #fff;
}

.fd-semester-tabs__panel {
    display: none;
}

.fd-semester-tabs__panel.is-active {
    display: block;
}

/* Keep course table styling same as before */
.fd-semester-tabs .course-table {
    width: 100%;
    border-collapse: collapse;
}

.fd-semester-tabs .course-table th,
.fd-semester-tabs .course-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}

/* Allow Elementor typography overrides */
.fd-semester-tabs__nav-item,
.fd-semester-tabs__panel {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Mobile: show fewer tabs per row */
@media (max-width: 768px) {
    /* Make the first tab almost full-width so the next tab peeks in */
    .fd-semester-tabs__nav-item {
        flex-basis: 80%;
    }

    /* Hide scroll arrows on mobile – user will swipe/drag the tab strip */
    .fd-semester-tabs__nav-arrow {
        display: none;
    }

    /* Remove extra gap reserved for arrows so the tab strip spans full width */
    .fd-semester-tabs__nav-wrapper {
        column-gap: 0;
    }
}

@media (max-width: 480px) {
    /* On very small phones, keep a small portion of the next tab visible */
    .fd-semester-tabs__nav-item {
        flex-basis: 86%;
    }

    .fd-semester-tabs__nav-wrapper {
        column-gap: 0;
    }

    .fd-semester-tabs__panels {
        padding: 12px 12px;
    }
}

/* Filters / search widget (frontend) */
.fd-filter-label {
    display: absolute;
    font-size: 14px;
    padding: 8px 15px;
    margin-right: 0px;
    border: 1px solid #ccc;
    border-radius: 40px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.fd-filter-label.selected {
    background-color: #8C2586;
    color: rgb(255, 255, 255);
    border-color: #8C2586;
}
/* .fd-filter-label:hover{
    color: white;
} */

.fd-search-widget {
    position: relative;
}

.fd-float-results {
    position: absolute;
    z-index: 100;
    background: white;
    width: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    margin-top: 10px;
    max-height: 350px;
    overflow-y: auto;
    padding: 0;
    list-style: none;
}
.fd-float-results li {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s ease;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.fd-float-results li:hover {
    background-color: #f8f9fb;
    color: #0073aa;
}
.fd-float-results li::after {
    content: "→";
    float: right;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.fd-float-results li:hover::after {
    opacity: 1;
}
@media (max-width: 480px) {
    .fd-float-results li {
        font-size: 14px;
        padding: 10px 12px;
    }
}

#fd_search_results button {
    margin-top: 15px;
    padding: 10px;
    border: none;
    background-color: #0073aa;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

#fd_search_results button:hover {
    background-color: #005d8c;
}
.fd-filter-options{
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    justify-content: center;
}

/* Program FAQs Accordion (structure only; design via Elementor) */
.fd-program-faqs-accordion {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Each item full-width, simple separator line between items */
.fd-program-faqs-accordion__item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f2f2f5; /* subtle divider line */
}

/* When open, hide the bottom line so question + content feel continuous */
.fd-program-faqs-accordion__item.is-open {
    border-bottom-color: transparent;
}

/* Optional: no divider after last item */
.fd-program-faqs-accordion__item:last-child {
    border-bottom-color: transparent;
}

/* Header / title row */
.fd-program-faqs-accordion__title-wrapper {
    width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.fd-program-faqs-accordion__title {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    text-align: left;
    margin-right: 16px;
}

.fd-program-faqs-accordion__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid currentColor;
    position: relative;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.fd-program-faqs-accordion__icon::before,
.fd-program-faqs-accordion__icon::after {
    content: "";
    position: absolute;
    background-color: currentColor;
    transition: opacity 0.25s ease;
}

.fd-program-faqs-accordion__icon::before {
    width: 60%;
    height: 2px;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
}

.fd-program-faqs-accordion__icon::after {
    width: 2px;
    height: 60%;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
}

.fd-program-faqs-accordion__item.is-open .fd-program-faqs-accordion__icon::after {
    opacity: 0;
}

.fd-program-faqs-accordion__item.is-open .fd-program-faqs-accordion__icon {
    transform: rotate(90deg);
}

.fd-program-faqs-accordion__content {
    display: none;
    overflow: hidden;
}

.fd-program-faqs-accordion__content-inner {
    padding: 0;
    margin: 0;
}

/* Optional: tidy last paragraph spacing */
.fd-program-faqs-accordion__content-inner p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   NEW FAQ WIDGET  (.fd-faq-*)
   ══════════════════════════════════════════════════════════════════════════ */

.fd-faq {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;          /* Spacious gap between cards */
    border: none !important;
}

/* ── Each FAQ item is a self-contained card ──────────────────────────────── */
.fd-faq__item {
    width: 100%;
    box-sizing: border-box;
    background: #f2f2f2; /* Default light gray for closed state */
    border-radius: 12px;
    overflow: hidden;   
    border: none !important;
    transition: background-color 0.3s ease;
}

/* ── Header button — CSS Grid keeps icon pinned right always ─────────────── */
.fd-faq__header {
    display: grid;
    grid-template-columns: 1fr auto;   /* question: fills space, icon: auto */
    grid-template-areas: "question icon";
    align-items: center;

    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left;
    cursor: pointer;
    background-color: #f2f2f2 !important; /* Base background */
    color: #333333 !important;           /* Base text color */
    border: 0 !important;
    margin: 0;
    padding: 24px 30px !important;       /* Comfortable padding */
    appearance: none;
    -webkit-appearance: none;
    gap: 16px;
    border-radius: 12px !important;      /* Fully rounded when closed */
    transition: all 0.3s ease;
}

/* ── Active / Open State Styling ────────────────────────────────────────── */
.fd-faq__item.is-open .fd-faq__header {
    background-color: #8a248d !important; /* Purple when open */
    color: #ffffff !important;           /* White text when open */
    border-radius: 12px 12px 0 0 !important; /* Flat bottom when open */
}

/* Icon-left variant support */
.fd-faq__header--icon-left {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon question";
}

/* Question text */
.fd-faq__question-text {
    grid-area: question;
    display: block;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 500;
    color: inherit;
    line-height: 1.45;
    white-space: normal;
}

/* ── Icon wrap ───────────────────────────────────────────────────────────── */
.fd-faq__icon-wrap {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    color: inherit !important; /* Automatically turns white when header is active */
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.fd-faq__icon-wrap svg {
    width: 18px;
    height: 18px;
    fill: currentColor !important;
}

.fd-faq__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.18s ease;
}

/* Default: closed icon visible, open icon hidden */
.fd-faq__icon--closed { display: inline-flex; }
.fd-faq__icon--open   { display: none; }

/* When item is open: swap icons */
.fd-faq__item.is-open .fd-faq__icon--closed { display: none; }
.fd-faq__item.is-open .fd-faq__icon--open   { display: inline-flex; }

/* ── Answer panel ────────────────────────────────────────────────────────── */
.fd-faq__answer-wrap {
    overflow: hidden;
    box-sizing: border-box;
    background-color: transparent !important;
}

.fd-faq__answer {
    padding: 25px 30px !important; /* Aligned with header padding */
    box-sizing: border-box;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
}

.fd-faq__answer p:last-child { margin-bottom: 0; }

/* ──────────────────────────────────────────────────────────────────────────────
   3C Widget – frontend
   ────────────────────────────────────────────────────────────────────────────── */

.fd-3c-grid {
    display: grid;
    gap: 24px;
}

/* Horizontal: 3 equal columns side-by-side (default) */
.fd-3c-grid--horizontal {
    grid-template-columns: repeat(3, 1fr);
}

/* Vertical: single column, stacked */
.fd-3c-grid--vertical {
    grid-template-columns: 1fr;
}

@media (max-width: 820px) {
    .fd-3c-grid--horizontal {
        grid-template-columns: 1fr;
    }
}

.fd-3c-column {
    border: 1px solid #dde1e7;
    border-radius: 6px;
    padding: 24px 22px 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* Label  e.g. "FIRST C" — kept in CSS for backward compat but not output by widget */
.fd-3c-column__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 6px;
}

/* Title  e.g. "Character" */
.fd-3c-column__title {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.2;
}

/* Divider */
.fd-3c-column__divider {
    border: none;
    border-top: 1px solid #dde1e7;
    margin: 0 0 16px;
}

.fd-3c-column__divider--keywords {
    margin-top: auto;
    margin-bottom: 12px;
}

/* Description */
.fd-3c-column__description {
    font-size: .95em;
    line-height: 1.7;
    color: #333;
    flex: 1;
}

.fd-3c-column__description p {
    margin: 0 0 .75em;
}

.fd-3c-column__description p:last-child {
    margin-bottom: 0;
}

/* Keywords */
.fd-3c-column__keywords {
    font-size: .85em;
    font-style: italic;
    color: #6c7280;
    margin: 0;
}

/* Empty state */
.fd-3c-empty {
    color: #888;
    font-style: italic;
}

/* ── 3C Section header (heading + intro above the grid) ── */
.fd-3c-section__heading {
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 16px;
}

.fd-3c-section__intro {
    font-size: .95em;
    line-height: 1.75;
    color: #444;
    margin-bottom: 28px;
}

.fd-3c-section__intro p {
    margin: 0;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Superior University – Program Search Widget  (fd-spw)                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── CSS Tokens ──────────────────────────────────────────────────────────── */
.fd-spw {
    --su-purple:       #5b0fa8;
    --su-purple-dark:  #42097d;
    --su-purple-light: #f3eeff;
    --su-text:         #1a1a2e;
    --su-text-muted:   #5c5c7a;
    --su-border:       #c8c3de;   /* intentionally visible default */
    --su-bg:           #ffffff;
    --su-bg-hover:     #f8f6ff;
    --su-radius:       10px;
    --su-radius-sm:    6px;
    --su-transition:   0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}
.fd-spw *, .fd-spw *::before, .fd-spw *::after { box-sizing: inherit; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.fd-spw__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 18px;
}

/* ── Search wrap (flex row: icon | input | spinner) ─────────────────────── */
.fd-spw__search-wrap {
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 220px;
    padding: 0 14px;
    border: 2px solid var(--su-border);   /* 2 px so it's clearly visible */
    border-radius: 50px;
    background: var(--su-bg);
    gap: 10px;
    transition:
        border-color var(--su-transition),
        box-shadow   var(--su-transition);
}

.fd-spw__search-wrap:focus-within {
    border-color: var(--su-purple);
    box-shadow: 0 0 0 3px rgba(91, 15, 168, .13);
}

.fd-spw__search-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--su-text-muted);
    pointer-events: none;
}

.fd-spw__search-input {
    flex: 1;
    min-width: 0;
    border: none !IMPORTANT;
    outline: none !IMPORTANT;
    background: transparent;
    padding: 13px 0;
    font-size: 15px;
    color: var(--su-text);
    line-height: 1.4;
}
input.fd-spw__search-input {
  border: none;
  outline: none;
}

.fd-spw__search-input::placeholder { color: #b0adc4; }
.fd-spw__search-input:focus { border: none; box-shadow: none; }

/* ── Spinner (flex sibling, no absolute positioning) ────────────────────── */
.fd-spw__spinner {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border: 2px solid var(--su-border);
    border-top-color: var(--su-purple);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}
.fd-spw__spinner.is-spinning {
    opacity: 1;
    animation: fd-spin 0.75s linear infinite;
}
@keyframes fd-spin { to { transform: rotate(360deg); } }

/* ── Filter tags ─────────────────────────────────────────────────────────── */
.fd-spw__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fd-spw__filter-btn {
    padding: 9px 18px;
    border: 1.5px solid var(--su-border);
    border-radius: 50px;
    background: var(--su-bg);
    color: var(--su-text);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: .01em;
    transition:
        background      var(--su-transition),
        border-color    var(--su-transition),
        color           var(--su-transition),
        box-shadow      var(--su-transition),
        transform       0.12s ease;
}
.fd-spw__filter-btn:hover {
    border-color: var(--su-purple);
    color: var(--su-purple);
    transform: translateY(-1px);
}
.fd-spw__filter-btn.is-active {
    background: var(--su-purple);
    border-color: var(--su-purple);
    color: #fff;
    box-shadow: 0 3px 10px rgba(91, 15, 168, .25);
}
.fd-spw__filter-btn.is-active:hover {
    background: var(--su-purple-dark);
    border-color: var(--su-purple-dark);
    transform: translateY(-1px);
}

/* ── Table header (desktop) ──────────────────────────────────────────────── */
.fd-spw__table-head {
    display: none;   /* JS shows this only when results are present */
    align-items: center;
    padding: 10px 18px;
    background: #f4f2f9;
    border-radius: var(--su-radius-sm) var(--su-radius-sm) 0 0;
    border: 1px solid var(--su-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--su-text-muted);
}

/* ── Shared column widths ────────────────────────────────────────────────── */
.fd-spw__table-head .fd-spw__col--program,
.fd-spw__program-card .fd-spw__col--program { flex: 0 0 30%; }

.fd-spw__table-head .fd-spw__col--faculty,
.fd-spw__program-card .fd-spw__col--faculty { flex: 0 0 22%; }

.fd-spw__table-head .fd-spw__col--duration,
.fd-spw__program-card .fd-spw__col--duration { flex: 0 0 13%; }

.fd-spw__table-head .fd-spw__col--fee,
.fd-spw__program-card .fd-spw__col--fee { flex: 0 0 20%; }

.fd-spw__table-head .fd-spw__col--action,
.fd-spw__program-card .fd-spw__col--action { flex: 1; text-align: right; }

/* ── Program list container ──────────────────────────────────────────────── */
.fd-spw__list {
    border: 1px solid var(--su-border);
    border-top: none;
    border-radius: 0 0 var(--su-radius) var(--su-radius);
    overflow: hidden;
}

/* ── Program card (one row) ──────────────────────────────────────────────── */
.fd-spw__program-card {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    background: var(--su-bg);
    border-bottom: 1px solid var(--su-border);
    gap: 0;
    transition:
        background   var(--su-transition),
        box-shadow   var(--su-transition);
}
.fd-spw__program-card:last-child { border-bottom: none; }
.fd-spw__program-card:hover {
    background: var(--su-bg-hover);
    box-shadow: inset 4px 0 0 var(--su-purple);
}

.fd-spw__program-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--su-text);
    line-height: 1.3;
    display: block;
}

.fd-spw__meta-item {
    font-size: 14px;
    color: var(--su-text-muted);
    padding-right: 6px;
}

.fd-spw__fee-value {
    font-weight: 700;
    color: var(--su-text);
    font-size: 14px;
}

/* ── View Details button ─────────────────────────────────────────────────── */
.fd-spw__program-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--su-purple);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 15px;
    border: 1.5px solid var(--su-purple);
    border-radius: 50px;
    white-space: nowrap;
    transition:
        background  var(--su-transition),
        color       var(--su-transition),
        transform   0.12s ease;
}
.fd-spw__program-link:hover {
    background: var(--su-purple);
    color: #fff !IMPORTANT;
    text-decoration: none;
    transform: translateX(2px);
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.fd-spw__program-card.fd-spw__skeleton { pointer-events: none; }

.fd-spw__skel {
    display: block;
    height: 13px;
    width: 70%;
    background: linear-gradient(
        90deg,
        #ede9f5 25%,
        #f8f6ff 50%,
        #ede9f5 75%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: fd-shimmer 1.5s ease-in-out infinite;
}
@keyframes fd-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.fd-spw__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--su-text-muted);
    text-align: center;
    border: 1px solid var(--su-border);
    border-top: none;
    border-radius: 0 0 var(--su-radius) var(--su-radius);
}
.fd-spw__empty[hidden] { display: none; }
.fd-spw__empty svg { opacity: .45; }
.fd-spw__empty p { margin: 0; font-size: 15px; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE  –  ≤ 768 px
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE  ≤ 768 px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Top bar: search full-width, filters below ── */
    .fd-spw__topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fd-spw__search-wrap {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    /*
     * Filters: 2 × 2 grid.
     * flex-wrap:wrap + calc(50%) gives exactly 2 buttons per row
     * without any horizontal overflow or blank right-side space.
     */
    .fd-spw__filters {
        flex-wrap: wrap;
        overflow: visible;
        gap: 8px;
    }

    .fd-spw__filter-btn {
        flex: 1 1 calc(50% - 4px);   /* 2 per row */
        text-align: center;
        justify-content: center;
        padding: 10px 12px;
    }

    /* ── Hide the desktop table header row ── */
    .fd-spw__table-head { display: none; }

    /* Restore borders that were linked to table-head being visible */
    .fd-spw__list {
        border-top: 1px solid var(--su-border);
        border-radius: var(--su-radius);
    }

    .fd-spw__empty {
        border-top: 1px solid var(--su-border);
        border-radius: var(--su-radius);
    }

    /*
     * ── Program card: CSS grid layout ──
     *
     *  ┌─────────────────────────────────┐
     *  │ Program Title                   │  ← full width
     *  ├────────────────┬────────────────┤
     *  │ FACULTY        │ DURATION       │  ← two columns
     *  │ Computer Sci   │ 4 years        │
     *  ├────────────────┴────────────────┤
     *  │ FEE (INDICATIVE)                │  ← full width
     *  │ PKR 1,45,000/sem                │
     *  ├─────────────────────────────────┤
     *  │       [ View Details → ]        │  ← full width
     *  └─────────────────────────────────┘
     */
    .fd-spw__program-card {
        display: grid;
        grid-template-areas:
            "prog   prog"
            "facul  dur"
            "fee    fee"
            "act    act";
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
        padding: 16px;
        /* remove the desktop flex hover shift on mobile */
        box-shadow: none;
    }

    .fd-spw__program-card:hover {
        box-shadow: inset 3px 0 0 var(--su-purple);
    }

    .fd-spw__program-card .fd-spw__col--program  { grid-area: prog;  }
    .fd-spw__program-card .fd-spw__col--faculty   { grid-area: facul; }
    .fd-spw__program-card .fd-spw__col--duration  { grid-area: dur;   }
    .fd-spw__program-card .fd-spw__col--fee       { grid-area: fee;   }
    .fd-spw__program-card .fd-spw__col--action    { grid-area: act;   }

    /* Reset any desktop flex-basis widths */
    .fd-spw__program-card [class*="fd-spw__col--"] {
        flex: none;
        width: auto;
        text-align: left;
        padding-right: 0;
    }

    /* Program title */
    .fd-spw__program-title {
        font-size: 15px;
        line-height: 1.35;
    }

    /*
     * Show the column name (Duration, Faculty, Fee) as a small
     * uppercase label above each value, using the data-label attribute
     * already set by the JS buildCard() function.
     */
    .fd-spw__meta-item {
        display: flex;
        flex-direction: column;
        font-size: 14px;
    }

    .fd-spw__meta-item::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--su-text-muted);
        margin-bottom: 3px;
    }

    /* Fee value inherits bold from .fd-spw__fee-value */
    .fd-spw__col--fee .fd-spw__fee-value {
        font-size: 14px;
    }

    /* View Details: full-width pill */
    .fd-spw__program-link {
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
        font-size: 14px;
    }
}

/* ── Very small screens ≤ 380 px ─────────────────────────────────────────── */
@media (max-width: 380px) {
    .fd-spw__search-input { font-size: 14px; padding: 11px 0; }
    .fd-spw__filter-btn   { font-size: 12.5px; padding: 9px 10px; }
    .fd-spw__program-title { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SEARCH HINT  (fd-spw__mobile-hint)
   ═══════════════════════════════════════════════════════════════════════════ */

.fd-spw__mobile-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 24px;
    color: var(--su-text-muted);
    text-align: center;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
}
.fd-spw__mobile-hint[hidden] { display: none; }
.fd-spw__mobile-hint svg { opacity: .4; }
.fd-spw__mobile-hint p { margin: 0; font-size: 14px; }

/* On desktop the hint is never visible */
@media (min-width: 769px) {
    .fd-spw__mobile-hint { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCREDITATIONS WIDGET  (fd-accr-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.fd-accr-grid {
    display: grid;
    grid-template-columns: repeat( var(--fd-accr-cols, 3), 1fr );
    gap: 24px;
}

.fd-accr-card {
    border: 1px solid #e2e0ec;
    border-radius: 12px;
    padding: 32px 24px 28px;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fd-accr-card:hover {
    box-shadow: 0 6px 24px rgba(91,15,168,.10);
    transform: translateY(-2px);
}

/* Icon / emoji */
.fd-accr-card__icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 18px;
    display: block;
}

/* Divider line between icon and title */
.fd-accr-card__icon + .fd-accr-card__title::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: #e2e0ec;
    margin: 0 auto 16px;
}

.fd-accr-card__title {
    font-size: 1.1em;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
    line-height: 1.3;
}

.fd-accr-card__subtitle {
    font-size: .875em;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 10px;
}

.fd-accr-card__desc {
    font-size: .875em;
    color: #5c5c7a;
    line-height: 1.65;
    margin: 0;
}

/* Responsive */
@media (max-width: 820px) {
    .fd-accr-grid {
        grid-template-columns: repeat( min( var(--fd-accr-cols, 3), 2 ), 1fr );
    }
}
@media (max-width: 520px) {
    .fd-accr-grid {
        grid-template-columns: 1fr;
    }
    .fd-accr-card {
        padding: 24px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER ORGANIZATIONS WIDGET  (fd-partner-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.fd-partner-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e2e0ec;
    border-radius: 10px;
    overflow: hidden;
}

.fd-partner-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #e2e0ec;
    transition: background 0.18s ease;
}

.fd-partner-item:last-child {
    border-bottom: none;
}

.fd-partner-item:hover {
    background: #f8f6ff;
}

.fd-partner-logo-wrap {
    flex-shrink: 0;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fd-partner-logo {
    max-width: 100px;
    max-height: 52px;
    object-fit: contain;
    display: block;
}

.fd-partner-logo-wrap--empty {
    background: #f4f2f9;
    border-radius: 6px;
    height: 52px;
}

.fd-partner-name {
    font-size: 1em;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 480px) {
    .fd-partner-item {
        gap: 14px;
        padding: 14px 16px;
    }
    .fd-partner-logo-wrap { width: 72px; }
    .fd-partner-logo { max-width: 72px; }
    .fd-partner-name { font-size: .9em; }
}

/* ── Accreditations: image support ────────────────────────────────────────── */
.fd-accr-card__img-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.fd-accr-card__img {
    width: 60px;
    max-height: 60px;
    object-fit: contain;
    display: block;
}

/* ── Partner orgs: grid layout + image position variants ─────────────────── */
.fd-partner-list--grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fd-partner-list--grid .fd-partner-item {
    border: 1px solid #e2e0ec;
    border-radius: 8px;
}

/* top: stack logo above name */
.fd-partner-list--top .fd-partner-item {
    flex-direction: column;
    align-items: flex-start;
}
.fd-partner-list--top .fd-partner-logo-wrap {
    margin-right: 0;
    margin-bottom: 10px;
}

/* right: name before logo */
.fd-partner-list--right .fd-partner-item {
    flex-direction: row-reverse;
}
.fd-partner-list--right .fd-partner-logo-wrap {
    margin-right: 0;
    margin-left: 20px;
}

@media (max-width: 768px) {
    .fd-partner-list--grid {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 480px) {
    .fd-partner-list--grid {
        grid-template-columns: 1fr;
    }
}

/* ── Key Skills Grid ──────────────────────────────────────────────────────── */
.fd-skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.fd-skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: #fff;
    border: 1px solid #e2e0ec;
    border-radius: 10px;
    justify-content: center;
    
}
.fd-skill-img-wrap { display: flex; justify-content: center; }
.fd-skill-img { width: 48px; height: 48px; object-fit: contain; display: block; }
.fd-skill-name { font-size: .9em; font-weight: 600; color: #1a1a2e; margin: 0; }

@media (max-width: 820px) { .fd-skills-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .fd-skills-grid { grid-template-columns: repeat(2,1fr); } }

/* ── Professional Certificates Grid ──────────────────────────────────────── */
.fd-cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.fd-cert-card {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid #e2e0ec;
    border-radius: 10px;
}
.fd-cert-img-wrap { display: flex; }
.fd-cert-img { width: 56px; height: 56px; object-fit: contain; display: block; }
.fd-cert-name { font-size: 1em; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; }
.fd-cert-desc { font-size: .875em; color: #5c5c7a; line-height: 1.6; margin: 0; }

@media (max-width: 820px) { .fd-cert-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .fd-cert-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FD Single-Item Widgets  (.fd-si-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.fd-si-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    /* flex-direction is controlled by Elementor's image_position control */
}

/* When direction is column or column-reverse, center by default */
.fd-si-wrap[style*="column"] {
    align-items: center;
}

.fd-si-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fd-si-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.fd-si-text {
    flex: 1;
    min-width: 0;
}

.fd-si-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
}

.fd-si-desc {
    margin: 6px 0 0;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   What Sets Us Apart Widget  (.fd-wsa-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section description text above the grid */
.fd-wsa-description {
    margin-bottom: 36px;
}
.fd-wsa-description p { margin: 0 0 .75em; }
.fd-wsa-description p:last-child { margin-bottom: 0; }

/* Cards grid */
.fd-wsa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Individual card */
.fd-wsa-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8e0f0;
    border-radius: 12px;
    padding: 24px 20px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Image */
.fd-wsa-card__img-wrap {
    margin-bottom: 16px;
}
.fd-wsa-card__img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Title */
.fd-wsa-card__title {
    font-size: 1.05em;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.35;
    margin: 0 0 10px;
}

/* Short description */
.fd-wsa-card__desc {
    font-size: .9em;
    color: #555;
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;  /* pushes button to bottom of card */
}

/* Button — pill outline style matching the reference */
.fd-wsa-card__btn {
    display: inline-block;
    align-self: flex-start;
    padding: 8px 20px;
    border: 1px solid #c084e0;
    border-radius: 50px;
    font-size: .875em;
    font-weight: 500;
    color: #9333ea;
    background: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.fd-wsa-card__btn:hover {
    background: #9333ea;
    color: #fff;
    border-color: #9333ea;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 900px) {
    .fd-wsa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .fd-wsa-grid { grid-template-columns: 1fr; }
}

/* ── Semester table – Total Credit Hours row ─────────────────────────────── */
.course-table__total td {
    border-top: 2px solid #ddd;
    padding-top: 10px;
    font-weight: 700;
    background: #f9f9f9;
}