/*
 * Adsrek Pay — Redesign v1.10.4
 * Card layout, but aligned and clean.
 * Based on v1.10.2.
 */

/* ===== Main hero ===== */
.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:58px 0 54px!important;
}
.ap-hero-copy{
  max-width:600px!important;
}
.ap-hero h1{
  margin:18px 0 0!important;
  font-size:clamp(58px,5.4vw,78px)!important;
  line-height:1.01!important;
  letter-spacing:-.06em!important;
}
.ap-hero h1 strong{
  display:inline!important;
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:inherit!important;
  font-weight:inherit!important;
}
.ap-hero-copy>p{
  max-width:560px!important;
  margin-top:22px!important;
  font-size:17px!important;
  line-height:1.66!important;
}
.ap-hero-actions{
  margin-top:30px!important;
  gap:12px!important;
}
.ap-cta{
  min-height:48px!important;
  padding:0 20px!important;
  border-radius:12px!important;
  font-size:14px!important;
}
.ap-proof{
  margin-top:32px!important;
  padding-top:22px!important;
}

/* ===== Right card area ===== */
.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;
}

/* no background frame, cards are the composition */
.ap-product:before,
.ap-product:after{
  display:none!important;
}
.ap-product-glow{
  display:block!important;
  position:absolute!important;
  inset:10% 3% 8% 5%!important;
  border-radius:50%!important;
  opacity:.55!important;
  filter:blur(28px)!important;
  pointer-events:none!important;
}

/* all cards reset from old absolute positioning */
.ap-wallet-card,
.ap-exchange-card,
.ap-float-card--status,
.ap-float-card--shield{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* wallet card — large, first row */
.ap-wallet-card{
  grid-column:1 / -1!important;
  grid-row:1!important;
  min-height:245px!important;
  height:auto!important;
  padding:24px 26px!important;
  border-radius:24px!important;
  border:1px solid rgba(59,117,191,.13)!important;
  box-shadow:0 22px 48px rgba(27,70,126,.13)!important;
  overflow:hidden!important;
}
.ap-wallet-card:before{
  display:block!important;
  width:280px!important;
  height:280px!important;
  right:-130px!important;
  top:-165px!important;
  opacity:.55!important;
}
.ap-wallet-card:after{
  display:block!important;
  left:-90px!important;
  bottom:-130px!important;
  opacity:.55!important;
}
.ap-wallet-card>small{
  margin-top:28px!important;
}
.ap-wallet-card>strong{
  margin-top:6px!important;
  font-size:34px!important;
}
.ap-wallet-number{
  margin-top:22px!important;
}
.ap-wallet-meta{
  margin-top:14px!important;
}

/* exchange card — left, second row */
.ap-exchange-card{
  grid-column:1!important;
  grid-row:2 / 4!important;
  align-self:stretch!important;
  min-height:282px!important;
  padding:20px!important;
  border-radius:22px!important;
  box-shadow:0 18px 42px rgba(25,58,98,.10)!important;
}
.ap-exchange-head{
  padding-bottom:12px!important;
}
.ap-exchange-head span{
  font-size:15px!important;
}
.ap-exchange-row{
  min-height:64px!important;
  margin-top:10px!important;
  padding:10px 12px!important;
  border-radius:13px!important;
}
.ap-method-icon{
  width:40px!important;
  height:40px!important;
  border-radius:12px!important;
}
.ap-swap{
  width:32px!important;
  height:32px!important;
  margin:-2px auto -8px!important;
  border-radius:9px!important;
}
.ap-exchange-action{
  margin-top:12px!important;
}

/* small cards on the right */
.ap-float-card--status,
.ap-float-card--shield{
  min-height:126px!important;
  padding:16px!important;
  border-radius:20px!important;
  box-shadow:0 16px 36px rgba(25,58,98,.09)!important;
  backdrop-filter:none!important;
}
.ap-float-card--status{
  grid-column:2!important;
  grid-row:2!important;
}
.ap-float-card--shield{
  grid-column:2!important;
  grid-row:3!important;
  display:flex!important;
}
.ap-float-card--status i,
.ap-float-card--shield i{
  width:40px!important;
  height:40px!important;
  border-radius:13px!important;
  flex:0 0 40px!important;
}
.ap-float-card--status span,
.ap-float-card--shield span{
  min-width:0!important;
}
.ap-float-card--status b,
.ap-float-card--shield b{
  font-size:12px!important;
  line-height:1.25!important;
}
.ap-float-card--status small,
.ap-float-card--shield small{
  margin-top:4px!important;
  font-size:10px!important;
  line-height:1.4!important;
}

/* ===== Light ===== */
html[data-theme="light"] .ap-hero h1{
  color:#112846!important;
}
html[data-theme="light"] .ap-hero-copy>p{
  color:#657991!important;
}
html[data-theme="light"] .ap-wallet-card{
  background:
    radial-gradient(circle at 94% 6%,rgba(115,184,235,.12),transparent 34%),
    linear-gradient(145deg,#f9fcff,#edf5fd 58%,#e6f0fa)!important;
  border-color:#dce7f1!important;
}
html[data-theme="light"] .ap-exchange-card,
html[data-theme="light"] .ap-float-card--status,
html[data-theme="light"] .ap-float-card--shield{
  background:rgba(255,255,255,.96)!important;
  border:1px solid #e0e8f0!important;
}
html[data-theme="light"] .ap-product-glow{
  background:radial-gradient(circle,rgba(49,130,225,.12),rgba(53,193,220,.04) 46%,transparent 72%)!important;
}
html[data-theme="light"] .ap-float-card--shield i{
  background:#edf4ff!important;
  color:#2d70d6!important;
}

/* ===== Dark ===== */
html[data-theme="dark"] .ap-hero h1{
  color:#f1f5f9!important;
}
html[data-theme="dark"] .ap-hero-copy>p{
  color:#9aadc0!important;
}
html[data-theme="dark"] .ap-wallet-card{
  background:
    radial-gradient(circle at 92% 5%,rgba(102,155,207,.10),transparent 34%),
    linear-gradient(145deg,#203f64,#193552 58%,#163049)!important;
  border-color:#36536f!important;
  box-shadow:0 22px 48px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] .ap-exchange-card,
html[data-theme="dark"] .ap-float-card--status,
html[data-theme="dark"] .ap-float-card--shield{
  background:#142438!important;
  border:1px solid #2d425a!important;
  box-shadow:0 16px 36px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .ap-product-glow{
  background:radial-gradient(circle,rgba(85,133,189,.14),rgba(53,132,157,.04) 46%,transparent 72%)!important;
}
html[data-theme="dark"] .ap-float-card--shield i{
  background:#1b3150!important;
  color:#8db3e7!important;
}

/* ===== Lower sections less "AI template" ===== */
.ap-strip{
  width:min(1240px,calc(100% - 44px))!important;
  margin:0 auto!important;
  border-radius:14px!important;
  min-height:54px!important;
}
.ap-section,
.ap-security,
.ap-footer{
  width:min(1240px,calc(100% - 44px))!important;
}
.ap-feature{
  border-radius:18px!important;
}
.ap-security{
  border-radius:24px!important;
}

/* ===== Responsive ===== */
@media(max-width:1120px){
  .ap-hero{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .ap-product{
    max-width:680px!important;
    margin:0!important;
  }
}
@media(max-width:720px){
  .ap-hero{
    width:calc(100% - 28px)!important;
    padding-top:44px!important;
  }
  .ap-hero h1{
    font-size:48px!important;
  }
  .ap-product{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    min-height:0!important;
  }
  .ap-wallet-card,
  .ap-exchange-card,
  .ap-float-card--status,
  .ap-float-card--shield{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .ap-float-card--status,
  .ap-float-card--shield{
    min-height:auto!important;
  }
}