.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;
}

.bg-orange-100 {
   background-color: #fff3e6;
}
/* 
.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-primary-100 {
   background-color: #ccd4ed !important;
}

.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: #e6f3ed !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: 24px;
   border: 1px solid #d3d7e1;
}

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

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

.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;
}

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

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

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

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

.primary-select {
   background-color: #008bcb;
   color: white;
   padding-right: 40px;
   background-image: url(../img/custom/arrow-down-white.svg);
   background-size: 12px 12px;
}

.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;
}
.title-bg-gray {
   background-color: #eff2f9;
   height: 43px;
   display: flex;
   align-items: center;
   font-weight: 500;
   padding: 0 16px;
   font-size: 16px;
}

.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;
}

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

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

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

.colors-box .box.active .avatar {
   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: 195px;
   max-height: 235px;
}

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

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

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

/* mediaQuery  */
@media (max-width: 991px) {
   .track-wrapper .tracking-card .inner-content h6,
   .track-wrapper .tracking-card .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;
   }

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

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

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

   .snapshort .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 {
      margin-bottom: 20px;
   }

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

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

   .cust-vart-tabs.cust-vart-tabs-v2 .screen-print-wrapper {
      padding: 15px;
   }
}
.track-wrapper .tracking-card::before {
   border-bottom: 2px dashed #c1c7d7 !important;
   content: "" !important;
   position: absolute !important;
   z-index: -1 !important;
   top: 24px !important;
   right: -20px !important;
   width: 100% !important;
   height: 2px !important;
}
.track-wrapper .tracking-card .inner-content {
   max-width: 75px !important;
   margin-right: auto !important;
}
.track-wrapper .tracking-card .inner-content h5,
.track-wrapper .tracking-card .inner-content h6 {
   font-size: 16px !important;
   font-weight: 400 !important;
   color: #9ea5c0 !important;
   margin: 10px 0 4px !important;
}
.track-wrapper .tracking-card .inner-content p {
   color: #707997 !important;
}
.track-wrapper .tracking-card .track-icon,
.track-wrapper .tracking-card .inactive {
   cursor: pointer !important;
   width: 48px !important;
   aspect-ratio: 1 !important;
   background-color: #fff !important;
   border: 1px solid #c1c7d7 !important;
   border-radius: 50% !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   margin: auto !important;
}
.track-wrapper .tracking-card .track-icon i,
.track-wrapper .tracking-card .inactive i {
   font-size: 18px !important;
   color: #707997 !important;
}
.track-wrapper .tracking-card .track-icon .fa-check,
.track-wrapper .tracking-card .inactive .fa-check {
   display: none !important;
}
.track-wrapper .tracking-card .active.inner-content h6,
.track-wrapper .tracking-card .active.inner-content h5 {
   color: #051855 !important;
}
.track-wrapper .tracking-card .active .track-icon {
   background-color: #45a4ff !important;
   border-color: #45a4ff !important;
}
.track-wrapper .tracking-card .active .track-icon i {
   color: #fff !important;
}
.track-wrapper .tracking-card .complete .track-icon {
   background-color: #45a4ff !important;
   border-color: #45a4ff !important;
}
.track-wrapper .tracking-card .complete .track-icon i {
   color: #fff !important;
}
.track-wrapper .tracking-card .complete .track-icon i:first-child {
   display: inline-flex !important;
}
.track-wrapper .tracking-card .complete h6 {
   color: #051855 !important;
}
.track-wrapper .tracking-card .row > div:last-child .tracking-card::before {
   display: none !important;
}
.track-wrapper .tracking-card:has(.complete)::before {
   border: 1px solid #45a4ff !important;
}
.order-process .track-wrapper .row {
   justify-content: space-between !important;
}
.order-process .track-wrapper .tracking-card::before {
   right: -90px !important;
   width: 170% !important;
}
.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;
}