:root{
  --wp-accent: #dc2626;
  --wp-accent2: #ffffff;
  --wp-dark: #7f1d1d;
  --wp-soft: rgba(37,99,235,.10);
  --wp-line: #dbe7f3;
  --wp-text: #0f172a;
  --wp-muted: #64748b;
}

/* global payment theme */
body{
  background:
    radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--wp-accent2) 24%, transparent), transparent 28%),
    radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--wp-accent) 20%, transparent), transparent 30%),
    linear-gradient(180deg,#eef6ff,#f8fbff)!important;
}

body:before{
  content:"🇮🇩✨";
  position:fixed;
  left:18px;
  bottom:72px;
  z-index:2;
  pointer-events:none;
  font-size:40px;
  opacity:.16;
  filter:blur(.1px);
  animation:wpThemeFloat 4.5s ease-in-out infinite;
}

body:after{
  content:"Dirgahayu Indonesia";
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:50;
  pointer-events:none;
  padding:9px 13px;
  border-radius:999px;
  color:white;
  font-size:12px;
  font-weight:950;
  background:linear-gradient(135deg,var(--wp-accent2),var(--wp-accent));
  box-shadow:0 14px 34px color-mix(in srgb, var(--wp-accent) 24%, transparent);
  opacity:.92;
}

@keyframes wpThemeFloat{
  50%{transform:translateY(-10px) rotate(-4deg)}
}

/* header / hero */
.navbar, header, .header, .hero, .topbar{
  transition:.25s ease;
}

.card, .panel, section, .wp-inline-pay-result{
  transition:.25s ease;
}

button, .btn, a.btn, input[type=submit]{
  transition:.18s ease;
}

button:hover, .btn:hover, a.btn:hover{
  transform:translateY(-1px);
}

/* checkout payment */
.wp-inline-pay-result{
  max-width:760px!important;
  margin:20px auto!important;
  border-radius:28px!important;
  border:1px solid rgba(219,231,243,.95)!important;
  box-shadow:0 24px 70px rgba(15,23,42,.12)!important;
  overflow:hidden;
}

.wp-inline-pay-result h3{
  font-size:20px!important;
  letter-spacing:-.04em;
}

.wp-pay-row small{
  color:var(--wp-muted)!important;
}

.wp-pay-code{
  background:linear-gradient(135deg,var(--wp-dark),#111827)!important;
}

.wp-pay-primary,
.wp-pay-green,
button[type=submit],
input[type=submit]{
  background:linear-gradient(135deg,var(--wp-accent2),var(--wp-accent))!important;
  color:white!important;
  box-shadow:0 16px 34px color-mix(in srgb, var(--wp-accent) 23%, transparent)!important;
}

.wp-pay-light{
  background:color-mix(in srgb, var(--wp-accent) 10%, white)!important;
  color:var(--wp-accent)!important;
}

.wp-pay-alert{
  border:1px solid color-mix(in srgb, var(--wp-accent) 16%, white)!important;
  background:color-mix(in srgb, var(--wp-accent2) 12%, white)!important;
  color:color-mix(in srgb, var(--wp-accent) 75%, #0f172a)!important;
}

/* cektagihan */
form button,
form input[type=submit],
form .btn{
  border-radius:14px!important;
}

input, select{
  border-radius:12px!important;
}

[class*="tagihan"], [class*="invoice"]{
  transition:.2s ease;
}

/* validation page */
.status-icon,
.period-card,
.primary{
  background:linear-gradient(135deg,var(--wp-accent2),var(--wp-accent))!important;
}

.period-card{
  box-shadow:0 22px 50px color-mix(in srgb, var(--wp-accent) 22%, transparent)!important;
}

.brand-icon{
  background:linear-gradient(135deg,var(--wp-accent2),var(--wp-accent))!important;
}

.secure-chip{
  color:color-mix(in srgb, var(--wp-accent) 70%, #15803d)!important;
}

@media(max-width:640px){
  body:after{
    right:10px;
    bottom:72px;
    font-size:10px;
    padding:7px 10px;
  }
  body:before{
    font-size:32px;
    bottom:118px;
  }
  .wp-inline-pay-result{
    border-radius:22px!important;
    margin:14px 10px!important;
  }
}