/* CS Custom Templates Filtering - Styles with Category Colors */

/* ==================== GOOGLE FONTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ==================== CUSTOM FONTS ==================== */
/* Masifa font is loaded from the main WordPress theme */

/* ==================== LAYOUT ==================== */
.cctf-app {
    display: flex;
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Masifa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    column-gap: 6%;
    max-width: 1280px;
    margin: 80px auto;
    overflow-x: hidden;

    /* Font rendering optimization for sharp text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-text-size-adjust: 100%;
}

/* ==================== SIDEBAR ==================== */
.cctf-sidebar {
    width: 250px;
    padding: 16px 0;
    flex-shrink: 0;
}

.cctf-sidebar h2.cctf-sidebar__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: #703DC1;
    margin: 0 0 24px 0;
    padding: 0;
    border: none;
}

.cctf-sidebar h2.cctf-sidebar__title::after {
    display: none;
}

.cctf-sidebar__divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 16px;
}

/* ==================== CATEGORY LIST ==================== */
.cctf-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    
}

.cctf-category-item {
    padding: 6px 0px;
    margin: 0;
    border-bottom: 1px solid #EAECF0;
}

.cctf-category-item:last-child {
    border-bottom: none;
}

.cctf-category-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 0px;
    height: 30px;
    color: var(--category-color, #333);
    text-decoration: none;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.15s;
    position: relative;
    
}

.cctf-category-item a:hover {
    background: #f3f4f6;
}

/* Category Color Rectangle/Bar (instead of dot) */
.cctf-category-color-dot {
    width: 6px;
    height: 30px;
    flex-shrink: 0;
    transition: all 0.2s;
}

/* Active State with Category Color */
.cctf-category-item--active a {
    background: var(--category-color, #6366f1);
    color: #fff;
}

.cctf-category-item--active a:hover {
    background: var(--category-color, #4f46e5);
    opacity: 0.9;
}

/* ==================== FILTER CHECKBOXES ==================== */
.cctf-filter-section {
    margin-top:14px;
    margin-bottom:24px;
}

.cctf-filter-checkboxes {
    display: flex;
    width: 100%;
    
    
}
.official-checkbox{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    gap: 8px;
    height: 44px;  
    background: rgba(112, 61, 193, 0.1);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    width: 100%;
}
.community-checkbox{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    gap: 8px;
    height: 44px;  
    background: rgba(112, 61, 193, 0.05);
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    width: 100%;
}

.cctf-filter-checkbox {
}

.cctf-filter-checkbox:hover {
    background: #ede9fe;
}

.cctf-filter-checkbox input[type="checkbox"] {
    display: none;
}

/* UPDATED: Checkmark Design */
.cctf-filter-checkbox__box {
    width: 16px;
    height: 16px;
    border: 1.2px solid rgba(54, 4, 132, 1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    background: transparent;
}

.cctf-filter-checkbox__box::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid rgba(54, 4, 132, 1);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.15s;
    margin-top: -2px;
}

.cctf-filter-checkbox input[type="checkbox"]:checked + .cctf-filter-checkbox__box {
    background: transparent;
    border-color: #7c3aed;
}

.cctf-filter-checkbox input[type="checkbox"]:checked + .cctf-filter-checkbox__box::after {
    opacity: 1;
}

.cctf-filter-checkbox__label {  
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    color: #360484;
    text-transform: capitalize;
}

/* ==================== SEARCH ==================== */
.cctf-search-section {
    padding-top: 24px;
    border-top: 1px solid #EAECF0;
}

.cctf-search-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #D0D5DD;
    border-radius: 100px;
    padding-left:16px;
    margin-bottom: 8px;
    background: #fff;
    height: 48px;
}

.cctf-search-input-wrap svg {
    width: 16px;
    height: 16px;
    color: rgba(63,68,67,0.5);
    flex-shrink: 0;
}

.cctf-search-input-wrap input {
    border: none;
    outline: none;
    padding: 0px;
    font-size: 14px;
    background: #fff;
    font-weight: 500;
    width: 100%;
    color: rgba(63,68,67,0.5);
    padding-left: 8px;
}
.cctf-search-input-wrap input::placeholder{
    color: rgba(63,68,67,0.5);
}

.cctf-search-btn {
    width: 100%;
    max-width: 90px;
    background: #703DC1;
    color: #fff;
    height: 48px;
    border: none;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.cctf-search-btn:hover {
    background: #4f46e5;
}

/* ==================== MAIN CONTENT ==================== */
.cctf-main {
    flex: 1;
    padding: 20px 0px;
    min-width: 0;
}
.cctf-content-top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 32px;
    border-bottom: 1px solid #EAECF0;
    gap: 20px;
    flex-wrap: wrap;
}
.cctf-content-message-badge{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 14px 20px;
    gap: 6px;
    min-height: 48px;
    background: #F04E98;
    border-radius: 100px;
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: #FFFFFF;
    flex: 1;
    min-width: 0;
}
.cctf-content-top .cctf-search-section{
    padding-top: 0px;
    border: 0px;
    width: 100%;
    max-width: 293px;
    flex-shrink: 0;
}
.cctf-content-top .cctf-search-input-wrap{
    margin-bottom: 0;
}

/* Wrap search to new line at 1024px */
@media (max-width: 1024px) {
    .cctf-content-top .cctf-search-section{
        max-width: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 768px) {
   .cctf-content-top .cctf-search-section{
       display: none;
   }
   .cctf-content-top{
       border-bottom: 0px;
   }
   .cctf-content-message-badge{
       height: auto;
   }
}
.cctf-header-search {
    display: inline-flex;
    margin-bottom: 24px;
}

.cctf-header-search input {
    width: 380px;
    padding: 10px 14px;
    border: none;
    border-radius: 6px 0 0 6px;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
}

.cctf-header-search input::placeholder {
    color: #9ca3af;
}

.cctf-header-search input:focus {
    outline: none;
}

.cctf-header-search button {
    padding: 10px 18px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ==================== CATEGORY SECTION ==================== */
.cctf-category-section {
    padding-bottom: 40px;
    border-bottom: 1px solid #EAECF0;
    margin-bottom: 20px;
}

.cctf-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
    margin-top: 40px;
    padding-top: 20px;
    border-radius: 12px;
}

.cctf-see-more-link {
    margin-left: auto;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--category-color, #6431B5);
    text-decoration: underline;
    text-decoration-color: var(--category-color, #6431B5);
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

.cctf-see-more-link:hover {
    opacity: 0.8;
}

.cctf-category-icon {
    display: flex;
    align-items: center;
}

.cctf-category-header h3.cctf-category-name {
    font-size: 32px;
    font-weight: 700;
    color: var(--category-color, #7c3aed);
    margin: 0;
}

/* ==================== CARDS GRID ==================== */
.cctf-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .cctf-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* When sidebar is visible but space is tight, go to 1 column */
@media (max-width: 860px) {
    .cctf-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* When sidebar hides at 768px, we have more space - go back to 2 columns */
@media (max-width: 768px) {
    .cctf-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small screens - 1 column */
@media (max-width: 700px) {
    .cctf-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== CARD ==================== */
.cctf-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    height: 100%;
    transition: opacity 0.2s;
}

.cctf-card-link:hover {
    opacity: 1;
}

.cctf-card {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 30px;
    position: relative;
    border: 2px solid var(--category-color, #7c3aed);
}

.cctf-card-link:hover .cctf-card {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.cctf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.cctf-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cctf-card__title {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.cctf-card__desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
}

.cctf-card__tags {
    display: flex;
    gap: 8px;
}

/* Tags */
.cctf-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #360484;
}

/* Tag text wrapper */
.cctf-tag-text {
    display: inline-block;
    line-height: 1;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    margin-top: 2px;
}

/* SVG icons in tags */
.cctf-tag-icon {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* PNG region icons (like global) */
.cctf-region-icon {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* Purple Card (Official) - solid category color background */
.cctf-card--purple {
    background: var(--category-color, #6366f1);
}

.cctf-card--purple .cctf-card__body {
    color: #fff;
}

.cctf-card--purple .cctf-card__tags {
    background: transparent;
}

.cctf-card--purple .cctf-tag {
    background: rgba(255, 255, 255, 0.6);
}

/* Bright background colors - use dark text for readability */
.cctf-card--bright .cctf-card__body {
    color: #1a1a1a !important;
}

.cctf-card--bright .cctf-card__title {
    color: #1a1a1a !important;
}

.cctf-card--bright .cctf-card__desc {
    color: rgba(0, 0, 0, 0.75) !important;
}

.cctf-card--bright .cctf-tag {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #1a1a1a !important;
}

.cctf-card--bright .cctf-tag-text {
    color: #1a1a1a !important;
}

/* White Card (Community) - 0.15 opacity of category color */
.cctf-card--white {
    background: var(--card-bg-color, rgba(99, 102, 241, 0.15));
    border: none;
}

.cctf-card--white .cctf-card__body {
    color: var(--category-color, #6366f1);
}

.cctf-card--white .cctf-card__title {
    color: var(--category-color, #6366f1);
}

.cctf-card--white .cctf-card__desc {
    color: #475467;
}

.cctf-card--white .cctf-tag {
    background: rgba(0, 0, 0, 0.08);
    color: #475467;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.cctf-card--white .cctf-tag--type {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

.cctf-card--white .cctf-tag-text {
    color: #475467;
}

/* ==================== LOADING STATE ==================== */
.cctf-loading {
    pointer-events: none;
    position: relative;
    min-height: 300px;
}

.cctf-loading::after {
    content: '';
    position: absolute;
    top: 150px;
    left: 50%;
    width: 70px;
    height: 70px;
    margin-left: -35px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-top-color: #F04E98;
    border-right-color: #6431B5;
    border-bottom-color: #6AD1E3;
    border-left-color: transparent;
    animation: cctf-spin 1s linear infinite;
    z-index: 100;
}

.cctf-loading::before {
    content: '';
    position: absolute;
    top: 150px;
    left: 50%;
    width: 54px;
    height: 54px;
    margin-left: -27px;
    margin-top: 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='29' viewBox='0 0 28 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6185 13.1655H22.791V1.19553C22.7911 1.0385 22.7603 0.883014 22.7002 0.73792C22.6402 0.592826 22.5521 0.461002 22.4411 0.349964C22.33 0.238926 22.1982 0.150866 22.0531 0.0908116C21.908 0.0307566 21.7524 -8.29833e-05 21.5953 1.68122e-07H5.82752C5.67054 -8.29331e-05 5.51512 0.0306418 5.37006 0.0906571C5.22501 0.150672 5.09314 0.238684 4.98211 0.349655C4.87108 0.460626 4.78305 0.592436 4.72296 0.737457C4.66286 0.882478 4.63184 1.03793 4.63184 1.19491V8.33055H12.1287C12.5242 8.33055 12.9033 8.48769 13.1829 8.76731C13.4626 9.04693 13.6197 9.42609 13.6197 9.82153L13.6185 13.1655Z' fill='%23F04E98'/%3E%3Cpath d='M22.7878 13.1661V22.9813C22.7876 23.2594 22.6771 23.5261 22.4805 23.7228C22.2838 23.9194 22.0169 24.0299 21.7388 24.0301H5.6788C5.40085 24.0299 5.13433 23.9195 4.93779 23.7229C4.74125 23.5264 4.63062 23.2599 4.63045 22.9819V8.33179H1.49097C1.09564 8.33179 0.71667 8.48875 0.437069 8.76824C0.157467 9.04772 0.000167861 9.42681 1.33898e-07 9.82214V27.1697C-8.29567e-05 27.3655 0.0385061 27.5595 0.11336 27.7404C0.188214 27.9213 0.297747 28.0858 0.436142 28.2243C0.574537 28.3628 0.738985 28.4727 0.919852 28.5477C1.10072 28.6227 1.29455 28.6613 1.49036 28.6613H25.9254C26.1213 28.6613 26.3153 28.6228 26.4962 28.5478C26.6772 28.4729 26.8415 28.3629 26.9799 28.2244C27.1184 28.0859 27.2281 27.9215 27.303 27.7406C27.3779 27.5596 27.4165 27.3656 27.4164 27.1697V14.6565C27.4164 14.261 27.2593 13.8817 26.9796 13.6021C26.7 13.3225 26.3209 13.1655 25.9254 13.1655L22.7878 13.1661Z' fill='%236AD1E3'/%3E%3Cpath d='M22.7871 22.9812V13.1654H14.6644C14.3863 13.1654 14.1195 13.0549 13.9228 12.8582C13.7261 12.6615 13.6158 12.3947 13.6158 12.1166V9.8228C13.616 9.62698 13.5776 9.43296 13.5027 9.25199C13.4279 9.07102 13.3181 8.90665 13.1796 8.76812C13.0412 8.62959 12.8768 8.5197 12.6959 8.44472C12.515 8.36975 12.3213 8.33105 12.1254 8.33105H4.62793V22.9812C4.62793 23.2592 4.7384 23.526 4.93496 23.7227C5.13152 23.9193 5.39791 24.03 5.67597 24.0302H21.7363C22.0144 24.03 22.281 23.9193 22.4776 23.7227C22.6743 23.526 22.7851 23.2593 22.7853 22.9812H22.7871Z' fill='%236431B5'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 70px;
    z-index: 101;
}

@keyframes cctf-spin {
    to { transform: rotate(360deg); }
}

/* ==================== NO RESULTS ==================== */
.cctf-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #475467;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

.cctf-no-results p {
    margin: 0 0 10px 0;
}

.cctf-no-results p:last-child {
    margin-bottom: 0;
}

.cctf-view-all-link {
    color: #703DC1;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}

.cctf-view-all-link:hover {
    color: #5037DB;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .cctf-app {
        flex-direction: column;
    }

    .cctf-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .cctf-header-search input {
        width: 100%;
    }
}

/* ==================== COUNTRY DROPDOWN ==================== */
.cctf-country-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 40px;
}

.cctf-country-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #f3f0ff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    min-width: 200px;
    width: 100%;
    transition: background 0.15s;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cctf-country-dropdown__toggle:hover {
    background: #ede9fe;
}

.cctf-country-dropdown__icon {
    width: 20px;
    height: 20px;
    color: #5b21b6;
    flex-shrink: 0;
}

.cctf-country-dropdown__text {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #5b21b6;
}

.cctf-country-dropdown__arrow {
    width: 18px;
    height: 18px;
    color: #5b21b6;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cctf-country-dropdown.open .cctf-country-dropdown__arrow {
    transform: rotate(180deg);
}

.cctf-country-dropdown__menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: none;
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
}

.cctf-country-dropdown.open .cctf-country-dropdown__menu {
    display: block;
}

.cctf-country-dropdown__item {
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.cctf-country-dropdown__item:hover {
    background: #f3f0ff;
}

.cctf-country-dropdown__item--active {
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 600;
}

/* ==================== MOBILE CATEGORY DROPDOWN ==================== */
.cctf-category-dropdown {
    display: none; /* Hidden on desktop */
    position: relative;
    width: 100%;
    margin-bottom: 16px;
}

.cctf-category-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #f3f0ff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cctf-category-dropdown__toggle:hover {
    background: #ede9fe;
}

.cctf-category-dropdown__icon {
    width: 20px;
    height: 20px;
    color: #5b21b6;
    flex-shrink: 0;
}

.cctf-category-dropdown__text {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #5b21b6;
}

.cctf-category-dropdown__arrow {
    width: 18px;
    height: 18px;
    color: #5b21b6;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cctf-category-dropdown.open .cctf-category-dropdown__arrow {
    transform: rotate(180deg);
}

.cctf-category-dropdown__menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: none;
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.cctf-category-dropdown.open .cctf-category-dropdown__menu {
    display: block;
}

.cctf-category-dropdown__item {
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.cctf-category-dropdown__item:hover {
    background: #f3f0ff;
}

.cctf-category-dropdown__item--active {
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 600;
}

/* Mobile: Show category dropdown, hide sidebar category list */
@media (max-width: 768px) {
    .cctf-category-dropdown {
        display: block;
    }

    .cctf-sidebar__title,
    .cctf-category-list {
        display: none;
    }

    .cctf-sidebar {
        padding: 16px;
    }

    .cctf-country-dropdown {
        margin-top: 0;
    }
}