@font-face {
    font-family: 'Inter';
    src: url('../css/fonts/Inter-Bold.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Inter-Regular';
    src: url('../css/fonts/Inter-Regular.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Inter-Medium';
    src: url('../css/fonts/Inter-Medium.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Semi-Bold';
    src: url('../css/fonts/Inter-SemiBold.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Inter-Italic';
    src: url('../assets/dist/css/fonts/Inter-SemiBoldItalic.otf') format('truetype');
    font-style: normal;
}

html {
    font-family: 'Inter-Regular' !important;
}

body {
    font-size: 16px !important;
    font-family: 'Inter-Regular' !important;
    /* font-weight: 500 !important; */
}

.nav-link {
    position: relative;
    overflow: hidden;
    color: #000;
    transition: all 0.3s ease;
}

.brand-link {
    padding: 1.45rem 0.5rem !important;
}

input,
button,
select,
optgroup,
textarea {
    /* font-family: 'Inter-Regular' !important; */
    font-weight: 400 !important;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #FFF4F0;
    transition: left 0.3s ease;
    z-index: -1;
}

.modal-content {
    box-shadow: none !important;
}

.nav-link:active {
    transition: none;
    color: #F8591F !important;
}

.nav-link:hover {
    color: #F8591F !important;
    border-radius: 12px;
}

.nav-link rect {
    transition: all 0.3s ease;
}

.nav-link:active rect {
    transition: none;
    fill: #FFE3DA;
}

.nav-link:hover rect {
    fill: #FFE3DA;
}

.nav-link:hover::before {
    left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Semi-Bold';
    font-weight: 500 !important;
}

.error-msg {
    font-size: 0.9rem;
    margin-top: 5px;
}

label {
    font-weight: 500 !important;
    color: #000;
}

.btn-style {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(3rem + 2px);
    max-width: 225px !important;

}

button:hover {
    color: #F8591F !important;
    border: 1px solid #FBB39C;
    background-color: #FFECE6;
}

.toggle-icon {
    background-color: #FFE7DF;
    transition: all 0.3s ease;
}

.toggle-icon:hover {
    border-radius: 50%;
    border: none !important;
    background-color: #FFECE6;
}

.pagination-btn:hover {
    color: #F8591F !important;
    border: 1px solid #FBB39C;
    background-color: #FFECE6;
    border-radius: 50%;
}

.page-redirect-link .page-redirect-txt {
    transition: all 0.3s ease;
}

.page-redirect-link:active .page-redirect-txt {
    transition: none;
    color: #F8591F !important;
}

.page-redirect-link:hover .page-redirect-txt {
    color: #F8591F !important;
}

.page-redirect-icon {
    background-color: #FFECE6;
    transition: all 0.3s ease;
}

.page-redirect-link:active .page-redirect-icon {
    transition: none;
    background: #ffece6a6 !important;
}

.page-redirect-link:hover .page-redirect-icon {
    background: #ffece6a6 !important;
}

.btn-style:hover {
    background-color: #FFECE6;
    border: 1px solid #FBB39C;
    color: #F8591F !important;
    transition: all 0.3s ease;
}

.swal2-styled.swal2-cancel {
    font-size: 16px !important;
}

.swal2-styled {
    border: none;
}

.swal2-styled:hover {
    background-color: #FFECE6 !important;
    border: 1px solid #FBB39C !important;
    color: #F8591F !important;
    background-image: none !important;
}

.zetmaat-confirm-button:hover,
.zetmaat-cancel-button:hover,
.swal2-styled:hover {
    background-color: #FFECE6 !important;
    border: 1px solid #FBB39C !important;
    color: #F8591F !important;
    background-image: none !important;
}

input {
    border-color: #F8591F !important;
}

.text-primary-orange {
    color: #F8591F;
}

.bg-light-orange {
    background-color: #FFECE6;
}

.fs-4 {
    font-size: 22px;
}

.nav-item .nav-link p {
    font-size: 18px;
    font-family: "Inter-Medium";
}

@media (max-width: 567px) {
    .bottom-left-glow {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 100%;
        width: 250px;
        height: 250px;
        background: radial-gradient(circle at bottom left, #ffcbba 0%, transparent 70%);
        z-index: 0;
        pointer-events: none;
    }

    .main-header {
        border: none !important;
    }

    .delete_btn {
        width: 90% !important;
    }
}

.bottom-left-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle at bottom left, #fee5dc 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.bottom-right-glow {
    position: absolute;
    bottom: 0;
    /* left: 100%; */
    right: 0px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle at bottom right, #fee5dc 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.step-bottom-right-glow {
    position: absolute;
    bottom: 0;
    /* left: 100%; */
    right: 0px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at bottom right, #FFECE6 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.menu-bottom-right-glow {
    position: absolute;
    bottom: 0;
    right: 0px;
    width: 290px;
    height: 260px;
    /* width: 300px;
    height: 270px; */
    background: radial-gradient(circle at bottom right, #fee3d9 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.form-control:focus {
    border-color: #ff4500 !important;
    box-shadow: 0 0 0 0.1rem rgba(255, 69, 0, 0.25);
}

.form-control {
    border: 1.5px solid #ff4500 !important;
    padding-right: 2.5rem;
}

#toggle-password,
.toggle-password {
    border: none !important;
    background: transparent !important;
}

#toggle-password i,
.toggle-password i {
    color: #555;
}

#toggle-password:hover i,
.toggle-password:hover i {
    color: #ff4500;
}

.login-btn,
.btn-h {
    height: calc(3rem + 2px);
    max-width: 225px !important;
}

.otp-box {
    width: 60px;
    height: 60px;
    font-size: 24px;
    border: 2px solid #f8591f;
    border-radius: 12px;
    background-color: #ffffff;
    color: #999;
    box-shadow: none;
    transition: all 0.2s;
}

.otp-box:focus {
    border-color: #f8591f;
    outline: none;
    box-shadow: 0 0 0 0.1rem rgba(248, 89, 31, 0.25);
    color: #000;
}

.card-custom {
    border: 1.5px solid #f8591f73;
    border-radius: 16px;
    background: #fffdfc;
    transition: all 0.2s ease-in-out;
}

.card-custom:hover {
    box-shadow: 0 8px 16px rgba(248, 89, 31, 0.1);
}

.text-orange {
    color: #F8591F;
}

.bg-orange-light {
    background-color: #FFECE6;
}

.plan-check i {
    color: #F8591F;
    margin-right: 0.5rem;
}

.plan-link {
    color: #F8591F;
    font-weight: 500;
}

.plan-link:hover {
    text-decoration: underline;
}

.swal2-popup {
    border-radius: 1rem !important;
    width: 423px !important;
}

.swal2-html-container {
    margin: 1em 0.6em .3em !important;
}

.zetmaat-popup {
    border-radius: 16px;
    padding: 35px;
    max-width: 420px;
    text-align: left;
}

.zetmaat-actions {
    justify-content: flex-start !important;
}

.zetmaat-confirm-button,
.zetmaat-cancel-button {
    background-color: #FFECE6 !important;
    color: #F8591F !important;
    border: none !important;
    padding: 15px 40px !important;
    box-shadow: none !important;
    margin: 1em 0 0 0 !important;
    width: 47% !important;
    font-family: 'Inter-Regular' !important;
    border: 1px solid #FFECE6 !important;
    display: flex !important;
    justify-content: center !important;
}

.modal-content {
    border-radius: 15px !important;
}

.modal-body {
    padding: 2rem 2rem 1rem 2rem !important;
}

.custom-select {
    border: 1px solid #F8591F !important;
    border-radius: 6px;
    padding: 12px;
    height: 50px;
    color: #999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23F8591F' points='70,105 35,55 105,55'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5rem;
    appearance: none;
}

#selectProjectDropdown[aria-expanded="true"],
#panelSupplierDropdown[aria-expanded="true"],
#facadePanelDropdown[aria-expanded="true"],
#roofPanelDropdown[aria-expanded="true"] {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23F8591F' points='70,35 35,85 105,85'/%3E%3C/svg%3E");
}

.custom-btn {
    background-color: #FFECE6 !important;
    color: #F8591F !important;
    border: none;
    padding: 10px 16px;
    font-weight: 500;
    border-radius: 10px;
}

.my-popup-manu {
    transform: translate3d(0px, -165px, 0px) !important;
}

.custom-select-dropdown .custom-btn-select {
    width: 100%;
    text-align: left;
    background-color: white;
    /* color: #f8591f; */
    /* font-size: 14px; */
    border: 1px solid #f8591f;
    border-radius: 6px;
    padding: 10px 14px;
    position: relative;
}

.custom-select-dropdown .dropdown-menu {
    border-radius: 12px;
    max-height: 200px;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 0;
    top: 10px !important;
    /* top: 100% !important; */
    color: red;
}

.option-text {
    color: #c3c3c3;
    transition: all 0.3s ease-in-out;
}

.dropdown-menu {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: all 0.3s ease;
}

.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Dropdown menu box */

/* Scrollbar styling */
[data-dropdown="panel_supplier"] .dropdown-menu::-webkit-scrollbar {
    width: 4px;
}

[data-dropdown="panel_supplier"] .dropdown-menu::-webkit-scrollbar-track {
    border-radius: 12px;
    background: #FFFFFF;
}

[data-dropdown="panel_supplier"] .dropdown-menu::-webkit-scrollbar-thumb {
    background: #f8591f;
    border-radius: 12px;
}

.custom-select-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    color: #333;
    padding: 0 0 15px 0;
    margin: 0 0 15px 0;
    transition: all 0.5s ease-in-out;
    border-bottom: 1px solid #F6F6F6;
}

.custom-select-dropdown .dropdown-item:hover {
    background-color: #ffffff;
    color: #f8591f;
    border-bottom: 1px solid #F8591F;
}

.custom-select-dropdown .dropdown-item:hover .option-text {
    color: #F8591F;
}

.custom-select-dropdown .icon {
    color: #f8591f;
    margin-right: 10px;
    font-size: 16px;
}

.text-highlight {
    color: #F8591F;
    font-size: 18px;
}

.project-item {
    transition: all 0.3s ease;
}

.project-item:hover {
    /* border: 1px solid #F8591F !important; */
    border: 1.5px solid rgba(248, 89, 31, 0.45) !important;
}

.project-item,
.order-item {
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #C3C3C3;
}

.project-item.selected {
    /* border-bottom: 1px solid #F8591F !important; */
    border: 1.5px solid rgba(248, 89, 31, 0.45) !important;
}

.order-item.selected {
    /* border-bottom: 1px solid #F8591F !important; */
    border-bottom: 1.5px solid #F8591F !important;
    transition: all 0.3s ease;
}

/* .project-item.selected .nav-icon,
.order-item.selected .nav-icon {
    transform: rotate(45deg);
} */

.naviget-btn:hover .nav-icon,
.project-item:hover .nav-icon,
.order-item:hover .nav-icon {
    transform: rotate(45deg);
}

.project-item .nav-icon,
.order-item .nav-icon,
.project-item .m-auto,
.naviget-btn .nav-icon {
    transition: transform 0.3s ease;
}

.delete_btn {
    background: #f8591f;
    padding: .6rem 1.2rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff !important;
    width: 30%;
    position: fixed;
    bottom: 30px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.delete_btn:hover,
.create-btn-box:hover {
    color: #fff !important;
    background-color: #E44B14 !important;
}

.nav-link .nav-item hr {
    transition: all 0.3s ease;
}

.nav-link .nav-item:hover hr {
    background-color: #F8591F;
}

.nav-link .nav-item:active hr {
    transition: none;
    background-color: #F8591F;
}

hr {
    border-top: 1px solid #F6F6F6;
}

.my-custom-position {
    position: fixed;
    bottom: 30px !important;
}

.swal2-actions {
    margin-left: 0 !important;
    margin: 0 !important;
    margin: 0em 0.6em .3em !important;
    justify-content: space-between !important;
}

.nav-link p {
    font-size: 18px;
}

.text-black {
    color: #000000 !important;
}

.text-gray {
    color: #c3c3c3 !important;
}

.card {
    box-shadow: 0 0 10px #00000015 !important;
    /* border: #F0F0F0 solid 1px !important; */
    border: 1px solid #F0F0F0 !important;
    transition: all 0.3s ease-in-out;
}

.project_update_btn {
    color: #c3c3c3;
    transition: all 0.3s ease-in-out;
}

.project_update_btn:hover {
    color: #F8591F !important;
}


/* diagraaaaaaaaammm */

.toolbar {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    display: flex;
    border-radius: 15px;
    justify-content: space-between;
    box-shadow: 0 0 10px #00000015 !important;
    width: 406px;
    padding: 10px 17px;
    height: 73px;
}

.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: #c3c3c3;
}

.tool-btn:hover {
    color: #F8591F;
}

.tool-btn.active {
    color: #F8591F;
}

.tool-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.canvas-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 65vh !important;
}

#drawingCanvas {
    border: 1px solid #e9e9e9;
    background: white;
    cursor: crosshair;
    display: block;
}

.controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: white;
    padding: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px;
}

.grid-control {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d1d5db;
}

.grid-control select {
    width: 100%;
    padding: 0.25rem;
    font-size: 10px;
    margin-top: 0.25rem;
}

.footer {
    background-color: #1f2937;
    color: white;
    padding: 0.5rem;
    text-align: center;
    font-size: 12px;
}

.separator {
    height: 1px;
    background-color: #d1d5db;
    margin: 0.5rem 0;
}

.reset-btn {
    margin-top: auto;
    margin-bottom: 0.5rem;
    color: #ef4444;
}

.file-input {
    display: none;
}

#undoBtn,
#fullscreenBtn {
    position: absolute;
    /* top: 20px; */
    right: 20px;
    background: #000;
    color: #ffffff;
}

#undoBtn {
    top: 70px;
    background: #FFECE6 !important;
    color: #F8591F !important;
}

#zoomInBtn {
    position: absolute;
    bottom: 40px;
    right: 20px;
    background: #FFECE6 !important;
    color: #F8591F !important;
}

#zoomOutBtn {
    position: absolute;
    bottom: 25px;
    right: 20px;
    background: #FFECE6 !important;
    color: #F8591F !important;
}

.fullscreen-canvas {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1050;
    background: white;
}

.dia-btn {
    background: #FFECE6 !important;
    color: #F8591F !important;
    bottom: 0;
    height: 40px;
    width: 40px;
}

.dia-btn-box {
    position: absolute;
    bottom: 25px;
    left: 20px;
}

.save_profile:hover .save_profile_btn_txt {
    color: #F8591F;
}

@media (min-width: 992px) {
    .my-custom-position {
        position: relative;
        bottom: 0px !important;
        width: 100%;
    }
}

/* step overview */

#stepOverviewPanel {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 426px;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0);
    z-index: 1050;
    transition: right 0.4s ease-in-out;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    border-left: #F6F6F6 2px solid;
}

#stepOverviewPanel.show {
    right: 0;
}

#stepOverviewPanel ul {
    list-style: none;
    padding: 0;
}

#stepOverviewPanel ul li {
    padding: 15px 0;
    font-size: 20px;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    color: #000000;
    font-family: "Inter-Medium";
    transition: all 0.3s ease;
}

#stepOverviewPanel ul li:hover {
    border-color: #F8591F !important;
}

.overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1.5px);
    background-color: rgba(0, 0, 0, 0.42);
    z-index: 1049;
    display: none;
}

.overlay-bg.show {
    display: block;
}

.overview-active {
    border-bottom: 1px solid #F8591F !important;
}

.modal-content {
    width: 423px !important;

}

.modal-content .modal-title {
    font-size: 24px !important;
    color: #000000;
}

@media (max-width: 768px) {
    #stepOverviewPanel {
        width: 100% !important;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.mobile-menu-title {
    font-size: 20px;
    /* font-weight: 600; */
    font-family: "Inter-Medium";
    color: #000000;
}

.mobile-menu-ul .active {
    border-bottom: #F8591F 1px solid !important;
}

.max-60-vh {
    height: auto;
    max-height: 60vh;
    overflow-y: auto;
}

.max-60-vh::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.max-60-vh::-webkit-scrollbar-thumb {
    background: #F8591F;
    border-radius: 6px;
}

.page-header-title {
    font-size: 32px;
    font-weight: 600 !important;
}

.acc-page-title {
    font-size: 26px;
    font-weight: 600 !important;
}

.page-sub-title {
    font-size: 26px;
}

.create-btn-box,
.project-item {
    height: 80px;
    border-radius: 12px;
}

.diagram-selection-title {
    font-size: 18px;
}

.diagram-option {
    width: 221px;
    height: 144px;
}

.diagram-option .card:hover {
    border: 1.5px solid #f8591f73 !important;
    box-shadow: none;
}

.scrol-area {
    max-height: calc(65vh);
    overflow-y: auto;
}

.auth-page-title {
    font-size: 45px;
    font-family: 'Semi-Bold';
}

input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.right-box {
    background: #F8591F;
    height: 100%;
    border-radius: 35px;
    /* width: 46.6875rem; */
    position: relative;
    overflow: hidden;
}

.first-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 99999;
}

/*______subscription______ */
.plans-card-h {
    font-size: 20px;
    font-family: "Semi-Bold" !important;
}

.plan-option {
    border: 1.5px solid #F0F0F0;
    border-radius: 12px;
    padding: 10px 20px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-option input {
    display: none;
}

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

.plan-label {
    font-size: 14px;
    color: #999;
}

.plan-price {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge {
    font-size: 13px;
    background: #FFECE6;
    color: #F8591F;
    padding: 7px 8px;
    border-radius: 8px;
    font-weight: 500 !important;
}

.checkmark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.checkmark::after {
    content: "✓";
    font-size: 14px;
    color: #F8591F;
    display: none;
}

.plan-option input:checked~.plan-content .checkmark {
    background: #FFECE6;
    border-color: #FFECE6;
}

.plan-option input:checked~.plan-content .checkmark::after {
    display: block;
}

.plan-option:has(input:checked) {
    border: 1.5px solid #F8591F;
}

/*______payment methods______*/

.payment-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payment-option {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 12px 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.3s ease;
    margin-bottom: 0 !important;
}

.payment-option input {
    display: none;
}

.payment-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-logo {
    width: 48px;
    height: auto;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 4px;
}

.payment-label {
    font-weight: 500;
    color: #000;
}

.payment-option:has(input:checked) {
    border-color: #F8591F;
}

.payment-option:has(input:checked) .checkmark {
    background: #FFECE6;
    border-color: #FFECE6;
}

.payment-option:has(input:checked) .checkmark::after {
    display: block;
}

/* date design */
/* Remove default picker icon */
.custom-month-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.custom-month-input::-webkit-inner-spin-button,
.custom-month-input::-webkit-clear-button {
    display: none;
}

/* Force placeholder to show */
.custom-month-input:before {
    content: attr(placeholder);
    color: #aaa;
    position: absolute;
    left: 14px;
}

.custom-month-input:valid:before {
    content: "";
}

#expiry_date::-webkit-datetime-edit,
#expiry_date::-webkit-inner-spin-button,
#expiry_date::-webkit-clear-button {
    display: none;
}

#expiry_date {
    background-color: #ffffff !important;
}

#expiry_date::before {
    content: attr(data-display);
    color: #000;
    position: absolute;
    left: 14px;
}

#expiry_date:focus::before {
    content: "";
}

.custom-checkbox {
    display: flex;
    /* align-items: center; */
    font-size: 14px;
    color: #666;
    cursor: pointer;
    user-select: none;
}

.custom-checkbox input {
    display: none;
    /* hide default checkbox */
}

.custom-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #f15a24;
    /* orange border */
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

/* when checked → orange bg + white check */
.custom-checkbox input:checked+.checkmark {
    background-color: #f15a24;
    border-color: #f15a24;
}

.custom-checkbox input:checked+.checkmark::after {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkmark::after {
    content: "✓";
    font-size: 14px;
    color: #F8591F;
    display: none;
}


/* style links */
.custom-checkbox a {
    font-weight: 600;
    color: #444;
    text-decoration: none;
}

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

.logout_btn {
    width: calc(302px - 0.5rem * 2);
    color: #c3c3c3;
    transition: all 0.3s ease;
}

.logout_btn:hover {
    color: #F8591F !important;
    box-shadow: none !important;
}

.modal.show,
.swal2-backdrop-show {
    backdrop-filter: blur(1.5px);
    background-color: rgba(0, 0, 0, 0);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111 !important;
    -webkit-box-shadow: 0 0 0 1000px #fef4f2 inset !important;
    box-shadow: 0 0 0 1000px #fef4f2 inset !important;
    caret-color: #111;

    /* 🔑 disable Chrome autofill transition */
    transition: background-color 9999s ease-in-out 0s !important;
}

input:-webkit-autofill {
    transition: background-color 0s ease-in-out 0s !important;
}

/* upload img style */

.upload-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px dashed rgba(248, 89, 31, 0.6);
    border-radius: 12px;
    max-width: 346px;
    height: 75px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-box:hover {
    background: rgba(248, 89, 31, 0.02);
    border-color: #F8591F;
}

.upload-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 89, 31, 0.1);
    border-radius: 8px;
    font-size: 22px;
    color: #F8591F;
}

.spinner {
    border: 2px solid rgba(248, 89, 31, 0.2);
    border-top: 2px solid #F8591F;
    border-radius: 50%;
    width: 22.49px;
    height: 22.49px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.upload-text {
    display: flex;
    flex-direction: column;
}

.upload-title {
    font-size: 15px;
    font-weight: 500;
    color: #F8591F;
}

.upload-subtitle {
    font-size: 12px;
    color: #C3C3C3;
    font-weight: 400;
}

.hidden {
    display: none !important;
}

.diagram-item {
    width: 250px;
    height: 165px;
}

.saved-diagram-item {
    width: 250px;
    height: 165px;
}

/* .profile-box {
    justify-content: start;
    gap: 10px 30px;
} */

.saved-profile-box {
    justify-content: start;
    gap: 30px 60px;
}

.page-redirect-icon {
    width: 27px;
    height: 27px;
}

.nav-info-icon {
    width: 42px;
    height: 42px;
}

.mobile-menu-link:focus .mobile-menu-title,
.mobile-menu-link:focus svg rect {
    transition: none;
    /* color: #F8591F;
    fill: #FFECE6; */
    color: #f8591fe1 !important;
    fill: #fff0eb !important;
    filter: blur(.1px);
}

/* .mobile-menu-link:active .mobile-menu-title,
.mobile-menu-link:active svg rect {
    transition: none;
    color: #ff926a !important;
    fill: #fff0eb !important;
    filter: blur(.4px);
} */

.li-focus {
    border-bottom: 1.5px solid #F8591F !important;
    transition: all 0.3s ease;
    background: #FFF4F0 !important; 
    color: #F8591F !important;  
}

.popup-title {
    font-size: 22px;
}

.popup-sub-title {
    margin: 0;
    line-height: 25px;
}

.profile-select-icon {
    width: 30px;
    height: 30px;
}

.profile-detail-txt {
    font-size: 20px;
}

.profile-detail-icon,
.profile-update-icon {
    width: 30px;
    height: 30px;
}

.mobile-menu-ul li.active .mobile-menu-title {
    color: #F8591F;
}

.headboards-left-title {
    font-size: 22px;
}

.headboard-add-icon {
    width: 27px;
    height: 27px;
}

.measure-text {
    font-size: 22px;
    font-weight: 600;
}

.dia-detais-txt-title {
    font-family: "Inter-Medium";
    font-weight: 500 !important;
}

/*_____________________________________________________*/

@media (min-width: 430px) and (max-width: 992px) {
    .my-custom-position {
        width: 95% !important;
    }

    /* .profile-box {
        gap: 0px !important;
    } */

    .diagram-item {
        width: 180px !important;
        height: 150px !important;
    }

    .toolbar {
        width: 380px !important;
    }

}

@media (min-width: 400px) and (max-width: 429px) {
    .my-custom-position {
        width: 95% !important;
    }

    .profile-box {
        gap: 0px !important;
    }

    .diagram-item {
        width: 185px !important;
        /* width: 145px; */
        height: 150px !important;
    }
}

@media (min-width: 300px) and (max-width: 399px) {

    .my-custom-position {
        width: 95% !important;
    }

    .page-header-title {
        font-size: 23px !important;
    }

    .profile-box {
        gap: 0px !important;
    }

    .diagram-item {
        width: 160px !important;
        /* width: 145px; */
        height: 150px !important;
    }

    .toolbar {
        width: 290px !important;
    }
}

/* Mobile landscape */
@media (min-width: 300px) and (max-width: 992px) {

    #delete_left_head,
    #delete_right {
        font-size: 12px !important;
    }

    .btn-style {
        font-size: 14px;
    }

    .modal-body {
        padding: 1.5rem 1.5rem 1rem 1.5rem !important;
    }

    .plans-card-h {
        font-size: 18px;
    }

    .plan-active-txt {
        font-size: 14px;
        font-weight: 600;
    }

    .modal-dialog {
        width: auto !important;
    }

    .mesure-data {
        font-size: 14px;
    }

    .measure-text {
        font-size: 18px;
    }

    .profile-select-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .profile-select-icon svg {
        width: 10px;
        height: 10.50px;
    }

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

    .toggle-content {
        font-size: 14px;
    }

    .toggle-content svg {
        width: 8px;
        height: 12px;
    }

    .profile-detail-icon,
    .profile-update-icon {
        width: 23px;
        height: 23px;
    }

    .profile-detail-icon svg {
        width: 9px;
        height: 9px;
    }

    .profile-update-icon svg {
        width: 10px;
        height: 10px;
    }

    .profile-detail-txt {
        font-size: 18px;
    }

    .page-header-title {
        font-size: 26px;
    }

    .page-header-title {
        font-weight: 600 !important;
        /* font-family: "Inter-medium"; */
    }

    .acc-page-title {
        font-size: 22px;
        font-family: "Inter-regular";
    }

    .page-sub-title {
        font-size: 22px;
    }

    .text-highlight {
        font-size: 16px;
    }

    .page-back-text {
        font-size: 14px;
    }

    .create-btn-box,
    .project-item {
        height: 67px;
    }

    .diagram-selection-title {
        font-size: 14px;
    }

    .scrol-area {
        max-height: calc(100vh - 380px);
        overflow-y: auto;
    }

    .auth-page-title {
        font-size: 26px;
    }

    .auth-bottom-txt {
        font-size: 14px;
    }

    /* .diagram-item {
        width: 160px;
        width: 145px;
        height: 140px;
    } */

    .profile-box {
        /* justify-content: space-between; */
        gap: 0px 34px;
    }

    .saved-profile-box {
        justify-content: start;
        gap: 20px 22px;
    }

    .saved-diagram-item {
        width: 173px;
        height: 119px;
    }

    .nav-info-icon {
        width: 35px;
        height: 35px !important;
    }

    .nav-info-icon svg {
        width: 22px;
        height: 22px;
    }

    .my-custom-position {
        width: 92%;
    }

    .main-header {
        padding-bottom: 0 !important;
    }

    .project-create-btn-box,
    .order-create-btn-box {
        margin-top: 15px !important;
    }

    .delete_btn {
        font-size: 14px;
    }

    .toolbar {
        width: 362px !important;
        padding: 10px 17px;
    }

    #delete_seam {
        font-size: 12px;
        padding: 2px 5px;
    }

    #end_add_space_lenght_form div label,
    #add_space_lenght_form div label {
        /* font-size: 14px; */
    }

    .headboards_box {
        gap: 25px !important;
    }

    .step_overview_btn svg {
        width: 10.78px;
        height: 10.78px;
    }

    .step_overview_btn {
        font-size: 13px;
    }

    .toggle-icon .toggle-icon-hw {
        width: 23px !important;
        height: 23px !important;
    }

    .toggle-icon .toggle-icon-hw svg {
        width: 8.75px !important;
        height: 8.75px !important;
    }

    .popup-title {
        font-size: 20px;
    }

    .zetmaat-confirm-button,
    .zetmaat-cancel-button {
        margin: .6em 0 0 0 !important;
    }

    .project-item .nav-icon svg,
    .order-item .nav-icon svg {
        width: 8px;
        height: 8px;
    }

    .project-item .nav-icon,
    .order-item .nav-icon {
        width: 27px !important;
        height: 27px !important;
    }

    .zetmaat-popup {
        top: 10px !important;
    }

    .popup-sub-title {
        font-size: 14px !important;
        line-height: 20px;
    }

    .order-item.selected {
        transition: none !important;
    }

    .project-item,
    .order-item {
        transition: none !important;
    }

    .project-item.selected {
        transition: none;
    }

    .main-header {
        border-bottom: none !important;
    }

    .add-diagram-txt,
    .edit-diagram-txt {
        font-size: 14px;
    }

    .add-diagram-icon,
    .edit-diagram-icon {
        width: 23px;
        height: 23px;
    }

    .add-diagram-icon svg {
        width: 10px;
        height: 10px;
    }

    .edit-diagram-icon svg {
        width: 11px;
        height: 11px;
    }

    .headboards-left-title {
        font-size: 18px;
    }

    .headboard-add-txt {
        font-size: 14px;
    }

    .headboard-add-icon {
        width: 23px;
        height: 23px;
    }

    .headboard-add-icon svg {
        /* width: 9.33px; */
        height: 9.33px;
    }

    /* #zoomOutBtn {
        bottom: 130px;
    } */
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1023px) {
    .page-header-title {
        font-size: 26px;
    }

    .page-sub-title {
        font-size: 22px;
    }

    .text-highlight {
        font-size: 16px;
    }

    .page-back-text {
        font-size: 14px;
    }

    .create-btn-box,
    .project-item {
        height: 67px;
    }

    .diagram-selection-title {
        font-size: 14px;
    }

    .scrol-area {
        max-height: calc(100vh - 400px);
        overflow-y: auto;
    }

    .auth-page-title {
        font-size: 26px;
    }

    .auth-bottom-txt {
        font-size: 14px;
    }


}

@media (min-width: 1024px) {
    .profile-box {
        gap: 0px 55px;
    }

    .create-btn-txt {
        font-size: 18px;
    }

    .dia-detais-txt-title {
        font-size: 20px;
        font-family: "Inter-Regular";
        font-weight: 600 !important;
    }
}

/* Tablet landscape / Small desktops */
/* @media (min-width: 1024px) and (max-width: 1279px) {
    body {
        font-size: 22px;
    }
} */

/* Small desktop / laptops */
/* @media (min-width: 1280px) and (max-width: 1440px) {
    body {
        font-size: 24px;
    }
} */

/* Large desktops */
@media (min-width: 1441px) and (max-width: 1919px) {
    body {
        font-size: 26px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    /* body {
        font-size: 28px;
    } */

    .diagram-item {
        /* width: 379px;
        height: 265px; */
        width: 250px;
        height: 165px;
    }

    .profile-box {
        justify-content: space-between;
        gap: 0px 55px;
    }
}