/* ═════════════════════════════════════════════════════════════════
   Reply to review modal — Figma 1:1 (desktop + mobile)
   ═════════════════════════════════════════════════════════════════ */
.reply-to-review-modal{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  box-sizing:border-box;
}
.reply-to-review-modal[hidden]{display:none !important;}
.reply-to-review-modal__overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  cursor:pointer;
}
.reply-to-review-modal__dialog{
  position:relative;
  width:100%;max-width:500px;
  background:#fff;border-radius:16px;
  padding:28px 28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
  box-sizing:border-box;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
}
.reply-to-review-modal__close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;
  background:transparent;border:none;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:#6b6b6b;border-radius:50%;
  transition:background .15s;
}
.reply-to-review-modal__close:hover{background:#f3f3f3;color:#1a1a1a;}
.reply-to-review-modal__title{
  font-family:'Inter',sans-serif;
  font-size:18px;font-weight:700;color:#1a1a1a;
  margin:0 0 20px;padding-right:36px;
}
.reply-to-review-modal__form{display:flex;flex-direction:column;gap:16px;}
.reply-to-review-modal__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.reply-to-review-modal__field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.reply-to-review-modal__label{
  font-size:13px;font-weight:500;color:#1a1a1a;
  margin:0;
}
.reply-to-review-modal__input,
.reply-to-review-modal__textarea{
  width:100%;box-sizing:border-box;
  padding:10px 14px;
  font-family:'Inter',sans-serif;font-size:14px;color:#1a1a1a;
  background:#fff;
  border:1px solid #dadada;border-radius:10px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.reply-to-review-modal__input::placeholder,
.reply-to-review-modal__textarea::placeholder{color:#a8a8a8;}
.reply-to-review-modal__input:focus,
.reply-to-review-modal__textarea:focus{
  border-color:#1a1a1a;
  box-shadow:0 0 0 3px rgba(26,26,26,.06);
}
.reply-to-review-modal__textarea{
  min-height:110px;resize:vertical;
  line-height:1.45;
}
.reply-to-review-modal__footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:4px;flex-wrap:wrap;
}
.reply-to-review-modal__photo-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:#fff;border:1px solid #dadada;border-radius:10px;
  font-size:13px;color:#1a1a1a;cursor:pointer;
  transition:background .15s,border-color .15s;
  margin:0;
  position:relative;
}
.reply-to-review-modal__photo-btn:hover{background:#f7f7f7;border-color:#999;}
.reply-to-review-modal__photo-btn svg{color:#6b6b6b;}
/* Hide native file input completely — label acts as the visible button,
   clicking it still opens the file picker natively. */
.reply-to-review-modal__photo-btn input[type="file"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.reply-to-review-modal__submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 28px;
  background:var(--otc-btn-primary,#252525);color:var(--otc-btn-primary-text,#fff);
  border:none;border-radius:var(--otc-btn-radius,10px);
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;
  transition:opacity .15s,background .15s;
}
.reply-to-review-modal__submit:hover{opacity:.92;background:var(--otc-btn-primary-hover,#000);}

/* Mobile — keep modal CENTERED (not bottom-sheet), stack Name/Email */
@media (max-width:540px){
  .reply-to-review-modal{
    padding:16px;
    align-items:center;      /* was flex-end — now centered vertically */
    justify-content:center;
  }
  .reply-to-review-modal__dialog{
    max-width:calc(100% - 32px);
    width:100%;
    border-radius:16px;       /* all 4 corners rounded, not just top */
    padding:22px 18px 20px;
    max-height:calc(100vh - 32px);
  }
  .reply-to-review-modal__title{font-size:16px;margin-bottom:16px;padding-right:32px;}
  .reply-to-review-modal__grid{grid-template-columns:1fr;gap:12px;}
  .reply-to-review-modal__form{gap:14px;}
  .reply-to-review-modal__footer{flex-wrap:nowrap;gap:10px;}
  .reply-to-review-modal__submit{padding:11px 22px;font-size:13px;flex-shrink:0;}
  .reply-to-review-modal__photo-btn{font-size:12px;padding:8px 10px;flex-shrink:0;}
}


/* Allow the modal to grow with added sections (stars pair + recommend + email + photo) */
.ot-review-modal { max-height: none !important; padding: 24px 28px !important; }

/* Title row: centered stack with underline under product name */
.ot-review-modal__header { padding-bottom: 14px !important; margin-bottom: 18px !important; border-bottom: none !important; }
.ot-review-modal__title-wrap { display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px; }
.ot-review-modal__product-name { text-align: center; font-size: 14px; color: #1a1a1a; padding-bottom: 12px; border-bottom: 1px solid #ececec; align-self: stretch; max-width: 100%; }

/* Inline rating row (label left, stars right) */
.ot-review-modal__rating-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.ot-review-modal__rating-label { font-weight:500; color:#1a1a1a; }
/* Stars: DOM + visual order 1..5 (left→right). Coloring is JS-driven via .is-on,
   so clicking the Nth star from the left selects value N (no RTL trickery). */
.ot-review-stars-5 { display:inline-flex; gap:6px; }
.ot-review-star5 { cursor:pointer; margin:0; line-height:0; }
.ot-review-star5 input[type=radio] { position:absolute !important; opacity:0 !important; pointer-events:none !important; width:0 !important; height:0 !important; }
.ot-review-star5 i.fa { font-size:22px; color:#d9d9d9; transition:color .15s ease; }
.ot-review-star5.is-on i.fa { color:#f5a623; }

/* Recommend */
.ot-review-recommend { display:flex; flex-wrap:wrap; gap:24px; padding:8px 0 12px; }
.ot-review-recommend__opt { display:inline-flex; align-items:center; gap:10px; cursor:pointer; margin:0; font-weight:500; color:#1a1a1a; }
.ot-review-recommend__opt input[type=radio] { position:absolute !important; opacity:0 !important; pointer-events:none !important; width:0 !important; height:0 !important; }
.ot-review-recommend__dot { width:18px; height:18px; border-radius:50%; border:1.5px solid #cfcfcf; display:inline-block; position:relative; transition:border-color .15s ease; flex: 0 0 auto; }
.ot-review-recommend__opt input:checked ~ .ot-review-recommend__dot { border-color:#1a1a1a; }
.ot-review-recommend__opt input:checked ~ .ot-review-recommend__dot::after { content:''; position:absolute; top:3px; left:3px; width:10px; height:10px; border-radius:50%; background:#1a1a1a; }

/* Name + Email grid */
.ot-review-modal__grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom: 20px; }
.ot-review-modal__grid .ot-review-modal__field { margin-bottom: 0 !important; }
@media (max-width:540px){ .ot-review-modal__grid { grid-template-columns:1fr; } }

/* Footer: photo on left, Cancel + Add review buttons on right */
.ot-review-modal__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; flex-wrap:wrap; }
.ot-review-modal__footer .ot-review-modal__buttons { flex: 0 0 auto; width: auto; gap: 10px; }
/* Override cart.css global rule that makes buttons equal-width and wrap to full row */
.ot-review-modal__footer .ot-review-modal__btn { flex: 0 0 auto !important; width: auto !important; min-width: 120px; height: auto; padding: 12px 22px; border-radius: 14px; }
.ot-review-modal__footer .ot-review-modal__btn--submit { order: 2; }
.ot-review-modal__footer .ot-review-modal__btn--cancel { order: 1; }

.ot-review-photo-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; padding:10px 0; color:#1a1a1a; font-weight:500; user-select: none; }
/* Nuke native file input — !important beats UA defaults and any inline CSS */
.ot-review-photo-btn input[type=file] { position: absolute !important; left: -99999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.ot-review-photo-preview,
.ot-media-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.ot-review-photo-preview img,
.ot-media-preview img { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid rgba(0,0,0,.08); display:block; }
.ot-media-thumb { position:relative; display:inline-flex; align-items:center; justify-content:center; vertical-align:top; }
.ot-media-thumb--video,
.ot-media-thumb--image { width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.08); background:#000; }
.ot-media-thumb--video video { width:100%; height:100%; object-fit:cover; display:block; }
.ot-media-thumb--video .ot-media-thumb__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none; }
.ot-media-thumb--audio { background:#f7f2eb; padding:6px 10px; border-radius:8px; border:1px solid rgba(0,0,0,.08); font-size:12px; color:#392923; gap:6px; }
.ot-media-thumb--audio .fa { font-size:14px; }
.ot-media-thumb__remove {
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; border-radius:50%;
  background:#1f1a17; color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; cursor:pointer;
  padding:0; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.ot-media-thumb__remove:hover { background:#000; }
/* Legacy class kept so the existing video-tile inside review preview still renders */
.ot-review-photo-vid { position:relative; display:inline-block; width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.ot-review-photo-vid video { width:100%; height:100%; object-fit:cover; display:block; }
.ot-review-photo-vid .fa { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none; }

/* Inline message banners inside the reply-to-review popup (error + warning). */
.reply-to-review-modal__msg { padding:8px 12px; border-radius:8px; font-size:13px; margin-bottom:10px; }
.reply-to-review-modal__msg--error { background:#fde8e8; color:#9b1c1c; border:1px solid #f8b4b4; }
.reply-to-review-modal__msg--warn  { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }

@media (max-width: 500px) {
  .ot-review-modal__footer { flex-direction: column; align-items: stretch; }
  .ot-review-modal__footer .ot-review-modal__buttons { width: 100%; }
  .ot-review-modal__footer .ot-review-modal__btn { width: 100% !important; }
}


.error { border-color: red !important; color: red !important; }
label + .error { border-color: red !important; color: red !important; }