:root{
    --bg:#f5fbf6;
    --card:#ffffff;
    --accent:#2bb673;
    --accent-2:#0ea5a2;
    --muted:#6b7280;
    --success-shadow: 0 10px 30px rgba(43,182,115,0.12);
    --glass: rgba(255,255,255,0.6);
    --btn-h:50px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  *{box-sizing:border-box}
body, html {
    margin: 0;
    padding:0;
}
div.boxbody {
    margin: 0px;
    /*min-height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
   
    color: #111827;
    padding: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.01);
    padding-bottom: 100px;
}
.trans-success {
    background: linear-gradient(180deg, #e9fff2 0%, #f5fbf6 40%);
}
.trans-unsuccess {
    background: linear-gradient(180deg, #ffe9e9 0%, #fff5f5 40%);
}
.pos-abs-box div {
    line-height: 20px;
}
.pos-abs-box {
    width: 100%;
    margin: 100px 20px 20px 20px;
    max-width: 820px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98));
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(15,23,42,0.08);
    overflow: hidden;
    position: relative;
}
.pt-anim-gif {
    position: absolute;
    object-fit: cover;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pt-anim-gif {
    width:100%
}
/* Success card */
.Pymnt-success {
    padding: 20px;
    margin-top: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5));
    border-radius: 12px;
    transition: all .28s ease;
}

  #statusImg{ width:120px; height:120px; object-fit:contain; margin-bottom:10px; }

  .fs-28{ font-size:28px; }
  .fs-20{ font-size:20px; }
  .font-weight-600{ font-weight:600; }
  .font-weight-400{ font-weight:400; }

.trans-success .text-color-pay{ color:var(--accent); }
.trans-unsuccess .text-color-pay {color: rgba(255, 0,0,0.8) !important}
 .text-color-pay1{
    display:inline-block;
    padding:8px 20px;
    border-radius:999px;
  }
  
.trans-success .text-color-pay1{
    /* background: linear-gradient(90deg, rgba(43,182,115,0.12), rgba(14,165,132,0.08)); */
    background: linear-gradient(90deg, rgba(0,255,0,0.2), rgba(0,255,0,0.1),rgba(0,255,0,0.2));
}
.trans-unsuccess .text-color-pay1{
    background: linear-gradient(90deg, rgba(255,0,0,0.2), rgba(255,0,0,0.1),rgba(255,0,0,0.2));
}

  .text-color-pay1{ color:var(--accent-2); }
  .text-body{ color:var(--muted); }
  .text-black{ color:#0f172a; }

  .m-t-15{ margin-top:15px; }
  .m-t-2{ margin-top:8px; }
  .m-t-12{ margin-top:12px; }
  .m-t-20{ margin-top:20px; }

  .d-flex{ display:flex; }
  .justify-content-center{ justify-content:center; }
  .justify-content-around{ justify-content:space-around; }
  .text-center{ text-align:center; }
  .w-100{ width:100%; }

  .tree-text-details{ gap:12px; padding:10px 16px; border-radius:8px; align-items:center; margin:6px 0; }
  .tree-td1{ color:var(--muted); font-weight:600; width:45%; text-align:left; }
  .tree-td2{ text-align:right; width:55%; font-weight:600; color:#111827; }

 

  .btn{
    border:0;
    outline:0;
    cursor:pointer;
    border-radius:12px;
    padding:0 18px;
    height:var(--btn-h);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:600;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  }

  .return-btn{    
    color:white;
    min-width:240px;
    font-size: 15px !important;
  }
.trans-success .return-btn{    
  background:linear-gradient(90deg,var(--accent), var(--accent-2),var(--accent));
}
.trans-unsuccess .return-btn{    
  background:linear-gradient(90deg,rgba(255,0,0,1), rgba(255,0,0,0.8) ,rgba(255,0,0,1));
}
  .certificate-dwnload{
    background:transparent;
    border:1px solid rgba(15,23,42,0.06);
    min-width:64px;
    padding:8px;
  }

  

  /* simple fade animations */
  .fade-in{ animation:fadeIn .45s ease both; }
  .pulse {
    animation: pulse 1.9s ease-in-out infinite;
    transform-origin:center;
  }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
  @keyframes pulse{
    0%{ transform:scale(1); filter:brightness(1); }
    50%{ transform:scale(1.03); filter:brightness(1.02); }
    100%{ transform:scale(1); filter:brightness(1); }
  }

  /* hidden */
  .hidden{ display:none !important; }


/* Circle Animation */
.success-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px solid #2bb673;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    position: relative;
    animation: pop 0.5s ease forwards;
}

/* Tick Drawing Animation */
.checkmark {
    width: 60px;
    height: 30px;
    border-left: 6px solid #2bb673;
    border-bottom: 6px solid #2bb673;
    transform: rotate(-45deg) scale(0);
    opacity: 0;
    animation: draw 0.6s ease forwards 0.4s;
}


/* Animations */
@keyframes pop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes draw {
    0% {
        transform: rotate(-45deg) scale(0);
        opacity: 0;
    }

    100% {
        transform: rotate(-45deg) scale(1);
        opacity: 1;
    }
}

.tras-head {
    color: darkgreen;
    font-size: 30px;
    font-weight: 700;
    line-height: 37px !important;
    text-align: center;
    justify-content: center
}
.trans-unsuccess .tras-head {
    color: red;
}
    .tf-logo{
    margin-bottom:20px;
}

/*Failed Status*/
.fail-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px solid #e11d48;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    position: relative;
    animation: pop 0.5s ease forwards;
}
.cross {
    position: relative;
    width: 60px;
    height: 60px;
    transform: scale(0);
    opacity: 0;
    animation: showCross 0.5s ease forwards 0.4s;
}

    .cross::before,
    .cross::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 60px;
        background: #e11d48;
        border-radius: 3px;
        transform-origin: center;
    }

    .cross::before {
        transform: translate(-50%, -50%) rotate(45deg) scaleY(0);
        animation: draw1 0.3s ease forwards 0.6s;
    }

    .cross::after {
        transform: translate(-50%, -50%) rotate(-45deg) scaleY(0);
        animation: draw2 0.3s ease forwards 0.8s;
    }
/* Animations */
@keyframes pop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes showCross {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes draw1 {
    to {
        transform: translate(-50%, -50%) rotate(45deg) scaleY(1);
    }
}

@keyframes draw2 {
    to {
        transform: translate(-50%, -50%) rotate(-45deg) scaleY(1);
    }
}
/*Failed Status*/


/* Hide all by default */
#transuccessstatusTitle,
#tranunsuccessstatusTitle,
#transuccessstatusicon,
#tranunsuccessstatusicon {
    display: none;
}

/* Show only in success */
.trans-success #transuccessstatusTitle,
.trans-success #transuccessstatusicon {
    display: flex; /* or flex if needed */
}

/* Show only in unsuccess */
.trans-unsuccess #tranunsuccessstatusTitle,
.trans-unsuccess #tranunsuccessstatusicon {
    display: flex; /* or flex if needed */
}



/* small screens */
@media (max-width:520px) {
    .pos-abs-box {
        border-radius: 12px;
        padding: 12px;
    }

    .fs-28 {
        font-size: 20px;
    }

    .fs-20 {
        font-size: 16px;
    }

    .tree-td1, .tree-td2 {
        width: 100%;
        text-align: left;
        display: block;
    }

    .d-flex.justify-content-around {
        flex-direction: column;
        gap: 10px;
    }

    .return-btn {
        min-width: 100%;
    }

    .tras-head {
        font-size: 25px
    }
    .pos-abs-box {
        margin: 20px 20px 20px 20px;
    }
    }