/* =========================================
   CASHFREE PAYMENT RESULT
   ========================================= */

#ccf-status-box {
    width: 100%;
    max-width: 680px;
    margin: 152px auto; 
    box-sizing: border-box;
}

#ccf-status-box .ccf-result {
    background: #ffffff !important;
    color: #1f2937 !important;
    padding: 45px 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15) !important;
    text-align: center !important;
    box-sizing: border-box;
}

/* SUCCESS */

#ccf-status-box .ccf-success {
    border-top: 6px solid #16a34a !important;
}

#ccf-status-box .ccf-success h2 {
    color: #15803d !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 10px 0 10px !important;
}

#ccf-status-box .ccf-success p {
    color: #4b5563 !important;
    font-size: 16px !important;
    margin-bottom: 30px !important;
}

/* FAILED */

#ccf-status-box .ccf-failed {
    border-top: 6px solid #dc2626 !important;
}

#ccf-status-box .ccf-failed h2 {
    color: #dc2626 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
}

#ccf-status-box .ccf-failed p {
    color: #4b5563 !important;
    font-size: 16px !important;
}

/* ICON */

#ccf-status-box .ccf-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
}

#ccf-status-box .ccf-success .ccf-icon {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

#ccf-status-box .ccf-failed .ccf-icon {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* DETAILS */

#ccf-status-box .ccf-details {
    margin-top: 25px !important;
    text-align: left !important;
    border-top: 1px solid #e5e7eb !important;
}

#ccf-status-box .ccf-details > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#ccf-status-box .ccf-details strong {
    color: #374151 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

#ccf-status-box .ccf-details span {
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: right !important;
    word-break: break-word;
}

/* STATUS */

#ccf-status-box .ccf-success .ccf-details > div:last-child span {
    color: #16a34a !important;
}

#ccf-status-box .ccf-failed .ccf-details > div:last-child span {
    color: #dc2626 !important;
}

/* TRY AGAIN */

#ccf-status-box .ccf-button {
    display: inline-block !important;
    margin-top: 30px !important;
    padding: 13px 28px !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

#ccf-status-box .ccf-button:hover {
    background: #d97706 !important;
    color: #ffffff !important;
}

/* PENDING */

#ccf-status-box .ccf-pending {
    border-top: 6px solid #f59e0b !important;
}

#ccf-status-box .ccf-pending h2 {
    color: #d97706 !important;
}

#ccf-status-box .ccf-pending .ccf-icon {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

/* MOBILE */

@media (max-width: 600px) {

    #ccf-status-box {
        margin: 50px 15px;
        width: auto;
    }

    #ccf-status-box .ccf-result {
        padding: 30px 20px !important;
    }

    #ccf-status-box .ccf-result h2 {
        font-size: 26px !important;
    }

    #ccf-status-box .ccf-details > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    #ccf-status-box .ccf-details span {
        text-align: left !important;
    }
}