:root {
  --wcpsf-bg: #ffffff;
  --wcpsf-prim: #0d6efd;
  --wcpsf-ghost: #f5f7fb;
  --wcpsf-text: #111827;
  --wcpsf-radius: 10px;
  --wcpsf-shadow: 0 8px 30px rgba(12, 18, 31, 0.12);
  --wcpsf-toast-bg: rgba(20,20,20,0.92);
}

/* Root placement */
#wcpsf-root { margin-top: 1rem; display:flex; gap:10px; align-items:center; }

/* Buttons */
.wcpsf-btn {
  display:inline-flex; gap:8px; align-items:center;
  padding:0.55rem 0.8rem; border-radius:8px; border:1px solid transparent;
  font-weight:600; font-size:14px; cursor:pointer; background:transparent;
}

.wcpsf-btn-share{
  background-color: #1ade42;
  color: #fff;
}

.wcpsf-btn .wcpsf-icon { display:inline-flex; align-items:center; justify-content:center; }

.wcpsf-btn .wcpsf-icon img{
  height: 20px;
  width: auto;
}
.wcpsf-btn-primary {
  background: #000;
  color:#fff; box-shadow: 0 6px 18px rgba(13,110,253,0.18);
  border:none;
}
.wcpsf-btn-ghost {
  background:var(--wcpsf-ghost); color:var(--wcpsf-text); border:1px solid #e6eef9;
}

/* Modal */
.wcpsf-modal {
  position: fixed; inset: 0; display:none; align-items:center; justify-content:center;
  background: rgba(7,12,22,0.45); z-index:99999; padding:20px;
  animation: wcpsf-fade .18s ease;
}
.wcpsf-modal-panel {
  width:680px; max-width:100%; background:var(--wcpsf-bg); border-radius:var(--wcpsf-radius);
  box-shadow: var(--wcpsf-shadow); padding:20px; outline:none; transform:translateY(6px);
  animation: wcpsf-pop .18s ease;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes wcpsf-fade { from { opacity:0 } to { opacity:1 } }
@keyframes wcpsf-pop { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }

.wcpsf-modal-close {
  position:absolute; right:16px; top:14px; border:none; background:transparent; font-size:22px; cursor:pointer;
}

/* Modal content */
.wcpsf-modal-title { margin:2px 0 12px; font-size:18px; color:var(--wcpsf-text); }
.wcpsf-product-title { color: var(--color-primary); margin-bottom:12px; font-weight:600; }

/* Share options grid */
.wcpsf-share-options { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.wcpsf-option {
  background:#fff; border:1px solid #edf2f7; padding:10px; border-radius:8px; cursor:pointer; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wcpsf-option:active { transform: translateY(1px); }
.wcpsf-option:hover { background-color: var(--color-secondary); color: #fff; }

/* Divider */
.wcpsf-divider { height:1px; background:#eef2f7; margin:14px 0; border-radius:2px; }

/* Image list */
.wcpsf-image-list { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.wcpsf-image-item {
  width:120px; background:#fff; border-radius:8px; padding:8px; box-shadow: 0 6px 16px rgba(10,20,40,0.04);
  display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center;
}
.wcpsf-image-item img { width:100%; height:80px; object-fit:cover; border-radius:4px; display:block; }
.wcpsf-image-meta { font-size:12px; color:#374151; font-weight:600; text-align:center; }
.wcpsf-small-btn { padding:6px 8px; border-radius:6px; background:var(--color-secondary); color: #fff; cursor:pointer; width: 100%;}

/* Download area */
.wcpsf-download-actions { display:flex; gap:10px; margin-top:10px; align-items:center; }

/* Progress */
.wcpsf-progress { height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; margin-top:10px; }
.wcpsf-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--wcpsf-prim),#3aa0ff); transition: width .35s ease; }

/* Toast */
.wcpsf-toast {
  position: fixed; right:20px; bottom:20px; min-width:200px; max-width:320px;
  background:var(--wcpsf-toast-bg); color:#fff; padding:12px 14px; border-radius:8px; font-weight:600;
  box-shadow: 0 10px 30px rgba(12,18,31,0.18); z-index:100000; display:none;
}

/* responsive */
@media (max-width:720px) {
  .wcpsf-modal-panel { width: 92%; padding:16px; }
  .wcpsf-image-item { width:28%; }
}
@media (max-width:420px) {
  .wcpsf-image-item { width:44%; }
  .wcpsf-share-options { grid-template-columns:repeat(1,1fr); }
}