/*-------------------------------------------------------------------------*/
/* Module: Store
/*-------------------------------------------------------------------------*/
/* The 1.x override was written for the FusionCMS 7/8 store: floated columns
   with hard pixel widths (`#store_realms: 440px`, `#cart: 225px`) and markup
   (`.filter_field`, `.online_realm_button`, `.item_group_title`) that no
   longer exists. FusionCMS 9.x ships the store as Bootstrap 5 rows, cards and
   accordions, so those rules squeezed the cart down to a sliver - which is
   why the checkout button used to render one letter per line.

   This rewrite works with the Bootstrap markup instead of against it.       */
/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/
/* Wrapper
/*-------------------------------------------------------------------------*/
#store_wrapper,
#store {
	width: 100%;
	min-width: 0;
	padding: 0;
}

#store_content {
	margin: 0;
}

/*-------------------------------------------------------------------------*/
/* Filter bar
/*-------------------------------------------------------------------------*/
/* `col-sm-1` is far too narrow for the "Sort by" label and `col-sm-3` cuts
   the filter field off, so let the bar size itself to its content. */
#store form > .row {
	margin: 0 0 1.25rem 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.75rem;
}

#store form > .row > * {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	-ms-flex: 1 1 9rem;
	flex: 1 1 9rem;
	min-width: 0;
}

/* Label and the VP/DP toggles only take the room they need */
#store form > .row > label.sort,
#store form > .row > .col-sm-3:last-child {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	white-space: nowrap;
}

#store form > .row > label.sort {
	padding: 0;
	color: var(--havoc-text-muted, #757364);
}

#store form > .row select,
#store form > .row .sbHolder,
#store form > .row input[type='text'] {
	width: 100%;
	margin: 0;
}

/* The two currency toggles sit side by side */
#store form > .row > .col-sm-3:last-child {
	display: -ms-flexbox;
	display: flex;
	gap: 0.5rem;
}

#store form > .row .nice_button {
	width: auto;
	margin: 0;
}

/*-------------------------------------------------------------------------*/
/* Content: items beside the cart
/*-------------------------------------------------------------------------*/
/* The store sits inside the UCP's `col-lg-8`, so what matters is how much
   room *it* has, not how wide the window is - a viewport media query would
   keep two columns and crush the item list in a narrow theme column. Query
   the store itself instead; without @container support the cart simply
   stacks under the items, which is a safe fallback either way.

   34rem (544px) is the point where both columns still fit: the cart asks for
   15rem, the gap 1.5rem, and that leaves ~17rem for the item list. */
#store {
	container-type: inline-size;
	container-name: store;
}

#store_content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	-ms-flex-align: start;
	align-items: start;
}

@container store (min-width: 34rem) {
	#store_content {
		grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
	}
}

#store_realms {
	width: auto;
	margin: 0;
	float: none;
	min-width: 0;
}

#store_realms > .accordion:last-child {
	margin-bottom: 0 !important;
}

/*-------------------------------------------------------------------------*/
/* Store item
/*-------------------------------------------------------------------------*/
.store_item {
	width: auto;
	height: auto;
	float: none;
	-ms-flex-align: center;
	align-items: center;
	border: 1px solid var(--havoc-border-soft, rgba(255, 255, 255, 0.07)) !important;
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
	transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.store_item:hover {
	background-color: rgba(180, 163, 85, 0.07);
	border-color: var(--havoc-border, #2a2c26) !important;
}

/* In this column Bootstrap's `col-md-1` ends up narrower than the 40px icon,
   so let the three parts size themselves instead */
.store_item > [class*='col-md-1'] {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
}

.store_item > [class*='col-md-5'] {
	-ms-flex: 1 1 8rem;
	flex: 1 1 8rem;
	width: auto;
	min-width: 0;
}

.store_item > .store_buttons {
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	width: auto;
	margin-left: auto;
}

.store_item .item_icon {
	width: 40px;
	height: 40px;
	float: none;
	display: block;
	margin: 0;
	border: 1px solid var(--havoc-border, #2a2c26);
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.store_item .item_name {
	display: inline-block;
	font-weight: bold;
	font-size: 0.95rem;
	line-height: 1.3;
}

.store_item p {
	color: var(--havoc-text-muted, #757364);
	font-size: 0.85rem;
}

/* Buy buttons */
.store_item .store_buttons {
	float: none;
	margin: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.4rem;
	text-align: right;
}

.store_item .store_buttons a {
	margin: 0;
}

.vp_button,
.dp_button {
	padding: 0.35rem 0.7rem;
	font-size: 0.9rem;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Stack count badge on the icon */
span.wh-icon-text {
	right: 0;
	bottom: 0;
	color: #fff;
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	text-shadow: 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -2px 0 #000, -1px 0 #000, 0 0 #000, 1px 0 0 #000;
}

/*-------------------------------------------------------------------------*/
/* Cart
/*-------------------------------------------------------------------------*/
#store_content > .card {
	width: auto;
	float: none;
	min-width: 0;
	margin: 0;
}

@container store (min-width: 34rem) {
	#store_content > .card {
		top: 1rem;
		position: sticky;
	}
}

#cart {
	width: auto;
	float: none;
	min-width: 0;
}

#cart .card-header {
	color: var(--havoc-heading, #eae4b4);
	font-family: var(--font-family-secondary, inherit);
	font-size: 1rem;
	text-transform: uppercase;
}

#cart .card-body {
	padding: 0.75rem;
}

#empty_cart {
	padding: 1.5rem 0.5rem;
	opacity: 0.5;
	text-align: center;
	font-size: 0.9rem;
}

/* Cart lines are Bootstrap rows built by store.js */
#cart .store_item {
	margin: 0 0 0.35rem 0;
	padding: 0.5rem !important;
	font-size: 0.85rem;
}

#cart .store_item:hover {
	padding: 0.5rem !important;
	background: rgba(180, 163, 85, 0.07);
}

#cart .store_item .item_name,
#cart .store_item .item_realm {
	display: block;
	font-size: 0.85rem;
	line-height: 1.3;
}

#cart .store_item .item_realm {
	color: var(--havoc-text-muted, #757364);
	font-size: 0.75rem;
}

#cart .store_item .item_price {
	float: none;
	font-size: 0.8rem;
	font-weight: bold;
	white-space: nowrap;
}

#cart .store_item .item_price img {
	width: 12px;
	height: 12px;
	margin-right: 2px;
}

#cart .store_item .delete_item {
	width: auto;
	opacity: 0.5;
	overflow: visible;
	position: static;
	float: none;
	margin: 0;
	text-align: right;
	-webkit-transition: opacity 200ms ease-in-out, color 200ms ease-in-out;
	transition: opacity 200ms ease-in-out, color 200ms ease-in-out;
}

#cart .store_item:hover .delete_item {
	width: auto;
	opacity: 1;
	color: #c05a5a;
}

/* Totals + checkout */
#cart_price {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.35rem;
}

#vp_price_full,
#dp_price_full {
	float: none;
	margin: 0;
	white-space: nowrap;
	font-size: 0.85rem;
}

#vp_price_full img,
#dp_price_full img {
	width: 14px;
	height: 14px;
}

#cart_price a {
	float: none;
	margin: 0;
	white-space: nowrap;
}

/*-------------------------------------------------------------------------*/
/* Checkout
/*-------------------------------------------------------------------------*/
#checkout {
	padding: 0;
}

#checkout_info {
	margin: 0 0 1.25rem 0;
	padding: 1rem;
	text-align: center;
	font-size: 0.95rem;
	border: 1px solid var(--havoc-border-soft, rgba(255, 255, 255, 0.07));
	background-color: var(--havoc-surface-soft, rgba(255, 255, 255, 0.025));
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#checkout_info b {
	color: var(--havoc-heading, #eae4b4);
}

#checkout_info a {
	margin: 0;
}

#checkout_info .button_left,
#checkout_info .button_right {
	float: none;
}

.checkout_characters {
	float: none;
}

.checkout_characters select,
#checkout .store_item select,
#checkout .store_item .sbHolder {
	width: 100%;
}

/*-------------------------------------------------------------------------*/
/* Narrow screens
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.store_item .store_buttons {
		-ms-flex-pack: start;
		justify-content: flex-start;
		margin-top: 0.5rem;
	}
}