@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;800;900&display=swap");


/* =========================================================
   AIRFLOW
   ========================================================= */

:root {
  --color-primary: #258cff;

  --air-bg: #05070a;
  --air-bg-2: #080c12;
  --air-bg-3: #0b1119;

  --air-panel: #0b1119;
  --air-panel-hover: #0e1621;

  --air-blue: #258cff;
  --air-blue-hover: #4ca1ff;

  --air-text: #f4f7fb;
  --air-muted: #8d97a6;

  --air-border: rgba(255, 255, 255, 0.08);
  --air-border-hover: rgba(37, 140, 255, 0.30);

  --air-radius: 10px;

  --bg-image: none;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
  background: var(--air-bg);
}

body {
  margin: 0;

  font-family:
    "Lato",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--air-bg) !important;
  color: var(--air-text);
}


/* Exon alkuperäinen background pois etusivulta */

body.airflow-home::before {
  display: none !important;
}


/* Muilla Tebex-sivuilla saa olla hyvin kevyt tausta */

body:not(.airflow-home)::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 420px;

  z-index: -1;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(37, 140, 255, 0.08),
      transparent 65%
    );

  pointer-events: none;
}

.site {
  background: transparent !important;
}

a {
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--air-text);
}


/* =========================================================
   HEADER
   Works with the custom header.twig we already made
   ========================================================= */

.airflow-header {
  position: relative;

  z-index: 100;

  background: #05070a;

  border-bottom: 1px solid var(--air-border);
}

.airflow-navbar {
  width: min(1320px, calc(100% - 40px));

  min-height: 70px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.airflow-navbar-left,
.airflow-navbar-right {
  display: flex;
  align-items: center;

  gap: 9px;
}

.airflow-navbar-brand {
  display: inline-flex;
  align-items: center;

  text-decoration: none;
}

.airflow-navbar-brand img {
  display: block;

  width: auto;
  height: 46px;

  max-width: 140px;

  object-fit: contain;
}

.airflow-navbar-brand span {
  color: #fff;

  font-weight: 900;
  font-size: 19px;
}


/* header buttons */

.airflow-nav-button,
.airflow-login-button,
.airflow-basket-button {
  min-height: 38px;

  padding: 0 15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--air-border) !important;
  border-radius: 7px !important;

  background: #0b0f15 !important;

  color: #e7ebf0 !important;

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  cursor: pointer;
}

.airflow-nav-button:hover,
.airflow-login-button:hover,
.airflow-basket-button:hover {
  background: #101721 !important;

  border-color: rgba(255, 255, 255, 0.14) !important;
}

.airflow-play-button {
  background: var(--air-blue) !important;

  border-color: var(--air-blue) !important;

  color: #fff !important;
}

.airflow-play-button:hover {
  background: var(--air-blue-hover) !important;

  border-color: var(--air-blue-hover) !important;
}

.airflow-discord-button {
  border-color: rgba(88, 101, 242, 0.30) !important;
}

.airflow-menu-toggle {
  display: none;
}


/* =========================================================
   TEBEX NAVIGATION
   ========================================================= */

.airflow-navigation {
  border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.navigation-horizontal > ul {
  border-radius: 0 !important;

  background: transparent !important;

  border: 0 !important;
}

.navigation-horizontal a {
  font-weight: 700;
}

.navigation-horizontal a:hover {
  color: var(--air-blue-hover) !important;
}

.navigation-horizontal .has-children > ul {
  border-radius: 8px;
}


/* =========================================================
   HERO
   ========================================================= */

.airflow-hero {
  padding: 54px 20px 38px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(37, 140, 255, 0.055),
      transparent 600px
    ),
    var(--air-bg);
}


/* Banner itself */

.airflow-banner {
  position: relative;

  width: min(1180px, 100%);

  aspect-ratio: 16 / 6;

  min-height: 360px;

  margin: 0 auto;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(37, 140, 255, 0.08),
      transparent 60%
    ),
    #090e15;

  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34);
}


/* Banner overlay */

.airflow-banner-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(3, 5, 8, 0.06) 0%,
      rgba(3, 5, 8, 0.04) 40%,
      rgba(3, 5, 8, 0.82) 100%
    );

  pointer-events: none;
}


/* Logo separate from banner */

.airflow-banner-center {
  position: absolute;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-bottom: 35px;

  pointer-events: none;
}

.airflow-banner-logo {
  display: block;

  width: auto;

  max-width: 225px;
  max-height: 160px;

  object-fit: contain;

  filter:
    drop-shadow(0 10px 25px rgba(0, 0, 0, 0.55));
}


/* Bottom bar inside banner */

.airflow-banner-footer {
  position: absolute;

  left: 25px;
  right: 25px;
  bottom: 22px;

  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 22px;
}


/* Online status */

.airflow-live {
  display: flex;
  align-items: center;

  gap: 11px;
}

.airflow-status-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: #3bd886;

  box-shadow:
    0 0 0 5px rgba(59, 216, 134, 0.08),
    0 0 15px rgba(59, 216, 134, 0.42);
}

.airflow-live-label {
  display: block;

  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.56);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 0.1em;
}

.airflow-live strong {
  display: block;

  color: #fff;

  font-size: 14px;
  font-weight: 900;
}


/* Banner action buttons */

.airflow-banner-actions {
  display: flex;
  align-items: center;

  gap: 8px;
}

.airflow-button {
  min-width: 120px;
  min-height: 42px;

  padding: 0 17px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px !important;

  color: #fff !important;

  font-family: inherit;

  font-size: 12px;
  font-weight: 900;

  text-decoration: none !important;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.airflow-button:hover {
  transform: translateY(-1px);
}

.airflow-button-primary {
  border: 1px solid var(--air-blue) !important;

  background: var(--air-blue) !important;
}

.airflow-button-primary:hover {
  border-color: var(--air-blue-hover) !important;

  background: var(--air-blue-hover) !important;
}

.airflow-button-discord {
  border: 1px solid rgba(120, 130, 255, 0.34) !important;

  background: rgba(88, 101, 242, 0.16) !important;
}

.airflow-button-discord:hover {
  background: rgba(88, 101, 242, 0.28) !important;
}


/* server address under banner */

.airflow-server-address {
  width: min(1180px, 100%);

  margin: 12px auto 0;

  color: rgba(255, 255, 255, 0.42);

  font-size: 11px;
  font-weight: 700;

  text-align: right;
}


/* =========================================================
   STORE
   ========================================================= */

.airflow-store {
  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;

  padding: 50px 0 90px;
}

.airflow-store-heading {
  margin: 0 auto 32px;

  text-align: center;
}

.airflow-kicker {
  color: var(--air-blue-hover);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.16em;
}

.airflow-store-heading h1 {
  margin: 7px 0 8px;

  color: #fff !important;

  font-size: 36px;
  font-weight: 900;

  letter-spacing: -0.035em;
}

.airflow-store-heading p {
  margin: 0;

  color: var(--air-muted);

  font-size: 13px;
}


/* =========================================================
   CATEGORIES
   Intentionally simple — no giant AI-looking cards
   ========================================================= */

.site-home-categories.airflow-categories {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 9px !important;

  margin: 0 0 42px !important;
}

.site-home-categories .airflow-category {
  position: relative;

  min-height: 72px !important;

  padding: 0 20px !important;

  display: flex !important;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  overflow: hidden;

  border: 1px solid var(--air-border) !important;
  border-radius: 8px !important;

  background: #0a0f16 !important;

  color: #fff !important;

  text-decoration: none !important;

  box-shadow: none !important;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.site-home-categories .airflow-category:hover {
  transform: translateX(2px);

  background: #0d141e !important;

  border-color: var(--air-border-hover) !important;

  color: #fff !important;
}


/* little blue marker */

.airflow-category-line {
  position: absolute;

  top: 20px;
  bottom: 20px;
  left: 0;

  width: 3px;

  background: var(--air-blue);

  border-radius: 0 3px 3px 0;

  opacity: 0.85;
}


/* category image + title */

.airflow-category-left {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 13px;
}

.airflow-category-image {
  width: 40px !important;
  height: 40px !important;

  flex: 0 0 40px;

  object-fit: cover;

  border-radius: 6px;

  border: 1px solid var(--air-border);
}

.airflow-category-name {
  min-width: 0;

  color: #eff3f8;

  font-size: 14px;
  font-weight: 800;

  line-height: 1.35;
}

.airflow-category-arrow {
  flex-shrink: 0;

  color: rgba(255, 255, 255, 0.34);

  font-size: 18px;

  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.airflow-category:hover .airflow-category-arrow {
  color: var(--air-blue-hover);

  transform: translateX(3px);
}


/* =========================================================
   HOME DESCRIPTION / SIDEBAR
   ========================================================= */

.airflow-store-text,
.store-text,
.widget,
.category-description,
.store-product-full,
.no-products {
  border: 1px solid var(--air-border) !important;

  border-radius: var(--air-radius) !important;

  background: var(--air-panel) !important;
}

.store-text {
  padding: var(--widget-padding);
}

.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 {
  color: #fff;

  text-align: left;
}


/* =========================================================
   PRODUCT LISTS / CATEGORY PAGES
   ========================================================= */

.store-products-list .store-product,
.store-products-images .store-product {
  border: 1px solid var(--air-border) !important;

  border-radius: var(--air-radius) !important;

  background: var(--air-panel) !important;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  transform: translateY(-2px);

  background: var(--air-panel-hover) !important;

  border-color: var(--air-border-hover) !important;
}

.store-products-images .store-product {
  text-align: center;
}

.store-product-tiered {
  border-radius: var(--air-radius);

  background: rgba(255, 255, 255, 0.025);
}

.store-category-tiered {
  border: 1px solid var(--air-border);

  border-radius: var(--air-radius);

  background: var(--air-panel);
}

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 {
  text-align: center;
}


/* =========================================================
   BUTTONS / INPUTS
   ========================================================= */

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 7px;
}

.quantity-field {
  border-radius: 6px;
}

.store-product .quantity-field {
  border-radius: 6px;

  background: var(--air-panel);
}

.store-product .quantity-field input[type="number"] {
  border: none;
}


/* =========================================================
   WIDGETS
   ========================================================= */

.widget {
  border-radius: var(--air-radius);

  background: var(--air-panel);
}

.widget-title {
  text-align: center;
}

.widget .store-product {
  text-align: center;
}

.widget-gift-card .gift-card-input {
  border-radius: 6px;
}

.widget-top-donator .avatar {
  border-radius: 50%;
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 5px;
}

.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 5px;
}


/* =========================================================
   MISC TEBEX
   ========================================================= */

.site-sale-banner {
  border-radius: 6px;
}

.no-products {
  color: var(--color-text-secondary);

  background: var(--air-panel);

  border-radius: var(--air-radius);
}

.popup-content {
  border-radius: 10px;
}

.popup-close {
  border-radius: 0 10px 0 8px;
}

.basket-popup-content,
.basket-popup-content .popup-close {
  border-radius: 0;
}

.basket-items {
  padding:
    var(--widget-padding)
    calc(var(--content-padding) - var(--widget-padding));
}

.basket-item {
  border-radius: 7px;
}

.basket-item .quantity {
  border-radius: 5px;
}

.toast {
  border-radius: 8px;
}

.toast-close {
  border-radius: 5px;
}

.media-slider .slider,
.media-slider .thumb {
  border-radius: 8px;
}

.media-slider .open-lightbox {
  border-radius: 6px;
}

.popup.popup-media-slider .thumb {
  border-radius: 8px;
}

.popup.popup-media-slider .popup-close {
  border-radius: 8px;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--air-bg);
}

::-webkit-scrollbar-thumb {
  background: #202a37;

  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2c3a4c;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: 0;
  }
}


@media (width <= 960px) {

  .airflow-navbar {
    width: calc(100% - 28px);
  }

  .airflow-menu-toggle {
    display: inline-flex;
  }

  .airflow-navbar-brand img {
    height: 40px;

    max-width: 110px;
  }

  .airflow-play-button,
  .airflow-discord-button {
    display: none;
  }

  .widget.site-navigation {
    border-radius: 0;

    background: transparent;
  }

  .airflow-hero {
    padding-top: 30px;
  }

  .airflow-banner {
    min-height: 320px;
  }

  .airflow-banner-logo {
    max-width: 180px;
    max-height: 130px;
  }

}


@media (max-width: 700px) {

  .airflow-navbar-right {
    gap: 6px;
  }

  .airflow-login-button {
    display: none;
  }


  .airflow-hero {
    padding:
      22px
      14px
      30px;
  }


  .airflow-banner {
    aspect-ratio: auto;

    min-height: 430px;

    border-radius: 9px;
  }


  .airflow-banner-center {
    padding-bottom: 80px;
  }


  .airflow-banner-logo {
    max-width: 165px;
    max-height: 120px;
  }


  .airflow-banner-footer {
    left: 16px;
    right: 16px;
    bottom: 16px;

    flex-direction: column;
    align-items: stretch;

    gap: 15px;
  }


  .airflow-banner-actions {
    width: 100%;
  }


  .airflow-button {
    flex: 1;
  }


  .airflow-server-address {
    text-align: center;
  }


  .airflow-store {
    width: calc(100% - 28px);

    padding-top: 38px;
  }


  .airflow-store-heading h1 {
    font-size: 31px;
  }


  .site-home-categories.airflow-categories {
    grid-template-columns: 1fr !important;
  }


  .site-home-categories .airflow-category {
    min-height: 68px !important;

    padding:
      0
      17px !important;
  }

}
/* =========================================================
   HEADER NAV
   ========================================================= */

.airflow-main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.airflow-main-nav-link {
  min-height: 40px;

  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  border: 0;

  background: transparent;

  color: rgba(255,255,255,.72);

  font-family: inherit;
  font-size: 13px;
  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

  border-radius: 7px;

  transition:
    color .15s ease,
    background .15s ease;
}

.airflow-main-nav-link:hover {
  color: #fff;

  background: rgba(255,255,255,.05);
}


/* STORE DROPDOWN */

.airflow-store-nav {
  position: relative;
}

.airflow-chevron {
  position: relative;
  top: -1px;

  color: rgba(255,255,255,.4);

  font-size: 14px;
}

.airflow-store-dropdown {
  position: absolute;

  top: calc(100% + 8px);
  left: 0;

  z-index: 200;

  width: 280px;

  padding: 7px;

  display: none;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 9px;

  background: #0b1017;

  box-shadow:
    0 18px 50px rgba(0,0,0,.5);
}

.airflow-store-nav:hover .airflow-store-dropdown,
.airflow-store-nav:focus-within .airflow-store-dropdown {
  display: block;
}

.airflow-store-dropdown a {
  padding: 10px 12px;

  display: block;

  border-radius: 6px;

  color: rgba(255,255,255,.72);

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
}

.airflow-store-dropdown a:hover {
  color: #fff;

  background: rgba(37,140,255,.10);
}


/* HOME = JUST THE BANNER */

.airflow-home .airflow-hero {
  padding-bottom: 70px;
}


@media (max-width: 700px) {

  .airflow-navbar {
    align-items: center;
  }

  .airflow-main-nav-link {
    padding: 0 9px;

    font-size: 12px;
  }

  .airflow-store-dropdown {
    width: 240px;
  }

}
/* Home info below banner */

.airflow-home-info {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 10px 0 80px;
}

.airflow-home-info .site-content {
  margin-top: 0;
}

@media (max-width: 700px) {
  .airflow-home-info {
    width: calc(100% - 28px);
    padding-bottom: 50px;
  }
}
/* =========================================================
   AIRFLOW HOME INFO
   ========================================================= */

.airflow-info-section {
  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;

  padding: 5px 0 85px;
}

.airflow-info-box {
  width: 100%;

  padding: 38px 42px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;

  background: #0b1119;

  box-sizing: border-box;
}

.airflow-info-box h1,
.airflow-info-box h2,
.airflow-info-box h3,
.airflow-info-box h4 {
  margin-top: 0;

  color: #fff;

  text-align: left;
}

.airflow-info-box p {
  color: #aab2bf;

  line-height: 1.7;
}

.airflow-info-box a {
  color: #4ca1ff;
}


@media (max-width: 700px) {

  .airflow-info-section {
    width: calc(100% - 28px);

    padding-bottom: 50px;
  }

  .airflow-info-box {
    padding: 25px 22px;
  }

}
/* =========================================================
   AIRFLOW LIVE STATUS + DISCORD
   ========================================================= */

.airflow-banner-discord {
  padding: 8px 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;

  background: rgba(5, 7, 10, 0.42);

  color: rgba(255, 255, 255, 0.85) !important;

  font-size: 11px;
  font-weight: 800;

  text-decoration: none !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.airflow-banner-discord:hover {
  color: #fff !important;

  background: rgba(88, 101, 242, 0.28);

  border-color: rgba(120, 130, 255, 0.42);
}


/* Offline = red dot */

.airflow-status-dot.airflow-status-offline {
  background: #ef5350;

  box-shadow:
    0 0 0 5px rgba(239, 83, 80, 0.08),
    0 0 15px rgba(239, 83, 80, 0.40);
}


@media (max-width: 700px) {
  .airflow-banner-discord {
    align-self: flex-end;
  }
}
/* =========================================================
   JOIN NOW
   ========================================================= */

.airflow-join-section {
  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;

  padding: 12px 0 80px;

  display: flex;
  justify-content: center;
}

.airflow-join-button {
  min-width: 260px;
  min-height: 58px;

  padding: 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #258cff;
  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #258cff,
      #126fd1
    );

  color: #fff !important;

  font-size: 15px;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-decoration: none !important;

  box-shadow:
    0 10px 28px rgba(37, 140, 255, 0.20);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.airflow-join-button:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #4ca1ff,
      #258cff
    );

  box-shadow:
    0 14px 34px rgba(37, 140, 255, 0.30);
}


@media (max-width: 700px) {

  .airflow-join-section {
    width: calc(100% - 28px);

    padding-bottom: 50px;
  }

  .airflow-join-button {
    width: 100%;
  }

}
/* =========================================================
   FIX: KAUPPA DROPDOWN EI KATOA HOVERILLA
   ========================================================= */

.airflow-store-nav {
  position: relative;
}

.airflow-store-dropdown {
  top: 100% !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(4px);

  transition:
    opacity .12s ease,
    transform .12s ease,
    visibility .12s ease;
}

.airflow-store-nav:hover .airflow-store-dropdown,
.airflow-store-nav:focus-within .airflow-store-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform: translateY(0);
}

.airflow-store-dropdown a {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
/* =========================================================
   AIRFLOW NATURAL RAIN
   ========================================================= */

.airflow-rain {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  z-index: 99990;

  overflow: hidden;

  pointer-events: none;

  contain: strict;
}


/* Individual rain streak */

.airflow-raindrop {
  position: absolute;

  top: -120px;
  left: var(--rain-left);

  width: var(--rain-width);
  height: var(--rain-length);

  display: block;

  border-radius: 999px;

  opacity: var(--rain-opacity);

  background:
    linear-gradient(
      to bottom,
      rgba(210, 225, 240, 0),
      rgba(210, 225, 240, 0.55) 35%,
      rgba(220, 235, 250, 0.78) 100%
    );

  filter: blur(0.15px);

  transform: rotate(7deg);

  animation:
    airflow-natural-rain
    var(--rain-speed)
    linear
    var(--rain-delay)
    infinite;

  will-change: transform;
}


@keyframes airflow-natural-rain {

  0% {
    transform:
      translate3d(0, -120px, 0)
      rotate(7deg);
  }

  100% {
    transform:
      translate3d(
        calc(var(--rain-drift) * -1),
        calc(100vh + 250px),
        0
      )
      rotate(7deg);
  }

}


/* Very subtle atmosphere over dark areas */

.airflow-rain::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.12;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(90, 130, 170, 0.12),
      transparent 58%
    );
}


/* Don't make mobile unnecessarily heavy */

@media (max-width: 700px) {

  .airflow-raindrop {
    filter: none;
  }

}


/* Respect reduced-motion */

@media (prefers-reduced-motion: reduce) {

  .airflow-rain {
    display: none !important;
  }

}
/* =========================================================
   TEBEX LEGAL FOOTER - MATCH AIRFLOW BACKGROUND
   ========================================================= */

:root {
  --tebex-legal-footer-background-color: #05070a;
  --tebex-legal-footer-text-color: rgba(255, 255, 255, 0.72);
  --tebex-legal-footer-border-color: rgba(255, 255, 255, 0.06);
  --tebex-legal-footer-logo-color: #ffffff;
}
:root {
  --tebex-legal-footer-background-color: #05070a;
  --tebex-legal-footer-text-color: #9aa3af;
  --tebex-legal-footer-border-color: #05070a;
  --tebex-legal-footer-logo-color: #9aa3af;
}
/* =========================================================
   RAIN BEHIND ALL CONTENT
   ========================================================= */

body {
  position: relative;
  isolation: isolate;
}

.airflow-rain {
  z-index: 0 !important;
}

.site {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
/* =========================================================
   FORCE RAIN BEHIND ALL TEBEX CONTENT
   ========================================================= */

html,
body {
  background: #05070a !important;
}

body {
  position: relative !important;
  isolation: isolate;
}


/* Rain layer */

.airflow-rain {
  z-index: 0 !important;
  pointer-events: none !important;
}


/* Entire Tebex site above rain */

.site {
  position: relative !important;
  z-index: 10 !important;
  isolation: isolate;
  background: transparent !important;
}


/* Important page sections always above rain */

.site-header,
.site-content,
.site-footer,
.store-products-list,
.store-products-images,
.store-category-tiered,
.category-description,
.sidebar,
.widget {
  position: relative;
  z-index: 1;
}


/* Product cards must be opaque so rain cannot show through them */

.store-products-list .store-product,
.store-products-images .store-product,
.store-product-full,
.store-product-tiered,
.category-description,
.widget,
.no-products {
  position: relative;
  z-index: 2;

  background: #0b1119 !important;

  opacity: 1 !important;
}


/* Product images/text/buttons above their own card */

.store-product > *,
.store-product-full > *,
.store-product-tiered > * {
  position: relative;
  z-index: 1;
}
/* =========================================================
   FIX: KAUPPA DROPDOWN AINA KAIKEN PÄÄLLÄ
   ========================================================= */

.site-header,
.airflow-header,
.airflow-navbar,
.airflow-main-nav,
.airflow-store-nav {
  position: relative !important;
  overflow: visible !important;
}

.site-header,
.airflow-header {
  z-index: 100000 !important;
}

.airflow-navbar,
.airflow-main-nav,
.airflow-store-nav {
  z-index: 100001 !important;
}

.airflow-store-dropdown {
  z-index: 100002 !important;
}


/* Muu sisältö jää headerin alle */

.site-content,
.store-products-list,
.store-products-images,
.store-category-tiered,
.category-description,
.sidebar,
.widget {
  z-index: 1 !important;
}
/* =========================================================
   FINAL FIX: KAUPPA DROPDOWN AINA KAIKEN PÄÄLLÄ
   ========================================================= */

/* Älä anna kauppasisällön muodostaa omia korkeita layereita */
.site-content,
.sidebar,
.widget,
.category-description,
.store-products-list,
.store-products-images,
.store-category-tiered,
.store-product,
.store-product-full,
.store-product-tiered {
  z-index: auto !important;
}

/* Header kokonaan muun sivun yläpuolelle */
.site-header,
.airflow-header {
  position: relative !important;
  z-index: 999999 !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* Nav ei saa leikata dropdownia */
.airflow-navbar,
.airflow-main-nav,
.airflow-store-nav {
  position: relative !important;
  overflow: visible !important;
}

/* Itse dropdown ylimmäksi */
.airflow-store-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;

  z-index: 1000000 !important;

  overflow: visible !important;
}

/* Varsinainen sivusisältö normaalille tasolle */
/* =========================================================
   AIRFLOW JOIN + DISCORD WIDGET
   ========================================================= */

.airflow-join-section {
  width: min(720px, calc(100% - 40px));

  margin: 0 auto;

  padding: 12px 0 75px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 26px;
}


/* LIITY NYT pysyy nykyisen tyylisenä keskellä */

.airflow-join-section .airflow-join-button {
  min-width: 260px;
}


/* Discord container */

.airflow-discord-box {
  position: relative;

  width: 100%;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;

  background: #0b1119;

  box-shadow:
    0 18px 50px rgba(0,0,0,.28);

  z-index: 2;
}


/* Discord box top */

.airflow-discord-box-header {
  min-height: 72px;

  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border-bottom: 1px solid rgba(255,255,255,.07);

  background: #0b1119;
}


.airflow-discord-box-header > div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.airflow-discord-box-header span {
  color: #4ca1ff;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .15em;
}


.airflow-discord-box-header strong {
  color: #fff;

  font-size: 15px;
  font-weight: 800;
}


/* Open Discord button */

.airflow-discord-open {
  padding: 9px 13px;

  border: 1px solid rgba(88,101,242,.38);
  border-radius: 7px;

  background: rgba(88,101,242,.15);

  color: #fff !important;

  font-size: 11px;
  font-weight: 800;

  text-decoration: none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}


.airflow-discord-open:hover {
  background: rgba(88,101,242,.30);

  border-color: rgba(120,130,255,.55);

  transform: translateY(-1px);
}


/* Discord's actual widget */

.airflow-discord-box iframe {
  display: block;

  width: 100%;
  height: 420px;

  border: 0;

  background: #0b1119;
}


/* Mobile */

@media (max-width: 700px) {

  .airflow-join-section {
    width: calc(100% - 28px);

    padding-bottom: 50px;
  }


  .airflow-join-section .airflow-join-button {
    width: 100%;
  }


  .airflow-discord-box-header {
    padding: 0 14px;
  }


  .airflow-discord-box iframe {
    height: 390px;
  }

}
.site-content,
.sidebar {
  position: relative !important;
}
/* =========================================================
   AIRFLOW DISCORD + JOIN ROW
   ========================================================= */

.airflow-action-section {
  width: min(820px, calc(100% - 40px));

  margin: 0 auto;

  padding: 12px 0 75px;

  display: grid;
  grid-template-columns: 1.15fr .85fr;

  gap: 14px;
}


/* Discord card */

.airflow-discord-card {
  position: relative;

  min-height: 92px;

  padding: 18px 55px 18px 20px;

  display: flex;
  align-items: center;

  gap: 20px;

  border: 1px solid rgba(88,101,242,.30);
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      rgba(88,101,242,.13),
      rgba(11,17,25,.95)
    );

  color: #fff !important;

  text-decoration: none !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,.20);

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.airflow-discord-card:hover {
  transform: translateY(-2px);

  border-color: rgba(120,130,255,.55);

  background:
    linear-gradient(
      135deg,
      rgba(88,101,242,.21),
      rgba(11,17,25,.98)
    );
}


.airflow-discord-info {
  display: flex;
  flex-direction: column;

  min-width: 145px;
}


.airflow-discord-label {
  margin-bottom: 3px;

  color: #818cf8;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .14em;
}


.airflow-discord-info strong {
  color: #fff;

  font-size: 16px;
  font-weight: 900;
}


.airflow-discord-count {
  margin-top: 4px;

  color: rgba(255,255,255,.55);

  font-size: 11px;
  font-weight: 700;
}


/* avatars */

.airflow-discord-members {
  display: flex;
  align-items: center;

  margin-left: auto;
}


.airflow-discord-members img {
  width: 30px;
  height: 30px;

  margin-left: -7px;

  object-fit: cover;

  border: 2px solid #0b1119;
  border-radius: 50%;

  background: #111827;
}


.airflow-discord-members img:first-child {
  margin-left: 0;
}


.airflow-discord-arrow {
  position: absolute;

  right: 18px;

  color: rgba(255,255,255,.42);

  font-size: 20px;
}


/* Join button beside Discord */

.airflow-join-button-side {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 92px !important;

  padding: 0 25px;

  box-sizing: border-box;

  display: flex !important;
  flex-direction: column;

  gap: 3px;
}


.airflow-join-button-side span {
  font-size: 15px;
  font-weight: 900;

  letter-spacing: .07em;
}


.airflow-join-button-side small {
  color: rgba(255,255,255,.65);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0;
}


/* Mobile */

@media (max-width: 700px) {

  .airflow-action-section {
    width: calc(100% - 28px);

    grid-template-columns: 1fr;

    padding-bottom: 50px;
  }


  .airflow-discord-card {
    min-height: 88px;

    padding-left: 16px;
  }


  .airflow-discord-members img:nth-child(n+5) {
    display: none;
  }


  .airflow-join-button-side {
    min-height: 70px !important;
  }

}