/* -------------------------------- Base */
html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;  
    min-height: 100vh;
    min-height: 100dvh; /* Will overide the 100vh on modern browsers */
    color: black;
    font-family: 'Lato';
    padding: 0;
    margin: 0;
}

hr{
    color: var(--btn-color);
}



.h2-font{
  color: var(--primary-color);
}

h4{
    color: var(--primary-color);
}

.font-1{
    color: var( --bg1-color);
}
.font-1:hover{
    color: var( --primary-color);
}


.font-2{
    color: var(--primary-color);
}

.font-3{
    color: var(--btn-color);
}

.font-dark-purple{
    color: rgb(85, 42, 107);
}


.bg1-color{
    background-color: var(--bg1-color); 
}

.bg-primary-color{
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 1px solid var(--btn-color);
}

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


.feature{
   background-color: var(--feature-color);
}

/* ----------------------------------------------Navbar */
.navbar-brand img{
    height: 120px;
    margin: 0 10px 0 10px;
}

.navbar{
    background-color: white;
    height: 90px;
    margin-bottom: 5px;
}

.nav-item{ 
    border-radius: 12px;
    margin-left: 10px;
    padding: 0 10px 0 10px;
    
}

.navbar .nav-link-border {
    border-bottom: 1px transparent solid;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

.navbar .nav-link-border:hover {
    border-color: rgb(214, 203, 222) !important;
    color: rgb(121, 110, 40) !important;
}

.nav-link{
    color: var(--primary-color);
    font-size: 16px;
    letter-spacing: 2px;
}


.dropdown-menu[data-bs-popper]{
    left: auto;
   
}

.dropdown-menu{
    border: none;
    text-align: center;
    background-color: var(--bg1-color);
    
    
}
.dropdown-menu a{
    color: var(--primary-color) !important;
    
}

a.dropdown-menu a:hover{
   color: var(--bg1-color) !important;
   
    
}

#nav-logout{
    color: var(--primary-color) !important;
}


/* -------------------------------------------------Footer */
footer {
    margin-top: auto;
    position: relative;
    color: black;
    padding-top: 20px;
    
}

.footer-social-col{
    display: flex;
    flex-direction: column;
}

.footer-svg-styling{
    height: 28px;
    fill: var(--primary-color) !important;
}

svg#svg-x.footer-svg-styling.pb-3{
    height: 38px;
   
}

.footer-contact-col {
    color: var(--primary-color);
}

#footer-contact-text{
    font-size: 34px;
    color: var(--primary-color);
    padding-bottom: 20px;
   
    
}

#footer-contact-text a{
    text-decoration: none;
    color: var(--primary-color);
}

a.footer-about-a{
    text-decoration: none;
    color: var(--primary-color);
}




/* -------------------------------------------------Products & Product_details */
.card-img-top {
    height: 260px;        
    width: 100%;
    object-fit: cover; 
}

.product-manangement-h3 {
    color: black;
    font-size: 16px;
}

input#add-cart-btn.btn.btn-styling.text-uppercase.mt-5{
    background-color: var(--primary-color) !important;
    color: white;
}

input#add-cart-btn.btn.btn-styling.text-uppercase.mt-5:hover{
    background-color: var(--bg1-color) !important;
    color: var(--primary-color);
}

a.edit-product-link{
   background-color: orange;
   color: rgb(85, 42, 107);
   font-style: italic;
   font-size: 8px;
   
}

a.edit-product-link:hover{
    background-color: var(--bg1-color);
    color: rgb(85, 42, 107);
    
    
 }
 

a.delete-product-link{
    background-color: red;
    color: white;
    font-style: italic;
    font-size: 8px;
   
}

a.delete-product-link:hover{
    background-color: var(--btn-color);
    color: red;
    
}

#products-add-cart{
    width: 90px;
    height: 40px;
    font-size: 8px;
}

/* -------------------------------------------------Join Us */


#id_first_name, #id_last_name, #id_email, #id_position {
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    padding: 8px;
    width: 100%;
}

/* -------------------------------------------------Allauth */
.auth-card input {
    
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    padding: 12px;
}

.auth-card input:focus {
    border-color: var(--feature-color);
    
}



#id_password1_helptext{
    color: var(--primary-color);
    background-color: whitesmoke;
    border: solid 1px;
    border-radius: 10px;
    margin-top: 10px;
}

.auth-card label {
    display: none;
}

#id_password1_helptext{
    padding-top: 10px;
}

.auth-card select{
    border: solid 1px var(--primary-color);

}

.auth-card input{
    background-color: white !important;
}

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

#id_sizes, #id_category, #id_has_sizes, #id_country, .form-control {
    border-radius: 5px !important;
    border: 1px solid var(--primary-color) !important;
    
}


.content-wrapper{
    max-width: 900px !important;
}

label.form-check-label{

    display: flex !important;
    margin-left: 20px;
    
}

label:not(.form-check-label) {
    display: none;
}

#label-img-pm, 
label.custom-control-label, 
label.display-labels {
    display: block;
}

#label-img-pm{
    cursor: pointer;
}

#new-image{
    display: none;
}

ul{
    padding-left: 0px;
}

a{
    text-decoration: none;
}

li {
    list-style: none;
}

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

.row{
    margin-left: 0% !important;
    margin-right: 0% !important;
}

.loging-signup{
    font-size: 18px;
    
}
.loging-signup:hover{
    font-size: 16px;
    color: var(--primary-color);
}
/* -------------------------------------------------Buttons (main) */
.btn-styling1{
    background-color: var(--primary-color);
    color: white;
    border: 1px solid var(--bg1-color);
    border-radius: 10px;
    height: 50px;
}

.btn.btn-styling1.w-100.mt-3{
    width: 50%;
}

.btn-styling1:hover, .search-btn-styling:hover{
   background-color: var(--bg1-color);
   color: var(--primary-color);
   border: solid 1px var(--primary-color);
   
}

a.btn-styling2{
     
    background-color: var(--btn-color);   
    color: var(--primary-color);
    padding-top: 15px;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    height: 50px;
  }
  
a.btn-styling2:hover{
    background-color: var(--bg1-color); 
    color: var(--primary-color); 
    border: 1px solid var(--primary-color);
  
  }

.btn-styling3{
    background-color: var(--bg1-color);
    border-radius: 10px;
    height: 50px;
    border: 1px solid var(--primary-color);
}
.btn-styling3:hover{
    background-color: var(--btn-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn {
    letter-spacing: 1px;
}

select#id_position{
    padding: 5px !important;
    color: grey;
    font-size: 18px;
    
}

.product-detail-form-control{
    border: var(--primary-color) solid 1px;
    border-radius: 5px;
}



#profile-update-form label{
    display: flex;
}

.order-history-wrapper{ 
    height: 490px;
    overflow-y: auto;
    border: 1px solid transparent;
}

.bookings-schedule-wrapper {
    max-height: 669px !important;
    overflow-y: auto !important;
    border: 1px solid transparent;
}

.order-number a{
    text-decoration: none;
    color: var(--primary-color);
}

.order-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    
}


/*------------------------------------Toast Messages*/
div .toast-header{
    background-color: whitesmoke;
    color: black;
}

.toast{
    background-color: var(--btn-color) ;
    color: white;
    font-size: 18px;
    color: var(--primary-color);
}



/*------------------------------------------Search Form*/
.search-form{
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: white;
    width: 200px;
    height: 25px;
    
    
}
.search-form input {
    background: white;
    color: black;
    padding: 0.75rem;
    width: 600px;
}

.search-btn-styling{
    border: solid 1px var(--primary-color);
    background-color: var(--primary-color);
    color: white;
    margin-left: auto;
    font-size: 12px;
    padding-bottom: 10px ;
    display: flex;
    align-items: center;      /* vertical centering */
    justify-content: center;
    padding-bottom: 4px;
}
















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

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

/* fixed top navbar only on medium and up */
@media (min-width: 992px) {
    .fixed-top-desktop-only {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }

    .header-container {
        padding-top: 164px;
    }
}

/* pad the top a bit when navbar is collapsed on mobile */
@media (max-width: 991px) {
    .header-container {
        padding-top: 116px;
    }

    body {
        height: calc(100vh - 116px);
    }
}

@media (max-width: 991px) {
    .navbar-collapse {
        position: relative;
        z-index: 9999;
        background: white;
        padding: 1rem;
    }

}