/*
 * cart.css
 * Copyright 2021 Christian Urban <info@maio31.de>
 * Stylesheet: maio31
 * Theme: maio31
 *
 */

table, tbody, thead, tfoot, tr, td, th 
{
    border: 0px;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
}

table 
{ 
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

tbody > tr
{
	border-bottom: #fff0 solid 2rem;
}

th, td 
{
    text-align: center;
    vertical-align: middle;
    padding: auto .5rem;
}

th { padding-bottom: 4.3rem; }

td 
{
    padding: 0 0 7px 0;
}

td.name > ul > li > a, tfoot
{
	font-weight: 700;
}

tr.row_last > td { padding: 0 0 3rem 0; }

.col_0, .col_1 { text-align: left; }
.col_last { text-align: right; }

.col_0 { width: 130px; }

.col_1 { width: 40%; }

tfoot .col_0, tfoot .col_1, .col_2, .col_3, .col_4, .col_5 { width: auto; }

td > input 
{
    width: 3rem;
    text-align: center;
    padding: 0px;
}

td figure
{
    width: 100px;
    float: left;
    margin: 0 25px 0 0;
}

td img { margin-bottom: 0; }

tfoot td
{
    border-bottom: 1rem solid rgba(255,255,255,0);
}

form > .submit_container { margin-top: 1.5rem; }
.coupon { margin-top: 3rem; }

	form > .submit_container > input,
	.coupon > form > .formbody > input
	{
		width: max-content;
		padding: .7rem 1rem;
		background: rgb(77,77,77);
		color: rgb(242,242,242);
		cursor: pointer;
	}

	form > .submit_container > input:hover,
	.coupon > form > .formbody > input:hover,
	.coupon > form > .formbody > input.input
	{
		background: rgb(235,235,235);
		color: rgb(77,77,77);
	}
	
	.coupon > form > .formbody > input.input:hover { background: rgb(242,242,242); }

	form > .submit_container > input + input,
	.coupon > form > .formbody > input + input
	{ margin-left: 1rem; }
	
	.coupon > p { margin-bottom: 1.5rem !important; }
	
/*****##FORM##*****/
/*
.mod_iso_checkout 
{
	display: grid;
	grid-template-columns: repeat(3, minmax(25em, 1fr));
	column-gap: 3em;
}

	.mod_iso_checkout > form { grid-column: 2/4; }
	*/
	
	.mod_iso_checkout > form > .formbody > .orderconditions { display: inline-block; width: 100%; }
	
		.mod_iso_checkout > form > .formbody > div > p, .mod_iso_checkout > form > .formbody > div > h2 { margin-bottom: 1.9rem; }
	
			.mod_iso_checkout > form .widget-radio { width: 100%; float: none !important; }
	
			.mod_iso_checkout > form .widget + .widget { margin-top: 1.5rem; }
	
				.mod_iso_checkout > form .widget > label { display: none; }
	
				.mod_iso_checkout > form .widget > input, .mod_iso_checkout > form .widget > select 
				{ 
					padding: 2rem; 
					width: 100%; max-width: 100%; 
					background: rgb(255,255,255);
				}
				
				.mod_iso_checkout form > .formbody .widget-radio > fieldset > span.checked { color: rgb(77,77,77); }
				
					.mod_iso_checkout form > .formbody .widget-radio > fieldset > span > label { margin-bottom: 1rem; }

	ol li + li { margin-top: 1.5rem; }
/*****##FORM##*****/

//#container .mod_iso_cart { margin: -16px 0 4rem 0; }
#container .symbol.big.c235 > .cart_items
{
	width: max-content;
	height: max-content;
	background: none;
	//margin: -38px 30px;
	font-size: 2.2rem;
	font-weight: 900;
	color: rgb(245, 55, 80);
	//line-height: 0;
	grid-area: symbol;
}

@media all and (max-width: 880px)
{
	.mobile_product { display: list-item; }
	.remove, .price, tfoot .col_2 { display: none; }
	tfoot .price { display: table-cell; }
}

@media all and (max-width: 500px)
{
	.formbody > table, .review > table, .mod_iso_orderdetails > table { display: grid; }
	.mobile_product_480 { display: inline-block; }
	thead th:not(.col_0), tbody td:not(.col_0):not(.col_1) { display: none; }
	thead .col_0, tbody .col_1 { width: 100%; }
	tbody > tr > td > ul > li { width: 100%; }
	.mobile_product_480 > input { width: 5rem; }
	
	tfoot
	{
		display: grid;
		gap: 0 2rem;
		grid-template-columns: auto min-content min-content;
		grid-template-rows: repeat(4,auto);
	}
		
		tfoot > tr
		{
			grid-column: 1/4;
			display: grid;
			grid-template-columns: subgrid;
			grid-template-columns: auto min-content min-content;
			gap: 2rem;
		}
		
		.foot_0 { grid-row: 1; }
		.foot_1 { grid-row: 2; }
		.foot_2 { grid-row: 3; }
		.foot_3 { grid-row: 4; }
}

@media all and (max-width: 440px)
{
	form > .submit_container > input, .coupon > form > .formbody > input { width: 100%; }
	form > .submit_container > input + input, .coupon > form > .formbody > input + input { margin: 1rem 0 0 0; }
}