.gift-table,
.kt-gift-list {
	.gift-row {
		border: 1px solid #324d9f;
		border-radius: 4px;
		overflow: hidden;
		padding: 10px;
		margin-bottom: 10px;
		background: #eaf3ff;
		display: flex;
		align-items: center;
		gap: 10px;

		.gift-input {
			width: 95%;

			.gift-col {
				margin-bottom: 8px;
				display: flex;
				align-items: center;
				justify-content: start;
				gap: 15px;

				label {
					width: 150px;
					font-size: 14px;
					font-weight: 600;
				}

				input {
					width: 100%;
					height: 45px;
					padding: 4px 8px;
				}

				.preview {
					width: 50px;
					height: 50px;
					display: block;
					border-radius: 8px;
					overflow: hidden;
					object-fit: cover;
					border:1px solid #000;
				}
			}
		}

		.remove-row {
			color: red;
			border: none;
			padding: 4px 8px;
			cursor: pointer;
			background-color: transparent;
			font-size: 20px;
			
			svg {
				width: 30px;
				height: 30px;
			}

		}
	}
}


.gift-wrapper {
	border: 1px solid var(--fs-color-primary);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px;
	margin-top: 30px;
	padding-top: 0;

	.gift-title {
		text-align: center;
		color: var(--fs-color-primary);
		margin-bottom: 10px;
		line-height: 68px;
	}

	.gift-total {
		background: var(--fs-color-secondary);
		padding: 20px;
		border-radius: 10px;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;

		strong {
			font-weight: 700;
		}
	}

	.gift-list {
		.gift-item {
			display: flex;
			gap: 12px;
			border: 1px solid #e5ecff;
			border-radius: 12px;
			padding: 10px 20px;
			margin-bottom: 10px;
			align-items: center;

			.gift-thumb {
				img {
					width: 80px;
					height: auto;
					border-radius: 6px;
				}
			}

			.gift-info {
				.gift-name {
					font-weight: 600;
					margin-bottom: 4px;
					font-size: 12px;
				}

				.gift-meta {
					display: flex;
					justify-content: space-between;
					gap: 10px;

					span {
						display: flex;
						font-size: 13px;

						strong {
							padding-left: 5px;
						}

						bdi {
							display: flex;
							color: #000;
							padding-left: 5px;
						}
					}
				}
			}
		}
	}
}

.woocommerce-checkout {
	.large-5 {
		.has-border {
			padding: 30px 0;

			#order_review_heading {
				padding: 0 30px;
			}

			.shop_table {
				&.woocommerce-checkout-review-order-table {
					padding: 0 30px;

					thead {
						display: none;
					}

					tbody {
						display: none;
					}
				}

			}

			.woocommerce-privacy-policy-text {
				padding: 0 30px;
			}
		}
	}
}



.custom-checkout-list {
	display: grid;
	gap: 12px;

	.checkout-card {

		.checkout-product-head {
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			margin-bottom: 6px;
			font-size: 15px;
			gap: 5px;
			padding: 0 30px;

			.checkout-product-price {
				color: #c20000;
			}
		}

		.variation {
			padding: 0 30px;
		}

		.checkout-gift-box {
			background: #eaf3ff;
			margin-top: 8px;
			padding: 0 30px;
			border-top: 1px dashed #aac8ff;

			.gift-item {
				display: flex;
				gap: 10px;
				padding: 6px 0;
				border-bottom: 1px solid var(--fs-color-primary);

				&:last-child {
					border-bottom: none;
				}

				.gift-image {
					width: 70px;
					border-radius: 10px;
					object-fit: contain;
					object-position: center;
				}

				.gift-info {
					.gift-badge {
						background: var(--fs-color-secondary);
						padding: 2px 8px;
						border-radius: 6px;
						font-size: 12px;
						color: #fff;
						margin-bottom: 10px;
					}

					.gift-name {
						font-weight: 600;
						font-size: 12px;
						margin-top: 3px;
					}

					.gift-meta {
						display: flex;
						gap: 6px;
						font-size: 13px;

						strong {
							color: #0057ff;
						}
					}

					.gift-qty {
						font-size: 12px;
					}
				}

			}
		}
	}
}



#order_review {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 20px;

	table {
		order: 1;
	}

	#payment {
		order: 2;
		padding: 0 30px;
	}
}

.woocommerce-cart-form__cart-item {
	&.cart_item {
		.product-name {
			.gift-row-data {
				display: none !important;
			}
		}
	}
}

.gift-row {
	background: #eaf3ff;

	.gift-row-data {
		display: grid !important;
		gap: 15px;
		padding: 12px 10px;
		border-radius: 12px;

		.gift-cart-item {
			display: flex;
			gap: 12px;
			align-items: flex-start;

			.gift-cart-thumb {
				width: 70px;
				border-radius: 8px;
				object-fit: contain;
				object-position: center;
			}

			.gift-cart-info {
				display: flex;
				flex-direction: column;
				align-items: start;

				.gift-badge {
					background: #ffd857;
					padding: 3px 8px;
					border-radius: 6px;
					font-size: 11px;
					color: #fff;
					text-align: center;
					width: 65px;
				}

				.gift-cart-title {
					font-weight: 600;
					margin: 2px 0;
				}

				.gift-cart-line {
					display: flex;
					gap: 6px;

					strong {
						color: #0057ff;
					}
				}

				.gift-cart-qty {
					font-size: 13px;
					opacity: .9;
				}
			}
		}
	}
}

/* THANK YOU */
.woocommerce-order {
	.woocommerce-order-details {
		.woocommerce-table--order-details {
			border: 1px solid var(--fs-color-primary);
			border-radius: 10px;
			overflow: hidden;
			padding: 30px;
			background: #eaf4ff;

			.wc-item-meta {
				display: flex;
				gap: 20px;
			}

			.woocommerce-table__product-name {

				/* font-size: 24px; */
				a {
					font-size: 18px;
					font-weight: 600;
				}
			}

			.gift-inline-wrapper {
				.gift-title {
					/* Ẩn */
					background: var(--fs-color-secondary);
					padding: 6px 8px;
					border-radius: 6px;
					font-size: 12px;
					color: #fff;
					margin-bottom: 10px;
					display: none;
					width: fit-content;
					align-items: center;
					gap: 8px;
					margin-top: 8px;
				}

				.gift-item {
					display: flex;
					align-items: center;
					gap: 8px;

					.gift-thumb {
						width: 70px;
						height: 70px;
						object-fit: cover;
						border-radius: 4px;
					}

					.gift-info {
						.gift-badge {
							background: var(--fs-color-secondary);
							padding: 2px 8px;
							border-radius: 6px;
							font-size: 12px;
							color: #fff;
							margin-bottom: 10px;
						}

						.gift-name {
							font-weight: 600;
							font-size: 12px;
							margin-top: 3px;
						}

						.gift-price {
							display: flex;
							gap: 6px;
							font-size: 13px;
						}

						.gift-qty {
							font-size: 12px;
						}
					}
				}
			}

		}
	}
}

.gift-checkout-wrapper {

	margin-top: 10px;
	padding: 10px;
	background: #eaf4ff;
	border-radius: 12px;

	.gift-order-item {
		display: flex;
		gap: 10px;
		padding: 6px 0;
		border-bottom: 1px dashed #bcd4ff;

		&:last-child {
			border-bottom: none;
		}

		.gift-thumb {
			width: 60px;
			border-radius: 8px;
			object-fit: contain;
			object-position: center;
		}

		.gift-info {
			display: flex;
			flex-direction: column;
			align-items: start;

			.gift-badge {
				background: #ffd54f;
				padding: 2px 8px;
				border-radius: 6px;
				font-size: 12px;
				color: #fff;
			}

			.gift-title {
				font-weight: 600;
				font-size: 12px;
				margin: 4px 0;
			}

			.gift-free {
				color: #0066ff;
			}
		}
	}
}


/* ADMIN ORDER – gift row styling */
#woocommerce-order-items {

	tr.gift-row-admin {

		background: #f4f9ff;

		td {
			padding: 12px 14px;
			border-top: 1px dashed #bcd9ff;
		}

		.gift-box {
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 6px 0;

			img {
				width: 42px;
				height: 42px;
				border-radius: 8px;
				object-fit: cover;
				border: 1px solid #d8e6ff;
			}

			.gift-info {

				.gift-badge {
					display: inline-block;
					background: #ffdd57;
					padding: 2px 8px;
					border-radius: 6px;
					font-size: 12px;
					font-weight: 600;
					color: #000;
					margin-bottom: 2px;
				}

				.gift-title {
					font-weight: 600;
					margin-top: 2px;
				}

				.gift-qty {
					font-size: 12px;
					opacity: .8;
				}

				.gift-free {
					color: #d10000;
					font-weight: 700;
				}
			}
		}
	}
}

.gift-admin {
	margin-top: 6px;
	background: #000 !important;
	padding: 5px 15px;
	border-radius: 8px;

	.gift-admin-item {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 5px 0;
		color: #fff;

		.gift-admin-thumbnail {
			height: 70px;
			width: 70px;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 4px;
			}
		}

		.gift-admin-info {
			.gift-admin-badge {
				display: inline-flex;
				padding: 0 8px;
				background-color: #f9c42d;
				border-radius: 4px;
			}
		}
	}
}