.mcpp-wrap{--gap:24px;--radius:18px;--border:#e5e7eb;--check:#10b981;--muted:#6b7280}
.mcpp-grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:900px){.mcpp-grid{grid-template-columns:1fr 1.15fr 1fr}}
.mcpp-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.mcpp-card.featured{background:linear-gradient(135deg,#0ea5a2,#4ade80);color:#fff;border:0;box-shadow:0 10px 24px rgba(16,185,129,.25)}
.mcpp-title{font-weight:600;font-size:18px;margin:4px 0 18px}
.mcpp-price{font-weight:800;font-size:48px;letter-spacing:-.5px}
.mcpp-interval{color:var(--muted);font-weight:500;margin-left:6px}
.mcpp-card.featured .mcpp-interval{color:#fff}
.mcpp-btn{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border-radius:28px;border:0;background:linear-gradient(90deg,#10b981,#5eead4);color:#fff;font-weight:700;margin:18px 0;text-decoration:none}
.mcpp-card.featured .mcpp-btn{background:#fff;color:#111827}
.mcpp-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--border)}
.mcpp-list li{display:flex;gap:10px;align-items:flex-start;padding:14px 0}
.mcpp-check{margin-top:2px;color:var(--check);font-weight:900}

.child-pages-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card wrapper */
.child-card {
    display: flex;
    background: #0f2a23;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    transition: transform 0.2s ease;
}

/* Image */
.child-card-image img {
    width: 220px;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content */
.child-card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Header: title left, date right */
.child-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.child-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    font-weight: 700;
    background-image: linear-gradient(267.43deg, var(--e-global-color-accent) 4.95%, var(--e-global-color-accentsecondary) 97.92%);
    background-clip: text;
   -webkit-text-fill-color: transparent;
}

.child-card-date {
    font-size: 14px;
    color: #ddd;
}

/* Excerpt */
.child-card-excerpt {
    font-size: 15px;
    margin: 0 0 15px 0;
    line-height: 1.5;
}

/* Footer: share + button aligned right */
.child-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* Share icon */
.child-card-share {
    font-size: 18px;
    color: #27d07d;
    cursor: pointer;
}

/* Button */
.child-card-btn {
    background: linear-gradient(90deg, #27d07d, #5dd693);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.child-card-btn:hover {
    opacity: 0.9;
}

/* Pagination */
.child-pagination {
    margin-top: 25px;
    text-align: center;
}
.child-pagination a,
.child-pagination span {
    display: inline-block;
    margin: 0 5px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #1a2a23;
    color: #fff;
    text-decoration: none;
}
.child-pagination .current {
    background: #1ab271;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .child-card {
        flex-direction: column;
    }

    .child-card-image img {
        width: 100%;
        height: auto;
    }

    .child-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .child-card-footer {
        justify-content: center;
    }
}
.child-filter-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 25px !important;
    gap: 15px !important;
}

/* Left buttons */
.filter-left {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.filter-btn {
    padding: 10px 20px !important;
    border-radius: 12px !important;
    border: none !important;
    background: #f2f2f2 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.filter-btn.active {
    background: linear-gradient(90deg, #4CAF50, #8BC34A) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Right dropdown */
.filter-right select.filter-sort {
    padding: 10px 18px !important;
    border-radius: 12px !important;
    border: 1px solid #ccc !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #444 !important;
    cursor: pointer !important;
    background: #fff !important;
    transition: border 0.3s ease !important;
}

.filter-right select.filter-sort:focus {
    border-color: #4CAF50 !important;
    outline: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .child-filter-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .filter-right {
        width: 100% !important;
        margin-top: 10px !important;
    }
    .filter-right select.filter-sort {
        width: 100% !important;
    }
}


.child-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* shows max 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.child-search-form button {
   background-image: linear-gradient(267.43deg, var(--e-global-color-accent) 4.95%, var(--e-global-color-accentsecondary) 97.92%);
    color: #ffffff; /* text color */
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px; /* optional: rounded corners */
    transition: background-color 0.3s ease;
}

.child-search-form button:hover {
    background-color: #e65c00; /* slightly darker on hover */
}