/*=========================================
SELL ASSET - STEP 1
=========================================*/

.sell-step{
    width:100%;
    padding:70px 20px;
    background:#f6f7f9;
    min-height:100vh;
}

.sell-container{
    max-width:980px;
    margin:auto;
}

.sell-header{
    text-align:center;
    margin-bottom:35px;
}

.step-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border-radius:40px;
    background:#e7f5eb;
    color:#0d6b3d;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:18px;
}

.sell-header h1{
    font-size:42px;
    font-weight:800;
    color:#17362f;
    margin-bottom:12px;
    line-height:1.2;
}

.sell-header p{
    max-width:620px;
    margin:auto;
    font-size:17px;
    color:#666;
    line-height:1.8;
}

/*============================
Progress
=============================*/

.progress-wrapper{
    margin:40px auto;
    position:relative;
}

.progress-line{
    width:100%;
    height:6px;
    background:#e3e3e3;
    border-radius:30px;
    overflow:hidden;
}

.progress-fill{
    width:20%;
    height:100%;
    background:#2ea44f;
    border-radius:30px;
}

.progress-steps{
    display:flex;
    justify-content:space-between;
    margin-top:-12px;
}

.progress-steps span{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#d9d9d9;
    border:4px solid #fff;
    box-shadow:0 0 0 2px #ddd;
}

.progress-steps span.active{
    background:#2ea44f;
    box-shadow:0 0 0 2px #2ea44f;
}

/*============================
Card
=============================*/

.sell-card{
    background:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.card-header{
    text-align:center;
    margin-bottom:35px;
}

.card-header h2{
    font-size:30px;
    color:#17362f;
    margin-bottom:8px;
}

.card-header p{
    color:#777;
    font-size:16px;
}

/*============================
Grid
=============================*/

.listing-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.full-width{
    grid-column:1/-1;
}

.listing-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
    border:2px solid #e6e6e6;
    border-radius:16px;
    cursor:pointer;
    transition:.35s;
    background:#fff;
}

.listing-card:hover{
    transform:translateY(-5px);
    border-color:#2ea44f;
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.listing-card.active{
    border-color:#2ea44f;
    background:#f1fbf4;
}

.listing-icon{
    width:62px;
    height:62px;
    border-radius:16px;
    background:#eef8f1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    color:#2ea44f;
    flex-shrink:0;
}

.listing-text{
    flex:1;
}

.listing-text h3{
    font-size:20px;
    color:#17362f;
    margin-bottom:6px;
}

.listing-text small{
    color:#777;
    font-size:14px;
    line-height:1.6;
}

.listing-check{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#e8e8e8;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:.3s;
}

.listing-card.active .listing-check{
    background:#2ea44f;
}

/*============================
Footer
=============================*/

.card-footer{
    margin-top:35px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #ececec;
    padding-top:25px;
}

.footer-left strong{
    display:block;
    color:#17362f;
    font-size:18px;
    margin-bottom:4px;
}

.footer-left span{
    color:#777;
    font-size:15px;
}

.continue-btn{
    border:none;
    outline:none;
    padding:15px 34px;
    border-radius:50px;
    background:#17362f;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.continue-btn i{
    margin-left:8px;
}

.continue-btn:hover{
    transform:translateY(-2px);
}

.continue-btn:disabled{
    background:#b8b8b8;
    cursor:not-allowed;
    transform:none;
}

/*============================
Responsive
=============================*/

@media(max-width:768px){

.sell-header h1{
    font-size:32px;
}

.sell-card{
    padding:25px;
}

.listing-grid{
    grid-template-columns:1fr;
}

.full-width{
    grid-column:auto;
}

.card-footer{
    flex-direction:column;
    gap:20px;
}

.continue-btn{
    width:100%;
}

}



/**/


/*=========================================
STEP 2
=========================================*/

.progress-fill.progress-step2{
    width:40%;
}

.progress-steps span.completed{
    background:#17362f;
    box-shadow:0 0 0 2px #17362f;
}

.category-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    min-height:92px;
    padding:18px 22px;
    border:1px solid #d9d4c7;
    border-radius:14px;
    background:#fffdfa;
    transition:.30s ease;
    cursor:pointer;
}

.category-card:hover{
    transform:translateY(-4px);
    border-color:#17362f;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.category-card.active{
    border-color:#17362f;
    background:#f7faf8;
}

.category-card .listing-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#f4f0e8;
    color:#17362f;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    flex-shrink:0;
}

.category-card.active .listing-icon{
    background:#17362f;
    color:#fff;
}

.category-card .listing-text{
    flex:1;
}

.category-card .listing-text h3{
    font-size:16px;
    color:#17362f;
    margin:0;
    font-weight:700;
    line-height:1.3;
}

.category-card .listing-text small{
    display:block;
    margin-top:4px;
    color:#7b7568;
    font-size:13px;
}

.category-card .listing-check{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#e9e5dc;
    display:flex;
    align-items:center;
    justify-content:center;
    color:transparent;
    transition:.30s;
}

.category-card.active .listing-check{
    background:#17362f;
    color:#fff;
}

.back-btn{
    background:none;
    border:none;
    color:#17362f;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
}

.back-btn:hover{
    color:#b57d2b;
}

#continueStep2{
    min-width:160px;
}

#continueStep2:disabled{
    opacity:.55;
    cursor:not-allowed;
}

@media(max-width:768px){

    #step2 .listing-grid{
        grid-template-columns:1fr;
    }

    #step2 .card-footer{
        flex-direction:column;
        gap:18px;
    }

    #step2 .back-btn,
    #step2 .continue-btn{
        width:100%;
        justify-content:center;
    }

}



/**/


/*=========================================
STEP 3 - CORE ASSET DETAILS
=========================================*/
/*=========================================
STEP 3 - CORE ASSET DETAILS
=========================================*/

.progress-fill.progress-step3{
    width:60%;
}

.required{
    color:#dc2626;
    margin-left:3px;
    font-weight:700;
}

.asset-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 24px;
    margin-top:35px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    display:flex;
    align-items:center;
    gap:3px;
    font-size:14px;
    font-weight:700;
    color:#17362f;
    margin-bottom:10px;
}

.form-group input,
.form-group select{

    width:100%;
    height:56px;

    border:1px solid #d9d4c8;

    border-radius:12px;

    background:#fff;

    padding:0 18px;

    font-size:15px;

    color:#17362f;

    transition:.30s ease;

    outline:none;

}

.form-group input::placeholder{
    color:#a0a0a0;
}

.form-group input:hover,
.form-group select:hover{
    border-color:#b9b2a2;
}

.form-group input:focus,
.form-group select:focus{

    border-color:#17362f;

    box-shadow:0 0 0 4px rgba(23,54,47,.08);

}

.form-group select{

    appearance:none;
    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2317362f' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    padding-right:50px;

}

.asset-form-grid .form-group:nth-last-child(-n+2){
    margin-bottom:10px;
}

#step3 .card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:40px;

    padding-top:28px;

    border-top:1px solid #ece6da;

}

#step3 .back-btn{

    border:none;

    background:transparent;

    color:#17362f;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.30s;

}

#step3 .back-btn:hover{
    color:#b88937;
}

#step3 .continue-btn{

    min-width:180px;

    height:54px;

    border-radius:50px;

}

#step3 .continue-btn i{
    margin-left:8px;
}

/*=========================
Responsive
==========================*/

@media(max-width:991px){

.asset-form-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

#step3 .sell-card{

    padding:28px 22px;

}

#step3 .card-header h2{

    font-size:28px;

}

#step3 .card-footer{

    flex-direction:column;

    gap:18px;

}

#step3 .back-btn,
#step3 .continue-btn{

    width:100%;

    justify-content:center;

}

}


/**/


/*=========================================
STEP 4 - INSPECTION, LOGISTICS & CONTACT
=========================================*/

.progress-fill.progress-step4{
    width:80%;
}

/* Card */

#step4 .sell-card{

    max-width:980px;

    margin:auto;

    background:#fff;

    border-radius:18px;

    padding:34px;

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

}

/* Header */

#step4 .card-header{

    margin-bottom:28px;

}

#step4 .card-header h2{

    font-size:34px;

    color:#17362f;

    margin-bottom:8px;

    font-weight:700;

}

#step4 .card-header p{

    font-size:15px;

    color:#777;

}

/* Form Grid */

#step4 .asset-form-grid{

    display:grid;

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

    gap:20px 24px;

}

/* Full Width */

#step4 .full-width{

    grid-column:1/-1;

}

/* Form Group */

#step4 .form-group{

    display:flex;

    flex-direction:column;

}

/* Label */

#step4 .form-group label{

    font-size:13px;

    font-weight:700;

    color:#17362f;

    margin-bottom:8px;

}

#step4 .form-group label small{

    color:#999;

    font-weight:500;

}

/* Inputs */

#step4 input,
#step4 select,
#step4 textarea{

    width:100%;

    border:1px solid #d8d5cb;

    border-radius:10px;

    background:#fff;

    font-size:14px;

    color:#17362f;

    transition:.30s;

    outline:none;

}

/* Input Height */

#step4 input,
#step4 select{

    height:52px;

    padding:0 16px;

}

/* Textarea */

#step4 textarea{

    padding:15px;

    resize:vertical;

    min-height:110px;

}

/* Focus */

#step4 input:focus,
#step4 select:focus,
#step4 textarea:focus{

    border-color:#17362f;

    box-shadow:0 0 0 4px rgba(23,54,47,.08);

}

/* Select Arrow */

#step4 select{

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2317362f' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 16px center;

    padding-right:42px;

}

/* Footer */

#step4 .card-footer{

    margin-top:34px;

    padding-top:24px;

    border-top:1px solid #ece6da;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* Back */

#step4 .back-btn{

    border:none;

    background:none;

    color:#17362f;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

}

#step4 .back-btn:hover{

    color:#b8862b;

}

/* Submit */

#step4 .continue-btn{

    min-width:180px;

    height:52px;

    border:none;

    border-radius:50px;

    background:#17362f;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

#step4 .continue-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(23,54,47,.25);

}

/* Responsive */

@media(max-width:991px){

#step4 .asset-form-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

#step4 .sell-card{

    padding:24px;

}

#step4 .card-header h2{

    font-size:28px;

}

#step4 .card-footer{

    flex-direction:column;

    gap:18px;

}

#step4 .back-btn,
#step4 .continue-btn{

    width:100%;

    justify-content:center;

}

}

/* Asset image upload */
#step3 .form-group input[type="file"] {
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid #d9d4c8;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: #17362f;
    cursor: pointer;
}

#step3 .form-group input[type="file"]::file-selector-button {
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-right: 12px;
    background: #17362f;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#step3 .form-group input[type="file"]::file-selector-button:hover {
    background: #0f2d27;
}

#step3 .form-group input[type="file"]:focus {
    outline: none;
    border-color: #17362f;
    box-shadow: 0 0 0 4px rgba(23, 54, 47, 0.08);
}

.locked-field {
    pointer-events: none;
    background-color: #f5f3ee !important;
    color: #6b6b6b !important;
    cursor: not-allowed;
}

#city[readonly] {
    background-color: #f5f3ee !important;
    color: #6b6b6b !important;
    cursor: not-allowed;
}

/* Asset account warning */
.asset-account-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid #ead9b5;
    border-radius: 14px;
    background: #fffaf0;
}

.asset-account-warning-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7e8c6;
    color: #b47b18;
    font-size: 16px;
}

.asset-account-warning-content {
    flex: 1;
}

.asset-account-warning-content h4 {
    margin: 0 0 6px;
    color: #17362f;
    font-size: 16px;
    font-weight: 700;
}

.asset-account-warning-content p {
    margin: 0 0 14px;
    color: #6d665a;
    font-size: 14px;
    line-height: 1.6;
}

.asset-account-warning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.asset-registration-btn,
.asset-switch-account-btn,
.asset-go-back-btn {
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: 0.25s ease;
}

.asset-registration-btn {
    border: 1px solid #17362f;
    background: #17362f;
    color: #fff;
}

.asset-registration-btn:hover {
    background: #0f2d27;
    color: #fff;
    transform: translateY(-1px);
}

.asset-switch-account-btn {
    border: 1px solid #b88937;
    background: #fff;
    color: #9a6a18;
}

.asset-switch-account-btn:hover {
    background: #fff5df;
    transform: translateY(-1px);
}

.asset-go-back-btn {
    border: 1px solid #d8d5cb;
    background: #fff;
    color: #17362f;
}

.asset-go-back-btn:hover {
    border-color: #17362f;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .asset-account-warning {
        flex-direction: column;
    }

    .asset-account-warning-actions {
        width: 100%;
        flex-direction: column;
    }

    .asset-registration-btn,
    .asset-switch-account-btn,
    .asset-go-back-btn {
        width: 100%;
        text-align: center;
    }
}