/***************************
Spacing, Hiding Elements, General Styles
***************************/
:root {
	--toggle-transform:  2px;
}
@media(max-width: 600px) {
	body.home h1 {
		font-size: 1.6em;
	}	
}

#title-tagline > .wp-block-group__inner-container {
	padding: 0;
}
.copyright-bar, #menu-item-282, #menu-item-283 {
	display: none;
}
#page {
	padding: 0;
}
.outer-group  {
	max-width: 1200px;
	margin: auto;
	opacity: 0;
	transition: opacity 0.5s ease;
	position: relative;
}
.outer-group.orange-border, #user-registration, #user-registration .ur-frontend-form.login:has(.login.user-registration-form-login), #user-registration-form-10 {
	border: solid 1px var(--accent);
	border-radius: 5px;
	margin: 0 auto 5em;
	box-shadow: 0 0 10px var(--accent);
	background-color: color-mix(in oklab, var(--base), #00000000 30%);
}
#user-registration:has(.login) {
	box-shadow: none;
}
.outer-group.show-IO {
	opacity: 1;
}
.separate-containers .site-main {
	margin-bottom: 0 !important;
}
div.site-footer {
	border-style: solid none none none;
	border-width: 1px;
	border-color: var(--teal);
	box-shadow: 0 -1px 100px var(--teal);
}
#footer-widgets .widget_nav_menu {
	text-align: center;
}
.modal-content {
	background-color: var(--base) !important;
	color: var(--contrast) !important;
}
.modal-content .close, .ur-frontend-form label {
	color: var(--contrast) !important;
}
body.user-registration-page #user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-before-login-btn .user-registration-LostPassword a, 
body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-before-login-btn .user-registration-LostPassword a, 
body.user-registration-membership_page_user-registration-login-forms #user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-before-login-btn .user-registration-LostPassword a, 
body.user-registration-membership_page_user-registration-login-forms .user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-before-login-btn .user-registration-LostPassword a,
body.user-registration-page #user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a, 
body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a, 
body.user-registration-membership_page_user-registration-login-forms #user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a, 
body.user-registration-membership_page_user-registration-login-forms .user-registration:not(.user-registration-MyAccount) .ur-frontend-form .user-registration-form .ur-form-row .ur-form-grid .user-registration-register a {
	color: var(--teal) !important;
}
/***************************
Fixed title tagline
***************************/
#title-tagline {
	height: 66vh;
	display: flex;
	align-items: center;
	position: sticky;
	top: 150px;
	opacity: 0;
	transition: opacity 0.5s ease-out;
	z-index: -1;
}
/* .outer-group, #log-table-inner-container, .button_container > .modal-log-form.initial-input-form {
	z-index: 2;
	position: relative;
} */
/***************************
Fixed background
***************************/
body:not(.home) .sub-group {
	height: 66vh;
	display: flex;
	align-items: center;
}
body:not(.home) .sub-group > .wp-block-group__inner-container {
	padding: 0;
}
@media(min-width: 769px) {
	div.inside-article{
		background: url('https://hellenictradingtools.com/wp-content/uploads/2025/11/hellenic-logo-no-text-10o.png') center center / clamp(200px, 80%, 600px) auto;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}
}
@media(max-width: 768px) {
	body:not(.home) .sub-group {
		height: auto !important;
	}
  div.inside-article::before {
    content: "";
    background: url('https://hellenictradingtools.com/wp-content/uploads/2025/11/hellenic-logo-no-text-10o.png') center center / clamp(200px, 80%, 600px) auto;
    background-size: 90% auto;
	background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure it's behind other content */
  }
}
/***************************
Dark Light Mode
***************************/
#dark-light-toggle, #dark-light-toggle > .wp-block-group__inner-container {
	width: 100px;
	height: 40px;
}
#dark-light-toggle > .wp-block-group__inner-container {
	background-color: var(--contrast);
	border: 1px solid var(--base);
	border-radius: 99px;
	box-shadow: 0 0 6px var(--contrast) inset;
}
#dark-light-toggle > .wp-block-group__inner-container::after {
	content: '';
	width: 32px;
	height: 32px;
	position: absolute;
	top: 4px;
	left: 0;
	transform: translate(var(--toggle-transform), 0px);
	background-color: var(--base);
	border-radius: 99px;
	transition: all 1s linear;
	z-index: 1;
	transition: transform 0.25s ease;
}
#dark-light-toggle {
	position: absolute;
	top: 50px;
	right: 50px;
}
footer .footer-bar {
	width: 100%;
	position: relative;
}

#dark-light-toggle.in-footer {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
}
#dark-light-toggle figure, #dark-light-toggle img {
	width: 24px;
	height: 24px;
}
#dark-light-toggle figure {
	position: absolute;
	top: 8px;
	left: 8px;
	transition: opacity 0.5s ease;
	z-index: 2;
}
#dark-light-toggle figure.moon {
	right: 8px;
	left: initial;
}
#dark-light-toggle > .wp-block-group__inner-container {
	padding: 0;
}

#dark-light-toggle > .wp-block-group__inner-container:hover {
	cursor: pointer;
	border-color: var(--teal);
	box-shadow: 0 0 6px var(--base) inset,
				0 0 6px var(--teal);
}
@media (max-width: 768px) {
	footer .footer-bar {
		padding-bottom: 100px;
	}
	.footer-bar p {
		text-align: center;
		width: 100%;
	}
	.footer-bar #dark-light-toggle {
		right: 50%;
        transform: translate(50%, 0);
        top: 50%;
	}
	.footer-widget-3 h2, .footer-widget-3 p, .wp-block-buttons {
		text-align: center;
		justify-content: center;
	}
}
/***************************
Header dividing bar animation
***************************/
#menu-main-menu li:hover > a {
	color:  var(--accent) !important;
}
.site-content #primary {
	position: relative;
}
.site-content #primary:after {
	content: '';
	width: 100%;
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0 0 5px var(--gold);
	background: linear-gradient(90deg, var(--accent) 20%, var(--gold) 25%, var(--accent) 35%, var(--gold) 50%, var(--gold) 60%, var(--accent) 75%, var(--accent) 95%, var(--gold) 100%);
	background-position: left;
	background-size: 400% 100%;
	animation: background-slide 10s infinite, shadow-pulse 10s ease infinite;
}
@keyframes shadow-pulse {
	0% {
		box-shadow: 0 0 15px var(--gold);
	}
	15% {
		box-shadow: 0 0 40px var(--accent);
	}
	30% {
		box-shadow: 0 0 15px var(--gold);
	} 
	90% {
		box-shadow: 0 0 15px var(--accent);
	}
	100% {
		box-shadow: 0 0 15px var(--gold);
	}
}
@keyframes background-slide {
	0% {
		background-position: left;
	}
	100% {
		background-position: right;
	}
}
/***************************
Logo shine animation
***************************/
header .site-logo img {
	filter: drop-shadow(0 0 0 var(--base));
	transition: filter 0.5s ease;
}
header .site-logo img:hover {
	filter: drop-shadow(0 0 2px var(--teal));
}
/***************************
Buttons - NON FORM RELATED
***************************/
.animated-btn a, .ur-frontend-form button[type='submit'], .user-registration-Button, .modal-log-form.initial-input-form > button {
  background-color: var(--gold) !important;
  color: var(--base) !important;
  font-weight: 500;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 10px;
  box-shadow: 0 0 0 0 var(--accent); /* Initial shadow state */
  animation: pulse 2.5s ease infinite; /* Apply the pulse animation */
}
.animated-btn a:hover, .ur-frontend-form button[type='submit']:hover, .user-registration-Button:hover, .modal-log-form.initial-input-form > button:hover {
	background-color: var(--gold) !important;
	transform: translate(0, -5px) !important;
	box-shadow: 0px 5px 0 var(--teal);
	animation: none;
}
.animated-btn a:active, .ur-frontend-form button[type='submit']:active, .user-registration-Button:active, .modal-log-form.initial-input-form > button:active {
	background-color: var(--gold) !important;
	transform: translate(0, 0) !important;
	box-shadow: 0 0 0 0;
	animation: none;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent); 
    background-color: var(--accent) !important;
  }
  70% {
    box-shadow: 0 0 0 10px color-mix(in oklab, #e8b923, #00000000 100%); 
    background-color: var(--gold) !important;
  }
  100% {
    box-shadow: 0 0 0 50px color-mix(in oklab, #e8b923, #e8b92300 100%); 
    background-color: var(--accent) !important;
  }
}
/***************************
Login / register modal & modal buttons
***************************/
#login-register-popup-modal {
	background: url('https://hellenictradingtools.com/wp-content/uploads/2025/11/hellenic-logo-no-text-10o.png') no-repeat center center / 90% auto,
				linear-gradient(180deg, color-mix(in oklab, var(--base), #00000000 0%), color-mix(in oklab, var(--base), #00000000 0%));
}
#login-register-popup-modal .modal-content {
	max-width: 400px;
	box-shadow: 0 0 50px var(--teal);
	border: 1px solid var(--teal) !important;
}
#login-register-popup-modal .modal-body::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}
.login-register-btn-row {
	display: flex;
    gap: 20px;
    padding: 20px 0 40px;
}
.animated-btn.register-btn, .animated-btn.login-btn {
/*	height: 45.5px;*/
	width: auto;
}
.animated-btn.register-btn a, .animated-btn.login-btn a {
	animation: none;
	display: block;
	background-color: var(--accent) !important;
	color: var(--contrast) !important;
	text-decoration: none;
}
.animated-btn.login-btn a {
	background-color: var(--base) !important;
	border: 1px solid var(--accent) !important;
}
/***************************
User Registration Forms
***************************/
#user-registration {
	background-color: transparent !important;
}
#user-registration.vertical, #user-registration.horizontal, .ur-frontend-form.login {
	background: color-mix(in oklab, var(--base), #00000000 30%) !important;
}
#user-registration.horizontal .user-registration-MyAccount-navigation-link a {
	color: var(--contrast) !important;
}
#user-registration.horizontal .user-registration-MyAccount-navigation-link a:hover {
	color: var(--base) !important;
	background: var(--contrast) !important;
}
#user-registration.horizontal .user-registration-MyAccount-navigation-link.is-active a {
	border: none !important;
	background: var(--accent) !important;
}
#user-registration.vertical .user-registration-MyAccount-content__body p a, #user-registration.horizontal .user-registration-MyAccount-content__body p a {
	color: var(--teal) !important;
}
#user-registration.vertical .user-registration-MyAccount-content__body p a:hover, #user-registration.horizontal .user-registration-MyAccount-content__body p a:hover,
#user-registration.vertical .user-registration-MyAccount-content__body p a:active, #user-registration.horizontal .user-registration-MyAccount-content__body p a:active {
	color: var(--accent) !important;
}
.entry-content #user-registration {
	margin: auto;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ur-frontend-form.login .ur-lost-password-content-container {
	align-items: start !important;
}
#user-registration p, #user-registration h2 {
	color: var(--contrast) !important;
}
#user-registration p {
    color: #333333;
    justify-content: space-between;
}
body.page-id-14 header.entry-header {
	text-align: center;
}
body.page-id-14 .ur-frontend-form {
	margin: auto;
}
@media(min-width: 768px) {
	.ur-form-row[data-row-id='0'] .ur-grid-1, .ur-form-row[data-row-id='4'] .ur-grid-1,
	.ur-form-row[data-row-id='7'] .ur-grid-1, .ur-form-row[data-row-id='8'] .ur-grid-1 {
		padding-right: 50px !important;
	}
}
div.ur-form-row {
	flex-wrap: wrap;
}
div.ur-form-row[data-row-id='0']::before, div.ur-form-row[data-row-id='4']::before,
div.ur-form-row[data-row-id='2']::before, div.ur-form-row[data-row-id='5']::before, 
div.ur-form-row[data-row-id='6']::before{
	content: 'Account Setup';
	font-size: 2em;
	width: 100%;
}
div.ur-form-row[data-row-id='4']::before {
	content: 'General Questions';
}
div.ur-form-row[data-row-id='2']::before {
	content: 'Active Trader Questions';
}
div.ur-form-row[data-row-id='5']::before {
	content: 'Active Learner Questions';
}
div.ur-form-row[data-row-id='6']::before {
	content: 'Terms and Conditions';
}