.heading-holder {
	background-color: #efefef;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 5%;

	.name {
		color: var(--brand-dark-grey);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.5px;
	}

	ion-button {
		margin: 0;
		--color: var(--brand-blue);
		font-size: 12px;
		--padding-end: 0;
	}
}


ul.orders {
	padding: 0;
	margin: 0;

	.order {
		list-style: none;
		padding: 20px 5%;
		color: var(--brand-dark-grey);
		line-height: 1.6;
		border-bottom: 1px solid #efefef;

		&.expand {

			.heading {
				width: 100%;
				white-space: normal;
			}
		}

		.heading {
			width: 50%;
			font-size: 15px;
			width: 50%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			font-weight: 600;
		}

		.time-details {
			font-size: 13px;
			color: var(--brand-grey);
		}
	}

	.ordered-items {
		list-style: none;
		padding: 0;
		margin: 10px 0 0;

		li {

			.outlet-name {
				font-size: 14px;
				font-weight: 600;
				letter-spacing: 0.5px;
			}

			.order-item-details {
				display: flex;
				width: 100%;
				justify-content: space-between;
				margin: 0px auto 5px;
				align-items: center;
				color: var(--brand-grey);
			}

			.name {
				font-size: 13px;
				letter-spacing: 0.5px;
				display: flex;
				align-items: center;

				img {
					width: 50px;
					height: 50px;
					margin-right: 10px;
				}
			}

			.time {
				font-size: 12px;
			}
		}
	}

	.note {
		color: var(--brand-grey);
		font-size: 13px;
		padding: 10px 0;
		margin-top: 10px;
		border-top: 1px solid #efefef;
	}

	.action-buttons-holder {
		display: flex;
		align-items: center;
		width: 100%;

		ion-button {
			--padding-top: 0px;
			--padding-bottom: 0px;
			height: 30px;
			margin-right: 10px;
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0.5px;

			&:first-child {
				--background: var(--brand-blue);
			}

			&:last-child {
				--color: var(--brand-blue);
				--border-color: var(--brand-blue);
			}
		}
	}
}


.rating-modal {
	color: var(--brand-dark-grey);
	transform: translateY(100vh);

	&.active {
		transform: translateY(0);
	}

	.semi-heading {
		text-align: center;
		font-size: 18px;
		font-weight: 500;
	}

	.rating {
		padding: 20px 15px;

		p {
			font-size: 14px;
			color: var(--brand-grey);
			text-align: center;
			line-height: 1.5;
			margin: 15px 0;
		}

		.star-holder {
			text-align: center;

			ion-icon {
				color: var(--brand-grey);
				margin: 0 5px;
				font-size: 30px;
				transition: color 0.3s;

				&.active {
					color: #fbae17;
				}
			}
		}
	}

	.review {
		border-top: 1px solid #efefef;
		padding: 15px;

		.semi-heading {
			text-align: left;
		}

		textarea {
			outline: none;
			width: 100%;
			height: 70px;
			background-color: #efefef;
			padding: 10px;
			font-size: 12px;
			color: var(--brand-dark-grey);
			border: 0px;
			border-radius: 10px;
			margin: 15px auto 0;
			resize: none;
		}
	}

	ion-button {
		--background: var(--brand-blue);
		font-size: 12px;
		width: calc(100% - 30px);
		margin: 0 auto 15px;
	}
}
