/* Alaa Beauty — "Review Alaa Beauty" modal. Mobile-first, responsive. */

#reviewModal {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 18, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#reviewModal.is-open { display: flex; }

.review-card {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 460px;
  margin: 6vh auto 24px;
  border-radius: 18px;
  padding: 26px 22px 24px;
  box-shadow: 0 24px 60px rgba(60, 20, 50, 0.28);
  font-family: inherit;
}

.review-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 38px; height: 38px;
  border: none; background: transparent;
  font-size: 26px; line-height: 1;
  color: #9b8a94; cursor: pointer;
  border-radius: 50%;
}
.review-close:hover { background: #f4eef1; color: #5a4650; }

.review-card h2 {
  margin: 4px 40px 6px 0;
  font-size: 22px;
  color: var(--rose, #c2185b);
}
.review-sub { margin: 0 0 16px; color: var(--muted, #6b5b63); font-size: 14px; line-height: 1.5; }

.review-card label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin: 14px 0 6px;
  color: #4a3a43;
}

.review-card input[type="text"],
.review-card input[type="tel"],
.review-card input[type="email"],
.review-card textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2d6dc;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  font-family: inherit;
  color: #2e2329;
  background: #fdfbfc;
}
.review-card textarea { resize: vertical; min-height: 96px; }
.review-card input:focus,
.review-card textarea:focus {
  outline: none;
  border-color: var(--rose, #c2185b);
  box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.12);
}

/* Stars */
.review-stars {
  display: flex;
  gap: 6px;
  margin: 4px 0 4px;
}
.review-star {
  border: none;
  background: transparent;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  color: #e0d3da;
  padding: 4px;
  transition: color .12s ease, transform .12s ease;
  min-width: 44px;   /* comfortable touch target */
  min-height: 44px;
}
.review-star.is-on { color: #f5b301; }
.review-star:hover { transform: scale(1.08); }

/* Recommend checkbox */
.review-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500 !important;
  margin: 18px 0 4px !important;
  cursor: pointer;
}
.review-check input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }

.review-hint { font-size: 12.5px; color: var(--muted, #6b5b63); margin: 8px 0 0; line-height: 1.45; }

.review-submit {
  width: 100%;
  margin-top: 18px;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  background: var(--rose, #c2185b);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.review-submit:hover { filter: brightness(1.05); }
.review-submit:disabled { opacity: .6; cursor: default; }

.review-status { margin-top: 10px; font-size: 14px; min-height: 18px; }
.review-status.is-error { color: #c0392b; }
.review-status.is-info { color: #6b5b63; }
.review-status.is-success { color: #1e8449; }

/* Confirmation */
.review-google-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 13px 18px;
  border-radius: 999px;
  background: #1a73e8;
  color: #fff;
  font-weight: 700;
  margin-top: 8px;
}
.review-google-btn:hover { filter: brightness(1.05); }

/* Referral card — shown after a review with "recommend a friend" */
#reviewShareWrap {
  margin-top: 20px;
  padding: 18px 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff7f3, #ffeef0);
  border: 1px solid #efd2cc;
  box-shadow: 0 10px 26px rgba(112, 45, 55, .10);
}
.review-ref-code {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px dashed #d65a72;
  color: #b9445b;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 15px;
}
.review-share-title { font-weight: 700; margin: 0 0 4px; color: #4a3a43; }
.review-share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.review-share-btn {
  flex: 1 1 auto;
  min-width: 96px;
  text-align: center;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
}
.review-share-wa { background: #25d366; color: #fff; }
.review-share-email { background: #f0e6ec; color: #7a2048; }
.review-share-copy { background: #fff; color: #7a2048; border-color: #e2d6dc; }
.review-share-btn:hover { filter: brightness(1.03); }

/* Tablet / desktop */
@media (min-width: 600px) {
  .review-card { padding: 30px 30px 28px; }
  .review-card h2 { font-size: 24px; }
  .review-star { font-size: 42px; }
}