/*	ACESSIBILIDADE
*	jBility
* https://github.com/urielcaire/jbility
*/

:root {
    --primary: #c8a064;
    --primary-light: #CCDBEB;
    --primary-dark: #967034;
    --secondary: #333333;
    --white: #ffffff;
    --dark: #000000;
    --darker: #262626;
    --green: #76881d;
    --contrast-green: #6f7d28;
    --contrast-dark-green: #81980d;
    --contrast-danger: #ee5b57;
    --contrast-bg-white-text-danger: #e81e18;
    --success: var(--green);
    --success-light: #ecf0e2;
    --border-dark: 1px solid var(--dark);
    --body-bg: var(--white);
    --body-color: var(--dark);
    --box-shadow-dark: 0px 0px 0px 5px #00000080;
    --transition-base: all 250ms ease-in-out;
    --btn-bg: var(--primary);
    --btn-bg-hover: var(--primary);
    --btn-color: var(--white);

    /* Button Accessibility Settings */
    --btn-settings-color: var(--white);
    --btn-settings-bg: var(--secondary);
    --btn-settings-bg-hover: var(--primary);
    --btn-settings-width-sm: 50px;
    --btn-settings-width: 70px;
    --btn-settings-border: 2px solid var(--white);
    --btn-settings-border-width: 3px;
    --btn-settings-border-hover: 2px solid var(--btn-settings-bg-hover);
    --btn-settings-border-radius: 20px;
}

/* Accessibility Settings/Buttons */
.accessibility-wrapper {
    background-color: transparent !important;
    cursor: pointer;
    display: flex;
    position: fixed;
    left: 10px;
    bottom: 80px;
    z-index: 2000;
    gap: 10px;
}

#btn-accessibility-settings {
    position: relative;
}

#btn-accessibility-settings:after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    top: -7px;
    right: -7px;
    background-color: var(--success) !important;
    background-image: url(../accessibility/accessibility-icon-check.svg) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px;
    border-radius: 11px;
    transform: scale(0);
    transition: all 200ms ease-in-out;
}

.accessibility-on #btn-accessibility-settings:after {
    transform: scale(1);
}

.accessibility-icon {
    background-color: var(--btn-settings-bg) !important;
    border: var(--btn-settings-border) !important;
    float: left;
    width: var(--btn-settings-width-sm);
    height: var(--btn-settings-width-sm);
    border-radius: var(--btn-settings-border-radius);
    transition: var(--transition-base);
    box-shadow: 0px 0px 15px #00000050;
    display: grid;
    align-items: center;
    justify-content: center;
}

.accessibility-icon:hover {
    background-color: var(--btn-settings-bg-hover) !important;
    border: var(--btn-settings-border-hover) !important;
}

.accessibility-icon img {
    transition: var(--transition-base);
}

@media screen and (max-width: 576px) {
    .accessibility-icon img {
        width: 35px;
        height: 35px;
    }
}

.accessibility-icon:hover img {
    transform: scale(1.1);
    filter: brightness(0) saturate(100%) invert(1);
}

.accessibility-icon:focus,
.accessibility-icon:focus-visible {
    box-shadow: var(--box-shadow-dark) !important;
}

@media screen and (min-width: 768px) {
    .accessibility-icon {
        width: var(--btn-settings-width) !important;
        height: var(--btn-settings-width) !important;
    }
}

#accessibility-settings {
    display: none;
}

/* Accessibility On: Page Settings */
.accessibility-on input:focus,
.accessibility-on .accordion-button:focus {
    box-shadow: var(--box-shadow-dark);
}


.accessibility-on .overlay-primary,
.accessibility-on .content-img-overlay,
.accessibility-on .header-overlay {
    background-color: var(--primary) !important;
    background: var(--primary) !important;
}

.accessibility-on .tarifvergleich .card.card-eco .card-header {
    background-color: var(--green) !important;
}

.accessibility-on .banner-text h1,
.accessibility-on .banner-text h2,
.accessibility-on .header-banner h1 {
    background-color: var(--primary) !important;
}

.accessibility-on .header-banner .breadcrumb {
    background-color: var(--primary) !important;
}

.accessibility-on .product-topbar .btn-primary {
    background: var(--secondary) !important;
    color: var(--primary) !important;
    transition: var(--transition-base);
}

.accessibility-on .product-topbar .btn-primary:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}

.accessibility-on .product-topbar .btn-primary img {
    filter: unset !important;
}

.accessibility-on .btn-success {
    background: linear-gradient(to right, var(--success-light) 0%, var(--success-light) 50%, var(--success) 50%, var(--success) 100%) !important;
    background-size: 203% 100% !important;
    background-position: 99% 0 !important;
    transition: background-position 0.3s !important;
    color: #fff !important;
}

.accessibility-on .btn-success:hover {
    color: var(--success) !important;
    background-position: 0 0 !important;
}

.accessibility-on .banner-bg-overlay {
    background-color: var(--primary) !important;
}


.accessibility-on #topbar {
    background-color: var(--dark);
}

.accessibility-on #topbar .link-white:hover {
    color: var(--primary)!important;
}


.accessibility-on .banner {
    background-color: var(--darker);
}
.accessibility-on .banner .banner-image {
    opacity: 0;
    visibility: hidden;
}

/* specific backgrounds */

.accessibility-on .bg-primary {
    background-color: var(--contrast-green)!important;
}
.accessibility-on .bg-steak,
.accessibility-on .bg-team,
.accessibility-on .footer-image,
.accessibility-on .bg-grunge,
.accessibility-on .bg-rind {
    background-image: none;
}

.accessibility-on .bg-wood:has(.bg-black) {
    background-image: none;
    background-color: var(--dark);
}
.accessibility-on .btn-tertiary {
    color: var(--dark)!important;
}

.accessibility-on .btn-tertiary:hover,
.accessibility-on .btn-tertiary:focus,
.accessibility-on .btn-tertiary:focus-visible,
.accessibility-on .bg-black:has(.btn-tertiary) .btn-tertiary:focus-visible,
.accessibility-on .bg-black:has(.btn-tertiary) .btn-tertiary:focus,
.accessibility-on .bg-black:has(.btn-tertiary) .btn-tertiary:hover,
.accessibility-on .btn-outline-tertiary:hover,
.accessibility-on .btn-outline-tertiary:focus,
.accessibility-on .btn-outline-tertiary:focus-visible,
.accessibility-on .bg-black:has(.btn-outline-tertiary) .btn-outline-tertiary:focus-visible,
.accessibility-on .bg-black:has(.btn-outline-tertiary) .btn-outline-tertiary:focus,
.accessibility-on .bg-black:has(.btn-outline-tertiary) .btn-outline-tertiary:hover {
    background-color: var(--white);
    color: var(--dark);
    box-shadow: 0 0 0 3px var(--primary);
}

/* specific buttons */
.accessibility-on .btn-primary {
    background-color: var(--contrast-green)!important;
}
.accessibility-on .btn-outline-danger {
    border-color: var(--contrast-danger)!important;
    color: var(--contrast-danger)!important;
}


.accessibility-on .was-validated .form-check-input:invalid ~ .form-check-label,
.accessibility-on .form-check-input.is-invalid ~ .form-check-label,
.accessibility-on .form-check-input.is-invalid,
.accessibility-on .invalid-feedback,
.accessibility-on .text-danger {
    color: var(--contrast-danger)!important;
}

.accessibility-on .btn-outline-danger:focus,
.accessibility-on .btn-outline-danger:focus-visible,
.accessibility-on .btn-outline-danger:hover {
    border: 0;
    background-color: var(--contrast-danger)!important;
    outline: var(--btn-settings-border-width) solid var(--contrast-danger);
    color: var(--dark)!important;    
    box-shadow: none;
}

.accessibility-on .btn-primary:hover,
.accessibility-on .btn-primary:focus,
.accessibility-on .btn-primary:focus-visible {
    box-shadow: none;
    border: var(--btn-settings-border-width) solid var(--dark);
    color: var(--dark);
}


.accessibility-on .bg-secondary:has(.btn-outline-primary) .btn-outline-primary {
    border-color: var(--contrast-dark-green);
    color: var(--contrast-dark-green);
}

.accessibility-on .bg-secondary:has(.btn-outline-primary) .btn-outline-primary:focus,
.accessibility-on .bg-secondary:has(.btn-outline-primary) .btn-outline-primary:focus-visible,
.accessibility-on .bg-secondary:has(.btn-outline-primary) .btn-outline-primary:hover {
    /* border: 0; */
    outline: var(--btn-settings-border-width) solid var(--white);
    color: var(--dark);
}

.accessibility-on .btn-outline-white:hover, 
.accessibility-on .btn-outline-white:focus, 
.accessibility-on .btn-outline-white:focus-visible { 
    box-shadow: 0 0 0 var(--btn-settings-border-width) var(--dark);
}
/* nav items */
.accessibility-on .nav-item a:focus,
.accessibility-on .nav-item a:hover {
    color: var(--white)!important;
}

/* courses */
.accessibility-on .course-item-image-wrapper {
    background-color: var(--dark);
}

.accessibility-on .course-item-image-wrapper .course-item-image {
    opacity: 0;
}

.accessibility-on .course-item:hover,
.accessibility-on .course-item:focus-visible,
.accessibility-on .course-item:focus {
    border: var(--btn-settings-border-width) solid var(--white);
    outline: none;
}

.accessibility-on .course-item:hover .course-item-description {
    opacity: 0;
}

.accessibility-on .course-item:hover .course-item-price,
.accessibility-on .course-item:hover .course-item-headline {
    opacity: 1;
    transform: none;
}

.accessibility-on .course-item .course-item-price {
    background-color: var(--contrast-green)!important;
}

/* accordions */

.accessibility-on .accordion .accordion-button,
.accessibility-on .accordion .accordion-body {
    background-color: var(--dark);
}

.accessibility-on .accordion .accordion-button:focus,
.accessibility-on .accordion .accordion-button:focus-visible,
.accessibility-on .accordion .accordion-body:focus,
.accessibility-on .accordion .accordion-body:focus-visible {
    box-shadow: none;
    border-width: 2px;
}


.accessibility-on .bg-secondary {
    background-color: var(--darker)!important;
}

.accessibility-on .voucher-value {
    background-color: var(--darker)!important;
}

.accessibility-on .voucher-value:focus,
.accessibility-on .voucher-value:focus-visible {
    border-radius: 0;
    border: var(--btn-settings-border-width) solid var(--white)!important;
}

.accessibility-on .text-primary,
.accessibility-on .btn-link {
    color: var(--contrast-green)!important;
}

.accessibility-on .btn-primary:focus,
.accessibility-on .btn-primary:hover {
    color: var(--white)!important;
    box-shadow: none;
    border: var(--btn-settings-border-width) solid var(--dark);
}


.accessibility-on .btn-link:focus,
.accessibility-on .btn-link:hover {
    background-color: var(--contrast-green);
    color: var(--white)!important;
    box-shadow: none;
    border: var(--btn-settings-border-width) solid var(--dark);
}


.banner-cta .btn-primary:focus {
    border-color: var(--white);
    box-shadow: none;
}

.accessibility-on .bg-white .btn-outline-tertiary {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.accessibility-on .bg-white .btn-outline-tertiary:focus,
.accessibility-on .bg-white .btn-outline-tertiary:hover {
    background-color: var(--primary-dark);
    color: var(--white);
    box-shadow: none;
}
.accessibility-on .btn:focus {
    text-decoration: underline;
}

.accessibility-on #contrast:hover,
.accessibility-on #btn-accessibility-settings.accessibility-icon:hover {
    background-color: var(--primary-dark)!important;
    border-color: var(--primary-dark)!important;
    box-shadow: none!important;
}

.accessibility-on .account-side-menu .list-group-item:focus,
.accessibility-on .account-side-menu .list-group-item:hover {
    color: var(--primary-dark)!important;
    background-color: var(--white);
}

.accessibility-on .account-side-menu .list-group-item.text-danger:focus,
.accessibility-on .account-side-menu .list-group-item.text-danger:hover {
    color: var(--contrast-bg-white-text-danger)!important;
}

.form-check input:focus,
.form-select:focus,
.form-control:focus {
    box-shadow: 0 0 0 3px var(--primary)!important;
}

.accessibility-on .btn.btn-cart-delete:hover span,
.accessibility-on .btn.btn-cart-delete:hover,
.accessibility-on .btn.btn-cart-delete:focus span,
.accessibility-on .btn.btn-cart-delete:focus {
    color: var(--contrast-danger);
    color: var(--contrast-danger);
}

.accessibility-on .btn.btn-cart-delete:focus  {
    border: 2px solid var(--contrast-danger)!important;
}

.accessibility-on #navbar .link-tertiary {
    color: var(--primary-dark)!important;
}