/*
Theme Name: Wux Theme
Author: Wux
Author URI: https://wux.nl/
Description: Wux is het custom wordpress thema van Wux - Digital Agency
Version: 2.2
Requires PHP: 8.3.0
Text Domain: wuxnl-theme
*/

:root {
    /* Font variables */
    --fs            : 1.4rem;
    --lh            : 1.6;
        
    /* Color variables */
    --clr-primary           : #db4835;
    --clr-primary-rgb       : 219, 72, 53;
    --clr-primary-dark      : #c80e0a;
    --clr-primary-dark-rgb  : 200, 14, 10;
    --clr-primary-light     : #d97a6f;
    --clr-primary-light-rgb : 217, 122, 111;

    --clr-secondary     : #40b45f;
    --clr-secondary-rgb : 64, 180, 95;

    --clr-heading       : #000000;
    --clr-text          : #000000;
    --clr-text-light    : rgb(0, 0, 0, .65);
    
    --clr-dark          : #3a0c0e;
    --clr-dark-120      : #2a0002;
    --clr-dark-80       : #6e282b;
    --clr-dark-60       : #a04035;
    --clr-dark-rgb      : 58, 12, 14;
    --clr-dark-80-rgb   : 110, 40, 43;

    --clr-light         : rgba(244, 244, 244, 1);
    --clr-light-rgb     : 244, 244, 244;

    --clr-border        : rgba(0, 0, 0, .2); 

    --clr-danger        : #e2401c;
    --clr-info          : #3d9cd2;
    --clr-success       : #48eb74;

    /* Font variables */
    --font-primary      : 'Aspekta', sans-serif;
    --font-fa           : 'Font Awesome 6 Sharp';

    /* Container variables */
    --container-width       : 100%;
    --container-width--sm   : 540px;
    --container-width--md   : 720px;
    --container-width--lg   : 960px;
    --container-width--xl   : 1140px;
    --container-width--xxl  : 1320px;
    --container-width--xxxl : 1400px;


    /* Gradients */
    --gradient-header-home-1: linear-gradient(to top right, rgba(110, 29, 32, 1), rgba(186, 64, 51, 1), rgba(203, 71, 55, 0.65), rgba(214, 76, 58, 0.1), rgba(213, 57, 36, 0) 70%);
    --gradient-header-home-2: linear-gradient(to bottom, rgba(160, 64, 53, 1), rgba(58, 12, 14, 0.95) 0.01%, rgba(58, 12, 14, 0) 20%);
    --gradient-mega-menu: linear-gradient(120deg, rgba(160, 64, 53, 1) 25%, var(--clr-dark), var(--clr-dark));

    --gradient-dark: linear-gradient(to top right, rgba(160, 64, 53, 1), rgba(58, 12, 14, 1) 40%, rgba(58, 12, 14, 1));
    --gradient-dark-2: linear-gradient(120deg, rgba(91, 25, 17, 1), rgba(160, 64, 53, 1), rgba(124, 46, 39, 1), rgba(58, 12, 14, 1) 65%, rgba(58, 12, 14, 1));
    --gradient-red: linear-gradient(45deg, rgba(110, 29, 32, 1) 5%, rgba(186, 64, 51, 1), rgba(203, 71, 55, 1), rgba(214, 76, 58, 1), rgba(213, 57, 36, 1), rgba(217, 122, 111, 1));

    /* Blur */
    --blur: blur(8px);

    /* Transition variables */
    --ts-duration            : var(--ts-25);
    --ts-function            : cubic-bezier(.58,.22,.2,.96);

}
@media (min-width: 768px) {
    :root {
        --fs: 1.6rem;
    }
}
@media (min-width: 1200px) {
    :root {
        --fs: 1.8rem;
    }
}

/*** ---------- Whitespace ---------- ***/
[class*="wpb-wst"] { --pt: 0; padding-top: var(--pt); }
[class*="wpb-wsb"] { --pb: 0; padding-bottom: var(--pb); }

.wpb-wst--none { --pt: 0; }
.wpb-wst--small { --pt: 2.4rem; }
.wpb-wst--medium { --pt: 3.8rem; }
.wpb-wst--large { --pt: 5.4rem; }

.wpb-wsb--none { --pb: 0; }
.wpb-wsb--small { --pb: 2.4rem; }
.wpb-wsb--medium { --pb: 3.8rem; }
.wpb-wsb--large { --pb: 5.4rem; }

@media (min-width: 992px) {
    .wpb-wst--small { --pt: 4rem; }
    .wpb-wst--medium { --pt: 6.4rem; }
    .wpb-wst--large { --pt: 10rem; }
    
    .wpb-wsb--small { --pb: 4rem; }
    .wpb-wsb--medium { --pb: 6.4rem; }
    .wpb-wsb--large { --pb: 10rem; }
}

/*** ---------- Background colors / gradients ---------- ***/
[class*="wpb-bg-clr--"] { --block-bg: transparent; background-color: var(--block-bg); }
.wpb-bg-clr--primary    { --block-bg: var(--clr-primary); }
.wpb-bg-clr--light      { --block-bg: #f2f2f2; }
.wpb-bg-clr--dark       { --block-bg: var(--clr-dark); }

[class*="wpb-bg-clr--gradient"] { background-color: transparent; background: var(--block-bg); }
.wpb-bg-clr--gradient-dark      { --block-bg: var(--gradient-dark); }
.wpb-bg-clr--gradient-red       { --block-bg: var(--gradient-red); }

/*** ---------- Background overlap ---------- ***/
.wpb-bg-overlap{ --overlap: -10rem; background-color: transparent; background: transparent; position: relative;
    &::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--block-bg); pointer-events: none; }
    &.wpb-bg-overlap--top::before{ top: var(--overlap); }
    &.wpb-bg-overlap--bottom::before{ bottom: var(--overlap); }
}

@media(min-width: 768px){
    .wpb-bg-overlap{ --overlap: -15rem; }
}
@media(min-width: 1200px){
    .wpb-bg-overlap{ --overlap: -20rem; }
}

/*** ---------- Header ---------- ***/
.wpb-header{
    .wpb-text p{ opacity: 1; }
    .wpb-text p:has(+ :is(h1, h2, h3)):has(em){ --clr: #FFFF; --bg-clr: var(--clr-primary); }
    .wpb-breadcrumbs{ background-color: var(--clr-primary); width: fit-content; min-height: 2.8rem; padding: 0 1.2rem; border-radius: 3.2rem; display: flex; align-items: center; }
    .wpb-header__date{ display: flex; align-items: center; gap: .8rem; opacity: .65; font-size: clamp(1.4rem, 1.5vw, 1.6rem); font-weight: 400; line-height: 1.2; }
}
.wpb-header--home{ --min-height: min(80dvh, clamp(54rem, 60vw, 87rem)); min-height: var(--min-height); display: flex; align-items: end;
    .wpb-text{ max-width: 44rem; }
    .wpb-text p{ font-size: clamp(1.5rem, 1.6vw, 1.8rem); font-weight: 400; line-height: 1.6; }

    &.has-background-image{ --bg: var(--gradient-header-home-1); --bg-2: var(--gradient-header-home-2);
        &::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--bg-2); z-index: 1; }
        &::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--bg); }
    }
}
.wpb-header--archive{ 
    .wpb-text{ max-width: clamp(64rem, 70vw, 84rem); text-align: center; margin-left: auto; margin-right: auto;
        p:has(+ :is(h1, h2, h3)):has(em){ margin: auto; }
    }
}
.wpb-header--subpage{ --gap: 2.4rem; min-height: fit-content;
    --bg: linear-gradient(to bottom,rgba(58, 12, 14, 0.95), rgba(58, 12, 14, 0) 40rem);
    --bg-2: linear-gradient(to top left, rgba(110, 29, 32, 1), rgba(186, 64, 51, 0) 25%, rgba(203, 71, 55, 0), rgba(214, 76, 58, 0), rgba(213, 57, 36, 0) 65%, rgba(217, 122, 111, .8));

    .container{ display: grid; gap: var(--gap); }
    .wpb-breadcrumbs{ max-width: 24rem; }

    &.has-background-image {
        &::after{ display: none; }
        .is-background-image{ overflow: hidden; }
        .is-background-image::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--bg); }
        .is-background-image::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--bg-2); }
    }
}
.wpb-header--fibre-optics{ --form-overflow: 3.2rem; overflow: visible; margin-bottom: var(--form-overflow);
    .wpb-card--fibre-optics{ margin-bottom: calc((-1 * var(--pb)) - var(--form-overflow)); }
}
.wpb-header--form{ 
    .wpb-text{ text-align: center; }
    .wpb-text *{ margin-left: auto; margin-right: auto; }

    .container--form{ --wpb-width: 91.1rem; }
}

@media (max-width: 991.98px){
    .wpb-header--subpage figure.is-background-image{ position: relative; transform: translateY(var(--pb, 0px)); max-height: clamp(32rem, 42vw, 54rem); border-bottom-right-radius: var(--block-radius); border-bottom-left-radius: var(--block-radius); }
    .wpb-header--subpage figure.is-background-image img{ width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 992px){
    .wpb-header--subpage{ --gap: 3.2rem; --thumbnail-width: 32rem;
        .container{ grid-template-columns: minmax(0, 1fr) var(--thumbnail-width); align-items: center; }
        figure.is-background-image{ width: calc(var(--thumbnail-width) + (var(--gap) / 2)); left: auto; border-top-right-radius: var(--block-radius); border-bottom-right-radius: var(--block-radius); }
        .wpb-card--cta{ margin-left: auto; }
    }
    .wpb-header--fibre-optics{ 
        .wpb-card--fibre-optics{ grid-column: span 2; max-width: min(75%, clamp(90rem, 47.5vw, 110rem)); }
    }
}
@media (min-width: 1200px){
    .wpb-header--subpage{ --gap: 6.4rem; --container-width: var(--container-width--xl); --thumbnail-width: calc(var(--container-width) - 68rem - (var(--gap) / 2)); 
        .container{ grid-template-columns: 68rem 1fr; }
        figure.is-background-image{ width: var(--thumbnail-width); max-width: 82rem; }
    }
}
@media (min-width: 1400px){
    .wpb-header--subpage{ --container-width: var(--container-width--xxl); }
}
@media (min-width: 1600px){
    .wpb-header--subpage{ --container-width: var(--container-width--xxxl); }
}
@media (min-width: 1800px){
    .wpb-header--subpage{ --container-width: 80%; }
}




/*** ---------- Components ---------- ***/
.wpb-cta-button{ --clr: var(--clr-text); --bg-clr: var(--clr-light); --hover-clr: #FFFF; --hover-bg-clr: var(--clr-text); --comment-height: 2.8rem; --comment-clr: #FFFF; --comment-bg-clr: var(--clr-secondary); --commment-p: 1.2rem; --comment-fs: 1.4rem; --btn-height: 4.4rem; --btn--fs: 1.6rem; --p: 1.8rem; display: block; text-decoration: none; font-weight: 600; width: fit-content; 
    .wpb-cta-button__comment{ color: var(--comment-clr); background-color: var(--comment-bg-clr); min-height: var(--comment-height); width: fit-content; padding: 0 var(--commment-p); font-size: var(--comment-fs); font-weight: 600; display: flex; align-items: center; border-radius: var(--comment-height); position: relative; margin-bottom: 1.2rem; margin-left: clamp(0rem, 1.5vw, 3.2rem); }
    .wpb-cta-button__comment::before{ content: ''; position: absolute; bottom: -.7rem; left: var(--comment-p, 1.2rem); width: 0; height: 0; border-right: 1.2rem solid transparent; border-top: .8rem solid var(--comment-bg-clr); }
    .wpb-cta-button__inner{ display: flex; align-items: center; gap: .4rem; 
        & > *{ border-radius: .6rem; }
        .wpb-cta-button__image{ width: var(--btn-height); min-width: var(--btn-height); height: var(--btn-height); min-height: var(--btn-height); overflow: hidden; }
        .wpb-cta-button__image img{ width: 100%; height: 100%; object-fit: cover; }
        .wpb-cta-button__button{ color: var(--clr); background-color: var(--bg-clr); min-height: var(--btn-height); display: flex; align-items: center; gap: 1rem; padding: 0 var(--p); font-size: var(--btn--fs); font-weight: 600; line-height: 1; transition: color var(--ts-duration) var(--ts-function), background-color var(--ts-duration) var(--ts-function); }
        .wpb-cta-button__button i{ font-size: calc(var(--btn-fs, 1.6rem) + .4rem); transform: rotate(-45deg); transition: transform var(--ts-duration) var(--ts-function); }
    }
    &:hover{
        .wpb-cta-button__button{ color: var(--hover-clr); background-color: var(--hover-bg-clr); }
        .wpb-cta-button__button i{ transform: rotate(0deg); }
    }
}
:is([class*="wpb-bg-clr--"], .wpb-card--cta):not(.wpb-bg-clr--transparent) .wpb-cta-button{ --bg-clr: #FFFF; }
:is(.wpb-bg-clr--primary, .wpb-bg-clr--dark, .wpb-bg-clr--gradient-dark, .wpb-bg-clr--gradient-red, .wpb-card--cta) .wpb-cta-button{ --comment-bg-clr: #FFFF; --comment-clr: #000; }

.wpb-google-rating{ --p: 0; --br: 0; --bg-clr: transparent; --clr: #FFF; padding: var(--p); border-radius: var(--br); background-color: var(--bg-clr); display: flex; align-items: center; gap: .6rem; width: fit-content; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    img{ --size: 1.8rem; width: var(--size); height: var(--size); min-width: var(--size); min-height: var(--size); border-radius: 50%; background-color: #FFFF; padding: .2rem; display: inline-grid; place-items: center; }
    span{ font-weight: 400; color: var(--clr); font-size: clamp(1.1rem, 1.3vw, 1.4rem); line-height: 0; }
    & + h1{ --mt: 1.2rem; }

    &.wpb-google-rating--badge{ --p: .4rem 1rem .4rem .8rem; --br: 6.4rem; --bg-clr: rgb(var(--clr-dark-rgb), .75); }
}
:is(.wpb-bg-clr--transparent, .wpb-bg-clr--light) .wpb-google-rating{ --clr: var(--clr-text); }

.wpb-procedures{ border-radius: 1.2rem; overflow: hidden;
    &.js-procedures{ --duration: 5s; }

    .wpb-procedures__inner{ --gap: clamp(2.4rem, 4vw, 5.6rem); --p: 2.4rem; --bg: linear-gradient(to bottom right, var(--clr-dark-60), var(--clr-dark) 40%); --clr: #FFFF; display: flex; flex-direction: column; gap: var(--gap); padding: var(--p); background: var(--bg); color: var(--clr); }
    .wpb-procedures__inner .wpb-procedures__item{ --offset: clamp(2rem, 2vw, 2.8rem); padding-right: var(--offset); opacity: .5; transition: opacity var(--ts-duration) var(--ts-function), transform var(--ts-duration) var(--ts-function); position: relative;
        .wpb-procedures__loader{ width: .4rem; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; background: rgba(255, 255, 255, 0.25); opacity: 0; transform: translateX(calc(-1 * var(--offset))); transition: opacity var(--ts-duration) var(--ts-function); border-radius: 6.4rem; overflow: hidden; }
        .wpb-procedures__loader::before{ content: ''; position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 0%; background-color: var(--clr); border-radius: 6.4rem; }

        .wpb-procedures__title{ display: block; font-size: clamp(1.8rem, 2vw, 2.4rem); transition: font-size var(--ts-duration) var(--ts-function); line-height: 1.2; padding-bottom: 1rem; }
        .wpb-procedures__text{ line-height: 1.6; }
        
        &.active{ opacity: 1; transform: translateX(var(--offset));
            .wpb-procedures__loader{ opacity: 1; }
            .wpb-procedures__loader::before{ animation: procedure-load var(--duration) forwards linear; }
            .wpb-procedures__title{ font-size: clamp(2.4rem, 3vw, 3.6rem); }
        }
    }
    .wpb-procedures__images{ position: relative; min-height: 32rem;
        .procedure-image{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--ts-duration) var(--ts-function); }
        .procedure-image.active{ opacity: 1; }

        .wpb-cta-button{ position: absolute; left: 1.8rem; bottom: 1.8rem; z-index: 2; }
    }
}
@keyframes procedure-load {
    0%{ height: 0%; }
    100%{ height: 100%; }
}
@media(min-width: 768px){
    .wpb-procedures .wpb-procedures__inner{ --p: 4rem; }
    .wpb-procedures .wpb-procedures__images .wpb-cta-button{ left: 2.4rem; bottom: 2.4rem; }
}
@media(min-width: 1200px){
    .wpb-procedures .wpb-procedures__inner{ --p: 6.4rem; }
    .wpb-procedures .wpb-procedures__images .wpb-cta-button{ left: 3.2rem; bottom: 3.2rem; }
}
@media(min-width: 1400px){
    .wpb-procedures .wpb-procedures__inner{ --p: 10rem; }
    .wpb-procedures .wpb-procedures__images .wpb-cta-button{ left: 4.8rem; bottom: 4.8rem; }
}

.wpb-usp{ --clr: var(--clr-text); --icon-clr: var(--clr-primary); --icon-size: 3.2rem; --gap: 1.2rem; --title-fs: clamp(1.6rem, 1.7vw, 1.8rem); --text-fs: clamp(1.3rem, 1.4vw, 1.5rem); --max-width: clamp(24rem, 28vw, 32rem); display: flex; gap: var(--gap); max-width: var(--max-width, 32rem); position: relative;
    .wpb-usp__icon{ --clr: var(--icon-clr); --w: var(--icon-size); --h: var(--icon-size); }
    .wpb-usp__text strong{ display: block; font-size: var(--title-fs); font-weight: 600; line-height: 1; }
    .wpb-usp__text span{ display: block; font-size: var(--text-fs); font-weight: 400; line-height: 1.4; margin-top: .4em; }

    .btn--ghost{ --p: 0; opacity: 0; position: absolute; top: 0; right: 0 ; bottom: 0; left: 0; }
    &:has(.btn--ghost){ transition: opacity var(--ts-duration) var(--ts-function); 
        &:hover{ opacity: .6; }
    }
}
.wpb-usps-wrapper{ --gap: 2.4rem;
    .wpb-usps-wrapper__label{ display: block; font-size: 1.4rem; font-weight: 500; opacity: .65; margin-bottom: 1.2rem; }
    &.wpb-usps-wrapper--large{ display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: clamp(1.8rem, 2.4vw, 3.8rem); row-gap: clamp(3.2rem, 4vw, 5.6rem);
        .wpb-usp{ --icon-size: 3rem; --gap: .8rem; --title-fs: clamp(1.8rem, 2vw, 2.4rem); --text-fs: clamp(1.4rem, 1.6vw, 1.8rem); --max-width: 100%; flex-direction: column; }
        .wpb-usp .wpb-usp__text span{ opacity: .65; }   
    }
    &.wpb-usps-wrapper--small .wpb-usp{ --icon-size:clamp(3.2rem, 3vw, 4.2rem); --gap: clamp(1.2rem, 1.5vw, 2.4rem); --text-fs: clamp(1.4rem, 1.5vw, 1.6rem); --max-width: 100%; 
        & + .wpb-usp{ margin-top: var(--gap);}
    }
    
}
.wpb-user{ --image-size: 4.8rem; --comment-height: 2.8rem; --comment-clr: #FFFF; --comment-bg-clr: var(--clr-secondary); --commment-p: 1.2rem; --comment-fs: 1.4rem; display: flex; align-items: center; flex-wrap: wrap; column-gap: 1.2rem;
    .wpb-user__image img{ width: var(--image-size); height: var(--image-size); min-width: var(--image-size); min-height: var(--image-size); border-radius: .6rem; object-fit: cover; }
    .wpb-user__text{ font-size: 1.4rem; font-weight: 400; line-height: 1.4; }
    .wpb-user__title{ display: block; font-size: 1.6rem; font-weight: 500; }

    .wpb-user__comment{ grid-column: span 2; color: var(--comment-clr); background-color: var(--comment-bg-clr); min-height: var(--comment-height); width: fit-content; padding: 0 var(--commment-p); font-size: var(--comment-fs); font-weight: 600; display: flex; align-items: center; border-radius: var(--comment-height); position: relative; margin-bottom: 1.2rem; margin-left: clamp(2rem, 8vw, 4rem); }
    .wpb-user__comment::before{ content: ''; position: absolute; bottom: -.7rem; left: var(--comment-p, 1.2rem); width: 0; height: 0; border-right: 1.2rem solid transparent; border-top: .8rem solid var(--comment-bg-clr); }


    &.wpb-user--large{ --image-size: 6.4rem; }
    &.wpb-user--image-comment{ display: grid; grid-template-columns: var(--image-size) auto; }
}
.wpb-links{ --fs: clamp(1.6rem, 1.8vw, 2rem); --clr: var(--clr-text); --icon-clr: var(--clr-primary); --border-clr: rgba(0, 0, 0, .2); --hover-clr: var(--clr-primary); --hover-border-clr: rgb(var(--clr-primary-rgb), .4); --gap: clamp(1.2rem, 1.6vw, 2rem); list-style: none; padding-left: 0 !important; display: flex; flex-direction: column; gap: var(--gap); max-width: 54.5rem;
    .wpb-links__label{ font-size: 1.4rem; font-weight: 500; opacity: .65; }
    .wpb-links__link{ text-decoration: none !important; font-size: var(--fs); font-weight: 500; color: var(--clr); display: flex; align-items: center; gap: 1rem; text-decoration: none; padding-bottom: clamp(1rem, 1.2vw, 1.6rem); line-height: 1.1; border-bottom: 1px solid var(--border-clr); transition: color var(--ts-duration) var(--ts-function), border-color var(--ts-duration) var(--ts-function);
        i{ font-size: calc(var(--fs) + .3rem); color: var(--icon-clr); line-height: 0; transition-property: color, opacity, transform; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }

        &:hover{ color: var(--hover-clr); border-color: var(--hover-border-clr);
            & i{ color: var(--hover-clr); opacity: .7; }
        }
    }

    &.wpb-links--large .wpb-links__link{ color: var(--clr-text); }
    &.wpb-links--small{ --fs: clamp(1.4rem, 1.5vw, 1.6rem); --clr: var(--clr-primary-dark); --icon-clr: var(--clr); --gap: clamp(.6rem, .8vw, 1rem);
        .wpb-links__link{ padding-bottom: 0; border-bottom: none; line-height: 1.2; }
        .wpb-links__link i{ transform: rotate(-45deg); }
        .wpb-links__link:hover i{ transform: rotate(0deg); }
    }
}
.wpb-list{ --icon-clr: var(--clr-primary); --icon-size: 1rem; --gap: .8rem; padding-left: 0 !important; list-style: none;
    .wpb-list__label{ display: block; font-size: 1.4rem; font-weight: 500; opacity: .65; line-height: 1; margin-bottom: 2.4rem; }
    .wpb-list__item{ --icon-mask-url: url('/app/themes/wuxnl-theme/assets/icons/rectangle.svg'); --icon-mask: var(--icon-mask-url) no-repeat center / contain; position: relative; padding-left: calc(var(--gap) + var(--icon-size));
        + .wpb-list__item{ margin-top: 1.6rem; }
        span p{ line-height: 1.3; }
        span strong{ color: var(--clr-text); }
        &::before{ content: ''; display: block; width: var(--icon-size); height: var(--icon-size); min-width: var(--icon-size); min-height: var(--icon-size); background-color: var(--icon-clr); mask: var(--icon-mask); position: absolute; left: 0; top: .4em; }

        &.plus{ --icon-mask-url: url('/app/themes/wuxnl-theme/assets/icons/plus.svg'); 
            &::before{ opacity: .8; }
        }
    }
}
.wpb-notification{ --inner-clr: var(--clr-text); --bg: transparent; --border-clr: var(--clr-border); --p: 1.6rem; --br: .6rem; border: 1px solid var(--border-clr); color: var(--inner-clr); background: var(--bg); border-radius: var(--br); container-type: inline-size; container-name: notification;
    .wpb-notification__main{ position: relative; padding: var(--p); display: flex; align-items: end; flex-wrap: nowrap; gap: .8rem;
        .wpb-notification__icon{ --size: 3rem; width: var(--size); height: var(--size); min-width: var(--size); min-height: var(--size); border-radius: 50%; display: inline-grid; place-items: center; color: var(--inner-clr); border: 1px solid var(--border-clr); margin-bottom: auto; }
        .wpb-notification__icon i{ font-size: calc(var(--size) / 2); line-height: 0; }
        .wpb-notification__main__text{ display: flex; flex-direction: column; }
        .wpb-notification__main__text small{ font-size: 1.3rem; line-height: 1.1; opacity: .65; margin-bottom: .2rem; }
        .wpb-notification__main__text strong{ font-size: 1.6rem; line-height: 1.1; }
        & > .btn{ --fs: 1.4rem; --clr: var(--inner-clr); --icon-clr: var(--inner-clr); justify-content: start; min-height: auto; width: auto; margin-left: auto;
            & > span{ display: none; }
            & > i{ font-size: 2rem; }
            &::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
        }
    }
    .wpb-notification__message{ padding: var(--p); padding-top: 0; }
    .wpb-notification__message p{ font-size: clamp(1.4rem, 1.5vw, 1.7rem); line-height: 1.4; font-weight: 400; opacity: .65; }

    /* Notification variations */
    &.wpb-notification--success{ --border-clr: var(--clr-secondary); 
        .wpb-notification__main > .btn{ --hover-clr: var(--clr-secondary); }
    }
    &.wpb-notification--alert{ --inner-clr: #FFFF; --bg: var(--gradient-red); --border-clr: var(--clr-primary); 
        .wpb-notification__icon{ border-color: var(--inner-clr); }
        .wpb-notification__main > .btn{ --hover-clr: rgb(255, 255, 255, .8); }
        .wpb-notification__message p{ opacity: 1; }
    }
}
@container notification (width > 440px){
    .wpb-notification .wpb-notification__main > .btn > span{ display: block; }
    .wpb-notification .wpb-notification__main > .btn > i{ font-size: var(--fs); }
}

.wpb-authority-declaration{ --border: 1px solid var(--clr-border); --p: 1.8rem; --br: .8rem; border: var(--border); padding: var(--p); border-radius: var(--br);
    .wpb-authority-declaration__header{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2.4rem; row-gap: .8rem; }
    .wpb-authority-declaration__body{ padding-top: var(--p); }
    .wpb-authority-declaration__body p{ color: var(--clr-text-light); }
    .wpb-authority-declaration__footer{ padding-top: 1.2rem; }
    .wpb-authority-declaration__footer p, 
    .wpb-authority-declaration__footer p a{ font-size: 1.5rem; color: rgb(0, 0, 0, .45); }
}
@media (max-width: 575.98px){
    .wpb-authority-declaration{ --br: 0; border: none; border-top: var(--border); padding: 0; padding-top: var(--p); }
}
@media (min-width: 768px){
    .wpb-authority-declaration{ --p: 2.4rem; }
}

form.wpb-fibre-optics-form{ --input-mh: 4.6rem; --gap: .8rem; --clr: #FFF; display: flex; align-items: end; gap: var(--gap);
    button[type="submit"], input, select{ height: var(--input-mh); min-height: var(--input-mh); }
    .wpb-fibre-optics-form__item{ --house-number-width: 8rem; width: 100%; }
    .wpb-fibre-optics-form__item--house-number{ width: var(--house-number-width); min-width: var(--house-number-width); }
    button[type="submit"]{ text-wrap: nowrap; }
}
@media (max-width: 767.98px){
    form.wpb-fibre-optics-form{ flex-wrap: wrap; }
    form.wpb-fibre-optics-form button[type="submit"]{ width: 100%; margin-top: 1rem; }
    form.wpb-fibre-optics-form .wpb-fibre-optics-form__item--postal{ width: calc(100% - var(--house-number-width) - var(--gap)); }
}


.by-wux { display: flex; align-items: center; gap: .4rem; text-decoration: none; opacity: 1; 
    span { font-size: 1rem; line-height: 1; }
    img { width: 1.6rem; height: 1.6rem; }
}



/* Styles on dark background */
:is(.wpb-bg-clr--primary, .wpb-bg-clr--dark, [class*="wpb-bg-clr--gradient"]){ --clr-text-light: rgb(255, 255, 255, .65);
    .wpb-usp{ --icon-clr: #FFFF; }
    .wpb-links{ --clr-text: #FFF; --border-clr: rgba(255, 255, 255, .2); }
    .wpb-user{ --comment-clr: var(--clr-text); --comment-bg-clr: #FFFF; }
}