/* Custom styles for FX Trading components */

/* Image optimization */
img:is([sizes='auto' i], [sizes^='auto,' i]) {
  contain-intrinsic-size: 3000px 1500px;
}

/* WordPress Block Styles */
.wp-block-button__link {
  color: #fff;
  background-color: #32373c;
  border-radius: 9999px;
  box-shadow: none;
  text-decoration: none;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  font-size: 1.125em;
}

.wp-block-file__button {
  background: #32373c;
  color: #fff;
  text-decoration: none;
}

/* WordPress Global Styles */
:root {
  --wp--preset--aspect-ratio--square: 1;
  --wp--preset--aspect-ratio--4-3: 4/3;
  --wp--preset--aspect-ratio--3-4: 3/4;
  --wp--preset--aspect-ratio--3-2: 3/2;
  --wp--preset--aspect-ratio--2-3: 2/3;
  --wp--preset--aspect-ratio--16-9: 16/9;
  --wp--preset--aspect-ratio--9-16: 9/16;
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(
    135deg,
    rgba(6, 147, 227, 1) 0%,
    rgb(155, 81, 224) 100%
  );
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(
    135deg,
    rgb(122, 220, 180) 0%,
    rgb(0, 208, 130) 100%
  );
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(
    135deg,
    rgba(252, 185, 0, 1) 0%,
    rgba(255, 105, 0, 1) 100%
  );
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(
    135deg,
    rgba(255, 105, 0, 1) 0%,
    rgb(207, 46, 46) 100%
  );
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(
    135deg,
    rgb(238, 238, 238) 0%,
    rgb(169, 184, 195) 100%
  );
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(
    135deg,
    rgb(74, 234, 220) 0%,
    rgb(151, 120, 209) 20%,
    rgb(207, 42, 186) 40%,
    rgb(238, 44, 130) 60%,
    rgb(251, 105, 98) 80%,
    rgb(254, 248, 76) 100%
  );
  --wp--preset--gradient--blush-light-purple: linear-gradient(
    135deg,
    rgb(255, 206, 236) 0%,
    rgb(152, 150, 240) 100%
  );
  --wp--preset--gradient--blush-bordeaux: linear-gradient(
    135deg,
    rgb(254, 205, 165) 0%,
    rgb(254, 45, 45) 50%,
    rgb(107, 0, 62) 100%
  );
  --wp--preset--gradient--luminous-dusk: linear-gradient(
    135deg,
    rgb(255, 203, 112) 0%,
    rgb(199, 81, 192) 50%,
    rgb(65, 88, 208) 100%
  );
  --wp--preset--gradient--pale-ocean: linear-gradient(
    135deg,
    rgb(255, 245, 203) 0%,
    rgb(182, 227, 212) 50%,
    rgb(51, 167, 181) 100%
  );
  --wp--preset--gradient--electric-grass: linear-gradient(
    135deg,
    rgb(202, 248, 128) 0%,
    rgb(113, 206, 126) 100%
  );
  --wp--preset--gradient--midnight: linear-gradient(
    135deg,
    rgb(2, 3, 129) 0%,
    rgb(40, 116, 252) 100%
  );
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1),
    6px 6px rgba(0, 0, 0, 1);
  --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

/* WordPress Layout Styles */
:where(.is-layout-flex) {
  gap: 0.5em;
}

:where(.is-layout-grid) {
  gap: 0.5em;
}

body .is-layout-flex {
  display: flex;
}

.is-layout-flex {
  flex-wrap: wrap;
  align-items: center;
}

.is-layout-flex > :is(*, div) {
  margin: 0;
}

body .is-layout-grid {
  display: grid;
}

.is-layout-grid > :is(*, div) {
  margin: 0;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: 2em;
}

:where(.wp-block-columns.is-layout-grid) {
  gap: 2em;
}

:where(.wp-block-post-template.is-layout-flex) {
  gap: 1.25em;
}

:where(.wp-block-post-template.is-layout-grid) {
  gap: 1.25em;
}

/* WordPress Color Classes */
.has-black-color {
  color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-color {
  color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-color {
  color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-color {
  color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-color {
  color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-color {
  color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-color {
  color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-color {
  color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-color {
  color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-color {
  color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-color {
  color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-color {
  color: var(--wp--preset--color--vivid-purple) !important;
}

/* WordPress Background Color Classes */
.has-black-background-color {
  background-color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-background-color {
  background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-background-color {
  background-color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-background-color {
  background-color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-background-color {
  background-color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-background-color {
  background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-background-color {
  background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-background-color {
  background-color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-background-color {
  background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-background-color {
  background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-background-color {
  background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-background-color {
  background-color: var(--wp--preset--color--vivid-purple) !important;
}

/* WordPress Border Color Classes */
.has-black-border-color {
  border-color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-border-color {
  border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-border-color {
  border-color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-border-color {
  border-color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-border-color {
  border-color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-border-color {
  border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-border-color {
  border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-border-color {
  border-color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-border-color {
  border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-border-color {
  border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-border-color {
  border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-border-color {
  border-color: var(--wp--preset--color--vivid-purple) !important;
}

/* WordPress Gradient Background Classes */
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
  background: var(
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple
  ) !important;
}
.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
  background: var(
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan
  ) !important;
}
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
  background: var(
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange
  ) !important;
}
.has-luminous-vivid-orange-to-vivid-red-gradient-background {
  background: var(
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red
  ) !important;
}
.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
  background: var(
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray
  ) !important;
}
.has-cool-to-warm-spectrum-gradient-background {
  background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}
.has-blush-light-purple-gradient-background {
  background: var(--wp--preset--gradient--blush-light-purple) !important;
}
.has-blush-bordeaux-gradient-background {
  background: var(--wp--preset--gradient--blush-bordeaux) !important;
}
.has-luminous-dusk-gradient-background {
  background: var(--wp--preset--gradient--luminous-dusk) !important;
}
.has-pale-ocean-gradient-background {
  background: var(--wp--preset--gradient--pale-ocean) !important;
}
.has-electric-grass-gradient-background {
  background: var(--wp--preset--gradient--electric-grass) !important;
}
.has-midnight-gradient-background {
  background: var(--wp--preset--gradient--midnight) !important;
}

/* WordPress Font Size Classes */
.has-small-font-size {
  font-size: var(--wp--preset--font-size--small) !important;
}
.has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium) !important;
}
.has-large-font-size {
  font-size: var(--wp--preset--font-size--large) !important;
}
.has-x-large-font-size {
  font-size: var(--wp--preset--font-size--x-large) !important;
}

/* Swiper Styles */
@font-face {
  font-display: swap;
  font-family: swiper-icons;
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}

:root {
  --swiper-theme-color: #007aff;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0, 0, 0);
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

/* Language Dropdown Styles */
[id^='dropdown-language-button-'] {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  padding-left: 10px;
  padding-right: 10px;
}

[id^='dropdown-language-button-']:hover {
  background-color: #f3f4f6;
}

[id^='dropdown-language-'] {
  max-height: 350px;
  overflow-y: auto;
}

[id^='dropdown-language-'] ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

[id^='dropdown-language-'] li {
  margin: 0;
  padding: 0 5px;
}

[id^='dropdown-language-'] li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  background: none;
  border-radius: 6px;
}

[id^='dropdown-language-'] li a:hover {
  background-color: #f3f4f6;
  color: #1f2937;
}

[id^='dropdown-language-'].hidden {
  display: none;
}

#dropdown-language-mobile {
  max-height: 130px;
  left: 0;
}

.language-dropdown-container {
  position: relative;
  display: inline-block;
}

.language-dropdown-container .flag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.language-dropdown-container .flag-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[id^='dropdown-language-button-'] span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.language-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.language-select-block .block-opener {
  padding: 0 5px 0 9px;
  border-radius: 4px;
  min-height: 30px;
  border: 1px solid var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--white);
}

.language-select-block .block-opener .btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  fill: currentcolor;
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.language-select-block .block-opener .btn-text {
  font-size: 14px;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--white);
}

.lang-item {
  white-space: nowrap;
}

/* Easy Access Column Image Styles */
@media (min-width: 576px) and (max-width: 1024px) {
  .easy-access-col-img {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
    grid-column: span 2;
    position: relative;
  }
}

@media (min-width: 1024px) {
  .easy-access-col-img {
    height: auto;
  }
}

@media (max-width: 576px) {
  .easy-access-col-img img {
    max-width: 180px;
  }
}

/* Footer Language Selector */
#footer .language-selector {
  justify-content: left;
}

@media (min-width: 768px) {
  #footer .footer-content-right {
    text-align: right;
  }

  #footer .language-selector {
    justify-content: right;
  }
}

/* Payment Partners Styles */
.payment-partners-container {
  max-width: 1000px;
  margin: 0 auto;
}

.payment-partners-row-1 {
  justify-self: center;
  max-width: 100%;
}

.payment-partners-row-2 {
  justify-self: center;
  margin: 0 auto;
}

.payment-partners-item {
  width: 100%;
  max-width: 140px;
  height: 60px;
  transition: all 0.3s ease;
}

.payment-partners-row-3 .payment-partners-item {
  background: none;
}

@media (min-width: 640px) {
  .payment-partners-item {
    max-width: 160px;
    height: 70px;
  }
}

@media (min-width: 1024px) {
  .payment-partners-container {
  }

  .payment-partners-item {
    max-width: 180px;
    height: 80px;
  }

  .payment-partners-item img {
    max-height: 70px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .container-payment-partners-logos {
    max-width: 600px;
    margin: 0 auto;
  }

  .payment-partners-item img {
    max-height: 60px;
  }
}

@media (max-width: 768px) {
  .payment-partners-item {
    padding: 10px;
  }
}

@media (max-width: 639px) {
  .container-payment-partners-logos {
    max-width: 400px;
    margin: 0 auto;
  }

  .payment-partners-item {
    max-width: 140px !important;
    height: 60px !important;
  }

  .payment-partners-item img {
    max-height: 50px;
  }

  .payment-partners-row-3 {
    justify-self: center;
    max-width: 50%;
    margin: 0 auto;
  }
}

@media (max-width: 425px) {
  .payment-partners-item {
    padding: 0;
  }
}

/* Newsletter Message Styles */
#newsletter-message.success {
  display: block;
  color: var(--color-green-700);
}

#newsletter-message.error {
  display: block;
  color: var(--color-red-700);
}

/* Search Result Styles */
.search-result-item:hover,
.search-result-item.active {
  background-color: rgb(249 250 251) !important;
}

/* Data Table Styles */
@media (max-width: 768px) {
  #myDataTable thead tr th:nth-child(5),
  #myDataTable thead tr th:nth-child(6),
  #myDataTable thead tr th:nth-child(7),
  #myDataTable tbody tr td:nth-child(5),
  #myDataTable tbody tr td:nth-child(6),
  #myDataTable tbody tr td:nth-child(7) {
    display: none;
  }

  #myDataTable tbody tr td:nth-child(3) {
    text-align: center;
  }
}

/* Home Image Animation Styles */
.easy-access-col-img-animation {
  position: relative;
  height: 400px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.easy-access-col-img-animation img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 90%;
  height: auto;
  max-height: 85%;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}

.easy-access-col-img-animation img {
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 1;
}

.easy-access-col-img-animation img.animate-rotate {
  animation: rotateAntiClockwise 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;
  animation-fill-mode: both;
}

.easy-access-col-img-animation img:nth-child(1) {
  animation-delay: 0s;
}

.easy-access-col-img-animation img:nth-child(2) {
  animation-delay: 0s;
}

.easy-access-col-img-animation img:nth-child(3) {
  animation-delay: 0s;
}

@keyframes rotateAntiClockwise {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-40%, -100%) rotate(-20deg);
  }
}

.easy-access-col-img-animation::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgb(255 255 255 / 0.1) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.easy-access-col-img-animation:hover::before {
  opacity: 1;
}

@media (max-width: 768px) {
  .easy-access-col-img-animation {
    height: 300px;
  }

  .easy-access-col-img-animation img {
    max-width: 95%;
  }
}

@media (max-width: 480px) {
  .easy-access-col-img-animation {
    height: 250px;
  }
}

.easy-access-col-img-animation img.active {
  filter: drop-shadow(0 10px 30px rgb(0 0 0 / 0.2));
}

.easy-access-col-img-animation {
  width: 1100px;
  height: 900px;
  max-width: 100%;
}

#home-easy-access-animation .easy-access-col-img-animation {
  height: 1020px;
  width: 1500px;
  position: absolute;
}

#home-easy-access-animation-2 .easy-access-col-img-animation {
  position: absolute;
}

#home-easy-access-animation-3 .easy-access-col-img-animation {
  position: absolute;
}

#home-easy-access-animation {
  position: relative;
  height: 900px;
  justify-content: right;
}

#home-easy-access-animation-2 {
  position: relative;
  height: 700px;
}

#home-easy-access-animation-3 {
  position: relative;
  justify-content: right;
}

#device-laptop {
  top: 80%;
  left: 35%;
}

#device-tablet {
  top: 99%;
  left: 58%;
}

#device-mobile {
  top: 123%;
  left: 39%;
  max-width: 120%;
}

#home-easy-access-animation-2 {
  margin-top: -200px;
}

#home-easy-access-animation-3 {
  margin-top: -460px;
  height: 330px;
}

@media (max-width: 1024px) {
  #device-laptop {
    top: 68%;
    left: 36%;
  }

  #device-tablet {
    top: 84%;
    left: 58%;
    max-width: 80%;
  }

  #device-mobile {
    top: 99%;
    left: 38%;
    max-width: 50%;
  }

  #home-easy-access-animation-3 {
    margin-top: -590px;
  }
}

@media (max-width: 912px) {
  #device-laptop {
    top: 62%;
    left: 33%;
  }

  #device-tablet {
    top: 79%;
    left: 58%;
    max-width: 80%;
  }

  #device-mobile {
    top: 88%;
    left: 37%;
    max-width: 45%;
  }
}

@media (max-width: 853px) {
  #device-laptop {
    top: 62%;
    left: 33%;
  }

  #device-tablet {
    top: 79%;
    left: 58%;
    max-width: 80%;
  }

  #device-mobile {
    top: 88%;
    left: 37%;
    max-width: 45%;
  }

  .easy-access-col .card-easy-access {
    max-width: 260px;
  }
}

@media (max-width: 820px) {
  #device-laptop {
    top: 55%;
    left: 25%;
  }

  #device-tablet {
    top: 72%;
    left: 58%;
    max-width: 80%;
  }

  #device-mobile {
    top: 80%;
    left: 32%;
    max-width: 55%;
  }

  .easy-access-col .card-easy-access {
    max-width: 330px;
  }

  #home-easy-access-animation-2 {
    margin-top: -180px;
  }

  #home-easy-access-animation-3 {
    margin-top: -700px;
  }
}

@media (max-width: 768px) {
  #device-laptop {
    top: 55%;
    left: 25%;
  }

  #device-tablet {
    top: 72%;
    left: 58%;
    max-width: 80%;
  }

  #device-mobile {
    top: 80%;
    left: 32%;
    max-width: 55%;
  }
}

@media (max-width: 767px) {
  .easy-access-col-img-animation {
    height: 380px;
  }

  #home-easy-access-animation {
    height: auto;
  }

  #home-easy-access-animation-2 {
    height: auto;
    margin-top: 20px;
  }

  #home-easy-access-animation-3 {
    margin-top: 20px;
  }

  #home-easy-access-animation .easy-access-col-img-animation {
    position: relative;
    height: 380px;
  }

  #home-easy-access-animation-2 .easy-access-col-img-animation {
    height: 0;
    position: relative;
  }

  #home-easy-access-animation-3 .easy-access-col-img-animation {
    height: 0;
  }

  #device-laptop {
    top: 65%;
    left: 33%;
  }

  #device-tablet {
    top: 75%;
    left: 64%;
  }

  #device-mobile {
    top: 88%;
    left: 40%;
  }

  .easy-access-col .card-easy-access {
    max-width: 100%;
  }

  #home-easy-access-animation .easy-access-col {
    margin-top: -15%;
  }
}

/* SVG Fill Styles */
.s0 {
  fill: #303038;
}

/* Custom width for max-width xl */
.w-xl {
  max-width: 1200px;
}

/* Navigation styles */
.nav-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
}

.nav-container nav {
  position: relative;
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: none;
  z-index: 50;
}

.nav-submenu .max-w-6xl {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Mobile menu toggle animation */
.mobile-menu-toggle {
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  width: 40px;
  height: 40px;
}

.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #000000;
  margin: 3px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
}

.mobile-menu-toggle:hover span {
  background-color: #333333;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Language dropdown styles */
.language-dropdown-container .dropdown-language-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.language-dropdown-container.active .dropdown-language-panel,
.language-dropdown-container:hover .dropdown-language-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-language-panel ul li a {
  padding: 8px 16px;
  display: block;
  transition: background-color 0.2s ease;
}

.dropdown-language-panel ul li a:hover {
  background-color: #f3f4f6;
}

/* Navigation hover effects */
.nav-menu-item-btn {
  position: relative;
  transition: color 0.3s ease;
}

.nav-list-item:hover .nav-submenu {
  display: block;
  animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button styles */
.btn-actions {
  transition: all 0.3s ease;
}

.btn-actions:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Footer styles */
.footer-menu-col-title {
  margin-bottom: 16px;
}

.footer-menu-col-content a {
  transition: all 0.3s ease;
  line-height: 1.6;
}

.footer-menu-col-content a:hover {
  padding-left: 4px;
}

/* Social icons hover effects */
#social-icons a {
  transition: all 0.3s ease;
}

#social-icons a:hover {
  transform: translateY(-2px);
}

/* App download buttons */
.app-download-btn {
  transition: all 0.3s ease;
}

.app-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav.active {
  max-height: 500px;
}

.mobile-nav-overlay {
  transition: opacity 0.3s ease;
}

.mobile-nav-overlay.active {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-submenu {
    position: static;
    transform: none;
    min-width: auto;
    max-width: none;
    width: 100%;
    box-shadow: none;
    border: none;
    border-top: 1px solid #e5e7eb;
  }

  .footer-menu-col {
    margin-bottom: 2rem;
  }

  .w-xl {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Custom primary colors */
:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --new-login-bg: #1e2025;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
button:focus,
a:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Loading states */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Print styles */
@media print {
  .nav-container,
  .mobile-menu-toggle,
  .mobile-nav,
  .mobile-nav-overlay {
    display: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .text-gray-500 {
    color: #374151;
  }

  .border-gray-200 {
    border-color: #6b7280;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   RANGE SLIDER STYLES
   ======================================== */
/* Custom range slider component styles */
.range-slider-container {
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.range-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 50px;
  background: var(--color-gray-200);
  outline: none;
  background: linear-gradient(
    to right,
    var(--color-primary-600) 0%,
    var(--color-primary-600) 50%,
    var(--color-gray-200) 50%,
    var(--color-gray-200) 100%
  );
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 1px solid var(--color-gray-50);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}

.range-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 1px solid var(--color-gray-50);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}

.range-slider-tooltip {
  position: absolute;
  background-color: var(--color-gray-900);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  top: 45px;
  pointer-events: none;
  display: block;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.range-slider-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-gray-900) #fff0 #fff0 #fff0;
}

/* ========================================
   HOME EASY ACCESS STYLES
   ======================================== */
/* Home page easy access section image hover effects */
#home-easy-access .easy-access-col-img img.w-full {
  cursor: pointer !important;
  transform-origin: center center !important;
}

#home-easy-access .easy-access-col-img img[src*='mobile-phone'] {
  cursor: pointer !important;
  transform-origin: center center !important;
}

#home-easy-access .easy-access-col-img {
  transition: filter 0.3s ease !important;
}

#home-easy-access .easy-access-col-img:hover {
  filter: drop-shadow(0 10px 20px rgb(0 0 0 / 0.15)) !important;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
/* Global CSS styles from fxt-global-css */
strong {
  color: var(--color-gray-900);
}
.mark-t-code {
  background-color: yellow !important;
  color: red !important;
  -webkit-text-fill-color: red !important;
}
[id^='dropdown-language-button-'] {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  padding-left: 10px;
  padding-right: 10px;
}
[id^='dropdown-language-button-']:hover {
  background-color: #f3f4f6;
}
[id^='dropdown-language-'] {
  max-height: 350px;
  overflow-y: auto;
}
[id^='dropdown-language-'] ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
[id^='dropdown-language-'] li {
  margin: 0;
  padding: 0 5px;
}
[id^='dropdown-language-'] li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  background: none;
  border-radius: 6px;
}
[id^='dropdown-language-'] li a:hover {
  background-color: #f3f4f6;
  color: #1f2937;
}
[id^='dropdown-language-'].hidden {
  display: none;
}
#dropdown-language-mobile {
  max-height: 130px;
  left: 0;
}
.language-dropdown-container {
  position: relative;
  display: inline-block;
}
.language-dropdown-container .flag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.language-dropdown-container .flag-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[id^='dropdown-language-button-'] span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.language-select-block {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.language-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.language-select-block .block-opener {
  padding: 0 5px 0 9px;
  border-radius: 4px;
  min-height: 30px;
  border: 1px solid var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--white);
}
.language-select-block .block-opener .btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  fill: currentcolor;
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}
.language-select-block .block-opener .btn-text {
  font-size: 14px;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--white);
}
.language-select-block .block-list {
  width: auto;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  border-radius: 4px;
  background: var(--white);
  z-index: 10;
  -webkit-transition: all var(--t);
  -o-transition: all var(--t);
  transition: all var(--t);
  -webkit-transform: translateY(16px);
  -ms-transform: translateY(16px);
  transform: translateY(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-box-shadow: 3px 3px 10px rgb(0 0 0 / 0.1);
  box-shadow: 3px 3px 10px rgb(0 0 0 / 0.1);
}
.language-select-block .block-list:before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 100%;
}
.lang-item {
  white-space: nowrap;
}
.language-select-block .block-list li a {
  font-size: 14px;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--white);
  color: var(--text-dark);
  padding: 0 10px;
  text-align: center;
  display: block;
}
.easy-access-col-img {
  position: relative;
}
.easy-access-col-img img {
  height: auto;
  margin: auto;
  position: relative;
  max-width: 300px;
}
@media (min-width: 576px) and (max-width: 1024px) {
  .easy-access-col-img {
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
    grid-column: span 2;
    position: relative;
  }
  .easy-access-col-img img {
    margin: auto;
    position: relative;
  }
}
@media (min-width: 1024px) {
  .easy-access-col-img {
    height: auto;
  }
  .easy-access-col-img img {
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 576px) {
  .easy-access-col-img img {
    max-width: 180px;
  }
}
#footer .language-selector {
  justify-content: left;
}
@media (min-width: 768px) {
  #footer .footer-content-right {
    text-align: right;
  }
  #footer .language-selector {
    justify-content: right;
  }
}
.datatable-container {
  padding: 0;
  border: none;
}
#myDataTable.datatable-table {
  border-collapse: separate;
  border-spacing: 0 10px;
  padding: 15px 5px;
}
.datatable-wrapper #myDataTable.datatable-table thead tr,
.datatable-wrapper #myDataTable.datatable-table tbody tr {
  border-radius: 6px;
}
.datatable-wrapper #myDataTable.datatable-table thead th:not(:first-child),
.datatable-wrapper #myDataTable.datatable-table tbody td:not(:first-child),
.datatable-wrapper #myDataTable.datatable-table thead th:not(:last-child),
.datatable-wrapper #myDataTable.datatable-table tbody td:not(:last-child) {
  padding: 10px 15px;
  -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 0.05);
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 0.05);
  clip-path: inset(-5px 0 -5px 0);
}
.datatable-wrapper #myDataTable.datatable-table thead th:first-child,
.datatable-wrapper #myDataTable.datatable-table tbody td:first-child {
  -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 0.05);
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 0.05);
  clip-path: inset(-5px 0 -5px -5px);
}
.datatable-wrapper #myDataTable.datatable-table thead th:last-child,
.datatable-wrapper #myDataTable.datatable-table tbody td:last-child {
  -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 0.05);
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 0.05);
  clip-path: inset(-5px -5px -5px 0);
}
.datatable-wrapper #myDataTable.datatable-table tbody tr {
  border-bottom: none;
}
.datatable-wrapper #myDataTable.datatable-table tbody tr td {
  width: 100px !important;
}
.datatable-wrapper .datatable-table thead th {
  padding-top: 10px;
  background: #fff;
  color: var(--color-gray-900);
  width: 100px !important;
}
#section-faqs button[aria-expanded='true'] svg.icon-question {
  color: var(--color-primary-600);
}
#section-faqs button[aria-expanded='false'] svg.icon-question {
  color: var(--color-primary-500);
}

/* Ensure FAQ section has gray background */
#section-faqs {
  background-color: #f9fafb !important;
  background-image: none !important;
}

/* Ensure section-trade-with-fxt has gray background and no background images (except demo.php) */
.section-trade-with-fxt:not(.demo-page) {
  background-color: #f9fafb !important;
  background-image: none !important;
}

/* Override any inline styles or data attributes for section-trade-with-fxt */
.section-trade-with-fxt:not(.demo-page)[style*="background-image"] {
  background-image: none !important;
}

.section-trade-with-fxt:not(.demo-page)[data-lazy-style*="background-image"] {
  background-image: none !important;
}

/* Specific rule for demo.php to allow background images */
.demo-page .section-trade-with-fxt {
  background-color: #f9fafb !important;
  /* Allow background images for demo page */
}

/* Allow primary-50 background for sections with allow-primary-bg class */
.section-trade-with-fxt.allow-primary-bg {
  background-color: var(--primary-50) !important;
  background-image: none !important;
}

/* Allow primary-600 background for sections with allow-primary-600-bg class */
.section-trade-with-fxt.allow-primary-600-bg {
  background-color: var(--primary-600) !important;
  background-image: none !important;
}

/* Allow background images for sections with allow-bg-image class */
.section-trade-with-fxt.allow-bg-image {
  background-color: transparent !important;
  background-image: inherit !important;
}

/* Allow black background for sections with allow-black-bg class */
.section-trade-with-fxt.allow-black-bg {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Allow dark gray background for mobile sections with allow-mobile-dark-bg class */
.section-trade-with-fxt.allow-mobile-dark-bg {
  background-color: #111928 !important;
  background-image: none !important;
}

/* Allow primary-700 background for sections with allow-primary-700-bg class */
.section-trade-with-fxt.allow-primary-700-bg {
  background-color: #1a56db !important;
  background-image: none !important;
}

/* Allow primary-600 background for sections with allow-primary-600-bg class */
.section-trade-with-fxt.allow-primary-600-bg {
  background-color: #1c64f2 !important;
  background-image: none !important;
}

/* Mobile-specific override for dark background */
@media (max-width: 768px) {
  .section-trade-with-fxt.allow-mobile-dark-bg {
    background-color: #111928 !important;
    background-image: none !important;
  }
  
  /* Force dark background on mobile for sections with md:hidden */
  .section-trade-with-fxt.md\:hidden {
    background-color: #111928 !important;
    background-image: none !important;
  }
}
.container-payment-partners-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.payment-partners-container {
  max-width: 1000px;
  margin: 0 auto;
}
.payment-partners-row-1 {
  justify-self: center;
  max-width: 100%;
}
.payment-partners-row-2 {
  justify-self: center;
  margin: 0 auto;
}
.payment-partners-item {
  width: 100%;
  max-width: 140px;
  height: 60px;
  transition: all 0.3s ease;
}
.payment-partners-row-3 .payment-partners-item {
  background: none;
}
@media (min-width: 640px) {
  .payment-partners-item {
    max-width: 160px;
    height: 70px;
  }
}
@media (min-width: 1024px) {
  .payment-partners-container {
  }
  .payment-partners-item {
    max-width: 180px;
    height: 80px;
  }
  .payment-partners-item img {
    max-height: 70px;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .container-payment-partners-logos {
    max-width: 600px;
    margin: 0 auto;
  }
  .payment-partners-item img {
    max-height: 60px;
  }
}
@media (max-width: 768px) {
  .payment-partners-item {
    padding: 10px;
  }
}
@media (max-width: 639px) {
  .container-payment-partners-logos {
    max-width: 400px;
    margin: 0 auto;
  }
  .payment-partners-item {
    max-width: 140px !important;
    height: 60px !important;
  }
  .payment-partners-item img {
    max-height: 50px;
  }
  .payment-partners-row-3 {
    justify-self: center;
    max-width: 50%;
    margin: 0 auto;
  }
}
@media (max-width: 425px) {
  .payment-partners-item {
    padding: 0;
  }
}
#newsletter-message {
  display: none;
}
#newsletter-message.success {
  display: block;
  color: var(--color-green-700);
}
#newsletter-message.error {
  display: block;
  color: var(--color-red-700);
}
.bg-top {
  background-position: top !important;
}

/* ========================================
   AJAX SEARCH STYLES
   ======================================== */
/* AJAX search functionality styles from fxt-ajax-search-css */
#search-results-container {
  max-height: 400px;
  overflow-y: auto;
}
.search-result-item {
  transition: background-color 0.15s ease;
}
.search-result-item:hover,
.search-result-item.active {
  background-color: rgb(249 250 251) !important;
}
.search-result-item a {
  display: block;
  width: 100%;
  text-decoration: none;
}
#search-results-container::-webkit-scrollbar {
  width: 6px;
}
#search-results-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
#search-results-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
}
#search-results-container::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/* ========================================
   MARKETS SYMBOLS WIDGET STYLES
   ======================================== */
/* Markets symbols widget styles from fxt-markets-symbols-widget-styles-css */
#symbols-vue-app[v-cloak] {
  display: none;
}
#symbols-vue-app .item-value {
  transition: 0.4s;
  color: #000;
}
#symbols-vue-app .rise {
  color: #81ff5b;
  transition: 0.1s;
}
#symbols-vue-app .fall {
  color: #ff6262;
  transition: 0.1s;
}
#symbols-vue-app div.from img {
  object-fit: cover;
}
#symbols-vue-app .table .cell-flex-content {
  justify-content: space-between;
}
#symbols-vue-app div.block-text {
  margin-left: 4px;
}
#symbols-vue-app table tr.hide {
  display: none !important;
}
#symbols-vue-app .no-data {
  margin: 10px auto;
  text-align: center;
}
#symbols-vue-app .table .inner-table > thead {
  border: none;
}
#symbols-vue-app div.tab .block-table,
#symbols-vue-app div.tab .block-slider {
  transition: 0.5s;
}
.datatable-sorter {
  text-align: left;
}
.link-trade {
  text-decoration: none;
  background-color: var(--color-primary-600);
  color: var(--color-white);
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
}
.link-trade:hover {
  background-color: var(--color-primary-700);
}
.link-trade:hover svg path {
  stroke: var(--color-white);
}
#myDataTable .rise {
  color: #4cce6c;
  transition: 0.1s;
}
#myDataTable .fall {
  color: #ff5349;
  transition: 0.1s;
}
@media (max-width: 768px) {
  #myDataTable thead tr th:nth-child(5),
  #myDataTable thead tr th:nth-child(6),
  #myDataTable thead tr th:nth-child(7),
  #myDataTable tbody tr td:nth-child(5),
  #myDataTable tbody tr td:nth-child(6),
  #myDataTable tbody tr td:nth-child(7) {
    display: none;
  }
  #myDataTable tbody tr td:nth-child(3) {
    text-align: center;
  }
  .datatable-wrapper #myDataTable.datatable-table thead th,
  .datatable-wrapper #myDataTable.datatable-table tbody td {
    padding: 10px 5px !important;
  }
}

/* ========================================
   REGISTER PAGE STYLES
   ======================================== */
/* Dark theme styles from file.html */
body.dark {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  color: #ffffff;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Light theme styles */
body.light {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body.light .login-box {
  background: #ffffff;
}

body.light .left-wrapper {
  background-color: #f8fafc;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

body.light .logo-section svg {
  fill: #1a1a1a;
}

body.light .logo-fx {
  color: #1d4ed8;
}

body.light .logo-trading {
  color: #1a1a1a;
}

body.light .text-24,
body.light .text-20 {
  color: #1a1a1a;
}

body.light .carousel-title {
  color: #1a1a1a;
}

body.light .carousel-description {
  color: #4b5563;
}

body.light .carousel-image {
  filter: brightness(1.1) contrast(1.1);
}

body.light .control-item span {
  color: #666666;
}

body.light .control-item svg {
  fill: #666666;
}

body.light .login-container-wraper h3 {
  color: #1a1a1a;
}

body.light .arco-form-item-label {
  color: #1a1a1a;
}

body.light .arco-input {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #1a1a1a;
}

body.light .arco-select-view {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #1a1a1a;
}

body.light .arco-input::placeholder {
  color: #6c757d;
}

body.light .arco-input-prefix svg,
body.light .arco-input-suffix svg {
  fill: #6c757d;
}

body.light .partner-code-section p {
  color: #666666;
}

body.light .social-divider div {
  background: #e9ecef;
}

body.light .social-divider span {
  color: #6c757d;
}

body.light .social-btn {
  border-color: #e9ecef;
  color: #1a1a1a;
}

body.light .social-btn svg {
  fill: #1a1a1a;
}

body.light .social-btn span {
  color: #1a1a1a;
}

/* Light theme support for top-controls */
body.light .top-controls {
  background: #ffffff;
  border-bottom: none;
}

/* Login box container */
.login-box {
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #0a0a0a;
  overflow: hidden;
}

/* Left wrapper with carousel */
.left-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 700px;
  overflow: hidden;
  background-color: var(--new-login-bg);
  z-index: 1000;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}

.left-wrapper > div {
  height: 100%;
  min-width: 700px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.logo-section {
  padding-left: 76px;
  padding-top: 76px;
}

/* FXTRADING.com Logo Styling */
.fxtrading-logo {
  display: flex;
  align-items: baseline;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

.logo-fx {
  font-size: 32px;
  color: #3B82F6;
  font-weight: 900;
  letter-spacing: -1px;
}

.logo-trading {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  margin-left: 2px;
}

.logo-section svg {
  width: 280px;
  height: 43px;
  fill: #ffffff;
}

.carousel-section {
  width: 100%;
  flex: 1;
  padding: 26px;
}

/* Carousel Content Styling */
.carousel-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 20px;
}

.carousel-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
  flex-shrink: 0;
}

.carousel-image {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
}

.carousel-text-container {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 60px;
  flex-shrink: 0;
}

.carousel-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 15px;
  text-align: center;
}

.carousel-description {
  font-size: 16px;
  font-weight: 400;
  color: #e5e7eb;
  line-height: 1.6;
  text-align: center;
  opacity: 0.9;
}

/* Custom Carousel Styles */
.custom-carousel {
  width: 100%;
  height: 98%;
  position: relative;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.34, 0.69, 0.1, 1);
}

.carousel-slide.active {
  opacity: 1;
  transform: translateX(0);
}

.carousel-slide.prev {
  transform: translateX(-100%);
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-item img {
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
  display: block;
}

.swapper-text-box {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  bottom: 20px;
}

.swapper-text-box p {
  text-align: center;
  margin: 10px 0;
}

.text-24 {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}

.text-20 {
  font-size: 20px;
  font-weight: 500;
  color: #cccccc;
}

/* Right wrapper with form */
.right-wrapper {
  flex: 1;
  padding: 0 20px 20px 20px;
  margin-left: 700px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Custom scrollbar for right wrapper */
.right-wrapper::-webkit-scrollbar {
  width: 6px;
}

.right-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.right-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.right-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.top-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0a0a0a;
  padding: 15px 20px;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
}

.control-item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  transition: opacity 0.3s ease;
}

.control-item:hover {
  opacity: 0.8;
}

.control-item.padded {
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.control-item.padded:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.control-item svg {
  width: 20px;
  height: 20px;
  fill: #cccccc;
}

.control-item span {
  font-size: 14px;
  color: #cccccc;
  font-weight: 500;
  text-transform: capitalize;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  fill: #cccccc;
}

/* Login form container */
.login-wrap-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
}

.login-container-wraper {
  width: 100%;
  max-width: 400px;
  padding: 80px 0 70px 0;
  min-height: calc(100vh - 70px);
}

.login-container-wraper h3 {
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 50px;
  text-align: center;
}

/* Login tabs */
.login-tabs-box {
  position: relative;
  margin-bottom: 30px;
}

.login-tab {
  display: inline-block;
  padding: 12px 24px;
  color: #cccccc;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
}

.login-tab.active {
  color: #ffffff;
}

.login-tabs-block {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #007bff;
  transition: all 0.3s ease;
}

/* Form styles */
.arco-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.arco-form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arco-form-item-label {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

.arco-input-wrapper {
  position: relative;
  width: 100%;
}

.arco-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #333333;
  border-radius: 8px;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 16px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.arco-input:focus {
  outline: none;
  border-color: #007bff;
}

.arco-input::placeholder {
  color: #666666;
}

.arco-input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.arco-input-prefix svg {
  width: 20px;
  height: 20px;
  fill: #666666;
}

.arco-input-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.arco-input-suffix svg {
  width: 20px;
  height: 20px;
  fill: #666666;
  cursor: pointer;
}

.arco-input[type='text'],
.arco-input[type='email'],
.arco-input[type='password'] {
  padding-left: 48px;
  padding-right: 48px;
}

/* Select styles */
.arco-select {
  width: 100%;
}

.arco-select-view {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #333333;
  border-radius: 8px;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.arco-select-view:focus {
  outline: none;
  border-color: #007bff;
}

.arco-select-view-input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 16px;
  width: 100%;
}

.arco-select-view-input::placeholder {
  color: #666666;
}

.arco-select-view-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.arco-select-view-icon {
  width: 20px;
  height: 20px;
  fill: #666666;
}

/* Button styles */
.theme {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.theme.large {
  padding: 16px 24px;
  font-size: 18px;
}

.theme.primary {
  background: #007bff;
  color: #ffffff;
}

.theme.primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

.theme.block {
  display: block;
  width: 100%;
}

/* Partner code section */
.partner-code-section {
  margin-top: 20px;
}

.partner-code-section p {
  font-size: 14px;
  color: #cccccc;
  margin-bottom: 8px;
}

.partner-code-section span {
  font-size: 12px;
  color: #999999;
}

/* Social login section */
.social-login {
  margin-top: 30px;
  margin-bottom: 10px;
}

.social-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}

.social-divider div {
  height: 1px;
  flex: 1;
  background: #333333;
}

.social-divider span {
  font-size: 12px;
  color: #666666;
  font-weight: normal;
  flex-shrink: 0;
}

.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.social-btn {
  flex: 1;
  border: 2px solid #333333;
  height: 48px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #ffffff;
}

.social-btn:hover {
  opacity: 0.8;
  border-color: #007bff;
}

.social-btn svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}

.social-btn span {
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
}

/* Responsive design for register page */
@media (max-width: 768px) {
  .login-box {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .left-wrapper {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    z-index: 1001;
    transition: left 0.3s ease;
  }

  .right-wrapper {
    margin-left: 0;
    height: auto;
    overflow: visible;
    padding: 20px;
  }

  .login-container-wraper {
    max-width: 100%;
  }
}

/* Carousel indicators and arrows */
.arco-carousel-indicator-wrapper {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.arco-carousel-indicator {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.arco-carousel-indicator-item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.arco-carousel-indicator-item:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.arco-carousel-indicator-item-active {
  background: #3B82F6;
  border-color: #ffffff;
  transform: scale(1.3);
}

.arco-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.arco-carousel-arrow-left {
  left: 20px;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.arco-carousel-arrow-right {
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.arco-carousel-arrow-left:hover,
.arco-carousel-arrow-right:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.arco-icon {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
  fill: none;
}

/* Custom Carousel Indicators */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.2);
}

.indicator.active {
  background: #6b7280;
  transform: scale(1.1);
}

/* Custom Carousel Arrows */
.carousel-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  pointer-events: none;
}

.carousel-arrow {
  position: absolute;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
  pointer-events: auto;
}

.carousel-arrow-left {
  left: 20px;
}

.carousel-arrow-right {
  right: 20px;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.carousel-arrow svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
  stroke-width: 3;
}

/* Custom Country Selector */
.custom-country-select {
  position: relative;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.country-select-input {
  position: relative;
  width: 100%;
  display: block;
}

.country-search {
  width: 100%;
  padding: 12px 40px 12px 12px;
  border: 2px solid #333333;
  border-radius: 6px;
  background-color: #1a1a1a;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.5715;
  box-sizing: border-box;
}

.country-search:focus {
  outline: none;
  border-color: #007bff;
}

.country-dropdown-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666666;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.country-dropdown-icon svg {
  width: 20px;
  height: 20px;
}

.custom-country-select.open .country-dropdown-icon {
  transform: translateY(-50%) rotate(180deg);
}

.country-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  background-color: #1a1a1a;
  border: 2px solid #333333;
  border-radius: 6px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3), 0 3px 6px -4px rgba(0, 0, 0, 0.4), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  display: none;
  box-sizing: border-box;
  min-width: 0;
}

.country-dropdown.show {
  display: block;
}

.country-options {
  padding: 4px 0;
  width: 100%;
}

.country-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
}

.country-option:hover {
  background-color: #333333;
}

.country-flag {
  font-size: 20px;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.country-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

/* Custom scrollbar for dropdown */
.country-dropdown::-webkit-scrollbar {
  width: 6px;
}

.country-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.country-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.country-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Light theme support for country selector */
body.light .country-search {
  background-color: #f8f9fa;
  border-color: #e9ecef;
  color: #1a1a1a;
}

body.light .country-search:focus {
  border-color: #007bff;
}

body.light .country-dropdown-icon {
  color: #6c757d;
}

body.light .country-dropdown {
  background-color: #ffffff;
  border-color: #e9ecef;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

body.light .country-option:hover {
  background-color: #f2f3f5;
}

body.light .country-name {
  color: #1a1a1a;
}

/* Sign In button styling */
button.sign-in-btn,
button.theme.primary.sign-in-btn {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #ffffff !important;
}

button.sign-in-btn:hover,
button.theme.primary.sign-in-btn:hover {
  background-color: #f8f9fa !important;
  color: #1a1a1a !important;
  border-color: #f8f9fa !important;
  transform: none !important;
}

button.sign-in-btn:focus,
button.theme.primary.sign-in-btn:focus {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* Create Account button styling */
button.create-account-btn,
button.theme.primary.create-account-btn {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #ffffff !important;
}

button.create-account-btn:hover,
button.theme.primary.create-account-btn:hover {
  background-color: #f8f9fa !important;
  color: #1a1a1a !important;
  border-color: #f8f9fa !important;
  transform: none !important;
}

button.create-account-btn:focus,
button.theme.primary.create-account-btn:focus {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* Light theme button styling */
body.light button.sign-in-btn,
body.light button.theme.primary.sign-in-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.light button.sign-in-btn:hover,
body.light button.theme.primary.sign-in-btn:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
  transform: none !important;
}

body.light button.sign-in-btn:focus,
body.light button.theme.primary.sign-in-btn:focus {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

body.light button.create-account-btn,
body.light button.theme.primary.create-account-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.light button.create-account-btn:hover,
body.light button.theme.primary.create-account-btn:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
  transform: none !important;
}

body.light button.create-account-btn:focus,
body.light button.theme.primary.create-account-btn:focus {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* Theme toggle icon styling */
.theme-icon {
  transition: all 0.3s ease;
}

/* Dark theme - white moon icon */
body.dark .theme-icon {
  color: #ffffff;
  stroke: #ffffff;
}

/* Light theme - black sun icon */
body.light .theme-icon {
  color: #000000;
  stroke: #000000;
}

/* Carousel slide transitions */
.arco-carousel-item-prev,
.arco-carousel-item-next {
  display: none;
}

.arco-carousel-item-current {
  display: block;
}

/* Dashboard preview styles to match promotional image */
.dashboard-preview {
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 300px;
}

.dashboard-header h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
}

.account-items,
.trading-panel,
.market-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-item,
.trading-item,
.market-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-chart {
  margin-top: 20px;
}

.dashboard-chart h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
}

.chart-bars {
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 80px;
  gap: 8px;
}

.bar {
  width: 20px;
  background: linear-gradient(to top, #007bff, #60a5fa);
  border-radius: 4px 4px 0 0;
  min-height: 10px;
  transition: all 0.3s ease;
}

.bar:hover {
  background: linear-gradient(to top, #0056b3, #3b82f6);
  transform: scale(1.1);
}

/* Light theme dashboard styles */
body.light .dashboard-preview {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light .dashboard-header h3,
body.light .dashboard-chart h3 {
  color: #1a1a1a;
}

body.light .account-item,
body.light .trading-item,
body.light .market-item {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light .bar {
  background: linear-gradient(to top, #1a1a1a, #666666);
}

body.light .bar:hover {
  background: linear-gradient(to top, #000000, #333333);
}

/* Additional utility classes for register page */
.text-text-color-950 {
  color: #ffffff;
}
.text-text-color-900 {
  color: #ffffff;
}
.text-text-color-700 {
  color: #cccccc;
}
.text-text-color-600 {
  color: #999999;
}
.bg-bg-color-0 {
  background: #0a0a0a;
}
.bg-bg-color-100 {
  background: #1a1a1a;
}
.border-border-color-100 {
  border-color: #333333;
}
.border-border-color-200 {
  border-color: #333333;
}

/* ========================================
   IMAGE ANIMATION STYLES
   ======================================== */
/* Home image animation styles from fxt-image-animation-css */
.easy-access-col-img-animation {
  position: relative;
  height: 400px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.easy-access-col-img-animation img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 90%;
  height: auto;
  max-height: 85%;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.easy-access-col-img-animation img {
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 1;
}
.easy-access-col-img-animation img.animate-rotate {
  animation: rotateAntiClockwise 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;
  animation-fill-mode: both;
}
.easy-access-col-img-animation img:nth-child(1) {
  animation-delay: 0s;
}
.easy-access-col-img-animation img:nth-child(2) {
  animation-delay: 0s;
}
.easy-access-col-img-animation img:nth-child(3) {
  animation-delay: 0s;
}
@keyframes rotateAntiClockwise {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-40%, -100%) rotate(-20deg);
  }
}
.easy-access-col-img-animation::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgb(255 255 255 / 0.1) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.easy-access-col-img-animation:hover::before {
  opacity: 1;
}
@media (max-width: 768px) {
  .easy-access-col-img-animation {
    height: 300px;
  }
  .easy-access-col-img-animation img {
    max-width: 95%;
  }
}
@media (max-width: 480px) {
  .easy-access-col-img-animation {
    height: 250px;
  }
}
.easy-access-col-img-animation img.active {
  filter: drop-shadow(0 10px 30px rgb(0 0 0 / 0.2));
}
.easy-access-col-img-animation.paused img {
  animation-play-state: paused;
}
.easy-access-col-img-animation {
  width: 1100px;
  height: 900px;
  max-width: 100%;
}
.easy-access-col-img-animation-2 {
  width: 1000px;
  height: 1000px;
  max-width: 100%;
}
#home-easy-access-animation .easy-access-col-img-animation {
  height: 1020px;
  width: 1500px;
  position: absolute;
}
#home-easy-access-animation-2 .easy-access-col-img-animation {
  position: absolute;
}
#home-easy-access-animation-3 .easy-access-col-img-animation {
  position: absolute;
}
#home-easy-access-animation {
  position: relative;
  height: 900px;
  justify-content: right;
}
#home-easy-access-animation-2 {
  position: relative;
  height: 700px;
}
#home-easy-access-animation-3 {
  position: relative;
  justify-content: right;
}
#device-laptop {
  top: 80%;
  left: 35%;
}
#device-tablet {
  top: 99%;
  left: 58%;
}
#device-mobile {
  top: 123%;
  left: 39%;
  max-width: 120%;
}
#device-tablet-2 {
  display: none;
}
#device-mobile-2 {
  display: none;
}
#easy-access-col-text {
  z-index: 5;
}
#home-easy-access-animation-2 {
  margin-top: -200px;
}
#home-easy-access-animation-3 {
  margin-top: -460px;
  height: 330px;
}
@media (max-width: 1024px) {
  #device-laptop {
    top: 68%;
    left: 36%;
  }
  #device-tablet {
    top: 84%;
    left: 58%;
    max-width: 80%;
  }
  #device-mobile {
    top: 99%;
    left: 38%;
    max-width: 50%;
  }
  #home-easy-access-animation-3 {
    margin-top: -590px;
  }
}
@media (max-width: 912px) {
  #device-laptop {
    top: 62%;
    left: 33%;
  }
  #device-tablet {
    top: 79%;
    left: 58%;
    max-width: 80%;
  }
  #device-mobile {
    top: 88%;
    left: 37%;
    max-width: 45%;
  }
}
@media (max-width: 853px) {
  #device-laptop {
    top: 62%;
    left: 33%;
  }
  #device-tablet {
    top: 79%;
    left: 58%;
    max-width: 80%;
  }
  #device-mobile {
    top: 88%;
    left: 37%;
    max-width: 45%;
  }
  .easy-access-col .card-easy-access {
    max-width: 260px;
  }
}
@media (max-width: 820px) {
  #device-laptop {
    top: 55%;
    left: 25%;
  }
  #device-tablet {
    top: 72%;
    left: 58%;
    max-width: 80%;
  }
  #device-mobile {
    top: 80%;
    left: 32%;
    max-width: 55%;
  }
  .easy-access-col .card-easy-access {
    max-width: 330px;
  }
  #home-easy-access-animation-2 {
    margin-top: -180px;
  }
  #home-easy-access-animation-3 {
    margin-top: -700px;
  }
}
@media (max-width: 768px) {
  #device-laptop {
    top: 55%;
    left: 25%;
  }
  #device-tablet {
    top: 72%;
    left: 58%;
    max-width: 80%;
  }
  #device-mobile {
    top: 80%;
    left: 32%;
    max-width: 55%;
  }
}
@media (max-width: 767px) {
  .easy-access-col-img-animation {
    height: 380px;
  }
  #home-easy-access-animation {
    height: auto;
  }
  #home-easy-access-animation-2 {
    height: auto;
    margin-top: 20px;
  }
  #home-easy-access-animation-3 {
    margin-top: 20px;
  }
  #home-easy-access-animation .easy-access-col-img-animation {
    position: relative;
    height: 380px;
  }
  #home-easy-access-animation-2 .easy-access-col-img-animation {
    height: 0;
    position: relative;
  }
  #home-easy-access-animation-3 .easy-access-col-img-animation {
    height: 0;
  }
  #device-laptop {
    top: 65%;
    left: 33%;
  }
  #device-tablet {
    top: 75%;
    left: 64%;
  }
  #device-mobile {
    top: 88%;
    left: 40%;
  }
  #device-tablet-2 {
    top: 55%;
    left: 75%;
    display: block;
  }
  #device-mobile-2 {
    top: 76%;
    left: 48%;
    max-width: 250px;
    display: block;
  }
  .easy-access-col .card-easy-access {
    max-width: 100%;
  }
  #home-easy-access-animation .easy-access-col {
    margin-top: -15%;
  }
}

/* Table column width optimizations */
.table-symbols-col { width: 20.9%; }
.table-bid-col { width: 10.8%; }
.table-spread-col { width: 9.5%; }
.table-ask-col { width: 11.2%; }
.table-datetime-col { width: 14.4%; }
.table-leverage-col { width: 11.1%; }
.table-currency-col { width: 11.6%; }
.table-trade-col { width: 10.5%; }

/* Swiper slide width optimizations */
.swiper-slide-800 { width: 800px; margin-right: 30px; }
.swiper-slide-1232 { width: 1232px; margin-right: 30px; }