/* Admin Styles */
.ppc-card { background: #fff; padding: 20px; margin-bottom: 20px; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.ppc-col input { width: 100%; }

/* YOUTUBE LINK (TOP) */
.ppc-yt-container { text-align: center; margin-bottom: 25px; }
.ppc-yt-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: #fff; padding: 10px 20px; border-radius: 50px; box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2); transition: transform 0.3s; }
.ppc-yt-icon { width: 40px; height: 40px; fill: #FF0000; animation: ytPulse 2s infinite; }
.ppc-yt-text { color: #333; font-weight: 700; font-size: 16px; text-transform: uppercase; }
@keyframes ytPulse { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,0,0,0.7)); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255,0,0,0.5)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,0,0,0.7)); } }
.ppc-yt-link:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3); }

/* STATS BOXES */
.ppc-stats-container { display: flex; gap: 15px; margin-bottom: 25px; }
.ppc-stat-box { flex: 1; padding: 20px; border-radius: 12px; text-align: center; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: 2px solid #fff; }
.ppc-target-box { background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%); }
.ppc-collection-box { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); }
.ppc-stat-label { font-size: 16px; font-weight: 500; display: block; margin-bottom: 5px; opacity: 0.95; text-transform: uppercase; }
.ppc-stat-amount { font-size: 28px; font-weight: 800; display: block; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* Frontend Grid */
.ppc-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; }

/* CARD DESIGN */
.ppc-frontend-card { background: #fff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 15px; display: flex; align-items: center; gap: 15px; border: 1px solid #e0e0e0; transition: 0.3s; position: relative; }
.ppc-frontend-card.ppc-is-paid { border: 2px solid #27ae60; background: #f0fff4; }
.ppc-f-img img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #f1c40f; flex-shrink: 0; display: block; }
.ppc-f-info { flex: 1; min-width: 0; }
.ppc-f-info h3 { margin: 0 0 5px 0; font-size: 18px; color: #333; font-weight: 700; line-height: 1.2; }
.ppc-amount-wrapper { display: flex; flex-direction: column; gap: 2px; }
.ppc-due-amount { display: inline-block; color: #c0392b; font-weight: bold; font-size: 15px; }
.ppc-full-amount { color: #27ae60; font-weight: bold; font-size: 15px; }
.ppc-paid-badge { font-size: 11px; color: #27ae60; background: #e8f5e9; padding: 2px 6px; border-radius: 4px; display: inline-block; width: fit-content; border: 1px solid #c8e6c9; font-weight: 600; }
.ppc-f-action { flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.ppc-pay-btn { background: #673ab7; color: #fff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; }
.ppc-payment-confirmed { background: #27ae60; color: white; padding: 8px 12px; border-radius: 5px; font-size: 13px; font-weight: bold; text-align: center; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3); white-space: nowrap; }

/* NEW: FEATURED VIDEO STYLES */
.ppc-video-wrapper {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
}
.ppc-video-title {
    text-align: center;
    color: #cc0000;
    margin-bottom: 15px;
    font-size: 20px;
    text-transform: uppercase;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 10px;
}
.ppc-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.ppc-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* MODAL */
.ppc-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.ppc-modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 300px; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); position: relative; }
.ppc-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 15px; top: 5px; }
#ppc-qr-image-box { min-height: 200px; display: flex; align-items: center; justify-content: center; }
#ppc-qr-image-box img { margin-top: 10px; border: 1px solid #ddd; padding: 5px; border-radius: 5px; width: 200px; height: 200px; object-fit: contain; background: white; }
.ppc-loader { border: 4px solid #f3f3f3; border-top: 4px solid #673ab7; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media screen and (max-width: 480px) {
    .ppc-stats-container { flex-direction: column; gap: 10px; }
    .ppc-frontend-card { flex-direction: column; text-align: center; padding: 20px; }
    .ppc-f-img img { margin: 0 auto 10px auto; width: 70px; height: 70px; }
    .ppc-f-info { width: 100%; margin-bottom: 15px; }
    .ppc-amount-wrapper { align-items: center; }
    .ppc-f-action { width: 100%; align-items: center; }
    .ppc-pay-btn, .ppc-payment-confirmed { width: 100%; padding: 12px; font-size: 16px; }
    .ppc-modal-content { margin: 30% auto; }
}