.wvto-btn-wrap { margin: 8px 0; }
#wvto-modal { display:none; position:fixed; inset:0; background:rgba(15, 23, 42, 0.55); z-index:9999; }
#wvto-modal.is-open { display:block; }
#wvto-modal .wvto-dialog { background:#fff; max-width:960px; margin:4% auto; padding:0; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.35); overflow:hidden; display:flex; flex-direction:column; max-height:92vh; }
#wvto-modal .wvto-header { display:flex; align-items:center; justify-content:center; position:relative; padding:12px 48px; border-bottom:1px solid #e5e7eb; flex:0 0 auto; }
.wvto-title { margin:0; font-size:20px; font-weight:700; color:#111827; }
.wvto-header-actions { position:absolute; right:8px; top:8px; display:flex; gap:8px; }
.wvto-close { border:none; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:#6b7280; }
.wvto-content { padding:16px; overflow:auto; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling: touch; }
.wvto-grid { padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wvto-pane { border:2px dashed #d1d5db; border-radius:12px; padding:12px; background:#fafafa; }
.wvto-pane-head { font-size:14px; font-weight:600; color:#475569; margin-bottom:8px; }
.wvto-pane-body { background:#fff; border:1px solid #e5e7eb; border-radius:10px; min-height:240px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
#wvto-modal .wvto-pane-body img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
#wvto-product { max-width:100%; height:auto; display:block; }
#wvto-preview { max-width:100%; height:auto; display:none; }
.wvto-drop-inner { text-align:center; color:#94a3b8; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px; }
.wvto-drop-text { font-size:14px; color:#64748b; }
#wvto-drop { display:flex; align-items:center; justify-content:center; width:100%; height:100%; cursor:pointer; }
.wvto-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:#f1f5f9; border-top:1px solid #e5e7eb; position:sticky; bottom:0; z-index:1; }
.wvto-footer-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wvto-choose { background:#e5ecf7; color:#1e3a8a; border-color:#cfe0ff; }
.wvto-error { font-size:12px; color:#b91c1c; display:none; }
.wvto-footer-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.wvto-generate[disabled] { opacity:0.6; cursor:not-allowed; }
.wvto-result-wrap { padding:12px 16px 16px; }
#wvto-result { max-width:100%; height:auto; display:none; border:1px solid #e5e7eb; border-radius:10px; margin-top:8px; }
/* Limit result image height within modal */
#wvto-modal #wvto-result { max-height:60vh; object-fit:contain; }

.wvto-tips { background:#f8fafc; border:1px solid #e5e7eb; color:#334155; border-radius:10px; padding:10px 12px; margin:6px 0 12px; }
.wvto-tips ul { margin:6px 0 0 18px; }
.wvto-tips-sample { display:grid; grid-template-columns:auto 1fr; align-items:flex-start; gap:12px; }
/* Stronger selector to beat theme-wide img { width:100% !important } rules */
#wvto-modal .wvto-content .wvto-tips img,
#wvto-modal .wvto-tips-sample img,
#wvto-modal .wvto-tips-img {
  width:120px !important;
  max-width:120px !important;
  height:auto !important;
  border:1px solid #e5e7eb;
  border-radius:8px;
  display:block;
}

@media (max-width: 720px){
  .wvto-grid { grid-template-columns:1fr; padding:12px; }
  .wvto-pane.user { order: 1; }
  .wvto-pane.product { order: 2; }
  #wvto-modal .wvto-dialog { max-width: 100%; margin: 0; border-radius:0; height:100vh; max-height:100vh; }
  #wvto-modal .wvto-header { padding:10px 44px; }
  .wvto-content { padding:12px; }
  /* Show tips by default on small screens */
  #wvto-tips { display:block !important; }
  /* Reduce pane height on small screens and allow inner scroll */
  .wvto-pane-body { min-height:160px; max-height:40vh; }
  .wvto-drop-inner { padding:16px; }
  #wvto-modal #wvto-result { max-height:50vh; }
  /* Keep tips sample and text side-by-side on most phones */
  .wvto-tips-sample { grid-template-columns: 84px 1fr; }
  #wvto-modal .wvto-content .wvto-tips img,
  .wvto-tips-sample img,
  #wvto-modal .wvto-tips-img { width:84px !important; max-width:84px !important; height:auto !important; }
}

@media (max-width: 360px){
  .wvto-title { font-size:18px; }
  /* For very small phones, stack sample above tips text */
  .wvto-tips-sample { grid-template-columns: 1fr; }
  #wvto-modal .wvto-content .wvto-tips img,
  .wvto-tips-sample img,
  #wvto-modal .wvto-tips-img { width:100% !important; max-width:200px !important; height:auto !important; margin:0 auto; }
}