/*9Aug2025*/
.customSpaceSendParcel .table-responsive{ overflow: hidden;}
.addServiceCover{
    display: flex;
    max-width: 428px;
    width: 100%;
    align-items: center;
    gap: 10px;
}
.addServiceCover .btn{ width: 160px; margin-bottom: 0;}
.imptipboxCover{
    align-items: center;
    margin-bottom: 22px;
}
.imptipboxImg{
    display: flex;
    align-items: center;
    justify-content: center;
}
.imptipboxImg img{ 
    border-radius: 22px;
    border: 2px solid #e6e6e6;
    height: 150px;
} 
.popupFormating ul{ margin-bottom: 16px;}

.spPhone{ position: relative; width: 100%;}
.spPhone span{
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 17px;
    line-height: 17px;
}
.spPhone input{padding-left: 44px;}
/*9Aug2025 end*/


/*29July2025*/
.color-blue{ color:#0056b3;}
.custom-step-section{ /*display: none; display: block!important;*/}

.active{display: block;} 

.sendParcelPage .custom-stepper-edit-btn{ background: url(../images/arrow-down.png) no-repeat center; background-size: 18px auto;} 
.sendParcelPage .custom-stepper-edit-btn.arrow{ background: url(../images/arrow-up.png) no-repeat center; background-size: 18px auto;} 

.highlightBox{  
    background: #f0f8ff;  color: #0061b0;
    padding: 15px; text-align: left;
    border-radius: 20px;
    margin-bottom: 15px;
}
.highlightBox p{  color: #5a5e62;}

.popupScroll{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 521px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.dutyAudit th{ font-weight: 600!important;}
.detailsOk{ max-width: 100px; width: 100px;}

.smInput{ width: 60px!important; margin: 0 auto; text-align: center;}
.twct-box{}
.remove-addparcelno{height: 34px;}
.remove-addparcelno span{ line-height: 19px;}
.dwselect-cover{ display: flex; gap: 6px;}
.paySections .form-check label{font-weight: 600;}
.addActivityBtn{width: 122px;}

.sendParcelPage .remove-item-btn{
    width: 28px;
    height: 28px;
    padding: 2px;
}
.sendParcelPage .remove-item-btn span{
    line-height: 22px!important;
}
.sendParcelPage select{ padding: 0.375rem .44rem 0.375rem 0.75rem; }
.sendParcelPage .fw-bold, .sendParcelPage strong{ font-weight: 600!important;}

.sendParcelPage .table-bordered th, .sendParcelPage .table-bordered td{font-size: 14px;}
.sendParcelPage input, .sendParcelPage select{font-size: 14px; border-radius: 0.475rem;}
.country-dropdown .flags-dropdown{ border-top-right-radius: 0; border-bottom-right-radius: 0;}

@media (max-width: 1360px) {

}
@media (max-width: 991px) {
.auditFieldsWork{margin-top: 12px;}
.auditFieldsWork .col-md{
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.spTotal{ font-size: 13px;}
.parcelContent .table-responsive input{ width: 68px; min-width: 68px;}
.parcelContent .table-responsive select{ width: 96px; min-width:96px;}
.remove-addparcelno span{line-height: 23px!important;}
.dwselect-cover .btn{
    font-size: 12px;
    width: 92px;
    padding: 5px 8px !important;
    height: 36px;
}
.parcelContent .dutyAudit{ padding: 0;}
.spTotal .row > *{
    padding-left: 5px!important;
    padding-right: 5px!important;
}

}

@media (max-width: 767px) {
 .parcelTotalTable{ background: #f8f9fa;}
 .parcelTotalTable .col-md-6{ width: 100%;}   
 .totlPart div{ font-size: 15px!important;font-weight: 600;}
.ship-parcel-form-section th, .ship-parcel-form-section td {
    font-size: 12px;
}

.pdetails .pickdrop th,
.pdetails .pickdrop td{
        font-size: 12px;
}
.parcelContent .table-responsive input,
.parcelContent .table-responsive select{ font-size: 13px;}

.sendParcelPage .table-responsive .table-bordered td:last-child span{opacity: 1;}


}
@media (max-width: 480px) {
.addServiceCover select{ width: 250px;}
.addServiceCover .btn { width: 97px;}

.sendParcelPage > h2.ship-parcel-main-title{ padding-left: 10px; margin-top: 20px; margin-bottom: 0!important;}    
.pickdrop table tr th:first-child{}  
.sendParcelPage .remove-item-btn span{line-height: 19px !important;}
.ship-parcel-form-section th, .ship-parcel-form-section td{padding: 0.3rem 0.3rem; line-height: 15px;} 
.pdetails .pickdrop th,
.pdetails .pickdrop td{
       padding: 0.3rem 0.3rem;
               line-height: 15px;
}

.serviceChargeSect .row{ }
.spTotal{
    width: 552px;
    background: #fff;
    padding-left: 14px;
}
.spTotal .form-check-input{height: 17px;}

.customSpaceSendParcel{ padding: 0!important;}
.smInput{width: 50px !important; padding: 0.375rem 0.35rem;}

.custom-step-section label{font-size: 12px !important;}
.serviceChargeSect .row.py-2.border-bottom .col-4{width: 133px;}
.spTotal .col-4{ width: 133px;}
.spTotal .col-2{ width: 115px;}

.serviceChargeSect .col-2.text-center{width: 115px;}

.serviceMode.paySections-first .form-check .form-check-input{margin-top: 7px;}
.sendParcelPage select{padding: 0.375rem 2.25rem 0.375rem 0.75rem;}

 .sendParcelPage{padding: 0!important;}
.ship-parcel-section-title{border-radius: 0!important;}
.parcelContent{ margin-top: 15px;}
.parcel-dimension-row .close-parcel-dimension{top: 6px; width: 28px !important; height: 28px !important;}
.customSpaceSendParcel {
    padding: 5px 11px;
}
.sendParcelPage{ padding-bottom: 20px!important;}
.sendParcelPage .row > *{ font-size: 12px;}  
.sendParcelPage .table-bordered th, .sendParcelPage .table-bordered td{ font-size: 11px;}  
.sendParcelPage .col-1{ }
.parcelContent .table-responsive input, .parcelContent .table-responsive select { font-size: 12px!important; }
.addActivityBtn{ width: 99px; font-size: 12px;}
.ship-parcel-button{font-size: 12px;}
.aplyCouponSize .ship-parcel-button{ font-size: 13px;}
.addServiceCove .btn{ font-size: 12px;}

.ship-parcel-form-section .pdetails .cost-calculator-btn-outline-primary{}
.ship-parcel-form-section .pdetails .sendPTotal{}

.veryEmail{line-height: 25px;}
#add-service-btn{}

.addServiceCover .col-4{width:65%;}
.addServiceCover .col-3{width:35%;}


.form-control, .form-select {
    border-radius: 0.22rem;
}

.auditFieldsWork .col-md{
    flex: 0 0 50%;
    max-width: 50%;
}
}

@media (max-width: 375px) {
.sendParcelPage .row > *{ font-size: 11px;}  
}

/*29July2025 end*/


.difference-dimension{ display: none;}
.send-custom-duty{ display: none;}

.totalWetBox{ padding-left: 10px; float: right;}
.serviceMode{
    padding: 0.5rem;
    padding-bottom: 0;
    border-radius: 10px;
}


.search-email-by, .search-phone-by, .search-reseller-by{ display: none;}

.pmntDetails{ 
    margin-left: auto;
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
}
.pmnDiscount{ 
   background: #ceece1;
    padding: 5px 10px;
    border-radius: 4px;
    color: #424242;
}
.payableAmount{
    font-size: 20px;
    font-weight: 600;
    color: #04457a;
    margin-top: 5px;
}
.pmnLine span{ float: right;}

.toggleDiv {
    display: none;
}

.address-fields{ display: none;}
.showaddr{ display: flex;}

.pmnLine{margin-bottom: 12px;} 

.aplyCouponSize{ max-width: 400px;}

.paySections{ 

    border-bottom: 2px solid #ccc;
    padding: 0.5rem;
    padding-bottom: 0;
    background: #f4f4f4;
    border-radius: 10px;
}
.calcWeight{background: #0061b0!important; color:#fff!important;}

#canvas-wrap {
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
}
#canvas-wrap canvas {
  display: block;
}

.sendPTotal{
    width: 500px;
    max-width: 380px;
    float: right;
   /* border: 1px solid #f5f5f5;
    padding: 15px 25px;
    background: #fbfbfb;*/
    margin-top: -50px;
}
.pdetails .col-md-2{width: 15%;}
.pdetails .col-md-2.lastp{/*width: 19.8%;*/}

.empoyeeSection{}

.signcover{border: 1px solid #ced4da; border-radius: 6px; background: #fff; overflow: hidden;}

.vemailCover{
    position: relative;
    display: flex;
    align-items: center;
}
.vemailCover .ship-parcel-button{padding: 6px 28px;}
.veryEmail{ 
    position: absolute;
    right: 5px;
    top: 0;
    color: #fff;
    padding: 2px 10px;
    border-radius: 24px;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 28px;
    cursor: pointer;
}
.bgColorBlue{ background: #1d6abc;}
.bgColorGreen{ background: #35b184;}

.seltAddr{ display: flex; font-size: 13px; margin-top: 6px;}
#prohibitedItemsCarousel .carousel-item img.img-fluid{max-height: 300px;}
#prohibitedItemsCarousel .prohibited-items-box img{ margin-bottom: 3px !important;}
#signature-pad {
  display: block;
  touch-action: none;
  cursor: crosshair;
  border: 1px solid #424242;
}


.parcel-dimension-row{ position: relative;}
#parcelDimensionsContainer .parcel-dimension-row:first-child .remove-item-btn{ display: none;} 

.parcel-dimension-row .col-md-3{width: 24%;}
.parcel-dimension-row .close-parcel-dimension{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.parcel-dimension-row .close-parcel-dimension img{ width: 34px;}
.ship-parcel-form-section .seltrdBox{ width: 42px; text-align: center;}
.ship-parcel-form-section .seltrdBox .form-check{text-align: center; display: flex; justify-content: center;}    
.ship-parcel-form-section .seltrdBox .form-check-input[type=radio]{border-color: #b0b0b0;}
.btn span{font-size: 26px!important; line-height: normal; font-weight: 300;}


.ship-parcel-part-1 h2 {
    color: #0061b0;
}

.ship-parcel-section-title {
    background-color: #ececec;
    color: #919191;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
}
.ship-parcel-section-title.active {
    background-color: #0056b3;
    color: white;
}

.signature-box {
    border: 1px solid #ccc;
    height: 150px;
    margin-top: 10px;
}

.ship-parcel-form-section {
    background-color: white;
    padding: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}   

.ship-parcel-button {
    background: #0061b0;
    color: white;
    padding: 10px 28px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(32, 84, 147, 0.08);
    /*transition: background 0.2s, box-shadow 0.2s;*/
}

.ship-parcel-button:hover {
    background: linear-gradient(90deg, #0061b0 60%, #0d3d8a 100%);
    box-shadow: 0 4px 16px rgba(32, 84, 147, 0.13);

}

/* Step-based form sections */
/* .custom-step-section {
    display: none;
    animation: fadeInStep 0.4s;
} */
@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.custom-step-continue {
    min-width: 140px;
    margin-left: 8px;
    margin-top: 8px;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Step section spacing and responsive tweaks */
@media (max-width: 768px) {
    .ship-parcel-form-section {
        padding: 12px;
    }

    .custom-step-continue {
        width: 100%;
        margin-left: 0;
    }
}

/* Hide submit button except last step (handled by JS, but for safety) */
#ship-parcel-submit {
    min-width: 140px;
    margin-left: 8px;
    margin-top: 8px;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Stepper Navigation Styles */
.custom-stepper-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
    background: #f7fbff;
    border-radius: 8px;
    padding: 16px 12px 8px 12px;
    box-shadow: 0 2px 8px rgba(32, 84, 147, 0.04);
}

.custom-stepper-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e3eaf3;
    position: relative;
}

.custom-stepper-item:last-child {
    border-bottom: none;
}

.custom-stepper-index {
    background: #0061b0;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.custom-stepper-title {
    font-weight: 600;
    color: #0056b3;
    flex: 1 1 0%;
}

.custom-stepper-summary {
    color: #333;
    font-size: 0.98rem;
    flex: 2 1 0%;
    min-width: 80px;
    opacity: 0.8;
}

.custom-stepper-edit-btn {
    border-radius: 20px;
    padding: 2px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-left: 8px;
    cursor: pointer;
        height: 26px;
        border: 0;
            display: block !important;
}

.custom-stepper-edit-btn:hover {
    
}

@media (max-width: 768px) {
    .customSpaceSendParcel .table-responsive{    overflow-x: auto;}

    .custom-stepper-nav {
        padding: 8px 4px 4px 4px;
    }

    .custom-stepper-title,
    .custom-stepper-summary {
        font-size: 0.95rem;
    }

    .custom-stepper-index {
        width: 22px;
        height: 22px;
        font-size: 0.95rem;
    }
}

/* Hide all steps by default, JS will control visibility */
.custom-step-section {
    animation: fadeInStep 0.4s;
}



.country-dropdown {
    position: relative;
    display: inline-block;
    border-radius: 6px;
}

.flags-dropdown {
    padding: 10px 0 10px 5px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #eaeaea;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 90px;
}



#countryDisplay {
    margin-bottom: 8px;
    margin-top: 0;
    padding-left: 2px;
}


.payment-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.payment-option.active {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

.payment-option input {
    margin-right: 10px;
}

.payment-option label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.disabled-input {
    background-color: #f0f0f0 !important;
    pointer-events: none;
}



.prohibited-items-box {
    min-height: 80px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 10px;
    align-items: center;
    height: 100%;
}

@media (max-width: 576px) {
    .prohibited-items-box {
        min-height: 100px;
        font-size: 12px;
    }
}

.cost-calculator-btn-outline-primary.calcWeight {
    border: 0!important;
}

.cost-calculator-btn-outline-primary {
    background: #fff;
    color: #0061b0;
    border: 1px solid #0061b0;
}

.cost-calculator-btn-outline-primary:hover {
    background: linear-gradient(90deg, #0061b0 60%, #1f65d8 100%);
    color: #fff;
    /*border: none;*/
}


.prohibited-text{
    color: #0d3d8a;
    text-decoration: underline;
}