/* payment */
dialog.payment {
    --dialog-border-color: black;
    --dialog-header-color: white;
    padding: 0;
}
dialog.payment form{
    background:white;
    max-width: 120ch;
}

dialog.payment form main{
    display: flex;
    flex-direction: row;
    grid-gap: 1em;
	padding : 1em;
}
dialog.payment form main > h1{
	flex-basis:100%;
	font-weight: 300;
}
dialog.payment form main > aside{
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	/* flex-shrink: 3; */
	flex-basis: max-content;
	flex-grow: 1;
}
dialog.payment form main > aside::before{
	flex-basis:100%;
	flex-shrink:1;
	/* content:''; */
	/* order  :1; */
}	
dialog.payment form main > aside label{
	
}
dialog.payment p a{
	display: inline-block!important;
	font-weight: bolder;
}
dialog.payment form main > aside > fieldset{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex-basis: max-content;
}
dialog.payment form main > aside > fieldset hr{
	border:none;
	border-top:1px solid;
	margin:0;
}
dialog.payment form main > aside > fieldset label{
	margin:0;
	flex-basis: fit-content;
	/* white-space: nowrap; */
	/* vertical-align:middle; */
	display: flex;
	flex-direction: row;
}
dialog.payment form main > aside > fieldset label span{display: block;white-space: nowrap;}
dialog.payment form main > aside > fieldset label img{
	/* height:1lh; */
}
dialog.payment form main > aside label::after{
	display:none;
}
dialog.payment form main > aside label > :last-child{
	flex-grow: 0;
	flex-basis: max-content;
}

dialog.payment form main > aside figure{
	width:40ch;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
dialog.payment form main > aside figure canvas{
	width:100%;
	margin-bottom:-5rem;
}
dialog.payment form main > aside figure figcaption{
	margin-bottom:1rem;
	font-family:lato;
	font-weight:400;
}
dialog.payment form main > section:has(input){
	/* flex-basis:80ch; */
	flex-basis: fit-content;
	flex-shrink: 2;
}
dialog.payment form header{
	font-family:lato;
	padding:0.3rem 0.6rem;
	display: flex;
	flex-direction: column;
	padding:0;
	background: black;);
	padding-bottom: 1ch;
	color: white;
}
dialog.payment form header h1{
	font-family:'Lato';
	font-weight:200;
	font-size:2.4rem;
	text-align:center;
	margin:0;
}
dialog.payment form header nav{
	display: flex;
	justify-content: center;
}
dialog.payment form header nav a:not(:first-of-type)::before{
	content:'|';
	margin-inline:1rem;
}
dialog.payment form header button{
	display:none;
}
dialog.payment form header  *[data-icon]::before{
	line-height:2rem;
}
dialog.payment form fieldset{
    border:none;
    padding:0;
    margin-bottom: 2em;
    display:flex;
    grid-gap: 1.3rem;
    align-content: flex-start;
    flex-wrap: wrap;
}

dialog.payment form fieldset legend{
    font-size: 1.4rem;
    line-height:1em;
    margin-bottom: 0.5rem;
}
dialog.payment form :where(input,select){
    flex-grow:1;
    padding:0.6rem;
    font-size: 1rem;
    flex-basis: min-content;
}
dialog.payment form select:not(:active):invalid{
	color:gray;
}
dialog.payment form input:where([name='billing-address'],[name='shipping-name'],[name='shipping-address']){
    display:block;
    flex-basis:100%;
}

dialog.payment form label{
    display:block;
    font-family:lato;
    flex-basis:100%;
    display: flex;
	gap:1em;
}
dialog.payment form label > span{
	flex-basis:fit-content;
	flex-grow  :1;
	flex-shrink:0;
}
dialog.payment form label > input{
	flex-grow :0;
	flex-basis:1em;
}
dialog.payment form label::after{
	content:'';
	flex-basis :100%;
	flex-shrink:2;
}
dialog.payment form legend + p{
    margin: 0;
    flex-basis: max-content;
    width: fit-content;
    max-width: 15em;	
}
dialog.payment form footer{
	column-gap:1em;
}
dialog.payment form footer a{
	text-decoration:underline;
}
dialog.payment form footer button{
    margin: 1ch 0;
}
dialog.payment form footer label{
	display: inline-flex;
	flex-grow:2;
	flex-shrink:1;
	flex-direction: row;
	flex-wrap:wrap;
	align-items: center;
}
dialog.payment form footer label::after{
	display:none;
}

dialog.payment form footer button[disabled]{
	background-color:gray;
	color:silver;
}

dialog.payment.notification form main{
	display:flex;
	flex-direction: column;
}
dialog.payment.notification form main p{
	max-width:60ch;
	margin:0;
}