.transaction-modern-page{
  padding:22px 0 30px;
  background:#fff;
}

.transaction-page-head{
  margin-bottom:24px;
}

.transaction-page-head h1{
  margin:0 0 6px;
  font-size:34px;
  line-height:1.1;
  color:#111;
  letter-spacing:-.35px;
}

.transaction-page-head p{
  margin:0;
  color:#666;
  font-size:14px;
  line-height:1.75;
}

.transaction-modern-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:20px;
  align-items:start;
}

.transaction-main-column,
.transaction-side-column{
  min-width:0;
}

.transaction-hero-card,
.transaction-info-card,
.transaction-help-card{
  background:linear-gradient(180deg,#ffffff 0%, #fcfcfd 100%);
  border:1px solid rgba(15,23,42,.07);
  border-radius:20px;
  padding:18px;
  box-shadow:
    0 12px 28px rgba(15,23,42,.05),
    0 3px 10px rgba(15,23,42,.02);
}

.transaction-info-card + .transaction-info-card{
  margin-top:16px;
}

/* HERO */
.transaction-hero-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  border-color:#f0dede;
  box-shadow:
    0 16px 30px rgba(201,0,0,.06),
    0 4px 10px rgba(15,23,42,.02);
  background:
    radial-gradient(circle at top right, rgba(201,0,0,.05), transparent 34%),
    linear-gradient(180deg,#ffffff 0%, #fcfcfd 100%);
  overflow:hidden;
}

.transaction-hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}

.transaction-hero-left{
  min-width:0;
  position:relative;
  z-index:1;
}

.transaction-hero-left h2{
  margin:10px 0 6px;
  font-size:24px;
  line-height:1.18;
  color:#111;
  word-break:break-word;
  letter-spacing:-.2px;
}

.transaction-hero-left p{
  margin:0;
  font-size:13px;
  color:#666;
  line-height:1.7;
}

.transaction-hero-right{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  min-width:172px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff5f5 0%, #fff0f0 100%);
  border:1px solid #ffd2d2;
  text-align:right;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 20px rgba(201,0,0,.04);
}

.transaction-hero-right span{
  display:block;
  font-size:12px;
  color:#b55;
  margin-bottom:4px;
  font-weight:800;
}

.transaction-hero-right strong{
  display:block;
  color:var(--red);
  font-size:28px;
  font-weight:900;
  letter-spacing:-.35px;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 6px 14px rgba(15,23,42,.03);
}

.status-success{
  background:#eefbf1;
  color:#14803c;
  border:1px solid #cdeed6;
}

.status-danger{
  background:#fff1f1;
  color:#b10000;
  border:1px solid #ffd3d3;
}

.status-warning{
  background:#fff9e9;
  color:#9a6700;
  border:1px solid #ffe1a6;
}

.status-processing{
  background:#f3f4f6;
  color:#555;
  border:1px solid #e5e7eb;
}

/* DETAILS */
.transaction-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.transaction-info-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border:1px solid #efefef;
  border-radius:15px;
  background:#fcfcfc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.transaction-info-item.full{
  grid-column:1 / -1;
}

.transaction-info-item span{
  font-size:12px;
  color:#888;
}

.transaction-info-item strong{
  font-size:14px;
  color:#111;
  line-height:1.5;
  word-break:break-word;
}

.transaction-info-item.highlight{
  background:linear-gradient(135deg,#fff5f5 0%, #fff0f0 100%);
  border-color:#ffd2d2;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 16px rgba(201,0,0,.04);
}

.transaction-info-item.highlight span{
  color:#b55;
  font-weight:800;
}

.transaction-info-item.highlight strong{
  color:var(--red);
  font-weight:900;
}

/* FORM */
.textarea{
  width:100%;
  min-height:112px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg,#ffffff 0%, #fcfcfd 100%);
  padding:12px 14px;
  font-size:13px;
  color:#111;
  resize:vertical;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  box-shadow:
    0 6px 14px rgba(15,23,42,.03),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.textarea::placeholder{
  color:#999;
}

.textarea:focus{
  border-color:var(--red);
  box-shadow:
    0 0 0 4px rgba(201,0,0,.08),
    0 10px 20px rgba(15,23,42,.04);
  outline:none;
}

.upload-box-modern{
  border:1px dashed #d9d9d9;
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg,#fafafa 0%, #ffffff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.upload-label{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#222;
  margin-bottom:10px;
  cursor:pointer;
}

.upload-input{
  width:100%;
  font-size:13px;
}

.file-name-preview{
  margin-top:10px;
  font-size:12px;
  color:#777;
  line-height:1.55;
}

/* HELP */
.help-steps-modern{
  display:grid;
  gap:12px;
}

.help-step-modern{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.help-step-number{
  width:31px;
  height:31px;
  border-radius:999px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff3f3;
  color:var(--red);
  border:1px solid #ffd7d7;
  font-size:12px;
  font-weight:800;
  box-shadow:0 6px 14px rgba(15,23,42,.03);
}

.help-step-modern strong{
  display:block;
  font-size:13px;
  color:#111;
  margin-bottom:4px;
}

.help-step-modern p{
  margin:0;
  font-size:12px;
  color:#777;
  line-height:1.7;
}

.payment-btn-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* reuse button style */
.btn-bayar{
  width:100%;
  height:50px;
  border:none;
  border-radius:15px;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  color:#fff;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  margin-top:16px;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  box-shadow:
    0 14px 28px rgba(201,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.btn-bayar:hover{
  transform:translateY(-1px);
  box-shadow:
    0 18px 32px rgba(201,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.btn-bayar:active{
  transform:scale(.98);
}

.btn-bayar:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}

/* MOBILE */
@media (max-width: 960px){
  .transaction-modern-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width: 680px){
  .transaction-modern-page{
    padding:16px 0 24px;
  }

  .transaction-page-head{
    margin-bottom:18px;
  }

  .transaction-page-head h1{
    font-size:28px;
  }

  .transaction-hero-card,
  .transaction-info-card,
  .transaction-help-card{
    border-radius:18px;
    padding:16px;
  }

  .transaction-hero-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .transaction-hero-right{
    width:100%;
    text-align:left;
  }

  .transaction-hero-right strong{
    font-size:24px;
  }

  .transaction-info-grid{
    grid-template-columns:1fr;
  }

  .btn-bayar{
    height:46px;
    font-size:13px;
  }
}