/*!
Theme Name: sushiethai
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sushiethai
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sushiethai is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */
.page-header-image {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.page-header-image img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	display: block;
}


.languages ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.languages ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	transition: 0.3s;
}

.languages ul li.active-lang a {
	color: #cda45e !important;
	font-weight: 700;
}

.languages ul li a:hover {
	color: #cda45e;
}

.experience .exp-item {
	display: flex;
	gap: 15px;
	padding: 18px;
	margin-bottom: 15px;
	border-radius: 14px;
	/* background: #fff; */
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	transition: 0.3s;
	border: 1px solid;
	border-color:
			color-mix(in srgb, var(--accent-color), transparent 80%);
	
}

.experience .exp-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.experience .exp-item span {
	font-size: 18px;
	font-weight: bold;
	color: #c59d5f;
	/* restaurant gold tone */
	min-width: 40px;
}

.experience-image img {
	border-radius: 20px;
	object-fit: cover;
}

.menu .menu-img {
	width: 80px !important;
	height: 80px !important;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form input[type=number],
.contact .php-email-form textarea{
	font-size: 14px;
	padding: 10px 15px;
	box-shadow: none;
	border-radius: 0;
	color: var(--default-color);
	background-color:
		color-mix(in srgb, var(--background-color), transparent 50%);
	border-color:
		color-mix(in srgb, var(--accent-color), transparent 70%);

}

.restaurant-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
}

.restaurant-modal.active {
	display: flex;
}

.restaurant-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(6px);
}

.restaurant-modal-box {
	position: relative;
	width: 100%;
	max-width: 950px;
	background: #111;
	border-radius: 24px;
	overflow: hidden;
	z-index: 2;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	animation: modalFade .3s ease;
}

@keyframes modalFade {
	from {
		opacity: 0;
		transform: scale(.92) translateY(20px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.restaurant-modal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.restaurant-modal-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 550px;
}

.restaurant-modal-content {
	padding: 45px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.menu-badge {
	background: var(--accent-color);
	color: #fff;
	display: inline-block;
	padding: 8px 14px;
	border-radius: 40px;
	font-size: 13px;
	margin-bottom: 20px;
	font-weight: 600;
}

.restaurant-modal-content h2 {
	font-size: 38px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #fff;
}

.restaurant-modal-content p {
	color: rgba(255, 255, 255, .75);
	line-height: 1.9;
	margin-bottom: 25px;
}

.restaurant-price-row {
	margin-bottom: 30px;
}

.restaurant-price-row h3 {
	color: var(--accent-color);
	font-size: 34px;
	font-weight: 700;
}

.restaurant-qty-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
}

.qty-btn {
	width: 45px;
	height: 45px;
	border: none;
	border-radius: 50%;
	background: var(--accent-color);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: .3s;
}

.qty-btn:hover {
	transform: scale(1.08);
}

#modalQty {
	width: 90px;
	height: 45px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	text-align: center;
}

.restaurant-cart-btn {
	background: var(--accent-color);
	border: none;
	color: #fff;
	height: 58px;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 600;
	transition: .3s;
}

.restaurant-cart-btn:hover {
	transform: translateY(-2px);
	opacity: .92;
}

.restaurant-close {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 28px;
	z-index: 5;
	cursor: pointer;
}

.menu-card {
	cursor: pointer;
	transition: .35s;
}

.menu-card:hover {
	transform: translateY(-6px);
}

.menu-card .menu-img {
	border-radius: 16px;
}

@media(max-width: 768px) {

	.restaurant-modal-grid {
		grid-template-columns: 1fr;
	}

	.restaurant-modal-image img {
		min-height: 300px;
	}

	.restaurant-modal-content {
		padding: 25px;
	}

	.restaurant-modal-content h2 {
		font-size: 28px;
	}
}


.header-actions {
	gap: 16px;
}

.cart-nav-item {
	position: relative;
}

.cart-toggle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	position: relative;
	font-size: 20px;
	transition: .3s;
}

.cart-toggle:hover {
	transform: translateY(-2px);
	color: #fff;
}

#cartCount {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: var(--accent-color);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-dropdown {
	position: absolute;
	right: 0;
	top: 65px;
	width: 380px;
	background: #111;
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: .3s;
	z-index: 99999;
}

.cart-nav-item:hover .cart-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cart-header h4 {
	color: #fff;
	margin-bottom: 18px;
}

.cart-item {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cart-item h6 {
	color: #fff;
	margin: 0;
	font-size: 15px;
}

.cart-item small {
	color: rgba(255, 255, 255, .65);
}

.cart-item strong {
	color: var(--accent-color);
	font-size: 15px;
}

.cart-footer {
	padding-top: 18px;
}

.cart-footer h5 {
	color: #fff;
	margin-bottom: 18px;
}

.checkout-btn {
	width: 100%;
	height: 50px;
	background: var(--accent-color);
	color: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: 600;
	transition: .3s;
}

.checkout-btn:hover {
	color: #fff;
	transform: translateY(-2px);
}

.empty-cart {
	color: rgba(255, 255, 255, .6);
	margin: 0;
}


.page-hero {
	background: #000;
	min-height: 280px;
	color: #FFD700;
}

.hero-title {
	font-size: 42px;
	font-weight: 700;
	color: #FFD700;
	/* margin-bottom: 10px; */
}

.hero-line {
	width: 80px;
	height: 4px;
	background: #FFD700;
	margin: 0 auto;
	border-radius: 2px;
}

.about-section {
	background: #111;
}

.about-card {
	background: #000;
	border: 1px solid #FFD700;
	border-radius: 12px;
	color: #fff;
}

.section-title {
	color: #FFD700;
	font-weight: 600;
}

.about-content {
	color: #ddd;
	line-height: 1.7;
}

@media (max-width: 768px) {
	.hero-title {
		font-size: 28px;
	}
}

.page-cover-wrapper {
	width: 100%;
	height: 420px;
	overflow: hidden;
	border-radius: 16px;
	border: 2px solid #FFD700;
	background: #000;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.page-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.about-content {
	/* background: #000; */
	padding: 40px;
	border-radius: 16px;
	color: #ddd;
	line-height: 1.8;
	/* border: 1px solid rgba(255, 215, 0, 0.25); */
}

.about-content h1,
.about-content h2,
.about-content h3,
.about-content h4,
.about-content h5,
.about-content h6 {
	color: #FFD700;
	margin-bottom: 15px;
}

.about-content p {
	margin-bottom: 18px;
}

.about-content a {
	color: #FFD700;
	text-decoration: none;
}

.about-content a:hover {
	text-decoration: underline;
}

.about-content ul li {
	margin-bottom: 10px;
}

@media (max-width: 768px) {

	.page-cover-wrapper {
		height: 240px;
		border-radius: 12px;
	}

	.about-content {
		padding: 25px;
	}

}