/*
 * Ring Maker page styles (tweak 100074).
 *
 * The Ring Maker is now rendered inside the Journal layout (route information/ringmaker),
 * so it no longer loads Bootstrap 5. The few Bootstrap 5 utilities the Ring Maker markup
 * and its AJAX templates rely on are provided here, scoped to #ringmaker so they cannot
 * affect the Journal header, menu or footer. :where() keeps their specificity equal to a
 * single class, so the Ring Maker overrides below still win as they did before.
 *
 * The rules after the utilities were previously inline <style> blocks in ringmaker/index.php.
 */

/* Bootstrap 5 utilities used by the Ring Maker */
:where(#ringmaker) .d-flex { display: flex !important; }
:where(#ringmaker) .d-block { display: block !important; }
:where(#ringmaker) .flex-column { flex-direction: column !important; }
:where(#ringmaker) .justify-content-start { justify-content: flex-start !important; }
:where(#ringmaker) .justify-content-end { justify-content: flex-end !important; }
:where(#ringmaker) .justify-content-center { justify-content: center !important; }
:where(#ringmaker) .justify-content-between { justify-content: space-between !important; }
:where(#ringmaker) .align-items-start { align-items: flex-start !important; }
:where(#ringmaker) .align-items-end { align-items: flex-end !important; }
:where(#ringmaker) .align-items-center { align-items: center !important; }
:where(#ringmaker) .w-100 { width: 100% !important; }
:where(#ringmaker) .h-100 { height: 100% !important; }
:where(#ringmaker) .text-start { text-align: left !important; }
:where(#ringmaker) .text-end { text-align: right !important; }
:where(#ringmaker) .img-fluid { max-width: 100%; height: auto; }
:where(#ringmaker) #display .row { display: flex; flex-wrap: wrap; }
@media (min-width: 768px) {
	:where(#ringmaker) #display .col-md-4 { flex: 0 0 33.333333%; width: 33.333333%; max-width: 33.333333%; }
}

/* Page heading and intro */
#all .main_title { text-align: center; padding-top: 0; }
#all .main_title h1 { font-size: 22px; padding-top: 30px; margin-bottom: 5px; }
#all .main_title .rm-subtitle { font-size: 16px; margin: 0 0 5px; }
#all .main_title .rm-instruction { font-size: 14px; margin: 0 0 5px; }
#all .main_title .rm-notes { margin: 0 10px; padding-bottom: 0; }
#all .main_title hr { margin-top: 0; margin-bottom: 5px; border-top: 1px solid rgba(200, 200, 200, 0.2); }
#ringmaker .rm-intro { max-width: 1300px; max-height: 150px; overflow: auto; margin: 0 auto; padding: 0 10px; text-align: justify; }

@media (min-width: 1200px) {
	#left-col .metal_types { height: 95px; }
	.flex_block { padding-bottom: 0; }
	#left-col > div { height: 22.4% !important; margin-bottom: 17px; margin-right: 0; }
	#ringmaker .w-100 { width: 90% !important; }
	#display .w-100, #left-col .w-100, #right-col .w-100 { width: 100% !important; }
	.submit { width: 170px; }

	#previous-box button.btn.submit.next-btn { background-color: #F6F1ED; color: #666666; }
	#previous-box button.btn.submit.next-btn:hover { background-color: #F6F1ED; color: #999999; outline: 1px solid #F6F1ED; }
	button.btn.submit.next-btn { background-color: #DFCCC6; color: #666666; }
	button.btn.submit.next-btn:hover { background-color: #DFCCC6; color: #ffffff; outline: 1px solid #DFCCC6; }

	/* Tweak 100164: full-size ring (640 x 480); the panel keeps its height even while the image loads or if it fails */
	#display .animated.selectedImg { min-height: 484px; }
}

@media (min-width: 600px) and (max-width: 1000px) {
	#all .flex_block { flex-direction: column; align-items: center; }
	div#left-col { width: 100% !important; max-width: 80% !important; flex-wrap: inherit; gap: 10px; }
	#display { width: 80% !important; max-height: 250px; }
	div#right-col { width: 100% !important; max-width: 80% !important; gap: 7px; justify-content: unset !important; margin-top: 30px !important; }
	#right-col .draggable { width: 19% !important; max-height: 250px !important; }
	#right-col div .animated img { height: 70% !important; }
	#right-col div .animated { width: 100% !important; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; }
	.draggable-display { max-height: 100%; }
	.draggable-display .animated img { max-height: 250px; }
	#right-col .draggable.rightside-second-step { width: 24% !important; }
}

@media (max-width: 600px) {
	#right-col .metal_types, #left-col .metal_types { height: 65px; object-fit: contain; }
}

@media (min-width: 701px) and (max-width: 1200px) {
	.mobile_next_btn span { display: block !important; }
	.mobile_next_btn svg { display: none !important; }
	button.btn.submit.mobile_next_btn { background-color: #DFCCC6; color: #666666; padding: 7px; }
	button.btn.submit.mobile_next_btn:hover { background-color: #DFCCC6; color: #ffffff; outline: 1px solid #DFCCC6; }
	.mobile_next_btn { width: 160px; }
}

/* Selected ring and thumbnails */
@media only screen and (max-width: 767px) {
	h5.metal_name { display: block !important; }
}
.animated.selectedImg { position: relative; }
.droppable-box { border: 1px solid transparent !important; }
.draggable-display.ui-draggable.ui-draggable-handle.ui-draggable-dragging .animated.selectedImg { border: 0 solid #ffffff; }

@media (min-width: 769px) {
	img.rotation_image { max-width: 30px; position: absolute; left: 45%; bottom: 10%; max-height: 30px !important; }
	.animated.selectedImg { border: 2px solid #F2E4CC; min-width: 640px; text-align: center; }
}
@media (max-width: 768px) {
	img.rotation_image { max-width: 20px; position: absolute; right: 0; top: 0; max-height: 20px !important; }
	.animated.selectedImg img { min-width: 320px; max-height: 230px; height: auto; }
	.animated.selectedImg { border: 2px solid #F2E4CC; min-width: 320px; max-height: 240px; height: auto; }
	.droppable > div { padding: 2px; }
}

.cols > div { background: transparent 0% 0% no-repeat padding-box !important; border: 2px solid transparent !important; }
.draggable .animated img { transform: scale(1.1) !important; }

@media (min-width: 1024px) and (max-width: 1200px) {
	div#left-col { width: 25% !important; max-width: 25% !important; flex-wrap: wrap; height: 100% !important; flex-direction: row !important; }
	#display { width: 60% !important; min-height: 480px; }
	div#right-col { width: 25% !important; max-width: 25% !important; flex-direction: row !important; height: 100% !important; }
	#right-col .draggable { width: 50% !important; margin: 0; max-width: 50% !important; height: 95px !important; }
}