/* Quick Order Panel
--------------------------------------------- */

.riven-qo-panel {

	display: none;

	width: 100%;

	color: #111111;

}


.riven-qo-form {

	width: 100%;

}

.riven-qo-panel.active,
.riven-qo-panel.riven-qo-panel-show {

	display: block;

}


/* Layout
--------------------------------------------- */

.riven-qo-layout {

	display: grid;

	grid-template-columns:
		1.3fr .9fr;

	gap: 18px;

	align-items: flex-start;

}


.riven-qo-left,
.riven-qo-right {

	display: flex;

	flex-direction: column;

	gap: 18px;

}


.riven-qo-right {

	position: sticky;

	top: 15px;

}








/* Card
--------------------------------------------- */

.riven-qo-card {

	padding: 18px;


	background: #ffffff;


	border: 1px solid #eeeeee;

	border-radius: 18px;


	box-shadow:
		0 10px 30px rgba(0,0,0,.05);

}


.riven-qo-card-title {

	margin-bottom: 16px;


	font-size: 16px;

	font-weight: 700;


	color: #111111;

}









/* Fields
--------------------------------------------- */

.riven-qo-field {

	display: flex;

	flex-direction: column;

	gap: 8px;


	margin-bottom: 14px;

}


.riven-qo-field:last-child {

	margin-bottom: 0;

}


.riven-qo-field label {

	font-size: 13px;

	font-weight: 600;


	color: #333333;

}


.riven-qo-field input,
.riven-qo-field textarea {

	width: 100%;


	padding: 14px 15px;


	background: #f8f8f8;


	border: 1px solid #eeeeee;

	border-radius: 14px;


	font-size: 14px;


	color: #111111;


	outline: none;


	transition:
		background .25s ease,
		border .25s ease,
		box-shadow .25s ease;

}


.riven-qo-field textarea {

	min-height: 90px;

	resize: vertical;

}


.riven-qo-field input:focus,
.riven-qo-field textarea:focus {

	background: #ffffff;


	border-color: #111111;


	box-shadow:
		0 0 0 3px rgba(0,0,0,.06);

}









/* Options
--------------------------------------------- */

.riven-qo-options {

	display: grid;

	grid-template-columns:
		repeat(2, 1fr);

	gap: 14px;

}


.riven-qo-option {

	position: relative;


	display: flex;

	align-items: center;

	justify-content: space-between;


	gap: 12px;


	padding: 14px 15px;


	background: #fafafa;


	border: 1px solid #eeeeee;

	border-radius: 15px;


	cursor: pointer;


	transition: .25s ease;

}


.riven-qo-option:hover {

	background: #ffffff;

	border-color: #111111;

}


.riven-qo-option input {

	width: 16px;

	height: 16px;


	accent-color: #111111;

}

.riven-qo-option input[type=radio] {

	width: 16px;

	height: 16px;


	accent-color: #111111;

}


.riven-qo-option span {

	flex: 1;


	font-size: 14px;

	font-weight: 600;


	color: #111111;

}


.riven-qo-option strong {

	font-size: 14px;

	font-weight: 700;


	color: #111111;

}



/* Selected */

.riven-qo-option:has(input:checked) {

	background: #ffffff;


	border-color: #111111;


	box-shadow:
		0 8px 25px rgba(0,0,0,.08);

}




/* Discount Alert
--------------------------------------------- */

.riven-qo-discount-alert {

	grid-column: 1 / -1;


	display: block;


	margin-top: 6px;


	padding: 14px 18px;


	background: #f8f8f8;


	border: 1px solid #eeeeee;

	border-radius: 14px;


	font-size: 14px;

	font-weight: 500;

	line-height: 1.7;


	color: #555555;


	text-align: center;


	box-shadow:
		0 8px 20px rgba(0,0,0,.04);

}






/* Highlight Discount Amount
--------------------------------------------- */

.riven-qo-discount-alert strong {

	display: inline-block;


	margin: 0 3px;


	color: #111111;


	font-size: 15px;

	font-weight: 800;


	line-height: 1;

}


/* Hover
--------------------------------------------- */

.riven-qo-discount-alert:hover {

	background: #ffffff;

	border-color: #111111;

}



/* Mobile
--------------------------------------------- */

@media(max-width:767px){


	.riven-qo-discount-alert {

		padding: 12px 14px;


		font-size: 13px;

	}


}




/* Notice
--------------------------------------------- */
/* Payment Alert
--------------------------------------------- */

.riven-qo-payment-alert {

	display: flex;

	align-items: center;

	justify-content: space-between;


	gap: 15px;


	margin-bottom: 16px;


	padding: 16px;


	background:
		linear-gradient(
			135deg,
			#ffffff,
			#f5f5f5
		);


	border: 1px solid #dcdcdc;


	border-left: 5px solid #111111;


	border-radius: 16px;


	box-shadow:
		0 12px 35px rgba(0,0,0,.08);


	color: #222222;

}




/* Text
--------------------------------------------- */

.riven-qo-payment-alert-text {

	font-size: 14px;

	font-weight: 500;

	line-height: 1.6;


	color: #444444;

}


.riven-qo-payment-alert-text strong {

	color: #000000;

	font-weight: 800;

}







/* Amount Badge
--------------------------------------------- */

.riven-qo-payment-alert-price {

	display: flex;

	align-items: center;

	justify-content: center;


	min-width: 90px;


	padding: 11px 18px;


	background: #111111;


	color: #ffffff;


	border-radius: 14px;


	font-size: 17px;

	font-weight: 800;


	box-shadow:
		0 8px 20px rgba(0,0,0,.18);

}







/* Mobile
--------------------------------------------- */

@media(max-width:767px){


	.riven-qo-payment-alert {

		flex-direction: column;

		align-items: flex-start;

	}


	.riven-qo-payment-alert-price {

		width: 100%;

	}


}









/* Payment Number
--------------------------------------------- */

.riven-payment-number {

	margin: 14px 0;


	padding: 14px;


	background: #111111;


	color: #ffffff;


	border-radius: 14px;


	text-align: center;


	font-size: 15px;

	font-weight: 700;

}










/* Summary
--------------------------------------------- */

.riven-qo-summary-row {

	display: flex;

	align-items: center;

	justify-content: space-between;


	gap: 15px;


	padding: 10px 0;


	font-size: 14px;


	color: #666666;

}


.riven-qo-summary-row strong {

	font-weight: 700;


	color: #111111;

}


.riven-qo-summary-total {

	margin-top: 10px;


	padding-top: 16px;


	border-top: 1px solid #eeeeee;


	font-size: 18px;

}


.riven-qo-summary-total span,
.riven-qo-summary-total strong {

	color: #000000;


	font-weight: 800;

}



/* Submit Button
--------------------------------------------- */

.riven-qo-submit {

	width: 100%;


	display: flex;

	align-items: center;

	justify-content: center;


	padding: 16px 20px;


	background: #111111;


	color: #ffffff;


	border: 1px solid #111111;

	border-radius: 16px;


	font-size: 16px;

	font-weight: 700;


	cursor: pointer;


	transition:
		background .25s ease,
		color .25s ease,
		transform .2s ease;

}


.riven-qo-submit:hover {

	background: #ffffff;


	color: #111111;

}


.riven-qo-submit:active {

	transform: scale(.97);

}


.riven-qo-submit:focus {

	outline: none;

}









/* Mobile
--------------------------------------------- */

@media(max-width: 767px){


	.riven-qo-options {

		grid-template-columns: 1fr;

	}

	.riven-qo-layout {

		grid-template-columns: 1fr;

	}


	.riven-qo-right {

		position: static;

	}



	.riven-qo-card {

		padding: 16px;


		border-radius: 16px;

	}



	.riven-qo-card-title {

		font-size: 15px;

	}


}


/* Quick Order Back Button
--------------------------------------------- */

.riven-qo-back {

	display: none;

	align-items: center;

	justify-content: center;


	gap: 8px;


	width: fit-content;


	margin-bottom: 18px;


	padding: 11px 16px;


	background: #f8f8f8;


	color: #222222;


	border: 1px solid #eeeeee;


	border-radius: 14px;


	font-size: 14px;

	font-weight: 600;


	cursor: pointer;


	transition:
		background .25s ease,
		color .25s ease,
		border .25s ease,
		transform .2s ease,
		box-shadow .25s ease;

}







/* Icon
--------------------------------------------- */

.riven-qo-back svg {

	width: 18px;

	height: 18px;


	flex-shrink: 0;

}


.riven-qo-back span {

	line-height: 1;

}







/* Hover
--------------------------------------------- */

.riven-qo-back:hover {


	background: #ffffff;


	color: #000000;


	border-color: #111111;


	box-shadow: none;


	transform:
		translateX(-2px);

}







/* Active
--------------------------------------------- */

.riven-qo-back:active {


	transform:
		scale(.96);

}

/* Focus
--------------------------------------------- */

.riven-qo-back:focus {

	outline: none;


	background: #ffffff;


	color: #000000;


	border-color: #111111;


	box-shadow:
		0 0 0 3px rgba(0,0,0,.08),
		0 8px 20px rgba(0,0,0,.07);

}





/* Mobile
--------------------------------------------- */

@media(max-width:767px){


	.riven-qo-back {


		width: 100%;


		margin-bottom: 15px;


		padding: 13px 16px;


	}


}







/* Quick Order Success
--------------------------------------------- */

.riven-qo-success {

	display: none;

	width: 100%;

}





.riven-qo-success-view {

	display: flex;

	flex-direction: column;

	gap: 20px;


	width: 100%;

}







/* Success Header
--------------------------------------------- */

.riven-qo-success-header {

	padding: 32px 24px;


	text-align: center;


	background: #ffffff;


	border: 1px solid #eeeeee;

	border-radius: 24px;


	box-shadow:
		0 12px 35px rgba(0,0,0,.05);

}





.riven-qo-success-icon {

	display: flex;

	align-items: center;

	justify-content: center;


	width: 64px;

	height: 64px;


	margin:
		0 auto 18px;


	background: #111111;


	color: #ffffff;


	border-radius: 50%;


	font-size: 32px;

	font-weight: 800;

}





.riven-qo-success-header h2 {

	margin: 0 0 8px;


	font-size: 26px;

	font-weight: 800;


	color: #111111;

}





.riven-qo-success-header p {

	margin: 0;


	font-size: 15px;


	color: #666666;

}









/* Order Number
--------------------------------------------- */

.riven-qo-order-number {

	display: flex;

	align-items: center;

	justify-content: space-between;


	padding: 18px 20px;


	background: #f8f8f8;


	border: 1px solid #eeeeee;

	border-radius: 18px;

}





.riven-qo-order-number span {

	font-size: 14px;


	color: #666666;

}





.riven-qo-order-number strong {

	font-size: 18px;

	font-weight: 800;


	color: #111111;

}










/* Product Card
--------------------------------------------- */

.riven-qo-success-products {

	padding: 22px;


	background: #ffffff;


	border: 1px solid #eeeeee;

	border-radius: 24px;


	box-shadow:
		0 12px 35px rgba(0,0,0,.04);

}





.riven-qo-success-products h3,
.riven-qo-success-summary h3 {

	margin:
		0 0 18px;


	font-size: 18px;

	font-weight: 800;


	color: #111111;

}






.riven-qo-success-product {

	display: flex;

	align-items: center;


	gap: 14px;


	padding: 14px 0;


	border-bottom: 1px solid #eeeeee;

}





.riven-qo-success-product:last-child {

	border-bottom: 0;

	padding-bottom: 0;

}






.riven-qo-success-product-image {

	width: 70px;

	height: 70px;


	flex-shrink: 0;


	border-radius: 16px;


	background: #fafafa;


	overflow: hidden;

}






.riven-qo-success-product-image img {

	width: 100%;

	height: 100%;


	object-fit: cover;

}







.riven-qo-success-product-info {

	flex: 1;

	min-width: 0;

}






.riven-qo-success-product-info h4 {

	margin: 0 0 8px;


	font-size: 15px;

	font-weight: 700;


	color: #111111;

}






.riven-qo-success-product-info span {

	font-size: 13px;


	color: #777777;

}






.riven-qo-success-product-price {

	font-size: 15px;

	font-weight: 800;


	color: #111111;


	white-space: nowrap;

}










/* Payment Summary
--------------------------------------------- */

.riven-qo-success-summary {

	padding: 22px;


	background: #ffffff;


	border: 1px solid #eeeeee;

	border-radius: 24px;


	box-shadow:
		0 12px 35px rgba(0,0,0,.04);

}






.riven-qo-success-summary > div {

	display: flex;

	align-items: center;

	justify-content: space-between;


	padding: 12px 0;


	border-bottom: 1px solid #eeeeee;

}





.riven-qo-success-summary > div:last-child {

	border-bottom: 0;

}






.riven-qo-success-summary span {

	font-size: 14px;


	color: #666666;

}





.riven-qo-success-summary strong {

	font-size: 15px;

	font-weight: 800;


	color: #111111;

}








/* Remaining COD Highlight
--------------------------------------------- */

.riven-qo-success-total {

	margin-top: 12px;


	padding: 16px !important;


	background: #f8f8f8;


	border-radius: 16px;


	border-bottom: 0 !important;

}






.riven-qo-success-total strong {

	font-size: 20px;

}







.riven-success {

	color: #16a34a !important;

}







/*--------------------------------------------- */

/* Continue Shopping Button
--------------------------------------------- */
.riven-qo-shop-btn {

	position: relative;


	display: flex;

	align-items: center;

	justify-content: center;


	width: 100%;

	min-height: 54px;


	border: none;

	border-radius: 18px;


	background: #111111;


	color: #ffffff;


	font-size: 15px;

	font-weight: 800;


	cursor: pointer;


	overflow: hidden;


	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease;

}





.riven-qo-shop-btn:hover {

	background: #000000;


	transform:
		translateY(-3px);


	box-shadow:
		0 18px 35px rgba(0,0,0,.18);

	color: #FFFFFF;

}






.riven-qo-shop-btn:active {

	transform:
		translateY(0)
		scale(.98);

}







/* Shine Effect
--------------------------------------------- */

.riven-qo-shop-btn::before {

	content: "";


	position: absolute;


	top: 0;

	left: -120%;


	width: 60%;

	height: 100%;


	background:
		linear-gradient(
			120deg,
			transparent,
			rgba(255,255,255,.35),
			transparent
		);


	transform:
		skewX(-20deg);


	transition:
		.6s ease;

}





.riven-qo-shop-btn:hover::before {

	left: 140%;

}










/* Mobile
--------------------------------------------- */

@media(max-width: 575px){


	.riven-qo-success-header {

		padding: 26px 18px;

	}



	.riven-qo-success-icon {

		width: 56px;

		height: 56px;


		font-size: 28px;

	}



	.riven-qo-success-product-image {

		width: 60px;

		height: 60px;

	}



	.riven-qo-success-product {

		align-items: flex-start;

	}



	.riven-qo-success-product-price {

		font-size: 14px;

	}


}


/* Form Processing
--------------------------------------------- */

.riven-qo-form.is-processing {

	pointer-events: none;

	opacity: .65;

}






/* Button Loading
--------------------------------------------- */

.riven-qo-submit.is-loading {

	position: relative;


	color: transparent !important;

}





.riven-qo-submit.is-loading::after {

	content: "";


	position: absolute;


	width: 22px;

	height: 22px;


	border: 3px solid rgba(255,255,255,.35);

	border-top-color: #ffffff;


	border-radius: 50%;


	animation:
		riven-spin .8s linear infinite;

}





@keyframes riven-spin {


	to {

		transform:
			rotate(360deg);

	}


}





/*
|--------------------------------------------------------------------------
| Quick Order Drawer Overlay
|--------------------------------------------------------------------------
*/

.riven-qo-overlay {

	position: fixed;
	inset: 0;

	background:
		rgba(0,0,0,.65);

	backdrop-filter:
		blur(8px);

	opacity: 0;
	visibility: hidden;

	transition:
		opacity .3s ease,
		visibility .3s ease;

	z-index: 99998;

}



.riven-qo-overlay.active {

	opacity: 1;
	visibility: visible;

}








/*
|--------------------------------------------------------------------------
| Quick Order Bottom Sheet
|--------------------------------------------------------------------------
*/

.riven-qo-drawer {

	position: fixed;

	left: 50%;
	bottom: 0;


	width: 1100px;
	max-width: calc(100% - 60px);

	height: 88vh;


	background:
		#ffffff;


	color:
		#111;


	border-radius:
		28px 28px 0 0;



	transform:
		translate(
			-50%,
			110%
		);


	transition:
		transform .35s cubic-bezier(.4,0,.2,1);



	z-index: 99999;


	display: flex;
	flex-direction: column;



	box-shadow:
		0 -25px 80px rgba(0,0,0,.35);


	overflow: hidden;

}



.riven-qo-drawer.active {


	transform:
		translate(
			-50%,
			0
		);


}










/*
|--------------------------------------------------------------------------
| Drag Handle
|--------------------------------------------------------------------------
*/

.riven-qo-drawer::before {


	content: '';

	position: absolute;


	top: 12px;
	left: 50%;


	transform:
		translateX(-50%);



	width: 55px;
	height: 5px;


	background:
		#ddd;


	border-radius:
		20px;


}









/*
|--------------------------------------------------------------------------
| Drawer Header
|--------------------------------------------------------------------------
*/

.riven-qo-header {


	display:flex;

	align-items:center;

	justify-content:space-between;


	padding:
		32px 28px 20px;


	border-bottom:
		1px solid rgba(0,0,0,.08);


	flex-shrink:0;


}



.riven-qo-header h3 {


	margin:0;


	font-size:22px;

	font-weight:800;


	color:#000;


}



.riven-qo-label {


	display:block;


	font-size:12px;

	font-weight:700;


	text-transform:uppercase;

	letter-spacing:.08em;


	color:#777;


	margin-bottom:5px;


}








/*
|--------------------------------------------------------------------------
| Close Button
|--------------------------------------------------------------------------
*/
.riven-qo-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    background: #f7f7f8;
    color: #111827;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    overflow: hidden;
    transition: background .25s ease,
		color .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}


.riven-qo-close:hover {
    background: #111111;
    color: #ffffff;
    transform: rotate(90deg);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.riven-qo-close svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}









/*
|--------------------------------------------------------------------------
| Drawer Body
|--------------------------------------------------------------------------
*/

.riven-qo-body {

	flex:1;

	padding:
		32px 45px;

	overflow-y:auto;

}



/*
|--------------------------------------------------------------------------
| Cart Content Scrollbar
|--------------------------------------------------------------------------
*/

.riven-qo-body {


	scrollbar-width:
		thin;


	scrollbar-color:
		rgba(0,0,0,.25)
		transparent;

}





.riven-qo-body::-webkit-scrollbar {


	width:
		6px;


}





.riven-qo-body::-webkit-scrollbar-track {


	background:
		transparent;


}





.riven-qo-body::-webkit-scrollbar-thumb {


	background:
		rgba(
			0,
			0,
			0,
			.25
		);


	border-radius:
		50px;


}





.riven-qo-body::-webkit-scrollbar-thumb:hover {


	background:
		rgba(
			0,
			0,
			0,
			.45
		);


}










/*
|--------------------------------------------------------------------------
| Old Quick Order Panel Override
|--------------------------------------------------------------------------
*/

.riven-qo-drawer .riven-qo-panel {


	display:block !important;


	opacity:1;


	visibility:visible;


}









/*
|--------------------------------------------------------------------------
| Mobile Bottom Sheet
|--------------------------------------------------------------------------
*/

@media(max-width:767px){


	.riven-qo-drawer {


		left:0;


		width:100%;

		max-width:100%;


		height:90vh;



		border-radius:
			24px 24px 0 0;



		transform:
			translateY(110%);


	}




	.riven-qo-drawer.active {


		transform:
			translateY(0);


	}





	.riven-qo-header {


		padding:

			30px 20px 16px;


	}





	.riven-qo-body {


		padding:

			20px;


	}


}

/*==============================================================
# Quick Order Button
==============================================================*/

.woocommerce button.riven-quick-order-btn{

	display:flex;

	align-items:center;

	justify-content:center;

	width:100%;

	height:58px;

	margin-top:16px;

	border:1px solid var(--riven-quick-form-button-border);

	border-radius: 16px;

	background:var(--riven-quick-form-button-gradient);

	color:var(--riven-quick-form-button-text);

	font-size:18px;

	font-weight:700;

	letter-spacing:.3px;

	cursor:pointer;

	transition:all .25s ease;

}

.woocommerce button.riven-quick-order-btn:hover{

	border-color:var(--riven-quick-form-button-hover-border);

	color:var(--riven-quick-form-button-hover-text);

	background:var(--riven-quick-form-button-gradient-hover);

}

/*------------------------------------
| WhatsApp Order Button
------------------------------------*/

.woocommerce a.riven-whatsapp-order {

	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    margin-top: 16px;
    border: 1px solid var(--riven-quick-form-order-whatspap-button-border);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--riven-quick-form-order-whatspap-button) 0%, var(--riven-quick-form-order-whatspap-button-secondary) 100%);
    color: var(--riven-quick-form-order-whatspap-button-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all .25s ease;
	gap: 6px;

}

.woocommerce a.riven-whatsapp-order:hover {

	transform: translateY(-2px);

	border-color: var(--riven-quick-form-order-whatspap-button-hover-border);

	background: linear-gradient(
		180deg,
		var(--riven-quick-form-order-whatspap-button-hover) 0%,
		var(--riven-quick-form-order-whatspap-button-hover-secondary) 100%
	);

	box-shadow:
		0 18px 40px rgba(0,0,0,.35),
		0 0 18px rgba(217,255,0,.18);

	color: var(--riven-quick-form-order-whatspap-button-hover-text);

}

.woocommerce .riven-whatsapp-order:active {

	transform: scale(.98);

}

.woocommerce .riven-whatsapp-order i {

	font-size: 24px;

	color: #dfff2d;

	transition: transform .25s ease;

}