/* ============================================================
   Adsrek Pay brand system — approved blue/cyan fintech direction
   ============================================================ */

:root{
  --arpay-blue:#177bff;
  --arpay-blue-2:#1058f5;
  --arpay-cyan:#24cef3;
  --arpay-navy:#071523;
  --arpay-card:#0b2138;
}

/* Common logo */
.pc-brand__mark,
.apx-brand img,
.pc-footer__brand img{
  width:auto!important;
  object-fit:contain;
  filter:drop-shadow(0 7px 14px rgba(17,119,255,.24))!important;
}
.pc-brand__mark{height:36px!important;max-width:50px!important}
.apx-brand img{height:46px!important;max-width:58px!important}
.pc-footer__brand img{height:32px!important;max-width:44px!important}

.pc-brand,
.apx-brand{
  gap:12px!important;
}
.pc-brand__text b,
.apx-brand b,
.pc-footer__brand b{
  font-weight:950!important;
  letter-spacing:-.045em!important;
}
.pc-brand__text b,
.pc-footer__brand b{
  font-size:19px!important;
}
.apx-brand b{
  font-size:20px!important;
}
.pc-brand__text b em,
.apx-brand b em,
.pc-footer__brand b em{
  font-style:normal!important;
  background:linear-gradient(110deg,var(--arpay-blue),var(--arpay-cyan))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}
.pc-brand__text small,
.apx-brand small,
.pc-footer__brand small{
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
}

/* Landing hero branding */
.apx-kicker{
  border-color:color-mix(in srgb,var(--arpay-cyan) 22%,var(--apx-border))!important;
}
.apx-kicker i{
  background:linear-gradient(135deg,var(--arpay-cyan),var(--arpay-blue))!important;
  box-shadow:0 0 0 4px rgba(27,151,255,.09),0 0 16px rgba(36,206,243,.16)!important;
}
.apx-hero h1{
  letter-spacing:-.055em!important;
}
.apx-hero h1 strong{
  background:linear-gradient(108deg,#4b91cf 0%,#58b7df 48%,#6ed7e3 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}
html[data-theme="dark"] .apx-hero h1 strong{
  background:linear-gradient(108deg,#69a9e9 0%,#63c6e6 55%,#79e1e8 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.apx-btn--primary,
.apx-header-btn{
  background:linear-gradient(115deg,var(--arpay-blue-2),#168dff 55%,var(--arpay-cyan))!important;
  box-shadow:0 12px 26px rgba(17,115,255,.22)!important;
}

/* The virtual card intentionally remains premium dark in both themes. */
.apx-bank-card.apx-bank-card--real{
  height:250px!important;
  border:1px solid rgba(54,158,255,.42)!important;
  background:
    repeating-linear-gradient(123deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 92% 4%,rgba(30,141,255,.24),transparent 34%),
    linear-gradient(135deg,#12375b 0%,#0b2948 45%,#071a30 100%)!important;
  box-shadow:
    0 26px 60px rgba(1,10,25,.30),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 1px rgba(22,111,218,.08)!important;
}
.apx-bank-card.apx-bank-card--real:before{
  content:"AR";
  position:absolute;
  right:28px;
  bottom:-28px;
  color:rgba(71,154,235,.075);
  font-size:138px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.12em;
  transform:skewX(-8deg);
  pointer-events:none;
}
.apx-bank-card.apx-bank-card--real:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,transparent 0 37%,rgba(66,180,255,.04) 48%,transparent 61%);
  pointer-events:none;
}
.apx-bank-card .apx-card-rings,
.apx-bank-card .apx-card-rings:before,
.apx-bank-card .apx-card-rings:after{
  border-color:rgba(77,181,255,.11)!important;
}
.apx-bank-card .apx-bank-top>span,
.apx-bank-card .apx-bank-number,
.apx-bank-card .apx-bank-bottom{
  color:#f3f8ff!important;
}
.apx-bank-card .apx-bank-top>span{
  font-size:16px!important;
  letter-spacing:-.02em;
}
.apx-bank-card .apx-bank-top img{
  width:28px!important;
  height:28px!important;
}
.apx-bank-card .apx-bank-top b{
  color:#b8cee5!important;
}
.apx-bank-card .apx-bank-number{
  margin-top:22px!important;
  font-size:14px!important;
  letter-spacing:.19em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.apx-bank-card .apx-bank-bottom{
  margin-top:17px!important;
  color:#8eb3d4!important;
}
.apx-bank-card .apx-bank-bottom b{
  color:#d9eaff!important;
}
.apx-bank-card .apx-card-chip{
  background:
    linear-gradient(135deg,#dbe4eb,#aab7c4 48%,#e7edf2)!important;
  border-color:#7f8e9d!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 3px 8px rgba(0,0,0,.18)!important;
}
.apx-bank-card .apx-card-contactless path{
  stroke:#dcefff!important;
}

/* Mini card in feature section */
.apx-mini-bank--real{
  background:
    repeating-linear-gradient(123deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    linear-gradient(135deg,#143c61,#0a2744 56%,#071b30)!important;
  border-color:rgba(57,155,255,.35)!important;
  color:#eef7ff!important;
  box-shadow:0 18px 34px rgba(7,32,63,.22)!important;
}
.apx-mini-bank--real *{color:inherit!important}
.apx-mini-bank--real small{color:#91b8d7!important}

/* Right visual frame: more like a real payment product mockup */
.apx-visual{
  padding:15px!important;
  border-radius:27px!important;
  background:
    linear-gradient(145deg,rgba(26,112,204,.055),rgba(31,203,240,.018)),
    color-mix(in srgb,var(--apx-surface) 86%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--arpay-blue) 18%,var(--apx-border))!important;
  box-shadow:0 26px 70px rgba(11,49,91,.09)!important;
}
html[data-theme="dark"] .apx-visual{
  background:
    radial-gradient(circle at 85% 12%,rgba(23,123,255,.13),transparent 33%),
    #0a1929!important;
  border-color:#1f3a57!important;
  box-shadow:0 28px 70px rgba(0,0,0,.24)!important;
}

/* Exchange panel gets the same industrial navy character in dark theme. */
html[data-theme="dark"] .apx-exchange{
  background:#0d2034!important;
  border-color:#28435e!important;
}
html[data-theme="dark"] .apx-exchange-row{
  background:#10263d!important;
  border-color:#294963!important;
}

/* Trust boxes slightly more product-like */
.apx-trust>div{
  border:1px solid var(--apx-border)!important;
  border-radius:13px!important;
  padding:11px 12px!important;
  background:color-mix(in srgb,var(--apx-surface) 92%,transparent)!important;
}
.apx-trust{
  border-top:0!important;
  gap:10px!important;
  padding-top:0!important;
}

/* Footer lockup */
.apx-brand--footer small,
.pc-footer__brand small{
  font-size:7.5px!important;
}

/* Auth identity */
.ap-auth__form-head img{
  width:42px!important;
  height:42px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 7px 14px rgba(17,119,255,.22))!important;
}

/* Improve tiny logo usage on card/payment pages */
.merchant-payment-brand img,
.paylink-brand img,
.apx-mini-bank-top img{
  object-fit:contain!important;
}

/* Light theme still keeps the premium card, but surrounding UI stays light. */
html[data-theme="light"] .apx-visual{
  background:
    linear-gradient(145deg,rgba(35,120,235,.04),rgba(36,206,243,.015)),
    rgba(255,255,255,.66)!important;
}

/* Mobile */
@media(max-width:720px){
  .pc-brand__text b{font-size:17px!important}
  .pc-brand__text small{letter-spacing:.11em!important}
  .apx-brand img{height:40px!important}
  .apx-visual{padding:10px!important;border-radius:21px!important}
  .apx-bank-card.apx-bank-card--real{height:224px!important;padding:20px!important}
  .apx-bank-card.apx-bank-card--real:before{font-size:108px;right:22px}
}


/* ------------------------------------------------------------
   Landing page: clearer P2P illustration in the second block
   ------------------------------------------------------------ */
.apx-feature--p2p .apx-feature-copy{max-width:56%!important}
.apx-feature--p2p p{max-width:200px!important}
.apx-p2p-visual--cards{
  position:absolute!important;
  right:18px!important;
  bottom:24px!important;
  width:182px!important;
  height:142px!important;
  opacity:1!important;
}
.apx-p2p-visual--cards .apx-p2p-line,
.apx-p2p-visual--cards .apx-p2p-node,
.apx-p2p-visual--cards>b{display:none!important}
.apx-p2p-card{
  position:absolute;
  width:132px;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:16px;
  border:1px solid rgba(78,143,209,.24);
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(239,246,252,.97));
  box-shadow:0 16px 28px rgba(39,87,165,.10);
}
html[data-theme="dark"] .apx-p2p-card{
  background:linear-gradient(145deg,#16364d,#10283d);
  border-color:#35536f;
  box-shadow:0 16px 30px rgba(0,0,0,.22);
}
.apx-p2p-card--send{left:0;top:4px}
.apx-p2p-card--receive{right:0;bottom:18px}
.apx-p2p-card span{display:flex;flex-direction:column;line-height:1.05}
.apx-p2p-card small{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6e88a2}
.apx-p2p-card b{margin-top:3px;font-size:15px;font-weight:950;color:#12375f}
.apx-p2p-card em{margin-top:4px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.10em;color:#7a93ad;text-transform:uppercase}
html[data-theme="dark"] .apx-p2p-card small{color:#8fb0ce}
html[data-theme="dark"] .apx-p2p-card b{color:#eff7ff}
html[data-theme="dark"] .apx-p2p-card em{color:#9ebad3}
.apx-p2p-token{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  flex:none;color:#fff;font-style:normal;font-size:17px;font-weight:950;
  box-shadow:0 10px 20px rgba(24,98,211,.18)
}
.apx-p2p-token--rub{background:linear-gradient(145deg,#4f97f5,#2b6bd8)}
.apx-p2p-token--usdt{background:linear-gradient(145deg,#2cc7ce,#169ba4)}
.apx-p2p-arrow{
  position:absolute;
  left:72px;
  top:55px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#1a7dff,#25c9ef);
  color:#fff;
  font-size:19px;
  font-weight:900;
  box-shadow:0 14px 26px rgba(19,107,231,.24);
  z-index:2;
}
.apx-p2p-note{
  position:absolute;
  right:4px;
  top:0;
  padding:5px 9px;
  border-radius:999px;
  font-size:9px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#1a5d96;
  background:rgba(73,174,245,.12);
  border:1px solid rgba(72,153,216,.20);
}
html[data-theme="dark"] .apx-p2p-note{
  color:#98d2ff;
  background:rgba(41,119,202,.18);
  border-color:#2c5b86;
}
@media(max-width:1180px){
  .apx-feature--p2p .apx-feature-copy{max-width:60%!important}
  .apx-p2p-visual--cards{right:12px!important;width:168px!important}
  .apx-p2p-card{width:124px}
  .apx-p2p-arrow{left:64px}
}
@media(max-width:860px){
  .apx-feature--p2p .apx-feature-copy{max-width:100%!important}
  .apx-feature--p2p p{max-width:100%!important}
  .apx-p2p-visual--cards{
    left:24px!important;right:auto!important;bottom:32px!important;
    width:calc(100% - 48px)!important;height:118px!important;
  }
  .apx-p2p-card{width:calc(50% - 12px)}
  .apx-p2p-card--send{left:0;top:10px}
  .apx-p2p-card--receive{right:0;bottom:8px}
  .apx-p2p-arrow{left:calc(50% - 19px);top:41px}
}
@media(max-width:640px){
  .apx-p2p-visual--cards{opacity:.95!important;height:112px!important;bottom:24px!important}
  .apx-p2p-card{padding:10px;border-radius:14px}
  .apx-p2p-card b{font-size:13px}
  .apx-p2p-card em{font-size:9px}
  .apx-p2p-token{width:30px;height:30px;font-size:15px}
}


/* ============================================================
   Adsrek Pay landing v3 — clean P2P feature illustration
   ============================================================ */

/* Give section description enough breathing room under the big heading. */
.apx-section-head>p{
  margin-top:24px!important;
}

/* No illustration should collide with the copy. */
.apx-feature--p2p .apx-feature-copy{
  max-width:100%!important;
  padding-right:0!important;
}
.apx-feature--p2p h3{
  max-width:230px!important;
}
.apx-feature--p2p p{
  max-width:255px!important;
  padding-right:0!important;
}

/* One compact exchange widget instead of floating cards. */
.apx-p2p-visual--exchange{
  position:absolute!important;
  right:17px!important;
  bottom:18px!important;
  width:178px!important;
  height:116px!important;
  padding:9px!important;
  border:1px solid rgba(74,145,210,.25)!important;
  border-radius:17px!important;
  background:
    linear-gradient(145deg,rgba(250,253,255,.97),rgba(237,246,253,.98))!important;
  box-shadow:
    0 15px 30px rgba(31,82,148,.10),
    inset 0 1px 0 rgba(255,255,255,.8)!important;
  opacity:1!important;
  overflow:visible!important;
}

html[data-theme="dark"] .apx-p2p-visual--exchange{
  background:linear-gradient(145deg,#152e45,#0d2337)!important;
  border-color:#31516e!important;
  box-shadow:
    0 16px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

.apx-p2p-widget-head{
  height:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3px 5px;
}
.apx-p2p-widget-head span{
  display:inline-flex;
  align-items:center;
  height:17px;
  padding:0 7px;
  border-radius:999px;
  background:#e7f8f4;
  color:#15987e;
  font-size:7px;
  font-weight:950;
  letter-spacing:.10em;
}
.apx-p2p-widget-head b{
  color:#6c88a4;
  font-size:7px;
  font-weight:900;
  letter-spacing:.07em;
}
html[data-theme="dark"] .apx-p2p-widget-head span{
  background:#15392f;
  color:#72d6b6;
}
html[data-theme="dark"] .apx-p2p-widget-head b{
  color:#91adc6;
}

.apx-p2p-widget-row{
  position:relative;
  height:37px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  padding:4px 7px;
  border:1px solid #dbe8f3;
  border-radius:11px;
  background:#fff;
}
html[data-theme="dark"] .apx-p2p-widget-row{
  border-color:#294963;
  background:#10283e;
}

.apx-p2p-widget-row span{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.apx-p2p-widget-row small{
  color:#7991aa;
  font-size:6px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.apx-p2p-widget-row b{
  margin-top:2px;
  overflow:hidden;
  color:#12365f;
  font-size:9px;
  font-weight:950;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.apx-p2p-widget-row em{
  color:#7690aa;
  font-size:6px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.05em;
}
html[data-theme="dark"] .apx-p2p-widget-row small,
html[data-theme="dark"] .apx-p2p-widget-row em{
  color:#89a8c4;
}
html[data-theme="dark"] .apx-p2p-widget-row b{
  color:#eef7ff;
}

.apx-p2p-visual--exchange .apx-p2p-token{
  width:27px!important;
  height:27px!important;
  border-radius:9px!important;
  font-size:13px!important;
  box-shadow:0 6px 13px rgba(25,100,205,.16)!important;
}

.apx-p2p-widget-swap{
  position:absolute;
  left:50%;
  top:57px;
  z-index:4;
  width:22px;
  height:22px;
  margin-left:-11px;
  display:grid;
  place-items:center;
  border:2px solid #f7fbff;
  border-radius:8px;
  background:linear-gradient(135deg,#167eff,#23c9ed);
  color:#fff;
  font-size:10px;
  font-weight:950;
  box-shadow:0 7px 15px rgba(19,108,225,.22);
}
html[data-theme="dark"] .apx-p2p-widget-swap{
  border-color:#0f263b;
}

/* Keep the link clearly separate on the left. */
.apx-feature--p2p .apx-feature-copy{
  min-height:264px!important;
}
.apx-feature--p2p .apx-feature-copy>a{
  max-width:95px;
}

/* Current desktop card width is compact: reserve the bottom-right corner. */
@media(min-width:1101px){
  .apx-feature--p2p .apx-feature-copy{
    padding-bottom:2px!important;
  }
  .apx-feature--p2p p{
    max-width:220px!important;
  }
}

/* At medium widths the widget becomes a little smaller but stays legible. */
@media(max-width:1180px) and (min-width:761px){
  .apx-p2p-visual--exchange{
    right:12px!important;
    width:164px!important;
  }
  .apx-feature--p2p p{
    max-width:205px!important;
  }
}

/* On stacked layouts place the mini-exchange below the text, full width. */
@media(max-width:760px){
  .apx-feature--p2p{
    min-height:390px!important;
  }
  .apx-feature--p2p .apx-feature-copy{
    min-height:342px!important;
  }
  .apx-feature--p2p p{
    max-width:100%!important;
  }
  .apx-p2p-visual--exchange{
    left:24px!important;
    right:24px!important;
    bottom:54px!important;
    width:auto!important;
    height:116px!important;
  }
  .apx-feature--p2p .apx-feature-copy>a{
    max-width:none;
  }
}