/* ============================================================
   Restaurant Loyalty System — Review Screen CSS
   Extends rl-customer.css design tokens.
   ============================================================ */

/* ── Star rating ─────────────────────────────────────────── */
.rl-star-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  /* flex-direction: row-reverse enables pure-CSS sibling hover */
  flex-direction: row-reverse;
}

.rl-star-btn {
  background: none;
  border: none;
  font-size: 44px;
  cursor: pointer;
  color: #ddd;
  transition: color .15s, transform .15s;
  line-height: 1;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* CSS-only sibling highlight (right-to-left stars in DOM) */
.rl-star-btn:hover,
.rl-star-btn:hover ~ .rl-star-btn,
.rl-star-btn.active {
  color: #F5C842;
  transform: scale(1.12);
}

.rl-star-label {
  text-align: center;
  font-size: 14px;
  color: var(--muted, #6B6560);
  min-height: 22px;
  font-weight: 500;
  transition: all .2s;
}

/* ── Review text area ────────────────────────────────────── */
#rl-text-field {
  display: none;
}
#rl-text-field textarea.rl-input {
  resize: none;
  min-height: 90px;
}

/* ── Submit button loading state ─────────────────────────── */
#rl-btn-submit-review.rl-btn-loading .rl-btn-text { display: none; }
#rl-btn-submit-review.rl-btn-loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rl-spin .7s linear infinite;
}
@keyframes rl-spin { to { transform: rotate(360deg); } }

/* ── Success screens ─────────────────────────────────────── */
#rl-screen-positive,
#rl-screen-negative {
  animation: rl-fade-in .4s ease both;
}
@keyframes rl-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bounce for celebration emoji */
@keyframes rl-bounce {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.25); }
}

/* ── Google review button ────────────────────────────────── */
#rl-google-review-btn {
  transition: transform .2s, box-shadow .2s;
}
#rl-google-review-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(66,133,244,.45);
}
#rl-google-review-btn:active {
  transform: scale(.97);
}