/* Dark Charcoal & Electric Blue theme for Auth pages */
body, html, .main, .main__platform, .header__wrapper, .footer__wrapper {
  background: #121316 !important;
  color: #ffffff !important;
}

.modal-sign {
  background: #181a22 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65) !important;
}

.modal-sign__block-button,
.header__button,
#button-sign-up {
  background: linear-gradient(135deg, #2979ff, #0066ff) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 750 !important;
  box-shadow: 0 8px 24px rgba(0,102,255,0.14) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.header__button-log-in {
  background: linear-gradient(135deg, #2979ff, #0066ff) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 750 !important;
  box-shadow: 0 8px 24px rgba(0,102,255,0.14) !important;
  transition: all 0.2s ease !important;
}

.header__button-log-in:hover {
  background: linear-gradient(135deg, #3d8bff, #2979ff) !important;
  box-shadow: 0 10px 30px rgba(0,102,255,0.2) !important;
  color: #ffffff !important;
}

.modal-sign__block-button:hover,
.header__button:hover,
#button-sign-up:hover {
  background: linear-gradient(135deg, #3d8bff, #2979ff) !important;
  box-shadow: 0 10px 30px rgba(0,102,255,0.2) !important;
  transform: translateY(-1px) !important;
}

.modal-sign__tab.active,
.modal-sign__tab--active,
.modal-sign__tab:hover {
  color: #ffffff !important;
  border-bottom: 2px solid #0066ff !important;
}

.modal-sign__tab {
  color: #94a3b8 !important;
}

.modal-sign__input-value,
.select__element {
  display: block !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  opacity: 1 !important;
  color: #ffffff !important;
  background: #1f222c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  appearance: auto !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.modal-sign__input-value:focus,
.select__element:focus {
  border-color: #0066ff !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25) !important;
  outline: none !important;
}

.modal-sign__input-label {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

.modal-sign__title,
h1, h2, h3 {
  color: #ffffff !important;
}

a {
  color: #2979ff !important;
}

.header__list--item a {
  color: #cbd5e1 !important;
}

.header__list--item a:hover {
  color: #ffffff !important;
}

.original-demo-notice,
.original-auth-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 8px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.original-demo-notice {
  border: 1px solid rgba(0, 102, 255, 0.35) !important;
  color: #cbd5e1 !important;
  background: rgba(0, 102, 255, 0.08) !important;
}

.original-demo-notice strong {
  color: #2979ff !important;
  font-size: 13px;
}

.original-auth-alert {
  border: 1px solid rgba(255, 82, 82, 0.35) !important;
  color: #ffc0c5 !important;
  background: rgba(255, 82, 82, 0.1) !important;
}

.original-auth-alert--success {
  border-color: rgba(0, 102, 255, 0.4) !important;
  background: rgba(0, 102, 255, 0.12) !important;
  color: #c2dcff !important;
}

.modal-sign__social,
.modal-sign__footer,
.header__social,
.footer__social,
.footer__block > div:last-child {
  display: none !important;
}

/* Logo: compact, vertically centred and never oversized. An explicit height
   is required here: with `height:auto` the image collapses to 0x0 inside the
   auto-width flex header, which made the mark disappear entirely. */
.header__logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: 46px;
  line-height: 0;
}

.header__logo img,
.footer__logo img,
.auth-logo img {
  display: block;
  width: auto !important;
  height: 34px !important;
  max-width: 170px !important;
  max-height: 34px !important;
  object-fit: contain;
  object-position: left center;
}

.footer__logo img {
  height: 26px !important;
  max-width: 132px !important;
  max-height: 26px !important;
}

.header__logo .quotex-logo,
.header__logo .platform-logo {
  display: block !important;
  width: 170px !important;
  height: 34px !important;
  background-image: url('/assets/img/55ak-wordmark.svg') !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.modal-sign__input.select {
  height: auto !important;
  min-height: 48px !important;
}

.modal-sign__input.select-icon .icon-input {
  display: none !important;
}

.modal-sign__input.select-icon .select__element {
  padding-left: 12px !important;
}

.select__wrapper {
  display: none !important;
}

.main__platform-video__media {
  filter: saturate(0.8) hue-rotate(200deg);
  opacity: 0.65;
}

.modal-sign__input-tooltip {
  display: none !important;
}

.original-footer-note {
  display: block !important;
}

.original-footer-note .footer__text {
  max-width: 900px !important;
  color: #94a3b8 !important;
}

.original-footer-note p {
  margin: 0 0 12px !important;
  line-height: 1.55 !important;
}

.original-footer-note strong {
  color: #2979ff !important;
}

@media (max-width: 700px) {
  .original-demo-notice,
  .original-auth-alert {
    font-size: 11px;
  }
  .header__logo img {
    max-width: 124px !important;
    max-height: 28px !important;
  }
  .footer__logo img {
    max-width: 110px !important;
    max-height: 24px !important;
  }
  .header__logo .quotex-logo,
  .header__logo .platform-logo {
    width: 124px !important;
    height: 28px !important;
    background-size: 124px 28px !important;
  }
}

/* Registration country field: the captured page overlays an absolute-positioned
   search input on top of the native select, which made the selected "India"
   value collide with the search placeholder. The country list is now a short
   fixed list, so the search overlay is unnecessary. */
#select-country-name {
  margin: 0 auto 22px !important;
  max-width: 366px !important;
  width: 100% !important;
  position: relative !important;
}

#select-country-name .select-input,
#select-country-name .select-button-close,
#select-country-name .icon-input {
  display: none !important;
}

#select-country-name .modal-sign__input.select {
  height: auto !important;
  min-height: 48px !important;
  margin: 0 !important;
}

#select-country-name .modal-sign__input-label {
  top: -9px !important;
  left: 10px !important;
  padding: 0 6px !important;
  z-index: 12 !important;
}

#select-country-name .select__element {
  padding: 0 12px !important;
  line-height: 46px !important;
}

.original-referral-field {
  position: relative;
}

.original-referral-field small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 400;
}

.original-referral-field input {
  text-transform: uppercase;
}

.original-referral-field input::placeholder {
  text-transform: none;
}

input[type="checkbox"] {
  accent-color: #0066ff !important;
}

.tabs__item:not(.active) { display: none !important; }
.tabs__item.active { display: block !important; }
.modal-sign__footer { display: none !important; }

/* ==================================================================== */
/* Round 2 — premium finish (same layout, theme, colours and structure) */
/* ==================================================================== */

/* A touch smaller than before, still crisp and vertically centred. */
.header__logo img,
.auth-logo img {
  height: 28px !important;
  max-height: 28px !important;
  max-width: 145px !important;
}
.footer__logo img {
  height: 22px !important;
  max-height: 22px !important;
  max-width: 112px !important;
}

/* Auth card: hairline border, soft elevation and a very light top sheen. */
.modal-sign__block {
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 42%) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .05) inset !important;
}

/* Inputs: gentle hover, clean focus ring, no layout shift. */
.modal-sign__input-value {
  border-radius: 10px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.modal-sign__input-value:hover {
  border-color: rgba(255, 255, 255, .18) !important;
}
.modal-sign__input-value:focus {
  border-color: #2f7bff !important;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .18), 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}

/* Primary action: subtle gradient sheen and a soft, professional shadow. */
.modal-sign__block-button {
  border-radius: 10px !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%) !important;
  box-shadow: 0 8px 20px rgba(0,102,255,0.112), 0 1px 0 rgba(255, 255, 255, .16) inset !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.modal-sign__block-button:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(0,102,255,0.144), 0 1px 0 rgba(255, 255, 255, .20) inset !important;
}
.modal-sign__block-button:active {
  transform: translateY(1px);
}

/* Tabs: smooth, quiet feedback. */
.modal-sign__tab {
  transition: color .16s ease, opacity .16s ease;
}
.modal-sign__tab:hover {
  opacity: .86;
}

/* Footer links. */
.footer__link {
  transition: color .16s ease, opacity .16s ease;
}

@media (max-width: 700px) {
  .header__logo img,
  .auth-logo img {
    height: 22px !important;
    max-height: 22px !important;
    max-width: 120px !important;
  }
  .footer__logo img {
    height: 18px !important;
    max-height: 18px !important;
    max-width: 96px !important;
  }
}

/* Logo: slightly larger, layout unchanged. */
.header__logo img,
.auth-logo img {
  height: 42px !important;
  max-height: 42px !important;
  max-width: 215px !important;
}
.footer__logo img {
  height: 30px !important;
  max-height: 30px !important;
  max-width: 155px !important;
}
@media (max-width: 700px) {
  .header__logo img,
  .auth-logo img {
    height: 32px !important;
    max-height: 32px !important;
    max-width: 170px !important;
  }
  .footer__logo img {
    height: 21px !important;
    max-height: 21px !important;
    max-width: 112px !important;
  }
}

/* Main Sign in / Registration submit buttons: solid blue (the sheen rule above had removed the blue fill). */
.modal-sign .modal-sign__block-button,
.modal-sign__block-button {
  background-color: #0066ff !important;
  background-image: linear-gradient(180deg, #2f7bff 0%, #0066ff 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 26px rgba(0, 102, 255, .35), 0 1px 0 rgba(255, 255, 255, .22) inset !important;
}
.modal-sign .modal-sign__block-button:hover,
.modal-sign__block-button:hover {
  background-color: #2979ff !important;
  background-image: linear-gradient(180deg, #4a90ff 0%, #2979ff 100%) !important;
}
.modal-sign__block-button svg { background: rgba(255, 255, 255, .22) !important; border-radius: 50% !important; }

/* Login / Register: bigger header logo (header logo only; footer and other pages untouched). */
.header__logo {
  max-height: none !important;
}
.header__logo img {
  height: 72px !important;
  max-height: 72px !important;
  max-width: 360px !important;
}
/* Laptop widths: the centred menu links need room, so the logo scales between 56px and 72px. */
@media (min-width: 1025px) {
  .header__logo img {
    height: clamp(56px, calc((50vw - 230px) / 5), 72px) !important;
    max-height: clamp(56px, calc((50vw - 230px) / 5), 72px) !important;
  }
}
@media (max-width: 700px) {
  .header__logo img {
    height: 52px !important;
    max-height: 52px !important;
    max-width: 100% !important;
  }
  /* The enlarged logo and the Log in / Sign up buttons cannot share one phone-width row without
     pushing the 2-line menu icon off-screen, so on phones the icon sits next to the logo.
     Log in / Sign up remain available inside that menu. */
  .header__menu {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    column-gap: 8px;
  }
  .header__logo {
    grid-column: 1 !important;
    min-width: 0;
  }
  .header__buttons {
    display: none !important;
  }
  .header__mobile-button {
    grid-column: 2 !important;
    justify-self: end;
  }
  .header.is-mobile .header__mobile-container {
    grid-column: 1 / -1 !important;
  }
}