/* loader */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@font-face {
  font-family: 'Amerika';
  src:
    url('../fonts/Amerika-Regular.woff2') format('woff2'),
    url('../fonts/Amerika-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

#logo {
  animation: fadeInOut 1.5s ease-in-out infinite;
}

#site-wrapper {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#site-wrapper.loaded {
  opacity: 1;
}

.header {
  z-index: 4;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;
}

.is-fixed {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  /* важно для перекрытия контента */
  transform: translateY(0);
  border-bottom: 1px solid #1c1c1c;
  background:
    radial-gradient(66.59% 87.5% at 49% 105%, rgba(240, 185, 11, 0.2) 0%, rgba(240, 185, 11, 0) 100%), var(--dark-gray);
  opacity: 1;
  -webkit-backface-visibility: hidden;
  /* фикс для iOS */
  backface-visibility: hidden;
  will-change: transform;
  /* помогает при залипании в Safari */
  -webkit-transform: translateZ(0);
  /* триггерит GPU-рендер в WebKit */
}

.menu-open {
  overflow: hidden;
}

.mobile-menu-wrapper {
  top: 100%;
  display: none;
  flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 130px);
}

.menu-open .mobile-menu-wrapper {
  display: flex;
}

.menu-open .burger-menu button span:nth-child(1) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-open .burger-menu button span:nth-child(2) {
  opacity: 0;
}

.menu-open .burger-menu button span:nth-child(3) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.menu-header-mob .sub-menu {
  padding-bottom: 10px;
  font-size: 12px;
}

.menu-header-mob li.menu-item-has-children a {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-header-mob a {
  padding: 6px;
  display: flex;
}

.menu-language-mob {
  width: 100%;
}

.menu-language-mob .dropdown-menu {
  display: none;
}

.menu-language-mob.open .dropdown-menu {
  display: block;
}

.menu-language-mob li.menu-item-has-children a::after {
  content: '';
  width: 17px;
  height: 13.136px;
  background-image: url('../img/arrow-menu.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
  margin-left: 10px;
}

.menu-language-mob.open li.menu-item-has-children a::after {
  transform: rotate(180deg);
}

.menu-language-mob li.menu-item-has-children .dropdown-menu a::after {
  content: none;
}

#menu-menu-mobile .menu-item-has-children .sub-menu {
  display: none;
}

#menu-menu-mobile .menu-item-has-children.open .sub-menu {
  display: block;
}

.menu-menu-mobile li.menu-item-has-children a::after {
  content: '';
  width: 17px;
  height: 13.136px;
  background-image: url('../img/arrow-menu.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
  margin-left: 10px;
}

.menu-menu-mobile li.menu-item-has-children.open a::after {
  transform: rotate(180deg);
}

.menu-menu-mobile li.menu-item-has-children .sub-menu a::after {
  content: none;
}

.menu-header-mob .sub-menu a {
  padding: 10px 15px;
}

.bg-choouse {
  background-image: url(../img/bg-choose.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.elipse-gate::before {
  content: '';
  position: absolute;
  border-radius: 297.374px;
  background: var(--green-fresh);
  filter: blur(81.41285705566406px);
  width: 297px;
  height: 138px;
  right: 10%;
  top: 28%;
  transform: translate(0%, -45%);
  z-index: 0;
}

.elipse-window::before {
  content: '';
  position: absolute;
  border-radius: 609.53px;
  background: var(--green-fresh);
  filter: blur(172.90447998046875px);
  width: 610px;
  height: 221px;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.elipse-become:before {
  content: '';
  position: absolute;
  border-radius: 335.165px;
  background: var(--green-fresh);
  filter: blur(97.19298553466797px);
  width: 232px;
  height: 247px;
  left: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.promocode {
  height: 35px;
  justify-content: center;
}

.promocode .done {
  display: none;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.promocode .promo-text {
  display: block;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.promocode.copy .promo-text {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.promocode .promo-svg {
  display: block;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.promocode.copy .promo-svg {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.promocode.copy .done {
  display: flex;
  opacity: 1;
  align-items: center;
  line-height: 100%;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.promo .done-copy {
  display: none;
}

.promo.copy-two {
  background: white;
}

.promo.copy-two .not-copy {
  display: none;
}

.promo.copy-two .done-copy {
  display: flex;
}

.sub-item svg {
  transition: transform 0.3s ease-in-out;
}

.sub-item:hover {
  cursor: pointer;
  color: var(--green-mint);
}

.sub-item:hover svg {
  transform: rotate(180deg);
}

.sub-item:hover svg path {
  stroke: var(--green-mint);
}

.btn-primary:hover,
.btn-primary-small:hover {
  transition: all 0.1s ease;
  background: var(
    --Controls-Primary,
    linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%)
  );
  box-shadow: 0px 4px 20px 0px rgba(240, 185, 11, 0.64);
  cursor: pointer;
}

.toltip:hover {
  cursor: pointer;
}

.toltip svg path {
  transition: fill 0.3s ease;
}

.toltip.click svg path {
  fill: var(--green-via);
}

.toltip .toltip-text {
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  border-radius: 14px;
  background-color: var(--dark-gray);
  min-width: 260px;
  left: 50%;
  top: calc(100% + 10px);
  transform: translate(-50%, 0%) scale(0.95);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
  background-image: url(../img/tooltip-bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.toltip.click .toltip-text {
  opacity: 1;
  visibility: visible;
  z-index: 3;
  transform: translate(-50%, 0%) scale(1);
}

/* custom accordion */
.accordion {
  width: 100%;
  margin-bottom: 10px;
}

.accordion-item {
  border-bottom: 1px solid var(--Controls-Tertiary, var(--text-muted));
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-content {
  max-height: 0;
  margin: 0 0 12px 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease-in-out,
    padding 0.3s ease-in-out;
}

.soclial-item,
.soclial-item-mini {
  position: relative;
  transition: 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .soclial-item:hover {
    z-index: 1;
    border: 1px solid var(--Background-Stroke, rgba(255, 255, 255, 0.18));
    background: var(
      --Controls-Primary,
      linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%)
    );
    box-shadow: 3.2px 7.2px 102.96px 0px rgba(240, 185, 11, 0.64);
    cursor: pointer;
  }

  .soclial-item:hover path {
    fill: #020101;
  }

  .soclial-item-mini:hover path {
    fill: #020101 !important;
  }

  .soclial-item-mini:hover {
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%);
    box-shadow: 3.2px 7.2px 102.96px 0px rgba(240, 185, 11, 0.64);
    cursor: pointer;
  }
}

.soclial-item-ty-page {
  position: relative;
  transition: 0.3s ease;
}

.soclial-item-ty-page:hover path {
  fill: #020101;
}

.soclial-item-ty-page:hover {
  margin: 0 0px;
  z-index: 1;
  border-radius: 30px;
  border: 1px solid var(--Background-Stroke, rgba(255, 255, 255, 0.18));
  background: var(
    --Controls-Primary,
    linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%)
  );
  box-shadow: 3.2px 7.2px 102.96px 0px rgba(240, 185, 11, 0.64);
  cursor: pointer;
}

/*menu-menu-header wordpress */
.menu-header li.menu-item-has-children,
.menu-language li.menu-item-has-children {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.menu-header li.menu-item-has-children::after,
.menu-language li.menu-item-has-children::after {
  content: '';
  width: 17px;
  height: 13.136px;
  background-image: url('../img/arrow-menu.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
}

.menu-header li.menu-item-has-children:hover::after,
.menu-language li.menu-item-has-children:hover::after {
  transform: rotate(180deg);
}

.menu-header li a,
.menu-language li a {
  display: block;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  /* 150% */
}

.menu-header .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 156px;
  padding: 5px;
  border-radius: 14px;
  background: var(--Background-Secondary, var(--border-dark));
  z-index: 10;
  overflow: hidden;
  display: none;
  opacity: 0;
}

.menu-header li.menu-item-has-children:hover .sub-menu {
  display: block;
  opacity: 1;
}

.menu-header .sub-menu::before,
.menu-language .sub-menu::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  left: 12px;
  bottom: -115px;
  background: var(--green-fresh);
  filter: blur(79.53500366210938px);
  z-index: 11;
}

.menu-header .sub-menu a,
.menu-language .sub-menu a {
  display: block;
  position: relative;
  padding: 10px 15px;
  border-radius: 7px;
  z-index: 12;
}

.menu-header .sub-menu a:hover,
.menu-language .sub-menu a:hover {
  background: var(--Background-Tertiary, rgba(21, 23, 24, 0.8));
}

.menu-language .menu-item-gtranslate {
  position: relative;
}

.menu-language .sub-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 60px;
  padding: 5px;
  border-radius: 14px;
  background: var(--Background-Secondary, var(--border-dark));
  z-index: 10;
  overflow: hidden;
  display: none;
  opacity: 0;
}

.menu-language .menu-item-gtranslate:hover .sub-menu {
  display: block;
  opacity: 1;
}

.input-container label {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

input,
textarea,
.woocommerce form .form-row .input-text {
  border-radius: 14px;
  outline: 1px solid var(--text-muted);
  background: var(--dark-gray);
  display: flex;
  padding: 15px 25px;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 300;
  align-self: stretch;
  font-size: 18px;
  line-height: 24px;
  border: none !important;
}

input::placeholder,
.woocommerce form .form-row .input-text::placeholder {
  color: var(--medium-gray);
  font-weight: 300;
}

textarea::placeholder {
  color: var(--medium-gray);
  font-weight: 300;
}

input:focus,
.woocommerce form .form-row .input-text:focus {
  outline-color: #fff;
}

textarea:focus {
  outline-color: #fff;
}

footer .input {
  background: var(--border-dark);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  outline: 1px solid #f64c6b;
}

.woocommerce form .form-row.woocommerce-invalid label {
  color: #f64c6b;
}

.error-message {
  color: #f64c6b;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  /* 133.333% */
  display: none;
}

.input-container:has(input.error) label {
  color: #f64c6b;
}

input.error + .error-message {
  display: block;
}

input[type='checkbox'] {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  border: none;
  padding: 0;
  appearance: none;
  cursor: pointer;
  position: relative;
  background: var(--border-dark);
  min-width: 24px;
  outline-color: var(--green-via);
}

input[type='checkbox']:checked {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  border: none;
  padding: 0;
  appearance: none;
  cursor: pointer;
  position: relative;
  background: var(
    --Controls-Primary,
    linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%)
  );
  min-width: 24px;
  outline-color: var(--green-via);
}

input[type='checkbox']:disabled {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  border: none;
  padding: 0;
  appearance: none;
  cursor: not-allowed;
  position: relative;
  background: var(--border-dark);
  min-width: 24px;
  outline-color: var(--text-muted);
}

.woocommerce-terms-and-conditions-wrapper input[type='checkbox'][required],
.affwp-form input[type='checkbox'][required] {
  outline: 1px solid #f64c6b;
}
.woocommerce-terms-and-conditions-wrapper input[type='checkbox']:checked,
.affwp-form input[type='checkbox']:checked {
  outline-color: transparent;
}

.btn-primary:disabled,
.btn-primary[disabled] {
  box-shadow: none;
  cursor: not-allowed;
  color: #242424;
  background: var(--Controls-Tertiary, #5e5e5e);
}

input[type='checkbox']:checked::after {
  content: '';
  display: block;
  width: 14px;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><g filter='url(%23filter0_i_13600_69)'><path d='M13.137 1.84422C13.621 1.42233 13.621 0.738308 13.137 0.316418C12.6531 -0.105472 11.8684 -0.105473 11.3844 0.316417L5.56258 5.39153L2.61557 2.82252C2.1316 2.40063 1.34694 2.40063 0.862975 2.82252C0.379009 3.24441 0.379008 3.92843 0.862974 4.35032L4.66106 7.66124C4.6692 7.66875 4.67749 7.67619 4.68592 7.68354C4.90144 7.87141 5.17658 7.97563 5.45825 7.99617C5.82906 8.01616 6.17799 7.91137 6.43928 7.68359C6.44836 7.67568 6.45727 7.66767 6.466 7.65958L13.137 1.84422Z' fill='%23154136'/></g><defs><filter id='filter0_i_13600_69' x='0.5' y='0' width='13' height='9.05669' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset dy='1.05669'/><feGaussianBlur stdDeviation='0.528347'/><feComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/><feBlend mode='normal' in2='shape' result='effect1_innerShadow_13600_69'/></filter></defs></svg>")
    no-repeat center / contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type='checkbox']:checked:disabled::after {
  content: '';
  display: block;
  width: 14px;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><g filter='url(%23filter0_i_13600_77)'><path d='M13.137 1.84422C13.621 1.42233 13.621 0.738308 13.137 0.316418C12.6531 -0.105472 11.8684 -0.105473 11.3844 0.316417L5.56258 5.39153L2.61557 2.82252C2.1316 2.40063 1.34694 2.40063 0.862975 2.82252C0.379009 3.24441 0.379008 3.92843 0.862974 4.35032L4.66106 7.66124C4.90144 7.87141 5.17658 7.97563 5.45825 7.99617C5.82906 8.01616 6.17799 7.91137 6.43928 7.68359L13.137 1.84422Z' fill='%23747474'/></g><defs><filter id='filter0_i_13600_77' x='0.5' y='0' width='13' height='9.05669' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset dy='1.05669'/><feGaussianBlur stdDeviation='0.528347'/><feComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/><feBlend mode='normal' in2='shape' result='effect1_innerShadow_13600_77'/></filter></defs></svg>")
    no-repeat center / contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* brevo */
.input--hidden {
  display: none;
}

.breadcrumbs a {
  color: var(--green-via);
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.h-border::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: var(--green-gradient);
}

.popups-overlay {
  z-index: 5;
}

.filter-btn {
  border-color: #5e5e5e;
}

.filter-btn.active {
  cursor: default;
  border-color: var(--turquoise-green);
}

.filter-btn.active,
.filter-btn.active:hover {
  border: 1px solid var(--turquoise-green);
}

.filter-btn:hover {
  border: 1px solid #fff;
}

.popup-withdrawal.hidden.open {
  display: block;
}

body.popup-open .popups-overlay.hidden {
  display: block;
}

.popup-withdrawal-close:hover {
  color: #F0B90B;
  cursor: pointer;
}

.form__entry.entry_block .form__label-row {
  gap: 14px;
}

.menu-footer a {
  display: block;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.menu-footer a:hover {
  color: var(--green-mint);
}

/* ckooke */
body .cmplz-cookiebanner.cmplz-show {
  width: 100%;
  border-radius: 0;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  align-items: center;
}

body .cmplz-cookiebanner .cmplz-header,
body .cmplz-cookiebanner .cmplz-divider.cmplz-divider-header,
body .cmplz-cookiebanner .cmplz-divider,
body .cmplz-cookiebanner .cmplz-links.cmplz-documents {
  display: none;
}

body .cmplz-cookiebanner .cmplz-message {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 16px;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  color: var(--green-dark);
  background: linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%);
  border: none;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  transition: all 0.1s ease;
  background: var(
    --Controls-Primary,
    linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%)
  );
  box-shadow: 0px 4px 20px 0px rgba(240, 185, 11, 0.64);
  cursor: pointer;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
  background: none;
  border: 1px solid #fff;
  color: white;
  padding: 14px 24px;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
  display: none;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
  border-color: var(--turquoise-green);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  height: auto;
  width: max-content;
  min-width: auto;
  font-size: 18px;
  line-height: 24px;
  padding: 15px 25px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}

#cmplz-cookiebanner-container {
  z-index: 99;
  position: relative;
}

#loader {
  z-index: 100;
}

/* checkout */
.coupon-checkout {
  display: flex;
  flex-wrap: wrap;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  #respond
  input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  input.button {
  height: auto;
  width: max-content;
  min-width: auto;
  font-size: 18px;
  line-height: 24px;
  padding: 15px 25px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: none;
  border: 1px solid #fff;
  color: white;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  #respond
  input#submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  a.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  button.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor))
  .woocommerce
  input.button:hover {
  border-color: var(--turquoise-green);
  background-color: transparent;
  color: white;
}

.woocommerce-billing-fields h3 {
  font-family: 'Actay Wide', sans-serif;
  --tw-leading: 26px;
  line-height: 26px;
  font-size: 24px;
}

.woocommerce form .woocommerce-billing-fields .thwcfd-field-paragraph {
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  font-size: 16px;
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
  /*padding-top: 30px;*/
  padding-bottom: 30px;
  border-bottom: 1px solid var(--Controls-Tertiary, var(--text-muted));
  margin-bottom: 30px;
}

.woocommerce form .woocommerce-billing-fields #billing_texts_2_field {
  border-bottom: none;
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: white;
}

.woocommerce form .form-row input[readonly] {
  background-color: var(--text-muted, #5e5e5e);
  cursor: not-allowed;
}

.woocommerce form .woocommerce-billing-fields .required {
  display: none;
}

.woocommerce form .form-row .woocommerce-terms-and-conditions-wrapper label {
  display: flex;
}

.woocommerce-checkout #payment div.form-row {
  padding: 0;
  margin: 0;
}

.woocommerce-checkout #payment .coupon-wrapper {
  margin-bottom: 10px;
}

.woocommerce-terms-and-conditions-wrapper a:hover {
  text-decoration: underline;
  -webkit-background-clip: text;
  -webkit-text-fill-color: initial;
}

.woocommerce form .woocommerce-billing-fields .form-row label {
  font-size: var(--font-size-P2, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-hight-P2, 24px);
  margin-bottom: 10px;
}

/* ── Order Review: Payment left, Product details right ── */
.order_review-block {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px;
  align-items: stretch;
}

/* Left column wrapper */
.order_review-block .order-review-left {
  width: 65% !important;
  flex-shrink: 0 !important;
}

/* Payment — fills left column */
.order_review-block #payment {
  width: 100% !important;
  background: var(--graphite-fog);
  border-radius: 28px;
}

/* Right column wrapper — stretches to match the height of the left column
   (methods card + T&C/place-order card stack), so its bottom aligns with
   the Place Order button below. */
.order_review-block .right-column {
  width: 33% !important;
  flex-shrink: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;
}

/* Product table — greenish gradient */
.woocommerce .order_review-block table.shop_table {
  border-radius: 28px;
  margin: 0;
  border: 1px solid rgba(240, 185, 11, 0.25);
  border-top: 3px solid var(--turquoise-green);
  background: linear-gradient(145deg, #0a2e26 0%, #0d1f1b 35%, #111413 100%);
  box-shadow: 0 0 30px rgba(240, 185, 11, 0.08), 0 0 60px rgba(240, 185, 11, 0.04), inset 0 1px 0 rgba(240, 185, 11, 0.1);
}

/* Product table heading — green gradient text */
.woocommerce .order_review-block table.shop_table thead th {
  background: linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-weight: 700;
}

/* Place order button — full width inside right column */
.order_review-block .place-order-moved #place_order {
  width: 100%;
  max-width: 100%;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 16px;
  letter-spacing: 0.02em;
}

.woocommerce table.shop_table tbody td img {
  padding-right: 20px;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  border-top: none;
  font-weight: 300;
  padding: 0;
}

.woocommerce table.shop_table tfoot .cart-subtotal th,
.woocommerce table.shop_table tfoot .cart-subtotal td {
  padding: 5px 0;
}

.woocommerce table.shop_table tfoot td {
  text-align: right;
}

.woocommerce table.shop_table tfoot tr.cart-subtotal th,
.woocommerce table.shop_table tfoot tr.cart-subtotal td {
  padding-top: 30px;
}

.woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce table.shop_table tfoot tr.order-total td {
  padding: 10px 0 10px 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 125%;
  background: var(
    --Text-Gradient,
    linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.woocommerce table.shop_table td small {
  display: none !important;
}

.woocommerce table.shop_table th {
  padding: 0;
}

.woocommerce table.shop_table tbody {
  position: relative;
}

.woocommerce table.shop_table tbody::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--text-muted);
}

.woocommerce table.shop_table tbody td {
  padding-top: 30px;
  padding-bottom: 30px;
}

.select2-container .select2-dropdown,
.select2-container .select2-selection {
  border-radius: 14px;
  outline: 1px solid var(--text-muted);
  background: var(--dark-gray);
  border: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  color: #fff;
  padding: 15px 25px;
  font-weight: 300;
  align-self: stretch;
  font-size: 18px;
  line-height: 24px;
}

.select2-container.select2-container--open .select2-dropdown--below,
.select2-container.select2-container--open .select2-dropdown--above {
  padding: 5px;
  padding: 5px;

  background: var(--Background-Secondary, var(--border-dark));
  position: relative;
  border: 1px solid var(--text-muted);
  color: white;
}

.select2-container.select2-container--open .select2-dropdown--below {
  border-radius: 0 0 14px 14px;
}

.select2-container.select2-container--open .select2-dropdown--above {
  border-radius: 14px 14px 0 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--Background-Tertiary, rgba(21, 23, 24, 0.8));
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  padding: 5px 13px;
}

.select2-container.select2-container--open .select2-dropdown--below::before,
.select2-container.select2-container--open .select2-dropdown--above::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  left: 12px;
  background: var(--green-fresh);
  filter: blur(79.53500366210938px);
  z-index: 11;
}

.select2-container.select2-container--open .select2-dropdown--below::before {
  bottom: -115px;
}

.select2-container.select2-container--open .select2-dropdown--above::before {
  top: -115px;
}

.select2-results__option[aria-selected],
.select2-results__option[data-selected] {
  display: block;
  position: relative;
  padding: 10px 15px;
  border-radius: 7px;
  z-index: 12;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
}

.select2-results__options {
  scrollbar-color: var(--green-fresh) var(--border-dark);
}

.select2-results__options::-webkit-scrollbar-track {
  background: var(--text-muted);
}

.select2-results__options::-webkit-scrollbar-thumb {
  background-color: var(--green-fresh);
  border-radius: 14px;
  transition: background-color 0.3s;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
  background-color: #F0B90B;
}

.select2-container--default .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[data-selected='true'] {
  background-color: #191b1b;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  width: 40px;
  padding: 0 10px;
  background: var(--dark-gray);
}

.select2-container .select2-selection--single .select2-selection__arrow b {
  background: url('../img/select-arrow.svg');
  width: 22px;
  height: 22px;
  left: 10px;
}

.select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(180deg);
  /* Переворачиваем стрелку на 180 градусов */
}

.woocommerce form .form-row.form-row-first {
  clear: both;
}

.woocommerce-page form .form-row.woocommerce-invalid::after {
  margin-top: 5px;
  color: #f64c6b;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  /* 133.333% */
}

.woocommerce-page form .form-row.form-row-name.woocommerce-invalid::after {
  content: 'You need to enter a name';
}

.woocommerce-page form .form-row.validate-email.woocommerce-invalid::after {
  content: 'Invalid email';
}

.woocommerce-page form .form-row.validate-phone.woocommerce-invalid::after {
  content: 'Invalid phone number';
}

.woocommerce-page form .form-row.address-field.woocommerce-invalid::after {
  content: 'You need to enter a city';
}

.woocommerce-page form .form-row.address-zip.woocommerce-invalid::after {
  content: 'You need to enter the zip code';
}

.woocommerce-page form .form-row.address-street.woocommerce-invalid::after {
  content: 'You need to enter the address';
}

dl.variation dt {
  display: block;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

dl.variation dd {
  margin-bottom: 0.5em;
}

/* ── Payment Cards Grid (legacy — kept in case used elsewhere) ── */
.payment-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 160px;
  gap: 12px;
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--medium-gray);
  list-style: none;
}

@media (min-width: 769px) {
  .payment-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 160px;
    gap: 16px;
  }
}

/* ── New vertical payment list (replaces .payment-cards-grid) ── */
.nm-pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 18px;
}

/* Section subtitle under "Select a payment method" */
.payment-methods-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.payment-methods-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
}

/* ── Card Entrance Animation ── */
@keyframes paymentCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   NEW VERTICAL PAYMENT-METHOD ROW (.nm-pay-row)
   Activated when a .payment-card also has .nm-pay-row. The new layout
   takes precedence over the old card-grid styling for these rows.
   Functional hooks (.payment-card, .payment_method_*, .selected-method,
   .input-radio, .gateway-icon, .payment-card-fee, .recommended-card) are
   preserved so applyRecommendedPayment() and the existing JS keep working.
   ───────────────────────────────────────────────────────────────────────── */

.payment-card.nm-pay-row {
  position: relative;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: visible !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: paymentCardFadeIn 0.4s ease both;
  list-style: none;
  grid-column: auto !important;
  text-align: left;
}

.payment-card.nm-pay-row:hover {
  transform: none;
  border-color: rgba(240, 185, 11, 0.3);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

/* Selected state — applies whenever the radio is checked (driven by
   .selected-method which updatePaymentMethodClass toggles on each click). */
.payment-card.nm-pay-row.selected-method {
  transform: none;
  border-color: var(--turquoise-green);
  background: linear-gradient(180deg, rgba(240, 185, 11, 0.08), rgba(240, 185, 11, 0.02));
  box-shadow: 0 0 18px rgba(240, 185, 11, 0.18);
}

/* Recommended-only (badge present but not currently selected) — keep it
   subtle so the user can clearly tell which card is currently selected
   when they switch to another method. */
.payment-card.nm-pay-row.recommended-card:not(.selected-method) {
  border-color: rgba(240, 185, 11, 0.25);
  background: rgba(240, 185, 11, 0.025);
  box-shadow: none;
}

/* Click target — full row label.
   Selectors are doubled (.payment-card.nm-pay-row + .nm-pay-row-label) so the
   rule beats the legacy `.payment-card-label { display: flex !important;
   flex-direction: column !important; align-items: center !important; }` which
   is defined later in this file and would otherwise win. */
.payment-card.nm-pay-row .nm-pay-row-label,
.payment-card.nm-pay-row label.payment-card-label {
  display: grid !important;
  grid-template-columns: auto auto 1fr auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  cursor: pointer;
  width: 100%;
  height: auto !important;
  text-align: left !important;
  box-sizing: border-box;
}

/* Radio circle */
.payment-card.nm-pay-row .nm-pay-radio {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: grid !important;
  place-items: center;
  background: transparent;
  transition: border-color 0.2s ease;
  flex: 0 0 auto;
  order: 0 !important;
}
.nm-pay-row.selected-method .nm-pay-radio {
  border-color: var(--turquoise-green);
}
.nm-pay-row .nm-pay-radio-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--turquoise-green);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.nm-pay-row.selected-method .nm-pay-radio-inner {
  transform: scale(1);
}

/* Icon container — bare logo, no square frame. Sized to give wordmark-style
   brand SVGs room to breathe (Visa/Mastercard, PayPal, Tazapay, Nowpayments
   are roughly 3.5:1 wide). */
.payment-card.nm-pay-row .nm-pay-icon {
  width: 100px !important;
  height: 56px !important;
  min-width: 100px;
  min-height: 0 !important;
  display: grid !important;
  place-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
  margin: 0 !important;
  padding: 0 !important;
  transition: filter 0.2s ease;
  perspective: none;
  flex: 0 0 auto;
  order: 0 !important;
}
.nm-pay-row.selected-method .nm-pay-icon {
  background: transparent;
  border: none;
  filter: brightness(1.15);
}
.payment-card.nm-pay-row .nm-pay-icon svg,
.payment-card.nm-pay-row .nm-pay-icon img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
  transition: none;
  transform: none !important;
  animation: none !important;
  pointer-events: none;
}

/* Text block (title + subtitle) */
.payment-card.nm-pay-row .nm-pay-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px;
  min-width: 0;
  order: 0 !important;
}
.payment-card.nm-pay-row .nm-pay-label.payment-card-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.2 !important;
  letter-spacing: 0.005em;
  margin: 0 !important;
  text-align: left !important;
  order: 0 !important;
}
.payment-card.nm-pay-row .nm-pay-sub {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  text-align: left;
  order: 0 !important;
}

/* Inline RECOMMENDED badge — overrides the absolute-positioned legacy badge */
.nm-pay-row .recommended-badge {
  position: static;
  background: rgba(240, 185, 11, 0.18);
  color: var(--turquoise-green);
  border: 1px solid rgba(240, 185, 11, 0.4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1;
  text-transform: uppercase;
}

/* Right-aligned fee text */
.payment-card.nm-pay-row .nm-pay-fee {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-align: right;
  order: 0 !important;
}
.payment-card.nm-pay-row .nm-pay-fee .payment-card-fee {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  border-radius: 0 !important;
}
.payment-card.nm-pay-row .nm-pay-free {
  color: var(--turquoise-green);
  font-weight: 600;
}

/* Inside .nm-pay-row: kill the old grid card animations and overlays */
.nm-pay-row:not(.payment_method_olapagos) .payment_box {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   Olapagos payment-method inline fields.
   Olapagos needs its document type / number inputs visible BEFORE
   the customer clicks Place Order, so we DON'T hide its payment_box.
   Style it to match the dark theme (everything else here is dark).

   IMPORTANT: There's a stronger `.payment-card .payment_box { position:
   absolute !important; visibility: hidden !important; ... }` rule LATER
   in this file that applies to ALL payment cards. We must explicitly
   override every property with !important so it lands in normal flow
   (otherwise it floats over the agreement checkboxes below).
   ────────────────────────────────────────────────────────────────── */
.payment-card.nm-pay-row.payment_method_olapagos .payment_box,
.payment-card.nm-pay-row.payment_method_olapagos.selected-method .payment_box {
  /* position: relative + z-index above the .input-radio's z-index: 2 so the
     document fields are actually clickable. The radio overlays the whole
     <li> card with absolute positioning — without this, the radio steals
     all pointer events. */
  position: relative !important;
  z-index: 3 !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  background: var(--graphite-fog, #18191A) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin: 12px 0 0 !important;
  color: #fff !important;
  font-family: 'Sora', sans-serif !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Make sure the inputs INSIDE the payment box can receive clicks/focus,
   beating any pointer-events: none inherited from the .payment-card layout. */
.payment-card.nm-pay-row.payment_method_olapagos .payment_box *,
.payment-card.nm-pay-row.payment_method_olapagos.selected-method .payment_box * {
  pointer-events: auto !important;
}

/* Selected state — JS sets display:block !important. Make sure rendering matches. */
.payment-card.nm-pay-row.payment_method_olapagos.selected-method .payment_box {
  display: block !important;
}

/* When NOT selected, keep it hidden */
.payment-card.nm-pay-row.payment_method_olapagos:not(.selected-method) .payment_box {
  display: none !important;
}

.nm-pay-row.payment_method_olapagos .payment_box > p {
  color: #b0b0b0;
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.5;
}

.nm-pay-row.payment_method_olapagos .payment_box .form-row {
  margin: 0 0 14px;
}

.nm-pay-row.payment_method_olapagos .payment_box .form-row label {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}

.nm-pay-row.payment_method_olapagos .payment_box .form-row .required {
  color: #ff6b6b;
  margin-left: 2px;
}

.nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_type,
.nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_number {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 12px 14px;
  background: #0f1011;
  border: 1px solid #3a3c3e;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_type {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%2339FFB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_type:focus,
.nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_number:focus {
  border-color: var(--turquoise-green, #F0B90B);
  box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.2);
  outline: none;
}

.nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_type.error,
.nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_number.error {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.nm-pay-row.payment_method_olapagos .payment_box .description,
.nm-pay-row.payment_method_olapagos .payment_box .description p {
  color: #888;
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 0;
}

.nm-pay-row.payment_method_olapagos .payment_box .olapagos-doc-error {
  color: #ff6b6b;
  font-size: 13px;
  display: block;
  margin-top: 6px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .nm-pay-row.payment_method_olapagos .payment_box {
    padding: 14px 16px;
    border-radius: 12px;
  }
  .nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_type,
  .nm-pay-row.payment_method_olapagos .payment_box #olapagos_document_number {
    max-width: 100%;
    font-size: 16px; /* prevent iOS auto-zoom on focus */
  }
}
/* ────────────────────────────────────────────────────────────────── */

/* Recommended-card spans 2 columns ONLY in legacy grid; in vertical list it's full row already */
.payment-cards-grid .payment-card.recommended-card {
  grid-column: span 2;
}
.nm-pay-list .payment-card.recommended-card {
  grid-column: auto;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .nm-pay-row-label {
    padding: 14px 14px !important;
    gap: 12px;
  }
  .payment-card.nm-pay-row .nm-pay-icon {
    width: 76px !important;
    height: 44px !important;
    min-width: 76px;
    padding: 0 !important;
  }
  .nm-pay-row .nm-pay-label {
    font-size: 14px;
  }
  .nm-pay-row .nm-pay-sub {
    font-size: 11px;
  }
  .nm-pay-row .nm-pay-fee {
    font-size: 11px;
  }
}

/* ── Individual Payment Card ── */
.payment-card {
  position: relative;
  background: linear-gradient(145deg, #0a2e26 0%, #0d1f1b 40%, #111816 100%);
  border: 1px solid rgba(240, 185, 11, 0.2);
  border-radius: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
  list-style: none;
  animation: paymentCardFadeIn 0.4s ease both;
  height: 168px;
  overflow: visible;
  min-width: 0;
}

.payment-card:nth-child(1) { animation-delay: 0s; }
.payment-card:nth-child(2) { animation-delay: 0.05s; }
.payment-card:nth-child(3) { animation-delay: 0.1s; }
.payment-card:nth-child(4) { animation-delay: 0.15s; }
.payment-card:nth-child(5) { animation-delay: 0.2s; }
.payment-card:nth-child(6) { animation-delay: 0.25s; }
.payment-card:nth-child(7) { animation-delay: 0.3s; }
.payment-card:nth-child(8) { animation-delay: 0.35s; }
.payment-card:nth-child(9) { animation-delay: 0.4s; }

/* Kill the staggered fade-in across all viewports. The animation re-runs
   every time WC's update_order_review AJAX rebuilds the methods list
   (payment method change, country change, coupon apply), which on desktop
   reads as a ~0.4s glitch every time the user switches methods. No
   entrance animation = instant render on both initial load and AJAX
   rebuild. */
.payment-card,
.payment-card.nm-pay-row {
  animation: none !important;
}

.payment-card:hover {
  border-color: var(--turquoise-green);
  transform: translateY(-3px);
  background: linear-gradient(145deg, #0e3d33 0%, #0f2a24 40%, #141c19 100%);
  box-shadow: 0 4px 20px rgba(240, 185, 11, 0.15);
}

.payment-card.selected-method {
  border-color: var(--turquoise-green);
  box-shadow: 0 0 20px rgba(240, 185, 11, 0.25), 0 0 40px rgba(240, 185, 11, 0.08);
  transform: translateY(-3px);
  background: linear-gradient(145deg, #0e3d33 0%, #0f2a24 40%, #141c19 100%);
}

/* ── Recommended Payment Card (spans 2 columns) ── */
.payment-card.recommended-card {
  grid-column: span 2;
}

.recommended-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--turquoise-green);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 3;
  line-height: 14px;
  pointer-events: none;
}

/* ── Hidden Radio Input (keeps form functional) ── */
.payment-card .input-radio {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
  padding: 0;
}

/* ── Card Label ── */
.payment-card-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* ── Gateway Icon ── */
.payment-card .gateway-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  max-width: 100%;
  overflow: visible;
  perspective: 600px;
  transition: filter 0.3s ease;
  order: 1;
}

/* Constrain any injected buttons (e.g. Apple Pay native button) */
.payment-card .gateway-icon button,
.payment-card .gateway-icon img {
  max-width: 100%;
  height: 44px;
  width: auto;
  pointer-events: none;
}

.payment-card .gateway-icon svg {
  width: auto;
  height: 44px;
  max-width: 100%;
  max-height: 48px;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  display: block;
}

/* ── Unique hover animations per card ── */

/* Card 1 — Horizontal flip */
.payment-card:nth-child(1):hover .gateway-icon svg {
  transform: rotateY(360deg);
}

/* Card 2 — Vertical flip */
.payment-card:nth-child(2):hover .gateway-icon svg {
  transform: rotateX(360deg);
}

/* Card 3 — Spin clockwise */
.payment-card:nth-child(3):hover .gateway-icon svg {
  transform: rotate(360deg);
}

/* Card 4 — Bounce up */
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  50% { transform: translateY(-4px); }
  70% { transform: translateY(-7px); }
}
.payment-card:nth-child(4):hover .gateway-icon svg {
  animation: iconBounce 0.6s ease;
}

/* Card 5 — Rubber band stretch */
@keyframes iconRubberBand {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.2) scaleY(0.85); }
  40% { transform: scaleX(0.9) scaleY(1.1); }
  50% { transform: scaleX(1.1) scaleY(0.95); }
  65% { transform: scaleX(0.98) scaleY(1.02); }
  75% { transform: scaleX(1.02) scaleY(0.98); }
  100% { transform: scale(1); }
}
.payment-card:nth-child(5):hover .gateway-icon svg {
  animation: iconRubberBand 0.6s ease;
}

/* Card 6 — Swing / pendulum */
@keyframes iconSwing {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.payment-card:nth-child(6):hover .gateway-icon svg {
  transform-origin: top center;
  animation: iconSwing 0.6s ease;
}

/* Card 7 — Pulse / heartbeat */
@keyframes iconPulse {
  0% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}
.payment-card:nth-child(7):hover .gateway-icon svg {
  animation: iconPulse 0.7s ease;
}

/* Card 8 — 3D tilt wobble */
@keyframes iconWobble {
  0% { transform: rotateX(0) rotateY(0); }
  25% { transform: rotateX(15deg) rotateY(-15deg); }
  50% { transform: rotateX(-10deg) rotateY(10deg); }
  75% { transform: rotateX(5deg) rotateY(-5deg); }
  100% { transform: rotateX(0) rotateY(0); }
}
.payment-card:nth-child(8):hover .gateway-icon svg {
  animation: iconWobble 0.6s ease;
}

/* Card 9 — Slide in from left */
@keyframes iconSlideIn {
  0% { transform: translateX(-20px); opacity: 0.3; }
  60% { transform: translateX(4px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
.payment-card:nth-child(9):hover .gateway-icon svg {
  animation: iconSlideIn 0.5s ease;
}

/* PayPal Card & PayPal Wallet share the same hover animation (bounce) */
.payment-card.payment_method_ppcp-card-button-gateway:hover .gateway-icon svg,
.payment-card.payment_method_ppcp-gateway:hover .gateway-icon svg {
  transform: none;
  animation: iconBounce 0.6s ease;
}

.payment-card.selected-method .gateway-icon {
  filter: brightness(1.15);
}

.payment-card.selected-method .gateway-icon svg {
  transform: scale(1.1);
}

/* ── Card Title ── */
.payment-card-title {
  display: block;
  color: #e0e0e0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-align: center;
  transition: color 0.2s ease;
  order: 2;
}

/* Fee badge always last */
.payment-card-fee {
  order: 3;
}

/* Hide any inline icons that gateways inject into titles */
.payment-card-title img {
  display: none !important;
}

.payment-card.selected-method .payment-card-title {
  color: #ffffff;
}

/* ── Fee Badge ── */
.payment-card-fee {
  display: block;
  color: var(--turquoise-green);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  padding: 4px 10px;
  border: 1px solid var(--turquoise-green);
  border-radius: 6px;
  margin-top: 2px;
}

/* ── Recommended Badge ── */
.recommended-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--turquoise-green);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 3;
  line-height: 14px;
  pointer-events: none;
}

/* ── Payment Box — all hidden inside cards, everything opens in modal ── */
.payment-card .payment_box {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

.payment-card.selected-method .payment_box {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

.payment-card.selected-method .payment_box:before {
  content: none !important;
  display: none !important;
}

/* ── Payment Card Tooltip ── */
.payment-card-label[data-tooltip] {
  position: relative;
}

.payment-card-label[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #111;
  border: 1px solid rgba(240, 185, 11, 0.3);
  color: #ccc;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.payment-card-label[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(240, 185, 11, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 101;
}

.payment-card:hover .payment-card-label[data-tooltip]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.payment-card:hover .payment-card-label[data-tooltip]::before {
  opacity: 1;
}

/* ── Universal Payment Modal Popup ── */
.payment-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
}

.payment-modal-overlay.active {
  display: flex;
  animation: payModalFadeIn 0.3s ease;
}

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

.payment-modal {
  position: relative;
  width: 94%;
  max-width: 620px;
  max-height: 90vh;
  background: linear-gradient(145deg, #0a2e26 0%, #0d1f1b 35%, #111413 100%);
  border: 1px solid rgba(240, 185, 11, 0.3);
  border-top: 3px solid var(--turquoise-green);
  border-radius: 24px;
  padding: 24px;
  overflow-y: auto;
  box-shadow: 0 0 50px rgba(240, 185, 11, 0.15), 0 0 100px rgba(240, 185, 11, 0.05);
  animation: payModalSlideUp 0.35s ease;
}

@keyframes payModalSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.payment-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(240, 185, 11, 0.3);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 1;
}

.payment-modal-close:hover {
  background: rgba(240, 185, 11, 0.2);
  border-color: var(--turquoise-green);
  transform: rotate(90deg);
}

.payment-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.payment-modal-content {
  min-height: 400px;
}

/* Iframe inside modal — full width */
.payment-modal-iframe {
  width: 100%;
  min-height: 500px;
  height: 70vh;
  border: none;
  border-radius: 12px;
  background: #fff;
}

.payment-modal-content iframe {
  border-radius: 12px;
  width: 100%;
  min-height: 400px;
}

#triplea_embedded_payment_form_btn {
  margin-top: 0px !important;
  background: linear-gradient(231deg, #F0B90B 27.94%, #F0B90B 57.81%, #F0B90B 87.1%) !important;
  color: var(--color-black) !important;
}

/* ── Billing Info Hover Popup ── */
.billing-info-hover-wrapper {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}

.billing-info-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(145deg, #0a2e26 0%, #0d1f1b 40%, #111816 100%);
  border: 1px solid var(--text-muted);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.billing-info-trigger:hover {
  border-color: var(--turquoise-green);
  box-shadow: 0 0 15px rgba(240, 185, 11, 0.2);
}

.billing-info-chevron {
  transition: transform 0.3s ease;
}

.billing-info-hover-wrapper:hover .billing-info-chevron {
  transform: rotate(180deg);
}

.billing-info-popup {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 100;
  min-width: 340px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.billing-info-hover-wrapper:hover .billing-info-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.billing-info-popup-inner {
  background: linear-gradient(145deg, #0d2e28 0%, #0f1f1c 50%, #121a17 100%);
  border: 1px solid var(--turquoise-green);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(240, 185, 11, 0.15), 0 2px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.billing-popup-name {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.billing-popup-table {
  width: 100%;
  border-collapse: collapse;
}

.billing-popup-table td {
  padding: 6px 0;
  font-size: 14px;
  color: #fff;
  vertical-align: top;
}

.billing-popup-label {
  color: var(--medium-gray) !important;
  width: 30%;
  padding-right: 12px;
}

.billing-popup-value {
  width: 70%;
  font-weight: 500;
}

@media (max-width: 768px) {
  .woocommerce table.shop_table tfoot tr.cart-subtotal th,
  .woocommerce table.shop_table tfoot tr.cart-subtotal td {
    padding-top: 20px;
  }

  .woocommerce table.shop_table tfoot tr.order-total th,
  .woocommerce table.shop_table tfoot tr.order-total td {
    font-size: 16px;
  }
}

.woocommerce-checkout #payment ul.payment_methods {
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--medium-gray);
  text-align: center;
}

/* Place order — JS moves it out of #payment on desktop, no hide needed */

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  float: left;
  margin-top: 20px;
}

.woocommerce-checkout #payment ul.payment_methods::before {
  content: none;
}

.blur-\[150px\] {
  filter: blur(150px) !important;
}

.woocommerce form .form-row {
  margin: 0 0 30px;
}

.woocommerce-notices-wrapper {
  width: 100%;
  max-width: 1386px;
  margin-left: auto;
  margin-right: auto;
}

/* styles for copies of checkout woocommerce notifications */
/* TODO: keep only one submit flow (currently 2 - ajax and default) and remove all --clone styles */
.woocommerce-error--clone,
.woocommerce-info--clone,
.woocommerce-message--clone {
  padding: 1em 2em 1em 3.5em;
  margin: 0 0 2em;
  position: relative;
  background-color: #f6f5f8;
  color: #515151;
  border-top: 3px solid #720eec;
  list-style: none outside;
  width: auto;
  word-wrap: break-word;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error--clone,
.woocommerce-info--clone,
.woocommerce-message--clone {
  border-top-color: #F0B90B;
  border: 1px solid white;
  background: none;
  border-radius: 14px;
  margin: 0;
  color: white;
  margin-top: 80px;
  border-top-color: white;
}

.woocommerce-error--clone::before,
.woocommerce-info--clone::before,
.woocommerce-message--clone::before {
  font-family: WooCommerce;
  content: '\e028';
  content: '\e028' / '';
  display: inline-block;
  position: absolute;
  top: 1em;
  left: 1.5em;
}

.woocommerce-error--clone::after,
.woocommerce-error--clone::before,
.woocommerce-info--clone::after,
.woocommerce-info--clone::before,
.woocommerce-message--clone::after,
.woocommerce-message--clone::before {
  content: ' ';
  display: table;
}

.woocommerce-error--clone::before {
  content: '\e016';
  color: #b81c23;
}

.woocommerce-info--clone::before {
  color: #1e85be;
}

.woocommerce-message--clone::before {
  content: '\e015';
  color: #F0B90B;
}

.woocommerce-error--clone::after,
.woocommerce-info--clone::after,
.woocommerce-message--clone::after {
  clear: both;
}

.woocommerce-form-coupon-toggle {
  display: none;
}

.coupon input {
  padding: 15px 25px;
}

/* `.updating` is added to .woocommerce-checkout-review-order by WC's
   update_checkout AJAX while a request is in flight. The original rule
   faded the right column to 50% opacity for ~300ms, which on payment
   method change reads as a "glitch" — the user clicks, the column dims,
   the column re-shows. Keep `pointer-events: none` so the form is still
   safe-locked against double-clicks during AJAX, but skip the visual
   opacity dip so changes feel instant.
   (The previous `.woocommerce-checkout-review-order { transition: opacity }`
   rule lived alongside this and is removed too — nothing animates now.) */
.updating {
  opacity: 1;
  pointer-events: none;
}

.applied-coupon {
  border-radius: 14px;
  border: 1px dashed var(--Controls-Tertiary, var(--text-muted));
  padding: 20px;
  color: var(--Text-Primary, #fff);
  font-size: var(--font-size-P2, 18px);
  font-style: normal;
  font-weight: 300;
  line-height: var(--font-line-hight-P2, 24px);
  /* 133.333% */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.applied-coupon span span {
  font-weight: 600;
}

.applied-coupon a {
  color: var(--green-mint);
}

.woocommerce-notices-wrapper {
  display: none !important;
}

.custom-coupon-code {
  width: max-content;
  padding: 14px 25px;
}

.custom-coupon-code.w-full {
  width: 100%;
}

.apply-custom-coupon-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.woocommerce-NoticeGroup {
  display: none !important;
}

.pt-checkout-cart {
  padding-top: 80px;
  padding-bottom: 80px;
}

.calc-price.fixed {
  padding-bottom: 20px;
}

.calc-price.fixed .coupon-wrapper {
  display: none;
}

.calc-price.fixed .item-left {
  padding-top: 0;
  padding-bottom: 20px;
}

.calc-price.fixed .calc-ellipse {
  height: 100%;
}

.slider-sert {
  width: 100%;
  height: var(--height);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
}

.slider-sert__group {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  will-change: transform;
  animation: scrolling 20s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.slider-sert__list {
  display: flex;
  width: 100%;
  overflow: hidden;
  flex: 0 0 100%;
}

.slider-sert__list:hover .slider-sert__group {
  animation-play-state: paused;
}

.slider-sert__item {
  width: var(--width);
  height: var(--height);
  justify-content: center;
  align-items: center;
}

.slider-sert__item .relative {
  display: flex;
  flex-direction: column;
  width: 128px;
  height: 100%;
  align-items: center;
  background-image: url('../img/certificate2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider-sert__item .relative .name {
  font-family: 'Amerika';
}

.slider-sert__item .relative .price {
  font-size: 10px;
  line-height: 135%;
}

.slider-sert__item img.w-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.pt-big-header {
  padding-top: 110px;
}

.page-error-img {
  z-index: -1;
}

/* affiliate */
#affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-select,
.custom-search {
  border-radius: 14px;
  outline: 1px solid var(--text-muted);
  background: var(--dark-gray);
  padding: 13px 25px;
  padding-right: 50px;
  color: #747474;
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  border: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #02070a;
  background-repeat: no-repeat;
  background-position: right 25px center;
  background-size: 20px;

  position: relative;
}

.custom-select {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M3%207.5L11%2015.5L19%207.5%22%20stroke%3D%22white%22%20stroke-width%3D%222.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E');
  cursor: pointer;
}

.custom-search {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><g clip-path="url(%23clip0_5365_24532)"><path d="M21.298 20.0385L16.0619 14.5928C17.4082 12.9924 18.1458 10.9788 18.1458 8.88249C18.1458 3.98476 14.1611 0 9.26335 0C4.36562 0 0.380859 3.98476 0.380859 8.88249C0.380859 13.7802 4.36562 17.765 9.26335 17.765C11.102 17.765 12.8542 17.2104 14.3522 16.1576L19.6281 21.6447C19.8486 21.8737 20.1452 22 20.463 22C20.7639 22 21.0493 21.8853 21.2659 21.6768C21.7263 21.2338 21.7409 20.4992 21.298 20.0385ZM9.26335 2.31717C12.8835 2.31717 15.8287 5.2623 15.8287 8.88249C15.8287 12.5027 12.8835 15.4478 9.26335 15.4478C5.64316 15.4478 2.69803 12.5027 2.69803 8.88249C2.69803 5.2623 5.64316 2.31717 9.26335 2.31717Z" fill="white"/></g><defs><clipPath id="clip0_5365_24532"><rect width="22" height="22" fill="white"/></clipPath></defs></svg>');
}

.custom-select[data-state='open'] {
  outline-color: #fff;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M3%207.5L11%2015.5L19%207.5%22%20stroke%3D%22white%22%20stroke-width%3D%222.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20transform%3D%22rotate(180%2011%2011)%22%2F%3E%0A%3C%2Fsvg%3E');
}

.affwp-form label {
  font-weight: 600;
}

.w-full .affwp-form {
  margin-bottom: 0;
}

/* Стиль выпадающего списка (частично поддерживается) */
.custom-select option {
  padding: 5px;
  background: var(--Background-Secondary, var(--border-dark));
  position: relative;
  border: 1px solid var(--text-muted);
  color: white;
  font-size: 16px;
  font-weight: 300;
}

/* Стиль при наведении на option */
.custom-select option:hover,
.custom-select option:focus {
  background-color: #191b1b;
}

#payment-form-message,
#password-form-message {
  margin-bottom: 20px;

  font-weight: 300;
}

.payment_method_paytiko_gateway {
}

.error_plus {
  color: var(--green-mint);
}

.errors {
  color: #f64c6b;
}

.affiliate-legal {
  background: rgba(2, 7, 10, 0.5);
  max-height: 381px;
  overflow-y: auto;

  /* Скрыть полосу в Firefox
   scrollbar-width: none;
    Скрыть полосу в IE/Edge 
   -ms-overflow-style: none;*/
}

.affiliate-legal {
  scrollbar-color: var(--green-fresh) var(--border-dark);
}

.affiliate-legal::-webkit-scrollbar-track {
  background: var(--text-muted);
}

.affiliate-legal::-webkit-scrollbar-thumb {
  background-color: var(--green-fresh);
  border-radius: 14px;
  transition: background-color 0.3s;
}

.affiliate-legal::-webkit-scrollbar-thumb:hover {
  background-color: #F0B90B;
}

#logout .logout-wrapper {
  width: max-content;
  margin: 54px auto;
}

#logout .logout-wrapper .logout-w-max {
  padding: 15px 30px;
  border-radius: 24px;
  gap: 20px;
}

#affwp-affiliate-dashboard h4 {
  margin-bottom: 0;
}

.pb-15 {
  padding-bottom: 15px;
}

.text-red {
  color: #f64c6b;
}

.border-red {
  border-color: #f64c6b;
}

.logout-button {
  min-width: 172px;
}

.border-green {
  border-color: #F0B90B;
}

#logout .block.text-light {
  font-size: 16px;
}

.dashboard-banner {
  border-radius: 16px;
  border: 1px solid var(--Text-Gradient, #F0B90B);
  background:
    radial-gradient(50.2% 228.93% at 15.75% -124.02%, rgba(240, 185, 11, 0.66) 0%, rgba(240, 185, 11, 0) 100%),
    rgba(17, 19, 20, 0.8);
}

.aut-form-row.login {
  position: relative;
}

.aut-form-row.registr::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 556px;
  background: #F0B90B;
  filter: blur(119.536px);
  width: 556px;
  height: 539px;
  z-index: -1;
}

.aut-form-row.login::after {
  content: '';
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 370px;
  height: 359px;
  border-radius: 370px;
  background: #F0B90B;
  filter: blur(119.53620147705078px);
  z-index: -1;
}

.aut-form-row .affwp-form,
.aut-form-row .lost_reset_password {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(17, 19, 20, 0.8);
  backdrop-filter: blur(94px);
  padding: 32px;
  max-width: 646px;
  margin: 0 auto;
  z-index: 2;
  width: 100%;
}

.woocommerce-lost-password h1 {
  display: none;
}

.aut-form-row .affwp-form h3,
.aut-form-row .lost_reset_password h3 {
  text-align: center;
  max-width: 90%;
  margin: 0 auto 20px auto;
}

.label-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.affwp-promo {
  margin: 24px 0;
}

.label-row label {
  color: var(--Text-Primary, #fff);
  font-size: var(--font-size-P2, 18px);
  font-weight: 600;
  line-height: var(--font-line-hight-P2, 24px);
  margin-bottom: 10px;
  /* 133.333% */
}

.label-row label.affwp-tos,
.label-row label.affwp-user-remember {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  font-size: var(--font-size-P3, 16px);
  font-style: normal;
  font-weight: 300;
  line-height: var(--font-line-hight-P3, 24px);
}

.label-row label.affwp-tos .error-message {
  order: 3;
}

.label-row label.affwp-tos span {
  order: 2;
  flex-basis: 90%;
}

.label-row label.affwp-tos .error-message {
  order: 3;
}

.label-row label.affwp-tos span {
  order: 2;
  flex-basis: 90%;
}

.label-row label.affwp-tos a {
  color: #F0B90B;
}

.have-sign {
  font-size: var(--font-size-P2, 18px);
  font-weight: 300;
  text-align: center;
  line-height: var(--font-line-hight-P2, 24px);
  width: 100%;
  display: block;
  margin-bottom: 24px;
}

.have-sign a {
  color: var(--Text-Primary-Link, #F0B90B);
  margin-bottom: 32px;
  text-decoration-line: underline;
  text-decoration-style: solid;
}

.have-sign a:hover {
  text-decoration-line: none;
}

.affwp-lost-password {
  color: var(--Text-Primary-Link, #F0B90B);
  font-size: var(--font-size-P2, 18px);
  font-weight: 300;
  line-height: var(--font-line-hight-P2, 24px);
  /* 133.333% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  margin-top: 24px;
}

.g-recaptcha {
  margin-bottom: 20px;
}

.label-row.novalid label {
  color: #f64c6b;
}

.label-row.novalid label.affwp-tos {
  color: white;
}

.label-row.novalid label.affwp-tos,
.affwp-form .novalid input,
.affwp-form .novalid select,
.affwp-form .novalid textarea {
  outline-color: #f64c6b;
}

.woocommerce-password-strength.bad {
  background: none !important;
  border: none !important;
  text-align: left !important;
  color: #f64c6b;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 16px;
}

.woocommerce-password-strength.short {
  background: none !important;
  border: none !important;
  text-align: left !important;
  color: #f64c6b;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 16px;
}

.woocommerce-password-strength.good {
  background: none !important;
  border: none !important;
  text-align: left !important;
  color: #ffc733;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 16px;
}

.woocommerce-password-strength.strong {
  background: none !important;
  border: none !important;
  text-align: left !important;
  color: #F0B90B;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 16px;
}

p.affwp-error a {
  color: rgb(246, 76, 107);
  text-decoration: underline;
}

.affwp-errors,
.affwp-notice {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* background: rgba(17, 19, 20, 0.8); */
  backdrop-filter: blur(94px);
  padding: 10px 15px;
  max-width: 646px;
  margin: 0 auto 21px;
}

#popup-events .soclial-item-mini path {
  fill: #747474;
}

.rounded-md.Live {
  text-transform: uppercase;
  background: #ff002e;
  color: #fff;
}

.rounded-md.event {
  border-radius: 6px;
  background: linear-gradient(231deg, #c489fa 27.94%, #c37eff 57.81%, #a851e7 87.1%);
  color: #35005d;
}

.rounded-md.webinar {
  border-radius: 6px;
  background: linear-gradient(231deg, #75bbff 27.94%, #48a5ff 57.81%, #328be0 87.1%);
  color: #00305d;
}

.news {
  background-image: var(--yellow-gradient);
  color: var(--dark-gray);
}

.one-events {
  gap: 30px;
}

.form-event {
  display: flex;
  padding: 20px;
  align-items: flex-start;
  gap: 50px;
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid #F0B90B;
  background:
    radial-gradient(52.16% 87.57% at 94.18% -0.05%, rgba(240, 185, 11, 0.2) 0%, rgba(240, 185, 11, 0) 100%),
    rgba(17, 19, 20, 0.8);
  backdrop-filter: blur(94px);
}

.form-event-right .custom-select {
  margin-top: 8px;
}

.starts-timezone {
  margin-top: 20px;
}

.start-date-utc {
  margin-top: 8px;
}

.timer {
  display: flex;
  justify-content: space-between;
}

.current-menu-parent {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: var(--green-gradient);
}

@media (max-width: 1536px) {
  .menu-header li a {
    font-size: 14px;
    line-height: 20px;
    /* 150% */
  }

  input,
  textarea,
  .woocommerce form .form-row .input-text,
  #affwp-payment-network {
    font-size: 16px;
    line-height: 24px;
  }

  .input-container label {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (min-width: 1024px) {
  body .cmplz-cookiebanner {
    margin: 0;
  }

  .cmplz-cookiebanner .cmplz-body {
    align-items: center;
  }

  .woocommerce table.shop_table tbody.mobile {
    display: none;
  }

  .form-event {
    gap: 50px;
    background:
      radial-gradient(50% 100% at 0% 100%, rgba(240, 185, 11, 0.66) 0%, rgba(240, 185, 11, 0) 100%),
      rgba(17, 19, 20, 0.8);
  }

  .load-more-btn {
    margin-top: 30px !important;
  }
}

@media (max-width: 1024px) {
  input,
  textarea,
  .woocommerce form .form-row .input-text,
  .select2-container .select2-selection--single .select2-selection__rendered,
  #affwp-payment-network {
    padding: 13px 20px;
    font-size: 14px;
    line-height: 22px;
  }

  .input-container label {
    font-size: 14px;
    line-height: 22px;
  }

  body .cmplz-cookiebanner.cmplz-show {
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: column;
  }

  body .cmplz-cookiebanner .cmplz-buttons {
    width: 100%;
  }

  .woocommerce-billing-fields h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .woocommerce form .woocommerce-billing-fields .form-row label {
    font-size: 14px;
    line-height: 22px;
  }

  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last {
    width: 100%;
  }

  .woocommerce form .form-row {
    margin-bottom: 20px;
  }

  .order_review-block {
    flex-direction: column !important;
    gap: 20px;
  }

  .order_review-block .order-review-left,
  .order_review-block .right-column {
    width: 100% !important;
  }

  .order_review-block .right-column {
    order: -1;
  }

  .payment-card-label {
    padding: 16px 10px;
  }

  .custom-coupon-code {
    padding: 13px 20px;
    font-size: 14px;
    line-height: 22px;
    width: 100%;
  }

  .applied-coupon {
    padding: 13px 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .woocommerce-checkout #payment ul.payment_methods li {
    padding: 12px 20px;
  }

  .wc_payment_methods li label {
    display: flex;
    /* flex-direction: row-reverse; */
    justify-content: space-between;
    width: 100%;
  }

  .howitworks br {
    display: none;
  }

  .justify-end {
    justify-content: end;
  }

  .woocommerce-checkout #payment .coupon-wrapper {
    margin-bottom: 5px;
  }

  .pt-checkout-cart {
    padding-top: 110px;
  }

  .table-full-right {
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    scrollbar-width: none;
    /* Для Firefox */
    -ms-overflow-style: none;
    /* Для IE 10+ */
  }

  .woocommerce table.shop_table tbody.desctop {
    display: none;
  }

  .woocommerce table.shop_table tbody.mobile .tr-mobile-image td {
    padding-bottom: 0;
  }

  .woocommerce table.shop_table tbody.mobile td img {
    max-width: 70px;
    padding: 0;
  }

  /* #affwp-affiliate-dashboard .tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
   }

   #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li {
      padding: 13px 5px;
      text-align: center;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(1) {
      grid-area: 1 / 1 / 2 / 2;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(2) {
      grid-area: 1 / 2 / 2 / 3;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(3) {
      grid-area: 1 / 3 / 2 / 4;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(4) {
      grid-area: 1 / 4 / 2 / 5;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(5) {
      grid-area: 2 / 1 / 3 / 2;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(6) {
      grid-area: 2 / 2 / 3 / 3;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(7) {
      grid-area: 2 / 3 / 3 / 4;
   }

   #affwp-affiliate-dashboard .tabs .tab:nth-child(8) {
      grid-area: 2 / 4 / 3 / 5;
   }

   #affwp-affiliate-dashboard .tabs a {
      grid-area: 3 / 1 / 4 / 5;
   }
      */
  #affwp-affiliate-dashboard .tabs {
    justify-content: space-between;
  }

  #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li {
    width: calc(50% - 8px);
  }

  .scroll-container {
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* прячем scrollbar в IE и Edge */
    scrollbar-width: none;
    /* прячем scrollbar в Firefox */
  }

  /* Для Chrome, Safari и другихWebKit-браузеров */
  .scroll-container::-webkit-scrollbar {
    display: none;
  }

  #logout .logout-wrapper {
    width: 100%;
    margin: 54px auto;
  }

  .logout-button {
    min-width: calc((100% - 10px) / 2);
  }

  .one-events {
    gap: 10px;
  }

  .form-event {
    padding: 30px;
    gap: 20px;
  }
}

#bg-continue {
  min-width: 216px;
}

#old-banner-popup {
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#old-banner-popup .banner-container {
  width: 100%;
  max-width: 760px;
  margin: auto;
}

#old-banner-popup input {
  max-width: 357px;
}

#old-banner-popup input[type='submit'] {
  outline: none;
  padding: 13px 44px 13px 20px;
}

.text-footer {
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  line-height: 120%;
}
#step-one .mobile-image,
#step-two .mobile-image {
  display: none;
}
@media (max-width: 768px) {
  .aut-form-row.registr::after {
    border-radius: 350px;
    width: 350px;
    height: 350px;
  }

  .elipse-gate::before {
    z-index: -1;
  }

  .elipse-window::before {
    width: 159.526px;
    height: 236.9px;
  }

  .accordion-content {
    margin: 0px 0 12px 0;
  }

  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-size: 14px;
    line-height: 20px;
    padding: 13px 20px;
    width: 100%;
  }

  .mt-afilate {
    margin-top: 110px;
  }

  .label-row {
    margin-bottom: 26px;
  }

  .affwp-promo {
    margin: 24px 0 !important;
  }

  .label-row label,
  .label-row label.affwp-tos {
    font-size: var(--font-size-P2, 14px);
    line-height: var(--font-line-hight-P2, 22px);
  }

  .have-sign {
    font-size: 14px;
    line-height: 22px;
  }

  .affwp-lost-password {
    font-size: 14px;
    line-height: 22px;
  }

  .label-row label.affwp-tos,
  .label-row label.affwp-user-remember {
    font-size: 14px;

    .label-row label.affwp-tos,
    .label-row label.affwp-user-remember {
      font-size: 14px;
      line-height: 22px;
    }

    .label-row label.affwp-tos span {
      flex-basis: 80%;
      margin-top: -5px;
    }

    .g-recaptcha > div,
    .g-recaptcha iframe {
      width: 100% !important;
    }
  }

  #bg-continue {
    width: 100%;
  }

  #old-banner-popup input {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }

  #old-banner-popup input[type='submit'] {
    max-width: none;
  }

  #old-banner-popup {
    overflow: hidden;
    background: #02070a;
  }

  #old-banner-popup .banner-container {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    align-items: flex-start;
  }

  #youAreIn-banner-popup {
    height: 100vh;
    overflow: hidden;
  }

  #step-one .desctop-image,
  #step-two .desctop-image {
    visibility: hidden;
  }

  #step-one .mobile-image,
  #step-two .mobile-image {
    top: 0;
    left: 0;
    width: 100%;
    display: block;
  }
  #step-one .mobile-image img,
  #step-two .mobile-image img {
    width: 100%;
    height: auto;
  }
  #step-one .logo-banners {
    margin-top: 30px;
  }
  #step-two .logo-banners {
    margin-top: 80px;
  }
}

.referrals-slider {
  -webkit-appearance: none;
  width: 100%;
  background: var(--text-muted);
  border-radius: 2px;
  border: none;
  outline: none;
  padding: 0;
}

.referrals-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 24px;
  border-radius: 12px;
  background: white url('../icon/menu-icon.svg') no-repeat center center;
  background-size: 16px 16px;
  cursor: pointer;
}

.referrals-slider::-moz-range-thumb {
  width: 46px;
  height: 24px;
  border-radius: 12px;
  background: white url('../icon/menu-icon.svg') no-repeat center center;
  background-size: 16px 16px;
  cursor: pointer;
}

.referrals-slider:focus {
  border-color: none;
}

#process-scroll-bar::-webkit-scrollbar {
  display: none;
  /* Для Chrome, Safari и Opera */
}

.load-more-btn {
  margin-top: 10px;
}

#old-banner-popup-close {
  margin-bottom: 50px;
}

#old-banner-popup-close:hover {
  cursor: pointer;
}

/* Скрываем стандартный индикатор WooCommerce */
.woocommerce-password-strength {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────
   NEW CHECKOUT RIGHT-COLUMN DESIGN (.nm-* prefix)
   Replaces the old .shop_table layout. Activated via .nm-summary on
   .right-column. Functional hooks (#place_order, .place-order, T&C inputs,
   .coupon-container, .apply-custom-coupon-btn, .custom-coupon-code) are
   preserved — only the visual wrapping changes.
   ──────────────────────────────────────────────────────────────────────── */

/* Outer aside wrapper (the .right-column gets .nm-summary class) */
.right-column.nm-summary {
  background: linear-gradient(180deg, rgba(240, 185, 11, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(240, 185, 11, 0.35);
  border-radius: 22px;
  padding: 22px 22px 14px;
  position: relative;
  overflow: visible;
  box-shadow: 0 0 60px -10px rgba(240, 185, 11, 0.25);
  /* isolate child stacking — keeps the billing popup (z-index 110) trapped
     inside this aside so it never overlaps the sticky header. */
  isolation: isolate;
}

/* Stretch the right column to match the left column's full height ONLY on
   desktop where they sit side by side. On mobile (column-stacked), this
   would force the right column to match the much-taller left column,
   leaving a massive empty void in the middle. */
@media (min-width: 1025px) {
  .right-column.nm-summary {
    min-height: 100%;
    align-self: stretch;
  }
}

.right-column.nm-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(240, 185, 11, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.right-column.nm-summary > * {
  position: relative;
  z-index: 1;
}

/* Hide the legacy .shop_table styling when inside .nm-summary */
.right-column.nm-summary table.shop_table,
.right-column.nm-summary .shop_table {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* The review-order template wraps its content in
   `.woocommerce-checkout-review-order-table.nm-review-order` (kept so WC's
   update_order_review AJAX can replace the block). That wrapper sits between
   the flex column (.right-column.nm-summary) and `.nm-footer-box`, which
   blocks `margin-top: auto` on the footer from pushing it to the column's
   bottom edge. Making the wrapper itself a flex column with flex: 1 lets
   the footer's auto margin work inside it AND stretches it to fill the
   remaining height of the right column.
   Desktop-only — on mobile, stretching this wrapper to fill the (artificially
   tall) parent creates a huge empty gap between the totals and the footer. */
@media (min-width: 1025px) {
  .right-column.nm-summary .woocommerce-checkout-review-order-table.nm-review-order {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ── Billing Info hover popup (full-width trigger, hover-revealed popup) ── */
.nm-billing-toggle {
  position: relative;
  display: block;
  margin-bottom: 18px;
}

/* Higher specificity so this beats the `.right-column.nm-summary > *` z-index */
.right-column.nm-summary .nm-billing-toggle {
  z-index: 60;
}

.nm-billing-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(145deg, #0a2e26 0%, #0d1f1b 40%, #111816 100%);
  border: 1px solid var(--text-muted);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.nm-billing-toggle:hover .nm-billing-head {
  border-color: var(--turquoise-green);
  box-shadow: 0 0 15px rgba(240, 185, 11, 0.2);
}

.nm-billing-head svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
}

.nm-billing-chevron {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.nm-billing-toggle:hover .nm-billing-chevron {
  transform: rotate(180deg);
}

.nm-billing-body {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 110;
  padding: 18px 22px;
  background: linear-gradient(145deg, #0d2e28 0%, #0f1f1c 50%, #121a17 100%);
  border: 1px solid var(--turquoise-green);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(240, 185, 11, 0.18), 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.nm-billing-toggle:hover .nm-billing-body {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nm-billing-body .billing-popup-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 12px;
}

.nm-billing-body .billing-popup-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}

.nm-billing-body .billing-popup-table td {
  padding: 5px 0;
  font-size: 13px;
  color: #fff;
  vertical-align: top;
}

.nm-billing-body .billing-popup-label {
  color: var(--medium-gray) !important;
  width: 30%;
  padding-right: 12px;
}

.nm-billing-body .billing-popup-value {
  width: 70%;
  font-weight: 500;
}

@keyframes nm-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Eyebrow + Order Title ── */
.nm-summary-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turquoise-green);
  font-weight: 600;
  margin-bottom: 4px;
}

.nm-summary-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.25;
}

/* ── Featured Product Card ── */
.nm-product {
  background: linear-gradient(145deg, #0a2e26 0%, #0d1f1b 40%, #111816 100%);
  border: 1px solid rgba(240, 185, 11, 0.2);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 26px;
}

.nm-product + .nm-product {
  margin-top: -6px;
}

.nm-product-art {
  position: relative;
  height: 150px;
  border-radius: 10px;
  background: linear-gradient(135deg, #061a14, #0d3528 60%, #08221a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(240, 185, 11, 0.2);
}

.nm-product-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(240, 185, 11, 0.3), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(240, 185, 11, 0.2), transparent 60%);
  pointer-events: none;
}

.nm-product-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(240, 185, 11, 0.4);
  border-radius: 4px;
  color: #fff;
  text-transform: uppercase;
  z-index: 2;
}

.nm-product-logo,
.nm-product-n {
  position: relative;
  z-index: 1;
  height: 42px;
  width: auto;
  margin-bottom: 6px;
  opacity: 0.95;
}

.nm-product-balance {
  position: relative;
  z-index: 1;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 20px rgba(240, 185, 11, 0.5);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.nm-product-cap {
  position: relative;
  z-index: 1;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.nm-product-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.35;
}

.nm-product-name .nm-product-x {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-left: 4px;
}

/* 6-cell grid */
.nm-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 14px;
}

.nm-product-grid > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nm-product-grid span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

.nm-product-grid strong {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

/* ── Pricing block ── */
.nm-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.nm-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.nm-total-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.nm-total-final span:first-child {
  font-weight: 700;
  color: #fff;
  font-size: 17px;
}

.nm-total-amount {
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(231deg, var(--turquoise-green) 27.94%, var(--green-mint) 57.81%, #F0B90B 87.1%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.nm-free {
  font-style: normal;
  font-weight: 600;
  color: var(--turquoise-green);
}

/* ── Discount code collapsible ── */
.nm-coll-disc {
  margin-top: 0;
}

.nm-coll-disc-trigger {
  background: none;
  border: none;
  padding: 0;
  color: var(--turquoise-green);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nm-coll-disc-trigger:hover {
  color: var(--green-mint);
}

.nm-coll-disc-trigger svg {
  transition: transform 0.25s ease;
}

.nm-coll-disc[data-open='true'] .nm-coll-disc-trigger svg {
  transform: rotate(180deg);
}

.nm-coll-disc-trigger .nm-coll-disc-label-open { display: none; }
.nm-coll-disc[data-open='true'] .nm-coll-disc-trigger .nm-coll-disc-label-closed { display: none; }
.nm-coll-disc[data-open='true'] .nm-coll-disc-trigger .nm-coll-disc-label-open { display: inline; }

/* Smooth open/close using the `grid-template-rows: 0fr → 1fr` technique
   instead of animating max-height. max-height is NOT GPU-accelerated and
   forces a full layout reflow on every animation frame, which causes
   visible jank on slower phones. The grid-rows approach lets the browser
   compose the height change without per-frame reflow, so it stays at
   60fps even on weaker devices.
   Supported in Safari 16.4+ / Chrome 117+ — older browsers gracefully
   degrade to an instant snap (still functional, just no transition). */
.nm-coll-disc-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    margin-top 0.25s ease;
}

/* Direct child wrapper needs overflow:hidden so content clips during the
   collapsed (0fr) state, plus min-height:0 so the grid item is allowed to
   shrink below its content size. */
.nm-coll-disc-body > * {
  min-height: 0;
  overflow: hidden;
}

.nm-coll-disc[data-open='true'] .nm-coll-disc-body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

/* Style the existing .coupon-container inside the collapsible */
.nm-coll-disc-body .coupon-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nm-coll-disc-body .coupon-form {
  display: flex;
  gap: 8px;
}

.nm-coll-disc-body .custom-coupon-code {
  flex: 1;
  min-width: 0;
  padding: 11px 14px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  border-radius: 10px !important;
  outline: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nm-coll-disc-body .apply-custom-coupon-btn {
  background: var(--turquoise-green);
  color: #022;
  border: 1px solid var(--turquoise-green);
  border-radius: 10px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 13px;
  min-width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.nm-coll-disc-body .apply-custom-coupon-btn:hover {
  background: var(--green-mint);
  border-color: var(--green-mint);
  color: #022;
}

.nm-coll-disc-body .applied-coupon {
  border-radius: 10px;
  border: 1px dashed var(--turquoise-green);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 400;
}

/* ── Footer box: disclaimer + trust badges ──
   Server-rendered in two places (review-order.php for desktop right card,
   payment.php under .place-order for mobile). CSS picks which one to show
   based on viewport. This replaces the previous JS-relocation approach
   that was silently failing on some mobile browsers (Samsung Internet)
   and leaving the footer invisible. */
.nm-footer-box {
  margin-top: 28px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

/* Mobile (<769px): show the copy in payment.php (after Place Order), hide
   the desktop copy in the right card. */
@media (max-width: 768px) {
  .nm-footer-box.nm-footer-desktop {
    display: none;
  }
}

/* Desktop/tablet (≥769px): show the right-card copy, hide the mobile copy.
   On desktop (≥1025px) the right card's footer is also pushed to the
   column's bottom edge via margin-top: auto so it aligns with the
   Place Order button. */
@media (min-width: 769px) {
  .nm-footer-box.nm-footer-mobile {
    display: none;
  }
}

@media (min-width: 1025px) {
  .nm-footer-box.nm-footer-desktop {
    margin-top: 28px;
  }
}

.nm-sim-disclaimer {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.005em;
}

.nm-sim-disclaimer strong {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

/* ── Place-order slot — JS moves .place-order here ── */
.nm-place-order-slot {
  margin-top: 14px;
}

/* When the slot is empty (mobile, where .place-order stays in #payment), collapse it */
.nm-place-order-slot:empty {
  display: none;
}

.nm-place-order-slot .place-order {
  margin: 0;
}

.nm-place-order-slot .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 14px;
}

.nm-place-order-slot #place_order {
  width: 100%;
  max-width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  letter-spacing: 0.02em;
}

/* ── Trust badges row (inside .nm-footer-box, hairline-separated) ── */
.nm-trust {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.nm-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nm-trust-item svg {
  color: var(--turquoise-green);
  flex-shrink: 0;
  opacity: 0.85;
}

/* ── Mobile tweaks ── */
@media (max-width: 768px) {
  .right-column.nm-summary {
    padding: 18px;
    border-radius: 18px;
    /* Mobile perf: lighter outer glow. The 60px blur shadow on desktop is
       a paint-heavy effect that re-renders every time WC rebuilds the
       right column (every AJAX). At mobile screen size the glow is barely
       perceptible anyway — drop it down to a tight 12px shadow that costs
       almost nothing to repaint. */
    box-shadow: 0 0 12px -4px rgba(240, 185, 11, 0.2);
  }
  .nm-product-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nm-product-balance {
    font-size: 24px;
  }
  .nm-summary-title {
    font-size: 18px;
  }
  .nm-trust {
    justify-content: flex-start;
    gap: 10px 18px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LEFT COLUMN AS STACKED CARDS
   The design has the left column rendered as 2-3 separate visual cards
   (coupon, methods, T&C+button) with vertical spacing between them.
   We achieve that by making #payment a transparent flex container and
   styling .nm-coupon-card, .nm-methods-card, .place-order each as cards.
   ───────────────────────────────────────────────────────────────────────── */

.order_review-block #payment {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 14px !important;
}

/* Specificity-boosted to beat `.woocommerce-checkout #payment div.form-row
   { padding: 0; margin: 0; }` (defined earlier in this file) which would
   otherwise zero out the card padding and collapse the checkboxes/button
   to the card's left edge. */
.woocommerce-checkout .order_review-block #payment > .nm-coupon-card,
.woocommerce-checkout .order_review-block #payment > .nm-methods-card,
.woocommerce-checkout .order_review-block #payment > div.place-order {
  background: var(--graphite-fog);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 22px 22px !important;
}

/* The T&C/Place-Order card needs a touch more bottom padding so the
   green-bordered button doesn't visually merge with the card frame. */
.woocommerce-checkout .order_review-block #payment > div.place-order {
  padding: 22px 22px 18px !important;
}

/* Coupon card — compact, single-row layout */
.order_review-block #payment > .nm-coupon-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Methods card — heading + list */
.order_review-block #payment > .nm-methods-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tighter rows so the methods card is more compact */
.payment-card.nm-pay-row .nm-pay-row-label {
  padding: 12px 16px !important;
  gap: 12px !important;
}

.nm-pay-list {
  gap: 8px;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.payment-card.nm-pay-row .nm-pay-icon {
  width: 88px !important;
  height: 48px !important;
  min-width: 88px;
}

@media (max-width: 768px) {
  .woocommerce-checkout .order_review-block #payment > .nm-coupon-card,
  .woocommerce-checkout .order_review-block #payment > .nm-methods-card,
  .woocommerce-checkout .order_review-block #payment > div.place-order {
    padding: 18px 16px !important;
    border-radius: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   PLACE-ORDER BLOCK STYLING (T&C checkboxes + button)
   Matches the design's .nm-place + .nm-check styles. Lives in #payment so
   we scope to that. WC button has class .btn-primary which we override.
   ───────────────────────────────────────────────────────────────────────── */

/* T&C wrapper — no divider, the parent card frame already separates it */
#payment .place-order .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 6px;
  padding: 0;
  border-top: none;
}

/* Each T&C row label — flex with gap so checkbox + text don't touch.
   Theme's terms.php uses <label class="flex items-center space-x-4">, but
   we don't rely on Tailwind's space-x because we reset checkbox margins
   below. Explicit gap on the label is the source of truth here. */
#payment .place-order .woocommerce-terms-and-conditions-wrapper label,
#payment .place-order .woocommerce-terms-and-conditions-wrapper > p {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

/* Smaller checkbox (18px) per design — overrides global 24px input[type=checkbox].
   Use margin-top only (not full margin reset) so the parent flex gap stays in
   effect; otherwise Tailwind/our space-x utilities get nuked. */
#payment .place-order .woocommerce-form__input-checkbox,
#payment .place-order input[type='checkbox'] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 5px !important;
  margin-top: 1px !important;
  margin-left: 0 !important;
  flex-shrink: 0;
}

/* Re-position the green check-icon in the smaller checkbox */
#payment .place-order input[type='checkbox']:checked::after {
  width: 11px;
  height: 7px;
}

/* Place Order button — full-width, design-matching.
   Tighter glow so it doesn't bleed through the parent card's rounded edge. */
#payment .place-order #place_order,
#payment .place-order button#place_order,
.nm-place-order-slot #place_order {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 12px 0 0 !important;
  padding: 16px 24px !important;
  border: 2px solid var(--turquoise-green) !important;
  border-radius: 14px !important;
  background: var(--turquoise-green) !important;
  color: #022 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 8px 20px -8px rgba(240, 185, 11, 0.45);
  float: none !important;
  text-align: center;
}

#payment .place-order #place_order:hover:not([disabled]),
.nm-place-order-slot #place_order:hover:not([disabled]) {
  background: var(--green-mint) !important;
  border-color: var(--green-mint) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 10px 24px -8px rgba(240, 185, 11, 0.55);
}

/* Disabled state — transparent bg, green border, green text. No outer halo
   so the parent card's frame stays clean. */
#payment .place-order #place_order[disabled],
#payment .place-order #place_order:disabled,
.nm-place-order-slot #place_order[disabled],
.nm-place-order-slot #place_order:disabled {
  background: transparent !important;
  color: var(--turquoise-green) !important;
  border-color: var(--turquoise-green) !important;
  cursor: not-allowed;
  opacity: 0.85;
  box-shadow: none !important;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  #payment .place-order .woocommerce-terms-and-conditions-wrapper > p,
  #payment .place-order .woocommerce-form__label-for-checkbox {
    font-size: 12px;
    gap: 10px;
  }
  #payment .place-order #place_order,
  .nm-place-order-slot #place_order {
    padding: 14px 18px !important;
    font-size: 14px !important;
  }
}

/* WooCommerce blockUI loader — fully suppressed.
   WC fires $.blockUI() on .woocommerce-checkout-payment and
   .woocommerce-checkout-review-order during every update_checkout AJAX
   (payment method change, coupon apply, country change). The overlay
   reads as a glitch on the dark theme even when themed. Form safety is
   preserved by `.updating { pointer-events: none }` (line ~2329), which
   WC adds to the review-order block while an AJAX is in flight. */
.blockUI,
.blockUI.blockOverlay,
.blockUI.blockMsg,
.blockUI.blockElement,
.blockOverlay,
.blockMsg,
.blockElement,
.woocommerce .loading,
.woocommerce-checkout .loading {
  display: none !important;
}

/* ============================================================
   STEP 2 v1 — Diego's design (Billing Info)
   2-column layout: BillingForm left + AccountSummaryS2 right.
   Classes prefixed .nm-s2-* to avoid collision with step-3
   .nm-summary / .nm-product / .nm-card. Account-summary side
   uses .nm-acct-* (unique, no conflicts in theme).
   ============================================================ */

/* z-index: 1 (not 4!) so the sticky site header (.header / .is-fixed
   at z-index: 4) stays above the form when the user scrolls. We only
   need >0 here to lift the form above the green-blur background
   inside #checkout-block which sits at z-index: -1. */
.nm-s2-wrap { position: relative; z-index: 1; }

.nm-s2-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1100px) {
  .nm-s2-body { grid-template-columns: 1fr; }
}

.nm-s2-left { min-width: 0; }
.nm-s2-right { min-width: 0; }
.nm-s2-right-sticky { position: sticky; top: 24px; }

/* ---------- FORM CARD (left column) ---------- */
.nm-s2-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 36px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  font-family: 'Sora', sans-serif;
  color: #fff;
}
.nm-s2-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(240, 185, 11,0.06), transparent 50%);
  pointer-events: none;
}
.nm-s2-card > * { position: relative; }

.nm-s2-section { margin-bottom: 36px; }
.nm-s2-section:last-child { margin-bottom: 0; }

.nm-s2-section-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 22px;
}

.nm-s2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.nm-s2-grid-full { grid-column: span 2; }

/* Inputs (scoped under .nm-s2-card) — comfortable but not chunky.
   Padding declared as longhand properties (not shorthand) so the phone
   field can override only padding-left below without resetting the others.
   Note: input[type="tel"] intentionally excluded from this rule — phone
   gets its own padding declaration further down to leave room for the
   intl-tel-input flag overlay. */
.nm-s2-card input[type="text"],
.nm-s2-card input[type="email"],
.nm-s2-card input[type="number"],
.nm-s2-card input[type="password"],
.nm-s2-card select,
.nm-s2-card .input-text {
  width: 100% !important;
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 13px !important;
  padding-top: 15px !important;
  padding-right: 18px !important;
  padding-bottom: 15px !important;
  padding-left: 18px !important;
  color: #fff !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  font-family: 'Sora', sans-serif !important;
  letter-spacing: -0.005em !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}

/* Phone field — same visual style but padding-left reserves space for
   intl-tel-input's absolute-positioned flag/arrow overlay.
   76px keeps a ~10px gap between the flag column's divider and the typed
   number after tightening the flag's left padding (4px) — column shifted
   left so the input padding drops to match. */
.nm-s2-card input[type="tel"],
.nm-s2-card #billing_phone {
  width: 100% !important;
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 13px !important;
  padding-top: 15px !important;
  padding-right: 18px !important;
  padding-bottom: 15px !important;
  padding-left: 76px !important;
  color: #fff !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  font-family: 'Sora', sans-serif !important;
  letter-spacing: -0.005em !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  height: auto !important;
}
.nm-s2-card input::placeholder { color: rgba(255,255,255,0.4) !important; }
.nm-s2-card input:hover,
.nm-s2-card select:hover { border-color: rgba(255,255,255,0.16) !important; }
.nm-s2-card input:focus,
.nm-s2-card select:focus {
  border-color: var(--turquoise-green) !important;
  box-shadow: 0 0 0 3px rgba(240, 185, 11,0.12) !important;
  background: rgba(2,8,6,0.9) !important;
}
.nm-s2-card select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B5C5BD' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}

/* WC .form-row adapter — make WC native field markup fit the grid.
   width: 100% !important is required to beat WC core's default
   `.form-row-first { width: 47% }` / `.form-row-last { width: 47% }` rules
   that ship in woocommerce.css. We want OUR grid (1fr 1fr) to handle
   the 2-col split, not WC's percentage widths. */
.nm-s2-card .form-row,
.nm-s2-card .form-row-first,
.nm-s2-card .form-row-last,
.nm-s2-card .form-row-wide {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
.nm-s2-card .form-row label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
.nm-s2-card .form-row .woocommerce-input-wrapper { width: 100%; display: block; }
.nm-s2-card .form-row .required { color: var(--turquoise-green); }
.nm-s2-card .form-row.woocommerce-invalid input,
.nm-s2-card .form-row.woocommerce-invalid select {
  border-color: #f64c6b !important;
  box-shadow: 0 0 0 3px rgba(246,76,107,0.12) !important;
}
.nm-s2-card .form-row .iti { width: 100%; }

.nm-s2-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 32px 0;
}

/* ---------- ACCOUNT SUMMARY PANEL (right column) ---------- */
.nm-acct-summary {
  background: linear-gradient(180deg, rgba(240, 185, 11,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(240, 185, 11,0.35);
  border-radius: 24px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 60px -10px rgba(240, 185, 11, 0.25);
  font-family: 'Sora', sans-serif;
  color: #fff;
}
.nm-acct-summary::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(240, 185, 11,0.08), transparent 55%);
  pointer-events: none;
}
.nm-acct-summary > * { position: relative; }

.nm-acct-eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.nm-acct-eyebrow span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turquoise-green);
}

/* Hero product card */
.nm-acct-hero {
  position: relative;
  background: linear-gradient(135deg, #061a14, #0d3528 60%, #08221a);
  border: 1px solid rgba(240, 185, 11, 0.25);
  border-radius: 16px;
  padding: 22px 20px 20px;
  margin-bottom: 22px;
  overflow: hidden;
  text-align: center;
}
.nm-acct-hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(240, 185, 11,0.3), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(240, 185, 11,0.2), transparent 60%);
  pointer-events: none;
}
.nm-acct-hero-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  padding: 4px 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(240, 185, 11,0.4);
  color: var(--turquoise-green);
  border-radius: 4px;
  z-index: 2;
}
.nm-acct-hero-n {
  position: relative; z-index: 2;
  height: 34px; width: auto;
  display: block;
  margin: 4px auto 8px;
  filter: drop-shadow(0 0 16px rgba(240, 185, 11, 0.55));
}
.nm-acct-hero-balance {
  position: relative; z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px; font-weight: 700;
  color: #fff;
  text-shadow: 0 0 22px rgba(240, 185, 11,0.55);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.nm-acct-hero-cap {
  position: relative; z-index: 2;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
  font-weight: 600;
}
.nm-acct-hero-chips {
  position: relative; z-index: 2;
  display: flex; gap: 6px; justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.nm-acct-hero-chips span {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  background: rgba(2, 8, 6, 0.55);
  border: 1px solid rgba(240, 185, 11, 0.2);
  color: rgba(255,255,255,0.6);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Block sections */
.nm-acct-block { margin-bottom: 22px; }
.nm-acct-block:last-of-type { margin-bottom: 0; }
.nm-acct-block-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.nm-acct-block-head::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(255,255,255,0.08);
}

/* Performance metrics (bars) */
.nm-acct-metrics { display: flex; flex-direction: column; gap: 14px; }
.nm-acct-metric { display: flex; flex-direction: column; gap: 7px; }
.nm-acct-metric-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px;
}
.nm-acct-metric-label {
  color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 6px;
}
.nm-acct-metric-label svg { color: rgba(255,255,255,0.4); opacity: 0.6; }
.nm-acct-metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: #fff;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.nm-acct-metric-value em {
  font-style: normal;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  font-weight: 400;
  margin-left: 2px;
}
.nm-acct-bar {
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.nm-acct-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--turquoise-green), var(--green-mint));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(240, 185, 11, 0.5);
}

/* Terms (2-col grid) */
.nm-acct-terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nm-acct-term {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.nm-acct-term span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.nm-acct-term strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.nm-acct-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 22px 0 18px;
}

.nm-acct-price {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  gap: 14px;
}
.nm-acct-price-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nm-acct-price-label {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.nm-acct-price-note {
  font-size: 10.5px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}
.nm-acct-price-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--turquoise-green);
  text-shadow: 0 0 18px rgba(240, 185, 11,0.45);
  letter-spacing: -0.015em;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  white-space: nowrap;
}

/* Stack pre-discount strikethrough above the final green total when a
   coupon is active. Hidden by default — JS adds `.has-discount` on
   `.nm-acct-price` when the cart has an applied discount, which reveals
   the strikethrough span. */
.nm-acct-price-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  line-height: 1;
}
.nm-acct-price-original {
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  text-decoration-color: rgba(255,80,80,0.85);
  text-decoration-thickness: 2px;
  line-height: 1;
  white-space: nowrap;
}
.nm-acct-price.has-discount .nm-acct-price-original {
  display: block;
}

.nm-acct-continue {
  width: 100%;
  padding: 16px 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-family: 'Sora', sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .2s ease;
  cursor: pointer;
  background: var(--turquoise-green);
  color: #022;
  border: 2px solid var(--turquoise-green);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 0 4px rgba(240, 185, 11, 0.18),
    0 0 28px -2px rgba(240, 185, 11, 0.55),
    0 12px 32px -10px rgba(240, 185, 11, 0.6);
}
.nm-acct-continue:hover {
  background: var(--green-mint);
  border-color: var(--green-mint);
}
.nm-acct-continue:disabled,
.nm-acct-continue[data-state="disabled"] {
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(255,255,255,0.08);
  cursor: not-allowed;
  box-shadow: none;
}

.nm-acct-more {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--turquoise-green);
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%;
  justify-content: center;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  background: none; border: none;
  transition: color .2s;
  padding: 0;
}
.nm-acct-more:hover { color: var(--green-mint); }
.nm-acct-more svg { opacity: 0.85; }

/* Mobile */
@media (max-width: 768px) {
  .nm-s2-body { grid-template-columns: 1fr; gap: 20px; }
  .nm-s2-right-sticky { position: static; }
  .nm-s2-card { padding: 24px 18px; border-radius: 20px; }
  .nm-s2-grid { grid-template-columns: 1fr; gap: 14px; }
  .nm-s2-grid-full { grid-column: auto; }
  .nm-s2-section-title { font-size: 18px; margin-bottom: 16px; }
  .nm-acct-summary { padding: 22px 18px; border-radius: 20px; }
  .nm-acct-price-value { font-size: 24px; }
  .nm-acct-hero-balance { font-size: 28px; }
}

/* Step 2 — keep all fields in consistent 2-column grid like Diego's V1 mockup.
   No per-field width overrides. WC's auto-generated #billing_*_field wrappers
   inherit the parent .nm-s2-grid's 1fr 1fr columns. */

/* ---------- intl-tel-input compatibility (.iti) ----------
   Phone field uses intl-tel-input v17 library which wraps the <input>
   in an .iti container and overlays a flag-selector on the left.
   The library injects its own padding-left on the input to leave room
   for the flag — we MUST NOT override that with !important, or the
   input text gets hidden behind the flag. Use the same visual styling
   but let the library control left-padding. */
.nm-s2-card .iti {
  width: 100%;
  display: block;
}
.nm-s2-card .iti--allow-dropdown input[type="tel"],
.nm-s2-card .iti--separate-dial-code input[type="tel"],
.nm-s2-card input.iti__tel-input,
.nm-s2-card #billing_phone {
  /* 82px = measured flagColumnRightEdge (72.5px) + ~10px gap. */
  padding-left: 82px !important;
  height: auto !important;
}
/* Style the flag area to match the dark theme.
   The visible "column" (lighter bg + border-radius + right divider) lives on
   .iti__flag-container, not on the inner .iti__selected-flag. That way the
   column actually anchors to the input's left edge — putting the bg on the
   inner element only painted whatever intrinsic width it had, leaving a
   visible black gap between input edge and flag. */
.nm-s2-card .iti__flag-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px 0 0 12px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.nm-s2-card .iti__selected-flag {
  /* Fills the container — bg/border live on the container above, so this
     stays transparent and just centers the flag + arrow horizontally. */
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* The flag image itself — pin its own vertical alignment too as a belt-and-suspenders
   measure (default intl-tel-input uses table-cell layout). */
.nm-s2-card .iti__flag {
  align-self: center;
  display: inline-block;
  vertical-align: middle;
}
.nm-s2-card .iti__arrow {
  align-self: center;
  border-top-color: rgba(255,255,255,0.5);
}
.nm-s2-card .iti__selected-flag:hover,
.nm-s2-card .iti__selected-flag:focus {
  background: rgba(255,255,255,0.08) !important;
}
/* (.iti__arrow color/centering declared above with the flag setup) */
.nm-s2-card .iti__country-list {
  background: rgba(10, 30, 25, 0.97);
  border: 1px solid rgba(240, 185, 11, 0.3);
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 220px;
}
.nm-s2-card .iti__country {
  padding: 8px 12px;
  color: #fff;
}
.nm-s2-card .iti__country:hover,
.nm-s2-card .iti__country.iti__highlight {
  background: rgba(240, 185, 11, 0.15);
}
.nm-s2-card .iti__dial-code {
  color: rgba(255,255,255,0.5);
}
.nm-s2-card .iti__divider {
  border-bottom-color: rgba(255,255,255,0.1);
}

/* Remove the existing centered green ambient ellipse on step 2 — it sat
   in the middle of the viewport which clashed with the form layout.
   Replaced by .nm-s2-wrap::before below, which puts a softer glow at the
   top-right corner of the Billing Info area (behind the Account Summary
   card) — feels more like an accent on the design rather than a backdrop. */
#checkout-block > div[style*="green-fresh"] {
  display: none !important;
}

.nm-s2-wrap::before {
  content: "";
  position: absolute;
  top: -40px;
  right: 80px;
  width: 620px;
  height: 380px;
  border-radius: 50%;
  background: var(--green-fresh, #F0B90B);
  opacity: 0.45;
  filter: blur(120px);
  -webkit-filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 1100px) {
  .nm-s2-wrap::before {
    top: -60px;
    right: 40px;
    width: 360px;
    height: 260px;
    opacity: 0.35;
    filter: blur(90px);
    -webkit-filter: blur(90px);
  }
}

/* ============================================================
   Lot Size Calculator (Diego redesign, Figma node 472-1466)
   Scoped to #lsc-card so it survives without a Tailwind rebuild.
   ============================================================ */
#lsc-card {
  width: 100%;
  max-width: 600px;
  /* Top clearance so the sticky/overlapping site header doesn't cover the
     title — matches the theme's .pt-big-header (110px) convention used on
     other hero-less pages. */
  margin: 96px auto 40px;
  border-radius: 28px;
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
}
@media (min-width: 1024px) {
  #lsc-card {
    margin: 110px auto 48px;
    font-size: 16px;
    line-height: 24px;
  }
}
@media (min-width: 1536px) {
  #lsc-card {
    font-size: 18px;
  }
}

#lsc-card .lsc-header {
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1024px) {
  #lsc-card .lsc-header {
    padding: 14px 28px 0;
    gap: 10px;
  }
}
@media (min-width: 1536px) {
  #lsc-card .lsc-header {
    padding: 14px 30px 0;
    gap: 10px;
  }
}

#lsc-card .lsc-title {
  text-align: center;
}
#lsc-card .lsc-title h1 {
  font-size: 20px;
  line-height: 1.12;
  margin: 0;
}
@media (min-width: 1024px) {
  #lsc-card .lsc-title h1 { font-size: 24px; }
}
#lsc-card .lsc-subtitle {
  font-size: 13px;
  line-height: 1.3;
  background: linear-gradient(231.09deg, #F0B90B 27.94%, #F0B90B 57.81%, #F0B90B 87.1%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Two-column rows (Leverage+Account / Pair+Price) */
#lsc-card .lsc-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1024px) {
  #lsc-card .lsc-row {
    flex-direction: row;
    gap: 16px;
  }
}
@media (min-width: 1536px) {
  #lsc-card .lsc-row {
    gap: 16px;
  }
}
#lsc-card .lsc-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#lsc-card .lsc-label {
  font-weight: 600;
}

/* Inputs and selects */
#lsc-card .lsc-control {
  position: relative;
  height: 40px;
}
@media (min-width: 1024px) {
  #lsc-card .lsc-control { height: 40px; }
}
@media (min-width: 1536px) {
  #lsc-card .lsc-control { height: 42px; }
}
#lsc-card .lsc-control select,
#lsc-card .lsc-control input[type="text"] {
  width: 100%;
  height: 100%;
  padding: 10px 18px;
  border-radius: 14px;
  background: #111111;
  border: 1px solid #5e5e5e;
  color: #fff;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
#lsc-card .lsc-control select { padding-right: 50px; }
#lsc-card .lsc-control select:focus,
#lsc-card .lsc-control input:focus {
  outline: none;
  border-color: #F0B90B;
}
#lsc-card .lsc-chev {
  pointer-events: none;
  position: absolute;
  inset: 0 20px 0 auto;
  display: flex;
  align-items: center;
}
#lsc-card .lsc-dollar {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-size: 20px;
  background: linear-gradient(231.09deg, #F0B90B 27.94%, #F0B90B 57.81%, #F0B90B 87.1%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#lsc-card .lsc-control input.lsc-with-dollar,
#lsc-card .lsc-control select.lsc-with-dollar {
  padding-left: 40px;
}
#lsc-card .lsc-loading {
  position: absolute;
  inset: 0 20px 0 auto;
  display: flex;
  align-items: center;
  font-size: 12px;
  opacity: 0.6;
}
#lsc-card .lsc-loading.lsc-hidden { display: none; }
#lsc-card .lsc-hidden { display: none !important; }

/* Live MT5 price badge (shown when the price field is auto-filled) */
#lsc-card .lsc-live {
  position: absolute;
  inset: 0 16px 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  pointer-events: none;
  background: linear-gradient(231.09deg, #F0B90B 27.94%, #F0B90B 57.81%, #F0B90B 87.1%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#lsc-card .lsc-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F0B90B;
  box-shadow: 0 0 6px #F0B90B;
}

/* Field hint under an input (leverage default-values guide) */
#lsc-card .lsc-hint {
  font-size: 12px;
  opacity: 0.55;
  margin-top: -2px;
}
#lsc-card .lsc-lev-prefix { font-size: 18px; line-height: 1; }
/* Keep the "1:" prefix and the leverage value the same size + vertical centre so
   "1:10" reads as one number (Jin: the value sat slightly below the "1:"). */
#lsc-card #lsc-leverage {
  font-size: 18px;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

/* Sub-figure under a footer value (e.g. margin % of account) */
#lsc-card .lsc-footer-sub {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}

/* Over-limit state (trade size exceeds max lot) + warning banner */
#lsc-card .lsc-danger {
  color: #ff5d6c !important;
  -webkit-text-fill-color: #ff5d6c;
}
#lsc-card .lsc-warning {
  width: 100%;
  flex-basis: 100%;
  order: 10;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 93, 108, 0.12);
  border: 1px solid rgba(255, 93, 108, 0.4);
  color: #ff8a94;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
/* Allow the warning to wrap onto its own full-width line below the output row */
@media (min-width: 640px) {
  #lsc-card .lsc-footer { flex-wrap: wrap; }
}

/* Recommended position-size banner: comfortable % (Jin: 70%) vs 100% of margin.
   Full-width on its own line (order 9, before the warning at order 10). */
#lsc-card .lsc-margin-banner {
  width: 100%;
  flex-basis: 100%;
  order: 9;
  margin-top: 4px;
  padding: 15px 20px;
  border-radius: 16px;
  text-align: center;
  color: #0a0a0a;
  background: linear-gradient(231.09deg, #F0B90B 27.94%, #F0B90B 57.81%, #F0B90B 87.1%);
}
#lsc-card .lsc-margin-banner.lsc-hidden { display: none; }
#lsc-card .lsc-margin-banner-main {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
#lsc-card .lsc-margin-banner-sub {
  font-size: 13px;
  font-style: italic;
  opacity: 0.75;
  margin-top: 4px;
}
@media (min-width: 1536px) {
  #lsc-card .lsc-margin-banner-main { font-size: 20px; }
}

/* Platform — single MT5 card (TradeLocker removed) */
#lsc-card .lsc-platform-wrap {
  padding: 1px;
  border-radius: 14px;
  background: linear-gradient(231.09deg, #F0B90B 27.94%, #F0B90B 57.81%, #F0B90B 87.1%);
}
#lsc-card .lsc-platform-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px 20px;
  border-radius: 14px;
  background: #111111;
}
#lsc-card .lsc-platform-inner img {
  height: 25px;
  width: auto;
}
@media (min-width: 1536px) {
  #lsc-card .lsc-platform-inner img { height: 29px; }
}

/* Footer / output bar */
#lsc-card .lsc-footer {
  margin-top: 10px;
  padding: 12px 20px;
  border-radius: 0 0 28px 28px;
  background: #242424;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 640px) {
  #lsc-card .lsc-footer {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 24px;
  }
}
@media (min-width: 1536px) {
  #lsc-card .lsc-footer {
    margin-top: 12px;
    padding: 14px 24px;
  }
}
#lsc-card .lsc-footer-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
#lsc-card .lsc-footer-cell {
  text-align: center;
  flex: 1;
}
#lsc-card .lsc-footer-divider {
  width: 1px;
  height: 36px;
  background: #6b7280;
}
#lsc-card .lsc-footer-divider-h {
  width: 100%;
  height: 1px;
  background: #6b7280;
}
#lsc-card .lsc-footer-label {
  font-size: 13px;
  opacity: 0.85;
}
#lsc-card .lsc-footer-value {
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  #lsc-card .lsc-footer-value { font-size: 18px; }
}
@media (min-width: 1536px) {
  #lsc-card .lsc-footer-value { font-size: 18px; }
}
#lsc-card .lsc-footer-value-green {
  background: linear-gradient(231.09deg, #F0B90B 27.94%, #F0B90B 57.81%, #F0B90B 87.1%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
  font-weight: 700;
}
#lsc-card .lsc-only-desktop { display: none; }
@media (min-width: 640px) {
  #lsc-card .lsc-only-desktop { display: block; }
  #lsc-card .lsc-only-mobile { display: none; }
}

/* ============================================================
   Trading Tools — rich hover dropdown
   Triggered when a top-level menu item has children (e.g. "Trading Tools").
   ============================================================ */
.menu-header > li {
  position: relative;
}
/* Theme already provides a chevron via `.menu-header li.menu-item-has-children::after`
   (arrow-menu.svg, rotates on hover) — don't add another one. */

/* Override theme's `.sub-menu { display: none; overflow: hidden }` so opacity-based
   transitions can run AND the hover bridge (::before above the card) isn't clipped. */
.menu-header > li.menu-item-has-children > .sub-menu,
.menu-header .sub-menu {
  display: block !important;
  overflow: visible !important;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(8px);
  width: 360px;
  min-width: 360px;
  margin: 0;
  padding: 12px;
  list-style: none;
  background: linear-gradient(180deg, #1a1d1f 0%, #141618 100%);
  border: 1px solid rgba(240, 185, 11, 0.18);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 40px rgba(240, 185, 11, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Hover bridge spanning the 14px gap between trigger and dropdown.
   Explicitly nulls out the theme's `.sub-menu::before` (green-fresh blur)
   so the bridge is invisible and only used to keep :hover alive when the
   cursor travels from the menu text down into the card. */
.menu-header > li.menu-item-has-children > .sub-menu::before,
.menu-header .sub-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 14px;
  background: transparent;
  filter: none;
  z-index: 1;
  pointer-events: auto;
}
.menu-header > li.menu-item-has-children:hover > .sub-menu,
.menu-header > li.menu-item-has-children:focus-within > .sub-menu,
.menu-header li.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.menu-header .sub-menu li {
  list-style: none;
  margin: 0;
}
.menu-header .sub-menu li + li {
  margin-top: 4px;
}
.menu-header .sub-menu li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
  position: relative;
  overflow: hidden;
}
.menu-header .sub-menu li a::before {
  /* Subtle gradient sweep on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240, 185, 11, 0.18) 0%, rgba(240, 185, 11, 0.06) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.menu-header .sub-menu li a:hover::before {
  opacity: 1;
}
.menu-header .sub-menu li a:hover {
  transform: translateX(2px);
}

/* Icon block (filled by class-driven background-image below) */
.menu-header .sub-menu .tt-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(240, 185, 11, 0.25), rgba(240, 185, 11, 0.08));
  border: 1px solid rgba(240, 185, 11, 0.3);
  position: relative;
  z-index: 1;
}
.menu-header .sub-menu .tt-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  filter: drop-shadow(0 0 6px rgba(240, 185, 11, 0.4));
}

/* Trading Platform icon — candlestick chart (the iconic trading symbol).
   3 candles with wicks: short red, tall green, medium green. Reads instantly
   as "this is for trading software". */
.menu-header .sub-menu .tt-icon-platform .tt-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339FFB8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='4' x2='6' y2='8'/><rect x='4' y='8' width='4' height='6'/><line x1='6' y1='14' x2='6' y2='18'/><line x1='12' y1='3' x2='12' y2='6'/><rect x='10' y='6' width='4' height='12'/><line x1='12' y1='18' x2='12' y2='21'/><line x1='18' y1='5' x2='18' y2='9'/><rect x='16' y='9' width='4' height='8'/><line x1='18' y1='17' x2='18' y2='19'/></svg>");
}
/* Lot Size Calculator icon (calculator) */
.menu-header .sub-menu .tt-icon-calc .tt-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339FFB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><line x1='8' y1='7' x2='16' y2='7'/><line x1='8' y1='11' x2='9' y2='11'/><line x1='12' y1='11' x2='13' y2='11'/><line x1='16' y1='11' x2='16' y2='11'/><line x1='8' y1='15' x2='9' y2='15'/><line x1='12' y1='15' x2='13' y2='15'/><line x1='16' y1='15' x2='16' y2='15'/><line x1='8' y1='19' x2='13' y2='19'/></svg>");
}

.menu-header .sub-menu .tt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.menu-header .sub-menu .tt-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.menu-header .sub-menu .tt-desc {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

/* Mobile: stack as plain expandable list (no fancy floating card) */
@media (max-width: 1023px) {
  .menu-header .sub-menu {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0 0 16px;
    backdrop-filter: none;
  }
}