/* Base */
.tvm-review-wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 16px;
  max-width: 600px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2937;
}

.tvm-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 20px;
}

.tvm-header { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }

.tvm-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: #f3f4f6; flex: 0 0 56px; object-fit: cover;
}

.tvm-h1 { font-size: 20px; font-weight: 600; margin: 0; }
.tvm-sub { color: #6b7280; font-size: 14px; margin-top: 2px; }

/* Skeleton */
.tvm-skeleton {
  background: linear-gradient(90deg, #f3f4f6, #eceff3, #f3f4f6);
  background-size: 200% 100%;
  animation: tvm-shine 1.2s linear infinite;
  border-radius: 8px;
}
@keyframes tvm-shine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.tvm-skel-row { height: 14px; margin: 10px 0; }

/* Fields */
.tvm-field { margin: 14px 0; }
fieldset.tvm-field { border: 0; padding: 0; margin: 14px 0; } /* remove theme border */
.tvm-label { display:block; font-weight:600; margin-bottom:6px; font-size: 15px; }

.tvm-textarea{
  width:100%; min-height:112px; resize:vertical;
  padding:10px 12px; border:1px solid #d1d5db; border-radius:10px;
  font:inherit; font-size:16px; line-height:1.4;
}
.tvm-textarea:focus{ outline:3px solid rgba(11,114,133,.25); border-color:#0B7285; }

.tvm-row{ display:flex; gap:12px; }
.tvm-input{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px;
  font:inherit; font-size:16px;
}
.tvm-input:focus{ outline:3px solid rgba(11,114,133,.25); border-color:#0B7285; }

.tvm-check{ display:flex; align-items:center; gap:8px; margin: 8px 0; font-size:15px; }

.tvm-hint{ color:#6b7280; font-size:13px; margin-top:6px; }

.tvm-actions{ margin-top:16px; }
.tvm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:10px; border:none; cursor:pointer;
  color:#fff; background:var(--tvm-brand, #0B7285);
  font-weight:600; font-size:16px; width:100%;
}
.tvm-btn:disabled{ opacity:.5; cursor:not-allowed; }

.tvm-error{ color:#b91c1c; font-size:13px; margin-top:6px; }
.tvm-success{ text-align:center; padding:24px 12px; font-size:16px; }
.tvm-center{ text-align:center; }

/* Rating box — same look as textarea/input */
.tvm-stars{
  display:flex; gap:6px; padding:10px 12px;
  border:1px solid #d1d5db; border-radius:10px; background:#fff;
  width:100%; box-sizing:border-box;
}
.tvm-stars:focus-within { outline:2px solid rgba(11,114,133,.25); outline-offset:2px; }

.tvm-stars input[type="radio"]{
  position:absolute; opacity:0; width:1px; height:1px; overflow:hidden;
}
.tvm-star-label{ position:relative; width:36px; height:36px; cursor:pointer; outline:none; }
.tvm-star-label::before{
  content:"☆"; font-size:28px; line-height:36px; display:block; text-align:center; color:#9ca3af;
}
.tvm-star-label.is-active::before,
.tvm-star-label:hover::before,
.tvm-star-label:focus::before{
  content:"★"; color:var(--tvm-brand, #0B7285);
}

/* Alerts & footer */
.tvm-alert{
  padding:12px 14px; background:#fff7ed; border:1px solid #fed7aa;
  color:#9a3412; border-radius:10px; margin-bottom:12px;
  font-size:14px; line-height:1.4;
}
.tvm-footer{ margin-top:16px; text-align:center; color:#6b7280; font-size:13px; }
.tvm-wa{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; text-decoration:none;
  color:var(--tvm-brand, #0B7285); font-weight:600; font-size:14px; }
.tvm-wa:hover{ text-decoration:underline; }

@media (max-width:640px){
  .tvm-card{ padding:16px; }
  .tvm-star-label{ width:32px; height:32px; }
  .tvm-star-label::before{ font-size:28px; line-height:32px; }
}