:root {
  --bg: #03070c;
  --panel: #08111a;
  --panel2: #0c1621;
  --blue: #008cff;
  --cyan: #00c8ff;
  --silver: #cbd8e5;
  --text: #f5f8fb;
  --muted: #718091;
  --border: rgba(120,180,230,.14);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, sans-serif;
  background: var(--bg);
  color: white;
  overflow-x: hidden;
}

button,
input {
  font-family: inherit;
}

button {
  cursor: pointer;
}


/* LOADER */

#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;

  background:
    radial-gradient(circle,#0b2034,#020509 65%);

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

  transition: .5s;
}

.loader-logo-circle,
.hero-logo-circle,
.support-logo,
.auth-logo {
  border-radius: 50%;
  overflow: hidden;

  background: #050a10;

  border: 2px solid #168dff;

  box-shadow:
    0 0 40px rgba(0,140,255,.25);

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

.loader-logo-circle {
  width: 150px;
  height: 150px;
}

.loader-logo-circle img,
.hero-logo-circle img,
.support-logo img,
.auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#loader h2 {
  margin-top: 22px;
  font-size: 35px;
  letter-spacing: 8px;
}

#loader p {
  color: #658097;
  margin-top: 7px;
  font-size: 9px;
  letter-spacing: 4px;
}

.loading-line {
  width: 280px;
  height: 3px;
  margin-top: 25px;
  background: #101923;
  overflow: hidden;
  border-radius: 50px;
}

.loading-line div {
  height: 100%;
  width: 0;

  background:
    linear-gradient(90deg,#006eff,#00d9ff);

  animation: loading 1.6s forwards;
}

@keyframes loading {
  to {
    width: 100%;
  }
}


/* NAVBAR */

.navbar {
  height: 82px;
  padding: 0 5%;

  position: sticky;
  top: 0;
  z-index: 1000;

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

  background: rgba(2,7,12,.82);
  backdrop-filter: blur(20px);

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

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.brand-logo {
  width: 52px;
  height: 52px;

  border-radius: 50%;
  overflow: hidden;

  border: 1px solid #197fd1;

  background: #050b11;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text strong {
  font-size: 19px;
}

.brand-text span {
  color: #63798b;
  font-size: 7px;
  letter-spacing: 2px;
}

.navbar nav {
  display: flex;
  gap: 8px;
}

.navbar nav button {
  border: none;
  background: transparent;

  color: #8394a5;

  padding: 10px 14px;

  font-weight: 600;
}

.navbar nav button:hover {
  color: white;
}

.nav-actions {
  display: flex;
  gap: 10px;
}

.signin,
.create-account-nav {
  padding: 11px 17px;

  border-radius: 8px;

  color: white;

  font-weight: 700;
}

.signin {
  background: #0d1620;
  border: 1px solid #26394b;
}

.create-account-nav {
  border: 1px solid #159cff;

  background:
    linear-gradient(135deg,#008cff,#004b9d);
}

.cart-button {
  width: 45px;
  height: 45px;

  position: relative;

  border-radius: 10px;

  border: 1px solid #168fff;

  color: white;

  background:
    linear-gradient(135deg,#008cff,#004b9d);
}

.cart-button span {
  position: absolute;

  top: -7px;
  right: -7px;

  width: 20px;
  height: 20px;

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

  border-radius: 50%;

  background: white;
  color: #06101a;

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


/* PAGE */

.page {
  display: none;
}

.page.active {
  display: block;
  animation: pageFade .3s ease;
}

@keyframes pageFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* HERO */

.hero {
  min-height: calc(100vh - 82px);

  position: relative;

  background:
    url("zrx-bg.png") center/cover no-repeat;

  display: flex;
  align-items: center;

  padding: 70px 8%;
}

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2,6,10,.95) 0%,
      rgba(2,7,12,.72) 40%,
      rgba(2,7,12,.18) 100%
    );
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      #03070c 0%,
      transparent 40%
    );
}

.hero-content {
  position: relative;
  z-index: 5;

  max-width: 650px;
}

.hero-logo-circle {
  width: 110px;
  height: 110px;

  margin-bottom: 25px;
}

.hero-small {
  color: #69c9ff;

  font-size: 9px;
  letter-spacing: 4px;
  font-weight: 900;
}

.hero h1 {
  margin-top: 17px;

  font-size: clamp(55px,7vw,95px);

  line-height: .95;
  letter-spacing: -5px;
}

.hero h1 span {
  display: block;

  background:
    linear-gradient(90deg,#d4e0eb,#008cff,#00d9ff);

  -webkit-background-clip: text;
  color: transparent;
}

.hero p {
  max-width: 520px;

  margin-top: 25px;

  color: #94a3b1;

  line-height: 1.7;
}

.shop-now {
  margin-top: 30px;

  padding: 16px 28px;

  border-radius: 8px;

  border: 1px solid #27a4ff;

  background:
    linear-gradient(135deg,#008cff,#004d9d);

  color: white;

  font-weight: 900;

  box-shadow:
    0 10px 40px rgba(0,140,255,.25);
}

.shop-now b {
  margin-left: 15px;
}


/* GAME ORBIT */

.games-section {
  min-height: 520px;

  padding: 80px 25px;

  overflow: hidden;

  background:
    radial-gradient(circle at center,#071a2b,#03070c 65%);

  text-align: center;
}

.games-title span,
.section-title span,
.plans-heading span {
  color: #00baff;

  font-size: 9px;
  letter-spacing: 3px;
  font-weight: 900;
}

.games-title h2,
.section-title h2,
.plans-heading h2 {
  font-size: 35px;
  margin-top: 8px;
}

.game-orbit {
  max-width: 800px;
  height: 330px;

  margin: 50px auto 0;

  position: relative;

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

  gap: 65px;
}

.orbit-line {
  position: absolute;

  width: 680px;
  height: 240px;

  border: 1px solid rgba(0,170,255,.18);

  border-radius: 50%;

  box-shadow:
    0 0 50px rgba(0,150,255,.08);

  animation: orbitGlow 3s ease-in-out infinite alternate;
}

@keyframes orbitGlow {
  from {
    box-shadow: 0 0 20px rgba(0,150,255,.05);
  }

  to {
    box-shadow: 0 0 60px rgba(0,170,255,.2);
  }
}

.game-card {
  z-index: 2;

  animation: float 3s ease-in-out infinite;

  cursor: pointer;
}

.game2 {
  animation-delay: .5s;
}

.game3 {
  animation-delay: 1s;
}

@keyframes float {
  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

.game-circle {
  width: 150px;
  height: 150px;

  border-radius: 50%;

  overflow: hidden;

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

  background:
    radial-gradient(circle,#10395b,#07121c 70%);

  border: 2px solid #187fc8;

  box-shadow:
    0 0 35px rgba(0,150,255,.22);
}

.game-circle img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 50%;
}

.game-card h3 {
  margin-top: 15px;
}

.soon-small {
  display: inline-block;

  margin-top: 6px;

  padding: 4px 8px;

  border-radius: 20px;

  background: #10202e;

  color: #5caee5;

  font-size: 7px;
  letter-spacing: 2px;
}


/* PRODUCTS */

.products-section {
  max-width: 1150px;
  margin: auto;

  padding: 90px 25px 120px;
}

.product-grid {
  display: grid;

  grid-template-columns: repeat(2,1fr);

  gap: 20px;

  margin-top: 30px;
}

.product-card {
  overflow: hidden;

  border-radius: 18px;

  background: #091018;

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

  transition: .25s;
}

.product-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(0,160,255,.35);
}

.product-picture {
  height: 310px;

  position: relative;

  overflow: hidden;

  background: #05090d;
}

.product-picture img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: .4s;
}

.product-card:hover .product-picture img {
  transform: scale(1.04);
}

.stock {
  position: absolute;

  top: 15px;
  left: 15px;

  padding: 7px 11px;

  background: rgba(0,0,0,.75);

  border: 1px solid #2b9d65;

  border-radius: 50px;

  color: #64e3a0;

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.product-content {
  padding: 25px;
}

.product-category {
  color: #00aaff;

  font-size: 8px;

  letter-spacing: 2px;

  font-weight: 900;
}

.product-content h2 {
  margin-top: 7px;
  font-size: 26px;
}

.product-content p {
  margin-top: 9px;

  color: #6f8191;

  font-size: 12px;
}

.product-bottom {
  display: flex;

  justify-content: space-between;

  align-items: end;

  margin-top: 25px;

  padding-top: 20px;

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

.product-bottom > div {
  display: flex;
  flex-direction: column;
}

.product-bottom small {
  color: #596d7e;

  font-size: 7px;
}

.product-bottom strong {
  margin-top: 5px;

  font-size: 20px;
}

.product-bottom button {
  padding: 11px 15px;

  border-radius: 8px;

  color: white;

  border: 1px solid #159bff;

  background:
    linear-gradient(135deg,#008cff,#004d9e);

  font-weight: 800;

  font-size: 10px;
}


/* SOON */

.soon-product {
  opacity: .72;
}

.soon-cover {
  display: flex;

  justify-content: center;

  align-items: center;

  background:
    radial-gradient(circle,#122b3d,#060b10 70%);
}

.soon-big {
  font-size: 65px;

  font-weight: 900;

  letter-spacing: 10px;

  color: #60788c;

  text-shadow:
    0 0 25px rgba(0,150,255,.2);
}

.disabled-button {
  opacity: .45;
  cursor: not-allowed;
}


/* BANNER */

.page-banner {
  min-height: 390px;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  background:
    linear-gradient(rgba(2,7,12,.55),#03070c),
    url("zrx-bg.png") center/cover;
}

.page-banner span {
  color: #00baff;

  font-size: 9px;

  letter-spacing: 3px;
}

.page-banner h1 {
  font-size: 70px;

  margin-top: 8px;
}

.page-banner p {
  color: #7b8c9d;

  margin-top: 10px;
}


/* PRODUCT DETAIL */

.product-page {
  max-width: 1100px;

  margin: auto;

  padding: 60px 25px 120px;
}

.back-button {
  background: none;

  border: none;

  color: #728698;

  font-size: 10px;

  font-weight: 800;
}

.product-showcase {
  margin-top: 45px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 45px;

  align-items: center;
}

.product-large-image {
  overflow: hidden;

  border-radius: 18px;

  border: 1px solid #174b72;

  box-shadow:
    0 15px 60px rgba(0,100,190,.15);
}

.product-large-image img {
  width: 100%;

  display: block;
}

.available-text {
  color: #5de09b;

  font-size: 8px;

  letter-spacing: 2px;
}

.product-details h1 {
  margin-top: 10px;

  font-size: 55px;
}

.product-details p {
  color: #778a9c;

  margin-top: 12px;
}

.product-features {
  margin-top: 25px;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.product-features span {
  padding: 9px 12px;

  background: #0b1620;

  border: 1px solid #1c3346;

  border-radius: 7px;

  color: #91a8ba;

  font-size: 9px;
}

.plans-heading {
  margin-top: 75px;
}

.plans-grid {
  margin-top: 25px;

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 13px;
}

.plan {
  position: relative;

  padding: 25px;

  border-radius: 15px;

  background: #0a1118;

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

.plan > span {
  color: #788b9b;

  font-size: 9px;
}

.plan h3 {
  margin-top: 13px;

  font-size: 30px;
}

.plan p {
  color: #5f7282;

  font-size: 9px;

  margin-top: 7px;
}

.plan button {
  width: 100%;

  margin-top: 22px;

  padding: 12px;

  border-radius: 8px;

  border: 1px solid #159aff;

  background:
    linear-gradient(135deg,#008cff,#004b9a);

  color: white;

  font-weight: 800;

  font-size: 9px;
}

.popular-plan {
  border-color: #157ec5;

  box-shadow:
    0 0 35px rgba(0,140,255,.08);
}

.popular-badge {
  position: absolute;

  right: 12px;
  top: 12px;

  color: #68c9ff;

  font-size: 6px;

  letter-spacing: 1px;
}


/* PAYMENT */

.payment-area {
  border-top: 1px solid var(--border);

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

  background: #050b11;

  padding: 45px 25px;

  text-align: center;
}

.payment-area > span {
  color: #00aaff;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 3px;
}

.payment-area h2 {
  margin-top: 7px;

  font-size: 25px;
}

.payment-icons {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 25px;
}

.pay-icon {
  min-width: 170px;

  height: 76px;

  padding: 10px 18px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  border-radius: 10px;

  background: #0a121a;

  border: 1px solid #1c3142;
}

.payment-image-box,
.secure-payment-icon {
  width: 52px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 8px;

  background: #101e2a;

  overflow: hidden;
}

.payment-image-box img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 5px;
}

.secure-payment-icon {
  font-size: 18px;
}

.pay-icon div:last-child {
  text-align: left;

  display: flex;

  flex-direction: column;
}

.pay-icon strong {
  font-size: 11px;
}

.pay-icon small {
  margin-top: 3px;

  color: #5f7283;

  font-size: 7px;
}


/* SUPPORT */

.support {
  min-height: 650px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 70px 20px;
}

.support-logo {
  width: 140px;
  height: 140px;

  margin-bottom: 25px;
}

.support > span {
  color: #00baff;

  font-size: 8px;

  letter-spacing: 3px;
}

.support h1 {
  font-size: 55px;

  margin-top: 10px;
}

.support p {
  max-width: 500px;

  margin-top: 12px;

  color: #758798;

  line-height: 1.7;
}

.support > button {
  margin-top: 25px;

  padding: 14px 24px;

  border-radius: 8px;

  border: 1px solid #159cff;

  color: white;

  background:
    linear-gradient(135deg,#008cff,#004c9b);

  font-weight: 800;
}


/* CART */

.cart-overlay,
.auth-overlay {
  position: fixed;

  inset: 0;

  z-index: 5000;

  background: rgba(0,0,0,.75);

  backdrop-filter: blur(12px);

  display: none;
}

.cart-overlay.show,
.auth-overlay.show {
  display: flex;
}

.cart-panel {
  width: min(430px,100%);

  height: 100%;

  margin-left: auto;

  background: #071019;

  display: flex;

  flex-direction: column;

  border-left: 1px solid #1d3446;
}

.cart-header {
  display: flex;

  justify-content: space-between;

  padding: 25px;

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

.cart-header span {
  color: #00aaff;

  font-size: 7px;

  letter-spacing: 2px;
}

.cart-header h2 {
  margin-top: 5px;
}

.cart-header button {
  width: 35px;
  height: 35px;

  border-radius: 7px;

  background: #101a23;

  border: 1px solid #273c4d;

  color: white;
}

.cart-items {
  flex: 1;

  padding: 20px;

  overflow: auto;
}

.empty-cart {
  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  color: #5c7183;
}

.cart-item {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px;

  margin-bottom: 10px;

  background: #0b151e;

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

  border-radius: 10px;
}

.cart-item img {
  width: 70px;
  height: 55px;

  object-fit: cover;

  border-radius: 7px;
}

.cart-item-info {
  flex: 1;

  display: flex;

  flex-direction: column;
}

.cart-item-info small {
  color: #607687;
}

.cart-item-info strong {
  margin-top: 3px;
}

.cart-item-info span {
  margin-top: 4px;

  color: #52bfff;
}

.cart-item button {
  background: none;

  border: none;

  color: #778b9b;
}

.cart-footer {
  padding: 22px;

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

.cart-footer > div {
  display: flex;

  justify-content: space-between;
}

.cart-footer > button {
  width: 100%;

  margin-top: 18px;

  padding: 14px;

  border-radius: 8px;

  border: 1px solid #159cff;

  background:
    linear-gradient(135deg,#008cff,#004c9b);

  color: white;

  font-weight: 900;
}


/* AUTH */

.auth-overlay {
  justify-content: center;
  align-items: center;
}

.auth-box {
  position: relative;

  width: min(420px,calc(100% - 30px));

  max-height: 90vh;

  overflow-y: auto;

  padding: 35px;

  border-radius: 18px;

  background: #09121a;

  border: 1px solid #233b4d;
}

.auth-logo {
  width: 100px;
  height: 100px;

  margin: 0 auto 20px;
}

.auth-box > span,
#loginBox > span,
#registerBox > span {
  display: block;

  text-align: center;

  color: #00baff;

  font-size: 7px;

  letter-spacing: 3px;
}

.auth-box h2 {
  text-align: center;

  margin: 7px 0 25px;

  font-size: 28px;
}

.auth-box label {
  display: block;

  margin: 13px 0 7px;

  color: #93a4b4;

  font-size: 10px;
}

.auth-box input {
  width: 100%;

  padding: 13px;

  border-radius: 8px;

  border: 1px solid #253a4a;

  background: #060d13;

  color: white;

  outline: none;
}

.auth-box input:focus {
  border-color: #168fff;

  box-shadow:
    0 0 0 3px rgba(0,140,255,.07);
}

.auth-submit {
  width: 100%;

  margin-top: 20px;

  padding: 13px;

  border-radius: 8px;

  border: 1px solid #159cff;

  background:
    linear-gradient(135deg,#008cff,#004c9b);

  color: white;

  font-weight: 900;
}

.auth-box p {
  text-align: center;

  margin-top: 17px;

  color: #65798a;

  font-size: 9px;
}

.auth-switch {
  border: none;

  background: transparent;

  color: #42b8ff;

  font-size: 9px;

  font-weight: 800;

  margin-left: 3px;
}

.auth-hidden {
  display: none;
}

.auth-close {
  position: absolute;

  right: 15px;
  top: 15px;

  width: 32px;
  height: 32px;

  border-radius: 7px;

  border: 1px solid #293e4f;

  background: #101a23;

  color: white;
}


/* FOOTER */

footer {
  min-height: 110px;

  padding: 20px 5%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: #020509;

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

.footer-logo {
  display: flex;

  align-items: center;

  gap: 12px;
}

.footer-logo > div {
  width: 55px;
  height: 55px;

  border-radius: 50%;

  overflow: hidden;

  border: 1px solid #157cc3;
}

.footer-logo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.footer-logo section {
  display: flex;

  flex-direction: column;
}

.footer-logo span {
  color: #5f7586;

  font-size: 7px;

  letter-spacing: 2px;
}

footer p {
  color: #506373;

  font-size: 9px;
}


/* TOAST */

#toast {
  position: fixed;

  bottom: 25px;
  right: 25px;

  z-index: 9000;

  padding: 14px 18px;

  background: #0b1720;

  border: 1px solid #235172;

  border-radius: 9px;

  opacity: 0;

  transform: translateY(80px);

  transition: .25s;

  font-size: 11px;
}

#toast.show {
  opacity: 1;

  transform: translateY(0);
}


/* MOBILE */

@media(max-width:850px) {

  .navbar nav {
    display: none;
  }

  .create-account-nav {
    display: none;
  }

  .product-grid,
  .product-showcase {
    grid-template-columns: 1fr;
  }

  .plans-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .game-orbit {
    gap: 25px;
  }

  .game-circle {
    width: 120px;
    height: 120px;
  }

  .orbit-line {
    width: 90%;
  }

}


@media(max-width:600px) {

  .navbar {
    padding: 0 15px;
  }

  .brand-text,
  .signin {
    display: none;
  }

  .hero {
    min-height: 700px;

    padding: 60px 20px;

    background-position: center;
  }

  .hero::after {
    background:
      rgba(2,7,12,.67);
  }

  .hero h1 {
    font-size: 55px;
  }

  .game-orbit {
    height: auto;

    flex-direction: column;

    gap: 35px;
  }

  .orbit-line {
    width: 260px;
    height: 520px;
  }

  .game-circle {
    width: 135px;
    height: 135px;
  }

  .product-picture {
    height: 230px;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .product-details h1 {
    font-size: 42px;
  }

  .payment-icons {
    display: grid;

    grid-template-columns: 1fr;
  }

  .pay-icon {
    min-width: 0;
  }

  footer {
    flex-direction: column;

    gap: 15px;
  }

}

/* =========================
   MY ACCOUNT PAGE
========================= */

.account-page {
  min-height: calc(100vh - 82px);
  padding: 70px 8%;
  background:
    radial-gradient(circle at top right, rgba(0,140,255,.13), transparent 35%),
    linear-gradient(180deg, #03070c 0%, #071019 100%);
}

.account-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(0,140,255,.25);
  background:
    linear-gradient(135deg, rgba(8,17,26,.95), rgba(3,9,15,.95));
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 0 30px rgba(0,140,255,.04);
  margin-bottom: 28px;
}

.account-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #00c8ff, #0078ff);
  box-shadow:
    0 0 0 4px rgba(0,140,255,.08),
    0 0 35px rgba(0,140,255,.30);
  flex-shrink: 0;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: #050b11;
}

.account-header > div:last-child span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #00bfff;
}

.account-header h1 {
  margin: 6px 0 4px;
  font-size: 34px;
  font-weight: 900;
  color: #f7fbff;
}

.account-header p {
  margin: 0;
  color: #7f91a3;
  font-size: 14px;
}

.account-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
}

.account-card {
  position: relative;
  padding: 28px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10,20,31,.98), rgba(5,11,17,.98));
  border: 1px solid rgba(120,180,230,.13);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  overflow: hidden;
}

.account-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00c8ff, #0078ff, transparent);
}

.account-card > span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #009cff;
}

.account-card h3 {
  margin: 8px 0 8px;
  color: #f6fbff;
  font-size: 24px;
  font-weight: 900;
}

.account-card > p {
  color: #718091;
  font-size: 13px;
  margin-bottom: 22px;
}

.account-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.account-info-row:last-child {
  border-bottom: 0;
}

.account-info-row small {
  color: #718091;
  font-size: 12px;
}

.account-info-row strong {
  color: #eaf5ff;
  font-size: 13px;
  text-align: right;
  word-break: break-all;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.no-orders {
  padding: 28px 20px;
  border: 1px dashed rgba(0,140,255,.22);
  border-radius: 14px;
  background: rgba(0,140,255,.035);
  color: #73879a;
  font-size: 13px;
  text-align: center;
}

.logout-button {
  margin-top: 26px;
  width: 100%;
  height: 52px;
  border: 1px solid rgba(255,80,80,.28);
  border-radius: 14px;
  background: rgba(255,55,55,.07);
  color: #ff7070;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .25s;
}

.logout-button:hover {
  background: rgba(255,55,55,.13);
  border-color: rgba(255,80,80,.5);
  box-shadow: 0 0 25px rgba(255,50,50,.08);
  transform: translateY(-1px);
}


/* =========================
   ACCOUNT MOBILE
========================= */

@media (max-width: 900px) {

  .account-page {
    padding: 45px 20px;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .account-header {
    padding: 22px;
    gap: 16px;
  }

  .account-avatar {
    width: 72px;
    height: 72px;
  }

  .account-header h1 {
    font-size: 25px;
  }

  .account-card {
    padding: 22px;
  }

  .account-info-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .account-info-row strong {
    text-align: left;
  }

}
/* =========================
   COPY LICENSE BUTTON
========================= */

.copy-license-button {
  position: relative;
  min-width: 150px;
  height: 46px;
  padding: 0 22px;

  border: 1px solid rgba(0, 190, 255, 0.45);
  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      rgba(0, 170, 255, 0.16),
      rgba(0, 90, 255, 0.08)
    );

  color: #eaf8ff;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;

  cursor: pointer;

  box-shadow:
    inset 0 0 18px rgba(0, 180, 255, 0.05),
    0 0 18px rgba(0, 150, 255, 0.08);

  transition: all 0.25s ease;
  overflow: hidden;
}


/* الخط الأزرق العلوي */
.copy-license-button::before {
  content: "";
  position: absolute;

  top: 0;
  left: 15%;

  width: 70%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #00c8ff,
      transparent
    );

  box-shadow:
    0 0 10px #00aaff;
}


/* HOVER */
.copy-license-button:hover {
  transform: translateY(-2px);

  color: #ffffff;

  border-color: #00bfff;

  background:
    linear-gradient(
      135deg,
      rgba(0, 190, 255, 0.28),
      rgba(0, 90, 255, 0.15)
    );

  box-shadow:
    0 0 25px rgba(0, 170, 255, 0.22),
    inset 0 0 20px rgba(0, 190, 255, 0.08);
}


/* لما تكبس */
.copy-license-button:active {
  transform: translateY(0) scale(0.97);
}


/* للموبايل */
@media (max-width: 600px) {

  .copy-license-button {
    width: 100%;
    min-width: 0;
    height: 48px;
  }

}

/* =========================================
   ZRX PREMIUM TEST PAYMENT GATEWAY
========================================= */

#paymentOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

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

  padding: 20px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(0, 153, 255, 0.14),
      transparent 35%
    ),
    rgba(2, 5, 10, 0.88);

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

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

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


#paymentOverlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* MAIN PAYMENT BOX */

#paymentOverlay .auth-box {
  position: relative;

  width: 100%;
  max-width: 470px !important;

  padding: 34px 32px 30px;

  border-radius: 22px;

  border: 1px solid rgba(0, 183, 255, 0.22);

  background:
    linear-gradient(
      145deg,
      rgba(14, 20, 29, 0.98),
      rgba(5, 9, 15, 0.99)
    );

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.75),
    0 0 70px rgba(0, 153, 255, 0.09),
    inset 0 1px 0 rgba(255,255,255,.04);

  overflow: hidden;
}


/* BLUE TOP GLOW */

#paymentOverlay .auth-box::before {
  content: "";

  position: absolute;

  top: 0;
  left: 12%;
  right: 12%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #00b7ff,
      #006eff,
      transparent
    );

  box-shadow:
    0 0 22px rgba(0, 183, 255, .8);
}


/* CLOSE BUTTON */

#paymentOverlay .auth-close {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 34px;
  height: 34px;

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

  padding: 0;

  border-radius: 9px;

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

  background:
    rgba(255,255,255,.035);

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

  font-size: 20px;

  cursor: pointer;

  transition: .2s ease;
}


#paymentOverlay .auth-close:hover {
  color: #fff;

  border-color:
    rgba(0,183,255,.4);

  background:
    rgba(0,183,255,.09);

  transform: rotate(90deg);
}


/* LOGO */

#paymentOverlay .auth-logo {
  width: 62px;
  height: 62px;

  margin:
    0 auto
    17px;

  padding: 6px;

  border-radius: 50%;

  background:
    rgba(0, 153, 255, .06);

  border:
    1px solid rgba(0, 183, 255, .3);

  box-shadow:
    0 0 30px rgba(0, 153, 255, .15);
}


#paymentOverlay .auth-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  border-radius: 50%;
}


/* ZRX SECURE CHECKOUT */

#paymentOverlay .auth-box > span {
  display: block;

  margin-top: 4px;

  text-align: center;

  color: #00b7ff;

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

  letter-spacing: 2.5px;
}


/* TITLE */

#paymentOverlay .auth-box > h2 {
  margin:
    7px 0 4px;

  text-align: center;

  color: #fff;

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

  letter-spacing: -.7px;
}


/* LABELS */

#paymentOverlay label {
  display: block;

  margin:
    15px 0 8px;

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

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

  letter-spacing: 1.4px;

  text-transform: uppercase;
}


/* INPUTS */

#paymentOverlay input {
  width: 100%;
  height: 52px;

  box-sizing: border-box;

  padding:
    0 15px;

  outline: none;

  border-radius: 11px;

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

  background:
    rgba(255,255,255,.035);

  color: #fff;

  font-family: inherit;

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

  letter-spacing: .6px;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


#paymentOverlay input::placeholder {
  color:
    rgba(255,255,255,.22);
}


#paymentOverlay input:hover {
  border-color:
    rgba(0,183,255,.22);
}


#paymentOverlay input:focus {
  border-color:
    rgba(0,183,255,.75);

  background:
    rgba(0,153,255,.045);

  box-shadow:
    0 0 0 3px rgba(0,153,255,.08),
    0 0 20px rgba(0,153,255,.06);
}


/* PAY BUTTON */

#testPayButton {
  position: relative;

  width: 100%;
  height: 55px;

  margin-top: 2px;

  border: 0;
  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #00b7ff,
      #006eff
    );

  color: #fff;

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

  letter-spacing: 1.7px;

  cursor: pointer;

  box-shadow:
    0 13px 35px rgba(0, 119, 255, .23),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}


#testPayButton:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.08);

  box-shadow:
    0 17px 45px rgba(0, 119, 255, .32),
    inset 0 1px 0 rgba(255,255,255,.3);
}


#testPayButton:active {
  transform:
    translateY(0)
    scale(.985);
}


#testPayButton:disabled {
  opacity: .55;

  cursor: not-allowed;

  transform: none;
}


/* VISA / MASTERCARD AREA */

#paymentOverlay .auth-box > div[style*="display:flex"] {
  padding: 5px;

  border-radius: 13px;

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


#paymentOverlay .auth-box > div[style*="display:flex"] > div {
  min-height: 45px;

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

  background:
    rgba(255,255,255,.025) !important;

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


#paymentOverlay .auth-box > div[style*="display:flex"] > div:hover {
  border-color:
    rgba(0,183,255,.45) !important;

  background:
    rgba(0,153,255,.055) !important;

  transform:
    translateY(-1px);
}


/* TOTAL BOX */

#paymentOverlay
.auth-box
> div[style*="margin:20px"] {

  padding: 16px 17px !important;

  border:
    1px solid rgba(0,183,255,.16) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      135deg,
      rgba(0,153,255,.07),
      rgba(0,110,255,.025)
    ) !important;
}


#testPaymentAmount {
  color: #fff;

  font-size: 23px !important;

  font-weight: 900;

  letter-spacing: -.4px;
}


/* MOBILE */

@media (max-width: 600px) {

  #paymentOverlay {
    padding: 12px;
  }


  #paymentOverlay .auth-box {
    max-width: 100% !important;

    padding:
      28px 19px
      23px;

    border-radius:
      18px;
  }


  #paymentOverlay .auth-logo {
    width: 54px;
    height: 54px;
  }


  #paymentOverlay .auth-box > h2 {
    font-size: 24px;
  }


  #paymentOverlay input {
    height: 50px;
  }


  #testPayButton {
    height: 53px;
  }

}
/* =========================================
   ZRX PREMIUM MY ORDERS
========================================= */

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}

.order-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(0, 190, 255, 0.16);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 170, 255, 0.10),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(13, 20, 31, 0.98),
      rgba(5, 9, 15, 0.98)
    );

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.order-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 190, 255, 0.65),
    transparent
  );
}

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

  border-color:
    rgba(0, 190, 255, 0.32);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.34),
    0 0 25px rgba(0, 150, 255, 0.05);
}


/* =========================
   TOP
========================= */

.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;

  padding-bottom: 16px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.06);
}

.order-product {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.order-product small {
  color: rgba(255, 255, 255, 0.42);

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

  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.order-product strong {
  color: #ffffff;

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

  letter-spacing: 0.3px;
}


/* =========================
   STATUS
========================= */

.order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 92px;
  height: 32px;

  padding: 0 12px;

  border-radius: 100px;

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

  letter-spacing: 1.2px;

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

  background:
    rgba(255, 255, 255, 0.04);

  color:
    rgba(255, 255, 255, 0.75);
}


/* FULFILLED */

.order-status.fulfilled {
  color: #5effa1;

  border-color:
    rgba(44, 255, 134, 0.28);

  background:
    rgba(44, 255, 134, 0.07);

  box-shadow:
    0 0 18px rgba(44, 255, 134, 0.05);
}


/* PAID */

.order-status.paid {
  color: #59caff;

  border-color:
    rgba(0, 183, 255, 0.30);

  background:
    rgba(0, 183, 255, 0.08);
}


/* PENDING */

.order-status.pending {
  color: #ffd86b;

  border-color:
    rgba(255, 190, 60, 0.28);

  background:
    rgba(255, 190, 60, 0.07);
}


/* CANCELLED */

.order-status.cancelled {
  color: #ff6b6b;

  border-color:
    rgba(255, 75, 75, 0.28);

  background:
    rgba(255, 75, 75, 0.07);
}


/* =========================
   PRICE / DATE
========================= */

.order-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 15px;

  padding: 15px 0 5px;
}

.order-card-bottom span {
  color: #42c8ff;

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

  letter-spacing: 0.5px;
}

.order-card-bottom small {
  color:
    rgba(255, 255, 255, 0.38);

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


/* =========================
   LICENSE AREA
========================= */

.license-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 16px;

  margin-top: 15px;
  padding: 15px;

  border-radius: 12px;

  border:
    1px solid rgba(0, 190, 255, 0.14);

  background:
    linear-gradient(
      135deg,
      rgba(0, 160, 255, 0.07),
      rgba(0, 70, 130, 0.025)
    );
}

.license-info {
  display: flex;
  flex-direction: column;

  gap: 7px;

  min-width: 0;
}

.license-info small {
  color:
    rgba(255, 255, 255, 0.38);

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

  letter-spacing: 1.7px;
}

.hidden-license {
  color: #7bd8ff;

  font-family:
    Consolas,
    Monaco,
    monospace;

  font-size: 14px;

  letter-spacing: 2px;

  white-space: nowrap;

  text-shadow:
    0 0 12px rgba(0, 190, 255, 0.25);
}


/* =========================
   COPY BUTTON
========================= */

.copy-license-button {
  position: relative;

  flex-shrink: 0;

  min-width: 150px;
  height: 46px;

  padding: 0 20px;

  border:
    1px solid rgba(0, 190, 255, 0.40);

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      rgba(0, 170, 255, 0.16),
      rgba(0, 90, 255, 0.07)
    );

  color: #eaf8ff;

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

  letter-spacing: 1.5px;

  cursor: pointer;

  box-shadow:
    inset 0 0 18px rgba(0, 180, 255, 0.04),
    0 0 18px rgba(0, 150, 255, 0.06);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.copy-license-button:hover {
  transform: translateY(-2px);

  border-color:
    rgba(60, 210, 255, 0.8);

  box-shadow:
    0 8px 24px rgba(0, 160, 255, 0.15);
}

.copy-license-button:active {
  transform: scale(0.97);
}


/* =========================
   WAITING MESSAGE
========================= */

.license-waiting {
  margin-top: 15px;

  padding: 13px 15px;

  border-radius: 10px;

  border:
    1px solid rgba(255, 190, 60, 0.15);

  background:
    rgba(255, 190, 60, 0.035);

  color:
    rgba(255, 220, 140, 0.75);

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

  line-height: 1.5;
}


/* =========================
   EMPTY ORDERS
========================= */

.no-orders {
  padding: 35px 20px;

  border:
    1px dashed rgba(0, 190, 255, 0.16);

  border-radius: 14px;

  background:
    rgba(0, 150, 255, 0.025);

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

  text-align: center;

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


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .order-card {
    padding: 16px;
  }

  .order-card-top {
    align-items: center;
  }

  .order-product strong {
    font-size: 15px;
  }

  .order-status {
    min-width: 80px;
    height: 29px;

    padding: 0 9px;

    font-size: 8px;
  }

  .license-box {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-license-button {
    width: 100%;
    min-width: 0;
  }

  .hidden-license {
    overflow: hidden;
    text-overflow: ellipsis;
  }

}
/* NEXUS PLAN IMAGE - FULL CARD WIDTH */

.zrx-plan-image {
  padding: 0 !important;
  height: 220px !important;
  overflow: hidden !important;
}

.zrx-plan-image img {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  transform: none !important;
}

.zrx-plan-card:hover .zrx-plan-image img {
  transform: scale(1.03) !important;
}