/* CRF Region Selector — crfsecure.org. Scoped under #crf-rs so the theme's
   button/label/input rules (Hello Elementor, Elementor kit) can't restyle it. */

html.crf-rs-lock { overflow: hidden; }

#crf-rs[hidden] { display: none !important; }
#crf-rs {
	position: fixed; inset: 0; z-index: 2147483000;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #232323; line-height: 1.4; text-align: left;
}
#crf-rs *, #crf-rs *::before, #crf-rs *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The theme gives every button `transition: all .3s`, which fades our state changes. */
#crf-rs button, #crf-rs label { transition: none; }
#crf-rs [hidden] { display: none !important; }

#crf-rs .crf-rs__backdrop { position: absolute; inset: 0; background: rgba(4, 14, 26, 0.62); }

#crf-rs .crf-rs__dialog {
	position: relative; width: 100%; max-width: 520px;
	max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
	display: flex; flex-direction: column; gap: 22px;
	padding: 32px; background: #FFFFFF; border-radius: 14px;
	box-shadow: 0 24px 64px rgba(4, 14, 26, 0.28);
	animation: crf-rs-in 160ms ease-out;
}
#crf-rs .crf-rs__dialog:focus { outline: none; }
@keyframes crf-rs-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #crf-rs .crf-rs__dialog { animation: none; } }

#crf-rs button.crf-rs__x {
	position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
	margin: 0; padding: 0; border: 0; border-radius: 8px;
	background: transparent; color: #4A5260; cursor: pointer;
	display: flex; align-items: center; justify-content: center; box-shadow: none;
}
#crf-rs button.crf-rs__x:hover { background: #F0F2F7; color: #040E1A; }

#crf-rs .crf-rs__head { display: flex; flex-direction: column; gap: 8px; padding-right: 40px; }
#crf-rs .crf-rs__plan { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #314D76; }
#crf-rs .crf-rs__title {
	margin: 0; padding: 0; font-family: "Maven Pro", "Lato", system-ui, sans-serif;
	font-weight: 600; font-size: 26px; line-height: 1.2; color: #040E1A; text-transform: none; letter-spacing: 0;
}
#crf-rs .crf-rs__intro { margin: 0; padding: 0; font-size: 16px; line-height: 1.55; color: #4A5260; }

#crf-rs .crf-rs__options { display: flex; flex-direction: column; gap: 12px; }
#crf-rs label.crf-rs__opt {
	display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px;
	border: 2px solid #DDE2EA; border-radius: 12px; background: #FFFFFF;
	cursor: pointer; line-height: 1.4; font-weight: 400; vertical-align: baseline;
}
#crf-rs label.crf-rs__opt:hover { border-color: #9FB2CC; }
#crf-rs label.crf-rs__opt.is-selected { border-color: #314D76; background: #F3F6FA; }
/* Keyboard focus only: a ring on open would read as a default region to mouse users. */
#crf-rs label.crf-rs__opt:has(input:focus-visible) { outline: 3px solid #5789BB; outline-offset: 2px; }
#crf-rs input.crf-rs__radio, #crf-rs input.crf-rs__check {
	appearance: auto; -webkit-appearance: auto; position: static; opacity: 1;
	width: 20px; height: 20px; margin: 0; padding: 0; flex-shrink: 0; accent-color: #314D76; cursor: pointer;
}
#crf-rs input.crf-rs__check { width: 18px; height: 18px; }
#crf-rs .crf-rs__badge {
	width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #E6ECF4; color: #314D76; font-family: "Maven Pro", "Lato", sans-serif; font-weight: 700; font-size: 15px;
}
#crf-rs .crf-rs__txt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#crf-rs .crf-rs__namerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#crf-rs .crf-rs__name { font-family: "Maven Pro", "Lato", sans-serif; font-weight: 600; font-size: 17px; color: #040E1A; }
#crf-rs .crf-rs__tag { padding: 2px 8px; border-radius: 999px; background: #E6ECF4; color: #314D76; font-size: 12px; font-weight: 700; }
#crf-rs .crf-rs__detail { font-size: 14px; color: #4A5260; }
#crf-rs .crf-rs__host { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #314D76; }

#crf-rs .crf-rs__warn {
	display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
	border-radius: 10px; background: #FFF6E0; border: 1px solid #E8C877; color: #B07A00;
}
#crf-rs .crf-rs__warn svg { flex-shrink: 0; margin-top: 1px; }
#crf-rs .crf-rs__warntext { font-size: 14px; line-height: 1.5; color: #4D3A00; }
#crf-rs .crf-rs__warntext strong { font-weight: 700; }

#crf-rs .crf-rs__login { display: flex; flex-direction: column; gap: 6px; }
#crf-rs .crf-rs__hint { margin: 0; font-size: 14px; line-height: 1.5; color: #4A5260; }
#crf-rs label.crf-rs__remember {
	display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0;
	font-size: 15px; line-height: 1.4; font-weight: 400; color: #232323; cursor: pointer;
}

#crf-rs .crf-rs__actions { display: flex; flex-direction: column; gap: 10px; }
#crf-rs button.crf-rs__cta {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 52px; margin: 0; padding: 0 20px; border: 0; border-radius: 8px;
	background: #314D76; color: #FFFFFF; box-shadow: none; text-transform: none; letter-spacing: 0;
	font-family: "Maven Pro", "Lato", sans-serif; font-weight: 600; font-size: 16px; line-height: 1; cursor: pointer;
}
#crf-rs button.crf-rs__cta:hover, #crf-rs button.crf-rs__cta:focus { background: #243B5C; color: #FFFFFF; }
#crf-rs button.crf-rs__cta:focus-visible, #crf-rs button.crf-rs__x:focus-visible { outline: 3px solid #5789BB; outline-offset: 2px; }
#crf-rs button.crf-rs__cta:disabled { background: #D5DAE3; color: #4A5260; cursor: not-allowed; }
#crf-rs button.crf-rs__cta.is-going { background: #314D76; color: #FFFFFF; cursor: progress; }
#crf-rs .crf-rs__dest { min-height: 18px; font-size: 13px; text-align: center; color: #4A5260; }

#crf-rs .crf-rs__foot { padding-top: 14px; border-top: 1px solid #E7E7E7; font-size: 14px; text-align: center; color: #4A5260; }
#crf-rs .crf-rs__foot a { color: #314D76; text-decoration: underline; }
#crf-rs .crf-rs__foot a:hover { color: #1F3350; }

@media (max-width: 480px) {
	#crf-rs .crf-rs__dialog { padding: 20px; gap: 18px; }
	#crf-rs .crf-rs__title { font-size: 22px; }
	#crf-rs .crf-rs__intro { font-size: 15px; }
}