/*********/
/*GENERAL*/
/*********/

main {
	padding-bottom: 90px;
}
h1 {
	margin-bottom: 90px;
}
h2 {
	text-align: start;
}

/************/
/*Cart Items*/
/************/
.cart__item {
	display: flex;
	justify-content: space-around;
	border-top: 1px solid white;
	padding-top: 35px;
	margin-bottom: 30px;
}
.cart__item__img {
	width: 25%;
}
.cart__item__img img {
	width: 100%;
	border-radius: 25px;
}
.cart__item__content {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.cart__item__content__titlePrice {
	display: flex;
	justify-content: space-between;
}
.cart__item__content__titlePrice h2,
.cart__item__content__titlePrice p {
	margin: 0;
}
.cart__item__content__settings p {
	margin: 0;
}
.cart__item__content__settings input {
	color: var(--footer-secondary-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	border-radius: 20px;
	border: 1px solid #767676;
	text-align: center;
	text-align-last: center;
}
.cart__item__content__settings input:focus {
	outline: none;
}
.cart__item__content__settings__quantity {
	display: flex;
}
.cart__item__content__settings__quantity p {
	margin-right: 10px;
	display: flex;
}
.cart__item__content__settings__delete p {
	display: inline;
}
.cart__item__content__settings__delete p:hover {
	cursor: pointer;
	font-weight: 700;
}

/*******/
/*Price*/
/*******/
.cart__price {
	border-top: 1px solid white;
	padding-top: 35px;
}
.cart__price p {
	text-align: end;
	font-size: 22px;
}

/*******/
/*Order*/
/*******/
.cart__order {
	display: flex;
	justify-content: center;
	margin-top: 90px;
}
.cart__order__form {
	width: 50%;
}
.cart__order__form__question {
	display: flex;
	flex-direction: column;
	margin-bottom: 25px;
}
.cart__order__form__question input {
	border-radius: 13px;
	border: 0;
	height: 26px;
	margin-top: 4px;
}
.cart__order__form__question input:focus {
	outline: none;
}
.cart__order__form__question p {
	margin: 0;
	color: #fbbcbc;
	font-size: 15px;
	margin-left: 8px;
}
.cart__order__form__submit {
	display: flex;
	justify-content: center;
}
.cart__order__form__submit input {
	font-size: 22px;
	border-radius: 40px;
	border: 0;
	background-color: var(--secondary-color);
	color: white;
	padding: 18px 28px;
	cursor: pointer;
	margin-top: 40px;
}
.cart__order__form__submit input:hover {
	box-shadow: rgb(42 18 206 / 90%) 0 0 22px 6px;
}



/***************/
/*Media queries*/
/***************/

@media (max-width: 991.98px) {
	.cart__item__content__titlePrice {
		flex-direction: column;
	}

	.cart__price {
		flex-wrap: wrap;
	}

	#btnReturnAcc {
		font-size: 15px;
		padding: 10px 18px;
		margin: 7px -6px!important;
	}

	#btnViderPanier {
		font-size: 15px;
		padding: 10px 18px;
	}
}

@media (max-width: 575.98px) { 
	.cart__item {
		flex-direction: column;
		align-items: center;
	}
	.cart__item__img {
		width: 50%;
	}
	.cart__item__content {
		width: 90%;
	}
	.cart__item__content__titlePrice {
		margin-bottom: 20px;
	}
	.cart__price p {
		text-align: center;
	}
	.cart__order {
		justify-content: center;
	}
	.cart__order__form {
		width: 75%;
	}
}

/* ---------------------------------------
MESSAGE D'ERREUR - PANIER VIDE
------------------------------------------ */

h2 {
	font-size: 30px;
	text-align: center;
	font-weight: 700;
	margin: 30px 0px;
}

.btnAccueil {
	margin-top: 30px;
}

.empty_cart {
	height: 300px;
	width: auto;
}

.btnAccueil:hover {
	box-shadow: rgba(42, 18, 206, 0.9) 0 0 22px 6px;
}

.img__cart:hover {
	box-shadow: rgba(42, 18, 206, 0.9) 0 0 22px 6px;
}

/* ---------------------------------------
BTN CONTINUER ACHAT & VIDER PANIER
------------------------------------------ */
.cart__price {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#btnReturnAcc {
 	cursor: pointer;
	 font-size: 22px;
	 border-radius: 20px;
	 border: 0;
	 background-color: var(--secondary-color);
	 color: white;
	 padding: 18px 28px;
	 margin: 10px 20px;
	 width: 275px;
}

#btnReturnAcc:hover {
	box-shadow: rgba(42, 18, 206, 0.9) 0 0 22px 6px;
}

#btnViderPanier {
	cursor: pointer;
	font-size: 22px;
    border-radius: 20px;
    border: 0;
    background-color: var(--secondary-color);
    color: white;
    padding: 18px 28px;
	margin: 10px 20px;
	width: 275px;
}

#btnViderPanier:hover {
	box-shadow: rgba(42, 18, 206, 0.9) 0 0 22px 6px;
}

/***************/
/*Model Pop Up*/
/***************/

.model-container {
	transform: scale(0);
    /* visibility: hidden; */
	background-color: rgba(255, 255, 255, 0.55);
	z-index: 998;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
    justify-content: center;
    align-items: center;

}
.model{
	z-index: 999;
	transform: scale(0);
	transition: transform 0.5s ease-in;
	position: relative;
	top: 20px;
    background-color: rgb(255, 255, 255);
	box-shadow: rgba(43, 18, 206, 0.444) 0 0 22px 8px; ;
    border-radius: 15px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 430px;
    height: 270px;
	padding: 5px 25px;
}

.model__h {
color: black;
font-size: 20px;
margin: 34px 0px 20px 0px;
text-align: center;
}

.model__p {
	color: black;
	color: black;
    margin: 15px 50px 37px 50px!important;
    text-align: -webkit-center;
	font-size: 17px;
}

.btn--model {
	display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
	margin: 0px 5px;
}
.btn--model__oui {
	text-decoration: none;
	margin: 0px 10px;
	cursor: pointer;
	font-size: 17px;
    border-radius: 20px;
    border: 0;
    background-color: var(--secondary-color);
    color: white;
    padding: 15px 15px!important;
	width: 50px;
	text-align: center;
}

.btn--model__oui:hover {
	text-decoration: none;
	box-shadow: rgba(42, 18, 206, 0.9) 0 0 8px 2px;
}

.btn--model__non {
	text-decoration: none;
	margin: 0px 10px;
	cursor: pointer;
	font-size: 17px;
    border-radius: 20px;
    border: 0;
    background-color: var(--secondary-color);
    color: white;
    padding: 15px 15px!important;
	width: 50px;
	text-align: center;
}

.btn--model__non:hover {
	text-decoration: none;
	box-shadow: rgba(42, 18, 206, 0.9) 0 0 8px 2px;
}

.close {
	position: absolute;
	top: 10px;
	right: 4px;
	margin: 0px 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 21px;
    border: 0;
    background-color: var(--secondary-color);
    color: white;
    padding: 6px 10px!important;
}

.close:hover {
	box-shadow: rgba(42, 18, 206, 0.9) 0 0 8px 2px;
}