/*
  LBW Local AR Try-On brand layer
  Edit this file for white-label branding.

  For logo branding:
  1) Upload your logo to: assets/branding/logo.png
  2) Uncomment the logo variables below.

  Main job of this file:
  - GUI colors
  - buttons / chips / panels
  - optional logo
*/

:root {
  --lbw-brand-accent: #2558ab;
  --lbw-brand-accent-hover: #1d488f;
  --lbw-brand-accent-soft: rgba(37, 88, 171, 0.18);
  --lbw-brand-panel-bg: #111111;
  --lbw-brand-side-bg: #171717;
  --lbw-brand-stage-bg: #000000;
  --lbw-brand-card-bg: #202020;
  --lbw-brand-card-bg-hover: #2a2a2a;
  --lbw-brand-card-bg-active: #313131;
  --lbw-brand-text: #ffffff;
  --lbw-brand-text-soft: rgba(255,255,255,0.72);
  --lbw-brand-border: rgba(255,255,255,0.14);
  --lbw-brand-border-strong: rgba(255,255,255,0.28);
  --lbw-brand-overlay: rgba(0,0,0,0.88);
  --lbw-brand-status-bg: rgba(0,0,0,0.55);

  /* Optional logo setup */
  --lbw-brand-logo-image: none;
  --lbw-brand-logo-width: 0px;
  --lbw-brand-logo-height: 0px;
  --lbw-brand-logo-top: 12px;
  --lbw-brand-logo-left: 56px;
}

/* Example logo settings
:root {
  --lbw-brand-logo-image: url('../../branding/logo.png');
  --lbw-brand-logo-width: 140px;
  --lbw-brand-logo-height: 44px;
}
*/

.lbw-local-tryon-modal {
  background: var(--lbw-brand-overlay);
}

.lbw-local-tryon-panel {
  background: var(--lbw-brand-panel-bg);
  color: var(--lbw-brand-text);
}

.lbw-local-tryon-panel::before {
  content: '';
  position: absolute;
  top: var(--lbw-brand-logo-top);
  left: var(--lbw-brand-logo-left);
  width: var(--lbw-brand-logo-width);
  height: var(--lbw-brand-logo-height);
  background-image: var(--lbw-brand-logo-image);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  z-index: 3;
  pointer-events: none;
}

.lbw-local-tryon-stage,
.lbw-local-tryon-stage-wrap,
.lbw-local-tryon-look-stage-wrap {
  background: var(--lbw-brand-stage-bg);
}

.lbw-local-tryon-side,
.lbw-local-tryon-options {
  background: var(--lbw-brand-side-bg);
  color: var(--lbw-brand-text);
}

.lbw-local-tryon-status {
  background: var(--lbw-brand-status-bg);
  color: var(--lbw-brand-text);
}

.lbw-local-tryon-tools,
.lbw-local-tryon-controls,
.lbw-local-tryon-options {
  border-color: var(--lbw-brand-border);
}

.lbw-local-tryon-chip {
  border-color: var(--lbw-brand-border);
  color: var(--lbw-brand-text);
}

.lbw-local-tryon-group-label,
.lbw-local-tryon-note,
.lbw-local-tryon-side-title {
  color: var(--lbw-brand-text-soft);
}

.lbw-local-tryon-tool,
.lbw-local-tryon-swatch,
.lbw-local-tryon-swatch-arrow,
.lbw-local-tryon-side-close,
.lbw-local-tryon-menu-toggle {
  background: var(--lbw-brand-card-bg);
  color: var(--lbw-brand-text);
  border-color: var(--lbw-brand-border);
}

.lbw-local-tryon-tool:hover,
.lbw-local-tryon-swatch:hover,
.lbw-local-tryon-swatch-arrow:hover,
.lbw-local-tryon-side-close:hover,
.lbw-local-tryon-menu-toggle:hover {
  background: var(--lbw-brand-card-bg-hover);
  border-color: var(--lbw-brand-border-strong);
}

.lbw-local-tryon-tool.is-active,
.lbw-local-tryon-swatch.is-active {
  background: var(--lbw-brand-card-bg-active);
  border-color: color-mix(in srgb, var(--lbw-brand-accent) 55%, white 20%);
  box-shadow: 0 0 0 1px var(--lbw-brand-accent-soft) inset;
}

.lbw-local-tryon-tool:focus,
.lbw-local-tryon-tool:focus-visible,
.lbw-local-tryon-swatch:focus,
.lbw-local-tryon-swatch:focus-visible,
.lbw-local-tryon-swatch-arrow:focus,
.lbw-local-tryon-swatch-arrow:focus-visible,
.lbw-local-tryon-menu-toggle:focus,
.lbw-local-tryon-menu-toggle:focus-visible,
.lbw-local-tryon-side-close:focus,
.lbw-local-tryon-side-close:focus-visible,
.lbw-local-tryon-close:focus,
.lbw-local-tryon-close:focus-visible,
.lbw-local-tryon-back:focus,
.lbw-local-tryon-back:focus-visible {
  outline: none;
  border-color: var(--lbw-brand-accent);
  box-shadow: 0 0 0 2px var(--lbw-brand-accent-soft);
}

.lbw-local-tryon-back,
.lbw-local-tryon-button,
.lbw-local-tryon-look-tools .lbw-local-tryon-tool[data-look-role="upload-face"],
.lbw-local-tryon-look-tools .lbw-local-tryon-tool[data-look-role="use-current-selfie"] {
  background: var(--lbw-brand-accent);
  color: #ffffff;
  border-color: var(--lbw-brand-accent);
}

.lbw-local-tryon-back:hover,
.lbw-local-tryon-button:hover,
.lbw-local-tryon-look-tools .lbw-local-tryon-tool[data-look-role="upload-face"]:hover,
.lbw-local-tryon-look-tools .lbw-local-tryon-tool[data-look-role="use-current-selfie"]:hover {
  background: var(--lbw-brand-accent-hover);
  border-color: var(--lbw-brand-accent-hover);
  color: #ffffff;
}

.lbw-local-tryon-swatch .swatch-color {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lbw-brand-accent) 22%, white 10%) inset;
}