.cust-badge {
   height: 32px;
   padding: 0 12px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50px;
   font-size: 14px;
}

.orange-500 {
   color: #d9822b !important;
}

.bg-orange-100 {
   background-color: #ffe0bf !important;
}
/*
.inset-shadow {
   box-shadow: 0 0 0 1px #d3d7e1;
} */

.circles i {
   border-radius: 50%;
}

.indicater-p {
   display: flex;
   justify-content: start;
   gap: 8px;
   align-items: center;
}

.indicater-p i {
   border-radius: 50%;
}

.indicater-p i::before {
   border-radius: 50%;
}

.indicater-p i.text-white::before {
   border: 1px solid #d3d7e1;
}

.avatar-card-inner {
   display: flex;
   align-items: center;
   gap: 12px;
}

.avatar-card-inner .icon {
   border-radius: 50%;
   min-width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #2f8f5e;
   color: white;
}

.prodect-card-gray .card-content p,
.cust-progress p {
   color: #445794;
   margin: 0;
}

.bg-green-200 {
   background-color: #b4dbc6 !important;
}

.shadow-unset {
   box-shadow: unset;
}

.prodect-card-gray.col-flex {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.bg-primary-100 {
   background-color: #d9eef7 !important;
}

.bg-secondary-500 {
   background-color: #051855 !important;
}

.bg-gray-300 {
   background-color: #c1c7d7 !important;
}

.bg-green-100 {
   background-color: #b4dbc6 !important;
}

.bg-secondery-100 {
   background-color: #ccd4ed !important;
}

.red-500 {
   color: #b93838 !important;
}

.bg-red-500 {
   background-color: #b93838 !important;
}

.bg-red-100 {
   background-color: #fbecec !important;
}

.bg-red-200 {
   background-color: #f3c3c3 !important;
}

.rounded-full {
   border-radius: 50% !important;
}

.mw-unset {
   min-width: unset !important;
}

.prodect-card-gray .product-title {
   flex-wrap: wrap;
   gap: 10px;
}

.primary-blue-300 {
   color: #445794 !important;
}

.white-bg-card {
   background-color: white;
   padding: 20px;
   border: 1px solid #d3d7e1;
   border-radius: 8px;
}

.white-bg-card h4 {
   font-size: 20px;
   font-weight: 500;
}

.btn-2.red {
   background-color: #b93838;
   border-color: #b93838;
}

.top-space {
   margin-top: 156px;
}
.truncate-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.btn-2.red:hover {
   background-color: transparent;
   color: #b93838;
}

.prodect-card-gray.para-m-0 p {
   margin: 0;
}

.orange-border-500 {
   border: 1px solid #d9822b !important;
}

.green-border-500 {
   border: 1px solid #2f8f5e !important;
}

.primary-border-500 {
   border: 1px solid #008bcb !important;
}

.secondery-border-500 {
   border: 1px solid #051855 !important;
}

.snapshot .avatar {
   min-width: 38px;
   width: 38px;
   aspect-ratio: 1;
   height: unset;
}

.snapshot .avatar-lg {
   min-width: 60px;
   width: 60px;
}

.snapshot .avatar-md {
   min-width: 48px;
   width: 48px;
}

.snapshot .colors-box .avatar {
   width: 28px;
   min-width: 28px;
   border-radius: 4px;
}

.max-w-unset {
   max-width: unset !important;
}

.primary-select {
   background-color: transparent;
   padding-right: 40px;
   background-image: url(../img/custom/arrow-down-primary.svg);
   background-size: 12px 12px;
   border: 1px solid #45a4ff;
   border-radius: 30px;
   color: #45a4ff;
   font-weight: 500;
}

.web .btn-2.outline-primary-btn {
   background-color: transparent;
   color: #45a4ff;
}

.web .btn-2.outline-primary-btn:hover {
   background-color: #051855;
   color: white;
   border-color: #051855;
}

.cust-vart-tabs.cust-vart-tabs-v2 {
   border: unset;
}
.cust-vart-tabs.cust-vart-tabs-v2 .tab-content {
   border-left: unset;
   overflow: auto;
}

.cust-vart-tabs.cust-vart-tabs-v2 .tab-content::-webkit-scrollbar {
   display: none;
}

.cust-vart-tabs.cust-vart-tabs-v2 .inputs-box {
   border: 1px solid #c1c7d7;
   border-radius: 0;
}

.cust-vart-tabs.cust-vart-tabs-v2 .inputs-box input {
   border: unset;
}

.cust-vart-tabs.cust-vart-tabs-v2 .inputs-box input:last-child {
   max-width: 120px;
}
.cust-vart-tabs.cust-vart-tabs-v2 .inputs-box input:last-child.form-control:focus {
   box-shadow: unset;
}

.cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper .content {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper {
   position: relative;
   z-index: 1;
   max-width: 500px;
}
.cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper::before {
   content: "";
   position: absolute;
   z-index: -1;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 60%;
   background-color: #eff2f9;
   border: 1px solid #d3d7e1;
}

.screen-print-wrapper .text:last-child h4 {
   padding: 44px 0 24px 24px;
}

.cust-vart-tabs.cust-vart-tabs-v2 .sublimation .text:last-child {
   border-bottom: 0;
}
.cust-vart-tabs.cust-vart-tabs-v2 .sublimation .text {
   padding: 16px;
   border-bottom: 1px solid #c1c7d7;
}
.cust-vart-tabs.cust-vart-tabs-v2 .sublimation .image img {
   max-height: unset;
}

.payment-tabs .cust-vart-tabs.cust-vart-tabs-v2 .sublimation td.td-style {
   padding: 0 !important;
}
.charges-tab .cust-table tr th:last-child,
.charges-tab .cust-table tr td:last-child {
   text-align: end;
}

.orders .filter-btns button.active span {
   background-color: #d9eef7;
   color: #008bcb;
}

/* order process page  */
@media (min-width: 768px) {
   .order-process .track-wrapper .row .col-md-auto {
      width: 10%;
   }
}

.title-bg-gray {
   background-color: #eff2f9;
   height: 43px;
   display: flex;
   align-items: center;
   font-weight: 500 !important;
   padding: 0 16px;
   font-size: 16px;
   font-size: 20px !important;
}

.tr-images {
   display: flex;
   gap: 10px;
   align-items: center;
}

.tr-images img {
   max-width: 65px;
   max-height: unset !important;
}

.outline-box-select {
   height: auto;
   padding: 0;
   overflow: hidden;
}

.outline-box-select h4 {
   height: 65px;
   border-bottom: 1px solid #c1c7d7;
}

.shirt-title input {
   width: 100%;
   height: 35px;
   background-color: #e2e8fa;
   border: 1px solid #d3d7e1;
   outline: unset !important;
   padding: 0 10px;
   border-radius: 8px;
}

select.select-cust-outline {
   height: 60px;
   background-image: url(../../img/custom/arrow-down-outline.svg);
}

.colors-box .box .avatar.active {
   outline: 3px solid #008bcb;
}

.print-shirt-card {
   position: relative;
   z-index: 1;
   margin: 90px 0 50px;
}

.print-shirt-card .main-img {
   max-width: 335px;
   margin: auto;
}

.print-point {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   max-width: 185px;
   max-height: 235px;
   border-radius: 8px;
   overflow: hidden;
}

.print-area {
   width: 100%;
   min-height: 192px;
}

.cust-toast {
   background-color: #eff2f9;
   padding: 12px 20px;
}

.max-w-330 {
   max-width: 330px;
}

.snapshot .prodect-card-gray {
   height: 100%;
   border: unset;
}
.snapshot .card-v2 .avatar-card-inner h5 {
   color: #545d76 !important;
   font-size: 16px;
   font-weight: 400;
}

.snapshot .card-v2 .avatar-card-inner p {
   color: #8c94b4 !important;
   font-size: 14px;
}

/* header  */
.header-tabs .search-bar {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   width: auto;
   padding: 0 20px;
}

.header-tabs {
   position: relative;
   z-index: 1;
}

.header-tabs .nav-tabs {
   overflow: auto hidden;
   flex-wrap: nowrap;
   max-width: calc(100% - 40px);
}

.header-tabs .nav-tabs::-webkit-scrollbar {
   height: 2px !important;
   display: block !important;
}

.header-tabs .nav-tabs::-webkit-scrollbar-track {
   background-color: #45a4ff;
}

.header-tabs .nav-tabs::-webkit-scrollbar-thumb {
   background-color: white;
}

.color-select option:hover {
   background-color: unset;
}

.list-badge {
   background-color: #e6f3ed;
   color: #2f8f5e;
   border-radius: 21px;
   padding: 4px;
   max-width: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
}
.list-badge i {
   font-size: 5px;
}

.underline-hover:hover {
   text-decoration: underline !important;
}

/* mediaQuery  */
@media (max-width: 991px) {
   .track-wrapper .tracking-card-v2 .inner-content h6,
   .track-wrapper .tracking-card-v2 .inner-content p {
      font-size: 12px;
   }
}

@media (max-width: 767px) {
   .flex-wrap-mob {
      flex-direction: column-reverse;
      align-items: flex-end;
      gap: 10px;
   }

   .white-bg-card {
      padding: 15px;
   }

   .snapshot .prodect-card-gray h4 {
      font-size: 18px;
   }

   .snapshot .prodect-card-gray .white-bg-card {
      flex-direction: column;
      gap: 15px;
      position: relative;
   }
   .snapshot .prodect-card-gray .white-bg-card button {
      width: 100%;
   }

   .snapshot .prodect-card-gray .white-bg-card .flat-btn {
      position: absolute;
      z-index: 0;
      top: 7px;
      right: 10px;
      max-width: 10px;
   }

   .snapshot .prodect-card-gray .white-bg-card .flat-btn i {
      font-size: 14px;
   }

   .top-space {
      margin-top: 30px;
   }

   .cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper::before {
      height: 100%;
   }

   .cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper .row {
      width: 100%;
   }

   .cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper h4 {
      padding: 0;
   }

   .track-wrapper .tracking-card-v2 {
      margin-bottom: 20px;
   }

   .track-wrapper .tracking-card-v2 .inner-content {
      flex-direction: column;
      gap: 0;
   }

   .track-wrapper .tracking-card-v2 .track-icon {
      height: 45px;
   }

   .cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper {
      padding: 15px;
   }

   .prodect-card-gray.mob-card-style .white-bg-card .avatar-card-inner {
      flex-wrap: wrap;
      gap: 10px;
   }

   .prodect-card-gray.mob-card-style .white-bg-card .btn-2,
   .prodect-card-gray.mob-card-style .white-bg-card .buttons {
      width: 100%;
   }

   .prodect-card-gray.mob-card-style .white-bg-card p {
      font-size: 14px;
      margin-top: 10px;
   }
   .wrap-mob {
      flex-direction: column;
      gap: 10px;
      align-items: start !important;
   }
}
.outline-box .close-btn {
   display: none;
   position: absolute;
   top: 8px;
   right: 8px;
}

.outline-box.has-image .uplode-content {
   display: none;
}

.outline-box.has-image .close-btn {
   display: block;
}

.outline-box .preview-area {
   min-height: 60px;
   text-align: center;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
}

.outline-box .preview-area img {
   max-width: 130px;
   max-height: 80px;
   object-fit: contain;
}

/* .print-shirt-card .main-img svg {
} */

.color-shirt {
   --shirt-color: #b93838;
}

.color-shirt path {
   fill: var(--shirt-color);
}

.counter-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 15px;
   background-color: #e2e8fa;
   border: 1px solid #d3d7e1;
   border-radius: 4px;
}

.counter-box span {
   font-size: 22px;
   font-weight: 500;
   display: flex;
   color: #051855;
}

.counter-box button {
   color: #1a9dd9;
}

.shirt-title span {
   width: 100%;
   background-color: #e6f3fa;
   border: 1px solid #d3d7e1;
   padding: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   font-weight: 500;
   line-height: 1.3;
}

.print-point {
   top: -35px;
   max-width: 238px;
   max-height: 270px;
}

.print-area {
   min-height: 226px;
   text-align: center;
   padding: 70px 30px 30px;
}

.print-area img {
   max-height: 70px;
   width: auto;
}

.height-50 {
   height: 50px !important;
}

.ph-gray-500::placeholder {
   color: #9ea5c0 !important;
}

.min-w-0 {
   min-width: 0 !important;
}

.socials-links-cust {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   align-items: center;
}

.socials-links-cust .links {
   display: flex;
   align-items: center;
   gap: 8px;
}
.socials-links-cust a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   min-width: 36px;
   aspect-ratio: 1;
   background-color: #45a4ff;
   border-radius: 50%;
   color: #eff2f9;
   font-size: 17px;
   border: 1px solid #45a4ff;
   transition: 0.3s all ease;
}

.socials-links-cust a:hover {
   background-color: transparent;
   color: #45a4ff;
}

.time-box {
   display: inline-flex;
   justify-content: start;
}

.time-box .content-box {
   min-width: 100px;
}

.time-box .content-box h4 {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 100%;
}

.time-box .content-box p {
   margin-top: 8px;
}

.mx-width-58 {
   max-width: 58px;
}

.gap-12 {
   gap: 12px;
}

@media (min-width: 992px) {
   .markit-4-custmize .col-lg-2 {
      flex: 0 0 auto;
      width: 12.5%;
   }
}

.markit-4-custmize .outline-box {
   border-radius: 4px;
}

/* mediaquery  */
@media (max-width: 767px) {
   .font-mob-14 {
      font-size: 14px;
   }

   .time-box .content-box {
      min-width: 80px;
   }
}

/* new style  */
.print-shirt-card .main-img {
   transform-style: preserve-3d;
   transition: transform 0.8s ease;
}

.print-shirt-card .main-img img,
.print-shirt-card .main-img svg {
   backface-visibility: hidden;
}

.print-shirt-card.flipped .main-img {
   transform: rotateY(180deg);
}
.form-switch .form-check-input{
   max-height: 1.5rem;
   border-radius: 5px;
   width: 3em;
}
.form-switch .form-check-input {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%239ca3af'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%2345a4ff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%23fff'/%3e%3c/svg%3e");
}
.site-img  {
   border-radius: 8px !important; 
}
.site-stat-box img {
   border-radius: 8px;
}
.website .site-img {
   position: relative;
   overflow: hidden;
   min-height: 50px;
}

/* loader overlay */
.website .site-img .img-loader {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f3f3f3;
   z-index: 2;
}

/* spinner */
.website .site-img .spinner {
   width: 42px;
   height: 42px;
   border: 4px solid #ddd;
   border-top-color: #666;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
}

.website @keyframes spin {
            to { transform: rotate(360deg); }
         }

/* image */
.website .site-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* hide loader when loaded */
.website .site-img.loaded .img-loader {
   display: none;
}
.website .site-img img {
   opacity: 0;
   transition: opacity .3s ease;
}

.website .site-img.loaded img {
   opacity: 1;
}
.snap-image {
   display: flex;
   justify-content: space-between; /* space between images */
   align-items: center;
   gap: 16px; /* modern, safest spacing */
   width: 100%;
}
.snap-image img {
   width: 45%;
   max-width: unset !important;
}
.product-listing .prodect-img img{
   max-width: 185px !important;
   height: 205px !important;
}
.content-list li{
   color: #707997;
   line-height: 1.3;
   font-size: 16px;
}
.my-color-select {
   position: relative;
   width: 46px;
   height: 28px;
   border: 1px solid #ccc;
   border-radius: 30px;
   cursor: pointer;
   background-color: transparent;
   outline: unset !important;
   display: flex;
   align-items: center;
   padding-left: 44px;
   user-select: none;
}
.my-color-select::before {
   content: "";
   position: absolute;
   left: 5px;
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: var(--dot, red);
   transition: background-color 0.2s ease;
}
.my-color-select::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 5px;
   transform: translateY(-50%);
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid #8c93b5;
   pointer-events: none;
   transition: transform 0.2s ease;
}
.my-color-select.open::after {
   transform: translateY(-50%) rotate(180deg);
}
.my-color-select .color-options {
   display: none;
   position: absolute;
   top: 110%;
   left: 0;
   right: 0;
   background: #fff;
   border: 1px solid #ccc;
   z-index: 100;
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   flex-direction: column;
   max-height: 400px;
   overflow-y: auto;
}
.my-color-select.open .color-options {
   display: flex;
}
.my-color-select .color-option {
   width: 100%;
   padding: 12px;
   cursor: pointer;
   border-bottom: 1px solid #ccc;
   box-sizing: border-box;
   transition: background 0.2s ease;
   text-align: left;
}
.my-color-select .color-option:last-child {
   border-bottom: none;
}
.my-color-select .color-option:hover {
   background-color: #f0f0f0;
}
.select-wrapper::after {
   display: none;
}
/* 1. Ensure the entire page can fill the screen */
html, body {
   height: 100%;
   margin: 0;
}

/* 2. Make <main> the flex container because it contains your footer */
main {
   display: flex;
   flex-direction: column;
   min-height: 100vh; /* Use 100dvh for better mobile support */
}

/* 3. The "Magic" Step: Push the footer to the bottom */
footer {
   margin-top: auto; /* Fills empty space above the footer */
}

/* Optional: Prevent the section from shrinking if content is empty */
section {
   flex: 1 0 auto;
}