/* -------------------------------------------------------------------------- */
/* Product-page buttons — configurable styling                                */
/* -------------------------------------------------------------------------- */
/*
 * This stylesheet layers on top of ar-viewer.css and only overrides the
 * properties that are configurable from the "Button & Display Settings"
 * admin screen. Every value is read from a CSS custom property that PHP sets
 * inline, with a fallback that matches the previous hard-coded default — so a
 * button still looks correct even if a variable is not provided.
 *
 * Variables set on the .ar-viewer-buttons wrapper apply to both buttons (or to
 * the 3D button when styles differ). Per-button overrides for the AR button are
 * set inline on the .ar-qr-btn element itself and win via the cascade.
 *
 *   --ar-btn-bg              Background (solid color OR a linear-gradient()).
 *   --ar-btn-text-color      Label / icon color.
 *   --ar-btn-padding         CSS padding shorthand (e.g. "10px 20px").
 *   --ar-btn-radius          Border radius (e.g. "6px").
 *   --ar-btn-border-width    Border width (e.g. "0" or "2px").
 *   --ar-btn-border-style    Border style (solid | dashed | dotted).
 *   --ar-btn-border-color    Border color.
 *   --ar-btn-font-size       Font size (e.g. "14px").
 *   --ar-btn-font-weight     Font weight (400–700).
 *   --ar-btn-font-family     Font family stack, or "inherit".
 *   --ar-btn-icon-dir        Flex direction: "row" (icon left) | "row-reverse".
 *   --ar-btn-margin          Outer margin around the button (e.g. "0px").
 *   --ar-btn-icon-gap        Gap between the icon and the label (e.g. "8px").
 *   --ar-btn-hover-bg        Hover background (blank → falls back to normal bg).
 *   --ar-btn-hover-text-color Hover label color (blank → falls back to normal).
 *   --ar-btn-hover-opacity   Hover opacity (auto-darken fallback, default 0.85).
 *   --ar-btn-hover-border-color Hover border color (blank → normal border color).
 *   --ar-btn-hover-border-width Hover border width (blank → normal border width).
 *   --ar-btn-hover-border-style Hover border style (blank → normal border style).
 */

/*
 * The .ar-viewer-buttons wrapper is layout-only — never frame it. Any border /
 * outline / box-shadow is reset here so a button border only ever appears when
 * the admin sets one (that border lives on .ar-viewer-btn, not the wrapper).
 */
.ar-viewer-buttons {
	border: none;
	outline: none;
	box-shadow: none;
}

.ar-viewer-btn {
	flex-direction: var( --ar-btn-icon-dir, row );
	gap: var( --ar-btn-icon-gap, 8px );
	margin: var( --ar-btn-margin, 0 );
	padding: var( --ar-btn-padding, 10px 20px );
	border-radius: var( --ar-btn-radius, 6px );
	/* Falls back to the legacy solid-color variable, then the neutral default. */
	background: var( --ar-btn-bg, var( --ar-btn-color, #111111 ) );
	color: var( --ar-btn-text-color, #ffffff );
	border: var( --ar-btn-border-width, 0 ) var( --ar-btn-border-style, solid ) var( --ar-btn-border-color, transparent );
	font-size: var( --ar-btn-font-size, 1em );
	font-weight: var( --ar-btn-font-weight, 600 );
	font-family: var( --ar-btn-font-family, inherit );
}

/* Keep the configured colors on focus (base file only restores color). */
.ar-viewer-btn:focus {
	background: var( --ar-btn-bg, var( --ar-btn-color, #111111 ) );
	color: var( --ar-btn-text-color, #ffffff );
}

/* Hover effect — admin-configurable. When no hover color is set the value
   falls back to the normal button color, and opacity provides the auto-darken. */
.ar-viewer-btn:hover {
	background: var( --ar-btn-hover-bg, var( --ar-btn-bg, var( --ar-btn-color, #111111 ) ) );
	color: var( --ar-btn-hover-text-color, var( --ar-btn-text-color, #ffffff ) );
	opacity: var( --ar-btn-hover-opacity, 0.85 );
	border-color: var( --ar-btn-hover-border-color, var( --ar-btn-border-color, currentcolor ) );
	border-width: var( --ar-btn-hover-border-width, var( --ar-btn-border-width, medium ) );
	border-style: var( --ar-btn-hover-border-style, var( --ar-btn-border-style, none ) );
}

.ar-btn-icon {
	font-size: var( --ar-btn-icon-size, 1.1em );
	line-height: 1;
}

/* -------------------------------------------------------------------------- */
/* 3D View modal — clean light showcase                                       */
/* -------------------------------------------------------------------------- */
/*
 * Scoped to #ar-3d-modal so the QR popup modal is unaffected. The background
 * color comes from the admin setting via the --ar-modal-bg inline variable.
 */
#ar-3d-modal .ar-modal-content {
	background: var( --ar-modal-bg, #f0f0f0 );
}

/* Keep the title readable; color auto-picked from the background luminance. */
#ar-3d-modal .ar-modal-title {
	color: var( --ar-modal-title-color, #222222 );
}

/* The viewer fills the stage with a transparent background so the model sits
   directly on the light modal background (with its ground shadow). */
#ar-3d-modal model-viewer {
	width: 100%;
	height: 100%;
	background-color: transparent;
	background: transparent;
	--progress-bar-color: transparent;
}

/* Clean, minimal close button in the top-right corner. */
#ar-3d-modal .ar-modal-close {
	background: rgba( 0, 0, 0, 0.06 );
	color: #333333;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

#ar-3d-modal .ar-modal-close:hover,
#ar-3d-modal .ar-modal-close:focus {
	background: rgba( 0, 0, 0, 0.14 );
	color: #000000;
}