/* ============================================================
   WeGames — כלי המרת תמונה לדף צביעה
   assets/css/coloring-converter.css
   נטען מותנית רק בעמוד שמשתמש בתבנית page-coloring-converter.php
   כל המחלקות בקידומת .ccv- כדי לא להתנגש בשאר האתר
   ============================================================ */

.ccv{
  --ccv-ink:#1a1a2e;
  --ccv-soft:#4a4a63;
  --ccv-faint:#8c8ca6;
  --ccv-accent:var(--accent, #5c6bc0);
  --ccv-accent-soft:#eceefb;
  --ccv-crayon:#ff7043;
  --ccv-paper:#fff;
  --ccv-line:#dcdce6;
  direction:rtl;
  max-width:1100px;
  margin:0 auto;
}

/* ---------- פירורי לחם ---------- */
.ccv-crumbs{font-size:.8rem;color:var(--ccv-faint);margin-bottom:14px}
.ccv-crumbs a{color:var(--ccv-faint);text-decoration:none}
.ccv-crumbs a:hover{color:var(--ccv-accent)}
.ccv-crumbs span{margin:0 5px}

/* ---------- כותרת ---------- */
.ccv-masthead{max-width:640px;margin-bottom:20px}
.ccv-h1{font-size:1.85rem;font-weight:800;letter-spacing:-.015em;line-height:1.15;color:var(--ccv-ink)}
.ccv-h1 em{font-style:normal;color:var(--ccv-crayon)}
.ccv-lede{font-size:.95rem;color:var(--ccv-soft);margin-top:7px;line-height:1.65}

/* ---------- אזור הכלי ---------- */
.ccv-tool{max-width:720px}

.ccv-blank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:34px 22px;cursor:pointer;
  background:var(--ccv-paper);border-radius:4px;min-height:250px;
  box-shadow:0 1px 2px rgba(26,26,46,.08),0 12px 28px -8px rgba(26,26,46,.2);
  border:2px dashed transparent;transition:border-color .15s;
}
.ccv-blank:hover,.ccv-blank.is-over{border-color:var(--ccv-accent)}
.ccv-mark{width:54px;height:54px;border-radius:50%;background:var(--ccv-crayon);opacity:.14}
.ccv-blank-title{font-size:1.08rem;font-weight:700;color:var(--ccv-ink)}
.ccv-blank-sub{font-size:.85rem;color:var(--ccv-faint);max-width:33ch;line-height:1.6}
.ccv-blank input[type=file]{display:none}

/* ---------- טעינה ---------- */
.ccv-loading{display:none;text-align:center;padding:52px 20px;color:var(--ccv-faint);font-size:.9rem}
.ccv-loading.is-on{display:block}
.ccv-loading p{margin-top:12px}
.ccv-dots span{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--ccv-crayon);margin:0 3px;animation:ccvBob .9s infinite ease-in-out;
}
.ccv-dots span:nth-child(2){animation-delay:.15s}
.ccv-dots span:nth-child(3){animation-delay:.3s}
@keyframes ccvBob{
  0%,80%,100%{transform:translateY(0);opacity:.4}
  40%{transform:translateY(-7px);opacity:1}
}

/* ---------- בחירת גרסה ---------- */
.ccv-picker{display:none}
.ccv-picker.is-on{display:block}
.ccv-step{font-size:.95rem;font-weight:700;margin-bottom:3px;color:var(--ccv-ink)}
.ccv-step-sub{font-size:.83rem;color:var(--ccv-faint);margin-bottom:13px;line-height:1.6}

.ccv-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ccv-opt{
  border:none;padding:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;gap:7px;
  -webkit-tap-highlight-color:transparent;font-family:inherit;
}
.ccv-opt-thumb{
  background:var(--ccv-paper);border-radius:4px;overflow:hidden;line-height:0;
  box-shadow:0 1px 2px rgba(26,26,46,.1);
  outline:3px solid transparent;
  transition:outline-color .14s,transform .14s;
}
.ccv-opt:hover .ccv-opt-thumb{transform:translateY(-2px)}
.ccv-opt[aria-pressed="true"] .ccv-opt-thumb{outline-color:var(--ccv-ink)}
.ccv-opt:focus-visible .ccv-opt-thumb{outline-color:var(--ccv-accent)}
.ccv-opt canvas{width:100%;height:auto;display:block}
.ccv-opt-name{font-size:.78rem;font-weight:700;color:var(--ccv-faint);text-align:center}
.ccv-opt[aria-pressed="true"] .ccv-opt-name{color:var(--ccv-ink)}

/* ---------- תצוגה גדולה ---------- */
.ccv-big{margin-top:20px}
.ccv-sheet{
  background:var(--ccv-paper);border-radius:4px;overflow:hidden;
  position:relative;line-height:0;
  box-shadow:0 1px 2px rgba(26,26,46,.08),0 12px 28px -8px rgba(26,26,46,.22);
}
.ccv-sheet::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(26,26,46,.06);
}
.ccv-sheet canvas{width:100%;height:auto;display:block}

.ccv-warn{
  display:none;margin-top:13px;padding:13px 15px;border-radius:10px;
  background:#fff4ee;border:1px solid #ffd6c4;
  font-size:.84rem;line-height:1.6;color:#8a4426;
}
.ccv-warn.is-on{display:block}

/* ---------- פעולות ---------- */
.ccv-actions{display:flex;align-items:center;gap:4px;margin-top:18px;flex-wrap:wrap}
.ccv-btn{
  font-family:inherit;font-size:.86rem;font-weight:600;padding:12px 16px;
  border-radius:9px;border:none;background:transparent;color:var(--ccv-soft);
  cursor:pointer;transition:background .12s,color .12s;min-height:44px;
}
.ccv-btn:hover{background:rgba(26,26,46,.06);color:var(--ccv-ink)}
.ccv-btn:focus-visible{outline:2px solid var(--ccv-accent);outline-offset:2px}
.ccv-btn-solid{background:var(--ccv-accent);color:#fff}
.ccv-btn-solid:hover{background:#4f5cb0;color:#fff}
.ccv-grow{flex:1}

/* ---------- פריסת התוכן ---------- */
.ccv-below{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:"copy ad";
  gap:40px;align-items:start;margin-top:52px;
}
.ccv-copy{grid-area:copy;min-width:0;max-width:660px}
.ccv-rail{grid-area:ad;width:300px;position:sticky;top:20px}
/* הגנה: אלמנט שיוזרק לפריסה (מודעה אוטומטית) לא גונב עמודה */
.ccv-below > *:not(.ccv-copy):not(.ccv-rail){grid-column:1/-1;grid-row:3}

.ccv-ad-slot{width:300px;min-height:600px;display:flex;align-items:center;justify-content:center}
.ccv-mobile-ad{display:none;margin:32px 0;text-align:center}

/* ---------- טיפוגרפיה של תוכן העמוד ---------- */
.ccv-copy h2{font-size:1.22rem;font-weight:800;margin:36px 0 10px;letter-spacing:-.01em;color:var(--ccv-ink)}
.ccv-copy h2:first-child{margin-top:0}
.ccv-copy h3{font-size:1rem;font-weight:700;margin:22px 0 6px;color:var(--ccv-ink)}
.ccv-copy p{font-size:.93rem;line-height:1.75;color:var(--ccv-soft);margin-bottom:12px}
.ccv-copy strong{color:var(--ccv-ink);font-weight:700}
.ccv-copy a{color:var(--ccv-accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ccv-copy ul,.ccv-copy ol{margin:12px 0;padding-right:20px}
.ccv-copy li{font-size:.93rem;line-height:1.75;color:var(--ccv-soft);margin-bottom:7px}

/* ---------- מובייל ---------- */
@media(max-width:1024px){
  .ccv-below{display:block;grid-template-columns:none;grid-template-areas:none}
  .ccv-rail{width:100%;position:static}
  .ccv-ad-slot{display:none}
  .ccv-mobile-ad{display:block}
}
@media(max-width:600px){
  .ccv-h1{font-size:1.42rem}
  .ccv-lede{font-size:.9rem}
  .ccv-blank{min-height:200px;padding:28px 18px}
  .ccv-options{grid-template-columns:repeat(2,1fr);gap:12px}
  .ccv-actions .ccv-btn{flex:1 1 auto;text-align:center}
  .ccv-copy h2{font-size:1.12rem;margin-top:30px}
  .ccv-below{margin-top:40px}
}

/* ---------- העדפות נגישות ---------- */
@media(prefers-reduced-motion:reduce){
  .ccv-opt,.ccv-opt-thumb,.ccv-dots span{transition:none;animation:none}
}

/* ---------- הדפסה ---------- */
@media print{
  .ccv-crumbs,.ccv-masthead,.ccv-blank,.ccv-loading,
  .ccv-step,.ccv-step-sub,.ccv-options,.ccv-actions,
  .ccv-below,.ccv-warn{display:none !important}
  .ccv{max-width:none;margin:0}
  .ccv-sheet{box-shadow:none;border-radius:0}
  .ccv-sheet::after{display:none}
}