/* ========== Font imports ========== */
@import url('https://fonts.cdnfonts.com/css/br-sonoma');

/* ========== Global settings ========== */
*{ margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: var(--black); display: block; }
ul { list-style: none; }
img { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }
body {
    font-family: 'BR Sonoma', sans-serif;
    color: var(--black);
    background-color: var(--white);
}

/* ========== Variable settings ========== */
:root {
    /* Color constants */
    --black: #030303;
    --grey: #c9cfcf;
    --darkGrey: #494949;
    --white: #E5E6E6;
    --darkBlue: #1E73B6;
    --lightBlue: #B7D7DE;

    /* Size constants */
    --navbarHeight: 80px;
    --navbarPadding: 30px;
    --footerHeight: 270px;
}


/* ========== Font/Text styling starts here ========== */

/* General font */
.font_general {
    font-family: 'BR Sonoma', sans-serif;
}

/* Emphasized font */
@font-face {
    font-family: 'Big';
    src: url('../fonts/Myriad\ Pro\ SemiExtended.otf'); 
}
.font_emphasize {
    font-family: 'Big', sans-serif; 
}

/* Title font */
/* .font_title {

} */

/* Text colors */
.text-bright {
    color: var(--white);
}

.text-bright a {
    color: var(--white);
}

.text-dark {
    color: var(--black);
}

.text-dark a {
    color: var(--black);
}
/* ========== Font/Text styling ends here ========== */


/* ========== Shared elements ========== */
.wrap {
    width: 100%;
    padding-top: var(--navbarHeight);
    min-height: 100vh;
}

.section {
    min-height: calc(100vh - var(--footerHeight) - var(--navbarHeight));
    display: flex;
}

.title {
    font-size: 40px;
}

input,
select {
    font-family: 'BR Sonoma', sans-serif;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--white);
    border-top-color: var(--darkBlue); /* adjust to your theme */
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.feedback {
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* ========== Navbar styling starts here ========== */
.navbar {
    width: 100%;
    height: var(--navbarHeight);
    /* background-color: var(--black); */
    background-color: rgba(3, 3, 3, 0.4);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    z-index: 99;
    transition-duration: 0.3s;
}

.navbar:hover {
    background-color: var(--darkGrey);
}

.navbar a {
    transition-duration: 0.3s;
}

.logo {
    position: absolute;
    left: var(--navbarPadding);
}

.logo_img_wrap {
    height: var(--navbarHeight);
    padding: 15px 0;
}

.navbar_elements_wrap {
    display: flex;
    gap: 80px;
    position: relative;
    transition-duration: 0.5s;
}

.navbar_top_element {
    float: left;
    height: 100%;
    font-size: 18px;
    line-height: var(--navbarHeight);
    position: relative;
    cursor: pointer;
}

.navbar_border {
    width: 0;
    height: 3px;
    background-color: var(--darkBlue);
    position: absolute;
    top: 60px;
    z-index: 9;
    transition-duration: 0.3s;
}

.navbar_sub_element {
    max-height: 0;
    padding: 0 20px;
    background-color: var(--darkGrey);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    font-size: 16px;
    text-align: left;
    position: absolute;
    top: 100%; 
    left: 0;
    overflow: hidden;
    transition-duration: 0.3s;
}

.navbar_top_element:hover >a {
    color: var(--darkBlue);
}

.navbar_top_element:hover .navbar_sub_element {
    max-height: 500px;
    height: max-content;
}

.navbar_top_element:hover .navbar_border {
    width: 140%;
}

.navbar_top_element:hover >label>a {
    color: var(--darkBlue);
}

.navbar_sub_element {
    width: max-content;
    line-height: 50px;
}

.navbar_sub_element li:hover >a {
    color: var(--darkBlue);
}

.navbar_side_elements {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: var(--navbarPadding);
}

.navbar_side_element {
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
    cursor: pointer;
}

.navbar_side_element a {
    border-radius: 1000px;
    border: 2px solid var(--white);
    padding: 10px 20px;
}

.navbar_side_element:hover >a {
    background-color: var(--lightBlue);
    border: 2px solid var(--lightBlue);
    color: var(--black);
}

/* Navbar mobile view */
.navbar_mobile_toggle {
    width: 30px;
    height: var(--navbarHeight);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: var(--navbarPadding);
    display: none;
}

.navbar_toggle_icon {
    width: 30px;
    height: 30px;
    background: url(../icons/menu.png) center / cover no-repeat;
    transition-duration: 0.3s;
    cursor: pointer;
}

.navbar_mobile_open_category p {
    display: none;
}
/* ========== Navbar styling ends here ========== */


/* ========== Footer styling starts here ========== */
.footer {
    height: var(--footerHeight);
    padding: 0 100px;
    background-color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--grey);
}

.footer_con {
    height: 100%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}

.footer_icons {
    width: 40px;
}

.footer_contact_info {
    line-height: 24px;
}

.footer_address {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer_address_icon {
    width: 30px;
}

.footer_contact {
    margin-top: 15px;
    line-height: 19px;
    display: flex;
}

.footer_contact li:nth-child(2) {
    padding: 0 10px;
    margin-left: 10px;
    border-left: 1px solid var(--grey);
}

.footer_copyright {
    color: var(--white);
    font-weight: 700;
    line-height: 20px;
}

.footer_socialMedia {
    display: flex;
    justify-content: flex-end;
}

.footer_socialMedia li {
    margin-left: 20px;
    transition-duration: 0.3s;
}

.footer_socialMedia li:hover {
    transform: scale(1.1);
}
/* ========== Footer styling ends here ========== */


/* ========== Media query 1050 start here ========== */
@media screen and (max-width: 1050px) {

    :root {
        --navbarPadding: 20px;
        --footerHeight: 240px;
    }

    /* Navbar styling starts here ========== */
    .logo_img_wrap {
        padding: 20px 0;
    }

    .navbar_elements_wrap {
        gap: 60px;
    }

    .navbar_top_element,
    .navbar_side_element {
        font-size: 16px;
    }

    /* Footer styling starts here ========== */
    .footer {
        /* padding: 40px 50px; */
        padding: 0 50px;
        justify-content: normal;
    }

    .footer_con:nth-child(1) {
        font-size: 12px;
    }

    .footer_con:nth-child(2) {
        height: min-content;
        font-size: 14px;
    }

    .footer_contact {
        margin-top: 10px;
    }

    .footer_socialMedia li {
        margin-left: 15px;
    }

    .footer_icons {
        width: 35px;
        height: 35px;
    }
    /* Footer styling ends here ========== */
}

/* ========== Media query 880 start here ========== */
@media screen and (max-width: 880px) {
    :root {
        --navbarHeight: 70px;
    }

    /* Navbar styling starts here ========== */
    .logo_img_wrap {
        padding: 18px 0;
    }

    .navbar_top_element,
    .navbar_side_element {
        font-size: 14px;
    }

    .navbar_side_element a {
        padding: 7px 15px;
    }
}

/* ========== Media query 750 start here ========== */
/* This is where navbar becomes a hamburger menu */
@media screen and (max-width: 750px) {

    /* Navbar styling starts here ========== */
    .navbar {
        padding: 0 var(--navbarPadding);
        flex-direction: column;
        justify-content: unset;
        align-items: flex-end;
        overflow: visible;
    }

    .navbar_elements_wrap,
    .navbar_top_element,
    .navbar_sub_element,
    .navbar_side_elements,
    .navbar_border {
        position: unset;
    }

    .logo {
        margin-bottom: 20px;
    }

    .navbar_mobile_toggle {
        display: flex;
    }

    .logo_img_wrap {
        padding: 15px 0;
    }

    .navbar_contents_wrap {
        max-width: 500px;
        width: max-content;
        max-height: 100000px;
        height: 100vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        padding-right: 60px;
        background-color: var(--darkGrey);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 100%;
        right: -1000px;
        overflow: hidden;
        z-index: 99;
        transition-duration: 0.4s;
    }

    .navbar_elements_wrap {
        padding-left: 10px;
        flex-direction: column;
        justify-content: space-around;
        gap: 0;
        top: 100%;
    }

    .navbar_top_element {
        line-height: unset;
        padding-top: 20px;
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

    .navbar_top_element:first-child {
        margin-bottom: 10px;
    }

    .navbar_top_element,
    .navbar_side_element {
        font-size: 18px;
    }

    .navbar_top_element:hover .navbar_border {
        width: 100%;
    }
    
    .navbar_top_element:nth-last-child(n+2):hover .navbar_sub_element {
        width: 100%;
        margin-bottom: 40px;
    }

    .navbar_sub_element {
        max-height: 0;
        padding: 0;
        background-color: unset;
        transition-duration: 0.7s;
        box-shadow: unset;
    }

    .navbar_side_elements {
        height: unset;
        margin-top: 40px;
        margin-left: 20px;
    }

    .navbar_side_element a {
        padding: 10px 30px;
    }

    .navbar:has(#navbar_mobile_toggle:checked) {
        background-color: var(--darkGrey);
    }

    .navbar:has(#navbar_mobile_toggle:checked) .navbar_contents_wrap {
        right: 0;
    }
    
    .navbar:has(#navbar_mobile_toggle:checked) .navbar_toggle_icon{
        background: url(../icons/menu_close.png) center / cover no-repeat;
    }
}

/* ========== Media query 570 start here ========== */
@media screen and (max-width: 570px) {

    :root {
        --footerHeight: 290px;
    }

    /* Footer styling starts here ========== */
    .footer_wrap {
        width: 346px;
        height: max-content;
        flex-direction: column-reverse;
        align-items: normal;
    }

    .footer_socialMedia {
        justify-content: flex-start;
        gap: 15px;
    }

    .footer_con:nth-child(2) {
        margin-bottom: 30px;
    }

    .footer_socialMedia li {
        margin: 0;
    }

    .footer_icons {
        width: 30px;
        height: 30px;
    }
    /* Footer styling ends here ========== */
}

/* ========== Media query 450 start here ========== */
/* This is where navbar takes up full width AND height */
@media screen and (max-width: 450px) {

    /* Navbar styling starts here ========== */
    .navbar {
        padding: 0 var(--navbarPadding);
        flex-direction: column;
        justify-content: unset;
        align-items: flex-start;
        overflow: hidden;
    }

    .logo {
        position: unset;
    }

    .navbar_contents_wrap {
        all: unset;
    }

    .navbar_contents_wrap,
    .navbar_elements_wrap {
        width: 100%;
    }

    .navbar_elements_wrap {
        gap: 15px;
    }

    .navbar_top_element {
        width: 100%;
    }

    .navbar_top_element:hover .navbar_border {
        width: 120px;
    }

    .navbar_sub_element a {
        color: var(--grey);
    }

    .navbar_sub_element li:hover >a {
        color: var(--darkBlue);
    }

    .navbar_side_elements {
        height: unset;
        margin-top: 40px;
        margin-left: 0;
        justify-content: unset;
    }
 
    .navbar:has(#navbar_mobile_toggle:checked) {
        overflow-y: scroll;
        padding-bottom: 50px;
        background-color: var(--darkGrey);
    }

    .navbar_top_element:hover .navbar_sub_element {
        max-height: 0;
    }

    .navbar_top_element:nth-last-child(n+2):hover .navbar_sub_element {
        width: 100%;
        margin-bottom: 0;
    }

    .navbar_mobile_open_category {
        display: flex;
        align-items: flex-end;
        gap: 30px;
    }

    .navbar_mobile_open_category p {
        width: 20px;
        height: 20px;
        background: url(../icons/arrow_down.png) center / cover no-repeat;
        display: block;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .navbar:has(#navbar_mobile_toggle:checked) {
        height: 100vh;
        max-height: 100000px;
    }

    .navbar:has(#navbar_mobile_toggle:checked) .navbar_toggle_icon{
        background: url(../icons/menu_close.png) center / cover no-repeat;
    }

    #navbar_category_products:checked~.navbar_sub_element {
        max-height: 500px;
    }

    #navbar_category_products:checked~.navbar_mobile_open_category>p {
        transform: rotate(-180deg);
    }
    /* Navbar styling ends here ========== */

    .footer {
        padding: 0 30px;
    }
}