/* ── Pet Virtual Try-On Modal Styles ── */

.pvt-btn-wrap {
  display:     inline-block;
  margin-left: 0.5in;
}

.pvt-btn {
  display:       inline-block;
  margin-top:    10px;
  padding:       10px 24px;
  border:        none;
  border-radius: 6px;
  font-size:     14px;
  font-weight:   700;
  color:         #ffffff;
  cursor:        pointer;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:    opacity .2s, transform .15s;
  width:         auto;
  min-width:     160px;
  text-align:    center;
}
.pvt-btn:hover  { opacity:.88; transform:translateY(-1px); }
.pvt-btn:active { transform:translateY(0); }

/* Modal overlay */
.pvt-modal-overlay {
  position:        fixed !important;
  top:             0 !important;
  left:            0 !important;
  right:           0 !important;
  bottom:          0 !important;
  background:      rgba(0,0,0,.82);
  z-index:         999999 !important;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
.pvt-modal-overlay[hidden] { display:none !important; }

/* Modal box */
.pvt-modal-box {
  background:    #1a1a1a;
  border:        1px solid #444;
  border-radius: 12px;
  width:         100%;
  max-width:     520px;
  max-height:    90vh;
  overflow-y:    auto;
  color:         #f0f0f0;
  font-family:   sans-serif;
}

/* Header */
.pvt-modal-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         14px 18px;
  border-bottom:   1px solid #333;
}
.pvt-modal-title  { font-size:16px; font-weight:700; color:#fff; }
.pvt-modal-close  {
  background:none; border:none; color:#aaa;
  font-size:22px; cursor:pointer; padding:0 4px; line-height:1;
}
.pvt-modal-close:hover { color:#fff; }

/* Steps */
.pvt-step { padding:20px; }
.pvt-hint { font-size:14px; color:#ccc; margin:0 0 16px; line-height:1.5; }

/* Upload area */
.pvt-upload-area {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  border:          2px dashed #555;
  border-radius:   10px;
  padding:         36px 16px;
  cursor:          pointer;
  text-align:      center;
  transition:      border-color .2s, background .2s;
}
.pvt-upload-area:hover,
.pvt-upload-area.pvt-drag-over {
  border-color:#0057FF; background:rgba(0,87,255,.06);
}
.pvt-upload-icon { font-size:38px; margin-bottom:10px; }
.pvt-upload-text { font-size:14px; color:#ddd; margin-bottom:4px; }
.pvt-upload-sub  { font-size:12px; color:#777; }

/* Preview */
#pvt-preview-wrap { margin-top:16px; text-align:center; }
#pvt-preview-img  {
  max-width:100%; max-height:260px;
  border-radius:8px; border:1px solid #333;
  display:block; margin:0 auto 16px;
}

/* Generate button */
.pvt-generate-btn {
  display:block; width:100%; padding:13px;
  background:#0057FF; color:#fff; border:none;
  border-radius:8px; font-size:15px; font-weight:700;
  cursor:pointer; letter-spacing:.04em; transition:opacity .2s;
  text-transform:uppercase;
}
.pvt-generate-btn:hover { opacity:.88; }

/* Loading */
#pvt-step-loading  { text-align:center; padding:40px 20px; }
.pvt-spinner-wrap  { margin:0 auto 20px; }
.pvt-paw-spinner   {
  font-size:52px; display:inline-block;
  animation:pvt-paw-bounce 0.8s ease-in-out infinite alternate;
}
@keyframes pvt-paw-bounce {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.25) rotate(15deg); }
}
.pvt-loading-msg { font-size:16px; font-weight:500; color:#fff; margin:0 0 8px; transition:opacity 0.3s ease; min-height:24px; }
.pvt-loading-sub { font-size:12px; color:#777; margin:0; }

/* ── Result step ── */
#pvt-step-result { padding:16px; }

/* Share buttons row — ABOVE the image */
.pvt-share-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom:12px;
  flex-wrap:   wrap;
}
.pvt-share-label {
  font-size:  12px;
  color:      #aaa;
  font-weight:500;
  flex-shrink:0;
}
.pvt-share-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 12px;
  border-radius: 6px;
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  text-decoration:none;
  border:        none;
  transition:    opacity .2s, transform .1s;
  color:         #fff;
}
.pvt-share-btn:hover { opacity:.85; transform:translateY(-1px); color:#fff; }

.pvt-share-tiktok   { background:#000; border:1px solid #333; }
.pvt-share-facebook { background:#1877F2; }
.pvt-share-instagram{
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* Result image */
.pvt-result-img-wrap {
  border-radius: 10px;
  overflow:      hidden;
  margin-bottom: 14px;
  background:    #000;
}
#pvt-result-img {
  display:    block;
  width:      100%;
  height:     auto;
  max-height: 400px;
  object-fit: contain;
  -webkit-user-select: none;
  user-select:         none;
}

/* Result action buttons */
.pvt-result-actions {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.pvt-add-to-cart { background:#28a745; font-size:15px; padding:13px; width:100%; }
.pvt-download    { background:#0057FF; text-decoration:none; display:block; }
.pvt-secondary   { background:#333; color:#ddd; }

/* Error */
#pvt-step-error  { text-align:center; padding:32px 20px; }
.pvt-error-text  { color:#f44336; font-size:14px; margin:0 0 16px; line-height:1.5; }

/* Mobile */
@media (max-width:480px) {
  .pvt-modal-box  { border-radius:10px; }
  .pvt-share-row  { gap:6px; }
  .pvt-share-btn  { padding:5px 9px; font-size:11px; }
}