/* =========================================================
   PROSPEN COURSES MANAGER - CSS
   Author: Prospen Africa
   Updated: October 2025
   Description: Unified styling for course tables, filters,
   grids, cards, buttons, and responsive layout
========================================================= */

/* =========================================================
   SEARCH RESULTS PAGE LAYOUT FIX
========================================================= */

/* Ensure search results page uses normal theme layout */
.page-id-80206 .elementor-80206 .elementor-element.elementor-element-cec03d2 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --margin-top: 20px;
    --margin-bottom: 0px;
    --margin-left: 0px;
    --margin-right: 0px;
}

/* Ensure search results container fits within theme layout */
.page-id-80206 #prospen-search-results-container {
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Ensure proper layout for all course pages */
.prospen-course-grid,
.prospen-related-courses-grid,
.prospen-table-wrapper,
.prospen-filter-container {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix for All Courses page filter container */
#prospen-all-courses-container .prospen-filter-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Ensure duration filter is visible in All Courses */
#prospen-all-courses-container #filter-duration {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ✅ Safe reset: removed `all: initial` (was causing layout bugs) */
.prospen-course-grid,
.prospen-related-courses-grid,
.prospen-table-wrapper,
.prospen-filter-container,
.prospen-pagination,
.prospen-no-results,
.prospen-related-courses-section,
.prospen-venue-header {
    font-family: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    display: flex;
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --margin-top: 20px;
    --margin-bottom: 0px;
    --margin-left: 0px;
    --margin-right: 0px;
}

/* ✅ Prevent leftover pseudo-elements */
.prospen-venue-header::before,
.prospen-venue-header::after {
    display: none !important;
    content: none !important;
}

/* View Toggle + Search — shared row */
.prospen-view-search-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 20px 0;
}

/* Search bar — left-aligned, grows to fill available space, stops before the toggle buttons */
.prospen-course-search-bar {
    display: flex;
    align-items: center;
    flex: 1;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    background: #fff;
}

.prospen-course-search-bar:focus-within {
    border-color: #D58037;
}

.prospen-course-search-input {
    flex: 1;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    background: #fff;
    font-family: inherit;
    min-width: 0;
    /* Kill any theme bottom-border / underline */
    border-bottom: none !important;
    appearance: none;
    -webkit-appearance: none;
}

.prospen-course-search-input::placeholder {
    color: #aaa;
}

.prospen-course-search-btn {
    flex: 0 0 auto;
    border: none;
    border-left: 2px solid #e0e0e0;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    background: #e0e0e0;
    color: #aaa;
}

.prospen-course-search-btn:disabled {
    background: #e0e0e0;
    color: #aaa;
    cursor: not-allowed;
}

.prospen-course-search-btn:not(:disabled) {
    background: #D58037;
    color: #ffffff;
    border-left-color: #D58037;
}

.prospen-course-search-btn:not(:disabled):hover {
    background: #b3692c;
    color: #ffffff;
}

/* View Toggle — right-aligned, fixed size, untouched */
.prospen-view-toggle {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.prospen-view-toggle-btn {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prospen-view-toggle-btn:hover {
    border-color: #D58037;
    color: #D58037;
}

.prospen-view-toggle-btn.active {
    background: #D58037;
    border-color: #D58037;
    color: #fff;
}



.prospen-course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 20px 0;
    font-family: inherit;
}

/* List View Styles */
.prospen-course-grid.prospen-list-view {
    grid-template-columns: 1fr;
    gap: 15px;
}

.prospen-course-grid.prospen-list-view .prospen-course-card {
    flex-direction: row;
    align-items: center;
    padding: 15px;
    height: auto;
    min-height: 120px;
}

.prospen-course-grid.prospen-list-view .prospen-image-container {
    width: 100px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 20px;
}

.prospen-course-grid.prospen-list-view .prospen-course-content {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prospen-course-grid.prospen-list-view .prospen-course-title {
    margin-bottom: 5px;
    font-size: 16px;
}

.prospen-course-grid.prospen-list-view .prospen-course-info {
    font-size: 14px;
    margin-bottom: 2px;
    line-height: 1.3;
}

.prospen-course-grid.prospen-list-view .prospen-view-button {
    width: auto;
    min-width: 120px;
    margin: 0;
    padding: 10px 20px;
    align-self: center;
}

/* Course Card */
.prospen-course-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0;
    border: 1px solid #e0e0e0;
    height: 100%;
}

.prospen-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.prospen-course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #D58037;
    z-index: 1;
}

/* Image Container */
.prospen-image-container {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.prospen-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.prospen-course-card:hover .prospen-image-container img {
    transform: scale(1.05);
}

/* Course Content */
.prospen-course-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Clickable Course Title Styles */
.prospen-course-title-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    margin-bottom: 8px;
}

.prospen-course-title-link:hover .prospen-course-title {
    color: #D58037 !important;
    text-decoration: underline;
}

.prospen-course-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.3;
    color: #333;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.prospen-course-info {
    font-size: 14px;
    margin-bottom: 4px;
    color: #555;
    line-height: 1.4;
    text-align: left;
}

.prospen-course-info strong {
    color: #333;
}

/* View Button */
.prospen-view-button {
    background: #D58037;
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 12px 0;
    width: 90% !important;
    margin: 10px auto 15px auto;
    font-size: 14px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
}

.prospen-view-button:hover {
    background: #b3692c;
    transform: translateY(-1px);
}

/* =========================================================
   "Didn't find what you were looking for?" contact card
   Appended at the end of every course listing (grid + list
   view, category pages and the general All Courses page).
========================================================= */
.prospen-contact-card {
    justify-content: center;
}

.prospen-contact-card::before {
    background: #535153;
}

.prospen-contact-content {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    text-align: center;
}

.prospen-contact-icon {
    font-size: 44px;
    margin-bottom: 15px;
    color: #D58037;
    line-height: 1;
}

.prospen-contact-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin-bottom: 12px;
}

.prospen-contact-text {
    font-size: 14px;
    color: #535153;
    margin-bottom: 20px;
    line-height: 1.5;
}

.prospen-contact-btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.prospen-contact-btn-contact {
    background: #535153 !important;
    width: 100% !important;
}

.prospen-contact-btn-contact:hover {
    background: #3f3d3f !important;
}

.prospen-contact-btn-whatsapp {
    background: #25D366 !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prospen-contact-btn-whatsapp:hover {
    background: #1ebc59 !important;
}

/* Keep the contact card centered/vertical even inside list view,
   where regular course cards switch to a horizontal row layout. */
.prospen-course-grid.prospen-list-view .prospen-contact-card {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    padding: 0;
    max-width: 420px;
    margin: 0 auto;
}

.prospen-course-grid.prospen-list-view .prospen-contact-btn-contact,
.prospen-course-grid.prospen-list-view .prospen-contact-btn-whatsapp {
    width: 100% !important;
    min-width: 0;
}

/* Filter Container */
.prospen-filter-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 20px auto 30px auto !important;
    padding: 15px 20px !important;
    background: #fff !important;
    border-radius: 25px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.prospen-filter-container select,
.prospen-filter-container button {
    padding: 12px 18px !important;
    font-size: 14px !important;
    border-radius: 30px !important;
    border: 1px solid #ccc !important;
    background-color: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    min-width: 140px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
}

.prospen-filter-container select:hover,
.prospen-filter-container button:hover {
    border-color: #D58037 !important;
    box-shadow: 0 0 6px rgba(213,128,55,0.3) !important;
}

.prospen-filter-container button {
    background-color: #D58037 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
}

.prospen-filter-container button:hover {
    background-color: #b3692c !important;
    transform: translateY(-1px) !important;
}

/* Venue Courses Header - UPDATED: Transparent background */
.prospen-venue-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px;
    background: transparent !important;
    color: #333;
    border-radius: 10px;
    box-shadow: none !important;
}

.prospen-venue-header h1 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #333;
    font-weight: 700;
}

.prospen-venue-header p {
    margin: 0;
    font-size: 1.1em;
    color: #666;
}

/* Pagination - UPDATED: Better sizing and alignment */
.prospen-pagination {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: inherit;
}

.prospen-pagination button {
    background: #D58037;
    color: white;
    border: none;
    padding: 8px 14px;
    margin: 0 3px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
    min-width: 40px;
    font-weight: 600;
}

.prospen-pagination button.active {
    background-color: #474340;
    transform: scale(1.2);
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.prospen-pagination button:hover:not(.active) {
    background-color: #b3692c;
}

.prospen-pagination button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
}

/* No Results */
.prospen-no-results {
    text-align: center;
    color: #999;
    margin-top: 40px;
    font-size: 16px;
    padding: 20px;
    font-family: inherit;
}

/* Table Wrapper */
.prospen-table-wrapper {
    margin: 20px 0 !important;
    font-family: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Flex column keeps the View More button strictly BELOW the table.
       Without this, overflow-x on the wrapper causes the button to float
       to the right of the table's scrollable area. */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-x: visible !important;
}

/* Table itself handles its own horizontal scroll */
.prospen-table-wrapper > .prospen-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

.prospen-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 20px 0;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-family: inherit;
}

/* Desktop table sizing — matched to Qualification Manager */
@media (min-width: 769px) {
    .prospen-table th {
        background-color: #757575;
        color: #fff;
        padding: 10px;
        border: 1px solid #ddd;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
    }

    .prospen-table td {
        border: 1px solid #ddd;
        padding: 8px 10px;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        box-sizing: border-box;
    }
}

/* Mobile table sizing — original values preserved */
@media (max-width: 768px) {
    .prospen-table th {
        background-color: #757575;
        color: #fff;
        padding: 10px;
        border: 1px solid #ddd;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
    }

    .prospen-table td {
        border: 1px solid #ddd;
        padding: 6px;
        text-align: center;
        font-size: 14px;
    }

    /* Hide the standard table on mobile; show session cards instead */
    .prospen-table-wrapper > .prospen-table {
        display: none !important;
    }

    /* Session list container */
    .prospen-session-cards {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
        padding: 0 2.5% !important;
    }

    /* "Upcoming sessions" heading */
    .prospen-session-cards-heading {
        color: #666 !important;
        font-weight: 400 !important;
        font-size: 1.1rem !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
    }

    /* Individual session row */
    .prospen-session-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee !important;
        box-sizing: border-box !important;
    }
    .prospen-session-item:last-child {
        border-bottom: none !important;
    }

    /* Date + venue/duration text */
    .prospen-session-item-details {
        flex: 1 !important;
    }
    .prospen-session-item-details h3 {
        margin: 0 !important;
        font-size: 1.05rem !important;
        /* font-weight: 600 !important; — removed, inherits theme bold */
        color: #333 !important;
    }
    .prospen-session-item-details p {
        margin: 2px 0 0 !important;
        color: #777 !important;
        font-size: 0.9rem !important;
    }

    /* Register button — pill shape matching brand style */
    .prospen-session-card-register {
        background: #D58037 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 30px !important;
        padding: 10px 24px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        font-family: inherit !important;
        text-decoration: none !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        text-align: center !important;
        margin-left: 16px !important;
        transition: background-color 0.2s ease !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .prospen-session-card-register:hover {
        background: #b86a28 !important;
        color: #fff !important;
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
    .prospen-session-card-register:focus,
    .prospen-session-card-register:active {
        background: #D58037 !important;
        color: #fff !important;
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* View more button on mobile — keep in flow */
    .prospen-view-more-container {
        width: 95% !important;
        margin-left: 2.5% !important;
        margin-right: 2.5% !important;
    }
}

.prospen-table tr:nth-child(even) { background-color: #f8f8f8; }
.prospen-table tr:nth-child(odd) { background-color: #fff; }

.prospen-table tr:hover td { background-color: #f0f0f0; }

/* ── Register button column: fixed width + right-aligned, same height for every row ── */
.prospen-table td.col-action {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    vertical-align: middle;
    text-align: right;
    padding: 8px 12px;
    box-sizing: border-box;
}

.prospen-table td.col-action .prospen-register-link {
    display: inline-block;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Register Link — now a button */
.prospen-register-link {
    padding: 6px 10px;
    background-color: #D58037;
    color: #fff !important;
    text-decoration: none;
    display: block;
    width: 85%;
    margin: 0 auto;
    font-size: 14px;
    border-radius: 15px;
    transition: filter 0.2s ease, transform 0.15s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
}

.prospen-register-link:hover {
    background-color: #b2602a;
    filter: brightness(0.9);
    transform: translateY(-1px);
}

.prospen-register-link:active {
    transform: scale(0.97);
}

/* ── View More / Less Dates Button ─────────────────────── */
.prospen-view-more-container {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    /* Ensure it always renders on its own line below the table */
    clear: both !important;
    float: none !important;
}

.prospen-view-more-btn {
    display: inline-block !important;
    padding: 10px 28px !important;
    background-color: #D58037 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background-color 0.3s ease, transform 0.15s ease;
    box-shadow: 0 3px 10px rgba(213,128,55,0.25) !important;
    float: none !important;
    position: static !important;
}

.prospen-view-more-btn:hover {
    background-color: #b2602a !important;
    transform: translateY(-1px);
}

/* =========================================================
   COURSE REGISTRATION POPUP
========================================================= */

#prospen-course-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.56);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
#prospen-course-overlay.pcr-active {
    display: flex;
    animation: pcrFadeIn .28s ease;
}
@keyframes pcrFadeIn { from { opacity: 0; } to { opacity: 1; } }

#prospen-course-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 48px rgba(0,0,0,.24);
    width: 100%;
    max-width: 900px;
    max-height: 93vh;
    overflow-y: auto;
    position: relative;
    animation: pcrSlideUp .28s ease;
}
@keyframes pcrSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

#prospen-course-close {
    position: absolute;
    top: 14px; right: 18px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #bbb;
    z-index: 2;
    transition: color .2s;
    padding: 0;
}
#prospen-course-close:hover { color: #333; }

#prospen-course-form-wrap {
    padding: 38px 42px 34px;
    font-family: 'Poppins', Arial, sans-serif;
}

#prospen-course-form-wrap h2 {
    text-align: center;
    color: #1a1a2e;
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    padding-right: 26px;
}

.pcr-summary-box {
    background: #fff8f2;
    border: 1px solid #f0d0b0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}
.pcr-sum-item { font-size: 13px; color: #333; line-height: 1.6; }
.pcr-sum-lbl  { font-weight: 700; color: #D58037; }

.pcr-error-banner {
    background: #fde8e8;
    color: #7b1c1c;
    border: 1px solid #f5c5c5;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 16px;
}

.pcr-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}
.pcr-form-group {
    flex: 1 1 calc((100% - 36px) / 3);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pcr-full { flex: 1 1 100%; }

.pcr-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 7px;
    margin-bottom: 2px;
}

.pcr-form-group > label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
}
.pcr-req::after { content: " *"; color: #e74c3c; }

#prospenCourseRegForm input:not([type="checkbox"]):not([type="radio"]),
#prospenCourseRegForm select,
#prospenCourseRegForm textarea {
    padding: 11px 14px;
    border: 1px solid #B8C5D6;
    border-radius: 20px;
    font-size: 13px;
    background: #F5F8FB;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: #333;
}
#prospenCourseRegForm textarea { border-radius: 12px; resize: vertical; }
#prospenCourseRegForm input:focus,
#prospenCourseRegForm select:focus,
#prospenCourseRegForm textarea:focus {
    border-color: #D58037;
    box-shadow: 0 0 0 3px rgba(213,128,55,.2);
    outline: none;
    background: #fff;
}
#prospenCourseRegForm input.pcr-invalid,
#prospenCourseRegForm select.pcr-invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,.15);
}

.pcr-phone-row  { display: flex; gap: 8px; }
.pcr-phone-code { width: 82px !important; flex-shrink: 0; background: #e8edf2 !important; text-align: center; cursor: default; border-radius: 20px !important; }
.pcr-phone-num  { flex: 1 !important; }

.pcr-field-error { color: #e74c3c; font-size: 11px; margin-top: 4px; }

.pcr-platform-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.pcr-platform-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #444;
    font-weight: 500;
    cursor: pointer;
}
.pcr-platform-options input[type="radio"],
.pcr-platform-options input[type="checkbox"] {
    accent-color: #D58037;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pcr-checkbox-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    font-weight: 400 !important;
    line-height: 1.55;
}
.pcr-checkbox-row input[type="checkbox"] {
    width: 16px !important;
    min-width: 16px;
    height: 16px;
    padding: 0 !important;
    border-radius: 4px !important;
    background: #F5F8FB !important;
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid #B8C5D6 !important;
    accent-color: #D58037;
}
.pcr-checkbox-row span { flex: 1; }

.pcr-note {
    font-size: 12px;
    color: #777;
    margin: 0;
    line-height: 1.5;
}

#prospenCourseRegForm .pcr-privacy-note {
    font-size: 11px !important;
    color: #999 !important;
    text-align: center !important;
    margin-top: 10px !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    font-family: inherit !important;
}
#prospenCourseRegForm .pcr-privacy-note a {
    color: #D58037 !important;
    text-decoration: none !important;
}

#pcr-submit-btn {
    padding: 13px 32px;
    color: #fff;
    background-color: #D58037;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .22s, transform .15s;
    font-family: inherit;
    display: block;
    margin: 0 auto;
    min-width: 200px;
    text-align: center;
}
#pcr-submit-btn:hover    { opacity: .87; transform: translateY(-1px); }
#pcr-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.pcr-hidden {
    position: absolute; left: -9999px; top: -9999px;
    opacity: 0; height: 0; width: 0; overflow: hidden;
}

/* Success view */
#prospen-course-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 40px;
    text-align: center;
    font-family: 'Poppins', Arial, sans-serif;
}
.pcr-check { font-size: 56px; margin-bottom: 16px; }
#prospen-course-success h3 {
    color: #1a1a2e;
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
}
#prospen-course-success p { color: #666; margin: 0 0 24px; font-size: 14px; line-height: 1.6; }
#pcr-done-btn {
    padding: 12px 32px;
    color: #fff;
    background-color: #D58037;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
    font-family: inherit;
}
#pcr-done-btn:hover { opacity: .87; }

/* Popup responsive */
@media (max-width: 680px) {
    #prospen-course-form-wrap { padding: 28px 20px 26px; }
    .pcr-form-group { flex: 1 1 100%; }
    #pcr-submit-btn { width: 100%; }
    .pcr-summary-box { flex-direction: column; gap: 4px; }
}

@media (max-width: 400px) {
    #prospen-course-box { border-radius: 12px; }
    #prospen-course-form-wrap { padding: 22px 14px 20px; }
}

/* Toggle Button - FORCED: Bottom center positioning */
.prospen-toggle-btn {
    display: none !important;
    margin: 20px auto 0 auto !important;
    padding: 10px 25px !important;
    font-size: 15px !important;
    background-color: #D58037 !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-align: center !important;
    width: auto !important;
    display: block !important; /* Force block display */
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important; /* Ensure it clears any floats */
    position: relative !important; /* Not absolute - keep in flow */
}

.prospen-toggle-btn:hover {
    background-color: #b2602a !important;
}

/* Ensure table wrapper has proper layout */
.prospen-table-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* Make sure the button container is properly structured */
.prospen-table-wrapper > .prospen-toggle-btn {
    display: block !important;
    margin-top: 20px !important;
}

/* Related Courses Section */
.prospen-related-courses-section { 
    margin: 40px 0; 
    font-family: inherit; 
    width: 100%;
    box-sizing: border-box;
}

.prospen-related-courses-section h3 { 
    display: none; 
}

.prospen-related-courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.prospen-related-course-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    height: 100%;
    box-sizing: border-box;
}

.prospen-related-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.prospen-related-course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #D58037;
    z-index: 1;
}

/* Related Course Image Container */
.prospen-related-course-card .prospen-image-container {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.prospen-related-course-card .prospen-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.prospen-related-course-card:hover .prospen-image-container img {
    transform: scale(1.05);
}

/* Related Course Content */
.prospen-related-course-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Clickable Related Course Title Styles */
.prospen-course-title-link:hover .prospen-related-course-title {
    color: #D58037 !important;
    text-decoration: underline;
}

.prospen-related-course-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.3;
    color: #333;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.prospen-related-course-info {
    font-size: 14px;
    margin-bottom: 4px;
    color: #555;
    line-height: 1.4;
    text-align: left;
}

.prospen-related-course-info strong {
    color: #333;
}

/* Related Course View Button */
.prospen-related-view-button {
    background: #D58037;
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 12px 0;
    width: 90%;
    margin: 10px auto 15px auto;
    font-size: 14px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    box-sizing: border-box;
}

.prospen-related-view-button:hover {
    background: #b3692c;
    transform: translateY(-1px);
}

/* =========================================================
   BUTTON STYLES - UPDATED NOVEMBER 2025
========================================================= */

/* Main Action Button (e.g., View Course, Related View) */
.prospen-view-button,
.prospen-related-view-button,
.prospen-filter-container button,
.prospen-pagination button,
.prospen-toggle-btn {
    background: #D58037;
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(213, 128, 55, 0.25);
}

/* Hover + Focus states */
.prospen-view-button:hover,
.prospen-related-view-button:hover,
.prospen-filter-container button:hover,
.prospen-pagination button:hover:not(.active),
.prospen-toggle-btn:hover {
    background: #b3692c !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(213, 128, 55, 0.35);
}

/* Active button effect */
.prospen-pagination button.active,
.prospen-view-button:active {
    background-color: #474340 !important;
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Disabled state */
.prospen-pagination button:disabled,
.prospen-filter-container button:disabled {
    background: #ccc !important;
    color: #777 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Mobile Circular Buttons */
@media (max-width: 768px) {
    .prospen-view-button {
        background: #D58037 !important;
        color: #fff !important;
        border-radius: 50% !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }

    .prospen-view-button::after {
        content: "➔";
        font-size: 18px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .prospen-view-button:hover {
        background: #D58037 !important;
        transform: none !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
    }
}

/* --- MOBILE CARD VIEW - FIXED: Remove image space and start text from top --- */
@media (max-width: 768px) {
    /* Stack search row vertically on mobile, hide toggle buttons */
    .prospen-view-search-row {
        flex-wrap: wrap;
    }
    .prospen-view-toggle {
        display: none;
    }
    .prospen-course-search-bar {
        flex: 1 1 100%;
    }

    /* Prevent iOS Safari from auto-zooming the page when this input is
       focused — any font-size under 16px triggers that zoom. Bumping to
       16px here (mobile only) avoids it without changing desktop. */
    .prospen-course-search-input {
        font-size: 16px !important;
    }
    
    .prospen-course-grid {
        grid-template-columns: 1fr;
    }
    
    .prospen-course-card {
        flex-direction: row;
        background: #ffffff;
        color: #000;
        border: 1px solid #ddd;
        align-items: flex-start; /* Changed from center to flex-start */
        position: relative;
        padding: 15px 70px 15px 15px; /* Added proper padding */
        min-height: auto;
        height: auto;
    }
    
    /* Completely remove image container on mobile */
    .prospen-image-container {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .prospen-course-content { 
        flex: 1; 
        padding: 0 !important; /* Remove padding from content */
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Ensure content starts from top */
        align-items: flex-start;
        width: 100%;
    }

    .prospen-course-title {
        margin-top: 0; /* Remove top margin to start from top */
        padding-top: 0;
    }

    /* Mobile circular view button */
    .prospen-view-button {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        background: #D58037;
        color: white;
        border: none;
        transition: none;
        margin: 0;
    }

    .prospen-view-button:hover {
        background: #D58037 !important;
        transform: translateY(-50%) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    }
    
    .prospen-view-button span { 
        display: none; 
    }
    
    .prospen-view-button::after { 
        content: "➔"; 
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

/* Responsive Design for Related Courses */
@media (min-width: 1200px) {
    .prospen-related-courses-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
}

@media (max-width: 1024px) {
    .prospen-course-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .prospen-related-courses-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 768px) {
    .prospen-course-grid {
        grid-template-columns: 1fr;
    }
    
    .prospen-related-courses-grid { 
        grid-template-columns: 1fr; 
    }
    
    .prospen-related-course-card {
        flex-direction: row;
        align-items: flex-start; /* Changed from center to flex-start */
        padding: 15px 70px 15px 15px; /* Added proper padding */
        min-height: auto;
        height: auto;
    }
    
    /* Completely remove image container on mobile for related courses */
    .prospen-related-course-card .prospen-image-container {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .prospen-related-course-content { 
        flex: 1; 
        padding: 0 !important; /* Remove padding from content */
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Ensure content starts from top */
        align-items: flex-start;
        width: 100%;
    }

    .prospen-related-course-title {
        margin-top: 0; /* Remove top margin to start from top */
        padding-top: 0;
    }

    /* Mobile circular view button for related courses */
    .prospen-related-view-button {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        background: #D58037;
        color: white;
        border: none;
        transition: none;
        margin: 0;
    }

    .prospen-related-view-button:hover {
        background: #D58037 !important;
        transform: translateY(-50%) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    }
    
    .prospen-related-view-button span { 
        display: none; 
    }
    
    .prospen-related-view-button::after { 
        content: "➔"; 
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .prospen-course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .prospen-related-courses-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* =========================================================
   PRINT STYLES
========================================================= */

@media print {
    .prospen-filter-container,
    .prospen-view-search-row,
    .prospen-view-toggle,
    .prospen-pagination,
    .prospen-toggle-btn {
        display: none !important;
    }
    
    .prospen-course-grid {
        display: block !important;
    }
    
    .prospen-course-card {
        break-inside: avoid;
        margin-bottom: 20px;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* Register Now Button Shortcode Styles */
.prospen-register-now-button {
    background: #D58037 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px rgba(213, 128, 55, 0.25) !important;
    font-family: inherit !important;
}

.prospen-register-now-button:hover {
    background: #b3692c !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(213, 128, 55, 0.35) !important;
    text-decoration: none !important;
}

.prospen-register-now-button:active {
    background-color: #474340 !important;
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* ── Register Now Button (shortcode + CSS-ID targeting) ─────────────────────
   .prospen-register-now-btn  — emitted by [register_now_button] shortcode.
   White background, orange text & border, bold, full-width, 5px radius.
   Hover: lifts up (translateY) AND shrinks slightly (scale).
   This class is intentionally kept separate from .prospen-register-link so
   it is not affected by the in-table button styles.
────────────────────────────────────────────────────────────────────────── */
button.prospen-register-now-btn,
a.prospen-register-now-btn,
.prospen-register-now-btn {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 28px !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #D58037 !important;
    fill: #D58037 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    border: 2px solid #D58037 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 3px 10px rgba(213, 128, 55, 0.18) !important;
}

button.prospen-register-now-btn:hover,
a.prospen-register-now-btn:hover,
.prospen-register-now-btn:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #D58037 !important;
    fill: #D58037 !important;
    border-color: #D58037 !important;
    transform: scale(0.96) translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(213, 128, 55, 0.28) !important;
    text-decoration: none !important;
}

button.prospen-register-now-btn:active,
a.prospen-register-now-btn:active,
.prospen-register-now-btn:active {
    transform: scale(0.93) translateY(0) !important;
    box-shadow: none !important;
}


/* [course_cards_slider] carousel CSS removed in v7.3.14 — the shortcode
   and its PHP callback were removed since HubSpot now crawls the site
   directly and the carousel had no cache/limit on its query. */


/* ── Searchable Country Dropdown ────────────────────────────────────────── */
.pcr-select-wrap {
    position: relative;
}
.pcr-select-wrap select {
    display: none !important; /* hidden; custom widget takes over */
}

/* The visible trigger button */
.pcr-custom-select {
    padding: 11px 38px 11px 14px;
    border: 1px solid #B8C5D6;
    border-radius: 20px;
    font-size: 13px;
    background: #F5F8FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 10px;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: #333;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    appearance: none;
    -webkit-appearance: none;
}
.pcr-custom-select:focus,
.pcr-custom-select.open {
    border-color: #D58037;
    box-shadow: 0 0 0 3px rgba(213,128,55,.2);
    outline: none;
    background-color: #fff;
}
.pcr-custom-select.pcr-placeholder {
    color: #999;
}
.pcr-custom-select.pcr-invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,.15);
}

/* Dropdown panel */
.pcr-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #B8C5D6;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    z-index: 99999;
    display: none;
    overflow: hidden;
}
.pcr-select-dropdown.open {
    display: block;
}

/* Search input inside dropdown */
.pcr-select-search-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    background: #fafbfc;
}
.pcr-select-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px 8px 32px;
    border: 1px solid #B8C5D6;
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.pcr-select-search:focus {
    border-color: #D58037;
    box-shadow: 0 0 0 3px rgba(213,128,55,.15);
}

/* Options list */
.pcr-select-options {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}
.pcr-select-options::-webkit-scrollbar { width: 6px; }
.pcr-select-options::-webkit-scrollbar-track { background: #f5f5f5; }
.pcr-select-options::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.pcr-select-option {
    padding: 9px 14px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background .12s;
    font-family: inherit;
}
.pcr-select-option:hover,
.pcr-select-option.focused {
    background: #fff4ea;
    color: #D58037;
}
.pcr-select-option.selected {
    background: #fff4ea;
    font-weight: 600;
    color: #D58037;
}
.pcr-select-option.hidden {
    display: none;
}
.pcr-select-no-results {
    padding: 10px 14px;
    font-size: 13px;
    color: #999;
    font-style: italic;
}

/* =====================================================
   MOBILE FILTER ICON + POPUP PANEL  (v7.1.0)
   ===================================================== */

/* --- Toggle button + apply row/button: hidden on desktop/tablet --- */
.prospen-mobile-filter-toggle,
.prospen-filter-apply-row,
.prospen-filter-apply-btn {
    display: none !important;
}

@media (max-width: 768px) {

    /* Show the toggle button */
    .prospen-mobile-filter-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        background: #fff !important;
        color: #333 !important;
        border: 1.5px solid #D58037 !important;
        border-radius: 30px !important;
        padding: 10px 18px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        font-family: inherit !important;
        cursor: pointer !important;
        box-shadow: 0 2px 6px rgba(213,128,55,0.15) !important;
        transition: background 0.2s ease, color 0.2s ease !important;
        position: relative !important;
    }

    .prospen-mobile-filter-toggle:hover,
    .prospen-mobile-filter-toggle[aria-expanded="true"] {
        background: #D58037 !important;
        color: #fff !important;
    }

    .prospen-mobile-filter-toggle svg {
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* Active badge showing number of active filters */
    .prospen-mobile-filter-badge {
        background: #D58037 !important;
        color: #fff !important;
        border-radius: 50% !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        width: 18px !important;
        height: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        margin-left: 2px !important;
    }

    .prospen-mobile-filter-toggle[aria-expanded="true"] .prospen-mobile-filter-badge {
        background: #fff !important;
        color: #D58037 !important;
    }

    /* --- Filter container: collapse selects on mobile --- */
    .prospen-filter-container {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 16px !important;
        gap: 0 !important;
        position: relative !important;
    }

    /* Wrap all the selects + clear button in a collapsible panel */
    .prospen-filter-panel {
        display: none;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid #eee !important;
        animation: prospen-filter-slide-down 0.22s ease !important;
    }

    .prospen-filter-panel.is-open {
        display: flex !important;
    }

    @keyframes prospen-filter-slide-down {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Make selects full-width inside the panel */
    .prospen-filter-panel select,
    .prospen-filter-panel button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }

    /* Clear button in panel */
    .prospen-filter-panel #clear-filters,
    .prospen-filter-panel button[id^="clear-filters"] {
        background: #f5f5f5 !important;
        color: #555 !important;
        border: 1px solid #ddd !important;
        font-weight: 600 !important;
        margin-top: 4px !important;
    }

    .prospen-filter-panel #clear-filters:hover,
    .prospen-filter-panel button[id^="clear-filters"]:hover {
        background: #ffe8d3 !important;
        color: #D58037 !important;
        border-color: #D58037 !important;
    }

    /* "Apply" row at bottom of panel */
    .prospen-filter-apply-row {
        display: flex !important;
        gap: 10px !important;
        margin-top: 6px !important;
    }

    .prospen-filter-apply-btn {
        flex: 1 !important;
        background: #D58037 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 30px !important;
        padding: 12px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        font-family: inherit !important;
        cursor: pointer !important;
    }

    .prospen-filter-apply-btn:hover {
        background: #b3692c !important;
    }
}


/* =============================================================================
   PROSPEN LOGO WATERMARK OVERLAY  (v7.1.4)
   Activated via Settings → Prospen Courses → Enable Logo Watermark.
   The .pcm-watermark-on class is added to <body> by courses-manager.js
   only when the option is enabled — so these rules are completely inert
   when the feature is off.
   mix-blend-mode: luminosity makes the logo appear full-colour on light
   images and automatically snap to white on dark images.
   ============================================================================= */

/* ── Shared container guard ─────────────────────────────────────────────── */
body.pcm-watermark-on .prospen-image-container {
    position: relative; /* already set for .prospen-image-container; safe to repeat */
}

/* ── The logo element itself ────────────────────────────────────────────── */
body.pcm-watermark-on .prospen-image-container .pcm-logo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 72px;          /* scales nicely on 160px-tall cards */
    height: auto;
    pointer-events: none; /* never blocks hover/click on the card */
    z-index: 10;
    opacity: 0.90;

    /*
     * Force the logo to render as solid white regardless of what's beneath it.
     * brightness(0) collapses all channels to black, invert(1) flips to white.
     * No mix-blend-mode needed — consistent white on every card image.
     */
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.45));

    /* Smooth sub-pixel rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ── Responsive sizing ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    body.pcm-watermark-on .prospen-image-container .pcm-logo {
        width: 56px;
        top: 6px;
        right: 6px;
    }
}

/* ── v7.2.7/7.2.8: Keep contact card buttons stacked + readable on mobile ─
   The generic mobile "Mobile Circular Buttons" rules above collapse every
   .prospen-view-button into a 50px icon-only orange circle for the course
   "View More" action. The Contact Us / WhatsApp buttons on the "Didn't find
   what you were looking for?" card share that same button class, so
   without this override they'd get swept into the same circular treatment,
   lose their text, and both render orange instead of their real colors.
   This scopes them back to full-width, stacked, readable buttons in their
   correct colors (same as desktop), and hides the descriptive paragraph on
   mobile only to keep the card compact. Regular course "View More" buttons
   on mobile are unaffected. */
@media (max-width: 768px) {
    .prospen-contact-card {
        flex-direction: column !important;
        align-items: stretch !important;
        position: relative !important;
        padding: 0 !important;
    }

    .prospen-contact-btn-contact,
    .prospen-contact-btn-whatsapp {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 30px !important;
        font-size: 15px !important;
        padding: 12px 24px !important;
        margin: 0 !important;
    }

    /* Restore the real button colors on mobile. Without this, a more
       specific/later "circular view button" rule above forces every
       .prospen-view-button (including these two) to solid orange. */
    .prospen-contact-btn-contact {
        background: #535153 !important;
        box-shadow: 0 3px 10px rgba(83, 81, 83, 0.25) !important;
    }

    .prospen-contact-btn-contact:hover {
        background: #3f3d3f !important;
    }

    .prospen-contact-btn-whatsapp {
        background: #25D366 !important;
        box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25) !important;
    }

    .prospen-contact-btn-whatsapp:hover {
        background: #1ebc59 !important;
    }

    /* Hide the descriptive paragraph on mobile only — title and buttons
       stay, desktop is unaffected. */
    .prospen-contact-text {
        display: none !important;
    }

    .prospen-contact-btn-contact:hover,
    .prospen-contact-btn-whatsapp:hover {
        transform: translateY(-2px) !important;
    }

    .prospen-contact-btn-contact span,
    .prospen-contact-btn-whatsapp span {
        display: inline !important;
    }

    .prospen-contact-btn-contact::after,
    .prospen-contact-btn-whatsapp::after {
        content: none !important;
    }
}

/* ── AJAX grid loading / error states (v7.3.9 courses-grid endpoint) ── */
.prospen-course-grid.prospen-loading {
    position: relative;
    min-height: 200px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.prospen-course-grid.prospen-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #E1E2E1;
    border-top: 4px solid #D58037;
    border-radius: 50%;
    animation: prospen-grid-spin 0.8s linear infinite;
}

@keyframes prospen-grid-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.prospen-course-grid .prospen-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #535153;
}