/* PlayIQ Solution Gate – front-end styles (difficulty icons on dark pills since 1.2.1, difficulty filter, FAQ toggles). RTL. */
:root{--playiq-green:#83b735;--playiq-green-dark:#6a9a26;--playiq-green-soft:#f4f9ec;--playiq-gold:#f5b301;--playiq-grey:#d7d7d7;
  /* Dark difficulty pills (1.2.1) */
  --playiq-dark:#1e1b2e;--playiq-dark-2:#16213e;--playiq-dark-border:rgba(167,139,250,.28);--playiq-accent:#a78bfa;--playiq-accent-2:#7c3aed}

/* ---------- Difficulty icons (PlayIQ brain; .is-on = full colour, .is-off = faded grey) ---------- */
.playiq-icons{display:inline-flex;align-items:center;gap:2px;line-height:1;vertical-align:middle;direction:rtl;white-space:nowrap}
.playiq-icon{display:inline-block;flex:0 0 auto;width:1.15em;height:1.15em;background:url(../img/playiq-brain-96.png) center/contain no-repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.playiq-icon.is-off{filter:grayscale(1) opacity(.25)}
/* Dark pills (1.2.1): off icons = light grey, faint – grayscale alone is too dark on navy */
.playiq-difficulty .playiq-icon.is-on,.playiq-difficulty-filter__link .playiq-icon.is-on,.playiq-icons--content .playiq-icon.is-on{filter:brightness(1.3) saturate(1.2) drop-shadow(0 0 2px rgba(167,139,250,.55))}
.playiq-difficulty .playiq-icon.is-off,.playiq-difficulty-filter__link .playiq-icon.is-off,.playiq-icons--content .playiq-icon.is-off{filter:grayscale(1) brightness(2.6) opacity(.32)}
.playiq-icons--content{margin-inline-start:.3em;gap:.12em;vertical-align:-.12em;padding:.2em .55em;border:1px solid var(--playiq-dark-border);border-radius:999px;background:linear-gradient(180deg,var(--playiq-dark) 0%,var(--playiq-dark-2) 100%);box-shadow:0 1px 4px rgba(0,0,0,.18);color:#fff}
.playiq-icons--content .playiq-icon{width:1.05em;height:1.05em}
.playiq-icons--admin .playiq-icon{width:16px;height:16px}

/* ---------- Difficulty (badge + compact) ---------- */
.playiq-difficulty-wrap{display:block;direction:rtl}
.playiq-difficulty{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5em;direction:rtl;line-height:1.3}
.playiq-difficulty-wrap--badge{margin:0 0 1.1em}
.playiq-difficulty--badge{padding:.5em 1em;border:1px solid var(--playiq-dark-border);border-radius:999px;background:linear-gradient(180deg,var(--playiq-dark) 0%,var(--playiq-dark-2) 100%);box-shadow:0 2px 8px rgba(22,33,62,.25);font-size:.95em;color:#fff}
.playiq-difficulty__label{font-weight:600;color:#fff}
.playiq-difficulty--badge .playiq-icons{gap:3px}
.playiq-difficulty--badge .playiq-icon{width:1.4em;height:1.4em}
.playiq-difficulty__text{font-weight:600;color:#fff}
.playiq-difficulty--badge .playiq-difficulty__text{padding:.15em .7em;border-radius:999px;background:var(--playiq-green);color:#fff;font-size:.85em}
.playiq-difficulty--badge.playiq-difficulty--level-3 .playiq-difficulty__text{background:#e3a008}
.playiq-difficulty--badge.playiq-difficulty--level-4 .playiq-difficulty__text{background:#e8710a}
.playiq-difficulty--badge.playiq-difficulty--level-5 .playiq-difficulty__text{background:#d63638}
.playiq-difficulty-wrap--compact{margin:.3em 0 .4em;text-align:inherit}
.playiq-difficulty--compact{justify-content:center;gap:.2em .35em;padding:.28em .7em;border:1px solid var(--playiq-dark-border);border-radius:1.1em;background:linear-gradient(180deg,var(--playiq-dark) 0%,var(--playiq-dark-2) 100%);font-size:.82em;color:#fff}
.playiq-difficulty--compact .playiq-icon{width:1.2em;height:1.2em}
.playiq-difficulty--compact .playiq-difficulty__text{font-weight:500;color:#fff}
/* WoodMart / WooCommerce grids are usually centered */
.products .playiq-difficulty-wrap--compact,.wd-products .playiq-difficulty-wrap--compact,.product-grid-item .playiq-difficulty-wrap--compact{text-align:center}
.text-left .playiq-difficulty-wrap--compact,.wd-align-start .playiq-difficulty-wrap--compact{text-align:start}

/* ---------- Difficulty filter ---------- */
.playiq-difficulty-filter{direction:rtl;margin:0 0 1.5em}
.playiq-difficulty-filter__title{margin:0 0 .6em;font-weight:700;font-size:1.05em;color:#242424}
.playiq-difficulty-filter__list{display:flex;flex-wrap:wrap;gap:.5em;margin:0!important;padding:0!important;list-style:none!important}
.playiq-difficulty-filter__list li{margin:0!important;padding:0!important;list-style:none!important}
.playiq-difficulty-filter__list li::before{display:none!important}
.playiq-difficulty-filter__link{display:inline-flex;align-items:center;gap:.45em;padding:.45em .9em;border:1px solid var(--playiq-dark-border);border-radius:999px;background:linear-gradient(180deg,var(--playiq-dark) 0%,var(--playiq-dark-2) 100%);color:#fff!important;font-size:.9em;line-height:1.2;text-decoration:none!important;transition:border-color .2s,background-color .2s,box-shadow .2s,color .2s}
.playiq-difficulty-filter__link:hover,.playiq-difficulty-filter__link:focus-visible{border-color:var(--playiq-accent);background:#2a2545;box-shadow:0 2px 10px rgba(124,58,237,.25)}
.playiq-difficulty-filter__link:focus-visible{outline:2px solid var(--playiq-accent);outline-offset:2px}
/* Active pill: purple gradient + accent ring */
.playiq-difficulty-filter__link.is-active{border-color:var(--playiq-accent);background:linear-gradient(135deg,#4c1d95 0%,#3b2a7a 55%,#1e1b4b 100%);box-shadow:0 0 0 2px rgba(167,139,250,.35),0 3px 12px rgba(124,58,237,.35);color:#fff!important;font-weight:600}
.playiq-difficulty-filter__link .playiq-icon{width:1.15em;height:1.15em}
.playiq-difficulty-filter__text{color:#fff}
.playiq-difficulty-filter__count{min-width:1.6em;padding:.1em .45em;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.8em;text-align:center}
.playiq-difficulty-filter__link.is-active .playiq-difficulty-filter__count{background:var(--playiq-accent);color:#1e1b2e;font-weight:700}
.widget .playiq-difficulty-filter__list{flex-direction:column;align-items:flex-start}

/* ---------- FAQ toggles ---------- */
.playiq-faq{display:flex;flex-direction:column;gap:.75em;margin:1em 0 1.75em;direction:rtl;text-align:right}
.playiq-faq .playiq-faq-item{margin:0;border:1px solid #e3ebd6;border-radius:12px;background:#f8faf5;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.playiq-faq .playiq-faq-item:hover{border-color:#c4da9f;box-shadow:0 3px 12px rgba(131,183,53,.12)}
.playiq-faq .playiq-faq-item[open]{border-color:var(--playiq-green);background:#fff;box-shadow:0 6px 18px rgba(131,183,53,.16)}
.playiq-faq .playiq-faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:1em;margin:0;padding:1em 1.25em;list-style:none;cursor:pointer;font-weight:600;font-size:1.02em;line-height:1.5;color:#242424;-webkit-user-select:none;user-select:none;transition:color .2s ease}
.playiq-faq .playiq-faq-item>summary::-webkit-details-marker{display:none}
.playiq-faq .playiq-faq-item>summary::marker{content:""}
.playiq-faq .playiq-faq-item>summary:hover,.playiq-faq .playiq-faq-item[open]>summary{color:var(--playiq-green-dark)}
.playiq-faq .playiq-faq-item>summary:focus-visible{outline:2px solid var(--playiq-green);outline-offset:-2px;border-radius:12px}
/* +/− icon – last flex child = left side in RTL */
.playiq-faq .playiq-faq-item>summary::after{content:"";flex:0 0 1.8em;width:1.8em;height:1.8em;border-radius:50%;background-color:#e8f2d8;background-image:linear-gradient(var(--playiq-green),var(--playiq-green)),linear-gradient(var(--playiq-green),var(--playiq-green));background-size:.8em 2px,2px .8em;background-position:center;background-repeat:no-repeat;transition:transform .3s ease,background-color .2s ease,background-size .3s ease}
.playiq-faq .playiq-faq-item>summary:hover::after{background-color:#dcebc4}
.playiq-faq .playiq-faq-item[open]>summary::after{transform:rotate(180deg);background-color:var(--playiq-green);background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-size:.8em 2px,2px 0}
.playiq-faq .playiq-faq-answer{padding:0 1.25em 1.15em;color:#555;line-height:1.8}
.playiq-faq .playiq-faq-answer>*:first-child{margin-top:0}
.playiq-faq .playiq-faq-answer>*:last-child{margin-bottom:0}
.playiq-faq .playiq-faq-item[open] .playiq-faq-answer{animation:playiq-faq-in .3s ease both}
@keyframes playiq-faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Smooth height animation where supported (Chrome/Edge 131+); others get the fade above */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .playiq-faq{interpolate-size:allow-keywords}
  .playiq-faq .playiq-faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .playiq-faq .playiq-faq-item[open]::details-content{block-size:auto}
}
@media (max-width:600px){
  .playiq-faq .playiq-faq-item>summary{padding:.9em 1em;font-size:1em}
  .playiq-faq .playiq-faq-answer{padding:0 1em 1em}
}
@media (prefers-reduced-motion:reduce){
  .playiq-faq .playiq-faq-item,.playiq-faq .playiq-faq-item>summary::after,.playiq-faq .playiq-faq-item::details-content{transition:none!important}
  .playiq-faq .playiq-faq-item[open] .playiq-faq-answer{animation:none}
}