/* assets/css/lj-customizer.css  (FULL FILE REPLACEMENT - WITH THEME-TINTED OPTIONS)
   Fixes:
   - remove recursive --lj-radius definition (so radius can actually change)
   - make customizer itself follow theme surface/border/text tokens
   - radius tiles still preview, but also respects global --lj-radius changes
   - OPTION TILES NOW HAVE THEME-TINTED BACKGROUNDS TO MATCH FOLDER CARDS
*/

:root{
  --lj-accent: var(--bs-primary, #0d6efd);
  --lj-accent-rgb: var(--bs-primary-rgb, 13,110,253);

  /* default only (JS / theme can override with a later declaration or inline style) */
  --lj-radius: 16px;

  /* optional theme tokens (if your theme defines them) */
  --lj-surface: var(--surface, var(--card-bg, #ffffff));
  --lj-surface2: var(--surface2, rgba(255,255,255,.65));
  --lj-border: var(--border, rgba(0,0,0,.12));
  --lj-text: var(--text, #0f172a);
  --lj-muted: var(--muted, rgba(15,23,42,.55));
}

/* ── Floating panel — shell styles now live in customizer.php <style> block ──
   This file only carries the inner-control styles below. */
.lj-customizer .offcanvas-body,
.lj-cust-body {
  color: var(--lj-text);
}

/* sections */
.lj-section{ margin-bottom: 14px; }
.lj-section-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lj-section-title,
.lj-field-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lj-muted);
  margin-bottom: 6px;
}
.lj-help{ font-size: 12px; color: var(--lj-muted); line-height: 1.35; }
.lj-divider{ height: 1px; background: color-mix(in srgb, var(--lj-border) 70%, transparent); margin: 12px 0; }
.lj-pill{
  font-size: 12px;
  color: color-mix(in srgb, var(--lj-text) 75%, transparent);
  background: color-mix(in srgb, var(--lj-text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}

/* switch */
.lj-switch{ position:relative; width:52px; height:30px; display:inline-block; }
.lj-switch input{ opacity:0; width:0; height:0; }
.lj-slider{
  position:absolute; inset:0;
  cursor:pointer;
  background: color-mix(in srgb, var(--lj-text) 14%, transparent);
  border-radius: 999px;
  transition:.18s ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lj-border) 70%, transparent);
}
.lj-slider::before{
  content:"";
  position:absolute;
  height:22px; width:22px;
  left:4px; top:4px;
  background:#fff;
  border-radius:999px;
  box-shadow: 0 10px 22px rgba(2,6,23,.18);
  transition:.18s ease;
}
.lj-switch input:checked + .lj-slider{ background: rgba(var(--lj-accent-rgb), .70); }
.lj-switch input:checked + .lj-slider::before{ transform: translateX(22px); }

/* swatches */
.lj-swatch-grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:10px;
  margin-top:10px;
}
.lj-swatch{
  width:40px; height:40px;
  border-radius: max(0px, calc(var(--lj-radius) - 2px));
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  background: var(--lj-surface);
  position:relative;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}
.lj-swatch::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius: max(0px, calc(var(--lj-radius) - 6px));
  background: var(--swatch, #6366f1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.lj-swatch:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(2,6,23,.12); }
.lj-swatch.is-active{
  border-color: rgba(var(--lj-accent-rgb), .70);
  box-shadow: 0 0 0 3px rgba(var(--lj-accent-rgb), .18), 0 14px 34px rgba(2,6,23,.14);
}

.lj-swatch.is-disabled,
[data-theme-preset].is-disabled,
#lj-custom-primary-color.is-disabled {
  opacity: .45;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(.35);
}

/* grids */
.lj-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.lj-grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }

/* OPTION TILES (NOW THEME-TINTED TO MATCH FOLDER CARDS) */
.lj-opt{
  appearance: none;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  /* THEME-TINTED: Accent color at 10% opacity (matches folder cards) */
  background: color-mix(in srgb, var(--lj-accent) 10%, transparent);
  border-radius: max(0px, calc(var(--lj-radius) - 2px));
  padding: 10px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  text-align:left;
  user-select: none;
  color: var(--lj-text);
}
.lj-opt:focus{ outline:none; }
.lj-opt:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--lj-accent-rgb), .22), 0 10px 26px rgba(2,6,23,.08);
  border-color: rgba(var(--lj-accent-rgb), .55);
}
.lj-opt:hover{
  transform: translateY(-1px);
  /* THEME-TINTED: Hover - accent color at 15% opacity (matches folder hover) */
  background: color-mix(in srgb, var(--lj-accent) 15%, transparent);
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}
.lj-opt.is-active{
  /* THEME-TINTED: Active - accent color at 20% opacity */
  background: color-mix(in srgb, var(--lj-accent) 20%, transparent);
  border-color: rgba(var(--lj-accent-rgb), .60);
  box-shadow:
    0 0 0 3px rgba(var(--lj-accent-rgb), .16),
    0 14px 34px rgba(2,6,23,.12);
}

/* thumb base */
.lj-opt-thumb{
  width: 34px;
  height: 24px;
  border-radius: max(0px, calc(var(--lj-radius) - 6px));
  /* THEME-TINTED: Accent color at 15% opacity */
  background: color-mix(in srgb, var(--lj-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.lj-opt.is-active .lj-opt-thumb{
  /* THEME-TINTED: Active thumb - accent color at 25% opacity */
  background: color-mix(in srgb, var(--lj-accent) 25%, transparent);
  border-color: rgba(var(--lj-accent-rgb), .45);
}

/* label */
.lj-opt-label{
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--lj-text) 88%, transparent);
}
.lj-opt.is-active .lj-opt-label{
  color: var(--lj-text);
}

/* common "inner canvas" */
.lj-opt-thumb::before{
  content:"";
  position:absolute;
  inset: 5px;
  border-radius: max(0px, calc(var(--lj-radius) - 9px));
  /* THEME-TINTED: Inner canvas - accent color at 20% opacity */
  background: color-mix(in srgb, var(--lj-accent) 20%, transparent);
}

/* LAYOUT: fluid vs boxed */
.lj-opt[data-group="layout_mode"][data-value="fluid"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  left:6px; right:6px; top:10px; height:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}
.lj-opt[data-group="layout_mode"][data-value="boxed"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  left:10px; right:10px; top:10px; height:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}

/* RADIUS: rounded / standard / flat (thumb corners change) */
.lj-opt[data-group="radius"][data-value="rounded"] .lj-opt-thumb::before{ border-radius: 10px; }
.lj-opt[data-group="radius"][data-value="standard"] .lj-opt-thumb::before{ border-radius: 5px; }
.lj-opt[data-group="radius"][data-value="flat"] .lj-opt-thumb::before{ border-radius: 0px; }

/* MENU PLACEMENT: horizontal vs vertical */
.lj-opt[data-group="menu_placement"][data-value="horizontal"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  left:6px; right:6px; top:6px; height:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}
.lj-opt[data-group="menu_placement"][data-value="vertical"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  top:6px; bottom:6px; left:6px; width:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}

/* MENU BEHAVIOUR: unpinned vs pinned */
.lj-opt[data-group="menu_behaviour"][data-value="unpinned"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  width:6px; height:6px;
  right:6px; top:6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lj-text) 22%, transparent);
}
.lj-opt[data-group="menu_behaviour"][data-value="pinned"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  width:6px; height:6px;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lj-text) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lj-text) 10%, transparent);
}

/* make preview accents use theme color when active */
.lj-opt.is-active .lj-opt-thumb::after{
  background: rgba(var(--lj-accent-rgb), .95) !important;
}
.lj-opt.is-active[data-group="menu_behaviour"][data-value="pinned"] .lj-opt-thumb::after{
  box-shadow: 0 0 0 2px rgba(var(--lj-accent-rgb), .25) !important;
}

/* =====================================================
   SKIN CARDS
   ===================================================== */
.lj-skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.lj-skin-card {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--lj-border) 82%, transparent);
  background: color-mix(in srgb, var(--lj-surface) 92%, white 8%);
  border-radius: max(0px, calc(var(--lj-radius) - 2px));
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  user-select: none;
  color: var(--lj-text);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  position: relative;
  min-height: 176px;
}
.lj-skin-card:focus { outline: none; }
.lj-skin-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--lj-accent-rgb,13,110,253), .22);
}
.lj-skin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(2,6,23,.14);
  border-color: color-mix(in srgb, var(--lj-skin-accent, var(--lj-accent)) 36%, var(--lj-border));
}
.lj-skin-card.is-active {
  border-color: color-mix(in srgb, var(--lj-skin-accent, var(--lj-accent)) 70%, white 30%);
  background: color-mix(in srgb, var(--lj-surface) 94%, var(--lj-skin-accent, var(--lj-accent)) 6%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--lj-skin-accent, var(--lj-accent)) 18%, transparent),
    0 16px 34px rgba(2,6,23,.14);
}

.lj-skin-cover {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--lj-skin-accent, var(--lj-accent)) 16%, var(--lj-surface));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.01);
}

.lj-skin-cover-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(10,15,30,0) 36%, rgba(10,15,30,.18) 58%, rgba(10,15,30,.72) 100%),
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%);
}

.lj-skin-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 20px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
}

.lj-skin-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.lj-skin-body {
  position: relative;
  z-index: 1;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 62px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
}

.lj-skin-name {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.lj-skin-desc {
  font-size: 11px;
  color: rgba(255,255,255,.86);
  line-height: 1.3;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

.lj-skin-palette {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.lj-skin-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--lj-skin-dot);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 2px 6px rgba(2,6,23,.3);
}

.lj-skin-card.is-active .lj-skin-cover::after {
  content: "✓";
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: color-mix(in srgb, var(--lj-skin-accent, var(--lj-accent)) 82%, black 18%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--lj-skin-accent, var(--lj-accent)) 34%, transparent);
}

/* save button */
.lj-customizer .btn.btn-primary,
#lj-save-settings{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  border-radius: var(--lj-radius) !important;
  font-weight: 700;
}
#lj-save-settings:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--lj-accent-rgb), .22) !important;
}