@import url('shopping-steps.css');

.cart-page-content .main-content {
	padding: 0 0 2rem;
}

#page-content
{
	background-color: #eaeded;
	margin-top: 0;
	min-height: calc(100vh - 60px);
}

.main-content
{
	padding: 2rem;
}

.white-box
{
	background-color: #fff;
}

#cart-container
{
	max-width: 1500px;
	margin: auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 15px;
}

#cart-section-container
{
	flex: 1;
	width: 95%;
	padding: 0 0 0 15px;
}

#cart-box,
#saved-for-later-box,
#estimates-box
{
	padding: 15px 15px 30px;
}

#saved-for-later-box
{
	margin-bottom: 15px;
}

#saved-for-later-empty,
#estimates-empty
{
	text-align: center;
}

#cart-header,
#saved-for-later-header,
#estimates-header
{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 1px solid #e6e6e6;
	padding: 15px 0 5px;
}

#saved-for-later-header,
#estimates-header
{
	padding: 0 0 10px;
}

#saved-for-later-header h2,
#estimates-header h2
{
	font-size: 20px;
}

#estimates-header h2
{
	color: var(--risalto-red-light);
}

#saved-for-later-header img,
#estimates-header img
{
	max-width: 25px;
	margin-right: 62.45px;
}

.after-cart-hr
{
	width: 100%;
	height: 2px;
	background-color: #fff;
	border: none;
	margin: 15px 0;
}

.header-title
{
	margin: 0;
	font-weight: 500;
	line-height: 1;
}

#cart-header h1
{
	font-size: 2.4rem;
}

.anchor-container
{
	display: flex;
	gap: 2rem;
	font-family: "Rajdhani", sans-serif;
	font-weight: 600;
}

.anchor-container a
{
	color: var(--risalto-red-light);
	line-height: 1;
	margin-bottom: 5px;
}

/* grid ordering BEGIN */
.cart-row-container
{
	width: 100%;
	border-bottom: 1px solid #e6e6e6;
	padding: 1rem 0;
	display: grid;
	gap: 0.5rem;
	align-items: center;
	grid-template-columns: 95px auto 200px;
}

.product-img
{
	width: 100%;
	grid-column: 1;
	grid-row: 1 / span 3;
}

.product-title
{
	margin-left: 8px;
	grid-column: 2;
	grid-row: 1;
	font-weight: 500;
	font-size: 1.1rem;
}

.product-info
{
	margin-left: 10px;
	grid-column: 2;
	grid-row: 2;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.product-info.product-info-estimate-done
{
	color: #4d902e;
}

.product-info img
{
	width: 20px;
}

.product-buttons
{
	display: flex;
	gap: 0.6rem;
	margin-left: 8px;
	grid-column: 2 / span 1;
	grid-row: 3;
	align-self: end;
	flex-wrap: wrap;
}

.price-quantity-container
{
	grid-column: 3;
	grid-row: 1 / span 3;

	display: flex;
	flex-direction: column;
}

.product-quantity
{
	margin: 8px 0 10px;
}

#estimates-box .cart-row-container
{
	grid-template-columns: 95px auto 260px;
}

.product-contact-email
{
	align-self: flex-start;
	grid-column: 3;
	grid-row: 3;
}
/* grid ordering END */

.product-total-price,
.product-quantity,
.product-unit-price,
.product-contact-email
{
	font-size: 0.9rem;
	text-align: right;
}

.product-quantity
{
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-right: -3px;
}

.product-remove-btn
{
	background-color: var(--risalto-beige-light);
	border: none;
	padding: 0;
	width: 45px;
	height: 40px;
	justify-content: center;
}

button img
{
	height: 20px;
	fill: var(--risalto-grey);
}

.product-buttons button,
.product-buttons a
{
	font-size: 0.8rem;
	padding: 0.3rem 0.7rem;
	white-space: nowrap;
}

.coupon button{
	font-size: 0.9rem;
	padding: 0.4rem 1rem;
}

.quantity-widget
{
	width: auto;
}

.quantity-widget span,
.quantity-widget form
{
	width: 40px;
	height: 40px;
}

.quantity-widget span
{
	font-size: 0.9rem;
}

#mini-box-total
{
	margin-right: 15px;
	position: sticky;
	top: 75px;
	right: 0;
}

#mini-box-total form
{
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	width: 310px;
	box-sizing: border-box;
}

#proceed
{
	width: 100%;
	justify-content: center;
	font-size: 1.3rem;
	padding: 0.75rem 1rem;
}

.coupon
{
	gap: 10px;
}

.coupon input{
	width: 100%;
	border: 0.5px solid #ccc;
	border-radius: 5px;
	padding: 0.4rem 1rem;
	color: #868686;
}

.total-cart-price,
.shipment,
.coupon,
button,
.discount,
.final-total-price
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.total-cart-price span
{
	white-space: nowrap;
}

.quantity-widget button
{
	justify-content: center;
	color: buttontext;
}

.quantity-widget button:disabled
{
	color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
}

.final-total-price strong
{
	color: var(--risalto-red-light);
}

button svg
{
	fill: var(--risalto-grey);
}

@media (max-width: 1100px)
{
	#cart-container
	{
		flex-direction: column;
		align-items: center;
	}

	#internal-cart-container
	{
		width: 100%;
		max-width: 700px;
	}

	#cart-section-container
	{
		padding: 0;
		width: calc(100% - 60px);
	}

	#cart-box, 
	#saved-for-later-box, 
	#estimates-box
	{
		padding: 10px 15px 20px;
	}

	#cart-header h1
	{
		font-size: 36px;
	}

	#mini-box-total
	{
		margin: 0;
		padding: 5px;
		width: calc(100% - 10px);
		background-color: #d1d1d1;
		outline: 1px solid #d1d1d1;
		top: 60px;
	}

	#mini-box-total form
	{
		width: 100%;
		gap: 0.5rem;
		padding: 10px;
	}

	#mini-box-total form > div
	{
		padding: 0 5px;
	}

	.coupon
	{
		justify-content: flex-start;
    display: flex;
    gap: 20px;
	}
}

@media (max-width: 900px)
{
	#cart-section-container
	{
		width: calc(100% - 30px);
	}
}

@media (max-width: 730px)
{
	#cart-header,
	#saved-for-later-header,
	#estimates-header
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 0;
	}

	#cart-header h1
	{
		font-size: 34px;
	}

	#saved-for-later-header,
	#estimates-header
	{
		align-items: center;
	}

	#saved-for-later-header img,
	#estimates-header img
	{
		margin-right: 0;
	}

	#cart-box
	{
		margin-bottom: 25px;
	}

	#cart-box, 
	#saved-for-later-box, 
	#estimates-box {
		padding: 10px 15px 15px;
	}

	#cart-section-container
	{
		width: calc(100% - 60px);
	}

	#mini-box-total form > div {
		padding: 0;
	}

	.cart-row-container
	{
    grid-template-columns: 95px 1fr 200px;
	}

	.product-buttons
	{
		grid-row: 4;
		grid-column: 1 / span 3;
		margin-left: 0;
	}

	.product-total-price, .product-unit-price, .product-quantity
	{
		padding: 0 0 0 5px;
	}

	#estimates-box .cart-row-container
	{
		grid-template-columns: 95px auto 200px;
	}
	
	.product-contact-email
	{
		align-self: flex-start;
		grid-column: 2 / span 2;
		grid-column: 1 / span 3;
		grid-row: 4;
		text-align: left;
		margin-top: 8px;
	}
	#estimates-box .product-buttons
	{
		grid-column: 2 / span 2;
		grid-row: 3;
		padding: 0 5px 0 10px;
	}
}

@media (max-width: 600px)
{
	.product-img
	{
		grid-row: 3
	}

	.product-title
	{
		grid-column: 1 / span 3;
		align-self: flex-start;
		margin-left: 0;
	}

	.product-info
	{
		grid-column: 1 / span 3;
		align-self: flex-start;
		margin-left: 0;
	}

	.product-buttons
	{
		grid-row: 4;
	}

	.price-quantity-container
	{
		grid-row: 3;
	}

	.cart-row-container,
	#estimates-box .cart-row-container
	{
		grid-template-columns: 95px repeat(2, 1fr);
	}

	#estimates-box .product-img
	{
		grid-row: 3 / span 2;
	}

	#estimates-box .product-unit-price
	{
		grid-row: 3;
		grid-column: 2 / span 2;
		text-align: left;
		align-self: end;
	}

	#estimates-box .product-buttons
	{
		grid-row: 4;
		grid-column: 2 / span 2;
	}

	#estimates-box .product-contact-email
	{
		grid-row: 5;
	}
	
	#estimates-box .product-unit-price,
	#estimates-box .product-buttons
	{
		padding: 0 5px 0 5px;
	}
}

@media (max-width: 500px)
{
	#cart-section-container
	{
		width: calc(100% - 30px);
	}

	#cart-header h1
	{
		font-size: 32px;
	}
}

@media (max-width: 400px)
{
	.anchor-container
	{
		flex-direction: column;
		gap: 5px;
	}

	#mini-box-total form > div
	{
		font-size: 0.9rem;
	}
	.coupon
	{
		gap: 5px;
	}

	.coupon input
	{
		padding: 0.4rem 0.5rem;
	}
	
	.coupon button
	{
		font-size: 0.85rem;
		padding: 0.4rem 0.6rem;
	}
}

@media (max-width: 375px)
{
	#mini-box-total form
	{
		gap: 0.3rem;
	}
}

@media (max-width: 350px)
{
	.cart-row-container,
	#estimates-box .cart-row-container
	{
		grid-template-columns: 80px repeat(2, 1fr);
	}
}

@media (max-width: 330px)
{
	.cart-row-container,
	#estimates-box .cart-row-container
	{
		grid-template-columns: 70px repeat(2, 1fr);
	}
}

/* MODAL */
.cart-view-change-product
{
	padding: 15px 20px;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

#product-modal-buttons button,
#product-modal-buttons a
{
	font-size: 0.9rem;
	padding: 0.3rem 1.2rem;
}

#modal .cart-view-change-product section
{
	display: flex;
	flex-direction: row;
	gap: 15px;
}

.cart-view-change-product .modal-number-container
{
	font-size: 60px;
	line-height: 1;
	color: var(--risalto-red-dark);
}

.cart-view-change-product .modal-property-values-container
{
	margin-top: 5px;
}

#modal-pane .view-change-value
{
	margin-left: 0;
	font-size: 0.9rem;
}

#modal-pane .view-change-value span
{
	color: var(--risalto-grey-light);
	font-size: 0.9rem;
}

#modal-pane .view-change-value span.file-name-span,
#modal-pane .view-change-value span.file-name-span a
{
	color: var(--risalto-red-light);
	font-size: 0.9rem;
	text-decoration: underline;
}

#modal section
{
	gap: 0;
	margin-bottom: 0;
}

#modal-pane section.base-graphics-section > div .view-change-value,
#modal-pane section.side-printed-section > div .view-change-value,
#modal-pane section.graphics-section > div .view-change-value
{
	margin-top: 15px;
	margin-bottom: 15px;
}

#modal-pane section.base-graphics-section > div .view-change-value:first-of-type,
#modal-pane section.side-printed-section > div .view-change-value:first-of-type,
#modal-pane section.graphics-section > div .view-change-value:first-of-type
{
	margin-top: 0;
}

#modal-pane section.base-graphics-section > div .view-change-value:last-of-type,
#modal-pane section.side-printed-section > div .view-change-value:last-of-type,
#modal-pane section.graphics-section > div .view-change-value:last-of-type
{
	margin-bottom: 0;
}

#modal-pane .view-change-sides-label
{
	color: var(--risalto-grey-dark);
	font-weight: 500;
}

.view-change-value br
{
	display: block;
}

@media (min-width: 450px)
{
	#modal-pane .view-change-value
	{
		margin-left: 20px;
	}
}

@media (min-width: 768px)
{
	.view-change-value br
	{
		display: none;
	}
}