@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&family=Gelasio:wght@600&family=Hind:wght@300;400;500;600;700&display=swap');

:root {
    --polarwhite: #FAFCFE;
    --yellowgreen: #F8FFD2;
    --palegreen: #BCCEB5;
    --orange: #E7832D;
    --darkpeach: #F8B173;
    --darkgreen: #25463F;
    --bluegray: #D5E0E9;
    --peach: #FEE1C8;
    --black: #101010;
    --ruby: #9B111E;
    --font-gelasio: "Gelasio", sans-serif;
    --font-figtree: "Figtree", sans-serif;
    --font-hind: "Hind", sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    font-size: 62.5%;
    height: 100%;
    overflow-x: hidden; 
}

body {
    font-size: 1.6rem;
    max-width: 100%;
}

.overlay {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	background: white;
	z-index: -1;
}

/* from Bulma */
.icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.hidden {
    display: none !important;
}

header {
    background-color: var(--darkgreen);
    color: var(--yellowgreen);
    padding-top: 2rem;
    text-transform: uppercase;
}

.strikethrough {
    text-decoration: Line-Through;
}

.nav-link {
    color: var(--yellowgreen);
    font-family: var(--font-figtree);
    font-weight: 300;
}

#icon-bag {
    color: var(--yellowgreen);
}

.nav-link:hover {
    color: var(--polarwhite);
}

.logo-font {
    text-transform: uppercase;
    font-family: var(--font-figtree);
    font-weight: 600;
}

.text-nowrap {
    white-space: normal !important;
}

.btn {
    font-family: var(--font-figtree);
}

.default-button {
    background-color: var(--black);
    color: var(--polarwhite);
    min-width: 3rem;
}

.btn-black {
    background-color: var(--black);
    color: var(--polarwhite);
}

.default-button:hover,
.btn-black:hover,
.category-caption:hover {
    text-decoration: none;
}

.default-button:hover,
.default-button:focus,
.btn-black:hover,
.btn-black:active,
.btn-black:focus {
    background-color: var(--darkpeach);
    color: var(--black);
}

.category-caption:hover {
    opacity: 50%;
}

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

.border-black {
    border: 1px solid var(--black);
}

.btn-black {
    background: var(--black);
    color: var(--polarwhite)
}

.btn-outline-black {
    background: var(--polarwhite);
    color: var(--black) !important; 
    border: 1px solid var(--black);
}

.col-gap {
    column-gap: 1rem;
}

.row-gap{
    padding-bottom: 1rem;
}

.bag-caption {
    font-size: 1rem;
    color: var(--black) !important;
}

header i {
    color: var(--yellowgreen);
}

header i:hover {
    opacity: 50%;
}

.launch-title, .shop-collection-title, .company-reasons-title, .title {
    font-family: var(--font-gelasio);
    color: var(--darkgreen);
}

.title-row {
    padding-top: 3%;
    padding-bottom: 2%;
}

.launch-01, .launch-02, .launch-03 {
    padding-top: 3%;
    padding-bottom: 3%;
}

.launch-01 {
    background-color: var(--bluegray);
}

.launch-02 {
    background-color: var(--polarwhite);
}

.launch-03 {
    background-color: var(--peach);
    color: var(--darkgreen);
}

#section-why-hygge-icons h3 {
    font-family: var(--font-gelasio);
}

#section-why-hygge-icons p {
    font-family: var(--font-figtree);
}

#section-why-hygge-icons i {
    color: var(--darkgreen) !important; 
    font-size: 2.5rem;
    padding-bottom: 1rem;
}

#section-why-hygge-icons {
    font-size: 1.6rem;
}

.shop-collection-title ,#company-reasons-title {
    padding-bottom: 3%;
}

#banner {
    background-color: var(--black) !important;
    color: var(--darkpeach) !important;
    width: 100vw;
}

#icon-user, #icon-bag {
    font-size: 1.6em;
}

#icon-search {
    color: var(--polarwhite);
}

.category-img {
    height: 20vh;
    width: 25vh;
}

.category-caption {
    font-family: var(--font-figtree);
    font-weight: 200;
    font-size: 1.6rem;
    color: var(--black);
    white-space: nowrap;
}

#sort-dropdown {
    background-color: var(--polarwhite);
    color: var(--black);
    font-size: 4rem;
}

#sort-selector {
    font-size: 1.6rem !important;
}

a.category-badge > span.badge:hover {
    background: var(--black) !important;
    color: var(--polarwhite) !important;
}

.btt-button {
    position: fixed;
    height: 4rem;
    width: 4rem;
    bottom: 1.6rem;
    right: 1.6rem;
}

.btt-link, 
.update-link,
.remove-item {
    cursor: pointer;
}

#carouselIndicators {
    color: var(--darkgreen);
}

/* ------------------------------- Bootstrap Toasts */

.message-container {
    position: fixed;
    top: 6rem;
    right: 5rem;
    z-index: 99999999999;
}

.custom-toast {
    overflow: visible;
}

.toast-capper {
    height: 0.3rem;
}

.bag-notification-wrapper {
    height: 15%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Allauth form formatting */

.allauth-form-inner-content p {
    margin-top: 1.5rem; /* mt-4 */
    color: var(--bluegray); /* text-secondary */
}

.allauth-form-inner-content input {
    border-color: var(--black);
    border-radius: 0;
}

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

.allauth-form-inner-content input::placeholder {
    color: #aab7c4;
}

.allauth-form-inner-content button,
.allauth-form-inner-content input[type='submit'] {
	/* btn */
	display: inline-block;
    font-weight: 400;
    color: var(--polarwhite);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--black);
    border: 1px solid var(--black);
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0;

    /* standard bootstrap btn transitions */
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.allauth-form-inner-content button:hover,
.allauth-form-inner-content input[type='submit']:hover {	
	color: var(--polarwhite);
    background-color: var(--black);
    border-color: var(--black);
}

.allauth-form-inner-content a {
	color: var(--darkgreen); /* text-info */
}

#page-login, #page-logout, #bag-empty-section{
    padding-top: 10%;
    padding-bottom: 10%;
}

#bag-page {
    padding-top: 5%;
    padding-bottom: 12%;
}

/* Product Form */

.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: var(--ruby);
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--ruby);
    border-color: var(--ruby);
    border-radius: 0;
}

footer, #footer {
    background-color: var(--bluegray);
    font-family: var(--font-figtree);
}

.product-name {
    font-size: 3rem;
}

.product-price{
    font-size: 2rem;
}

#products-page img {
    height: 25vh;
    width: 15vw;
}


/* -------------------------------- Media Queries */

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

    #page-logout{
        padding-bottom: 20%;
    }

    #profile-update-form {
        padding-bottom: 30%;
    }

}

/* L screens */
@media (min-width: 992px) {

    .col-l-gap {
        padding-left: 5rem;
    }

    .col-r-gap {
        padding-right: 5rem;
    }

    .row-gap {
        padding-bottom: 2rem;
    }

    #search-bar {
        padding-left: 20%;
        width: 130%;
    }

    .shop-collection-title {
        padding-bottom: 4rem;
    }

    #section-why-hygge-icons i {
        font-size: 5rem;
    }

    #section-why-hygge-icons h3 {
        padding-top: 10%;
    }

    #banner {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #page-register {
        padding-top: 5%;
    }

    #page-register, #products-page {
        padding-bottom: 10%;
    }

    #product-info-page, #page-add-product, #page-edit-product, #page-profile, #checkout-page, #page-order-confirmation {
        padding-top: 5%;
        padding-bottom: 5%;
    }

    #delivery-banner {
        padding-bottom: 5%;
    }

    #page-login {
        padding-bottom: 20%;
    }

    .title {
        font-size: 3rem;
        padding-bottom: 1rem;
    }

    #product-sort-filter-row {
        padding-bottom: 4rem;
    }

    #carouselIndicators {
        padding-top: 5%;
    }
    
}

/* S screens */
@media (max-width: 428px) { 
    .category-badge-section {
        padding: 2rem;
    }

    #bag-page p {
        font-size: 2rem;
    }
}