:root,
[data-theme=light] {
  --navbar-height-desktop-full: 64px;
  --navbar-height-desktop-simple: 64px;
  --navbar-height-mobile-full: 110px;
  --navbar-height-mobile-simple: 82px;
  --timebar-height: 32px;
  --wr-header-height-desktop: 300px;
  --wr-header-height-mobile: 240px;
  --mobile-subnav-height: 40px;
  --desktop-subnav-height: 46px;
  --navbar-height: var(--navbar-height-mobile-full);
  --color-afton-black: #000000;
  --color-afton-white: #ffffff;
  --color-afton-purple: #d2affa;
  --color-gray-100: #e6e6f0;
  --color-purple-500: #7f37f5;
  --color-gray-500: #9399a5;
  --color-verification: #d2affa;
  --color-alert: #e54866;
  --color-discount-typography: #b4ff78;
  --color-discount-light: #449a00;
  --text-primary: #000000;
  --text-secondary: #7f37f5;
  --text-tertiary: #9399a5;
  --text-inverse: #ffffff;
  --text-disabled: rgba(0, 0, 0, 0.4);
  --text-success: #449a00;
  --link-color: #7F37F5;
  --link-hover-color: #610ced;
  --bg-primary: #ffffff;
  --bg-secondary: #e6e6f0;
  --bg-tertiary: #f3f3f3;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --card-bg: var(--bg-tertiary);
  --btn-primary-bg: #000000;
  --btn-primary-text: #ffffff;
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: #ffffff;
  --btn-primary-hover-text: #000000;
  --btn-primary-hover-border: #000000;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #7f37f5;
  --btn-secondary-border: #7f37f5;
  --btn-secondary-hover-bg: #7f37f5;
  --btn-secondary-hover-text: #ffffff;
  --btn-secondary-hover-border: #7f37f5;
  --btn-secondary-solid-bg: transparent;
  --btn-secondary-solid-text: #7f37f5;
  --btn-secondary-solid-border: #7f37f5;
  --btn-secondary-solid-hover-bg: #7f37f5;
  --btn-secondary-solid-hover-text: #ffffff;
  --btn-secondary-solid-hover-border: #7f37f5;
  --btn-contrast-bg: #000000;
  --btn-contrast-text: #ffffff;
  --btn-contrast-border: transparent;
  --btn-contrast-hover-bg: #ffffff;
  --btn-contrast-hover-text: #000000;
  --btn-contrast-hover-border: #000000;
  --btn-inverse-bg: #ffffff;
  --btn-inverse-text: #000000;
  --btn-inverse-border: transparent;
  --btn-inverse-hover-bg: #e6e6f0;
  --btn-inverse-hover-text: #000000;
  --btn-inverse-hover-border: transparent;
  --btn-purple-bg: #d2affa;
  --btn-purple-text: #000000;
  --btn-purple-border: transparent;
  --btn-purple-hover-bg: #bf9ef5;
  --btn-purple-hover-text: #000000;
  --btn-purple-hover-border: transparent;
  --btn-disabled-bg: #9399a5;
  --btn-disabled-text: rgba(0, 0, 0, 0.35);
  --btn-disabled-border: transparent;
  --border-primary: #d2d2dc;
  --border-secondary: #9399a5;
  --border-focus: #d2affa;
  --input-bg: #e6e6f0;
  --input-border: #e6e6f0;
  --input-text: #000000;
  --input-placeholder: #9399a5;
  --input-focus-border: #d2affa;
  --input-focus-bg: #ffffff;
  --input-focus-shadow: rgba(210, 175, 250, 0.2);
  --input-error-border: #e54866;
  --input-success-border: #449a00;
  --select-bg: #ffffff;
  --select-arrow-color: #000000;
  --tab-active-bg: #000000;
  --tab-active-text: #ffffff;
  --tab-inactive-bg: #d2d2dc;
  --tab-inactive-text: #000000;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

[data-theme=dark] {
  --color-afton-black: #000000;
  --color-afton-white: #ffffff;
  --color-afton-purple: #d2affa;
  --color-gray-900: #161616;
  --color-gray-800: #262626;
  --color-gray-500: #9399a5;
  --color-purple-500: #7f37f5;
  --color-verification: #d2affa;
  --color-alert: #e54866;
  --color-discount-typography: #b4ff78;
  --text-primary: #ffffff;
  --text-secondary: #7f37f5;
  --text-tertiary: #9399a5;
  --text-inverse: #000000;
  --text-disabled: rgba(255, 255, 255, 0.4);
  --text-success: #b4ff78;
  --link-color: #d2affa;
  --link-hover-color: #b77ff7;
  --bg-primary: #000000;
  --bg-secondary: #161616;
  --bg-tertiary: #262626;
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --card-bg: var(--bg-tertiary);
  --btn-primary-bg: #d2affa;
  --btn-primary-text: #000000;
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: #bf9ef5;
  --btn-primary-hover-text: #000000;
  --btn-primary-hover-border: transparent;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #7f37f5;
  --btn-secondary-border: #7f37f5;
  --btn-secondary-hover-bg: #7f37f5;
  --btn-secondary-hover-text: #ffffff;
  --btn-secondary-hover-border: #7f37f5;
  --btn-secondary-solid-bg: transparent;
  --btn-secondary-solid-text: #d2affa;
  --btn-secondary-solid-border: #d2affa;
  --btn-secondary-solid-hover-bg: transparent;
  --btn-secondary-solid-hover-text: #d2affa;
  --btn-secondary-solid-hover-border: #d2affa;
  --btn-contrast-bg: #ffffff;
  --btn-contrast-text: #000000;
  --btn-contrast-border: transparent;
  --btn-contrast-hover-bg: #e6e6f0;
  --btn-contrast-hover-text: #000000;
  --btn-contrast-hover-border: transparent;
  --btn-inverse-bg: #000000;
  --btn-inverse-text: #ffffff;
  --btn-inverse-border: transparent;
  --btn-inverse-hover-bg: #ffffff;
  --btn-inverse-hover-text: #000000;
  --btn-inverse-hover-border: #000000;
  --btn-purple-bg: #d2affa;
  --btn-purple-text: #000000;
  --btn-purple-border: transparent;
  --btn-purple-hover-bg: #bf9ef5;
  --btn-purple-hover-text: #000000;
  --btn-purple-hover-border: transparent;
  --btn-disabled-bg: #9399a5;
  --btn-disabled-text: rgba(255, 255, 255, 0.3);
  --btn-disabled-border: transparent;
  --border-primary: #404040;
  --border-secondary: #9399a5;
  --border-focus: #d2affa;
  --input-bg: #262626;
  --input-border: #404040;
  --input-text: #ffffff;
  --input-placeholder: #9399a5;
  --input-focus-border: #d2affa;
  --input-focus-bg: #333333;
  --input-focus-shadow: rgba(210, 175, 250, 0.2);
  --input-error-border: #e54866;
  --input-success-border: #b4ff78;
  --select-bg: #2a2a2a;
  --select-arrow-color: #ffffff;
  --tab-active-bg: #d2affa;
  --tab-active-text: #000000;
  --tab-inactive-bg: #262626;
  --tab-inactive-text: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
      0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
      0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6),
      0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

html {
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.af-icon-btn,
.af-search-btn {
  color: var(--text-primary);
}

.af-icon-btn svg,
.af-search-btn svg {
  stroke: currentColor;
  fill: none;
}

.af-icon-btn img,
.af-search-btn img {
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.theme-icon {
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

[data-theme=dark] .theme-icon {
  -webkit-filter: invert(1) brightness(1);
          filter: invert(1) brightness(1);
}

.theme-logo {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.brand-logo,
.no-filter {
  -webkit-filter: none !important;
          filter: none !important;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

[data-theme=light] .social-media a img {
  -webkit-filter: brightness(0) saturate(100%);
          filter: brightness(0) saturate(100%);
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

[data-theme=dark] .social-media a img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.error-page {
  min-height: 100vh;
  background-color: var(--bg-primary);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.error-header {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 1rem 1.5rem;
  background-color: var(--bg-primary);
}

.error-header__logo {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.error-header__logo img {
  height: 30px;
  width: auto;
}

.error-outer {
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.error-wrapper {
  position: relative;
  max-width: 840px;
}

.error-bg {
  position: relative;
  font-family: "PP Right Compact", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 25rem;
  line-height: 1;
  color: var(--color-afton-purple);
  opacity: 0.3;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.error-bg::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--bg-primary)));
  background: linear-gradient(to bottom, transparent 0%, var(--bg-primary) 100%);
  top: 0;
  left: 0;
  z-index: 1;
}

.error-data {
  position: absolute;
  width: 100%;
  left: 0;
  top: 90px;
  z-index: 2;
  padding-left: 2.5rem;
}

.error-data h1 {
  font-family: "PP Right Compact", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2rem, calc(1.43vw + 2.65rem), 4rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.error-data p {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, calc(0.18vw + 1.08rem), 1.25rem);
  line-height: 1.35;
  color: var(--text-tertiary);
  max-width: 450px;
  margin-bottom: 1.5rem;
}

.return-home-btn {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 1rem 1.5rem;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 2px solid var(--btn-primary-border);
  border-radius: 100px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.return-home-btn:hover,
.return-home-btn:focus {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
  border-color: var(--btn-primary-hover-border);
  text-decoration: none;
}

@media (max-width: 1199.98px) {
  .error-data {
    width: 90%;
  }
}

@media (max-width: 767.98px) {
  .error-wrapper {
    min-height: auto;
  }

  .error-bg {
    font-size: 15.625rem;
  }

  .error-data {
    padding-left: 1rem;
    top: 60px;
  }

  .error-data p {
    font-size: 1rem;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .error-outer {
    min-height: calc(100vh - 80px);
    -webkit-box-align: center;
            align-items: center;
  }

  .error-bg {
    font-size: 11.25rem;
  }

  .error-data {
    top: 40px;
    padding-left: 0;
  }

  .error-data p {
    font-size: 0.875rem;
  }

  .return-home-btn {
    padding: 10px 1rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 320px) {
  .error-bg {
    font-size: 8.75rem;
  }
}