/**
 * Fancy Product Designer – "Apple" Layout & Theme
 * -----------------------------------------------------------------------------
 * A re-skin of the FPD v6 product designer + WooCommerce product page in the
 * style of apple.com: system (San Francisco) typography, generous whitespace,
 * hairline borders, soft shadows, a frosted near-black action bar and blue
 * pill call-to-action buttons.
 *
 * HOW IT WORKS
 *   FPD v6 themes its whole UI through CSS custom properties declared in :root
 *   (--fpd-*). This file (a) remaps those design tokens to Apple values and
 *   (b) refines a handful of components that need more than a token change.
 *   It is enqueued AFTER the plugin's own stylesheets, so nothing here edits
 *   the minified vendor CSS and a plugin update will not clobber the look.
 *
 *   Tweak the values in the ":root" block below to fine-tune the palette.
 * -----------------------------------------------------------------------------
 */

/* =====================================================================
   1. DESIGN TOKENS  – remap FPD's palette to Apple's
   ===================================================================== */
:root {
	/* Apple system font stack (San Francisco on Apple devices) */
	--fpd-apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
		"SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Core palette ----------------------------------------------------- */
	--fpd-primary-color: #1d1d1f;        /* near-black text / dark UI       */
	--fpd-primary-fg-color: #ffffff;
	--fpd-secondary-color: #0071e3;      /* Apple blue accent (active/links)*/
	--fpd-secondary-fg-color: #ffffff;

	--fpd-text-color: #1d1d1f;
	--fpd-input-text-color: #1d1d1f;

	--fpd-light-bg-color: #f5f5f7;       /* Apple's signature light grey    */
	--fpd-light-grey-color: #e8e8ed;     /* secondary button / fills        */
	--fpd-dark-grey-color: #6e6e73;      /* muted / secondary text          */
	--fpd-border-color: #d2d2d7;         /* Apple hairline grey             */

	--fpd-red-color: #d80c2d;
	--fpd-green-color: #2fd158;

	/* Buttons ---------------------------------------------------------- */
	--fpd-btn-primary-color: var(--fpd-secondary-color);
	--fpd-btn-primary-text-color: #ffffff;

	/* Surfaces & radii ------------------------------------------------- */
	--fpd-border-radius: 12px;           /* cards, inputs, panels           */
	--fpd-canvas-bg: #f5f5f7;            /* product stage backdrop          */
	--fpd-module-secondary-color: #f5f5f7;
	--fpd-module-secondary-text-color: #1d1d1f;
	--fpd-list-bg-color-active: rgba(0, 113, 227, 0.08);

	/* Chrome / bars ---------------------------------------------------- */
	--fpd-mainbar-nav-color: #1d1d1f;
	--fpd-actions-bar-bg-color: rgba(22, 22, 23, 0.82);  /* frosted near-black */
	--fpd-actions-bar-height: 60px;
	--fpd-topbar-nav-height: 70px;

	/* Scrollbars ------------------------------------------------------- */
	--fpd-scrollbar-thumb-color: #c7c7cc;
	--fpd-scrollbar-track-color: transparent;
	--fpd-scrollbar-width: 8px;

	/* Overlays / chips ------------------------------------------------- */
	--fpd-snackbar-bg-color: rgba(29, 29, 31, 0.92);
	--fpd-tooltip-bg-color: rgba(29, 29, 31, 0.92);

	/* Apple elevation tokens (used by this stylesheet) ----------------- */
	--fpd-apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--fpd-apple-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.10);
	--fpd-apple-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.16);
	--fpd-apple-pill: 980px;             /* fully-rounded CTA pill          */
}

/* =====================================================================
   2. TYPOGRAPHY  – San Francisco / system on every FPD surface
   ===================================================================== */
.fpd-container,
.fpd-container input,
.fpd-container select,
.fpd-container textarea,
.fpd-container button,
.fpd-modal-overlay,
.fpd-modal-product-designer,
.fpd-snackbar-wrapper,
.fpd-main-tooltip,
body.fancy-product .fpd-product-designer-wrapper {
	font-family: var(--fpd-apple-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.01em;
}

.fpd-container .fpd-headline,
.fpd-container .fpd-title,
.fpd-container .fpd-dialog-title,
.fpd-container .fpd-preview-title {
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--fpd-text-color);
}

/* =====================================================================
   3. MAIN CONTAINER & PRODUCT STAGE  – clean, rounded, airy
   ===================================================================== */
.fpd-container.fpd-sidebar,
.fpd-container.fpd-topbar,
.fpd-container.fpd-off-canvas {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--fpd-border-color);
	box-shadow: var(--fpd-apple-shadow-md);
	background: #ffffff;
}

.fpd-wrapper > fpd-main-wrapper {
	background: var(--fpd-canvas-bg);
}

/* Soft vignette behind the product so it "floats", Apple product-shot style */
.fpd-wrapper > fpd-main-wrapper .fpd-product-stage {
	background:
		radial-gradient(ellipse at center,
			rgba(255, 255, 255, 0.9) 0%,
			rgba(245, 245, 247, 0) 70%);
}

/* View thumbnail strip */
.fpd-container .fpd-view-thumbnails-wrapper {
	gap: 10px;
}
.fpd-container .fpd-view-thumbnails-wrapper > div {
	border-radius: 12px !important;
	border: 1px solid var(--fpd-border-color);
	background: #fff;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.fpd-container .fpd-view-thumbnails-wrapper > div.fpd-active,
.fpd-container .fpd-view-thumbnails-wrapper > div:hover {
	border-color: var(--fpd-secondary-color);
	box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.18);
}

/* =====================================================================
   4. LEFT NAVIGATION / MAIN BAR
   ===================================================================== */
.fpd-container.fpd-sidebar > fpd-main-bar,
.fpd-container.fpd-sidebar > fpd-main-bar .fpd-navigation {
	border-color: var(--fpd-border-color);
}
.fpd-container.fpd-sidebar .fpd-navigation {
	background: #fbfbfd;
}

fpd-main-bar .fpd-navigation > .fpd-nav-item {
	margin: 8px 10px;
	padding: 12px 6px;
	border-radius: 12px;
	transition: background .2s ease, color .2s ease;
}
fpd-main-bar .fpd-navigation > .fpd-nav-item:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.04);
}
fpd-main-bar .fpd-navigation > .fpd-nav-item.fpd-active {
	background: rgba(0, 113, 227, 0.10);
}
fpd-main-bar .fpd-navigation > .fpd-nav-item .fpd-label {
	font-size: 11px;
	letter-spacing: -0.01em;
}

/* =====================================================================
   5. MODULE PANELS, TABS, LISTS  – more whitespace
   ===================================================================== */
.fpd-container {
	--fpd-module-content-padding: 18px;
}
.fpd-container .fpd-module-tabs {
	background: #f5f5f7;
	border-bottom: 1px solid var(--fpd-border-color);
}
.fpd-container .fpd-module-tabs > div {
	padding: 12px 0;
	font-size: 18px;
	transition: color .2s ease, background .2s ease;
}
.fpd-container .fpd-module-tabs > div.fpd-active {
	background: #ffffff;
	color: var(--fpd-secondary-color);
}

/* Grid items / cards inside panels */
.fpd-container .fpd-grid > .fpd-item,
.fpd-container .fpd-photo-grid > .fpd-item {
	border-radius: 12px;
	border: 1px solid var(--fpd-border-color);
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.fpd-container .fpd-grid > .fpd-item:hover,
.fpd-container .fpd-photo-grid > .fpd-item:hover {
	border-color: rgba(0, 0, 0, 0.18);
	box-shadow: var(--fpd-apple-shadow-sm);
	transform: translateY(-1px);
}

/* Section headlines inside panels */
.fpd-container .fpd-panel-tabs,
.fpd-container .fpd-secondary-content .fpd-head {
	border-color: var(--fpd-border-color);
}

/* =====================================================================
   6. FORM CONTROLS  – hairline inputs, blue focus ring
   ===================================================================== */
body .fpd-container input,
body .fpd-container textarea,
body .fpd-container select,
body .fpd-container .fpd-input,
body .fpd-container .fpd-input-search,
body .fpd-container .fpd-input-back-search {
	box-shadow: none !important;
	border: 1px solid var(--fpd-border-color) !important;
	border-radius: 12px;
	background: #ffffff !important;
}
body .fpd-container input:focus,
body .fpd-container textarea:focus,
body .fpd-container select:focus,
body .fpd-container .fpd-input:focus-within,
body .fpd-container .fpd-input-search:focus-within {
	border-color: var(--fpd-secondary-color) !important;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25) !important;
	outline: none;
}
body .fpd-container .fpd-input input {
	border: none !important;
	box-shadow: none !important;
}

/* Range sliders – Apple blue track + round thumb */
.fpd-container input[type="range"]::-webkit-slider-thumb,
.fpd-container fpd-range-slider .fpd-progress {
	background: var(--fpd-secondary-color);
}
.fpd-container fpd-range-slider .fpd-loading-bar,
.fpd-container fpd-range-slider .fpd-track {
	border-radius: 980px;
}

/* Toggle switches */
.fpd-container .fpd-switch.fpd-active,
.fpd-container .fpd-switch-wrapper input:checked + .fpd-switch {
	background: var(--fpd-secondary-color) !important;
}

/* =====================================================================
   7. BUTTONS  – calm by default, blue pills for primary actions
   ===================================================================== */
.fpd-container .fpd-btn,
.fpd-modal-inner .fpd-btn {
	text-transform: none;          /* Apple never shouts in all-caps   */
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.01em;
	border-radius: 980px;          /* pill                              */
	padding: 9px 18px;
	transition: background .2s ease, opacity .2s ease, transform .1s ease;
}
.fpd-container .fpd-btn:hover,
.fpd-modal-inner .fpd-btn:hover {
	opacity: 1;
	filter: brightness(1.06);
}
.fpd-container .fpd-btn:active,
.fpd-modal-inner .fpd-btn:active {
	transform: scale(0.98);
}

/* Secondary / neutral buttons – Apple light-grey capsule */
.fpd-container .fpd-btn.fpd-secondary,
.fpd-modal-inner .fpd-btn.fpd-secondary,
.fpd-secondary-btn,
.fpd-blue-btn {
	background: var(--fpd-light-grey-color) !important;
	color: #1d1d1f !important;
}
.fpd-container .fpd-btn.fpd-secondary:hover,
.fpd-modal-inner .fpd-btn.fpd-secondary:hover {
	background: #dcdce1 !important;
	filter: none;
}

/* =====================================================================
   8. ACTIONS BAR  – frosted near-black with a blue pill primary CTA
   ===================================================================== */
.fpd-container fpd-actions-bar {
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding: 0 12px;
}
.fpd-container fpd-actions-bar .fpd-btn,
.fpd-container fpd-actions-bar .fpd-dropdown-btn {
	text-transform: none;
	border-radius: 980px;
	font-weight: 500;
	padding: 9px 16px;
}
.fpd-container fpd-actions-bar .fpd-btn:hover,
.fpd-container fpd-actions-bar .fpd-dropdown-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* The primary call-to-action (Add to cart / Done / filled button) */
.fpd-container fpd-actions-bar .fpd-btn.fpd-btn-fill,
.fpd-container fpd-actions-bar .fpd-dropdown-btn.fpd-btn-fill,
.fpd-container fpd-actions-bar .fpd-btn.fpd-done,
.fpd-container .fpd-btn.fpd-add-to-cart {
	background: var(--fpd-secondary-color) !important;
	color: #fff !important;
	font-weight: 500;
	padding: 9px 22px;
}
.fpd-container fpd-actions-bar .fpd-btn.fpd-btn-fill:hover,
.fpd-container fpd-actions-bar .fpd-btn.fpd-done:hover,
.fpd-container .fpd-btn.fpd-add-to-cart:hover {
	background: #0077ed !important;
}
.fpd-container fpd-actions-bar .fpd-total-price,
.fpd-container fpd-actions-bar .fpd-price {
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* Zoom control bubble */
.fpd-container .fpd-zoom-wrapper {
	border-radius: 980px;
	box-shadow: var(--fpd-apple-shadow-md);
	border: 1px solid var(--fpd-border-color);
}

/* =====================================================================
   9. COLOUR PANEL & SWATCHES
   ===================================================================== */
.fpd-container .fpd-color-palette > span,
.fpd-container .fpd-color-selection .fpd-cs-item > span {
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--fpd-apple-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fpd-container .fpd-color-palette > span:hover {
	transform: scale(1.12);
}
.fpd-container .fpd-color-palette > span.fpd-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fpd-secondary-color);
}

/* =====================================================================
   10. MODALS, DIALOGS & OVERLAYS  – rounded, soft, frosted backdrop
   ===================================================================== */
.fpd-modal-overlay,
.fpd-modal-product-designer > .fpd-modal-overlay {
	background: rgba(0, 0, 0, 0.48);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.fpd-modal-internal .fpd-modal-content,
.fpd-modal-inner,
.fpd-draggable-dialog,
.fpd-container .fpd-layouts-modal,
.fpd-container .fpd-blank-page-modal {
	border-radius: 18px !important;
	box-shadow: var(--fpd-apple-shadow-lg);
	border: 1px solid var(--fpd-border-color);
}
.fpd-container .fpd-dialog-head {
	border-bottom: 1px solid var(--fpd-border-color);
}

/* Frontend notification / theme-check dialogs (from fancy-product.css) */
.fpd-frontend-notification > div {
	border-radius: 18px;
	box-shadow: var(--fpd-apple-shadow-lg);
}
.fpd-frontend-notification #fpd-frontend-notification-close {
	background: var(--fpd-secondary-color);
	border: none;
	color: #fff;
	border-radius: 980px;
	font-size: 16px;
	font-weight: 500;
	padding: 12px 8px;
}

/* =====================================================================
   11. SNACKBAR, TOOLTIP & LOADERS
   ===================================================================== */
.fpd-snackbar,
.fpd-snackbar-wrapper > div {
	border-radius: 14px !important;
	box-shadow: var(--fpd-apple-shadow-lg);
	font-weight: 500;
}
.fpd-main-tooltip {
	border-radius: 8px !important;
	font-size: 12px;
}

/* =====================================================================
   12. SCROLLBARS
   ===================================================================== */
.fpd-container .fpd-scroll-area::-webkit-scrollbar-thumb {
	background: var(--fpd-scrollbar-thumb-color);
	border-radius: 980px;
}

/* =====================================================================
   13. WOOCOMMERCE PRODUCT PAGE  (scoped to body.fancy-product)
       Apple product-page feel: big calm title, clean price, blue pills.
   ===================================================================== */
body.fancy-product .fpd-product-designer-wrapper {
	margin: 24px 0;
}

/* Product title – large, tight, near-black */
body.fancy-product .product_title,
body.fancy-product .entry-title {
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #1d1d1f;
	line-height: 1.07;
}

/* Price – understated, Apple-style */
body.fancy-product .summary .price,
body.fancy-product .summary .price .amount {
	color: #1d1d1f;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* "Start Customizing" button – primary blue pill */
body.fancy-product #fpd-start-customizing-button {
	background: var(--fpd-secondary-color);
	color: #fff;
	font-family: var(--fpd-apple-font);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	padding: 12px 22px;
	border-radius: 980px;
	border: none;
	text-decoration: none;
	transition: background .2s ease, transform .1s ease;
	box-shadow: none;
}
body.fancy-product #fpd-start-customizing-button:hover {
	background: #0077ed;
}
body.fancy-product #fpd-start-customizing-button:active {
	transform: scale(0.98);
}
body.fancy-product #fpd-start-customizing-button.fpd-disabled {
	background: var(--fpd-light-grey-color);
	color: var(--fpd-dark-grey-color);
}

/* WooCommerce Add-to-cart on FPD product pages – matching blue pill */
body.fancy-product .single_add_to_cart_button.button {
	background: var(--fpd-secondary-color) !important;
	color: #fff !important;
	font-family: var(--fpd-apple-font);
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	font-size: 17px;
	padding: 14px 26px !important;
	border-radius: 980px !important;
	border: none !important;
	box-shadow: none !important;
	transition: background .2s ease, transform .1s ease;
}
body.fancy-product .single_add_to_cart_button.button:hover {
	background: #0077ed !important;
}
body.fancy-product .single_add_to_cart_button.button:active {
	transform: scale(0.98);
}

/* Quantity field to match the rounded controls */
body.fancy-product .quantity input.qty {
	border: 1px solid var(--fpd-border-color);
	border-radius: 12px;
	padding: 10px;
	font-family: var(--fpd-apple-font);
}

/* Login info / helper text – muted Apple secondary grey */
body.fancy-product .fpd-container .fpd-login-info {
	color: var(--fpd-dark-grey-color);
	font-size: 14px;
}

/* Saved-products gallery cards */
body.fancy-product .fpd-saved-products-grid > div {
	border: 1px solid var(--fpd-border-color);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--fpd-apple-shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease;
}
body.fancy-product .fpd-saved-products-grid > div:hover {
	box-shadow: var(--fpd-apple-shadow-md);
	transform: translateY(-2px);
}

/* =====================================================================
   14. RESPONSIVE TWEAKS
   ===================================================================== */
@media (max-width: 768px) {
	.fpd-container.fpd-sidebar,
	.fpd-container.fpd-topbar,
	.fpd-container.fpd-off-canvas {
		border-radius: 14px;
	}
	body.fancy-product #fpd-start-customizing-button,
	body.fancy-product .single_add_to_cart_button.button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}