/* Premium Dashboard Promo (2025 Redesign) */

.pp-promo-wavy {
    background: linear-gradient(135deg, #e0e7ff 0%, #f0f0ff 60%, #f5f3ff 100%);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    border: 1.5px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.1);
    z-index: 1;
    min-height: 350px;
}

.pp-promo-wavy::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23c7d2fe' fill-opacity='0.5' d='M0,224L60,202.7C120,181,240,139,360,117.3C480,96,600,96,720,128C840,160,960,224,1080,234.7C1200,245,1320,203,1380,181.3L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.pp-promo-bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    filter: blur(12px);
}

.bubble-1 { width: 140px; height: 140px; top: -30px; left: -20px; background: #a5b4fc; opacity: 0.35; }
.bubble-2 { width: 110px; height: 110px; bottom: 15%; right: 8%; background: #c4b5fd; opacity: 0.3; }
.bubble-3 { width: 190px; height: 190px; bottom: -70px; left: 10%; background: #e0e7ff; opacity: 0.6; }
.bubble-4 { width: 80px; height: 80px; top: 12%; right: 15%; background: #818cf8; opacity: 0.3; }

.pp-promo-wavy .row {
    position: relative;
    z-index: 2;
}

.pp-promo-wavy img.promo-main-img {
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.2);
    margin: 24px;
    width: calc(100% - 48px);
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .pp-promo-wavy { border-radius: 18px; }
}

@media (max-width: 767.98px) {
    .pp-promo-wavy { min-height: 260px; border-radius: 16px; }
    .bubble-1, .bubble-3 { display: none; }
}

@media (max-width: 575.98px) {
    .pp-promo-wavy { min-height: auto; border-radius: 14px; }
    .pp-promo-wavy img.promo-main-img { margin: 10px; width: calc(100% - 20px); border-radius: 10px; }
    .bubble-2, .bubble-4 { display: none; }
}
