/* Variables */

:root{

	--main-color: #B40F13;
	--accent-color: #000000;

	--text-color: #737373;

	--danger-color: #EB052A;

}

/* Default Behavior */

body{height: 100vh; display: grid; grid-template-rows: max-content minmax(0, 1fr) max-content; font-size: 0.875rem;}
body, html{margin: 0; font-family: 'Inter', sans-serif; color: var(--text-color);}

h3{font-size: 1.5rem; color: var(--main-color);}

a{color: var(--main-color); text-decoration: underline; font-weight: 700;}

img,
svg{max-width: 100%; vertical-align: bottom;}

button{appearance: none; user-select: none;}

dialog:not([open]){opacity: 0; pointer-events: none; transition: all .3s ease;}

*{box-sizing: border-box; margin: 0; border: 0; background-color: initial;}
*::-webkit-scrollbar{width: 10px; height: 10px;}
*::-webkit-scrollbar-thumb{background-color: var(--main-color); border: 1px solid #fff; border-width: 0 1px;}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto;}

:where(.row, .grid, .column){display: flex; gap: inherit;}
:where(.column){flex-direction: column;}
:where(.grid){display: grid;}

.grid.layered > *, .grid.layered:before, .grid.layered:after{grid-row: 1; grid-column: 1;}

button.linklike{appearance: none; cursor: pointer; font-size: 1rem; font-weight: 700; text-decoration: underline;}
:is(button, a).danger{color: var(--danger-color);}

.btn{width: fit-content; padding: 10px 16px; background-color: var(--accent-color); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; border-radius: 5px; text-shadow: initial; text-decoration: none;}
.btn.hollow{outline: 2px solid var(--main-color); background-color: initial; color: var(--main-color); outline-offset: -2px;}
.btn.alternate{background-color: var(--main-color);}
.btn.alternate.mute{background: rgba(0, 155, 165, 0.30); color: var(--main-color);}

.labeledInput{gap: 8px;}
.labeledInput label{color: #52525C;}
.labeledInput :is(input, select, textarea){padding: 12px 16px; border-radius: 8px; border: 2px solid #D9D9D9; appearance: none;}

.selectGrid:after{content: url("./assets/svgs/chevron-down.svg"); pointer-events: none; margin: auto 16px auto auto;}
.selectGrid *::-webkit-calendar-picker-indicator{display: none !important;}

article.product{grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 36px; justify-items: center; padding: 24px; align-items: center; justify-content: space-between; justify-items: center; box-shadow: 4px 4px 4px 0px rgba(38, 95, 99, 0.13);}
article.product strong{font-size: 1rem; color: var(--main-color);}
/*article.product header{gap: 7px 12px; align-items: center;}*/
article.product img{width: 100px; aspect-ratio: 1; background-color: #D9D9D9; border-radius: 12px;}
article.product h5{font-size: 1rem; color: var(--main-color);}
article.product b{margin-top: 9px;}
article.product > .column{align-items: center;}
article.product .danger{color: var(--danger-color);}
article.product .costs{align-items: center; gap: 8px;}
article.product .qtd{gap: 0; border: 2px solid var(--text-color); border-radius: 8px; width: fit-content;}
article.product .qtd button{width: 16px; font-weight: bold; font-size: 1rem; color: var(--text-color); cursor: pointer;}
article.product .qtd input{width: 32px; aspect-ratio: 1; padding: 7px 4px 8px; border: solid var(--text-color); border-width: 0 2px; text-align: center;}
article.product .qtd input::-webkit-inner-spin-button{display: none;}

article.product.heading{padding: 12px 24px; color: var(--main-color); font-weight: 700; box-shadow: initial; border-bottom: 2px solid;}

.tableWrapper{overflow: auto; white-space: nowrap;}
.tableWrapper table{border-collapse: collapse; text-align: center; width: 100%;}
.tableWrapper table :is(th, td){padding: 10px;}
.tableWrapper table thead{border-bottom: 2px solid; color: var(--accent-color);}
.tableWrapper table tbody tr:nth-child(2n - 1){background-color: #dceeef;}

/* Header */

header#mainHeader{background-color: var(--main-color); padding: 24px 5vh; justify-content: space-between; align-items: center; border-bottom: 5px solid var(--accent-color);}
header#mainHeader .logo{padding: 12px 24px; background-color: #fff; gap: 48px; border-radius: 20px; align-items: center;}
header#mainHeader .actions{padding: 12px 24px; gap: 12px; color: var(--main-color); background-color: #fff; border-radius: 12px; font-weight: 700;}
header#mainHeader .logo img { width: 110px }
header#mainHeader .column{gap: 4px;}
header#mainHeader .column a.cartLink{color: #fff; text-align: center;margin-top: 10px;}

/* Main */

main{padding: 30px 5vw; overflow: auto;}

/* Footer */

footer#mainFooter{padding: 12px 0; text-align: center; background-color: #115F64; color: #fff; font-size: 0.625rem;}
footer#mainFooter a{color: #fff;}

/* Search Form */

form#searchForm{width: 410px; max-width: 100%; padding: 24px; gap: 24px; border-radius: 12px; background: #FFF; box-shadow: 7px 24px 40px 0px rgba(23, 106, 112, 0.15);}
form#searchForm.row{width: 100%; align-items: center; justify-content: space-between;}
form#searchForm.row a{margin-left: 0;}
form#searchForm.row .formItems{flex-direction: row; align-items: flex-end; gap: 8px;}
form#searchForm h5{font-size: 1.5rem; color: var(--main-color);}
form#searchForm a{margin-left: auto;}

/* Breadcrumb */

section#breadcrumb{align-items: center; gap: 24px;}
section#breadcrumb a{text-decoration: none; color: var(--text-color); font-weight: 400;}
section#breadcrumb p{color: var(--main-color);}

/* Home */

main:is(#index, #loja, #consultar-pedidos) form#searchForm{margin: auto;}

/* Comprar */

main#comprar{gap: 48px;}
main#comprar dialog{gap: 24px; padding: 24px; background-color: #fff; align-items: center; box-shadow: 7px 24px 40px 0px rgba(23, 106, 112, 0.15); border-radius: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
main#comprar dialog::backdrop{background-color: rgba(0 0 0 / 50%);}
main#comprar dialog span{font-weight: 500;}
main#comprar dialog h5{font-size: 1.5rem; color: var(--main-color);}
main#comprar dialog button{color: var(--main-color);}
main#comprar .finalize{margin-left: auto;}
main#comprar section#bookList{gap: 12px;}

/* Consulta */

main#consulta{gap: 24px;}
main#consulta section#requests > article{padding: 24px; border-radius: 12px; box-shadow: 4px 4px 4px 0px rgba(38, 95, 99, 0.13);}
main#consulta section#requests > article p.date{padding: 12px; font-size: 0.875rem; font-weight: 700; border-bottom: 2px solid rgba(115, 115, 115, 0.30);}
main#consulta section#requests article.product{padding: 0; box-shadow: initial;}
main#consulta section#requests article.product .status{gap: 7px; align-items: center;}
main#consulta section#requests article.product .status strong{font-size: 1rem; color: var(--main-color);}
main#consulta section#requests article.product .actions{gap: 14px;}
main#consulta section#requests article.product .actions a{width: 100%; text-align: center;}

/* Detalhes */

main#detalhes{gap: 24px;}

main#detalhes section#requests{gap: 0;}

main#detalhes section#info{gap: 0 10px;}
main#detalhes section#info .row{padding: 12px; font-weight: 700; border-bottom: 2px solid rgba(115, 115, 115, 0.30);}
main#detalhes section#info .row strong{font-weight: 900;}
main#detalhes .download{padding: 24px; align-items: center; text-decoration: none; border-radius: 12px; box-shadow: 4px 4px 4px 0px rgba(38, 95, 99, 0.13); width: fit-content; font-size: 1rem; gap: 12px;}

/* Comprador */

main#comprador{gap: 36px;}
main#comprador section{gap: 24px 12px;}
main#comprador section > .grid{grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 100px;}
main#comprador section > .grid.conditions{grid-template-columns: min-content 1fr;}
main#comprador section > .grid .full{grid-column: 1 / span 2;}
main#comprador button.linklike{width: fit-content; margin-left: auto; color: var(--main-color);}
main#comprador .actions{margin: 60px 0 0 auto;}

/* Login */

body:has(main#login){grid-template-rows: minmax(0, 1fr);}
/*body:has(main#login) *:is(header#mainHeader, footer#mainFooter){display: none;}*/

main#login{background: url("assets/svgs/red-char.svg") no-repeat bottom right 5vw;}
main#login:after{content: url("assets/svgs/blue-char.svg"); position: absolute; bottom: 0; left: 5vw;}

main#login header#loginHeader{justify-content: space-between; align-items: flex-end; text-align: right;}

main#login section#loginForm{padding: 85px 20px; width: 530px; height: 640px; max-width: 100%; max-height: 100vh; margin: auto; border-radius: 20px; box-shadow: 10px 10px 50px 0px rgba(177, 177, 177, 0.40), -10px -10px 30px 0px #FFF; gap: 50px;}
main#login section#loginForm .row{justify-content: space-between;}
main#login section#loginForm .row button{width: 120px; border-bottom: 2px solid #E5E5E5; padding-bottom: 14px; font-size: 1.125rem; cursor: pointer;}
main#login section#loginForm .row button[active]{border-bottom-color: #FF9709;}
main#login section#loginForm wm-slider#loginSlider:before,
main#login section#loginForm wm-slider#loginSlider:after{display: none;}
main#login section#loginForm wm-slider#loginSlider > *{pointer-events: all; user-select: none; padding: 0 70px 20px;}
main#login section#loginForm wm-slider#loginSlider form{justify-content: space-evenly; padding: 0 60px; align-items: center;}
main#login section#loginForm wm-slider#loginSlider form input{border-bottom: 2px solid #7E7E7E;}
main#login section#loginForm wm-slider#loginSlider form button{border-radius: 3px; background: #009BA5; display: block; width: fit-content; padding: 12px 42px; color: #fff; font-size: 1rem; cursor: pointer;}
main#login section#loginForm wm-slider#loginSlider p{overflow: auto;}
main#login section#loginForm img { display: none; }

/* Pedido */

main#pedido button#add-dados-postais-grid{width: fit-content; margin: auto;}

main#pedido section.column{height: 100%;}
main#pedido section.column .content{align-items: center;}
main#pedido section.column .content article{gap: 10px;}
main#pedido section.column .content article a{margin: auto;}
main#pedido section > .grid.conditions{grid-template-columns: min-content 1fr;}

main#pedido section.column .content article.product{position: relative; grid-template-columns: 3fr repeat(3, 2fr);}
main#pedido section.column .content article.product .wc_cart_remove{position: absolute; top: 10px; right: 10px;}
main#pedido section.column .content article.product .quantity.row{gap: 36px;}
main#pedido section.column .content .wc_cart_total_forms{justify-content: flex-end; gap: 24px; align-items: flex-start;}
main#pedido section.column .content .wc_cart_total_forms .grid{gap: 8px; grid-template-columns: 1fr max-content;}
main#pedido section.column .content .wc_cart_total_forms .grid p{grid-column: span 2;}
main#pedido section.column .content .wc_cart_total_forms .grid input{border-radius: 8px; border: 2px solid #D9D9D9; background: #FFF;}
main#pedido section.column .content .wc_cart_total_forms .grid .btn{background-color: var(--main-color);}
main#pedido section.column .content .wc_cart_total_price{align-items: center; gap: 96px; justify-content: flex-end; padding-top: 50px;}
main#pedido section.column .content .wc_cart_price{font-size: 1.5rem;}
main#pedido section.column .content .wc_cart_price strong{color: var(--main-color);}
main#pedido section.column .content .wc_cart_actions{gap: 48px; width: fit-content; place-self: flex-end; padding-top: 24px;}
main#pedido section.column .content .wc_cart_total_shipment_result{padding-top: 24px; grid-column: span 2;}
main#pedido section.column .content .wc_cart_total_shipment_result label{display: grid; align-items: center; grid-template-columns: max-content minmax(0, 1fr); gap: 8px;}

/* Responsive */

@media(max-width: 550px){

	header#mainHeader{padding: 12px;}
	header#mainHeader .logo{width: 50%; padding: 6px 12px; border-radius: 12px; gap: 12px;}
	header#mainHeader .logo img{flex: 0 0 auto; width: calc(50% - 6px);}
	header#mainHeader .actions{font-size: 0.75rem;}

	form#searchForm.row{flex-direction: column; align-items: initial;}
	form#searchForm a{margin-left: initial;}
	form#searchForm .formItems{display: grid; /*grid-template-rows: 17px minmax(0, 1fr);*/ grid-template-columns: minmax(0, 1fr) 0px; gap: 8px;}
	form#searchForm .formItems .labeledInput{display: grid; grid-template: inherit; /*grid-row: 1 / span 2; */grid-column: 1 / span 2;}
	form#searchForm .formItems .labeledInput label{grid-column: 1 / span 2;}
	form#searchForm .formItems button{grid-row: 3; grid-column: 1;}

	article.product{grid-template-columns: max-content 1fr; gap: 8px 24px; align-items: start; justify-items: flex-start;}
	article.product img{grid-row: 1 / span 4;}
	article.product form{grid-column: 1 / 3; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 16px;}
	article.product form .costs{justify-self: start; align-items: flex-start; gap: 4px;}
	article.product .qtd{width: fit-content; grid-row: 1; justify-self: end;}
	article.product .btn{grid-column: 1 / span 2; width: 100%;}

	main#login{background: url("assets/svgs/red-char.svg") no-repeat bottom right -34px / 140px, url("assets/svgs/blue-char.svg") no-repeat bottom left -45px / 260px; height: 850px;}
	main#login:after{display: none;}
	main#login header#loginHeader a{font-size: 0.625rem; font-weight: 300; width: 50%;}
	main#login section#loginForm{padding: 36px 12px; height: 400px; margin-top: 35px; background: #fff;}
	main#login section#loginForm .row button{padding-bottom: 8px; font-size: 0.875rem; flex: 0 1 70px;}
	main#login section#loginForm .row button:nth-child(2){flex: 0 0 100px;}
	main#login section#loginForm wm-slider#loginSlider > *{padding: 0 20px;}

	main#comprar > button{margin: auto;}
	main#comprar article.product.heading{display: none;}

	main#consulta section#requests article.product{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
	main#consulta section#requests article.product .status{white-space: initial; text-align: center;}
	main#consulta section#requests article.product .actions a{font-size: 0.75rem;}

	main#detalhes section#requests article.product{flex-direction: column; align-items: flex-start;}
	main#detalhes .download{margin: auto;}

	main#pedido section.column .content article.product{grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max-content repeat(2, min-content);}
	main#pedido section.column .content article.product.workcontrol_cart_list_header{display: none;}
	main#pedido section.column .content article.product > .row{grid-column: span 2; padding-bottom: 8px;}
	main#pedido section.column .content article.product > .column{margin: auto auto 0;}
	main#pedido section.column .content article.product .quantity.row{gap: inherit; grid-row: 2 / 4; flex-direction: column-reverse; padding: 0; grid-column: 1; margin: auto;}
	main#pedido section.column .content article.product b{margin: 0 auto auto;}
	main#pedido section.column .content article.product b p:before{content: 'Total: ';}
	main#pedido section.column .content .wc_cart_total_forms{flex-direction: column;}
	main#pedido section.column .content .wc_cart_total_forms .grid{width: 100%;}
	main#pedido section.column .content .wc_cart_total_price{flex-direction: column; gap: 36px; padding-top: 48px; align-items: flex-end;}

}

.actions.column img {
	height: 26px;
	margin-left: 10px;
	display: none;
}

a[disabled] {
	pointer-events: none;
}

a.floatingWpp {
	background-color: #00e676;
	position: fixed;
	bottom: 100px;
	left: 5vw;
	z-index: 1000000;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

a.floatingWpp i {
	width: 25px;
	height: 25px;
}