/*
 * Dalga Reviews: homepage review spotlight. Scoped to #dlr so the Elementor kit and theme cannot leak in.
 * The stylesheet is tagged dracula-ignore and authors both palettes itself.
 * Light = base tokens: a pale lavender card with ink text and violet accents.
 * Dark = html[data-dracula-scheme="dark"], which Dracula stamps: the committed violet card.
 */

#dlr{
	--dlr-ink:#12112e;
	--dlr-card:#f4f2fe; --dlr-card-edge:rgba(96,80,220,.16);
	--dlr-card-ink:#12112e; --dlr-card-ink-2:#4a4675; --dlr-card-line:rgba(18,17,46,.1);
	--dlr-glow:rgba(63,208,194,.22);
	--dlr-deck-1:#e4e0fb; --dlr-deck-2:#efedfc;
	--dlr-shadow:0 1px 2px rgba(18,17,46,.04),0 24px 48px -30px rgba(60,40,200,.35);
	--dlr-glyph:#6050dc;
	--dlr-mark:#b5f0e9; --dlr-mark-ink:#0b2b28;
	--dlr-seg:rgba(18,17,46,.12); --dlr-seg-hover:rgba(18,17,46,.24); --dlr-seg-done:#6050dc; --dlr-seg-on:#6050dc;
	--dlr-arrow-line:rgba(18,17,46,.18); --dlr-arrow-bg:#ffffff; --dlr-arrow-ink:#12112e;
	--dlr-arrow-hover:#6050dc; --dlr-arrow-hover-ink:#ffffff;
	--dlr-pill:rgba(96,80,220,.1); --dlr-pill-ink:#3d2fb8;
	--dlr-star:#e59c12; --dlr-star-e:rgba(18,17,46,.15);
	--dlr-link:#4f3fcf;
	--dlr-scroll:rgba(18,17,46,.3);
	--dlr-p-atb:#1aa596; --dlr-p-ayb:#e0343f; --dlr-p-wacb:#2d8fd5; --dlr-p-baps:#e07a12;
	--dlr-focus:#6050dc;
	--dlr-panel:#ffffff; --dlr-panel-edge:rgba(96,80,220,.14); --dlr-panel-ink:#2a2750; --dlr-panel-fade:#ffffff;
	--dlr-panel-mark:#c9f5ef; --dlr-panel-mark-ink:#0b2b28;
	--dlr-btn:rgba(96,80,220,.1); --dlr-btn-ink:#3d2fb8; --dlr-btn-hover:#6050dc; --dlr-btn-hover-ink:#ffffff;
	--dlr-display:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	--dlr-body:"Nunito","Nunito Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html[data-dracula-scheme="dark"] #dlr{
	--dlr-ink:#ffffff;
	--dlr-card:#5a49d6; --dlr-card-edge:transparent;
	--dlr-card-ink:#ffffff; --dlr-card-ink-2:rgba(255,255,255,.8); --dlr-card-line:rgba(255,255,255,.18);
	--dlr-glow:rgba(63,208,194,.32);
	--dlr-deck-1:#4637b8; --dlr-deck-2:#2c2378;
	--dlr-shadow:0 30px 60px -34px rgba(60,40,200,.75);
	--dlr-glyph:#3fd0c2;
	--dlr-mark:#3fd0c2; --dlr-mark-ink:#062421;
	--dlr-seg:rgba(255,255,255,.22); --dlr-seg-hover:rgba(255,255,255,.4); --dlr-seg-done:#ffffff; --dlr-seg-on:#3fd0c2;
	--dlr-arrow-line:rgba(255,255,255,.3); --dlr-arrow-bg:rgba(255,255,255,.06); --dlr-arrow-ink:#ffffff;
	--dlr-arrow-hover:#ffffff; --dlr-arrow-hover-ink:#4f3fcf;
	--dlr-pill:rgba(255,255,255,.14); --dlr-pill-ink:#ffffff;
	--dlr-star:#ffffff; --dlr-star-e:rgba(255,255,255,.3);
	--dlr-link:#ffffff;
	--dlr-scroll:rgba(255,255,255,.4);
	--dlr-p-atb:#3fd0c2; --dlr-p-ayb:#ff7a7a; --dlr-p-wacb:#8fd0ff; --dlr-p-baps:#ffc37a;
	--dlr-focus:#3fd0c2;
	--dlr-panel:rgba(22,16,82,.34); --dlr-panel-edge:rgba(255,255,255,.12); --dlr-panel-ink:rgba(255,255,255,.92); --dlr-panel-fade:#4c3dc0;
	--dlr-panel-mark:rgba(63,208,194,.9); --dlr-panel-mark-ink:#062421;
	--dlr-btn:rgba(255,255,255,.14); --dlr-btn-ink:#ffffff; --dlr-btn-hover:#ffffff; --dlr-btn-hover-ink:#4f3fcf;
}

/* ---------- reset inside the block ---------- */
#dlr{max-width:1120px;margin:0 auto;padding:56px 20px 64px;color:var(--dlr-ink);font:400 16px/1.6 var(--dlr-body);text-align:left;-webkit-font-smoothing:antialiased}
#dlr *,#dlr *::before,#dlr *::after{box-sizing:border-box}
#dlr [hidden]{display:none!important}
#dlr h2,#dlr p,#dlr blockquote{margin:0;padding:0;border:0;background:none;text-transform:none;letter-spacing:normal}
#dlr blockquote{quotes:none;font-style:normal}
#dlr blockquote::after{content:none}
#dlr button{margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;min-height:0;min-width:0;font:inherit;line-height:inherit;color:inherit;text-transform:none;letter-spacing:normal;cursor:pointer;-webkit-appearance:none;appearance:none}
#dlr button:focus-visible{outline:2px solid var(--dlr-focus);outline-offset:3px;border-radius:6px}
#dlr ::selection{background:var(--dlr-mark);color:var(--dlr-mark-ink)}

/* ---------- heading ---------- */
#dlr .dlr-h{font:800 clamp(26px,2.8vw,34px)/1.15 var(--dlr-display);letter-spacing:-.02em;color:var(--dlr-ink);text-align:center;text-wrap:balance;margin-bottom:32px}

/* ---------- card + deck ---------- */
#dlr .dlr-deck{position:relative;padding-bottom:16px}
/* The two cards peeking out underneath. On a switch the stack moves up one place (see the JS). */
#dlr .dlr-layer{position:absolute;z-index:0;left:5%;right:5%;bottom:8px;height:40px;border-radius:0 0 24px 24px;background:var(--dlr-deck-1);transform-origin:50% 100%}
#dlr .dlr-layer.l2{left:10%;right:10%;bottom:0;background:var(--dlr-deck-2)}
#dlr .dlr-card{position:relative;z-index:2;transform-origin:50% 100%;background:var(--dlr-card);color:var(--dlr-card-ink);border:1px solid var(--dlr-card-edge);border-radius:26px;overflow:hidden;isolation:isolate;box-shadow:var(--dlr-shadow);touch-action:pan-y}
#dlr .dlr-card::before{content:"";position:absolute;width:460px;height:460px;right:-160px;top:-240px;border-radius:50%;background:radial-gradient(circle,var(--dlr-glow),transparent 62%);z-index:-1;pointer-events:none}

/* ---------- progress segments + arrows ---------- */
#dlr .dlr-bar{display:flex;align-items:center;gap:18px;padding:22px 32px 0}
#dlr .dlr-segs{flex:1;display:flex;gap:6px}
#dlr .dlr-seg{flex:1;height:22px;display:flex;align-items:center;border-radius:4px}
#dlr .dlr-seg i{display:block;width:100%;height:3px;border-radius:3px;background:var(--dlr-seg);overflow:hidden;position:relative}
#dlr .dlr-seg i::after{content:"";position:absolute;inset:0;background:var(--dlr-seg-done);transform-origin:left;transform:scaleX(var(--p,0))}
#dlr .dlr-seg.on i::after{background:var(--dlr-seg-on)}
#dlr .dlr-seg:hover i{background:var(--dlr-seg-hover)}
#dlr .dlr-nav{display:flex;align-items:center;gap:8px}
#dlr .dlr-count{font:700 13px var(--dlr-body);color:var(--dlr-card-ink-2);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
#dlr .dlr-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--dlr-arrow-line);background:var(--dlr-arrow-bg);color:var(--dlr-arrow-ink);display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
#dlr .dlr-arrow:hover{background:var(--dlr-arrow-hover);border-color:var(--dlr-arrow-hover);color:var(--dlr-arrow-hover-ink)}
#dlr .dlr-arrow svg{width:16px;height:16px}

/* ---------- slides ---------- */
#dlr .dlr-view{overflow:hidden}
#dlr .dlr-track{display:flex}
/* Snapshot of the outgoing card, animated off the top of the stack (or down into it when going back). */
#dlr .dlr-ghost{position:absolute;top:0;left:0;right:0;margin:0;z-index:3;pointer-events:none;transform-origin:50% 100%}
#dlr .dlr-ghost.under{z-index:1}
#dlr .dlr-slide{flex:0 0 100%;display:flex;flex-direction:column;justify-content:space-between;padding:20px 32px 26px}
#dlr .dlr-q{font:600 clamp(20px,2.05vw,26px)/1.42 var(--dlr-display);letter-spacing:-.012em;color:var(--dlr-card-ink);max-width:52ch}
#dlr .dlr-q::before{content:"\201C";font:800 1.9em/0 var(--dlr-display);color:var(--dlr-glyph);vertical-align:-.36em;margin-right:.08em}
#dlr .dlr-q mark{background:linear-gradient(transparent 7%,var(--dlr-mark) 7%,var(--dlr-mark) 93%,transparent 93%);color:var(--dlr-mark-ink);padding:0 .1em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Full review: a reading panel set into the card. The card grows to fit it (animated in the JS). */
#dlr .dlr-full{position:relative;background:var(--dlr-panel);border:1px solid var(--dlr-panel-edge);border-radius:18px;padding:22px 26px;color:var(--dlr-panel-ink);font:400 16.5px/1.7 var(--dlr-body);max-height:380px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--dlr-scroll) transparent}
#dlr .dlr-full::-webkit-scrollbar{width:6px}
#dlr .dlr-full::-webkit-scrollbar-thumb{background:var(--dlr-scroll);border-radius:6px}
#dlr .dlr-full p{max-width:72ch;margin:0 auto}
#dlr .dlr-full p+p{margin-top:.85em}
#dlr .dlr-full mark{background:var(--dlr-panel-mark);color:var(--dlr-panel-mark-ink);padding:.05em .2em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#dlr .dlr-full.is-scroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
#dlr .dlr-full.is-in{animation:dlr-read .45s cubic-bezier(.16,1,.3,1) both}
@keyframes dlr-read{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#dlr .dlr-cap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px;padding-top:16px;border-top:1px solid var(--dlr-card-line);font:400 13px/1.3 var(--dlr-body);color:var(--dlr-card-ink-2)}
#dlr .dlr-who{font:600 16px/1.2 var(--dlr-display);color:var(--dlr-card-ink)}
#dlr .dlr-stars{display:inline-block;vertical-align:middle}
#dlr .dlr-stars .f{fill:var(--dlr-star)}
#dlr .dlr-stars .e{fill:var(--dlr-star-e)}
#dlr .dlr-prod{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--dlr-pill);color:var(--dlr-pill-ink);font-weight:700;white-space:nowrap}
#dlr .dlr-prod i{width:8px;height:8px;border-radius:50%;background:var(--dlr-p-atb)}
#dlr .dlr-prod[data-p="ayb"] i{background:var(--dlr-p-ayb)}
#dlr .dlr-prod[data-p="wacb"] i{background:var(--dlr-p-wacb)}
#dlr .dlr-prod[data-p="baps"] i{background:var(--dlr-p-baps)}
#dlr .dlr-more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 14px;border-radius:999px;background:var(--dlr-btn);color:var(--dlr-btn-ink);font:700 13px/1 var(--dlr-body);transition:background .2s,color .2s}
#dlr .dlr-more:hover{background:var(--dlr-btn-hover);color:var(--dlr-btn-hover-ink)}
#dlr .dlr-more svg{width:14px;height:14px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
#dlr .dlr-more[aria-expanded="true"] svg{transform:rotate(180deg)}

@media (max-width:760px){
	#dlr{padding-top:40px;padding-bottom:48px}
	#dlr .dlr-h{margin-bottom:22px}
	#dlr .dlr-bar{padding:16px 20px 0}
	#dlr .dlr-slide{padding:14px 20px 20px}
	#dlr .dlr-q{font-size:19px}
	#dlr .dlr-cap{margin-top:16px;padding-top:12px}
	#dlr .dlr-more{margin-left:0}
	#dlr .dlr-full{padding:16px 18px;font-size:15.5px;max-height:55vh}
}
@media (max-width:420px){
	#dlr{padding-inline:16px}
	#dlr .dlr-arrow{width:34px;height:34px}
	#dlr .dlr-count{display:none}
}

/* ---------- drag by hand ---------- */
#dlr .dlr-card{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#dlr .dlr-card .dlr-full{cursor:auto;-webkit-user-select:text;user-select:text}
#dlr .dlr-card button{cursor:pointer}
#dlr.dlr-dragging .dlr-card,#dlr.dlr-dragging .dlr-card *{cursor:grabbing}

/* Let a dragged or thrown card travel to the screen edge. The homepage container's inner box clips
   overflow at the content column; open it and clip at the full-width container instead, so the
   page never scrolls sideways. */
.e-con-inner:has(#dlr){overflow:visible}
.e-con:has(> .e-con-inner #dlr){overflow-x:clip}
@media (prefers-reduced-motion:reduce){#dlr .dlr-full.is-in{animation:none}}