/* PlayNode - Kennisbankkaarten */
.pn-knowledge-grid .pxl-icon-box2 .pxl-item--front {
    background: rgba(10, 16, 38, 0.38);
    border: 1px solid rgba(120, 180, 255, 0.14);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.pn-knowledge-grid .pxl-icon-box2:hover .pxl-item--front {
    background: rgba(10, 16, 38, 0.55);
    border-color: rgba(120, 180, 255, 0.28);
}

/* PlayNode - FAQ artikelkaarten in glass-stijl */
.playnode-knowledgebase .playnode-kb-card {
    background: rgba(10, 16, 38, 0.38) !important;
    border: 1px solid rgba(120, 180, 255, 0.14) !important;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition:
        transform 0.2s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.playnode-knowledgebase .playnode-kb-card:hover {
    background: rgba(10, 16, 38, 0.55) !important;
    border-color: rgba(120, 180, 255, 0.28) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
}


/* PlayNode - individuele kennisbankartikelen */
@media screen and (min-width: 768px) {
    body.single-post #pxl-main {
        padding-top: 109px;
    }
}

body.single-post [data-elementor-type="wp-post"] .elementor-widget-text-editor {
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(90, 70, 255, 0.08),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(12, 17, 35, 0.88),
            rgba(8, 14, 28, 0.88)
        );
    border: 1px solid rgba(120, 180, 255, 0.14);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.20);
}

/* PlayNode - extra ruimte boven artikel op desktop */
@media screen and (min-width: 768px) {
    body.single-post #pxl-main {
        padding-top: 139px;
    }
}

/* PlayNode: cyan-blue styling for BR Button Primary */
.elementor-widget-pxl_button .pxl-button .btn.btn-primary {
    background-color: #00b8e8 !important;
    background-image: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    color: #ffffff !important;
    border: 1px solid #00b8e8;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.elementor-widget-pxl_button .pxl-button .btn.btn-primary:hover,
.elementor-widget-pxl_button .pxl-button .btn.btn-primary:focus-visible {
    background-color: #087cf5 !important;
    background-image: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.35);
}

/* PlayNode: force cyan gradient on homepage game buttons */
#pxl-pxl_button-4392a2c-5291 .btn.btn-primary,
#pxl-pxl_button-19570d6-3012 .btn.btn-primary {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    background-color: #00b8e8 !important;
    color: #ffffff !important;
    border-color: #00b8e8 !important;
}

#pxl-pxl_button-4392a2c-5291 .btn.btn-primary:hover,
#pxl-pxl_button-19570d6-3012 .btn.btn-primary:hover {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    background-color: #087cf5 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.35);
}

/* PlayNode: BR Accordion-iconen in dezelfde gradient als de knoppen */
.pxl-accordion1 .pxl-icon--angle {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    background-color: #00b8e8 !important;
    color: #ffffff !important;
    border-radius: 8px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Hover: helderder blauw-turquoise */
.pxl-accordion1 .pxl-icon--angle:hover,
.pxl-accordion1 .pxl-item--title:hover .pxl-icon--angle {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    background-color: #087cf5 !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(0, 184, 232, 0.3);
}


/* PlayNode: actieve gamefilters in dezelfde gradient als de knoppen */
.pxl-grid-filter1 .filter-item.active {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    background-color: #00b8e8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.30) !important;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* PlayNode: hover op de actieve filter */
.pxl-grid-filter1 .filter-item.active:hover {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    background-color: #087cf5 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.40) !important;
}


/* PlayNode: contactformulier verzendknop */
.pxl-contact-form .wpcf7-submit,
.pxl-contact-form1 .wpcf7-submit {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    background-color: #00b8e8 !important;
    color: #ffffff !important;
    border: none !important;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Hover- en focusstatus */
.pxl-contact-form .wpcf7-submit:hover,
.pxl-contact-form .wpcf7-submit:focus-visible,
.pxl-contact-form1 .wpcf7-submit:hover,
.pxl-contact-form1 .wpcf7-submit:focus-visible {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    background-color: #087cf5 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.35);
}


}


/* PlayNode: bestelknop op gamecards */
.pxl-item--inner .pxl-post--readmore.btn a {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 184, 232, 0.65) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.25) !important;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.pxl-item--inner .pxl-post--readmore.btn a span {
    color: #ffffff !important;
}

.pxl-item--inner .pxl-post--readmore.btn a:hover {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.4) !important;
}

.pxl-item--inner .pxl-post--readmore.btn a:hover span {
    color: #ffffff !important;
}


/* PlayNode: gamecard Order Now button - v2 */
.pxl-item--inner .pxl-post--readmore.btn {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pxl-item--inner .pxl-post--readmore.btn > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    background-color: #087cf5 !important;
    border: 1px solid #00b8e8 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(0, 184, 232, 0.25) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.pxl-item--inner .pxl-post--readmore.btn > a > span {
    position: relative !important;
    top: 0 !important;
    color: #ffffff !important;
}

.pxl-item--inner .pxl-post--readmore.btn > a > span::before {
    display: none !important;
}

.pxl-item--inner .pxl-post--readmore.btn > a:hover {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    background-color: #087cf5 !important;
    color: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 24px rgba(0, 184, 232, 0.45) !important;
}

.pxl-item--inner .pxl-post--readmore.btn > a:hover > span {
    color: #ffffff !important;
}


/* ==========================================
   PlayNode - Pricing Table Cyan/Blue Styling
   ========================================== */

/* Bestelknoppen */
.pxl-pricing1 .btn {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    background-color: #087cf5 !important;
    border: 1px solid #00b8e8 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(0, 184, 232, 0.20) !important;
    transition: all 0.25s ease !important;
}

.pxl-pricing1 .btn span,
.pxl-pricing1 .btn:hover span {
    color: #ffffff !important;
}

/* Hover-effect bestelknoppen */
.pxl-pricing1 .btn:hover {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    background-color: #087cf5 !important;
    border-color: #00d4ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(0, 184, 232, 0.45) !important;
    transform: translateY(-2px);
}

/* Label 'Meest gekozen' */
.pxl-pricing1 .most-popular {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    color: #ffffff !important;
}

/* Accentkleur van de pakketnaam */
.pxl-pricing1 .pxl-item--title {
    background-color: #087cf5 !important;
}

/* Geselecteerde en actieve pakketkaarten */
.pxl-pricing1:hover,
.pxl-pricing1.is-popular {
    border-color: #087cf5 !important;
}

/* Cyaan accent bij hover */
.pxl-pricing1:hover {
    box-shadow: 0 0 22px rgba(0, 184, 232, 0.12) !important;
}

/* Voorkom dat de standaard paarse titelaccentkleur terugkomt */
.pxl-pricing1 .pxl-item--title::before {
    background: #393a3d !important;
}


/* PLAYNODE PRICING - BLUE/CYAN OVERRIDES */

.playnode-order-button {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    box-shadow: 0 6px 18px rgba(0, 184, 232, 0.20) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.playnode-order-button:hover {
    background: linear-gradient(135deg, #087cf5 0%, #00d4ff 100%) !important;
    color: #fff !important;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 9px 24px rgba(0, 184, 232, 0.35) !important;
}

.playnode-price-card.playnode-popular {
    border-color: rgba(0, 184, 232, 0.85) !important;
    box-shadow:
        0 14px 40px rgba(0, 124, 245, 0.16),
        0 0 30px rgba(0, 212, 255, 0.10) !important;
}

.playnode-price-card::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 212, 255, 0.85),
        transparent
    ) !important;
}

.playnode-price-card:hover {
    border-color: rgba(0, 184, 232, 0.55) !important;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        0 0 25px rgba(0, 184, 232, 0.12) !important;
}

.playnode-popular-label {
    background: linear-gradient(135deg, #00b8e8 0%, #087cf5 100%) !important;
    color: #fff !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
}