/* ==========================================================
   WTW PAYMENT SUCCESS
========================================================== */

body {

    background: #f4f7fb;

}

.wtw-success-page {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 20px;

}

.wtw-success-card {

    width: 100%;

    max-width: 760px;

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 12px 40px rgba(0,0,0,.08);

}

/* ==========================================================
   HEADER
========================================================== */

.wtw-success-header {

    text-align: center;

    padding: 45px 40px;

    border-bottom: 1px solid #edf1f6;

}

.wtw-logo{

    width:170px;

    height:auto;

    margin-bottom:30px;

}

.wtw-success-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: #2fb36f;

    color: white;

    font-size: 48px;

    font-weight: bold;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow:

        0 8px 25px rgba(47,179,111,.35);

}

.wtw-success-header h1{

    margin:0;

    font-size:36px;

    font-weight:700;

    color:#17345d;

}

.wtw-success-header p{

    margin-top:18px;

    color:#677587;

    font-size:17px;

    line-height:1.7;

}

.wtw-success-message{

    max-width:500px;

    margin:15px auto 0;

}

.wtw-reference{

    margin-top:28px;

    font-size:14px;

    color:#8895a7;

}

.wtw-reference strong{

    display:block;

    margin-top:6px;

    font-size:15px;

    color:#17345d;

    font-weight:600;

}

/* ==========================================================
   AMOUNT
========================================================== */

.wtw-amount-section {

    text-align: center;

    padding: 45px 20px;

    border-bottom: 1px solid #edf1f6;

}

.wtw-total{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:10px;

}

.wtw-currency{

    font-size:24px;

    font-weight:600;

    color:#5b6777;

}

.wtw-amount{

    font-size:58px;

    font-weight:700;

    line-height:1;

    color:#16325c;

}

/* ==========================================================
   DETAILS
========================================================== */

.wtw-section {

    padding: 40px;

}

.wtw-section h2 {

    margin: 0 0 25px;

    color: #16325c;

    font-size: 20px;

}

.wtw-page-type{

    display:block;

    margin-top:30px;

    margin-bottom:10px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:#6d7b8c;

    text-transform:uppercase;

}

.wtw-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 0;

    border-bottom: 1px solid #edf1f6;

}

.wtw-row:last-child {

    border-bottom: none;

}

.wtw-row span {

    color: #6b7584;

}

.wtw-row strong {

    color: #16325c;

    text-align: right;

}

.wtw-status {

    color: #2fb36f !important;

}

/* ==========================================================
   BUTTONS
========================================================== */

.wtw-actions {

    display: flex;

    justify-content: center;

    gap: 20px;

    padding: 10px 40px 50px;

    flex-wrap: wrap;

}

.wtw-button {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-width: 220px;

    padding: 15px 28px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 600;

    transition: .25s;

}

.wtw-button-primary {

    background: #0057b8;

    color: white;

}

.wtw-button-primary:hover {

    background: #00408a;

    color: white;

}

.wtw-button-secondary {

    border: 2px solid #d8dde6;

    color: #16325c;

    background: white;

}

.wtw-button-secondary:hover {

    background: #f7f9fc;

}

.wtw-status-badge{

    display:inline-block;

    background:#e8f8ef;

    color:#1b8f50;

    padding:8px 18px;

    border-radius:999px;

    font-weight:600;

    font-size:14px;

}

.wtw-divider{

    border:none;

    height:1px;

    background:#edf1f6;

    margin:0 40px;

}


/* ==========================================================
   PAYMENT FAILED
========================================================== */

.wtw-failed-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: #dc3545;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow:
        0 8px 25px rgba(220,53,69,.35);

}

.wtw-failed-icon svg {

    width: 42px;

    height: 42px;

}

.wtw-failed-message {

    max-width: 520px;

    margin: 18px auto 0;

    color: #6f7b8a;

    line-height: 1.7;

}

.wtw-alert {

    margin: 35px 40px;

    padding: 20px 24px;

    background: #fff5f5;

    border: 1px solid #ffd3d3;

    border-left: 5px solid #dc3545;

    border-radius: 10px;

    color: #6b2128;

    line-height: 1.7;

}

.wtw-alert strong {

    display: block;

    margin-bottom: 8px;

    color: #b42318;

    font-size: 15px;

}

.wtw-failed-reasons {

    margin: 25px 40px;

    padding: 0;

    list-style: none;

}

.wtw-failed-reasons li {

    padding: 12px 0;

    border-bottom: 1px solid #edf1f6;

    color: #677587;

}

.wtw-failed-reasons li:last-child {

    border-bottom: none;

}

.wtw-failed-reasons li::before {

    content: "•";

    color: #dc3545;

    font-weight: bold;

    margin-right: 12px;

}

.wtw-try-again {

    background: #dc3545;

    color: #fff;

}

.wtw-try-again:hover {

    background: #bb2d3b;

    color: #fff;

}
/* ==========================================================
   FOOTER
========================================================== */

.wtw-footer{

    text-align: center;

    padding: 35px;

    color: #8a96a5;

    font-size: 14px;

    border-top: 1px solid #edf1f6;

    line-height: 1.7;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .wtw-success-card{

        border-radius:14px;

    }

    .wtw-success-header{

        padding:35px 25px;

    }

    .wtw-success-header h1{

        font-size:28px;

    }

    .wtw-amount{

        font-size:42px;

    }

    .wtw-section{

        padding:25px;

    }

    .wtw-row{

        display:block;

    }

    .wtw-row strong{

        display:block;

        margin-top:8px;

        text-align:left;

    }

}