@charset "utf-8";

#content{
	&>.inner{display:grid;grid-template-columns:1fr clamp(30em,33%,35em);align-items:start;gap:var(--spacing);padding:var(--spacing);}
	@media only screen and (max-width:800px){
		&>.inner{display:flex;flex-direction:column-reverse;align-items:unset;}
	}
}
#lang_currency_settings{position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;order:9;background:var(--background-color-L1);padding:var(--spacing);border-radius:1em;
	&>.inner{display:flex;flex-direction:column;gap:var(--spacing);max-width:30em;margin-inline:auto;}
	& h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);}
	.region{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--CPT-US) / 2);align-items:center;height:var(--CPT-US);padding-inline:calc(var(--CPT-US) / 2);background-color:var(--body-text-color-a5);border-radius:var(--CPT-BDR);--CPT-US:4em;
		&::before{content:attr(icon);display:block;font-size:1.5em;color:var(--body-text-color-a25);}
		&>span{display:grid;grid-template-columns:1fr auto;gap:1em;align-items:center;
			&::before{order:9;}
			&>b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);}
		}
	}
	.form{display:flex;flex-direction:column;gap:1em;--CPT-US:4em;
		.cpt-select{--icon-opacity:.5;}
		.btc>.btw{display:block;}
	}
	@media only screen and (max-width:800px){position:unset;width:min(40em,100%);margin-inline:auto;box-sizing:border-box;}
	@media only screen and (max-width:480px){background-color:unset;padding:unset;border-radius:unset;}
}
#region_list{
	&>.inner{display:flex;flex-direction:column;gap:var(--spacing);}
	.group{display:grid;grid-template-columns:repeat(auto-fill,minmax(20em,1fr));align-items:start;column-gap:1em;padding:1em;border-radius:1em;background-color:var(--background-color-L3);
		.title{grid-column:1/-1;
			& h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);padding:calc(var(--spacing) / 2);}
		}
		.RegionItem{display:grid;grid:"flag name language currency"/auto 1fr auto auto;align-items:center;column-gap:1em;padding:1em;border-radius:var(--CPT-BDR);cursor:pointer;transition:color 300ms,background-color 300ms;
			&:hover{color:var(--SiteTHM);background-color:var(--SiteTHM-A10);}
			&::before{grid-area:flag;}
			.name{grid-area:name;font-weight:var(--SiteFW-B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			.lang{grid-area:language;}
			.currency{grid-area:currency;}
			.lang,.currency{font-size:var(--SiteFS-S);}
		}
	}
	@media only screen and (max-width:800px){width:min(30em,100%);margin-inline:auto;
		&>.inner{gap:1px;border-radius:1em;background-color:var(--background-color-L3);overflow:hidden;}
		.group{background-color:unset;padding:unset;border-radius:unset;box-shadow:var(--body-text-color-a5) 0 1px 0;padding:calc(var(--spacing) / 2);
			&:not(.expand) .RegionItem{display:none;}
			&.expand .title::before{--i:'close';}
			.title{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;height:3em;padding-inline:calc(var(--spacing) / 2);cursor:pointer;
				&::before{content:var(--i,attr(icon));display:block;font-size:1.5em;order:9;color:var(--body-text-color-a50);}
				& h3{padding:unset;}
			}
		}
	}
}