.step-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.875rem;
    /* 30px */
    position: relative;
}

.step-progress::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    /* 20px */
    left: 0;
    right: 0;
    height: 0.125rem;
    /* 2px */
    background: #dee2e6;
    z-index: 1;
}

.step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    background: #fff;
    border: 0.125rem solid #dee2e6;
    /* 2px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.625rem;
    /* 10px */
    font-weight: bold;
    transition: all 0.3s ease;
}

.step.active .step-circle {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.step.completed .step-circle {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.step-label {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    color: #6c757d;
}

.step.active .step-label {
    color: #007bff;
}

.step.completed .step-label {
    color: #28a745;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.quote-box {
    background: #f8f9fa;
    border-radius: 0.625rem;
    /* 10px */
    padding: 1.25rem;
    /* 20px */
    height: 100%;
}

.api-response {
    background: white;
    border-radius: 0.5rem;
    /* 8px */
    padding: 0.9375rem;
    /* 15px */
    margin-top: 1.25rem;
    /* 20px */
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);
    /* 0 2px 4px */
}

/*
.form-section {
    background: white;
    border-radius: 0.625rem;
    padding: 1.875rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    margin-bottom: 1.25rem;
}

.btn-action {
    min-width: 7.5rem;
}
.selection .select2-selection--multiple {
    border: 0;
    border-radius: 0;
    border-bottom: solid #444 0.0625rem;
}
/* table design start */
.table-head-wp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-search {
    position: relative;
    max-width: 25rem;
    flex: 1 1 18.75rem;
    /* 300px */
    width: 100%;
}

.table-search span {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-gray);
    font-size: 1.35rem;
    pointer-events: none;
}

.table-search span svg {
    width: 1.438rem;
    height: auto;
}

.table-search input {
    width: 100%;
    color: var(--light-gray);
    padding-left: 3rem;
    border-radius: 0.5rem;
    background: var(--white-smoke);
    border: 0.0625rem solid var(--border-color);
    height: 3.125rem;
    font-size: 1.15rem;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.table-search input::placeholder {
    color: var(--light-gray);
}

.table-btns {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.table-btns button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    height: 2.5rem;
    border-radius: 5.625rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}

/* Button Styles */
.table-btns button.all-btn {
    background: transparent;
    border: 0.0625rem solid #504949;
    color: #504949;
}

.table-btns button.all-btn.active-btn {
    background: #504949;
    color: #fff;
}

.table-btns button.pending-btn {
    color: #ff9800;
    border: 0.0625rem solid #ff9800;
    background: transparent;
}

.table-btns button.pending-btn.active-btn {
    background: #ff9800;
    color: #fff;
}

.table-btns button.cancel-btn {
    color: #e53e3e;
    border: 0.0625rem solid #e53e3e;
    background: transparent;
}

.table-btns button.cancel-btn.active-btn {
    background: #e53e3e;
    color: #fff;
}

.table-btns button.approve-btn {
    color: #0067f1;
    border: 0.0625rem solid #0067f1;
    background: transparent;
}

.table-btns button.approve-btn.active-btn {
    background: #0067f1;
    color: #fff;
}

.table-btns button.confirm-btn {
    color: #14aa3c;
    border: 0.0625rem solid #14aa3c;
    background: transparent;
}

.table-btns button.confirm-btn.active-btn {
    background: #14aa3c;
    color: #fff;
}

.common-table .small,
.common-table small {
    font-size: 1rem;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .table-head-wp {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .table-search {
        margin-inline: auto;
        margin-bottom: 0.7rem;
        flex: auto;
    }

    .table-btns {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .table-head-wp {
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .table-search input {
        font-size: 1rem;
        height: 2.5rem;
    }

    .table-btns button {
        font-size: 0.95rem;
        min-width: 5rem;
        height: 2rem;
        padding: 0 0.5rem;
    }

    .table-btns {
        gap: 0.3rem;
    }
}

.common-table {
    box-shadow: 0px 0.21875rem 0.34375rem 0px #00000005;
    /* 3.5px 5.5px */
    padding: 1.25rem;
    border: 0;
    border-radius: 0.938rem;
    overflow-x: auto;
}

.common-table div.dt-container div.dt-layout-row:not(:last-child) {
    margin: 0 0 1.25rem !important;
}

.common-table .table {
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    /* 2px 5px */
    border-radius: 0.375rem;
    min-width: 50rem;
    /* 800px */
}

.common-table .table>thead th:first-child {
    border-top-left-radius: 0.375rem;
}

.common-table .table>thead th:last-child {
    border-top-right-radius: 0.375rem;
}

.common-table .table th {
    font-size: 1rem;
    background-color: #c04657;
    color: #fff;
    white-space: nowrap;
    font-weight: 600;
}

.dt-container table.dataTable,
table.dataTable {
    border-collapse: collapse !important;
}

.common-table table.dataTable>tbody>tr:not(:last-child) {
    border-bottom: 0.0625rem solid #c0465733;
}

.common-table table>thead>tr>th,
.common-table table>thead>tr>td,
.common-table div.dt-container.dt-empty-footer tbody>tr:last-child>* {
    border: 0;
}

.common-table span.dt-column-title {
    font-weight: 600;
    font-size: 1rem;
}

.common-table table>thead>tr>th,
.common-table table>thead>tr>td,
.common-table table>tbody>tr>th,
.common-table table>tbody>tr>td {
    font-size: 1rem;
    padding-block: 1.188rem;
    padding-inline: 0.75rem;
}

.common-table table>tbody,
.common-table table>tbody {
    border: 0.0625rem solid #c0465733;
}

.common-table table>tbody>tr>th,
.common-table table>tbody>tr>td {
    font-weight: 500;
    color: #000;
}

.blue-btn {
    border-radius: 3.438rem;
    padding-block: 0.48rem;
    white-space: nowrap;
    background-color: #0067f1;
    color: #fff;
}

.green,
.red,
.blue {
    padding: 0;
    color: #14aa3c;
    font-size: 1rem;
}

.red {
    color: #e53e3e;
}

.blue {
    color: #0067f1;
}

.blue-btn:hover,
.blue-btn.btn:active {
    background-color: #0c64d8;
    color: #fff;
}

.common-table div.dt-container .dt-input {
    background-color: #f5f5f5 !important;
    border: 0.0625rem solid #dfdfdf !important;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.common-table .dt-search label,
.common-table .dt-length label {
    color: #747474;
}

.common-table .dt-length label {
    margin-left: 0.6rem;
}

.order-track {
    color: #0067f1;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    font-size: 1rem;
    border: 0;
    background: none;
    font-weight: 500;
}

.page-number-show {
    font-size: 1rem;
    color: #545454;
}

.custom-page-wp {
    max-width: max-content;
    width: 100%;
}

.custom-pagination {
    background: #fff;
    border: 0.0625rem solid #c04657;
    border-radius: 2rem;
    padding: 0.4rem 1.1rem;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 0.0625rem 0.5rem 0 #c0465722;
    width: 100%;
}

.previous-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.custom-page-link {
    background: transparent;
    color: #000;
    border: none;
    border-radius: 0.7rem;
    min-width: 2rem;
}

.custom-page-link.active-link {
    background: #c04657;
    color: #fff;
    border-radius: 0.7rem;
    min-width: 2rem;
    border: 0.0625rem solid #c04657;
    box-shadow: 0 0.125rem 0.4375rem 0 #c0465722;
    font-weight: 500;
    margin: 0 0.2rem;
    border-radius: 0.625rem !important;
}

.page-item .page-link span svg {
    width: 1.063rem;
    height: auto;
}

.page-item.disabled .page-link {
    background: none;
    border: 0;
}

.next-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.page-num-wp {
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Responsive adjustments */
@media screen and (max-width: 1199px) {
    .common-table {
        padding: 1rem;
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable>tbody>tr>th,
    .common-table table.dataTable>tbody>tr>td {
        font-size: 0.85rem;
    }

    .common-table table>thead>tr>th,
    .common-table table>thead>tr>td,
    .common-table table>tbody>tr>th,
    .common-table table>tbody>tr>td {
        padding-block: 0.875rem;
        padding-inline: 0.5rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 991px) {
    .common-table .table {
        min-width: 43.75rem;
        /* 700px */
    }

    .custom-pagination {
        gap: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table {
        padding: 0.75rem;
    }

    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }

    .common-table div.dt-layout-row {
        flex-direction: column;
        gap: 1rem;
    }

    .common-table .dt-search,
    .common-table .dt-length {
        width: 100%;
    }

    .common-table .table {
        min-width: 37.5rem;
        /* 600px */
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable>tbody>tr>th,
    .common-table table.dataTable>tbody>tr>td {
        font-size: 0.8rem;
    }

    .blue-btn {
        font-size: 0.7rem;
        padding-inline: 0.75rem;
        padding-block: 0.4rem;
    }

    .blue-btn i {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 575px) {
    .common-table {
        padding: 0.5rem;
        margin-inline: -0.5rem;
    }

    .common-table .table {
        min-width: 34.375rem;
        /* 550px */
    }

    .common-table table.dataTable>thead>tr>th,
    .common-table table.dataTable>thead>tr>td,
    .common-table table.dataTable>tbody>tr>th,
    .common-table table.dataTable>tbody>tr>td {
        padding-block: 0.75rem;
        padding-inline: 0.4rem;
    }

    .common-table span.dt-column-title {
        font-size: 0.75rem;
    }

    .common-table table.dataTable>tbody>tr>th,
    .common-table table.dataTable>tbody>tr>td {
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.65rem;
        padding-inline: 0.6rem;
        padding-block: 0.35rem;
    }
}

/* Responsive pagination for 475px to 320px */
@media screen and (max-width: 475px) {
    .custom-pagination {
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .previous-page-link,
    .next-page-link {
        min-width: 5.5rem;
        height: 2.3rem;
        font-size: 0.75rem;
        padding: 0 0.4rem;
        gap: 0.3rem;
    }

    .previous-page-link span svg,
    .next-page-link span svg {
        width: 0.8rem;
    }

    .custom-page-link {
        min-width: 1.7rem;
        font-size: 0.75rem;
        padding: 0.2rem;
    }

    .custom-page-link.active-link {
        min-width: 2rem;
        font-size: 0.75rem;
    }

    .page-item.disabled .page-link {
        font-size: 0.8rem;
    }

    /* Ensure sections align properly */
    .custom-pagination>span {
        display: flex;
        gap: 0.3rem;
        align-items: center;
    }
}

/* Extra small devices >=320px and <375px */
@media screen and (max-width: 360px) {

    .previous-page-link,
    .next-page-link {
        min-width: 4.5rem;
        font-size: 0.7rem;
    }

    .custom-page-link {
        min-width: 1.5rem;
        font-size: 0.7rem;
    }
}

/* table design End */

/* View Rates Popup Start */
.modal-dialog.modal-lg.modal-dialog-scrollable {
    --bs-modal-width: 100%;
    max-width: 100% !important;
}

.carrier-card {
    text-align: center;
    border: 0.0625rem solid #dfdfdf !important;
    border-radius: 0.375rem;
    padding: 1.25rem;
}

.carrier-card.active-card {
    border-color: #c04657 !important;
}

.carrier-card .form-check .form-check-input {
    float: none;
    margin-top: 0.12rem;
}

.modal-header .btn-close {
    border: 0.0625rem solid #545454;
    filter: unset;
    padding: 0.32rem;
}

.modal-title {
    font-size: 1.125rem;
}

.form-check-input {
    border-color: #c04657;
}

.form-check-input:checked {
    background-color: #c04657;
    border-color: #c04657;
}

.form-check .form-check-label {
    color: #333333;
}

.carrier-details small,
.price-breakdown small {
    color: #545454 !important;
}

.carrier-details small strong,
.main-total strong {
    color: #000 !important;
}

.carrier-badges span.badge {
    white-space: inherit;
}

.carrier-badges span.badge.bg-info {
    background-color: #c04657 !important;
}

.carrier-badges span.badge.bg-warning {
    background-color: #0067f1 !important;
}

@media screen and (max-width: 1199px) {

    .common-table span.dt-column-title,
    .common-table table.dataTable>tbody>tr>th,
    .common-table table.dataTable>tbody>tr>td {
        font-size: 0.85rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }
}

.profile-card {
    width: 100%;
    max-width: 40rem;
    /* 420px */
    margin: 0 auto;
    margin-block: 2.5rem;
    background: var(--white-color);
    border-radius: 1.25rem;
    /* 20px */
    overflow: hidden;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.15);
    /* 20px 40px */
    transition: transform 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-0.625rem);
    /* -10px */
}

.cover-photo {
    height: 8.75rem;
    /* 140px */
    /* Use theme gradient colors if available, else fallback */
    background: var(--primary-brick-red, #c04657);
    position: relative;
}

.avatar {
    width: 8.75rem;
    /* 140px */
    height: 8.75rem;
    /* 140px */
    border-radius: 50%;
    border: 0.375rem solid var(--white-color);
    /* 6px */
    position: absolute;
    bottom: -4.375rem;
    /* -70px */
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
    /* 10px 30px */
}

.profile-info {
    text-align: center;
    padding: 5rem 1.875rem 1.875rem;
    /* 80px 30px 30px */
}

.profile-page {
    text-align: left;
    margin-top: 2rem;
}

.notification .options-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.notification .option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification.form-group input {
    -webkit-appearance: auto !important;
}

.notification.form-group input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-brick-red);
}