.min-w-100{min-width:100px;width:100px;}
.w-280{min-width:280px;width:280px;}
.btn-wishlist{width:40px; height:40px;}	
.h-40 {
height: 40px;
}
.iconSize-20 {
width: 20px;
height: 20px;
}
.iconSize-24 {
width: 24px;
height: 24px;
}
.svg-stroke-first, .svg-stroke-first path {
stroke: var(--color-first) !important;
}
.svg-stroke-white, .svg-stroke-white path {
stroke: var(--color-white-same) !important;
}
.svg-fill-first, .svg-fill-first path {
fill: var(--color-first) !important;
}
.svg-fill-white, .svg-fill-white path {
fill: var(--color-white-same) !important;
}
.svg-fill-red, .svg-fill-red path {
fill: #e90000 !important;
}

.productinfo-bar{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--color-light-blue);
border-radius: 8px;
overflow: hidden;
}
.productinfo-bar .item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--color-content);
border-bottom: 1px solid var(--color-light-blue);
border-right: 1px solid var(--color-light-blue);
}
.productinfo-bar .item:nth-child(2n){
border-right: none;
}
.productinfo-bar .item:nth-child(n+3){
border-bottom: none;
}
.cart .cart-table {
border: 1px solid var(--color-light-blue);
border-radius: 8px;
overflow: hidden;
background-color: var(--bg-white);
}
.cart .table-head {
padding: 12px 24px;
padding-right: 24px;
padding-right: 56px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color:var(--color-second);
border-bottom: 1px solid var (--color-light-blue);
background-color: var(--color-light-blue-2);
}	
.cart .cart-item {
position: relative;
padding: 20px 24px;
padding-right: 56px;
border-bottom: 1px solid var(--color-light-blue);
}
.cart .cart-item .product-img {
width: 72px;
height: 72px;
min-width: 72px;
border-radius: 8px;
background-color: var(--bg-light-blue);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border: 1px solid var(--color-light-blue);
}	
.cart .cart-item .product-meta .product-title {
font-size: 14px;
font-weight: 600;
color:var(--color-second);
margin-bottom: 4px;
line-height: 1.3;
}	
.cart .cart-item .product-meta .product-tags, .cart .cart-item .product-meta .product-tags span{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
font-size:12px;
}	
.cart .cart-item .row-total {
font-size: 15px;
font-weight: 700;
color: var(--heading-color);
}
table.cart-item th{
background:var(--color-light-blue);
}

/*####### summary-card #########*/
.cart .summary-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light-blue);
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 6.5rem;
}

.summary-header{
display: flex;
align-items: center;
justify-content:space-between;
padding: 16px 24px;
}

.items-count{
font-size: 12px;
font-weight: 500;
padding: 2px 10px;
border-radius: 12px;
background-color:rgba(108, 175, 255, 0.1);
color: var(--color-first);
border: 1px solid var(--color-first);
}
.order-card {
background:var(--color-white);
}
.divider {
border-top: 1px solid var(--color-light-blue);
}
.small-text {
font-size: 0.9rem;
color: #666;
}

/*####### order-tracking #########*/
.order-header {
border-radius: 16px;
padding: 20px;
}

.order-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background:var(--color-light-blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color:var(--color-first);
font-size: 20px;
}

.order-badge {
background:var(--color-light-blue);
color: #374151;
border-radius: 8px;
padding: 4px 10px;
font-weight: 500;
margin-left: 8px;
}

.status-paid {
background: #198754;
color: #fff;
border-radius: 8px;
padding: 4px 10px;
font-size: 0.8rem;
margin-left: 6px;
}

.order-subtext {
color: #6b7280;
font-size: 0.9rem;
}

.h-44 {min-height: 44px;height: 44px;}
.w-44 {min-width: 44px;width: 44px;}
.w-30 {min-width:30px;width:30px;}
.cart-no {
position: absolute;
top:0px;
left: auto;
right: -14px;
font-size: 10px;
min-width: 22px;
width: 22px;
min-height: 22px;
height: 22px;
}

/*######## tracking ###########*/
.stepper {
display: flex;
justify-content: space-between;
position: relative;
margin: 30px 0;
}

.stepper::before {
content: "";
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 4px;
background:var(--color-light-blue);
z-index: 0;
}

.step {
position: relative;
text-align: center;
width: 100%;
z-index: 1;
}

.step .circle {
width: 40px;
height: 40px;
margin: 0 auto;
border-radius: 50%;
background:var(--color-light-blue);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.step.active .circle {
background:var(--color-first);
}
.step.completed .circle {
background: #198754;
}
.step p {
margin-top: 8px;
font-size: 0.9rem;
}
/* PASSWORD ICON */
.toggle-password {
position: absolute;
right:20px;
left:auto;
top: 34px;
cursor: pointer;
}
.toggle-password svg {
transition: opacity 0.2s ease;
}	
.fa-eye-slash {
display: none;
}
.form-control.is-invalid, .was-validated .form-control:invalid{
background-image:none;	
}

.header-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.header-actions .search-field {
position: relative;
}
.header-actions .search-field i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color:var(--color-second);
font-size: 14px;
}

.header-actions .search-field input {
width: 200px;
height: 40px;
padding: 8px 12px 8px 36px;
}
.filter-btn {
height: 40px;
padding: 0 16px;
border: 1px solid var(--color-light-blue);
border-radius: 6px;
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: var(--color-second);
transition: all 0.2s ease;
}

.status-tag.processing {
background: 
color-mix(in srgb, #f97316, transparent 90%);
color: #f97316;
border: 1px solid
color-mix(in srgb, #f97316, transparent 70%);
}
.status-tag.shipped {
background: 
color-mix(in srgb, #0ea5e9, transparent 90%);
color: #0ea5e9;
border: 1px solid
color-mix(in srgb, #0ea5e9, transparent 70%);
}

.status-tag.delivered {
background: 
color-mix(in srgb, #16a34a, transparent 90%);
color: #16a34a;
border: 1px solid
color-mix(in srgb, #16a34a, transparent 70%);
}

.status-tag.cancelled {
background: 
color-mix(in srgb, #dc2626, transparent 90%);
color: #dc2626;
border: 1px solid
color-mix(in srgb, #dc2626, transparent 70%);
}

.status-tag {
display: inline-flex;
align-items: center;
padding: 2px 10px;
font-size: 12px;
font-weight: 500;
border-radius: 12px;
}