/*
 * Adsrek Pay — Redesign v1.10.7
 * Theme geometry parity fix.
 * Light and dark MUST have identical layout; only colors differ.
 */

/* ---------------------------------------------------------
   Exact geometry shared by BOTH themes
   --------------------------------------------------------- */
html[data-theme="light"] .ap-landing .ap-product,
html[data-theme="dark"] .ap-landing .ap-product{
  position:relative!important;
  min-height:610px!important;
  width:100%!important;
  max-width:620px!important;
  margin-left:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(210px,.72fr)!important;
  grid-template-rows:auto auto auto!important;
  gap:14px!important;
  align-content:center!important;
  padding:0!important;
}

/* Wallet card: identical position/size/angle */
html[data-theme="light"] .ap-landing .ap-wallet-card,
html[data-theme="dark"] .ap-landing .ap-wallet-card{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  grid-column:1 / -1!important;
  grid-row:1!important;

  width:100%!important;
  max-width:none!important;
  min-height:245px!important;
  height:auto!important;
  margin:0!important;
  padding:24px 26px!important;

  transform:none!important;
  rotate:none!important;
  translate:none!important;
  scale:none!important;

  border-radius:24px!important;
  overflow:hidden!important;
}

/* Same pseudo-element geometry in both themes */
html[data-theme="light"] .ap-landing .ap-wallet-card:before,
html[data-theme="dark"] .ap-landing .ap-wallet-card:before{
  display:block!important;
  width:280px!important;
  height:280px!important;
  right:-130px!important;
  top:-165px!important;
  opacity:.55!important;
  transform:none!important;
}
html[data-theme="light"] .ap-landing .ap-wallet-card:after,
html[data-theme="dark"] .ap-landing .ap-wallet-card:after{
  display:block!important;
  left:-90px!important;
  bottom:-130px!important;
  width:260px!important;
  height:240px!important;
  opacity:.55!important;
  transform:none!important;
}

html[data-theme="light"] .ap-landing .ap-wallet-card>small,
html[data-theme="dark"] .ap-landing .ap-wallet-card>small{
  margin-top:28px!important;
}
html[data-theme="light"] .ap-landing .ap-wallet-card>strong,
html[data-theme="dark"] .ap-landing .ap-wallet-card>strong{
  margin-top:6px!important;
  font-size:34px!important;
}
html[data-theme="light"] .ap-landing .ap-wallet-number,
html[data-theme="dark"] .ap-landing .ap-wallet-number{
  margin-top:22px!important;
}
html[data-theme="light"] .ap-landing .ap-wallet-meta,
html[data-theme="dark"] .ap-landing .ap-wallet-meta{
  margin-top:14px!important;
}

/* Exchange card: exact same geometry */
html[data-theme="light"] .ap-landing .ap-exchange-card,
html[data-theme="dark"] .ap-landing .ap-exchange-card{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  grid-column:1!important;
  grid-row:2 / 4!important;
  align-self:stretch!important;

  width:100%!important;
  max-width:none!important;
  min-height:282px!important;
  height:auto!important;
  margin:0!important;
  padding:20px!important;

  transform:none!important;
  rotate:none!important;
  translate:none!important;
  scale:none!important;

  border-radius:22px!important;
}

/* Small cards: identical geometry */
html[data-theme="light"] .ap-landing .ap-float-card--status,
html[data-theme="dark"] .ap-landing .ap-float-card--status,
html[data-theme="light"] .ap-landing .ap-float-card--shield,
html[data-theme="dark"] .ap-landing .ap-float-card--shield{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  display:flex!important;
  width:100%!important;
  max-width:none!important;
  min-height:126px!important;
  margin:0!important;
  padding:16px!important;

  transform:none!important;
  rotate:none!important;
  translate:none!important;
  scale:none!important;

  border-radius:20px!important;
}
html[data-theme="light"] .ap-landing .ap-float-card--status,
html[data-theme="dark"] .ap-landing .ap-float-card--status{
  grid-column:2!important;
  grid-row:2!important;
}
html[data-theme="light"] .ap-landing .ap-float-card--shield,
html[data-theme="dark"] .ap-landing .ap-float-card--shield{
  grid-column:2!important;
  grid-row:3!important;
}

/* Exact same hero positioning */
html[data-theme="light"] .ap-landing .ap-hero,
html[data-theme="dark"] .ap-landing .ap-hero{
  width:min(1240px,calc(100% - 44px))!important;
  min-height:660px!important;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr)!important;
  gap:64px!important;
  align-items:center!important;
  padding:54px 0 50px!important;
}

/* ---------------------------------------------------------
   Colors only below this point
   --------------------------------------------------------- */
html[data-theme="light"] .ap-landing .ap-wallet-card{
  background:
    radial-gradient(circle at 95% 4%,rgba(89,153,211,.11),transparent 33%),
    linear-gradient(145deg,#f7fbff,#edf4fb 60%,#e7f0f8)!important;
  border-color:#d7e4ef!important;
  box-shadow:0 18px 42px rgba(26,64,111,.11)!important;
}
html[data-theme="dark"] .ap-landing .ap-wallet-card{
  background:
    radial-gradient(circle at 95% 4%,rgba(89,153,211,.10),transparent 33%),
    linear-gradient(145deg,#203e62,#193551 60%,#173049)!important;
  border-color:#34516d!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22)!important;
}

html[data-theme="light"] .ap-landing .ap-exchange-card,
html[data-theme="light"] .ap-landing .ap-float-card--status,
html[data-theme="light"] .ap-landing .ap-float-card--shield{
  background:#fff!important;
  border-color:#dfe7ef!important;
}
html[data-theme="dark"] .ap-landing .ap-exchange-card,
html[data-theme="dark"] .ap-landing .ap-float-card--status,
html[data-theme="dark"] .ap-landing .ap-float-card--shield{
  background:#142337!important;
  border-color:#2b4057!important;
}

/* Also lock desktop wallet position against old v1.10.2 rules */
@media(min-width:1121px){
  html[data-theme="light"] .ap-landing .ap-wallet-card,
  html[data-theme="dark"] .ap-landing .ap-wallet-card{
    top:auto!important;
    left:auto!important;
    width:100%!important;
    height:auto!important;
    transform:none!important;
  }
}

/* Mobile themes must also stay identical */
@media(max-width:1120px){
  html[data-theme="light"] .ap-landing .ap-hero,
  html[data-theme="dark"] .ap-landing .ap-hero{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  html[data-theme="light"] .ap-landing .ap-product,
  html[data-theme="dark"] .ap-landing .ap-product{
    max-width:680px!important;
    margin:0!important;
  }
}
@media(max-width:720px){
  html[data-theme="light"] .ap-landing .ap-product,
  html[data-theme="dark"] .ap-landing .ap-product{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    min-height:0!important;
  }

  html[data-theme="light"] .ap-landing .ap-wallet-card,
  html[data-theme="dark"] .ap-landing .ap-wallet-card,
  html[data-theme="light"] .ap-landing .ap-exchange-card,
  html[data-theme="dark"] .ap-landing .ap-exchange-card,
  html[data-theme="light"] .ap-landing .ap-float-card--status,
  html[data-theme="dark"] .ap-landing .ap-float-card--status,
  html[data-theme="light"] .ap-landing .ap-float-card--shield,
  html[data-theme="dark"] .ap-landing .ap-float-card--shield{
    grid-column:1!important;
    grid-row:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:100%!important;
    transform:none!important;
  }
}