/**
 * Basic design — Olena Food storefront overrides.
 *
 * Loaded AFTER the plugin's default storefront CSS and after tokens.css, so it
 * overrides the defaults purely by cascade order (equal specificity, later
 * wins) — the plugin's own SCSS is never edited.
 *
 * Scope: every rule is nested under the store mount (`.ofo-app-wrapper` =
 * `#olena-food-ordering-app`) so it only affects the Olena storefront, never the
 * host theme or the rest of the page. The one exception is the Olena-specific
 * `.ofo-cart-button` class (a floating widget that can render in its own mount
 * outside `.ofo-app-wrapper`); it is uniquely named to the plugin, so styling it
 * directly is safe and keeps the in-store button and the standalone cart widget
 * visually identical.
 *
 * Technique: first remap the plugin's intermediate palette variables
 * (`--olena-food-ordering-color-*`) onto the design tokens on the wrapper — CSS
 * custom properties inherit through the DOM, so every store component that reads
 * those variables inherits the Basic palette with no per-component duplication.
 * Then a set of scoped selector overrides handle values the defaults hard-code
 * (radii, shadows, the green price accent, the hard-coded green selected/focus
 * tints) and layer in the reference look (pill chips, iconed buttons, add-on "+"
 * affordance, elevated cards).
 *
 * This file must be plain CSS (no SCSS/preprocessing).
 */

/* ========================================================================
   Palette remap (scoped to the storefront subtree)
   ======================================================================== */
.ofo-app-wrapper {
	--olena-food-ordering-color-base: var(--olena-food-design-surface);
	--olena-food-ordering-color-contrast: var(--olena-food-design-text);

	/* Primary / accent (the plugin's green) becomes Coral — Add to Cart, Place
	   Order, cart button, category chips, selected states, etc. */
	--olena-food-ordering-color-accent-1: var(--olena-food-design-primary);
	--olena-food-ordering-color-accent-1-50: var(--olena-food-design-primary-soft);

	/* Secondary text + borders. gray-250 (the plugin's mid-dark body grey) is
	   left at its default so descriptions/labels stay muted; the reference's
	   lighter description tone is applied per-selector below. */
	--olena-food-ordering-color-gray-200: var(--olena-food-design-text-secondary);
	--olena-food-ordering-color-gray-100: var(--olena-food-design-border);
	--olena-food-ordering-color-gray-50: var(--olena-food-design-muted);

	/* Dedicated status colours. */
	--olena-food-ordering-color-success-200: var(--olena-food-design-success);
	--olena-food-ordering-color-warning-200: var(--olena-food-design-warning);
	--olena-food-ordering-color-error-200: var(--olena-food-design-error);
	--olena-food-ordering-color-error-100: var(--olena-food-design-error-soft);

	/* Warm off-white page background behind the menu cards. */
	color: var(--olena-food-design-text);
}

/* ========================================================================
   Store Layout
   ======================================================================== */
.ofo-app-wrapper .ofo-container {
	border-radius: var(--olena-food-design-card-radius);
}

.ofo-app-wrapper .ofo-page-title,
.ofo-app-wrapper .category-title {
	color: var(--olena-food-design-text);
	font-weight: 700;
}

.ofo-app-wrapper .ofo-page-title.ofo-product-taxonomy-title {
	font-weight: 400;
}

/* "View Full Menu" back link beside a category/tag title. */
.ofo-app-wrapper .ofo-product-taxonomy-back-link {
	display: inline-block;
	margin-left: 0.75rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--olena-food-design-primary);
	text-decoration: none;
	transition: var(--olena-food-design-transition);
}

.ofo-app-wrapper .ofo-product-taxonomy-back-link:hover {
	color: var(--olena-food-design-primary-hover);
	text-decoration: underline;
}

/* ========================================================================
   Menu Item Cards (Grid + List)
   ======================================================================== */
.ofo-app-wrapper .menu-grid {
	grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
}

.ofo-app-wrapper .menu-item {
	background: var(--olena-food-design-surface);
	border: 1px solid var(--olena-food-design-border);
	border-radius: var(--olena-food-design-card-radius);
	box-shadow: var(--olena-food-design-shadow-card);
	padding: 12px;
	overflow: hidden;
	transition: var(--olena-food-design-transition);
}

.ofo-app-wrapper .menu-item:hover {
	border-color: var(--olena-food-design-border-strong);
	box-shadow: var(--olena-food-design-shadow-card-hover);
	transform: translateY(-2px);
}

/* Inset, rounded image (all four corners) inside the padded card. */
.ofo-app-wrapper .menu-item img {
	border-radius: var(--olena-food-design-radius-md);
}

.ofo-app-wrapper .menu-item-content {
	padding: 1rem 0.5rem 0.5rem;
}

.ofo-app-wrapper .menu-item-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--olena-food-design-text);
}

.ofo-app-wrapper .menu-item-description {
	color: var(--olena-food-design-text-secondary);
}

/* Price — green "money" accent, distinct from the coral actions. */
.ofo-app-wrapper .menu-item-price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--olena-food-design-price);
}

.ofo-app-wrapper .menu-item-price-from {
	color: var(--olena-food-design-text-secondary);
}

/* List view keeps its own image geometry; make it rounded + inset too. */
@media screen and (min-width: 768px) {
	.ofo-app-wrapper .menu-list .menu-item {
		box-shadow: var(--olena-food-design-shadow-card);
		gap: 1rem;
	}

	.ofo-app-wrapper .menu-list .menu-item .menu-item-image img {
		border-radius: var(--olena-food-design-radius-md);
	}
}

/* ========================================================================
   Category & Tag chips (pills)
   ======================================================================== */
.ofo-app-wrapper .menu-item-categories a,
.ofo-app-wrapper .menu-item-tags a {
	display: inline-flex;
	align-items: center;
	border-radius: var(--olena-food-design-chip-radius);
	padding: 0.3rem 0.85rem;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Category chips: coral, subtle tinted fill. */
.ofo-app-wrapper .menu-item-categories a {
	background-color: var(--olena-food-design-primary-soft);
	color: var(--olena-food-design-primary);
	border: 1px solid var(--olena-food-design-primary);
}

.ofo-app-wrapper .menu-item-categories a:hover {
	background-color: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
}

/* Tag chips: neutral warm pill. */
.ofo-app-wrapper .menu-item-tags a {
	background-color: var(--olena-food-design-muted);
	color: var(--olena-food-design-text-secondary);
	border: 1px solid var(--olena-food-design-border);
}

.ofo-app-wrapper .menu-item-tags a:hover {
	background-color: var(--olena-food-design-muted);
	border-color: var(--olena-food-design-border-strong);
	color: var(--olena-food-design-text);
}

/* ========================================================================
   Buttons (store card + shared primary/secondary)
   ======================================================================== */

/* Make the card's two actions share the row equally, like the reference. */
.ofo-app-wrapper .menu-item-buttons {
	align-items: stretch;
	gap: 0.75rem;
}

.ofo-app-wrapper .menu-item-buttons > button,
.ofo-app-wrapper .menu-item-buttons > a {
	flex: 1 1 0;
	white-space: nowrap;
}

/* Solid coral primary (Add to Cart). */
.ofo-app-wrapper .add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	border-radius: var(--olena-food-design-control-radius);
	font-weight: 600;
	background-color: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
}

.ofo-app-wrapper .add-to-cart:hover {
	background-color: var(--olena-food-design-primary-hover);
}

/* Outline secondary (Customize / View Cart / Back to Shop). */
.ofo-app-wrapper .customize-menu-item,
.ofo-app-wrapper .view-cart-link,
.ofo-app-wrapper .back-to-shop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	border-radius: var(--olena-food-design-control-radius);
	font-weight: 600;
	background-color: var(--olena-food-design-surface);
	color: var(--olena-food-design-text);
	border: 1px solid var(--olena-food-design-border-strong);
}

.ofo-app-wrapper .customize-menu-item:hover,
.ofo-app-wrapper .view-cart-link:hover,
.ofo-app-wrapper .back-to-shop:hover {
	border-color: var(--olena-food-design-primary);
	color: var(--olena-food-design-primary);
}

/* Decorative leading icons (mask-based, tinted by the button's text colour).
   Purely decorative — the buttons already carry their own text labels. */
.ofo-app-wrapper .customize-menu-item::before,
.ofo-app-wrapper .add-to-cart::before,
.ofo-app-wrapper .view-cart-link::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ofo-app-wrapper .customize-menu-item::before {
	-webkit-mask-image: url("icons/customize.svg");
	mask-image: url("icons/customize.svg");
}

.ofo-app-wrapper .add-to-cart::before,
.ofo-app-wrapper .view-cart-link::before {
	-webkit-mask-image: url("icons/cart.svg");
	mask-image: url("icons/cart.svg");
}

/* ========================================================================
   Floating cart button (in-store + standalone widget)
   ======================================================================== */
.ofo-cart-button {
	background: var(--olena-food-design-primary);
	border: none;
	border-radius: var(--olena-food-design-radius-md);
	padding: 0.85rem;
	box-shadow: var(--olena-food-design-shadow-button);
}

.ofo-cart-button .cart-icon {
	fill: var(--olena-food-design-on-primary);
}

.ofo-cart-button:hover {
	background: var(--olena-food-design-primary-hover);
	box-shadow: var(--olena-food-design-shadow-float);
	transform: translateY(-2px);
}

.ofo-cart-button:hover .cart-icon {
	fill: var(--olena-food-design-on-primary);
}

.ofo-cart-button-amount-number {
	background: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
	border: 2px solid var(--olena-food-design-surface);
}

/* ========================================================================
   Single Item (popup / details)
   ======================================================================== */
.ofo-app-wrapper .ofo-single-product-popup {
	background-color: rgba(20, 26, 38, 0.72);
}

.ofo-app-wrapper .dish-details,
.ofo-app-wrapper .addons-list {
	border-radius: var(--olena-food-design-radius-lg);
	box-shadow: var(--olena-food-design-shadow-card);
	border: 1px solid var(--olena-food-design-border);
}

.ofo-app-wrapper .dish-title {
	font-weight: 800;
	color: var(--olena-food-design-text);
}

.ofo-app-wrapper .dish-details img {
	border-radius: var(--olena-food-design-radius-md);
}

.ofo-app-wrapper .dish-image {
	border-radius: var(--olena-food-design-radius-md);
}

/* Price on the single item — green money accent. */
.ofo-app-wrapper .price-tag {
	color: var(--olena-food-design-price);
	font-weight: 700;
}

/* In the single-item header the category reads as a solid coral chip
   (matching the reference), while tags stay neutral. */
.ofo-app-wrapper .dish-details .menu-item-categories a {
	background-color: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
	border-color: var(--olena-food-design-primary);
}

.ofo-app-wrapper .customization-title,
.ofo-app-wrapper .addons-title {
	color: var(--olena-food-design-text);
	font-weight: 700;
}

.ofo-app-wrapper .addons-title {
	border-bottom-color: var(--olena-food-design-border);
}

/* Add-on category headers. */
.ofo-app-wrapper .ofo-available-add-ons-category-name {
	color: var(--olena-food-design-text);
	font-weight: 700;
	border-bottom-color: var(--olena-food-design-border);
}

/* Customizations dashed drop area. */
.ofo-app-wrapper .customization-area {
	background: var(--olena-food-design-muted);
	border: 2px dashed var(--olena-food-design-primary);
	border-radius: var(--olena-food-design-radius-md);
}

/* ========================================================================
   Add-ons / options
   ======================================================================== */

/* Available add-on row: white card with a coral "+" affordance on the right.
   The whole row is the real click target (unchanged); the "+" is a decorative
   indicator of that existing action, not a separate control. */
.ofo-app-wrapper .addon-item {
	position: relative;
	background: var(--olena-food-design-surface);
	border: 1px solid var(--olena-food-design-border);
	border-radius: var(--olena-food-design-radius-md);
	padding: 0.9rem 3.4rem 0.9rem 1rem;
	transition: var(--olena-food-design-transition);
}

.ofo-app-wrapper .addon-item:hover {
	border-color: var(--olena-food-design-primary);
	box-shadow: var(--olena-food-design-shadow-card);
	transform: none;
}

.ofo-app-wrapper .addon-item::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.85rem;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--olena-food-design-radius-sm);
	border: 1px solid var(--olena-food-design-primary);
	color: var(--olena-food-design-primary);
	background: var(--olena-food-design-surface);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
}

.ofo-app-wrapper .addon-item:hover::after {
	background: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
}

.ofo-app-wrapper .addon-name {
	color: var(--olena-food-design-text);
	font-weight: 500;
}

/* Add-on prices — green money accent. */
.ofo-app-wrapper .addon-price {
	color: var(--olena-food-design-price);
	font-weight: 700;
}

/* Selected add-on row. */
.ofo-app-wrapper .selected-addon {
	background: var(--olena-food-design-surface);
	border: 1px solid var(--olena-food-design-border);
	border-radius: var(--olena-food-design-radius-md);
}

.ofo-app-wrapper .selected-addon:hover {
	border-color: var(--olena-food-design-primary);
	box-shadow: var(--olena-food-design-shadow-card);
}

/* ========================================================================
   Quantity controls
   ======================================================================== */
.ofo-app-wrapper .quantity-selector {
	background: var(--olena-food-design-muted);
	border-radius: var(--olena-food-design-radius-pill);
	padding: 0.25rem;
}

.ofo-app-wrapper .quantity-selector .quantity-btn {
	border-radius: 50%;
	border-color: var(--olena-food-design-border);
	color: var(--olena-food-design-primary);
}

.ofo-app-wrapper .quantity-selector .quantity-btn:hover {
	background: var(--olena-food-design-primary);
	border-color: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
}

/* ========================================================================
   Price breakdown / totals (single item)
   ======================================================================== */
.ofo-app-wrapper .total-section {
	background: var(--olena-food-design-muted);
	border: 1px solid var(--olena-food-design-border);
	border-radius: var(--olena-food-design-radius-md);
}

.ofo-app-wrapper .total-section .final-total {
	border-top: 1px solid var(--olena-food-design-border);
	margin-top: 0.25rem;
}

/* Primary full-width Add to Cart (single item) — coral + cart icon. */
.ofo-app-wrapper .order-button {
	border-radius: var(--olena-food-design-control-radius);
	background-color: var(--olena-food-design-primary);
	font-weight: 600;
	gap: 0.6rem;
	align-items: center;
}

.ofo-app-wrapper .order-button.ofo-in-cart {
	background-color: var(--olena-food-design-on-primary);
}

.ofo-app-wrapper .order-button:hover {
	background-color: var(--olena-food-design-primary-hover);
}

.ofo-app-wrapper .order-button.ofo-in-cart:hover {
	background-color: var(--olena-food-design-surface);
}

.ofo-app-wrapper .order-button::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-image: url("icons/cart.svg");
	mask-image: url("icons/cart.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* The "View Cart" secondary variant keeps the outline treatment (no override of
   its coral border), but drop the leading icon duplication for the ghost state. */
.ofo-app-wrapper .order-button.ofo-in-cart::before {
	opacity: 0.85;
}

/* Popup close button. */
.ofo-app-wrapper .popup-close-btn {
	border-radius: var(--olena-food-design-radius-sm);
	border-color: var(--olena-food-design-border-strong);
}

.ofo-app-wrapper .popup-close-btn:hover {
	background-color: var(--olena-food-design-primary);
	border-color: var(--olena-food-design-primary);
}

/* ========================================================================
   Cart
   ======================================================================== */
.ofo-app-wrapper .cart-items,
.ofo-app-wrapper .cart-summary {
	border-radius: var(--olena-food-design-radius-lg);
	box-shadow: var(--olena-food-design-shadow-card);
	border: 1px solid var(--olena-food-design-border);
}

.ofo-app-wrapper .cart-items .subtotal {
	color: var(--olena-food-design-price);
}

.ofo-app-wrapper .checkout-btn {
	border-radius: var(--olena-food-design-control-radius);
	font-weight: 600;
}

.ofo-app-wrapper .quantity-controls .quantity-btn:hover {
	border-color: var(--olena-food-design-primary);
	background: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
}

/* ========================================================================
   Checkout
   ======================================================================== */
.ofo-app-wrapper .checkout-section,
.ofo-app-wrapper .order-summary {
	border-radius: var(--olena-food-design-radius-lg);
	box-shadow: var(--olena-food-design-shadow-card);
	border: 1px solid var(--olena-food-design-border);
}

/* Form fields — coral focus ring (defaults hard-code a green ring). */
.ofo-app-wrapper .form-input:focus,
.ofo-app-wrapper .coupon-input:focus {
	border-color: var(--olena-food-design-primary);
	box-shadow: var(--olena-food-design-focus-ring);
}

/* Delivery / payment option cards — coral selected + focus (defaults hard-code
   a green tint). */
.ofo-app-wrapper .delivery-option:hover,
.ofo-app-wrapper .payment-method:hover {
	border-color: var(--olena-food-design-primary);
}

.ofo-app-wrapper .delivery-option.selected,
.ofo-app-wrapper .payment-method.selected {
	border-color: var(--olena-food-design-primary);
	background: var(--olena-food-design-primary-softer);
}

.ofo-app-wrapper .delivery-price {
	color: var(--olena-food-design-price);
}

.ofo-app-wrapper .place-order-btn {
	border-radius: var(--olena-food-design-control-radius);
	font-weight: 600;
}

.ofo-app-wrapper .place-order-btn:hover {
	background-color: var(--olena-food-design-primary-hover);
	filter: none;
}

/* Checkout progress step (active). */
.ofo-app-wrapper .progress-step.active .step-number {
	background: var(--olena-food-design-primary);
	border-color: var(--olena-food-design-primary);
}

/* ========================================================================
   Payment / Receipt
   ======================================================================== */
.ofo-app-wrapper .ofo-payment-container,
.ofo-app-wrapper .ofo-receipt-container {
	border-radius: var(--olena-food-design-radius-lg);
	box-shadow: var(--olena-food-design-shadow-card);
}

.ofo-app-wrapper .ofo-receipt-container {
	border: 1px solid var(--olena-food-design-primary);
}

.ofo-app-wrapper .item-price {
	color: var(--olena-food-design-price);
}

/* ========================================================================
   Tip selector (checkout summary)
   ======================================================================== */
.ofo-app-wrapper .ofo-tip-option {
	border-radius: var(--olena-food-design-radius-pill);
	border-color: var(--olena-food-design-border);
}

.ofo-app-wrapper .ofo-tip-option:hover {
	border-color: var(--olena-food-design-primary);
}

.ofo-app-wrapper .ofo-tip-option--selected {
	background-color: var(--olena-food-design-primary);
	border-color: var(--olena-food-design-primary);
	color: var(--olena-food-design-on-primary);
}

/* ========================================================================
   Pagination
   ======================================================================== */
.ofo-app-wrapper .ofo-main-menu-pagination button {
	border-radius: var(--olena-food-design-radius-sm);
	border-width: 1px;
}

.ofo-app-wrapper .ofo-main-menu-pagination button:hover:not(:disabled) {
	border-color: var(--olena-food-design-primary);
	color: var(--olena-food-design-primary);
}