/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Oswald&display=swap');

/* Base styling for headers */
/* Getting error on validation but I checked on codepens and stackoverflow and it works*/
:is(h1, h2, h3, h4, h5, h6,) {
    font-family: 'Audiowide',
    cursive;
}

/* Setting default styling for the body */
body {
    font-family: 'Oswald',
    sans-serif;
    min-height: 100vh;
    background-color: #fcb014;
}

/* Navbar styling */

.logo-font {
    font-family: 'Audiowide',
    cursive;
    color: #fcb014;
    text-shadow:2px 2px #fff;
}

/* Just to target the nav logo with interactive colour change */
h1 strong.logo-font:hover,
h1 strong.logo-font:active,
h1 strong.logo-font:focus {
    font-family: 'Audiowide',
    cursive;
    color: #c01b21;
    font-size: 3rem;
    text-shadow: 2px 2px #fcb014;
}

.logo-accent {
    font-family: 'Oswald',
    sans-serif;
    color: #c01b21;
    font-size: 3rem;
    text-shadow:2px 2px #fcb014;
}

h1.logo-accent:hover,
h1.logo-accent:active,
h1.logo-accent:focus {
    font-family: 'Oswald',
    sans-serif;
    color: #fcb014;
    font-size: 3.1rem;
    text-shadow:2px 2px #fff;
}

.logo-font-alt {
    font-family: 'Audiowide',
        cursive;
    color: #fff;
    text-shadow: 2px 2px #047ab7;
}

.logo-accent-alt {
    font-family: 'Oswald',
        sans-serif;
    color: #047ab7;
    font-size: 3rem;
    text-shadow: 2px 2px #fff;
}

.blue-text{
    color: #047ab7 !important;
}

.blue-background {
    background-color: #047ab7;
}

.background-yellow {
    background-color: #fcb014;
}

.background-red {
    background-color: #c01b21;
}

/* From Bulma */
.icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    color: #fcb014;
}

.white-label-text {
    font-family: 'Audiowide',
    sans-serif;
    color: #fff;
    text-shadow: 1px 1px #000;
}

/* Keep search icon white */
.fa-search:before {
    content: "\f002";
    color: white;
}

.search-box {
    border: 2px solid #fcb014;
    background-color: #fff;
    color: #047ab7;
    border-radius: 8px;
}

.search-box::placeholder {
    color :#047ab7;
}

.yellow-btn {
    border: 2px solid #fff;
    background-color: #fcb014;
}

/* Taken from code institute Boutique Ado */
.main-logo-link {
    width: fit-content;
    padding-right: 0;
}

a.main-logo-link {
    margin-right: 0;
    padding: 8px 8px;
}

#search-mob-btn {
    background-color: #fcb014;
}

a.white-label-text.font-weight-bold.nav-link {
    font-size: 1.2rem;
    font-family: 'Audiowide',sans-serif;
    color: #fff;
    text-shadow: 1px 1px #000;
}

a.white-label-text.font-weight-bold.nav-link:hover,
a.white-label-text.font-weight-bold.nav-link:active,
a.white-label-text.font-weight-bold.nav-link:focus {
    color: #fcb014;
    font-size: larger;
    border-bottom: 2px solid #fcb014;
}

.navbar-expand-lg .navbar-nav .nav-link {
    margin-left: .5rem;
    margin-right: 1.2rem;
}

#main-nav {
    margin-right: 40px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #047ab7;
}

.dropdown-item {
    color:#fff;
}

.dropdown-menu {
    border: none;
}
/* Edit the color of the burger button */
.navbar-light .navbar-toggler-icon {
    border-radius: 8px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(252,160,20, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-light .navbar-toggler {
    border: 2px solid #c01b21;
    border-radius: 8px;
}

.nav-link {
    padding: .5rem 1rem;
}

/* Landing page stylings */
#landing-page {
    background-color: #fcb014;
    height: 80vh;
}

 #landing-page-img {
    background: url("/media/record-img.png") no-repeat center;
    background-size: contain;
    height: 75vh;
}

.cta-section {
    background-color: #fcb014;
    position: relative;
}

.centered {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.img-container {
    position: relative;
}

.cta-btn {
    background-color: #c01b21;
    box-shadow: 5px 10px;
    color: #fff;
}

.cta-btn:hover,
.cta-btn:active {
    background-color: #047ab7;
    box-shadow: 3px 5px;
    color: #fff;
}

/* Footer styling */

iframe {
    border-radius: 8px;
}

.no-dec {
    text-decoration: none;
}

.logo-accent-footer {
    font-family: 'Oswald',
        sans-serif;
    color: white;
    text-shadow: 2px 2px #fcb014;
    font-size: 1.4rem;
}

/* Products page styling */

#products-section {
    background-color: #fcb014;
}

/* found a realistic shadow effect on https://codepen.io/jsonjun/pen/vNRwWq */
.box-shadow {
    box-shadow: 0 30px 40px rgba(0, 0, 0, 0.8)
}

.box-shadow:hover,
.box-shadow:active, 
.box-shadow:focus {
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.8)
}

.box-shadow-small {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8)
}

.box-shadow-small:hover,
.box-shadow-small:active,
.box-shadow-small:focus {
    box-shadow: 0 30px 40px rgba(255, 255, 255, 0.8)
}

.heading-shadow {
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
                 0px 8px 13px rgba(0, 0, 0, 0.1),
                 0px 18px 23px rgba(0, 0, 0, 0.1);
}

.heading-shadow:hover,
.heading-shadow:active,
.heading-shadow:focus {
    text-shadow: 0px 4px 3px rgba(255, 255, 255, 0.4),
        0px 8px 13px rgba(255, 255, 255, 0.1),
        0px 18px 23px rgba(255, 255, 255, 0.1);
}

.text-shadow {
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
        0px 8px 13px rgba(0, 0, 0, 0.1),
        0px 18px 23px rgba(0, 0, 0, 0.1);
}

/* zoom on hover for images , seen on https://w3bits.com/css-image-hover-zoom/ */
.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform .5s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.5);
}

.card {
    width: 90%;
    margin:auto
}

/* found a nice hr style here https://css-tricks.com/examples/hrs/ */
hr.style1 {
    border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, #fff, #047ab4, #fff);
    background-image: -moz-linear-gradient(left, #fff, #047ab4, #fff);
    background-image: -ms-linear-gradient(left, #fff, #047ab4, #fff);
    background-image: -o-linear-gradient(left, #fff, #047ab4, #fff);
    opacity: 1;
}

hr.style2 {
    border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, #047ab4, #fff, #047ab4);
    background-image: -moz-linear-gradient(left, #047ab4, #fff, #047ab4);
    background-image: -ms-linear-gradient(left, #047ab4, #fff, #047ab4);
    background-image: -o-linear-gradient(left, #047ab4, #fff, #047ab4);
    opacity: 1;
}

/* Boutique ado back to top stylings */
.btt-button {
    height: 42px;
    width: 42px;
    position: fixed;
    bottom: 10px;
    right: 10px;
}

/* Boutique Ado curor styling */
.btt-link,
.remove-item,
.update-link {
    cursor: pointer;
    text-decoration: none;
}

.blue-button {
    background-color: #047ab4;
    color: white;
    border: 2px solid white;
}

.blue-button:hover,
.blue-button:active,
.blue-button:focus {
    background-color: #fff;
    color: #047ab4;
    border: 2px solid #047ab4;
}

.red-button {
    background-color: #c01b21;
    color: white;
    border: 2px solid #fff;
}

.red-button:hover,
.red-button:active,
.red-button:focus {
    background-color: #fff;
    color: #c01b21;
    border: 2px solid #c01b21;
}

.blue-button i:hover,
.blue-button i:active,
.blue-button i:focus {
    color: #fff;
}

.blue-button i::after {
    color: #047ab4;
}

.small-text {
        font-size: small;
}

/* Product details page stylings */

.image-container img {
    margin-top: 30px;
    box-shadow: 0 40px 50px rgba(0, 0, 0, 0.8);
    min-height: 50vh;
}

#product_details {
    min-height: 100vh;
    margin-bottom: 60px;
}

.product-details-container {
    box-shadow: 0 40px 50px rgba(0, 0, 0, 0.8);
    min-height: 50vh;
}

div.card-body {
    margin-top: 30px;
}

.blue-badge {
    color: blue;
    background-color: white;
    border: 2px solid blue;
}

/* Bag stylings */

#bag-details {
    min-height: 75vh;
}

/* Message toasts stylings */

.custom-toast {
    overflow: visible;
}

.toast-capper {
    height: 3px;
}

/* Convenience classes - colors copied from Bootstrap and idea from Boutique Ado */
.arrow-primary {
    border-bottom-color: #007bff !important;
}

.arrow-secondary {
    border-bottom-color: #6c757d !important;
}

.arrow-success {
    border-bottom-color: #28a745 !important;
}

.arrow-danger {
    border-bottom-color: #dc3545 !important;
}

.arrow-warning {
    border-bottom-color: #ffc107 !important;
}

.arrow-info {
    border-bottom-color: #17a2b8 !important;
}

.arrow-light {
    border-bottom-color: #f8f9fa !important;
}

.arrow-dark {
    border-bottom-color: #343a40 !important;
}

/* Code obtained through Boutique Ado */
.message-container {
    position: fixed;
    top: 45px;
    right: 15px;
    z-index: 99999999;
}

/* All auth styles*/

.all-auth-vh {
    min-height: 60vh;
}

.allauth-form-inner-content label:not([for='id_remember']) {
    display: none;
}

/* Styles from Boutique Ado for the Product form image section */

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0;
    border-color: #dc3545;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #dc3545;
    border-color: #dc3545;
    border-radius: 0;
}

/* Media queries */

/* Slightly larger container on xl screens */
@media (min-width: 1200px) {
    .container {
        max-width: 80%;
    }
}
/* Media query for the cta section */

@media only screen and (max-width: 700px) {
    #landing-page-img {
        height: 60vh;
    }
    .cta-btn {
        width: fit-content;
    }
    h2.logo-accent-alt {
        width: fit-content;
        font-size: 30px;
    }
    #landing-page {
        height: 65vh;
    }
}
@media only screen and (max-width: 450px) {
    .centered {
        margin: 0;
        position: absolute;
        top: 40%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

/* Media queries to make the navbar responsive on all devices */
@media only screen and (max-width:349px) {
    .header-spacer {
        padding-top: 170px;
    }

    .nav-link {
        padding: .5rem .2rem;
    }

    p.my-1 {
        font-size: small;
    }

    .small-text {
        font-size: x-small;
    }

    .min-content {
        width: fit-content;
    }

}

/* Media queries to make the navbar responsive on all devices */
@media only screen and (max-width: 402px)  and (min-width:349px) {
    .header-spacer {
        padding-top: 140px;
    }
    .nav-link {
        padding: .5rem .2rem;
    }

    p.my-1 {
        font-size: small;
    }

    .small-text {
        font-size: x-small;
    }

    .min-content {
        width: fit-content;
    }

}


@media only screen and (max-width: 586px) and (min-width: 566px) {
    .header-spacer {
        padding-top: 115px;
    }

    .nav-link {
        padding: .5rem .4rem;
    }

    p.my-1 {
        font-size: small;
    }
}


@media only screen and (max-width: 566px) and (min-width: 402px) {
    .header-spacer {
        padding-top: 115px;
    }

    .nav-link {
        padding: .5rem .4rem;
    }

    p.my-1 {
        font-size: small;
    }

    .small-text {
        font-size: x-small;
    }
}

@media only screen and (max-width: 857px) and (min-width: 767px) {
    .header-spacer {
        padding-top: 140px;
    }
    .nav-link {
        padding: .5rem .4rem;
    }
    p.my-1 {
        font-size: small;
    }
}

@media only screen and (max-width: 767px) and (min-width: 586px) {
    .header-spacer {
        padding-top: 115px;
    }

    .nav-link {
        padding: .5rem .4rem;
    }

    p.my-1 {
        font-size: small;
    }
}

@media only screen and (max-width: 991px) and (min-width: 857px) {
    .header-spacer {
        padding-top: 149px;
    }
}

@media only screen and (min-width: 991px) {
    .header-spacer {
        padding-top: 174px;
    }
}