:root {
    /* --icon-star: url(../../extra/star.svg); */
    --icon-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23cfd5e2" stroke="%23cfd5e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-icon lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>');
}

main:has(.login-wrapper) {
    max-width: calc(1400px + 5%);
    padding: 2rem 5%;
}

main:has(.login-wrapper)>header {
    display: none;
}

.login-wrapper {
    width: 100% !important;
}

.login-wrapper h2 {
    margin-bottom: 2rem;
}

.section-main {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
}

@media(max-width:768px){
    main:has(.login-wrapper){
        padding: 2rem 1rem;
    }

    .section-main{
        flex-direction: column-reverse;
        gap: 4rem;
    }

    .login-wrapper h2{
        text-align: center;
    }
}

/* ==========================================================================
   Alerts
   ========================================================================== */

div:has(>ul[role="alert"]) {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: calc(1400px + 5%);
    padding: 1rem 5% 0 5%;
}

ul[role="alert"] {
    --rgb-values: 253 112 78;
    display: flex;
    flex-direction: column;
    background-color: rgb(var(--rgb-values) / 10%);
    padding: 1rem;
    border-radius: 0.25rem;
    border: 1px solid rgb(var(--rgb-values));
    color: var(--static-dark-color);
    outline: none;
    margin: 0;
    gap: 1rem;
}

ul.woocommerce-message {
    --rgb-values: 42 123 111;
}

ul.woocommerce-error {
    --rgb-values: 200 79 72;
}

ul[role="alert"] li {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul[role="alert"] li a {
    background: transparent;
    color: inherit;
}

.forms-wrapper .woocommerce-notices-wrapper {
    margin: 0 auto 2rem auto;
    padding: 0;
    max-width: 23rem;
}

/* Alerts: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {
    div:has(>ul[role="alert"]){
        padding: 1rem 1rem 0 1rem;
    }
}

/* Alerts: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {

}

/* ==========================================================================
   Section - Marketing
   ========================================================================== */

section.marketing {
    width: calc(55% - 1rem);
    min-width: calc(55% - 1rem);
    min-height: 65vh;
    padding: 2.5rem 3.5rem;
    border-radius: var(--pico-border-radius);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;

    background-size: cover;
    background-color: rgb(253 112 78 / 30%);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fd704e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-icon lucide-circle"><circle cx="12" cy="12" r="10"/></svg>');
    background-position: 15rem 7rem;
}

.marketing header {
    max-width: 100%;
    margin: 0 auto;
}

.marketing header h2 {
    --pico-color: var(--static-dark-color);
    --pico-font-size: 2.6rem;
    font-weight: 400;
}

.marketing-content {
    margin-top: auto;
}

/* Slick Slider */

.slick-track{
    display: flex !important;
    align-items: stretch;
}

.slick-slide {
    height: auto;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    width: 100% !important;
}

.slick-slide > div {
    height: 100%;
}

.slick-arrow{
    webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-bottom: 0.5rem;

    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    --pico-border-radius: 0.5rem;

    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.slick-prev {
    top: revert;
    left: revert;
    bottom: 0;
    right: calc(32px + 0.5rem);
}

.slick-prev:before{
    transform: scale(0.75) rotate(180deg);
}

.slick-next {
    top: revert;
    right: 0.5rem;
    bottom: 0;
}

.slick-next:before{
    transform: scale(0.75);
}

.reviews {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
}

.review {
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;

    display: none;
    align-items: center;
    gap: 1rem;
    border-radius: var(--pico-border-radius);

    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.review.first-review{
    display: flex;
}

.review-image {
    height: 100%;
    width: 25%;

    position: absolute;
    left: 0;
    top: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
    opacity: 0.8;
}

.review-content {
    padding: 1rem;
    width: 75%;
    margin-left: auto;
}

.review-content p {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.review-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.65rem;
    text-decoration: none;
    --pico-color: var(--pico-secondary-border);
    font-size: 0.8rem;
    position: relative;
    line-height: 1;
}

.review-rating .rating-base, .review-rating .rating-mask {
    --icon-size: 1.1rem;
    display: flex;
    height: var(--icon-size);
    background-repeat: repeat-x;
}

.review-rating .rating-base {
    width: calc(5 * var(--icon-size));
    background-image: var(--icon-star);
    background-size: var(--icon-size);
}

.review-rating .rating-mask {
    position: absolute;
    -webkit-mask-image: var(--icon-star);
    -webkit-mask-size: var(--icon-size);
    mask-image: var(--icon-star);
    mask-size: var(--icon-size);
    background-color: #f4cf3e;
}

.review-author {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
}


/* Section - Marketing: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {
    section.marketing {
        padding: 2rem;
        min-height: 550px;
    }
}

/* Section - Marketing: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
    section.marketing{
        width: 100%;
        padding: 1rem;
        min-height: 45vh;
    }

    .marketing header h2{
        --pico-font-size: 2rem;
    }
}

/* ==========================================================================
   Section - Forms
   ========================================================================== */

.forms-wrapper {
    width: calc(45% - 1rem);
    min-width: calc(45% - 1rem);
}

.forms {
    position: relative;
    max-width: 23rem;
    margin: 0 auto;
}

.login-form-wrapper {
    position: relative;
    left: 0;
    opacity: 1;
    visibility: visible;
    block-size: auto;
    transition: opacity 0.3s, visibility 0.3s;
}

.register-form-wrapper {
    position: relative;
    left: -9999px;
    opacity: 0;
    visibility: hidden;
    block-size: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.show-register .login-form-wrapper {
    left: -9999px;
    opacity: 0;
    visibility: hidden;
    block-size: 0;
}

.show-register .register-form-wrapper {
    left: 0;
    opacity: 1;
    visibility: visible;
    block-size: auto;
}

.no-register.show-register .login-form-wrapper {
    left: 0;
    opacity: 1;
    visibility: visible;
    block-size: auto;
}

.woocommerce-form__label-for-checkbox, .woocommerce-privacy-policy-text {
    margin-bottom: calc(var(--pico-spacing) * 1.375);
}

button[type=submit], .forms-wrapper a[role="button"] {
    --pico-background-color: var(--static-dark-color);
    --pico-color: var(--static-light-color);
    --pico-border-color: var(--static-dark-color);
    background: linear-gradient(var(--primary-gradient-light), var(--main-gradient-color));
    box-shadow: 0 0 0 var(--pico-outline-width) transparent;
    transition: color var(--pico-transition), border var(--pico-transition), box-shadow var(--pico-transition);
}

button[type=submit]:hover, button[type=submit]:active, button[type=submit]:focus,
.forms-wrapper a[role="button"]:hover, .forms-wrapper a[role="button"]:active, .forms-wrapper a[role="button"]:focus {
    --pico-border-color: #d3d3d3;
    --pico-color: #d3d3d3;
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}

.login-form-wrapper a[role="button"]{
    width: 100%;
}

.form-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1;
    margin: 1.5rem 0 0 0;
}

.form-footer a {
    text-decoration: none;
    font-weight: 500;
}

.form-footer span {
    font-size: 0.85rem;
    line-height: 1rem;
}

/* Section - Forms: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Section - Forms: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
    .forms-wrapper{
        width: 100%;
    }

    .forms{
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* ==========================================================================
   Container
   ========================================================================== */


/* Container: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Container: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {}