/* Base layout (kept) */
.ss-spp { display:flex; align-items:center; gap:.5rem; margin: 1rem 0; }
.ss-spp .ss-spp-label { font-weight:600; margin-right:.25rem; }
.ss-spp-buttons { display:flex; gap:.4rem; flex-wrap:wrap; }

/* Button container */
.ss-spp-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid #e3e3e3; border-radius:999px;
  background:#fff; cursor:pointer; text-decoration:none;
  color:#111; /* icons use currentColor */
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  outline: none;
}
.ss-spp-square .ss-spp-btn { border-radius:8px; }
.ss-spp-circle .ss-spp-btn { border-radius:999px; }

/* Icon */
.ss-spp-btn .ss-spp-icon,
.ss-spp-btn svg {
  display:block;
  width: 20px; height: 20px;
  fill: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

/* Hover / focus states */
.ss-spp-btn:hover { background:#f7f7f7; transform: translateY(-1px); }
.ss-spp-btn:active { transform: translateY(0); }
.ss-spp-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,120,255,.25);
  border-color: #c7e1ff;
}

/* Micro animations per icon (subtle, performant) */
.ss-spp-btn:hover svg[data-icon="print"] { transform: rotate(2deg) scale(1.06); }
.ss-spp-btn:hover svg[data-icon="copy"]  { transform: translateY(-1px) scale(1.06); }
.ss-spp-btn:hover svg[data-icon="telegram"],
.ss-spp-btn:hover svg[data-icon="twitter"] { transform: translateX(1px) scale(1.06); }
.ss-spp-btn:hover svg[data-icon="whatsapp"],
.ss-spp-btn:hover svg[data-icon="facebook"],
.ss-spp-btn:hover svg[data-icon="linkedin"],
.ss-spp-btn:hover svg[data-icon="reddit"] { transform: scale(1.07); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .ss-spp-btn,
  .ss-spp-btn svg { transition: none; }
  .ss-spp-btn:hover,
  .ss-spp-btn:hover svg { transform: none; }
}


/* --- Fix: copy/print visual size & color ------------------ */

/* 1) ভিজ্যুয়াল সাইজ নরমালাইজ (অন্যান্য আইকনের সমান দেখাতে) */
.ss-spp-btn svg[data-icon="print"],
.ss-spp-btn svg[data-icon="copy"] {
  transform: scale(.88);          /* একটু ছোট দেখাবে */
  transform-origin: 50% 50%;
}

/* হোভার হলে সামান্য zoom, কিন্তু অন্যগুলোর মতই */
.ss-spp-btn:hover svg[data-icon="print"],
.ss-spp-btn:hover svg[data-icon="copy"] {
  transform: scale(.93);
}

/* 2) রঙ জোর করে দৃশ্যমান করা
   - যদি থিম/প্যারেন্ট থেকে color: #fff চলে আসে, এখানে #111 সেট করে দিচ্ছি
   - প্রয়োজনে !important যোগ করা হলো যাতে ওভাররাইড হয়  */
.ss-spp-btn svg[data-icon="print"],
.ss-spp-btn svg[data-icon="copy"] {
  color: #111 !important;
}

/* যদি ডার্ক ব্যাকগ্রাউন্ডে সাদা আইকন চান, কন্টেইনারে .ss-spp--dark ক্লাস দিয়ে নিচেরটা কাজ করবে */
.ss-spp.ss-spp--dark .ss-spp-btn svg[data-icon="print"],
.ss-spp.ss-spp--dark .ss-spp-btn svg[data-icon="copy"] {
  color: #fff !important;
}
.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ---------- Print view v2 ---------- */
.ssp-print--v2 { background: #fff; }

/* 1st page: full-bleed cover with black background & image fit */
.ssp-cover-page {
  background: #000;
  height: 100vh;               /* স্ক্রিন প্রিন্ট প্রিভিউতে ফুল-স্ক্রিন উচ্চতা */
  display: flex;
  align-items: center;
  justify-content: center;
  page-break-after: always;    /* পরের পেজে যাবে */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ssp-cover-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* ইমেজ ক্রপ না করে ফিট করো */
  background: #000;            /* লেটারবক্স অংশ কালো */
}

/* 2nd page: title + meta */
.ssp-meta-page {
  padding: 3cm 2cm;
  page-break-after: always;
  background: #fff;
  color: #000;
}
.ssp-meta-page .ssp-title {
  font-size: 28pt;
  line-height: 1.2;
  margin: 0 0 12pt 0;
  font-weight: 700;
}
.ssp-meta-page .ssp-meta {
  font-size: 11pt;
  opacity: .8;
}

/* Content pages */
.ssp-content {
  padding: 2cm 2cm 2.5cm;
  background: #fff;
  color: #000;
}

/* Print-specific page setup */
@media print {
  @page {
    size: A4;
    margin: 0;                 /* ফুল–ব্লিডের চেষ্টা (প্রিন্টার হার্ড মার্জিন থাকলে অল্প সাদা রিম থাকতে পারে) */
  }
  html, body {
    background: #000;          /* কভারের চারপাশ কালো রাখতে */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* স্ক্রিনে থাকা হেডার/ফুটার/শেয়ার বাটন ইত্যাদি লুকাও যদি থাকে */
  .site-header, .site-footer, .ss-spp, .no-print { display: none !important; }

  /* কভার ইমেজ যাতে প্রিভিউ/প্রিন্ট দু’জায়গাতেই ফুল-এলাকা নেয় */
  .ssp-cover-page { height: 100vh; }
}

/* Screen preview tweaks (ঐচ্ছিক) */
@media screen {
  .ssp-cover-page { min-height: 100vh; }
}