/* Buy Now, Pay Over Time modal (inc/canamek-financing.php). Loaded on product pages only. */
/* ---- دکمه ---- */
.cnk-fin-btn{ display:flex; align-items:center; gap:14px; width:100%; max-width:100%; margin:16px 0 4px; padding:14px 16px; background:#fff; color:#111827; border:2px solid #ED1C24; border-radius:14px; cursor:pointer; text-align:left; font-family:inherit; position:relative; box-sizing:border-box; box-shadow:0 2px 10px rgba(237,28,36,.12); animation:cnkFinPulse 2.4s ease-in-out 4; transition:box-shadow .2s ease, transform .06s ease; }
.cnk-fin-btn:hover{ box-shadow:0 8px 26px rgba(237,28,36,.24); animation:none; }
/* Selected variation is under the financing threshold — hidden, not removed,
   so picking a dearer option can bring it straight back. */
.cnk-fin-btn.cnk-fin-hidden{ display:none !important; }
.cnk-fin-btn:active{ transform:translateY(1px); }
@keyframes cnkFinPulse{ 0%,100%{ box-shadow:0 2px 10px rgba(237,28,36,.12); } 50%{ box-shadow:0 5px 22px rgba(237,28,36,.30); } }
@media (prefers-reduced-motion: reduce){ .cnk-fin-btn{ animation:none; } }
.cnk-fin-btn-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:11px; background:#ED1C24; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(237,28,36,.35); }
.cnk-fin-btn-ic svg{ width:24px; height:24px; }
.cnk-fin-btn-tx{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; line-height:1.2; min-width:0; }
.cnk-fin-btn-row1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cnk-fin-btn-t1{ font-weight:800; font-size:15.5px; color:#111827; }
.cnk-fin-badge{ font-size:10.5px; font-weight:800; letter-spacing:.01em; color:#0f9d58; background:#e7f8ee; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.cnk-fin-btn-t2{ font-weight:600; font-size:12.5px; color:#6b7280; }
.cnk-fin-btn-t2 strong{ color:#ED1C24; font-weight:800; }
.cnk-fin-btn-ar{ flex:0 0 auto; font-size:22px; line-height:1; color:#ED1C24; }
@media (max-width:600px){
	.cnk-fin-btn{ gap:12px; padding:13px 14px; }
	.cnk-fin-btn-ic{ width:40px; height:40px; }
	.cnk-fin-btn-t1{ font-size:15px; }
}

/* ---- Overlay + Modal ---- */
.cnk-fin-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.62); backdrop-filter:blur(4px); z-index:100000; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.cnk-fin-overlay.cnk-open{ opacity:1; visibility:visible; }
.cnk-fin-modal{ position:fixed; z-index:100001; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96); width:min(520px,92vw); max-height:92vh; overflow-y:auto; background:#fff; border-radius:20px; padding:22px 22px 18px; box-shadow:0 30px 80px rgba(0,0,0,.35); opacity:0; visibility:hidden; font-family:inherit; transition:opacity .28s ease, transform .28s cubic-bezier(.34,1.4,.5,1), visibility .28s ease; }
.cnk-fin-modal.cnk-open{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.cnk-fin-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:none; border-radius:50%; background:#f1f3f5; color:#495057; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.cnk-fin-close:hover{ background:#e2e6ea; }

/* ---- Head ---- */
.cnk-fin-head{ display:flex; gap:14px; align-items:center; padding-right:30px; }
.cnk-fin-img{ width:64px; height:64px; border-radius:12px; object-fit:contain; background:#f8f9fa; border:1px solid #eef0f2; flex:0 0 auto; }
.cnk-fin-head-tx{ min-width:0; }
.cnk-fin-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#ED1C24; }
.cnk-fin-name{ margin:2px 0 3px; font-size:16px; font-weight:800; color:#111827; line-height:1.25; }
.cnk-fin-total-line{ font-size:13px; color:#6b7280; }
.cnk-fin-total-line strong{ color:#111827; font-weight:700; }

/* ---- Hero ---- */
.cnk-fin-hero{ margin:18px 0 6px; text-align:center; background:linear-gradient(180deg,#fff5f5,#fff); border:1px solid #ffe0e0; border-radius:16px; padding:16px; }
.cnk-fin-hero-amt{ font-size:40px; font-weight:900; color:#111827; letter-spacing:-.02em; line-height:1; }
.cnk-fin-hero-per{ font-size:18px; font-weight:700; color:#9ca3af; margin-left:2px; }
.cnk-fin-hero-sub{ margin-top:8px; font-size:13.5px; color:#6b7280; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.cnk-fin-apr{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:12px; font-weight:800; background:#eef2ff; color:#4f46e5; }
.cnk-fin-apr.cnk-apr-zero{ background:#e7f8ee; color:#0f9d58; }

/* ---- Slider ---- */
.cnk-fin-slider-wrap{ position:relative; margin:26px 4px 6px; padding-top:14px; }
.cnk-fin-bubble{ position:absolute; top:-6px; transform:translateX(-50%); background:#111827; color:#fff; font-size:12px; font-weight:800; padding:3px 8px; border-radius:8px; white-space:nowrap; pointer-events:none; }
.cnk-fin-bubble::after{ content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); border:4px solid transparent; border-top-color:#111827; }
.cnk-fin-range{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:8px; background:#e6e8ec; outline:none; cursor:pointer; }
.cnk-fin-range::-webkit-slider-runnable-track{ height:8px; border-radius:8px; background:transparent; }
.cnk-fin-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-8px; border-radius:50%; background:#fff; border:3px solid #ED1C24; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
.cnk-fin-range::-moz-range-track{ height:8px; border-radius:8px; background:#e6e8ec; }
.cnk-fin-range::-moz-range-progress{ height:8px; border-radius:8px; background:#ED1C24; }
.cnk-fin-range::-moz-range-thumb{ width:24px; height:24px; border:3px solid #ED1C24; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
.cnk-fin-ticks{ display:flex; justify-content:space-between; margin-top:10px; font-size:11.5px; font-weight:700; color:#9ca3af; }

/* ---- Hint ---- */
.cnk-fin-hint{ margin:14px 0 2px; font-size:12.5px; text-align:center; min-height:18px; }
.cnk-hint-good{ color:#0f9d58; font-weight:700; }
.cnk-hint-nudge{ color:#6b7280; }
.cnk-hint-nudge strong{ color:#ED1C24; }

/* ---- Breakdown ---- */
.cnk-fin-breakdown{ margin:16px 0 6px; background:#f8f9fb; border:1px solid #eef0f2; border-radius:14px; padding:14px; }
.cnk-fin-bar{ display:flex; height:14px; border-radius:8px; overflow:hidden; background:#e6e8ec; }
.cnk-fin-bar-principal{ height:100%; background:#111827; transition:width .3s ease; }
.cnk-fin-bar-interest{ height:100%; background:#f0a020; transition:width .3s ease; }
.cnk-fin-bar-legend{ display:flex; justify-content:space-between; gap:8px; margin-top:10px; font-size:12.5px; color:#6b7280; flex-wrap:wrap; }
.cnk-fin-leg{ display:inline-flex; align-items:center; gap:6px; }
.cnk-fin-leg strong{ color:#111827; font-weight:800; }
.cnk-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.cnk-dot-p{ background:#111827; }
.cnk-dot-i{ background:#f0a020; }
.cnk-fin-total{ margin-top:12px; padding-top:12px; border-top:1px dashed #dee2e6; display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; color:#374151; }
.cnk-fin-total strong{ font-size:18px; color:#111827; font-weight:900; }

/* ---- CTA ---- */
.cnk-fin-cta{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:16px; padding:15px; background:#ED1C24; color:#fff !important; border-radius:12px; font-weight:800; font-size:15.5px; text-decoration:none; box-shadow:0 8px 22px rgba(237,28,36,.28); transition:background .18s, transform .05s; }
.cnk-fin-cta:hover{ background:#c8151c; }
.cnk-fin-cta:active{ transform:translateY(1px); }
.cnk-fin-disc{ margin:12px 2px 0; font-size:10.5px; line-height:1.5; color:#9ca3af; text-align:center; }

/* ---- موبایل: bottom sheet ---- */
@media (max-width:600px){
	.cnk-fin-modal{ left:0; right:0; top:auto; bottom:0; width:100%; max-width:100%; max-height:90vh; transform:translateY(100%); border-radius:22px 22px 0 0; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); }
	.cnk-fin-modal.cnk-open{ transform:translateY(0); }
	.cnk-fin-hero-amt{ font-size:36px; }
}