/* ==========================================================================
   assets/css/testimonial-form.css
   The review modal: the overlay, the panel, the star picker, the states.

   Written for this feature rather than into main.css, because main.css is the
   frozen compiled output of the static build's Tailwind and nothing new belongs
   in it. Everything here is scoped under .atr-, so it cannot collide with a
   class the design already uses.
   ========================================================================== */

/* ---------- the trigger, in the section's heading ---------- */

.atr-open {
  font-family: inherit;
}

/* ---------- the overlay ---------- */

.atr-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.atr-modal[hidden] {
  display: none;
}

.atr-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(2 6 23 / 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: atr-fade-in 0.22s ease both;
}

/* ---------- the panel ---------- */

.atr-modal__panel {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(248 178 51 / 0.12);
  animation: atr-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes atr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes atr-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atr-modal__overlay,
  .atr-modal__panel {
    animation: none;
  }
}

.atr-modal__close {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.atr-modal__close:hover {
  color: var(--foreground);
  border-color: rgb(248 178 51 / 0.4);
  background: rgb(248 178 51 / 0.08);
}

.atr-modal__head {
  padding-inline-end: 2.5rem;
  margin-bottom: 1.5rem;
}

.atr-modal__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f8b233;
}

.atr-modal__title {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.25;
  margin: 0.35rem 0 0.5rem;
  color: var(--foreground);
}

.atr-modal__lede {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
}

/* ---------- the fields ---------- */

.atr-form {
  display: grid;
  gap: 1.1rem;
}

.atr-field {
  display: grid;
  gap: 0.4rem;
}

.atr-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--foreground);
}

.atr-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.atr-input::placeholder {
  color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
}

.atr-input:focus {
  outline: none;
  border-color: rgb(248 178 51 / 0.6);
  box-shadow: 0 0 0 3px rgb(248 178 51 / 0.14);
}

.atr-input--ltr {
  direction: ltr;
  text-align: start;
}

.atr-textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.7;
}

.atr-input[aria-invalid="true"] {
  border-color: rgb(244 63 94 / 0.7);
  box-shadow: 0 0 0 3px rgb(244 63 94 / 0.12);
}

.atr-hint {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0;
}

.atr-error {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fb7185;
  margin: 0;
}

/*
 * The honeypot field's hiding place.
 *
 * Off-screen rather than display:none: the former stays invisible to everyone
 * including assistive technology (with aria-hidden on the wrapper), while the
 * latter is exactly what a spam script looks for before deciding whether to
 * fill the field.
 */
.atr-hp {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* ---------- the star picker ---------- */

.atr-stars {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  /* RTL: the row runs right-to-left, so the first star is on the right */
  direction: rtl;
}

.atr-star {
  display: grid;
  place-items: center;
  padding: 0.15rem;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}

.atr-star svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: transparent;
  stroke: currentColor;
}

.atr-star:hover,
.atr-star:focus-visible {
  color: #f8b233;
  transform: scale(1.12);
}

.atr-star.is-on {
  color: #f8b233;
}

.atr-star.is-on svg {
  fill: #f8b233;
}

.atr-star:focus-visible {
  outline: 2px solid rgb(248 178 51 / 0.6);
  outline-offset: 2px;
  border-radius: 0.4rem;
}

/* the read-only row on a review card */
.atr-rating {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  direction: ltr;
}

.atr-rating svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: transparent;
  stroke: #64748b;
}

.atr-rating svg.is-on {
  fill: #f8b233;
  stroke: #f8b233;
}

/* ---------- the submit button and its states ---------- */

.atr-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  color: #0b1120;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: 0;
  border-radius: 0.9rem;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgb(245 158 11 / 0.7);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.atr-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.atr-submit:active {
  transform: translateY(0);
}

.atr-submit[disabled] {
  cursor: progress;
  filter: saturate(0.5);
}

.atr-submit__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(11 17 32 / 0.35);
  border-top-color: #0b1120;
  border-radius: 50%;
  animation: atr-spin 0.7s linear infinite;
}

.atr-submit.is-busy .atr-submit__spinner {
  display: block;
}

@keyframes atr-spin {
  to { transform: rotate(360deg); }
}

.atr-status {
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: 1px solid transparent;
}

.atr-status.is-ok {
  color: #6ee7b7;
  background: rgb(16 185 129 / 0.1);
  border-color: rgb(16 185 129 / 0.3);
}

.atr-status.is-bad {
  color: #fda4af;
  background: rgb(244 63 94 / 0.1);
  border-color: rgb(244 63 94 / 0.3);
}

/* the page is frozen while the modal is open */
body.atr-locked {
  overflow: hidden;
}