/* Styling for the checkout summary items container */


.checkout-form {
    padding: 3.0rem;
}

.checkout-summary{
    margin: 1.0rem;
}

.checkout-summary .checkout-summary-item {
    padding: 1.0rem 0;
   	border-bottom: 0.1rem solid var(--lightgreycolor);
}

/* Styling for item details (child of checkout-summary-item) */
.checkout-summary-item .item-details {
    display: flex;
	flex-direction: column; /* Stack description and quantity vertically */
	align-items: flex-start;
}

.checkout-summary-item .item-details h5,
.checkout-summary-item .item-details h6 {
	margin-bottom: 0.6rem; 
}

/* Item price and label on same line */
.item-details .unit-price-row,
.item-details .subtotal-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.subtotal-row .subtotal-label,
.subtotal-row .subtotal-figure{
    font-size: clamp(1rem, 1.2vw, 1.2rem);
	font-family: Rubik-Light, sans-serif;
	color: var(--darkgreycolor);
	font-weight: 300;
	margin: 0;           /* ensure no extra margin */
}


/* Total Row (label left aligned, figure right aligned) */
.checkout-summary .total-row {
    display: flex;                	/* Use flexbox for alignment */
    flex-direction: row;
	align-items: center;
	justify-content: flex-start; 
	width: 100%;                   	/* Ensure row spans the full width */
	margin-top: 1.0rem;				/* push total row down from border */
	padding-top: 0.75rem;         /* Optional: adds spacing after the border */
}

.total-row .total-label,
.total-row .total-figure {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
	font-family: Rubik-Light, sans-serif;
	color: var(--darkgreycolor);
	font-weight: 300;
	margin: 0;           /* ensure no extra margin */
}


/* ...................................MEDIA QUERIES ............................*/

/* Responsive Design: Ensures proper layout on smaller screens */
@media (max-width: 75rem) {
    
    .checkout-summary-item {
        padding: 0.8rem 0;
    }

    .checkout-summary-item .item-description {
        font-size: 0.9rem;
    }

    .checkout-summary-item .item-quantity {
        font-size: 0.8rem;
    }

    .checkout-summary-item .item-price-label {
        font-size: 0.9rem;
    }

    .checkout-summary-item .item-price-figure {
        font-size: 0.9rem;
    }

}
