/* ============================================================
   OpenVan.camp — Article content modules (pluggable)
   Loaded on manual/partner story pages (cluster.blade.php).
   Markup templates: .claude/skills/add-post/templates/
   Colors = OpenVan design tokens (literal hex), dark-mode aware.
   ============================================================ */
[x-cloak]{display:none!important}

/* ===========================================================
   MODULE 1 — Before/After compare slider (branded)
   Markup: templates/before-after-slider.html  ·  class .ovc
   Interactivity: Alpine (inline x-data) — survives wire:navigate
   =========================================================== */
.ovc{margin:1.9rem auto;max-width:440px}
.ovc-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.9rem 0}
@media(min-width:700px){.ovc-grid{grid-template-columns:1fr 1fr}}
.ovc-grid .ovc{margin:0;max-width:none}
/* lone slider in a grid: centered at standalone size, auto-becomes 2-up when a pair is added */
.ovc-grid .ovc:only-child{grid-column:1/-1;justify-self:center;max-width:440px}
.ovc__frame{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:1rem;border:1px solid #E5E7EB;
  box-shadow:0 4px 6px -1px rgb(0 0 0/.10),0 2px 4px -2px rgb(0 0 0/.10);
  background:#E5E7EB;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  cursor:ew-resize;--pos:50%}
.dark .ovc__frame{border-color:#374151;background:#1F2937}
.ovc__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;margin:0;pointer-events:none}
.ovc__layer{position:absolute;inset:0}
.ovc__after{clip-path:inset(0 0 0 var(--pos))}
.ovc__badge{position:absolute;top:16px;z-index:2;display:inline-flex;align-items:center;
  gap:7px;font-weight:600;line-height:1;white-space:nowrap;font-size:13px;
  letter-spacing:.02em;color:#fff;padding:8px 14px 8px 11px;border-radius:.5rem;
  box-shadow:0 4px 6px -1px rgb(0 0 0/.10),0 2px 4px -2px rgb(0 0 0/.10)}
.ovc__badge--before{left:16px;background:rgba(17,24,39,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ovc__badge--after{right:16px;background:#4E8097}
.ovc__dot{width:7px;height:7px;border-radius:9999px;flex:none}
.ovc__badge--before .ovc__dot{background:#D1D5DB}
.ovc__badge--after .ovc__dot{background:#F8D966}
.ovc__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;
  transform:translateX(-50%);pointer-events:none;z-index:2;
  background:linear-gradient(180deg,#F8D966,#fff 30%,#fff 70%,#70B6C8);
  box-shadow:0 0 0 1px rgb(0 0 0/.10)}
.ovc__handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);
  z-index:3;border:none;background:none;padding:0;cursor:ew-resize;display:grid;
  place-items:center}
.ovc__handle:focus-visible{outline:3px solid #50A3BA;outline-offset:4px;border-radius:9999px}
.ovc__knob{width:50px;height:50px;border-radius:9999px;background:#4E8097;border:3px solid #fff;
  box-shadow:0 4px 14px rgba(17,24,39,.34);display:grid;place-items:center;
  transition:transform .15s,background .15s}
.ovc__handle:hover .ovc__knob{background:#3F6B7E;transform:scale(1.06)}
.ovc__frame.is-dragging .ovc__knob{transform:scale(1.06)}
.ovc__knob svg{display:block}
.ovc__knob svg path{stroke:#fff}
.ovc figcaption{margin:.7rem 0 0;font-size:.875rem;color:#6B7280;font-style:italic;
  text-align:center;line-height:1.35}
.dark .ovc figcaption{color:#9CA3AF}

/* ===========================================================
   MODULE 2 — Discount coupon (V3 «Купон»)
   Markup: templates/discount-coupon.html  ·  class .ovp
   Interactivity: Alpine (copy-to-clipboard) — survives wire:navigate
   =========================================================== */
.ovp{margin:2rem 0}
.ovp__card{display:flex;border-radius:1rem;overflow:hidden;border:1px solid #E5E7EB;
  box-shadow:0 4px 6px -1px rgb(0 0 0/.10),0 2px 4px -2px rgb(0 0 0/.10);background:#fff}
.dark .ovp__card{border-color:#374151;background:#1F2937}
.ovp__stub{flex:none;width:160px;padding:24px 18px;color:#fff;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(160deg,#4E8097,#305665)}
.dark .ovp__stub{background:linear-gradient(160deg,#3F6B7E,#21414C)}
.ovp__pct{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em}
.ovp__pct-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.10em;opacity:.85}
.ovp__pct-sub{margin-top:10px;font-size:11px;line-height:1.4;opacity:.8;text-align:center}
.ovp__perf{flex:none;width:2px;align-self:stretch;position:relative;
  background:repeating-linear-gradient(to bottom,#E5E7EB 0 6px,transparent 6px 12px)}
.dark .ovp__perf{background:repeating-linear-gradient(to bottom,#374151 0 6px,transparent 6px 12px)}
.ovp__perf::before,.ovp__perf::after{content:"";position:absolute;left:50%;
  transform:translateX(-50%);width:16px;height:16px;border-radius:9999px;
  background:#fff;border:1px solid #E5E7EB}
.dark .ovp__perf::before,.dark .ovp__perf::after{background:#111827;border-color:#374151}
.ovp__perf::before{top:-9px}
.ovp__perf::after{bottom:-9px}
.ovp__body{flex:1;min-width:0;padding:24px}
.ovp__eyb{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.10em;
  margin:0 0 6px;color:#C3A632}
.dark .ovp__eyb{color:#F8D966}
.ovp__title{margin:0 0 9px;font-size:18px;font-weight:700;color:#111827;line-height:1.2;
  letter-spacing:-.01em}
.dark .ovp__title{color:#fff}
.ovp__text{margin:0 0 16px;font-size:14px;line-height:1.55;color:#374151}
.dark .ovp__text{color:#D1D5DB}
.ovp__text b{color:#111827}
.dark .ovp__text b{color:#fff}
.ovp__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ovp__code{display:inline-flex;align-items:center;gap:8px;border:1px dashed #70B6C8;
  background:#E8F2F6;border-radius:.5rem;padding:8px 10px 8px 13px}
.dark .ovp__code{background:rgba(78,128,151,.14);border-color:#305665}
.ovp__code-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;letter-spacing:.14em;font-size:15px;color:#305665}
.dark .ovp__code-text{color:#9ACBD9}
.ovp__copy{display:inline-flex;align-items:center;gap:7px;font-family:inherit;
  font-weight:600;font-size:13px;cursor:pointer;border-radius:.5rem;padding:5px 7px;
  border:1px solid transparent;background:none;color:#3F6B7E;transition:color .15s}
.ovp__copy:hover{color:#305665}
.dark .ovp__copy{color:#70B6C8}
.ovp__copy svg{width:15px;height:15px;flex:none}
.ovp__copy.is-copied{color:#5E8D34}
.dark .ovp__copy.is-copied{color:#99CA62}
.ovp__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;
  min-width:180px;font-family:inherit;font-weight:600;font-size:15px;line-height:1;
  border-radius:.5rem;border:1px solid transparent;cursor:pointer;padding:13px 20px;
  background:#4E8097;color:#fff;text-decoration:none;transition:background .15s}
.ovp__btn:hover{background:#3F6B7E;color:#fff}
.ovp__btn svg{width:18px;height:18px;flex:none;transition:transform .3s}
.ovp__btn:hover svg{transform:translateX(4px)}
@media (max-width:560px){
  .ovp__card{flex-direction:column}
  .ovp__stub{width:100%;flex-direction:row;justify-content:center;gap:14px;padding:18px}
  .ovp__pct{font-size:36px}
  .ovp__pct-sub{display:none}
  .ovp__perf{width:auto;height:2px;align-self:auto;
    background:repeating-linear-gradient(to right,#E5E7EB 0 6px,transparent 6px 12px)}
  .dark .ovp__perf{background:repeating-linear-gradient(to right,#374151 0 6px,transparent 6px 12px)}
  .ovp__perf::before{top:50%;left:-9px;transform:translateY(-50%)}
  .ovp__perf::after{bottom:auto;top:50%;right:-9px;left:auto;transform:translateY(-50%)}
  .ovp__btn{width:100%;flex:1 1 100%}
}