.pp-card img{

width:100%;

height:280px;

object-fit:cover;

}

.pp-view{

display:block;

margin-top:15px;

padding:12px;

background:#ff4b7d;

color:#fff;

text-align:center;

border-radius:8px;

transition:.3s;

}

.pp-view:hover{

background:#e03d6c;

}
/* ======================================
   Step 7 Upload Card
====================================== */

.pp-step-header{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    margin-bottom:25px;

}

.pp-upload-card{

    background:#fff;

    border:1px solid #eee;

    border-radius:16px;

    padding:25px;

}

.pp-upload-preview-card{

    background:#fff;

    border:1px solid #eee;

    border-radius:16px;

    padding:25px;

    text-align:center;

}
/* ======================================
   Step 8 Upload Preview Design
====================================== */

.pp-upload-preview-box{

    width:100%;

    height:340px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #eee;

    border-radius:12px;

    background:#fff;

    margin-bottom:20px;

    overflow:hidden;

}

.pp-upload-preview-box img{

    max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

    object-fit:contain;

}

.pp-preview-info{

    text-align:center;

    margin-bottom:20px;

}

.pp-preview-info h5{

    margin-bottom:8px;

    word-break:break-word;

}

.pp-preview-action{

    text-align:center;

}

/* ======================================
   Step 7 Upload Box
====================================== */

.pp-upload-box{

    border:2px dashed #e5e5e5;

    border-radius:16px;

    padding:30px;

    background:#fafafa;

}

.pp-upload-box:hover{

    border-color:#ff4f7a;

    background:#fff5f8;

}

.pp-upload-box input[type=file]{

    width:100%;

    margin-bottom:20px;

}

.pp-upload-note{

    margin-top:20px;

}

.pp-upload-note p{

    margin:8px 0;

    color:#666;

    font-size:14px;

}
/* ======================================
   Step 7 Upload Area
====================================== */

.pp-upload-area{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    cursor:pointer;

    border:2px dashed #ff4f7a;

    border-radius:16px;

    padding:50px 20px;

    background:#fff8fa;

    transition:.3s;

}

.pp-upload-area:hover{

    background:#fff0f4;

}

.pp-upload-icon{

    font-size:55px;

    margin-bottom:15px;

}

.pp-upload-area h4{

    margin:10px 0;

}

.pp-upload-area p{

    margin:5px 0;

    color:#666;

}

.pp-upload-area small{

    color:#999;

}