﻿/* Overrides for pure bootstrap styles */

:root {
    --body-color: #0b0c0c;
    --primary-text: #0b0c0c;
    --secondary-text: #fff;
    --link-color: #004331;
    --link-color-hover: #007253;
    --primary-color: #006851;
    --secondary-color: #004331;
    --accent-color: #004331;
    --cta-color: #004331;
}



/*Mobile menu */

/* Hamburger icon */
.btn .navbar-toggler-icon {
    width: 1.5em;
    height: 1.5em;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M4 7h22 M4 15h22 M4 23h22' stroke='currentColor' stroke-width='4' stroke-linecap='round'/></svg>") center/100% no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M4 7h22 M4 15h22 M4 23h22' stroke='currentColor' stroke-width='4' stroke-linecap='round'/></svg>") center/100% no-repeat;
    background-color: #fff;
}

.btn-close {
    width: 1.25rem;
    height: 1.25rem;
    padding: .25rem;
    background: none;
    border: 0;
    border-radius: .25rem;
    opacity: .75;
    -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
  <path d='M3 3L13 13 M13 3L3 13' stroke='black' stroke-width='2.25' stroke-linecap='round'/>\
</svg>") center/1em 1em no-repeat;
    mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
  <path d='M3 3L13 13 M13 3L3 13' stroke='black' stroke-width='2.25' stroke-linecap='round'/>\
</svg>") center/1em 1em no-repeat;
    background-color: var(--wc-close-color, #fff);
}

/* LHS filter drawer */

/* filter drawer */
#filterDrawer {
    padding: 0;
}

/* filter drawer close button */
.offcanvas-header {
    background-color: var(--primary-color);
    color: white;
}

.offcanvas.show {
    transform: none !important;
    visibility: visible !important;
}


.offcanvas-body {
    padding: 0rem;
}
/* Badge */

.badge {
    color: #004331;
}
/* Buttons */

.btn-primary {
    background-color: var(--cta-color);
    color: #fff;
    border: var(--cta-color) 2px solid;
    /* box-shadow: 0 2px 0 #002d18; */
}

    .btn-primary:hover {
        background-color: var(--cta-color);
        border-color: #004331;
    }

button.btn-primary[disabled],
button.btn-primary.disabled {
    background-color: var(--link-color-hover);
    border-color: var(--link-color-hover);
    opacity: 0.35;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
    background-color: var(--cta-color);
    border: 2px solid #004331;
    /*    box-shadow: 0 0 0 4px rgba(255, 221, 0, 0.5), inset 0 0 0 2px white;*/
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
}


.btn-primary.active:focus, .btn-primary:active:focus {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
}



.btn-outline-primary {
    color: #212529;
    background-color: #fff;
    border-color: #ced4da;
    border-width: 2px;
}


    .btn-outline-primary:hover {
        color: #000;
        background-color: rgba(34, 197, 94, 0.1);
        border-color: #006851;
    }
    /* Button check */

    .btn-check:active + .btn-outline-primary:focus,
    .btn-check:checked + .btn-outline-primary:focus,
    .btn-outline-primary.active:focus,
    .btn-outline-primary.dropdown-toggle.show:focus,
    .btn-outline-primary:active:focus {
        box-shadow: 0 0 0 .25rem rgba(34, 197, 94, 0.3);
    }

    .btn-check:focus + .btn-outline-primary,
    .btn-outline-primary:focus {
        box-shadow: 0 0 0 .25rem rgba(34, 197, 94, 0.3);
    }

.btn-check:checked + .btn-outline-primary {
    color: #000;
    background-color: rgba(34, 197, 94, 0.3);
    border-color: #004331;
}
/* Toggle filters button */

#toggleMoreFilters.btn-secondary {
    background: transparent;
    border: none;
    color: #002d18;
}
/* Header menu items */

.nav-link, .nav-link:focus, .nav-link:hover {
    color: #fff;
}

    .nav-link:hover {
        color: #fff;
        text-decoration: underline;
    }
/* Badge */


.badge {
    background: var(--secondary-color);
    color: white;
}
/*  Select  */



.form-select {
    border: 2px solid #ced4da;
    outline: 1px solid transparent;
}


select.form-select:focus {
    outline: 2px solid transparent;
    border: 2px solid #004331;
    /*    box-shadow: 0 0 0 4px rgba(255, 221, 0, 0.5), inset 0 0 0 2px white;*/
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3), inset 0 0 0 2px white;
}
/* Input */

input {
    border: 2px solid #ced4da;
    outline: 1px solid transparent;
}
    /* ------------------------------------------------
 * Input
 * ------------------------------------------------ */

    input:focus {
        outline: 2px solid transparent !important;
        border: 2px solid #004331 !important;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3), inset 0 0 0 2px white !important;
    }
/* Checkbox group */



.form-check {
    display: block;
    min-height: 2rem;
    padding-left: 2em;
    margin-bottom: .25rem;
}

.form-check-input {
    width: 1.5em;
    height: 1.5em;
    margin-top: .1em;
    vertical-align: top;
    border: 2px solid #ced4da;
    /* border: 2px solid #8B93A7; */
}

.form-check .form-check-input {
    float: left;
    margin-left: -2em;
}

.form-check-input:checked {
    background-color: #fff;
    /*    background-color: rgba(34, 197, 94, 0.3); */
    border-color: #004331;
}
    /*Rule for black check mark */

    .form-check-input:checked[type=checkbox] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23004331' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }


.form-check-input:focus {
    border-color: #004331;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(34, 197, 94, 0.3);
}
/* Form legend */

legend span {
    font-weight: 600;
}

legend h2,
legend h3,
legend h4,
legend h5,
legend h6 {
    font-weight: 600;
}
/* Accordion */

.accordion-button {
    padding: 0;
    background-color: transparent !important;
    color: inherit !important;
}
    /* Just changes expand/collapse icon to white */
    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    }

    .accordion-button:focus {
        box-shadow: none; /* Avoids border */
    }

    .accordion-button:not(.collapsed) {
        box-shadow: none; /* Avoids underscore on open accordion header (was affecting unfocused ones) */
    }
/* Performance - Bootstrap accordion height transition cannot be handled by GPU & looks sluggish */
.collapsing {
    transition: height .15s ease; /* Performance - faster transition */
    will-change: height; /* Performance - browser hint */
    contain: layout; /* Performance - do not redraw whole page */
}

.accordion-body {
    transform: translateZ(0); /* Performance - may promote content to GPU layer reducing repaint cost */
}


.wc-text-success {
    color: var(--primary-color) !important
}

.wc-border-success {
    border-color: var(--primary-color) !important
}
