/* Container centering */
.carts {
display: flex;
align-items: center;
flex-direction: column;
}

/* Card styling */
.card {
display: flex;
background-color: #fff;
border-radius: 12px;
overflow: hidden;
max-width: 700px;
width: 100%;
border: 1px solid #000;
margin-bottom: 20px;
}

/* Image section */
.card-img {
position: relative;
flex-shrink: 0;
width: 40%;
/* Maintain proportion for all screen sizes */
}
.card-img img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}

/* Red badge */
.card-img .badge {
position: absolute;
top: 8px;
right: 8px;
background-color: #d32f2f;
color: #fff;
font-size: 10px;
text-transform: uppercase;
padding: 4px 6px;
border-radius: 4px;
}

/* Content section */
.card-content {
padding: 16px 24px;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #212121;
margin-bottom: 8px;

display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.2em;
  max-height: calc(1.2em * 3);
  position: relative;
}
.card-subtitle {
font-size: 14px;
color: #757575;
margin-bottom: 8px;
}
.card-rating {
color: #4caf50;
font-size: 14px;
margin-bottom: 12px;
}
.card-pricing {
font-size: 16px;
font-weight: 500;
color: #212121;
margin-bottom: 8px;
}
.card-mrp {
text-decoration: line-through;
color: #9e9e9e;
font-size: 14px;
margin-right: 8px;
}
.card-save {
color: #757575;
font-size: 14px;
}
.card-delivery {
font-size: 12px;
color: #757575;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.carts {
padding: 15px;
}
.card {
flex-direction: row;
/* Keep horizontal layout */
align-items: center;
}
.card-img {
width: 35%;
/* Slightly smaller for tablets */
}
.card-content {
padding: 12px 16px;
}
.card-title {
font-size: 16px;
}
.card-subtitle,
.card-rating,
.card-pricing,
.card-qty{
font-size: 13px;
}
.card-mrp,
.card-save {
font-size: 12px;
}
.card-delivery {
font-size: 11px;
}
.badge {
font-size: 9px;
padding: 3px 5px;
}
}

@media (max-width: 480px) {
.carts {
padding: 10px;
}
.card {
flex-direction: row;
padding-left: 10px;
/* Keep horizontal layout on mobile */
}
.card-img {
width: 40%;
/* Further reduce image width for small screens */
}
.card-img img {
width: 100%;
}
.card-content {
padding: 8px;
}
.card-title {
font-size: 14px;
margin-bottom: 6px;
}
.card-subtitle {
font-size: 12px;
margin-bottom: 6px;
}
.card-rating {
font-size: 12px;
margin-bottom: 8px;
}
.card-pricing {
font-size: 13px;
margin-bottom: 6px;
}
.card-mrp,
.card-save {
font-size: 11px;
}
.card-delivery {
font-size: 10px;
}
.badge {
font-size: 8px;
padding: 2px 4px;
top: 6px;
right: 6px;
}
.card-qty{
font-size:12px;
}
}
.order-summary-table {
width: 100%;
max-width: 400px;
margin: 30px auto;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border-radius: 0px;
font-family: 'Segoe UI', Arial, sans-serif;
overflow: hidden;
border: none;
}
.order-summary-table th {
color: #000;
font-size: 1.2em;
padding: 16px 12px;
text-align: center;
letter-spacing: 1px;
}
.order-summary-table td {
padding: 14px 12px;
font-size: 1em;
color: #333;
border-top: 1px solid #f0f0f0;
}

td button { width: 100%;
  height: 100%;
  display: block;           /* Makes the button a block-level element */
  border: none;             /* Optional: remove default border */
  background: var(--primary-color); /* Fallback color */
  color: #fff;
  padding: 14px 12px;       /* Match the normal td padding for consistent height */
  font-size: 1em;
  cursor: pointer;
  border-radius: 50px;
  font-weight: bold;
  box-sizing: border-box;   /* Ensures padding is included in width/height */
  margin:0px;
  text-transform: uppercase;
}

.order-summary-table td:last-child {
text-align: right;
font-weight: 600;
}
@media (max-width: 500px) {
.order-summary-table, .order-summary-table th, .order-summary-table td {
font-size: 0.98em;
}
.order-summary-table {
max-width: 95%;
}
}