input::placeholder,
.form-control::placeholder {
    color: #b5bdc5 !important;
    opacity: 1;
}

.form-control[readonly]:focus {
    background-color: #e9ecef;
    border-color: #e1e2e2;
    opacity: 1;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.line-through {
    text-decoration: line-through;
}

.form-group label {
    font-size: 15px;
    display: block;
    margin-bottom: 5px;
}

.form-group .form-inline {
    display: flex;
}

.hide {
    display: none !important;
}

.font-400 {
    font-weight: 400 !important;
}

.font-500 {
    font-weight: 500 !important;
}

.font-600 {
    font-weight: 600 !important;
}

.font-700 {
    font-weight: 700 !important;
}

.font-800 {
    font-weight: 800 !important;
}

.text-ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-16 {
    font-size: 16px !important;
}

.text-18 {
    font-size: 18px !important;
}

.text-20 {
    font-size: 20px !important;
}

.user-logged-in {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e6edef;
    margin-bottom: 10px;
    height: 85px;
}

.user-logged-in .letter {
    display: block;
    background: #0b1c3f;
    color: #fff;
    font-size: 35px;
    font-weight: 600;
    min-width: 50px;
    min-height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 10px;
    margin-right: 10px;
}

.user-logged-in .hello {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    opacity: 0.8;
}

.no-border {
    border: 0 !important;
}

.user-logged-in .name {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 0;
}

.page-wrapper .page-body-wrapper .page-header {
    padding-bottom: 15px;
}

.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-check {
    min-height: 1.5rem;
    margin-bottom: 15px;
    border: 1px solid #e1e2e2;
    border-radius: 10px;
    padding: 2px 15px;
    height: 42px;
    display: flex;
    align-items: center;
}

.form-check .form-check-input {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form-check .form-check-label {
    margin: 0;
    width: 100%;
    cursor: pointer;
    user-select: none;
}

/* Table */

.page-link {
    padding: 2px 10px;
    border-radius: 8px;
    border: 0 !important;
}

.table th,
.table td {
    padding: 12px;
    min-height: 60px;
    vertical-align: middle !important;
}

.table td {
    font-size: 16px;
    line-height: 1.35;
}

.table th {
    border-bottom-width: 2px;
    font-weight: 500;
    min-width: 60px;
}

td.product-name {
    min-width: 230px;
}
td.address {
    min-width: 200px;
}
td.city {
    min-width: 100px;
}

td.agency-services {
    min-width: 250px;
    width: 350px;
}

td.agency-balance {
    white-space: nowrap;
    width: 180px;
    min-width: 120px;
}

.table .col-actions {
    width: 150px;
}

.table .actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 15px;
    border-radius: 50% !important;
}

.table .services {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table .services span {
    white-space: nowrap;
    display: inline-block;
    padding: 6px 11px 7px 11px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    background: #434d62;
    color: #fff;
}

/* Col */

.col-500 {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.col-600 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.col-700 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.col-800 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.col-900 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.col-1000 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.col-1100 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.col-1200 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

textarea {
    height: 250px;
}

.border-right {
    border-right: 1px solid #e6edef;
}

/* Stats cards */

.stat-card {
    border-radius: 10px;
}

.stat-card .stat-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-card .stat-wrap .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    height: 50px;
    width: 50px;
    min-width: 50px;
    border-radius: 8px;
    font-size: 28px;
}

.stat-card .stat-wrap .icon-box.white {
    background: #fff !important;
    border: 1px solid #e6edef;
}

.stat-card .stat-wrap .icon-box.white i {
    color: #474747 !important;
}

.page-main-header .main-header-right .main-header-left img {
    height: 40px;
    border-radius: 5px;
}

.stat-card .card-body {
    padding: 15px;
}

.period-form {
    width: 180px;
}

.stat-card .stat-wrap .content {
    width: calc(100% - 55px);
}

.stat-card .stat-wrap .title {
    display: block;
    color: #75777e;
    font-weight: 400;
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1;
}

.stat-card .stat-wrap .number {
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 600;
}

.category-info {
    display: flex;
    align-items: center;
}

.category-info img {
    width: 100px;
    min-width: 100px;
    height: 100px;
    margin-right: 15px;
    border: 1px solid #ececec;
    border-radius: 5px;
    object-fit: contain;
}

.category-info .name {
    display: block;
    font-size: 18px;
    font-weight: 500;
}

.product-info {
    display: flex;
    align-items: center;
    min-width: 250px;
}

.product-info img {
    width: 80px;
    min-width: 80px;
    height: 90px;
    margin-right: 15px;
    border: 1px solid #ececec;
    border-radius: 5px;
    object-fit: cover;
}

.product-info .name {
    display: block;
    font-size: 18px;
    font-weight: 500;
}

/* Select 2 */

.select2-container .select2-selection--single {
    color: #495057 !important;
    border-radius: 10px !important;
    border-color: #c2c2c2 !important;
    height: 46px !important;
    padding: 10px 15px;
    font-size: 16px;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #444;
    line-height: 24px;
    padding: 0;
}

.select2-results > .select2-results__options {
    border: 0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #0b1c3f !important;
}

.select2-dropdown {
    border: 1px solid #e1e2e2;
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 250px !important;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: #efefef !important;
}

.select2-results__option {
    font-size: 15px !important;
    border-top: 1px solid #ececec;
    padding: 8px 10px !important;
}

.period-form .select2-container .select2-selection--single {
    height: 35px !important;
    padding: 5px 15px;
}

.height-equal {
    height: calc(100% - 30px);
}

.product-page-main p {
    font-size: 16px;
    font-weight: 400 !important;
    color: #606060 !important;
}

.product-page-details {
    display: block !important;
}

.product-page-details .extra {
    display: block;
    font-size: 18px;
    padding: 0;
    opacity: 0.8;
}

.metas {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
}

.meta {
    margin-right: 10px;
    margin-bottom: 10px;
    min-width: 120px;
}

.meta .title {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.meta .info {
    display: block;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    border-radius: 0.25rem;
    background-color: #717171;
    padding: 10px;
}
.metas .btn {
    height: 38px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.login-card .input-group-text {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid #c2c2c2 !important;
}

.login-form .form-group .link {
    float: unset;
    font-weight: 500;
}

.login-form .title {
    text-transform: none;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 22px;
}

.login-form .text {
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    opacity: 0.9;
}

.alert .text {
    display: block;
    width: calc(100% - 30px);
    opacity: 1;
}

.alert-danger.dark .text {
    color: #fff !important;
}

/* Seller add product */

.product-search .product-wrap .search-product-item,
.product-search .product-wrap .item {
    display: flex;
    align-items: center;
    border: 1px solid #e1e2e2;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
}

.product-search .product-wrap .search-product-item img,
.product-search .product-wrap .item img {
    width: 80px;
    height: 90px;
    object-fit: contain;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ececec;
    margin-right: 15px;
    background-color: #fff;
}

.code-input {
    text-transform: uppercase;
}

.product-search .product-wrap .search-product-item .infos,
.product-search .product-wrap .item .infos {
    width: calc(100% - 80px);
}

.product-search .product-wrap .search-product-item .infos .name,
.product-search .product-wrap .item .infos .name {
    font-size: 18px;
    margin-bottom: 5px;
}

.product-search .product-wrap .search-product-item .infos .extra,
.product-search .product-wrap .item .infos .extra {
    display: block;
    font-size: 15px;
    opacity: 0.8;
}

.product-search .product-wrap .search-product-item.selected {
    background: #0b1c3f;
    color: #fff;
}

.page-main-header .main-header-right .main-header-left img {
    object-fit: contain;
}

.opening-item {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #ececec;
    margin: 15px 0;
    padding: 15px;
    border-radius: 5px;
}

.opening-item legend {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    display: block;
    float: unset;
    width: auto;
    padding-right: 10px;
    margin-bottom: 0;
}

.opening-item .checkbox-group .form-group {
    margin-bottom: 0;
}

.opening-item .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.opening-item .form-group label {
    color: #777f87;
}

.opening-item .form-group .form-inline {
    display: flex;
    align-items: center;
}

.form-check label {
    font-size: 16px !important;
    font-weight: 500 !important;
    padding-left: 10px;
    color: #5a5f65 !important;
}

#shopDescription {
    height: 560px;
}

.ck-editor-shop .cke_contents {
    height: 224px !important;
}

.ck-editor-large .cke_contents {
    height: 400px !important;
}

.label-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.label-wrap label {
    margin-bottom: 5px;
}

.label-wrap .btn {
    padding: 0;
    margin-bottom: 5px;
    color: #c40606;
}

.step-row textarea {
    height: 180px;
}

.group-label {
    font-size: 17px !important;
    font-weight: 500;
}

.fullheight {
    height: calc(100% - 30px);
}

.card .card-footer {
    padding: 20px;
}

.nav-pills {
    gap: 10px;
    margin-bottom: 10px;
}

.nav-pills .nav-link {
    border: 1px solid #0b1c3f;
    border-radius: 10px;
    gap: 6px;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    box-shadow: none !important;
}

.shop-name-wrapper {
    display: flex;
    align-items: center;
}

.shop-name-wrapper .cover {
    width: 200px;
    height: 130px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
    border: 1px solid #e6edef;
}

.shop-name-wrapper .name {
    font-size: 35px;
    color: #0b1c3f;
}

.infos-wrap .title {
    color: #0b1c3f;
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
}

.infos-wrap table td {
    padding: 5px;
}

.infos-wrap .table tr:first-child td {
    padding-top: 0 !important;
}

.infos-wrap .table tr:last-child td {
    border-bottom: 0 !important;
}

.infos-wrap .table tr td:first-child {
    padding-left: 0 !important;
}

.infos-wrap .table tr td:last-child {
    text-align: right;
    padding-right: 0 !important;
}

.shop-description p {
    font-size: 15px;
    margin-bottom: 5px;
}

@media (max-width: 991px) {
    .infos-wrap {
        margin-bottom: 20px;
    }
}

.shop-infos {
    display: flex;
    align-items: center;
}

.shop-infos img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
    border: 1px solid #ececec;
}

.shop-infos .name {
    font-size: 20px;
    display: block;
}

/**/

.notification-box i {
    font-size: 18px;
}

.notification-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 37px;
    width: 100%;
    font-size: 17px;
    padding: 5px 10px;
}

.menu-title {
    position: relative;
}

.menu-title .count {
    display: block;
    height: 20px;
    width: 25px;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #0b1c3f;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.menu-title.active .count,
.menu-title:hover .count {
    color: #0b1c3f;
    background: #fff;
}

.product-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ececec;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.product-wrap img {
    width: 80px;
    min-width: 80px;
    height: 80px;
    margin-right: 15px;
    border: 1px solid #ececec;
    border-radius: 5px;
    object-fit: contain;
}

.product-wrap .name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.product-wrap .extra {
    display: block;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}

.customer {
    display: flex;
    align-items: center;
}

.customer .letter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    background: #0b1c3f;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    border-radius: 5px;
    margin-right: 10px;
}

/* djelicard */

.empty-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
    min-height: 50px;
}

.empty-wrap .text {
    font-size: 18px;
    text-align: center;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.6;
}

.empty-wrap.column {
    flex-direction: column;
}

.swal2-styled.swal2-default-outline:focus {
    box-shadow: none !important;
}

.page-header-wrap {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #e6edef;
    height: 85px;
}

.page-header-wrap .page-title {
    font-size: 22px;
    margin-bottom: 0;
    font-weight: 600;
    margin-bottom: 5px;
}

.breadcrumb {
    margin: 0;
    font-size: 13px;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.page-body > .container-fluid {
    padding: 20px;
}

.fi.xl {
    width: 30px;
    line-height: 20px;
}

.table .country {
    display: flex;
    align-items: center;
    gap: 6px;
}

.table .country .name {
    line-height: 1;
}

fieldset {
    position: relative;
    padding: 10px 20px;
    border: 1px solid #e1e2e2;
    border-radius: 10px;
    margin-bottom: 30px;
}

fieldset legend {
    font-size: 20px;
    font-weight: 600;
    float: none;
    display: inline-block;
    padding: 5px 10px;
    width: auto;
    margin-bottom: 0;
}

.input-group {
    position: relative;
}

.input-group .form-control {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.input-group .input-group-append {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border-radius: 10px;
}

.input-group-append .input-group-text {
    border: 0;
    background: transparent;
    padding: 6px;
}

.hidden {
    visibility: hidden;
    opacity: 0;
}

.get-customer {
    cursor: pointer;
}

/* Modal */

.modal .modal-content {
    border: 0;
    border-radius: 20px;
}

.modal .modal-content .modal-header {
    padding: 16px 24px;
}

.modal .modal-content .modal-body {
    padding: 24px;
}

.modal .modal-content .modal-header .modal-title {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
}

.modal .modal-content .modal-header .close-modal {
    background: #fff !important;
    color: #0b1c3f !important;
    height: 30px;
    width: 30px;
    padding: 5px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-footer > * {
    margin: 0;
}

.modal .modal-content .modal-footer {
    padding: 15px;
    justify-content: flex-start;
    gap: 10px;
}

.modal-text {
    font-size: 16px;
    line-height: 1.5;
}

/* Customer search by phone */

.customer-search {
    position: relative;
}

.customer-search-result {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    max-height: 250px !important;
    border: 1px solid #e1e2e2;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 70px;
    z-index: 2;
    width: 100%;
}

.customer-search-result li {
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    border-top: 1px solid #ececec;
    padding: 8px 10px;
}

.customer-search-result li:first-child {
    border-top: 0;
}

.customer-search-result li:hover {
    background: #efefef;
}

.modal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.edit-conversion-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-conversion-wrap input,
.edit-conversion-wrap .input-group-text {
    font-weight: 600;
    font-size: 18px;
}

.edit-conversion-wrap .equal {
    display: block;
    font-size: 40px;
    font-weight: 400;
}

.card.h-100 {
    height: calc(100% - 20px) !important;
}

.conversion .form-group {
    margin-bottom: 15px;
}

.conversion-result {
    text-align: center;
}

.conversion-result .text {
    font-size: 18px;
    font-weight: 600;
}

.conversion.working {
    opacity: 0.8;
}

.dataTables_wrapper {
    padding-bottom: 10px !important;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 18px;
    margin-left: 0 !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
    border: 1px solid #d5d0d0;
    padding: 0 10px;
    margin-left: 0;
    height: 37px;
    border-radius: 5px;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
    color: #868686 !important;
}

/* Dropdown filter */

.btn-dropdown {
    border: 1px solid #cdcdcd !important;
    border-radius: 8px !important;
    height: 35px !important;
    font-size: 17px;
    padding: 0px 15px;
    font-weight: 400 !important;
}

.btn-dropdown:hover {
    color: #000 !important;
}

.btn-dropdown:hover {
    transform: none !important;
}

.btn-dropdown.dropdown-toggle::after {
    margin-left: 10px;
    border-top: 0.5em solid;
    border-right: 0.4em solid transparent;
    border-bottom: 0;
    border-left: 0.4em solid transparent;
    margin-top: 2px;
}

.dropdown-menu {
    padding: 8px;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    background: #fff;
    margin-top: 5px !important;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    border-radius: 6px;
    padding: 5px 15px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    background-color: #0b1c3f;
}

.row-reverse {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

.modal table td {
    padding: 10px !important;
    font-size: 16px;
}

.modal table tr td:first-child {
    width: 210px;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal p {
    font-size: 16px;
}

.stat-period {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-period .form-control {
    height: 35px;
    padding: 5px 10px;
    line-height: 20px;
    border-radius: 8px;
    width: 100px;
}

.stat-period .btn {
    height: 35px;
    width: 35px;
}

.user-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    min-width: 180px;
}

.user-name .letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 20px;
    font-weight: 600;
    color: #0b1c3f;
    background: #dfeaff;
    border-radius: 5px;
}

.user-name img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 3px;
}

.user-name .name {
    font-size: 16px;
    font-weight: 500;
    display: block;
}

.profile-table tr:last-child td {
    border-bottom: 0 !important;
}

.period-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.period-filters .btn {
    padding: 8px;
    height: 38px;
}

.period-filters .form-control {
    padding: 8px 12px;
    height: 38px;
}

.datepicker td,
.datepicker th {
    width: 30px !important;
    text-transform: capitalize;
}

.datepicker table tr td.active.active {
    background-color: #0b1c3f !important;
    background-image: none !important;
    font-weight: 600;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: #d2d9e4 !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #c4c4c4 !important;
}

.select-images {
    border: 1px solid #003555 !important;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 30px;
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.select-images img {
    height: 30px;
    object-fit: cover;
    width: 50px;
}

.select-images span {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.product-images .preview-item {
    position: relative;
    height: auto;
    aspect-ratio: 1;
    border: 1px solid #a8a8a8;
    border-radius: 8px;
}

.product-images .preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.product-images .preview-item.empty img {
    cursor: pointer;
}

.product-images .preview-item .delete-preview {
    display: flex;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -6px;
    right: -5px;
    cursor: pointer;
    font-size: 20px;
    background: red;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    align-items: center;
    justify-content: center;
}

.product-images .preview-item.empty .delete-preview {
    display: none !important;
}

.verify-siret {
    position: absolute;
    height: 42px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    cursor: pointer;
    z-index: 5;
    background: #c2c2c2;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.customer-body {
    position: relative;
}

.customer-body .loader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 95px;
}

.customer-body .loader i {
    font-size: 50px;
    color: #000;
}

.gap-10 {
    gap: 10px;
}

.no-break {
    display: block;
    white-space: nowrap;
}

.map-addresses {
    height: calc(100vh - 115px);
}

.custom-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.custom-marker .name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    width: auto;
    padding: 5px 10px;
    background: #fff;
    border-radius: 6px;
}

.custom-marker img {
    cursor: pointer;
    width: 50px; /* Taille de base de l'icône */
    transition: all ease-in-out 0.2s;
}

.custom-marker.hover img {
    transform: scale(1.1);
}

.map-card {
    position: relative;
}

.customer-infos {
    position: absolute;
    width: 350px;
    background: #fff;
    height: calc(100% - 30px);
    top: 15px;
    right: -100%;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 20px 0px;
    padding: 20px;
    transition: all ease-in-out 250ms;
}

.customer-infos.show {
    right: 15px;
}

.customer-infos .close-infos {
    padding: 0;
    background: #fff;
    color: red;
    font-size: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50% !important;
    position: absolute;
    top: 5px;
    right: 5px;
}

.customer-infos .close-infos:hover {
    color: red !important;
}

.customer-infos .loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 10;
    border-radius: 20px;
}

.customer-infos .name {
    font-size: 25px;
    padding-right: 10px;
}

.customer-infos .address {
    font-size: 18px;
}

.customer-infos .text {
    font-size: 16px;
}

.customer-infos .btn-primary {
    width: 100%;
}

.programmed {
    text-align: center;
}

.programmed p {
    font-size: 18px;
}

.programmed .text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 10px;
}

.programmed img {
    width: 80%;
    max-width: 100px;
    margin-bottom: 20px;
}

.intervention-meta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #dee2e6;
}

.intervention-meta:last-child {
    border-bottom: 0;
}

.intervention-meta .key {
    width: 140px;
    font-weight: 700;
}

.intervention-meta .value {
    width: calc(100% - 150px);
}

@media (max-width: 575px) {
    .page-body > .container-fluid {
        padding: 10px;
    }
}

.template-table {
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-table img {
    width: 100px;
    height: auto;
    border: 1px solid #d1d6e4;
    box-shadow: 0 5px 10px 0 rgba(12, 14, 20, 0.05);
    border-radius: 5px;
}

.template-table .name {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}

/* Général uploader */

.image-wrapper {
    height: 100%;
}

.image-wrapper .square {
    aspect-ratio: 21/29.7;
    position: relative;
    border: 1px solid #c2c2c2;
    width: 98%;
}

.image-wrapper .squared {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    border: 1px solid #c2c2c2;
    border-radius: 5px;
    overflow: hidden;
}

.image-wrapper .product-image {
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    border: 1px solid #c2c2c2;
    border-radius: 5px;
    overflow: hidden;
}

.image-wrapper .landscape {
    width: 100%;
    aspect-ratio: 5/3;
    position: relative;
    border: 1px solid #c2c2c2;
    border-radius: 5px;
    overflow: hidden;
}

.change-photo-btn {
    display: block;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    color: #fff;
    font-weight: 600;
    background: black;
}

.change-photo-btn:hover {
    transform: translateX(-50%) !important;
    background: #0b1c3f;
}

.image-wrapper div .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}

.resume-item {
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #e6edef;
    padding: 15px;
}

.resume-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resume-wrap .resume-item {
    padding: 10px 15px;
    margin-bottom: 0;
    border: 0;
    background: #1d572b12;
}

.pagination {
    list-style: none !important;
}

ul.text {
    list-style: disc;
    padding-left: 15px;
}

ul.text li {
    margin-bottom: 5px;
}

.password-group {
    position: relative;
}

.password-group .show-password {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: transparent;
    height: 42px;
    width: 42px;
    cursor: pointer;
}

.underline {
    text-decoration: underline;
}

a.underline:hover {
    text-decoration: underline;
}

/* Custom tinymce */

.tox-tinymce {
    border: 1px solid #c2c2c2 !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    border-bottom: 1px solid #c2c2c2 !important;
    box-shadow: none !important;
}

.tox-tinymce .tox-statusbar {
    display: none !important;
}

/* Wizard style */

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.separator {
    width: 100%;
    height: 2px;
    background: #e6edef;
}

.separator.active {
    background: #3d6abc;
}

.step {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0b1c3f;
    opacity: 0.6;
}

.step .count {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0b1c3f;
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
}

.step .text {
    display: block;
    font-size: 18px;
}

.step.active {
    opacity: 1;
}

.step.active .count {
    background: #0b1c3f;
    color: #fff;
}

.step-indicator.job-offer .step {
    min-width: 160px;
}

.step-indicator.job-offer .count {
    width: 40px;
    min-width: 40px;
    height: 40px;
}

.step-indicator.job-offer .text {
    font-size: 16px;
    line-height: 1.25;
}

#images,
.uploaded-images {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-bottom: 40px;
}

.product-image-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #a8a8a8;
    border-radius: 8px;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.product-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-item .form-group {
    margin-bottom: 0;
}

.product-image-item .image-wrapper .square {
    border: 0;
    border-bottom: 1px solid #ececec;
    border-radius: 0 !important;
    border-radius: 8px 8px 0 0;
}

.product-image-item .image-wrapper .square img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.product-image-item .delete-image-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 30px;
    height: 30px;
    background: red;
    color: #fff;
    border-radius: 50% !important;
    position: absolute;
    right: 5px;
    top: 5px;
}

#add-images .modal-dialog {
    max-width: 700px !important;
}

.images-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.select-image-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ececec;
    border-radius: 6px;
    height: 65px;
    cursor: pointer;
    border: 1px solid #a8a8a8;
    font-weight: 400 !important;
}

.select-image-btn:hover {
    background: #dddcdc;
    transform: none !important;
    color: #000 !important;
}

.images-preview-container .image-preview {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border: 1px solid #cecece;
    border-radius: 6px;
}

.images-preview-container .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.images-preview-container .image-preview .delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
}

.feature-row .label-wrap .btn {
    background: #fff !important;
    padding: 0 3px;
    color: #9a0000;
    height: 25px;
    font-size: 15px !important;
    display: flex;
    align-items: center;
}

.feature-row .label-wrap .btn:hover {
    color: #9a0000 !important;
    background: #ececec !important;
}

.product-images {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.product-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    border: 1px solid #e6edef;
    border-radius: 10px;
    background-color: #fff;
}

.product-table {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-table img {
    width: 80px;
    aspect-ratio: 4/3;
    border-radius: 5px;
    object-fit: cover;
    border: 1px solid #e6edef;
}

.stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.stat-grid.fit {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stat-grid.inline {
    gap: 12px;
}

.stat {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6edef;
    border-radius: 8px;
    padding: 12px;
    gap: 10px;
}

.stat img {
    width: 55px;
    height: 55px;
    min-width: 55px;
    object-fit: cover;
    border-radius: 5px;
}

.stat .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    min-width: 50px;
    border-radius: 5px;
    font-size: 25px;
    background: rgba(254, 196, 48, 0.4);
    border: 1px solid rgba(254, 196, 48, 0.55);
    color: #001c64;
}

.stat .content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat .content .key {
    display: block;
    color: #75777e;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
}

.stat .content .value {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
}

.card-infos {
    display: flex;
    flex-direction: column;
}

.card-infos .item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #00308729;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.card-infos .item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.card-infos .item .key {
    display: block;
    font-weight: 400;
    line-height: 1;
}

.card-infos .item .value {
    display: block;
    font-weight: 400;
    line-height: 1;
    color: #0b1c3f;
}

.variant-row {
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.variant-wrap {
    display: flex;
    gap: 15px;
    padding: 15px;
    position: relative;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}

.variant-wrap .image {
    width: 260px;
}

.variant-wrap .content {
    width: calc(100% - 260px);
}

.variant-wrap .delete-variant {
    position: absolute;
    padding: 0;
    bottom: 8px;
    right: 20px;
    color: red;
    border: none;
    height: 24px;
    font-size: 16px;
    cursor: pointer;
}

.variant-wrap .delete-variant:hover {
    color: darkred !important;
}

.between {
    display: flex !important;
    justify-content: space-between !important;
}

.variants {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.variants .variant {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 15px;
    flex: 1 1 calc(33.333% - 10px);
    box-sizing: border-box;
}

.variants .variant-name {
    font-weight: bold;
}

.variants .variant-price {
    color: #0b1c3f;
    margin-bottom: 0;
}

.company-sectors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.company-sectors .sector-item {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    background: #00308712;
    line-height: 1.2;
    border: 1px solid #00308714;
    border-radius: 6px;
}

.company-sectors .sector-item .remove-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    background: #f50000;
    color: #fff !important;
    border-radius: 4px;
    width: 20px;
    height: 20px;
}

.nav-pills {
    gap: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}

.nav-pills .nav-link {
    border: 1px solid #e6edef;
    border-radius: 8px;
    height: 40px;
    padding: 4px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500 !important;
    background: #fff;
    white-space: nowrap;
}

.nav-pills .nav-link.active {
    border: 0 !important;
}

.custom-scrollbar hr {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.table-qr-code img {
    width: 80px;
    height: 80px;
}

.tutorial-table {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tutorial-table img {
    width: 120px;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #e6edef;
}

.trusted-brand-table {
    display: flex;
    align-items: center;
    gap: 15px;
}

.trusted-brand-table img {
    width: 90px;
    height: 50px;
    object-fit: contain;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #e6edef;
    padding: 6px;
}

.tutorial-table .title {
    display: block;
    font-size: 18px;
    font-weight: 500;
}

.profile-table {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-table img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e6edef;
}

.profile-table .name {
    white-space: nowrap;
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0px;
}

.profile-table .job {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #75777e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swal2-popup {
    border-radius: 20px !important;
}

.swal2-styled.swal2-confirm {
    border-radius: 10px !important;
}

.iti {
    width: 100%;
}

.iti input {
    width: 100%;
}

/* profile and cover photo crop */

.avatar-box img,
.cover-box img,
.logo-box img {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: auto;
}

.cropper-container,
.cover-box,
.logo-box {
    max-height: 550px;
    display: block;
}

.cropper-container {
    background-image: url("../../images/content/transparent.png") !important;
}

.cropper-hide,
.cropper-drag-box {
    border-radius: 0px;
}

.cropper-modal {
    background-color: #000;
    opacity: 0.06;
}

#editAvatarModal .cropper-crop-box {
    border-radius: 50%;
}

#editAvatarModal .cropper-view-box {
    border-radius: 50%;
}

.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}

.cropper-face {
    background-color: inherit !important;
}

.cropper-dashed,
.cropper-point.point-se,
.cropper-point.point-sw,
.cropper-point.point-nw,
.cropper-point.point-ne,
.cropper-line {
    display: none !important;
}

.cropper-view-box {
    outline: inherit !important;
}

.cropper-zoom {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.cropper-zoom .btn {
    padding: 5px 20px !important;
    height: 35px;
}

.nav-pills .badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px;
    padding: 2px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    width: auto;
    height: 20px;
    color: #003087 !important;
    background: #f9b50a;
}

.qr-code-wrap {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 280px;
}

.qr-code-wrap img {
    width: 100%;
    height: auto;
}

.announcement-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.announcement-item img {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 5/3;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #e6edef;
}

.announcement-item .announcement-title {
    display: block;
    font-size: 18px;
    font-weight: 500;
}

.nowrap {
    white-space: nowrap;
}

.announcement-image {
    width: 100%;
    aspect-ratio: 5/3;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #e6edef;
}

.company-info-list {
    display: flex;
    flex-direction: column;
}

.company-info-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f7;
}

.company-info-row:last-child {
    border-bottom: 0;
}

.company-info-row span,
.company-logo-box span,
.company-social-item span,
.company-stat-item span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.company-info-row strong,
.company-logo-box strong,
.company-social-item strong {
    color: #111827;
    font-size: 15px;
    font-weight: 500;
}

.company-contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
}

.company-contact-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #f0e9ff;
    color: #5b21ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
}

.company-contact-card h4 {
    margin: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
}

.company-contact-card p {
    margin: 4px 0 10px;
    color: #64748b;
    font-weight: 600;
}

.company-contact-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #334155;
    font-size: 13px;
}

.company-logo-box {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 22px;
    align-items: center;
}

.company-logo-box img {
    width: 110px;
    height: 110px;
    border-radius: 12px;
    object-fit: cover;
    background: #071936;
}

.company-about-text {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.company-social-list {
    display: flex;
    flex-direction: column;
}

.company-social-item {
    display: grid;
    grid-template-columns: 42px 1fr 20px;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f7;
    text-decoration: none;
}

.company-social-item:last-child {
    border-bottom: 0;
}

.company-social-item strong {
    color: #4c1dff;
    word-break: break-all;
}

.company-social-item > i {
    color: #64748b;
}

.item-icon.facebook {
    background: #e8f1ff;
    color: #1877f2;
}

.item-icon.x {
    background: #e8f7ff;
    color: #1da1f2;
}

.item-icon.tiktok {
    background: #fff0f7;
    color: #000000;
}

.item-icon.youtube {
    background: #fff0f0;
    color: #ff0000;
}

.company-social-item.empty {
    pointer-events: none;
}

.item-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b1c3f;
    background: #dde8ff;
}

.social-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.item-icon.purple {
    background: #f0e9ff;
    color: #5b21ff;
}

.item-icon.green {
    background: #eafbf0;
    color: #16a34a;
}

.item-icon.orange {
    background: #fff3e8;
    color: #f97316;
}

.item-icon.blue {
    background: #eaf3ff;
    color: #2563eb;
}

.item-icon.linkedin {
    background: #e8f3ff;
    color: #0a66c2;
}

.item-icon.instagram {
    background: #fff0f6;
    color: #e1306c;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}

.status-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-badge.active {
    background: #dcfce7;
    color: #15803d;
}

.status-badge.active span {
    background: #16a34a;
}

.subscription-content {
    display: flex;
    flex-direction: column;
}

.subscription-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
}

.subscription-item:not(:last-child) {
    border-bottom: 1px solid #edf2f7;
}

.subscription-item:first-child {
    padding-top: 0;
}

.subscription-item:last-child {
    padding-bottom: 0;
}

.subscription-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #f5f3ff;
    color: #5b3ff2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.subscription-icon.success {
    background: #ecfdf3;
    color: #16a34a;
}

.subscription-details {
    flex: 1;
}

.subscription-label {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.subscription-value {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.subscription-days {
    font-size: 24px;
    font-weight: 800;
    color: #16a34a;
    line-height: 1;
}

.subscription-days span {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.progress {
    margin-top: 12px;
    height: 10px;
    background: #ebe7ff;
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #5b3ff2;
    border-radius: 999px;
}

.progress-value {
    margin-top: 8px;
    text-align: right;
    font-weight: 700;
    color: #5b3ff2;
}

/* Order Wizard Steps */

.order-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 24px;
}

.order-wizard-steps {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    gap: 14px;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9ca3af;
}

.wizard-step span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.wizard-step.active {
    color: #0b1f49;
}

.wizard-step.active span {
    background: #0b1f49;
    color: #fff;
}

.wizard-step strong {
    display: block;
    font-size: 14px;
}

.wizard-step small {
    display: block;
    font-size: 12px;
}

.wizard-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.form-control:focus {
    border-color: #0b1f49;
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}

.btn-primary {
    background: #0b1f49;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
}

.btn-secondary {
    background: #c08457;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
}

.btn-light {
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.summary-box {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
}

.summary-box h3 {
    margin-bottom: 14px;
    font-size: 18px;
    color: #0b1f49;
    border-bottom: 1px solid #ececec;
    padding-bottom: 12px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #374151;
}

.summary-total {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 12px;
    font-weight: 800;
    font-size: 18px;
}

.tiptap-editor {
    min-height: 420px;
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 24px;
    background: #fff;
}

.tiptap-editor .ProseMirror {
    min-height: 360px;
    outline: none;
}

.tiptap-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.tiptap-toolbar button {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
}

.help-content {
    line-height: 1.75;
}

.help-content h2 {
    margin-top: 32px;
    margin-bottom: 12px;
}

.help-content p {
    margin-bottom: 16px;
}

.help-content img {
    max-width: 100%;
    border-radius: 16px;
}

.top-help-list {
    display: flex;
    flex-direction: column;
}

.top-help-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f6;
    background: #fff;
}

.top-help-item:last-child {
    border-bottom: 0;
}

.top-help-item .rank {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #fff0ed;
    color: #ff725e;
    font-weight: 800;
}

.top-help-item .content {
    flex: 1;
    min-width: 0;
}

.top-help-item .content strong {
    display: block;
    color: #10172f;
    font-size: 14px;
}

.top-help-item .content span {
    color: #667085;
    font-size: 13px;
}

.top-help-item .views {
    color: #667085;
    font-size: 13px;
    white-space: nowrap;
}

.help-category-modal .modal-body {
    padding: 24px;
}

.help-category-modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e9edf4;
}

.icon-picker-layout {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 18px;
}

.selected-icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px;
    border: 1px solid #e2e7f0;
    border-radius: 14px;
    background: #f8faff;
    text-align: center;
}

.selected-icon-preview {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 18px;
    background: #e8f1ff;
    color: #1264e8;
    font-size: 28px;
}

.selected-icon-box span {
    color: #8a93a5;
    font-size: 12px;
}

.selected-icon-box strong {
    max-width: 100%;
    margin-top: 4px;
    color: #0c1c42;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.icon-picker-search {
    position: relative;
    margin-bottom: 12px;
}

.icon-picker-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #8a93a5;
    transform: translateY(-50%);
}

.icon-picker-search input {
    padding-left: 40px;
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    max-height: 265px;
    padding-right: 5px;
    overflow-y: auto;
}

.icon-picker-item {
    min-width: 0;
    height: 64px;
    padding: 8px 5px;
    border: 1px solid #e1e6ef;
    border-radius: 11px;
    background: #fff;
    color: #26354f;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.icon-picker-item i {
    display: block;
    margin-bottom: 5px;
    font-size: 19px;
}

.icon-picker-item span {
    display: block;
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-picker-item:hover {
    border-color: #9cbdf5;
    color: #1264e8;
}

.icon-picker-item.active {
    border-color: #1264e8;
    background: #edf4ff;
    color: #1264e8;
    box-shadow: 0 0 0 2px rgba(18, 100, 232, 0.12);
}

.icon-picker-empty {
    margin: 18px 0 0;
    color: #8a93a5;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 767px) {
    .icon-picker-layout {
        grid-template-columns: 1fr;
    }

    .icon-picker-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .selected-icon-box {
        flex-direction: row;
        gap: 14px;
        text-align: left;
    }

    .selected-icon-preview {
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }
}

.help-bo-article-excerpt {
    max-width: 760px;
    margin: 0 0 18px;
    color: #687287;
    font-size: 16px;
    line-height: 1.7;
}

.help-bo-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #8b94a5;
    font-size: 12px;
}

.help-bo-article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.help-bo-article-content {
    color: #475467;
    font-size: 15px;
    line-height: 1.8;
}

.help-bo-article-content h2 {
    margin: 36px 0 13px;
    color: #0b1c40;
    font-size: 20px;
    font-weight: 700;
}

.help-bo-article-content h2:first-child {
    margin-top: 0;
}

.help-bo-article-content h3 {
    margin: 27px 0 11px;
    color: #0b1c40;
    font-size: 18px;
    font-weight: 700;
}

.help-bo-article-content p {
    margin: 0 0 18px;
}

.help-bo-article-content ul,
.help-bo-article-content ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.help-bo-article-content li {
    margin-bottom: 8px;
}

.help-bo-article-content img {
    max-width: 100%;
    height: auto;
    margin: 24px 0;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
}

.help-bo-article-content blockquote {
    margin: 25px 0;
    padding: 18px 20px;
    border-left: 4px solid #ffbd00;
    border-radius: 0 12px 12px 0;
    background: #fff9e7;
}

.help-info-list {
    display: flex;
    flex-direction: column;
}

.help-info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f4;
}

.help-info-item:last-child {
    border-bottom: 0;
}

.help-info-item > span {
    color: #7b8496;
    font-size: 12px;
}

.help-info-item > strong,
.help-info-item > code {
    max-width: 65%;
    color: #0b1c40;
    font-size: 12px;
    font-weight: 650;
    text-align: right;
    overflow-wrap: anywhere;
}

.help-performance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.help-performance-item {
    padding: 16px;
    border: 1px solid #e5e8ee;
    border-radius: 13px;
    background: #f9fafb;
}

.help-performance-item span {
    display: block;
    margin-bottom: 5px;
    color: #7b8496;
    font-size: 11px;
}

.help-performance-item strong {
    color: #0b1c40;
    font-size: 22px;
    font-weight: 780;
}

.help-feedback-summary {
    padding-top: 4px;
}

.help-feedback-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f4;
}

.help-feedback-summary-row:last-child {
    border-bottom: 0;
}

.help-feedback-summary-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 14px;
}

.help-feedback-summary-row strong {
    color: #0b1c40;
    font-size: 15px;
}

.help-feedback-list {
    display: flex;
    flex-direction: column;
}

.help-feedback-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f4;
}

.help-feedback-item:last-child {
    border-bottom: 0;
}

.help-feedback-item-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.help-feedback-item-icon.positive {
    color: #067647;
    background: #ecfdf3;
}

.help-feedback-item-icon.negative {
    color: #b42318;
    background: #fef3f2;
}

.help-feedback-item-content {
    flex: 1;
    min-width: 0;
}

.help-feedback-item-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 4px;
}

.help-feedback-item-head strong {
    color: #0b1c40;
    font-size: 14px;
}

.help-feedback-item-head span {
    color: #8b94a5;
    font-size: 14px;
    white-space: nowrap;
}

.help-feedback-item-content p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.6;
}

.help-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.help-keywords span {
    padding: 7px 10px;
    color: #475467;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: #f2f4f7;
}

.help-action-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-action-list .btn {
    width: 100%;
}

.help-empty {
    padding: 35px;
    color: #8b94a5;
    text-align: center;
}

.help-empty i {
    display: block;
    margin-bottom: 12px;
    font-size: 28px;
}

.help-empty p {
    margin: 0;
}

@media (max-width: 650px) {
    .help-feedback-item-head {
        flex-direction: column;
        gap: 4px;
    }

    .help-info-item {
        flex-direction: column;
        gap: 5px;
    }

    .help-info-item > strong,
    .help-info-item > code {
        max-width: 100%;
        text-align: left;
    }
}

/* pro order profils */

.company-profile-order .profile-order-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
    padding: 18px 28px;
    border: 1px solid #e0e5ed;
    border-radius: 10px;
    background: #fff;
}

.company-profile-order .profile-order-step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #8a94a5;
}

.company-profile-order .profile-order-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -12%;
    width: 24%;
    height: 1px;
    background: #dce2eb;
    content: "";
}

.company-profile-order .profile-order-step > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #d4dbe6;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.company-profile-order .profile-order-step strong {
    font-size: 13px;
    font-weight: 700;
}

.company-profile-order .profile-order-step.is-active {
    color: #0b2048;
}

.company-profile-order .profile-order-step.is-active > span {
    border-color: #0b2048;
    background: #0b2048;
    color: #fff;
}

.company-profile-order .profile-order-step.is-completed {
    color: #198754;
}

.company-profile-order .profile-order-step.is-completed > span {
    border-color: #198754;
    background: #198754;
    color: #fff;
}

.company-profile-order .profile-order-card {
    overflow: hidden;
    border: 1px solid #e0e5ed;
    border-radius: 12px;
    background: #fff;
}

.company-profile-order .profile-order-card-header {
    padding: 22px 24px;
    border-bottom: 1px solid #e7eaf0;
}

.company-profile-order .profile-order-card-header h3 {
    margin: 0 0 5px;
    color: #252d3a;
    font-size: 18px;
    font-weight: 700;
}

.company-profile-order .profile-order-card-header p {
    margin: 0;
    color: #778195;
    font-size: 13px;
}

.company-profile-order .profile-order-card-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px;
}

.company-profile-order .profile-order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 24px;
    border-top: 1px solid #e7eaf0;
}

.company-profile-order .profile-order-card-footer form {
    margin: 0;
}

.company-profile-order .profile-order-section {
    padding-bottom: 26px;
    border-bottom: 1px solid #e7eaf0;
}

.company-profile-order .profile-order-section:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.company-profile-order .profile-order-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.company-profile-order .profile-order-section-number {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0b2048;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.company-profile-order .profile-order-section-heading h4 {
    margin: 2px 0 4px;
    color: #252d3a;
    font-size: 15px;
    font-weight: 700;
}

.company-profile-order .profile-order-section-heading p {
    margin: 0;
    color: #7c8698;
    font-size: 12px;
}

.company-profile-order .profile-quantity-box {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 1fr);
    align-items: center;
    gap: 30px;
    padding: 22px;
    border: 1px solid #e0e5ed;
    border-radius: 10px;
    background: #fafbfc;
}

.company-profile-order .profile-quantity-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-profile-order .profile-quantity-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d4dce8;
    border-radius: 7px;
    background: #fff;
    color: #0b2048;
    cursor: pointer;
}

.company-profile-order .profile-quantity-control button:hover {
    border-color: #fec430;
}

.company-profile-order .profile-quantity-control input {
    width: 100px;
    height: 42px;
    border: 1px solid #d4dce8;
    border-radius: 7px;
    color: #0b2048;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.company-profile-order .profile-quantity-control > span {
    color: #657187;
    font-size: 14px;
}

.company-profile-order .profile-current-price {
    padding-left: 30px;
    border-left: 1px solid #dce2ea;
}

.company-profile-order .profile-current-price > span {
    display: block;
    margin-bottom: 5px;
    color: #7b8597;
    font-size: 12px;
    text-transform: uppercase;
}

.company-profile-order .profile-current-price strong {
    display: block;
    color: #0b2048;
    font-size: 22px;
    font-weight: 800;
}

.company-profile-order .profile-current-price small {
    display: block;
    margin-top: 5px;
    color: #d78900;
    font-weight: 700;
}

.company-profile-order .profile-pricing-table {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #e0e5ed;
    border-radius: 9px;
}

.company-profile-order .profile-pricing-head,
.company-profile-order .profile-pricing-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
    align-items: center;
    padding: 13px 18px;
}

.company-profile-order .profile-pricing-head {
    border-bottom: 1px solid #e0e5ed;
    background: #f7f8fa;
    color: #69758a;
    font-size: 12px;
    font-weight: 700;
}

.company-profile-order .profile-pricing-row {
    position: relative;
    border-bottom: 1px solid #e8ebf0;
    color: #384457;
    font-size: 13px;
}

.company-profile-order .profile-pricing-row:last-child {
    border-bottom: 0;
}

.company-profile-order .profile-pricing-row strong {
    color: #0b2048;
    font-size: 14px;
}

.company-profile-order .profile-pricing-row strong small {
    color: #768195;
    font-weight: 400;
}

.company-profile-order .profile-pricing-row.is-active {
    background: #fff8e5;
}

.company-profile-order .profile-pricing-row.is-active::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #fec430;
    content: "";
}

.company-profile-order .profile-support-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.company-profile-order .profile-support-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid #dfe4ec;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.company-profile-order .profile-support-option input {
    position: absolute;
    opacity: 0;
}

.company-profile-order .profile-support-selector {
    width: 16px;
    height: 16px;
    border: 2px solid #cad2df;
    border-radius: 50%;
}

.company-profile-order .profile-support-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background: #f2f4f7;
    color: #0b2048;
}

.company-profile-order .profile-support-option strong,
.company-profile-order .profile-support-option small {
    display: block;
}

.company-profile-order .profile-support-option strong {
    margin-bottom: 4px;
    color: #263247;
    font-size: 13px;
}

.company-profile-order .profile-support-option small {
    color: #7c8698;
    font-size: 11px;
}

.company-profile-order .profile-support-option:has(input:checked) {
    border-color: #0b427e;
    box-shadow: inset 0 0 0 1px #0b427e;
}

.company-profile-order
    .profile-support-option:has(input:checked)
    .profile-support-selector {
    border: 5px solid #0b427e;
}

.company-profile-order .profile-card-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.company-profile-order .profile-card-product {
    position: relative;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 125px;
    padding: 14px;
    border: 1px solid #dfe4ec;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.company-profile-order .profile-card-product > input {
    position: absolute;
    opacity: 0;
}

.company-profile-order .profile-card-selector {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
    border: 2px solid #cad2df;
    border-radius: 50%;
}

.company-profile-order .profile-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 68px;
    overflow: hidden;
    border-radius: 7px;
    background: #f3f5f7;
}

.company-profile-order .profile-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-profile-order .profile-card-content strong,
.company-profile-order .profile-card-content small,
.company-profile-order .profile-card-content b {
    display: block;
}

.company-profile-order .profile-card-content strong {
    padding-right: 20px;
    color: #263247;
    font-size: 13px;
}

.company-profile-order .profile-card-content small {
    margin: 4px 0 10px;
    color: #7c8698;
}

.company-profile-order .profile-card-content b {
    color: #0b2048;
    font-size: 13px;
}

.company-profile-order .profile-card-product:has(input:checked) {
    border-color: #0b427e;
    box-shadow: inset 0 0 0 1px #0b427e;
}

.company-profile-order
    .profile-card-product:has(input:checked)
    .profile-card-selector {
    border: 5px solid #0b427e;
}

.company-profile-order .profile-order-info,
.company-profile-order .profile-order-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 17px;
    border-radius: 8px;
}

.company-profile-order .profile-order-info i,
.company-profile-order .profile-order-warning i {
    margin-top: 2px;
}

.company-profile-order .profile-order-info p,
.company-profile-order .profile-order-warning p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

.company-profile-order .profile-order-info {
    border: 1px solid #a9c9ef;
    background: #f0f6fd;
    color: #154e8b;
}

.company-profile-order .profile-order-warning {
    border: 1px solid #ecd28a;
    background: #fff9e9;
    color: #72571b;
}

.company-profile-order .profile-order-warning strong {
    display: block;
    margin-bottom: 8px;
}

.company-profile-order .profile-order-warning ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
}

.company-profile-order .profile-order-warning li + li {
    margin-top: 5px;
}

.company-profile-order .profile-order-preview,
.company-profile-order .profile-summary-prices,
.company-profile-order .profile-order-summary {
    overflow: hidden;
    border: 1px solid #dfe4ec;
    border-radius: 9px;
}

.company-profile-order .profile-order-preview > div,
.company-profile-order .profile-summary-prices > div,
.company-profile-order .profile-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    border-bottom: 1px solid #e7eaf0;
}

.company-profile-order .profile-order-preview > div:last-child,
.company-profile-order .profile-summary-prices > div:last-child,
.company-profile-order .profile-summary-line:last-child {
    border-bottom: 0;
}

.company-profile-order .profile-order-preview span,
.company-profile-order .profile-summary-prices span,
.company-profile-order .profile-summary-line span {
    color: #647087;
    font-size: 13px;
}

.company-profile-order .profile-order-preview strong,
.company-profile-order .profile-summary-prices strong,
.company-profile-order .profile-summary-line strong {
    color: #0b2048;
    font-size: 14px;
    text-align: right;
}

.company-profile-order .profile-order-preview-total,
.company-profile-order .profile-summary-total {
    background: #f5f7fa;
}

.company-profile-order .profile-order-preview-total span,
.company-profile-order .profile-order-preview-total strong,
.company-profile-order .profile-summary-total span,
.company-profile-order .profile-summary-total strong {
    color: #0b2048;
    font-size: 18px;
    font-weight: 800;
}

.company-profile-order .profile-summary-discount {
    background: #effaf3;
}

.company-profile-order .profile-summary-discount strong {
    color: #198754;
}

.company-profile-order .profile-order-success {
    max-width: 760px;
    margin: 30px auto;
    padding: 40px;
    border: 1px solid #e0e5ed;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.company-profile-order .profile-order-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e8f7ee;
    color: #198754;
    font-size: 25px;
}

.company-profile-order .profile-order-success h3 {
    margin-bottom: 8px;
    color: #0b2048;
    font-size: 22px;
}

.company-profile-order .profile-order-success > p {
    margin: 0 auto;
    color: #6f7a8e;
}

.company-profile-order .profile-order-success-reference {
    display: inline-flex;
    gap: 10px;
    margin-top: 20px;
    padding: 9px 14px;
    border-radius: 20px;
    background: #f4f6f8;
    font-size: 12px;
}

.company-profile-order .profile-order-success-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0;
}

.company-profile-order .profile-order-success-details div {
    padding: 16px;
    border: 1px solid #e2e6ed;
    border-radius: 8px;
}

.company-profile-order .profile-order-success-details span,
.company-profile-order .profile-order-success-details strong {
    display: block;
}

.company-profile-order .profile-order-success-details span {
    margin-bottom: 6px;
    color: #7b8597;
    font-size: 11px;
}

.company-profile-order .profile-order-success-details strong {
    color: #0b2048;
    font-size: 15px;
}

@media (max-width: 850px) {
    .company-profile-order .profile-quantity-box {
        grid-template-columns: 1fr;
    }

    .company-profile-order .profile-current-price {
        padding-top: 20px;
        padding-left: 0;
        border-top: 1px solid #dce2ea;
        border-left: 0;
    }

    .company-profile-order .profile-support-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .company-profile-order .profile-order-steps {
        padding: 15px 10px;
    }

    .company-profile-order .profile-order-step {
        flex-direction: column;
    }

    .company-profile-order .profile-order-step strong {
        font-size: 10px;
    }

    .company-profile-order .profile-order-step:not(:last-child)::after {
        display: none;
    }

    .company-profile-order .profile-order-card-body,
    .company-profile-order .profile-order-card-header,
    .company-profile-order .profile-order-card-footer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .company-profile-order .profile-order-card-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .company-profile-order .profile-order-card-footer a,
    .company-profile-order .profile-order-card-footer button,
    .company-profile-order .profile-order-card-footer form {
        width: 100%;
    }

    .company-profile-order .profile-pricing-head {
        display: none;
    }

    .company-profile-order .profile-pricing-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .company-profile-order .profile-order-success {
        padding: 26px 18px;
    }

    .company-profile-order .profile-order-success-details {
        grid-template-columns: 1fr;
    }
}

/* Bo order creation */

.order-create-page .profile-card {
    border: 1px solid #e8ebf1;
    border-radius: 12px;
    box-shadow: none;
}

.order-create-page .profile-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 16px 20px;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
}

.order-create-page .profile-card .card-body {
    padding: 20px;
}

.order-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 30px auto;
}

.order-context-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 28px;
    border: 2px solid #e8ebf1;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.order-context-card:hover {
    transform: translateY(-2px);
    border-color: #b8c9ec;
    box-shadow: 0 12px 30px rgba(22, 44, 88, 0.08);
}

.order-context-card:has(input:checked) {
    border-color: #315eb5;
    box-shadow: 0 0 0 4px rgba(49, 94, 181, 0.1);
}

.order-context-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
    border-radius: 14px;
    background: #edf3ff;
    color: #315eb5;
    font-size: 23px;
}

.order-context-card strong {
    margin-bottom: 10px;
    color: #1d2738;
    font-size: 19px;
}

.order-context-card small {
    color: #697386;
    font-size: 14px;
    line-height: 1.6;
}

.order-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.order-choice-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    padding: 12px 14px;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    cursor: pointer;
    width: calc(50% - 10px);
}

.order-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.order-form-actions.vertical {
    flex-direction: column-reverse;
    align-items: stretch;
}

.bo-selection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f5f7fb;
}

.bo-selection-summary span {
    color: #697386;
}

.bo-selection-summary strong {
    color: #1d2738;
    font-size: 20px;
}

.bo-summary-list {
    display: grid;
    gap: 0;
}

.bo-summary-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f5;
}

.bo-summary-list > div:last-child {
    border-bottom: 0;
}

.bo-summary-list span {
    color: #697386;
}

.bo-summary-list strong {
    color: #1d2738;
    text-align: right;
}

.bo-summary-profiles {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.bo-summary-profiles span {
    padding: 6px 10px;
    border-radius: 20px;
    background: #edf3ff;
    color: #315eb5;
    font-size: 12px;
}

.order-create-page .form-group {
    margin-bottom: 18px;
}

.order-create-page label {
    margin-bottom: 7px;
    color: #354052;
    font-weight: 500;
}

.order-create-page .table td,
.order-create-page .table th {
    vertical-align: middle;
}

@media (max-width: 991px) {
    .order-context-grid {
        grid-template-columns: 1fr;
    }

    .order-context-card {
        min-height: auto;
    }
}

@media (max-width: 575px) {
    .order-choice-row {
        flex-direction: column;
    }

    .order-choice-row label {
        width: 100%;
    }

    .bo-summary-list > div {
        flex-direction: column;
        gap: 5px;
    }

    .bo-summary-list strong {
        text-align: left;
    }
}

.bo-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bo-card-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 290px;
    margin: 0;
    border: 2px solid #e5e9f0;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.bo-card-choice:hover {
    transform: translateY(-2px);
    border-color: #b8c9ec;
    box-shadow: 0 10px 24px rgba(20, 42, 80, 0.08);
}

.bo-card-choice.selected {
    border-color: #315eb5;
    box-shadow: 0 0 0 4px rgba(49, 94, 181, 0.1);
}

.bo-card-choice > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bo-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5/3;
    background: #f5f7fb;
}

.bo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bo-card-image i {
    color: #315eb5;
    font-size: 42px;
}

.bo-card-image-empty {
    background: #edf3ff;
}

.bo-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
}

.bo-card-content strong {
    color: #1d2738;
    font-size: 16px;
}

.bo-card-variant {
    margin-top: 3px;
    color: #315eb5;
    font-size: 13px;
    font-weight: 600;
}

.bo-card-content small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 10px;
    color: #697386;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.bo-card-price {
    margin-top: auto;
    padding-top: 14px;
    color: #1d2738;
    font-size: 15px;
    font-weight: 700;
}

.bo-card-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #315eb5;
    color: #fff;
    font-size: 12px;
}

.bo-card-choice.selected .bo-card-check {
    display: flex;
}

@media (max-width: 1199px) {
    .bo-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .bo-card-grid {
        grid-template-columns: 1fr;
    }
}

.bo-order-sidebar {
    position: sticky;
    top: 20px;
    overflow: hidden;
}


.bo-summary-section {
    padding: 12px 0px;
    border-bottom: 1px solid #edf0f5;
}

.bo-summary-section:first-child {
    padding-top: 0;
}

.bo-summary-label {
    display: block;
    margin-bottom: 6px;
    color: #7a8495;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bo-summary-value {
    display: block;
    overflow-wrap: anywhere;
    color: #1d2738;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.bo-summary-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.bo-summary-inline span {
    min-width: 0;
    overflow: hidden;
    color: #4f5b6d;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-summary-inline strong {
    flex-shrink: 0;
    color: #1d2738;
    font-size: 14px;
}

.bo-summary-total {
    padding: 20px;
    background: #f5f8ff;
    border-bottom: 1px solid #dfe7f5;
}

.bo-summary-total label {
    display: block;
    margin-bottom: 8px;
    color: #354052;
    font-size: 13px;
    font-weight: 600;
}

.bo-total-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 2px solid #315eb5;
    border-radius: 10px;
    background: #fff;
}

.bo-total-input:focus-within {
    box-shadow: 0 0 0 4px rgba(49, 94, 181, 0.12);
}

.bo-total-input input {
    width: 100%;
    min-width: 0;
    padding: 13px 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1d2738;
    font-size: 22px;
    font-weight: 700;
}

.bo-total-input span {
    flex-shrink: 0;
    padding: 0 14px;
    color: #315eb5;
    font-size: 13px;
    font-weight: 700;
}

.bo-summary-total small {
    display: block;
    margin-top: 7px;
    color: #7a8495;
    font-size: 12px;
}

.bo-summary-payment {
    padding: 20px 0;
}

.bo-summary-payment .form-group:last-child {
    margin-bottom: 0;
}

.bo-payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 20px 20px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.bo-payment-notice.success {
    background: #edf9f1;
    color: #287a45;
}

.bo-payment-notice.pending {
    background: #fff7e8;
    color: #9a6518;
}

.bo-payment-notice i {
    margin-top: 2px;
    font-size: 16px;
}

.bo-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px 0;
}

@media (max-width: 991px) {
    .bo-order-sidebar {
        position: static;
    }
}

.subscription-price-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f5f7fb;
}

.subscription-price-preview span {
    color: #697386;
    font-size: 13px;
}

.subscription-price-preview strong {
    flex-shrink: 0;
    color: #1d2738;
    font-size: 14px;
}

.quantity-selector {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    overflow: hidden;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    background: #fff;
}

.quantity-selector button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #f4f6f9;
    color: #315eb5;
    cursor: pointer;
    transition: background 0.2s ease;
}

.quantity-selector button:hover {
    background: #e8eef9;
}

.quantity-selector button:disabled {
    color: #b3bac5;
    cursor: not-allowed;
}

.quantity-selector input {
    width: 100%;
    min-width: 0;
    padding: 10px 5px;
    border: 0;
    border-right: 1px solid #dfe3ea;
    border-left: 1px solid #dfe3ea;
    outline: 0;
    background: #fff;
    color: #1d2738;
    font-size: 17px;
    font-weight: 700;
    height: 45px;
    text-align: center;
    -moz-appearance: textfield;
}

.quantity-selector input::-webkit-inner-spin-button,
.quantity-selector input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.team-pricing {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    background: #fafbfe;
}

.team-pricing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.team-pricing-header div {
    display: flex;
    flex-direction: column;
}

.team-pricing-header strong {
    color: #1d2738;
    font-size: 14px;
}

.team-pricing-header span {
    color: #7a8495;
    font-size: 12px;
}

.team-current-tier {
    padding: 6px 10px;
    border-radius: 20px;
    background: #eaf1ff;
    color: #315eb5 !important;
    font-size: 12px !important;
    font-weight: 700;
}

.team-pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.team-pricing-tier {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #fff;
}

.team-pricing-tier.active {
    border-color: #315eb5;
    background: #edf3ff;
    box-shadow: 0 0 0 2px rgba(49, 94, 181, 0.08);
}

.team-pricing-tier span {
    color: #7a8495;
    font-size: 11px;
}

.team-pricing-tier strong {
    color: #1d2738;
    font-size: 13px;
}

.team-pricing-tier small {
    color: #697386;
    font-size: 10px;
}

.team-pricing-tier.active strong,
.team-pricing-tier.active span {
    color: #315eb5;
}

@media (max-width: 1199px) {
    .team-pricing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .team-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Subscription Plans */

.subscription-plan-card {
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.subscription-plan-header {
    padding: 22px;
    background: #ffffff;
    border-bottom: 1px solid #e3e8ef;
}

.plan-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.plan-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    font-size: 20px;
}

.plan-icon-business {
    color: #168f4b;
    background: #e4f7eb;
}

.plan-icon-team {
    color: #6247df;
    background: #eeeaff;
}

.plan-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.plan-title-row .card-title {
    color: #172033;
    font-size: 19px;
    font-weight: 700;
}

.plan-status {
    padding: 4px 9px;
    border-radius: 5px;
    color: #148744;
    background: #e5f6eb;
    font-size: 11px;
    font-weight: 600;
}

.team-duration {
    color: #697386;
    font-size: 13px;
}

.team-duration strong {
    color: #202b40;
}

.price-table-header {
    padding: 13px 22px;
    color: #5e6879;
    background: #fafbfc;
    border-bottom: 1px solid #e3e8ef;
    font-size: 12px;
    font-weight: 600;
}

.business-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.6fr;
    align-items: center;
    gap: 16px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 16px;
}

.price-table-row {
    min-height: 60px;
    padding: 17px 22px;
    border-bottom: 1px solid #edf0f4;
}

.price-table-row:last-child {
    border-bottom: 0;
}

.billing-cycle {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #172033;
}

.billing-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: #168f4b;
    background: #e9f8ee;
}

.price-value {
    color: #111a2e;
    font-size: 14px;
    font-weight: 700;
}

.duration-value {
    color: #455064;
    font-size: 13px;
    font-weight: 500;
}

.discount-badge {
    display: inline-flex;
    margin-left: 7px;
    padding: 3px 7px;
    border-radius: 5px;
    color: #168846;
    background: #e4f6e9;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.tier-quantity {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #172033;
}

.tier-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #6e50ea;
    box-shadow: 0 0 0 4px #efecff;
}

.pricing-information {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 17px;
    border: 1px solid #ccdaff;
    border-radius: 8px;
    color: #315ecf;
    background: #f5f8ff;
}

.pricing-information p {
    margin: 0;
    color: #38455e;
    font-size: 13px;
}

.empty-prices {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 20px;
    color: #858e9e;
    font-size: 13px;
}

@media (max-width: 767px) {
    .price-table-header {
        display: none;
    }

    .business-grid,
    .team-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}


/* Bo single order */


/* Bo prospect timeline */

.prospect-timeline {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.prospect-timeline-item {
    display: flex;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #00308729;
}

.prospect-timeline-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.prospect-timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0030871a;
    color: #003087;
}

.prospect-timeline-content {
    flex: 1;
    min-width: 0;
}

.prospect-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 4px;
}


/* Champs groupés (devise, unité...) : le libellé prend la hauteur du champ (45px).
   Sélecteur simple : les styles dédiés (connexion, devises) gardent la priorité. */
.input-group-text {
    align-self: stretch;
    height: auto;
    padding: 0 15px;
    background: #f1f4f8;
    border-color: #e1e2e2;
    color: #0b1c3f;
    font-weight: 500;
}

/* Champ fichier : le bouton « Parcourir » occupe toute la hauteur du champ */
.form-control[type="file"] {
    padding: 0 15px 0 0;
    line-height: 43px;
    overflow: hidden;
}

.form-control[type="file"]::file-selector-button {
    height: 100%;
    margin: 0 15px 0 0;
    padding: 0 18px;
    border: 0;
    border-right: 1px solid #e1e2e2;
    border-radius: 0;
    background: #f1f4f8;
    color: #0b1c3f;
    font-weight: 500;
}

.form-control[type="file"]:hover::file-selector-button {
    background: #e6ebf2;
}

/* Fiche commande : cartes Paiement et Client (colonne étroite) */
.order-side-card .card-infos .item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.order-side-card .card-infos .item .value {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.payment-card .btn {
    height: auto;
    min-height: 43px;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

.payment-card .payment-attempts {
    padding-left: 0;
}

.payment-card .payment-attempts li {
    list-style: none;
}

.payment-card .payment-attempts .reference {
    min-width: 0;
}