/*
====================================================
SK ACADEMY
PAYMENT TRAINING
====================================================
*/

.payment-training{

    background:#f8f4ee;

    padding:60px 0 80px;

    min-height:100vh;

}

.payment-grid{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:35px;

    align-items:start;

}

/*==================================================
SIDEBAR
==================================================*/

.payment-sidebar{

    position:sticky;

    top:110px;

}

/*==================================================
CONTENT
==================================================*/

.payment-content{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*==================================================
CARD
==================================================*/

.payment-card{

    background:#fff;

    border-radius:22px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    overflow:hidden;

}

.payment-card-header{

    padding:25px 30px;

    border-bottom:1px solid #ececec;

}

.payment-card-body{

    padding:30px;

}

.payment-card-title{

    font-size:26px;

    color:#17304f;

    font-weight:700;

    margin:0;

}

/*==================================================
SUMMARY
==================================================*/

.payment-summary{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.payment-cover{

    padding:30px;

    text-align:center;

    background:#fff;

    height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.payment-cover img{

    width:auto;

    max-width:240px;

    max-height:220px;

    height:100%;

    object-fit:contain;

    border-radius:18px;

    display:block;

    margin:auto;

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

}

.payment-info{

    padding:30px;

}

.payment-title{

    font-size:28px;

    line-height:1.35;

    color:#17304f;

    margin-bottom:12px;

}

.payment-subtitle{

    color:#666;

    line-height:1.7;

    margin-bottom:25px;

}

.payment-meta{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.payment-meta-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #ececec;

    padding-bottom:12px;

}

.payment-meta-item:last-child{

    border:none;

}

/*==================================================
PRICE
==================================================*/

.payment-price{

    background:#fbfaf6;

    padding:30px;

    border-top:1px solid #ececec;

}

.payment-price-label{

    font-size:13px;

    color:#999;

    text-transform:uppercase;

    letter-spacing:2px;

}

.payment-price-old{

    font-size:18px;

    color:#999;

    text-decoration:line-through;

    margin-top:10px;

}

.payment-price-current{

    font-size:42px;

    font-weight:800;

    color:#17304f;

    margin-top:10px;

}

.payment-saving{

    display:inline-block;

    margin-top:15px;

    background:#e8f6eb;

    color:#188038;

    padding:8px 16px;

    border-radius:30px;

    font-weight:700;

}

/*==================================================
PAYMENT METHOD
==================================================*/

.payment-method{

    background:#fff;

    border-radius:22px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    padding:30px;

}

.payment-method h3{

    margin-top:0;

    color:#17304f;

}

.bank-card{

    border:1px solid #ececec;

    border-radius:16px;

    padding:20px;

    margin-top:20px;

    transition:.3s;

}

.bank-card:hover{

    border-color:#c8a96b;

    transform:translateY(-3px);

}

.bank-name{

    font-size:20px;

    font-weight:700;

    color:#17304f;

}

.bank-number{

    margin-top:10px;

    font-size:26px;

    letter-spacing:2px;

    font-weight:700;

}

.bank-owner{

    margin-top:10px;

    color:#666;

}

/*==================================================
UPLOAD
==================================================*/

.payment-upload{

    background:#fff;

    border-radius:22px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    padding:30px;

}

.payment-upload input[type=file]{

    width:100%;

    border:2px dashed #d8d8d8;

    padding:30px;

    border-radius:18px;

    background:#fafafa;

}

/*==================================================
HELP
==================================================*/

.payment-help{

    background:#17304f;

    color:#fff;

    border-radius:22px;

    padding:30px;

}

.payment-help h3{

    margin-top:0;

    color:#fff;

}

.payment-help a{

    color:#fff;

    text-decoration:none;

}

/*==================================================
BUTTON
==================================================*/

.btn-payment{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 35px;

    border-radius:14px;

    background:#17304f;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-payment:hover{

    background:#10243d;

    transform:translateY(-2px);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.payment-grid{

grid-template-columns:1fr;

}

.payment-sidebar{

position:relative;

top:auto;

}

.payment-cover img{

max-width:220px;

max-height:200px;

}

.payment-price-current{

font-size:34px;

}

}

@media(max-width:576px){

.payment-training{

padding:25px 15px 40px;

}

.payment-card-body,

.payment-info,

.payment-method,

.payment-upload,

.payment-help{

padding:22px;

}

.payment-title{

font-size:24px;

}

.payment-price-current{

font-size:30px;

}

.bank-number{

font-size:20px;

}

}

/*==================================================
PAYMENT PROGRESS
==================================================*/

.payment-progress{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:40px;

    padding:25px 30px;

    background:#fff;

    border-radius:22px;

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

}

.progress-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    flex:0 0 auto;

}

.progress-circle{

    width:54px;

    height:54px;

    border-radius:50%;

    border:2px solid #d9d9d9;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    font-weight:700;

    font-size:18px;

    color:#999;

    transition:.3s;

}

.progress-item.done .progress-circle{

    background:#17304f;

    border-color:#17304f;

    color:#fff;

}

.progress-item.active .progress-circle{

    background:#c8a96b;

    border-color:#c8a96b;

    color:#fff;

}

.progress-label{

    font-size:14px;

    font-weight:600;

    color:#555;

    text-align:center;

}

.progress-line{

    flex:1;

    height:3px;

    background:#ddd;

    margin:0 15px;

    border-radius:30px;

}

.progress-line.active{

    background:#c8a96b;

}

@media(max-width:768px){

.payment-progress{

flex-wrap:wrap;

gap:20px;

}

.progress-line{

display:none;

}

.progress-item{

width:48%;

}

}

/*==================================================
STATUS
==================================================*/

.payment-status{

display:inline-block;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}

.payment-status.pending{

background:#fff3cd;

color:#856404;

}

.payment-status.warning{

background:#ffe9b3;

color:#8a6500;

}

.payment-status.success{

background:#d4edda;

color:#155724;

}

.payment-status.danger{

background:#f8d7da;

color:#721c24;

}

/*==================================================
INVOICE
==================================================*/

.payment-invoice{

padding:25px 30px;

border-top:1px solid #ececec;

background:#fff;

}

/*==================================================
FEATURES
==================================================*/

.payment-features{

padding:30px;

background:#fbfaf6;

border-top:1px solid #ececec;

display:flex;

flex-direction:column;

gap:14px;

}

.payment-feature{

font-size:15px;

font-weight:500;

color:#444;

}

/*==================================================
UPLOAD CARD
==================================================*/

.payment-upload-card{

margin-top:30px;

}

.payment-card-desc{

margin-top:8px;

color:#666;

line-height:1.7;

}

.payment-upload-form{

margin-top:20px;

}

.upload-area{

display:block;

border:2px dashed #c8a96b;

border-radius:20px;

background:#fcfbf8;

padding:45px 25px;

text-align:center;

cursor:pointer;

transition:.3s;

}

.upload-area:hover{

background:#fffdf7;

border-color:#17304f;

}

.upload-area input{

display:none;

}

.upload-icon{

font-size:54px;

margin-bottom:20px;

}

.upload-content h4{

margin:0;

font-size:22px;

color:#17304f;

}

.upload-content p{

margin:12px 0 5px;

color:#666;

}

.upload-content small{

color:#999;

}

.upload-preview{

margin-top:20px;

padding:15px 20px;

border-radius:12px;

background:#f8f8f8;

border:1px solid #ececec;

font-size:15px;

}

.upload-submit{

width:100%;

margin-top:25px;

height:60px;

font-size:18px;

}

/*==================================================
PAYMENT HELP
==================================================*/

.payment-help-card{

margin-top:30px;

}

.help-item{

display:flex;

align-items:flex-start;

gap:18px;

padding:18px 0;

border-bottom:1px solid #ececec;

}

.help-item:last-child{

border-bottom:none;

}

.help-icon{

width:54px;

height:54px;

border-radius:50%;

background:#f8f4ee;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

flex-shrink:0;

}

.help-content{

flex:1;

}

.help-content strong{

display:block;

font-size:16px;

color:#17304f;

margin-bottom:6px;

}

.help-content p{

margin:0;

line-height:1.7;

color:#666;

}

.help-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 20px;

border-radius:12px;

background:#25D366;

color:#fff;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.help-button:hover{

background:#1fa855;

color:#fff;

}

.payment-trust{

margin-top:30px;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.trust-item{

background:#fbfaf6;

padding:15px;

border-radius:14px;

text-align:center;

font-size:14px;

font-weight:600;

color:#17304f;

border:1px solid #ece5d4;

}

@media(max-width:576px){

.payment-trust{

grid-template-columns:1fr;

}

.help-item{

flex-direction:column;

}

.help-button{

width:100%;

}

}

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

.payment-success-page{

    background:#f8f4ee;

    padding:70px 0;

    min-height:100vh;

}

.payment-success-wrapper{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:380px 1fr;

    gap:35px;

    align-items:start;

}

.payment-success-card{

    background:#fff;

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

    box-shadow:0 20px 55px rgba(0,0,0,.08);

}

.success-icon{

    width:110px;

    height:110px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#e8f6eb;

    color:#188038;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:60px;

}

.payment-success-card h1{

    margin:0 0 18px;

    color:#17304f;

    font-size:32px;

    line-height:1.35;

}

.success-description{

    color:#666;

    line-height:1.8;

    font-size:16px;

}

.success-status{

    margin-top:35px;

}

.status-badge{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.status-badge.waiting{

    background:#fff3cd;

    color:#856404;

}

.status-badge.success{

    background:#d4edda;

    color:#155724;

}

.status-badge.danger{

    background:#f8d7da;

    color:#721c24;

}

/*
====================================================
INFO CARD
====================================================
*/

.payment-success-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-card{

    background:#fff;

    border-radius:22px;

    padding:32px;

    box-shadow:0 20px 55px rgba(0,0,0,.08);

}

.info-card h3{

    margin:0 0 25px;

    color:#17304f;

    font-size:24px;

}

.info-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #ececec;

}

.info-item:last-child{

    border-bottom:none;

}

.info-item span{

    color:#777;

}

.info-item strong{

    color:#17304f;

    font-weight:700;

}

.text-warning{

    color:#d97706 !important;

}

/*
====================================================
NEXT STEP
====================================================
*/

.next-step-list{

    margin:0;

    padding-left:20px;

}

.next-step-list li{

    margin-bottom:16px;

    line-height:1.8;

    color:#555;

}

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

.success-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn-payment{

    flex:1;

    min-width:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    height:58px;

    border-radius:14px;

    background:#17304f;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-payment:hover{

    background:#10243d;

    color:#fff;

    transform:translateY(-2px);

}

.btn-payment-outline{

    flex:1;

    min-width:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    height:58px;

    border-radius:14px;

    border:2px solid #17304f;

    color:#17304f;

    background:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-payment-outline:hover{

    background:#17304f;

    color:#fff;

}

/*
====================================================
RESPONSIVE
====================================================
*/

@media (max-width:991px){

.payment-success-wrapper{

grid-template-columns:1fr;

}

.success-buttons{

flex-direction:column;

}

.btn-payment,

.btn-payment-outline{

min-width:100%;

}

}

@media (max-width:576px){

.payment-success-page{

padding:35px 15px;

}

.payment-success-card{

padding:30px 22px;

}

.info-card{

padding:24px;

}

.success-icon{

width:90px;

height:90px;

font-size:46px;

}

.payment-success-card h1{

font-size:26px;

}

.info-card h3{

font-size:20px;

}

.info-item{

flex-direction:column;

align-items:flex-start;

gap:6px;

}

}

/*
====================================================
PAYMENT STATUS
====================================================
*/

.payment-status-page{

background:#f8f4ee;

padding:70px 0;

min-height:100vh;

}

.payment-status-wrapper{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:320px 1fr;

gap:35px;

align-items:start;

}

.payment-status-card{

background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.status-icon{

font-size:70px;

margin-bottom:25px;

}

.payment-status-card h1{

margin:0 0 20px;

font-size:30px;

color:#17304f;

}

.payment-status-detail{

display:flex;

flex-direction:column;

gap:25px;

}

@media(max-width:991px){

.payment-status-wrapper{

grid-template-columns:1fr;

}

}