/* Overlay + modal (if you don’t have these yet) */
.qv-overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45);  }
.qv-overlay.is-open { display:flex; }
.qv-modal { width:min(720px,92vw); max-height:86vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); }

/* Ribbon header */
.qv-header {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px 16px 0 0;
  background-image: url("pattern-background-02.svg");
  color: #fff;
  overflow: hidden;            /* hide the pattern edges */
}

/* Pattern image behaves like a background layer */
.qv-pattern-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .15;               /* subtle */
  pointer-events: none;       /* clicks pass through */
}

/* Keep content above the pattern */
.qv-title, .qv-close { position: relative; z-index: 1; }
.qv-title { margin: 0; font-size: 18px; font-weight: 10; }
.qv-title-wrap {
    display: flex;
    flex-direction: column;
  }
.qv-subtitle { font-size: 14px;font-style: italic; opacity: .85; margin-top: 4px; }
.qv-close { appearance:none; border:0; background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer; }

.qv-inline-audio-btn {
  appearance: none;
  margin-top: 0px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  vertical-align: middle;
}
.qv-inline-audio-btn:hover {
  background: #d1d5db;
}
.qv-inline-audio-btn img {
  filter: brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(0%) hue-rotate(173deg) brightness(94%) contrast(88%);
  opacity: 0.7;
}

.qv-body { padding: 14px 16px; }
.qv-footer { padding: 12px 16px; display:flex; gap:8px; justify-content:flex-end; }

.qv-btn, .qv-btn-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.qv-btn {
  background: #f3f4f6;
  color: #374151;
}

.qv-btn:hover {
  background: #e5e7eb;
}

.qv-btn-primary {
  background: #c10000;
  color: white;
}

.qv-btn-primary:hover {
  background: #9d0000;
}