/* 
 * The Background System - Ambient Lavender Gradient Overlays + Bokeh Orbs
 */

/* Applying to Section wrappers (.pp-section-bg should be added to Elementor Section Class) */
.pp-section-bg {
    position: relative;
    overflow: hidden;
    /* Layer 2 - Frosted/Alpha Gradient Overlay applied on top of the section */
    /* If the section has no primary background, we set the frosted overlay */
    background: linear-gradient(180deg, hsla(270, 60%, 95%, 0.85) 0%, hsla(280, 65%, 90%, 0.90) 100%) !important;
    z-index: 1;
    /* base stacking context */
}

/* Layer 3 - Bokeh Orbs (using pseudo-elements as the primary pair) */
.pp-section-bg::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 100, 240, 0.18) 0%, transparent 70%);
    filter: blur(40px);
    -webkit-filter: blur(40px);
    top: -80px;
    left: -100px;
    pointer-events: none;
    z-index: -1;
    /* place behind contented inside .pp-section-bg */
}

.pp-section-bg::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 140, 255, 0.15) 0%, transparent 70%);
    filter: blur(50px);
    -webkit-filter: blur(50px);
    bottom: -60px;
    right: -80px;
    pointer-events: none;
    z-index: -1;
}

/* Additional explicit .pp-orb elements if injected via JS or Elementor HTML widget */
.pp-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.pp-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(140, 80, 230, 0.20) 0%, transparent 70%);
    filter: blur(60px);
    -webkit-filter: blur(60px);
    top: 20%;
    right: 10%;
}

.pp-orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(200, 150, 255, 0.25) 0%, transparent 70%);
    filter: blur(45px);
    -webkit-filter: blur(45px);
    bottom: 10%;
    left: 20%;
}

.pp-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(170, 110, 240, 0.15) 0%, transparent 70%);
    filter: blur(55px);
    -webkit-filter: blur(55px);
    top: 60%;
    right: -50px;
}

/* Announcement Bar Styles (Can be included in global style.css, but relevant to ambient feel) */
.pp-announcement-bar {
    width: 100%;
    background: #7B2FE0;
    color: #ffffff;
    padding: 10px 40px;
    text-align: center;
    position: relative;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    z-index: 9999;
    box-sizing: border-box;
}

.pp-announcement-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.pp-announcement-close:hover {
    opacity: 0.8;
}