/* =========================================================
   RELIC FORGE - PACKAGING POPUP
   ========================================================= */

#rf-packaging-overlay {

	position: fixed;
	inset: 0;

	z-index: 999999;

	display: none;

	align-items: center;
	justify-content: center;

	padding: 20px;

	background: rgba(8, 8, 7, .88);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	opacity: 0;

	transition: opacity .25s ease;
}


#rf-packaging-overlay.rf-open {

	display: flex;

	opacity: 1;

}


/* =========================================================
   POPUP
   ========================================================= */

#rf-packaging-popup {

	position: relative;

	width: 100%;
	max-width: 760px;

	max-height: 92vh;

	overflow-y: auto;

	background: #11110F;

	border: 1px solid rgba(169, 130, 69, .45);

	box-shadow:
		0 30px 100px rgba(0,0,0,.65);

	color: #E5DDCC;

	padding: 42px;

	transform: translateY(15px) scale(.98);

	transition: transform .3s ease;

}


#rf-packaging-overlay.rf-open
#rf-packaging-popup {

	transform: translateY(0) scale(1);

}


/* =========================================================
   CLOSE
   ========================================================= */

#rf-packaging-close {

	position: absolute;

	top: 18px;
	right: 18px;

	width: 38px;
	height: 38px;

	padding: 0;

	border: 1px solid rgba(229,221,204,.16);

	background: transparent;

	cursor: pointer;

	display: flex;

	align-items: center;
	justify-content: center;

	transition: all .25s ease;

}


#rf-packaging-close:hover {

	background: #A98245;

	border-color: #A98245;

}


#rf-packaging-close span {

	position: absolute;

	width: 15px;
	height: 1px;

	background: #E5DDCC;

}


#rf-packaging-close span:first-child {

	transform: rotate(45deg);

}


#rf-packaging-close span:last-child {

	transform: rotate(-45deg);

}


#rf-packaging-close:hover span {

	background: #11110F;

}


/* =========================================================
   HEADER
   ========================================================= */

.rf-popup-header {

	text-align: center;

	margin-bottom: 30px;

}


.rf-popup-mark {

	display: flex;

	justify-content: center;

	align-items: center;

	gap: 4px;

	margin-bottom: 15px;

}


.rf-popup-mark span {

	display: block;

	width: 4px;
	height: 4px;

	background: #A98245;

	transform: rotate(45deg);

}


.rf-popup-eyebrow {

	display: block;

	margin-bottom: 9px;

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 9px;

	letter-spacing: 3px;

	color: #A98245;

}


.rf-popup-header h2 {

	margin: 0 0 9px;

	font-family:
		"Cinzel",
		Georgia,
		serif;

	font-size: 29px;

	font-weight: 500;

	line-height: 1.25;

	color: #E5DDCC;

}


.rf-popup-header p {

	margin: 0;

	font-family:
		Inter,
		Arial,
		sans-serif;

	font-size: 13px;

	line-height: 1.6;

	color: rgba(229,221,204,.55);

}


/* =========================================================
   OPTIONS
   ========================================================= */

.rf-packaging-options {

	display: grid;

	gap: 10px;

}


.rf-packaging-option {

	position: relative;

	display: grid;

	grid-template-columns: 88px minmax(0, 1fr) 28px;

	align-items: center;

	gap: 17px;

	padding: 10px;

	cursor: pointer;

	border: 1px solid rgba(229,221,204,.12);

	background: rgba(255,255,255,.025);

	transition:
		background .25s ease,
		border-color .25s ease,
		transform .25s ease;

}


.rf-packaging-option:hover {

	border-color: rgba(169,130,69,.45);

	background: rgba(169,130,69,.055);

	transform: translateY(-1px);

}


.rf-packaging-option.rf-selected {

	border-color: #A98245;

	background: rgba(169,130,69,.075);

}


/* Hide actual radio */

.rf-packaging-option input {

	position: absolute;

	opacity: 0;

	pointer-events: none;

}


/* =========================================================
   IMAGE
   ========================================================= */

.rf-option-image {

	width: 88px;
	height: 74px;

	overflow: hidden;

	background: #292824;

}


.rf-option-image img {

	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transition: transform .4s ease;

}


.rf-packaging-option:hover
.rf-option-image img {

	transform: scale(1.06);

}


/* Placeholder */

.rf-image-placeholder {

	width: 100%;
	height: 100%;

	display: flex;

	align-items: center;
	justify-content: center;

	background:
		linear-gradient(
			135deg,
			#292824,
			#181816
		);

}


.rf-image-placeholder span {

	font-family:
		"Cinzel",
		Georgia,
		serif;

	font-size: 17px;

	letter-spacing: 3px;

	color: rgba(169,130,69,.55);

}


/* =========================================================
   CONTENT
   ========================================================= */

.rf-option-content {

	min-width: 0;

}


.rf-option-top {

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;

	margin-bottom: 5px;

}


.rf-option-content h3 {

	margin: 0;

	font-family:
		"Cinzel",
		Georgia,
		serif;

	font-size: 15px;

	font-weight: 500;

	line-height: 1.35;

	color: #E5DDCC;

}


.rf-option-price {

	flex-shrink: 0;

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 10px;

	letter-spacing: .5px;

	color: #A98245;

}


.rf-option-content p {

	margin: 0;

	font-family:
		Inter,
		Arial,
		sans-serif;

	font-size: 11px;

	line-height: 1.55;

	color: rgba(229,221,204,.48);

}


/* =========================================================
   RADIO / CHECK
   ========================================================= */

.rf-option-radio {

	display: flex;

	align-items: center;
	justify-content: center;

}


.rf-option-check {

	width: 23px;
	height: 23px;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 1px solid rgba(229,221,204,.2);

	color: transparent;

	font-size: 11px;

	transition: all .25s ease;

}


.rf-packaging-option.rf-selected
.rf-option-check {

	background: #A98245;

	border-color: #A98245;

	color: #11110F;

}


/* =========================================================
   FOOTER
   ========================================================= */

.rf-popup-bottom {

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin-top: 25px;

	padding-top: 20px;

	border-top:
		1px solid rgba(229,221,204,.1);

}


.rf-selection-label {

	display: block;

	margin-bottom: 4px;

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 8px;

	text-transform: uppercase;

	letter-spacing: 1.7px;

	color: rgba(229,221,204,.38);

}


.rf-selection strong {

	font-family:
		"Cinzel",
		Georgia,
		serif;

	font-size: 13px;

	font-weight: 500;

	color: #E5DDCC;

}


/* =========================================================
   BUTTON
   ========================================================= */

#rf-confirm-packaging {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	min-width: 195px;

	padding: 14px 20px;

	border: 0;

	background: #A98245;

	color: #11110F;

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: .8px;

	text-transform: uppercase;

	cursor: pointer;

	transition:
		background .25s ease,
		transform .25s ease,
		opacity .25s ease;

}


#rf-confirm-packaging:hover {

	background: #E5DDCC;

	transform: translateY(-1px);

}


#rf-confirm-packaging.rf-loading {

	opacity: .55;

	pointer-events: none;

}


.rf-button-arrow {

	font-size: 16px;

	line-height: 1;

}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.rf-packaging-open {

	overflow: hidden;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

#rf-packaging-popup::-webkit-scrollbar {

	width: 5px;

}


#rf-packaging-popup::-webkit-scrollbar-track {

	background: #11110F;

}


#rf-packaging-popup::-webkit-scrollbar-thumb {

	background: #665035;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	#rf-packaging-overlay {

		padding: 10px;

	}


	#rf-packaging-popup {

		padding: 32px 15px 20px;

		max-height: 94vh;

	}


	.rf-popup-header {

		margin-bottom: 22px;

		padding: 0 15px;

	}


	.rf-popup-header h2 {

		font-size: 22px;

	}


	.rf-popup-header p {

		font-size: 11px;

	}


	.rf-packaging-option {

		grid-template-columns:
			64px minmax(0,1fr) 24px;

		gap: 11px;

		padding: 8px;

	}


	.rf-option-image {

		width: 64px;
		height: 64px;

	}


	.rf-option-top {

		display: block;

	}


	.rf-option-price {

		display: block;

		margin-top: 4px;

	}


	.rf-option-content h3 {

		font-size: 12px;

	}


	.rf-option-content p {

		font-size: 9px;

		line-height: 1.45;

	}


	.rf-option-check {

		width: 21px;
		height: 21px;

	}


	.rf-popup-bottom {

		display: block;

	}


	.rf-selection {

		margin-bottom: 15px;

	}


	#rf-confirm-packaging {

		width: 100%;

	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	#rf-packaging-overlay,
	#rf-packaging-popup,
	.rf-packaging-option,
	.rf-option-image img,
	#rf-confirm-packaging {

		transition: none !important;

	}

}