/*
*Theme Name:     PatioTime Child Theme
*Theme URI: 	 https://patiotime.loftocean.com/
*Description:    PatioTime child theme for user customization
*Author:         Loft.Ocean
*Author URI:     http://www.loftocean.com
*License: 		 GNU General Public License v2 or later
*License URI: 	 http://www.gnu.org/licenses/gpl-2.0.html
*Tags: 			 full-width-template, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, rtl-language-support, sticky-post, threaded-comments, translation-ready
*Template:       patiotime
*Text Domain: 	 patiotime-child
*Version:        1.0
*/

 /** Add your styles below **/

/* ---------------------------------------------------------------------------
 * Checkout panels. The theme paints them with `padding:40px; background:
 * var(--light-grey)`, which on this dark palette lands on near-black slabs that
 * float on the brown page. Re-dress them in the plugin's own design tokens so
 * they match the "Доставка" panel: warm surface, one hairline rule, tighter
 * padding. Checkout only — nothing else on the site is touched.
 * ------------------------------------------------------------------------- */

/* "Вашата поръчка" heading + its table read as ONE panel: the heading carries
   the top/side rules, the table the bottom/side ones, so no line runs between. */
.woocommerce-checkout #order_review_heading {
	margin: 0;
	padding: 24px 26px 4px;
	background: var(--fc-surface, #14120f);
	border: 1px solid rgba(242, 237, 228, .18);
	border-bottom: 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: 8px 26px 26px;
	background: var(--fc-surface, #14120f);
	border: 1px solid rgba(242, 237, 228, .18);
	border-top: 0;
}

.woocommerce-checkout #payment {
	padding: 24px 26px;
	background: var(--fc-surface, #14120f);
	border: 1px solid rgba(242, 237, 228, .18);
}

/* "Имате промо код?" bar. */
.woocommerce-checkout .woocommerce-info {
	padding: 14px 20px;
	background: var(--fc-surface, #14120f);
	border: 1px solid rgba(242, 237, 228, .18);
	color: var(--fc-ink, #f2ede4);
}

/* The theme greys payment copy to #999 on dark pages — too dim on this brown. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box p,
.dark-color.woocommerce-checkout #payment div.payment_box {
	color: var(--fc-ink, #f2ede4);
}

/* Order notes: white text, and a placeholder that is legible but clearly a hint. */
.woocommerce-checkout #order_comments,
.woocommerce-checkout .woocommerce-additional-fields textarea {
	color: var(--fc-ink, #f2ede4);
}
.woocommerce-checkout #order_comments::placeholder,
.woocommerce-checkout .woocommerce-additional-fields textarea::placeholder {
	color: rgba(242, 237, 228, .55);
	opacity: 1;
}

/* The theme paints the review TABLE itself (not the wrapper) with
   `padding:40px; background: var(--light-grey)` = #151515, so it sat inside the
   panel as a black slab. Let the panel show through; the row rules carry the
   structure. Its padding moves to the wrapper above. */
.woocommerce-checkout .woocommerce-checkout-review-order table {
	padding: 0;
	background: transparent;
	width: 100%;
}
.woocommerce-checkout .woocommerce-checkout-review-order table th,
.woocommerce-checkout .woocommerce-checkout-review-order table td {
	background: transparent;
	border-color: rgba(242, 237, 228, .14);
}

/* Fields inside the delivery panel: the street dropdown was a black fill with a
   pure-white 1px rule (--fc-line is #ffffff on this palette), which reads as a
   hole punched in the panel. Softer rule, fill just sunk from the surface. */
.woocommerce-checkout #fc-delivery select.select,
.woocommerce-checkout #fc-delivery input.input-text,
.woocommerce-checkout #fc-delivery .select2-container--default .select2-selection--single {
	background: rgba(0, 0, 0, .22);
	border: 1px solid rgba(242, 237, 228, .28);
	color: var(--fc-ink, #f2ede4);
}
.woocommerce-checkout #fc-delivery input.input-text::placeholder,
.woocommerce-checkout #fc-delivery .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: rgba(242, 237, 228, .55);
	opacity: 1;
}

/* Same hairline as the panels above, instead of the full-white token border. */
.woocommerce-checkout #fc-delivery,
.woocommerce-checkout .fc-cutlery {
	border-color: rgba(242, 237, 228, .18);
}

/* ---------------------------------------------------------------------------
 * Product boxes: identical to the catering site.
 *
 * Same values catering uses (radius 10/14, white card, #ece3d7 hairline, the
 * same two shadows, image contained in a 1:1 white frame). Scoped to .fc-shop
 * so the popup, the cart drawer and the checkout are untouched.
 *
 * Colours inside the box change only because the box is now white — cream text
 * on white is invisible. Sizes, weights and casing are NOT touched.
 * ------------------------------------------------------------------------- */

/* Rounding, scoped to the menu only — same as catering (buttons 10px, boxes 14px).
   !important because the plugin's inline fc-custom-vars sets these to 0 on
   .fc-shop with equal specificity. */
.fc-shop {
	--fc-radius: 10px !important;
	--fc-radius-box: 14px !important;
	--fc-card-radius: 14px !important;
}

/* The card box (background, border, radius, shadow) is now driven by
   Food Customizer → Settings → Colours / Borders, so it is editable from the
   admin instead of being pinned here. Nothing to override. */

/* Legibility on the white box. The plugin sets the product name with
   `color: var(--fc-card-title, #fff) !important`, so this needs !important too
   — without it the names are white on white and simply disappear. */
/* Card text colours likewise come from the settings now (card text, product
   name, price, weight/description). The one thing still needed here is the
   product-page price, which is not part of the card. */
.fc-shop .fc-card .fc-price { color: #baa383 !important; }

/* Image centred in a square white frame, exactly as catering does it. */
.fc-shop .fc-card-imgwrap {
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* colour comes from Settings → Colours → Card image background */
	padding: 14px;
	box-sizing: border-box;
	margin: 0;
	border-radius: var(--fc-card-radius, 0px) var(--fc-card-radius, 0px) 0 0;
}
.fc-shop .fc-card-img,
.fc-shop .fc-card-imgwrap img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	margin: 0 auto !important;
	display: block;
}

/* Controls inside the box. */
.fc-shop .fc-card .fc-card-qty { border-color: #d9cfc2; }
.fc-shop .fc-card .fc-card-qty button,
.fc-shop .fc-card input.fc-cq-val { color: #2a1f17; }
.fc-shop .fc-card .button,
.fc-shop .fc-card .fc-card-add,
.fc-shop .fc-card .fc-customize-btn,
.fc-shop .fc-card button.button {
	background: #baa383 !important;
	color: #000000 !important;
	border-color: #baa383 !important;
	/* shape comes from Settings → Borders & shape → Corner radius (buttons/pills) */
}
.fc-shop .fc-card .button:hover,
.fc-shop .fc-card .fc-card-add:hover,
.fc-shop .fc-card .fc-customize-btn:hover,
.fc-shop .fc-card button.button:hover {
	background: #baa383 !important;
	color: #000000 !important;
	border-color: #baa383 !important;
}

/* ---------------------------------------------------------------------------
 * Category pills — the same chips catering uses.
 * The scroll-fade hints are the one thing that cannot be copied verbatim: they
 * fade the row into the PAGE background, which is white on catering and dark
 * brown here, so they use the theme's own --dark-bg-color.
 * ------------------------------------------------------------------------- */
.fc-shop .fc-pill {
	background: #1c1915;
	color: #e6dfd3;
	border: 1px solid #3a342c;
}
.fc-shop .fc-pill:hover {
	background: #baa383;
	color: #000000;
	border-color: #baa383;
}
.fc-shop .fc-pill.is-active {
	background: #baa383;
	color: #000000;
	border-color: #baa383;
}
.fc-shop .fc-pills-wrap::after {
	background: linear-gradient(to left, var(--dark-bg-color, #0e0d0a) 35%, rgba(14, 13, 10, 0)) !important;
}
.fc-shop .fc-pills-wrap::before {
	background: linear-gradient(to right, var(--dark-bg-color, #0e0d0a) 35%, rgba(14, 13, 10, 0)) !important;
}

/* ---------------------------------------------------------------------------
 * Product page: every panel gets the shop-box look, and the tokens are
 * re-pointed INSIDE those panels rather than element by element.
 *
 * This is deliberate: the page's --fc-muted is pure white, so anything using it
 * (the ingredients list, option labels, hints) rendered white-on-white once the
 * panel turned white. Scoping the tokens fixes every such element at once,
 * including ones added later.
 * ------------------------------------------------------------------------- */
.fc-product-wrap .fc-card-box,
.fc-product-wrap .fc-pp-buybar,
.fc-product-wrap .fc-combine-card {
	--fc-ink: #2a1f17;
	--fc-muted: #8a7d6f;
	--fc-line: #e2d8cb;
	--fc-line-strong: #baa383;
	--fc-surface: #ffffff;
	--fc-panel: #ffffff;
	--fc-accent: #baa383;
	--fc-accent-text: #ffffff;
	--fc-radius: 10px;
	--fc-radius-box: 14px;

	background: #ffffff;
	border: 1px solid #ece3d7;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(72, 48, 28, .07);
	color: #2a1f17;
}
.fc-product-wrap .fc-pp-buybar { padding: 18px 20px; margin: 16px 0 4px; }
.fc-product-wrap .fc-combine-card:hover {
	border-color: #ece3d7;
	box-shadow: 0 12px 30px rgba(72, 48, 28, .13);
	transform: translateY(-2px);
}

/* A chosen option / pill fills copper, as the shop buttons do. */
.fc-product-wrap .fc-card-box .fc-opt:has(input:checked) {
	border-color: #baa383;
	background: #faf3ee;
}

/* Buttons inside the panels: copper, matching the shop. */
.fc-product-wrap .fc-pp-add.button,
.fc-product-wrap .fc-pp-buybar .button,
.fc-product-wrap .fc-combine-add,
.fc-product-wrap .fc-combine-btn {
	background: #baa383 !important;
	color: #000000 !important;
	border-color: #baa383 !important;
	/* shape comes from Settings → Borders & shape → Corner radius (buttons/pills) */
}
.fc-product-wrap .fc-pp-add.button:hover,
.fc-product-wrap .fc-pp-buybar .button:hover,
.fc-product-wrap .fc-combine-add:hover,
.fc-product-wrap .fc-combine-btn:hover {
	background: #baa383 !important;
	color: #000000 !important;
	border-color: #baa383 !important;
}

/* ---------------------------------------------------------------------------
 * Category nav on the product page — same chips as the shop, and the same
 * rounding (the pills read --fc-radius, which is 0 outside .fc-shop).
 * ------------------------------------------------------------------------- */
.fc-cat-nav { --fc-radius: 0px; }
.fc-cat-nav .fc-pill {
	background: #1c1915;
	color: #e6dfd3;
	border: 1px solid #3a342c;
	border-radius: 0px;
}
.fc-cat-nav .fc-pill:hover {
	background: #baa383;
	color: #000000;
	border-color: #baa383;
}
.fc-cat-nav .fc-pill.is-active {
	background: #baa383;
	color: #000000;
	border-color: #baa383;
}
.fc-cat-nav .fc-pills-wrap::after {
	background: linear-gradient(to left, var(--dark-bg-color, #0e0d0a) 35%, rgba(14, 13, 10, 0)) !important;
}
.fc-cat-nav .fc-pills-wrap::before {
	background: linear-gradient(to right, var(--dark-bg-color, #0e0d0a) 35%, rgba(14, 13, 10, 0)) !important;
}

/* The shop's own pills get the same rounding as catering. */
.fc-shop .fc-pill { border-radius: 0px; }

/* ---------------------------------------------------------------------------
 * Category pills fill the row when they all fit.
 *
 * The plugin's JS marks the wrapper .fc-scrollable only when the pills actually
 * overflow, so keying off its absence is a reliable "there is spare room here".
 * grow:1 with shrink:0 is deliberate — the pills may stretch to fill a wide
 * screen but must never squeeze on a narrow one, which would suppress the
 * horizontal scroll they rely on.
 * ------------------------------------------------------------------------- */
.fc-pills-wrap:not(.fc-scrollable) .fc-pills { width: 100%; }
/* Filling the row is handled by the plugin's tab-layout setting now
   (Settings -> Menu -> Category tabs layout), which also balances the rows. */
.fc-pills-wrap:not(.fc-scrollable) .fc-pill { text-align: center; }

/* ---------------------------------------------------------------------------
 * Scroll arrows over the cream pills.
 * This site's accent is cream (#f2ede4) — the same tone as the pill chips — so
 * the plugin default would be almost invisible where it matters. Use the copper
 * that the buttons and the active pill already use.
 * ------------------------------------------------------------------------- */
.fc-pills-nav { color: #baa383; }
.fc-pills-nav:hover { color: #d3c2a6; }

/* ---------------------------------------------------------------------------
 * Quantity and "Добави" stay on one line.
 * The plugin gives each control its own full-width row once a card is under
 * 300px, because the stepper is a fixed width and would squeeze the button.
 * On this site the cards are narrower than that, so the pair was always
 * stacked. Keep them side by side and take the space out of the stepper
 * instead — its − / + are still comfortably tappable at 26px.
 * The extra class in each selector outweighs the plugin's container rule, so
 * this holds whichever stylesheet the browser applies last.
 * ------------------------------------------------------------------------- */
.fc-shop .fc-card .fc-card-buy {
	flex-wrap: nowrap;
	gap: 8px;
	align-items: stretch;
}
.fc-shop .fc-card .fc-card-buy .fc-card-qty {
	flex: 0 0 auto;
	width: auto;
	justify-content: center;
}
.fc-shop .fc-card .fc-card-buy .fc-card-add {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;          /* a flex item may shrink below its text width */
	white-space: nowrap;
}

/* Tight cards: give the button the room by trimming the stepper and the label. */
@container (max-width: 300px) {
	.fc-shop .fc-card .fc-card-qty button { width: 26px; }
	.fc-shop .fc-card input.fc-cq-val { min-width: 18px; width: 1.8em; }
	.fc-shop .fc-card .fc-card-buy .fc-card-add {
		padding: 0 10px !important;
		letter-spacing: .03em;
		font-size: .78rem;
	}
}
@container (max-width: 240px) {
	.fc-shop .fc-card .fc-card-qty button { width: 22px; }
	.fc-shop .fc-card .fc-card-buy .fc-card-add {
		padding: 0 6px !important;
		letter-spacing: 0;
		font-size: .72rem;
	}
}

/* ---------------------------------------------------------------------------
 * Button hover — same behaviour as the main site's outline buttons
 * (.button.pt-btn-outline): copper outline at rest, fills copper with black
 * text on hover, lifts 2px, 0.4s transition. Applies to the food-customizer
 * buttons (cards, panels, modal, cart), the WooCommerce add-to-cart links and
 * variation links. Overrides the solid-copper blocks above.
 * ------------------------------------------------------------------------- */
.fc-shop .fc-card .button,
.fc-shop .fc-card .fc-card-add,
.fc-shop .fc-card .fc-customize-btn,
.fc-shop .fc-card button.button,
.fc-product-wrap .fc-pp-add.button,
.fc-product-wrap .fc-pp-buybar .button,
.fc-product-wrap .fc-combine-add,
.fc-product-wrap .fc-combine-btn,
.fc-modal .fc-add-btn.button,
.fc-varmodal-add,
.fc-cart-foot .button,
.fc-flycart .button,
.woocommerce a.button.add_to_cart_button,
a.button.fc-var-link {
	background: transparent !important;
	color: #baa383 !important;
	border: 2px solid #baa383 !important;
	transition: background-color 0.4s, color 0.4s, border-color 0.4s, transform 0.4s !important;
}
.fc-shop .fc-card .button:hover,
.fc-shop .fc-card .fc-card-add:hover,
.fc-shop .fc-card .fc-customize-btn:hover,
.fc-shop .fc-card button.button:hover,
.fc-product-wrap .fc-pp-add.button:hover,
.fc-product-wrap .fc-pp-buybar .button:hover,
.fc-product-wrap .fc-combine-add:hover,
.fc-product-wrap .fc-combine-btn:hover,
.fc-modal .fc-add-btn.button:hover,
.fc-varmodal-add:hover,
.fc-cart-foot .button:hover,
.fc-flycart .button:hover,
.woocommerce a.button.add_to_cart_button:hover,
a.button.fc-var-link:hover {
	background: #baa383 !important;
	color: #000000 !important;
	border-color: #baa383 !important;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
 * My account → Addresses. WooCommerce sets billing and delivery side by side
 * as two narrow floated columns. Stack them full width and dress them like the
 * checkout: Cormorant heading, gold hairline panel (as the payment choices),
 * the site's outline button, and a black primary button on the edit form.
 * The selectors carry `.woocommerce-MyAccount-content` / `.addresses` to
 * outrank the theme's shop.css rules for the same elements.
 * ------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.addresses {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 0;
	border-top: 0;
}
/* Clearfix pseudo-elements would become empty flex items and push the
   heading and the button towards the middle. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.addresses::after,
.woocommerce-account .addresses .woocommerce-Address-title.title::before,
.woocommerce-account .addresses .woocommerce-Address-title.title::after {
	display: none;
}
.woocommerce-account .woocommerce-MyAccount-content .addresses .woocommerce-Address {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 24px 26px 26px;
	box-sizing: border-box;
	background: var(--fc-surface, #fff);
	border: 1px solid var(--fc-line-strong, #baa383);
}
.woocommerce-account .addresses .woocommerce-Address-title.title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 14px;
}
.woocommerce-account .addresses .woocommerce-Address-title.title h2 {
	margin: 0;
	font-size: 28px;
	line-height: 1.35;
}
.woocommerce-account .addresses .woocommerce-Address-title.title a.edit {
	display: inline-block;
	margin: 0;
	padding: 0 22px;
	background: transparent;
	color: #baa383;
	border: 2px solid #baa383;
	font-size: 13px;
	font-weight: 500;
	line-height: 38px;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background-color .4s, color .4s, transform .4s;
}
.woocommerce-account .addresses .woocommerce-Address-title.title a.edit:hover {
	background: #baa383;
	color: #000;
	transform: translateY(-2px);
}
.woocommerce-account .woocommerce-MyAccount-content .addresses .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: 16px;
	line-height: 1.7;
	color: var(--fc-ink, #2a1f17);
}

/* Edit form: checkout-sized heading, and "Запази адреса" as the checkout's
   black "Поръчване" button. */
.woocommerce-edit-address .woocommerce-MyAccount-content form > h2,
.woocommerce-edit-address .woocommerce-MyAccount-content form > h3 {
	font-size: 28px;
	line-height: 1.35;
}
.woocommerce-edit-address .woocommerce-MyAccount-content button.button[name="save_address"] {
	padding: 0 30px;
	background: #000;
	color: #fff;
	transition: background-color .4s, color .4s;
}
.woocommerce-edit-address .woocommerce-MyAccount-content button.button[name="save_address"]:hover {
	background: #baa383;
	color: #000;
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce-MyAccount-content .addresses .woocommerce-Address { padding: 20px 18px 22px; }
	.woocommerce-account .addresses .woocommerce-Address-title.title h2 { font-size: 24px; }
}