/* ============================================================
   reviews.css - reviews: landing block, full page (reviews.html),
   review cards, the review form (with slider captcha) and its
   supporting popups.
   ============================================================ */

/* ----- Landing reviews block -----
   Dark navy like every other section now. */

.section--reviews {
  background: var(--dark);
}

/* Landing reviews header: eyebrow + title on the left, link to the
   full page on the right, so the block does not look like filler. */
.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.reviews-head__eyebrow {
  display: block;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  color: #8a93a5;
  margin-bottom: 8px;
}

.reviews-head__title {
  color: #fff;
  margin: 0;
}

/* A soft outline pill instead of a plain link: visible but not loud.
   Same quiet style as the "Все работы" link on the landing. */
.reviews-head__link {
  display: inline-block;
  padding: 10px 26px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.reviews-head__link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* ----- Reviews page layout ----- */

/* The full reviews page sits on the dark navy, like the body. */
.section--page {
  background: var(--dark);
}

/* Panel holding the list and the form: a slightly lighter surface so
   the area reads as one slab on the navy page. */
.section--page .reviews-layout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}

.reviews-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  align-items: start;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ----- Media attachments inside a review card ----- */

.reviews-media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.reviews-media__item {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

/* Keep the video's own aspect ratio. */
.reviews-media video.reviews-media__item {
  height: auto;
  max-height: 340px;
}

/* Images open in a lightbox on click. */
.reviews-media img.reviews-media__item {
  cursor: zoom-in;
}

/* ----- Review cards ----- */

.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Card lifts on hover (desktop only, so it doesn't stick on touch). */
@media (hover: hover) {
  .review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  }
}

/* Tap feedback: a tiny settle instead of the full lift. */
.review-card:active {
  transform: translateY(-1px) scale(0.995);
}

/* The #1 review on the landing: accent bar + a ribbon above the card
   so it is obvious these are the most liked reviews, not random ones. */
.review-card--top {
  position: relative;
  border-top: 3px solid var(--accent);
}

.review-card--top::before {
  content: "★ Лучший отзыв";
  position: absolute;
  top: -13px;
  left: 20px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--dark);
  font-size: 11px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Reviews owned by this browser: a yellowish outline + a small badge. */
.review-card--own {
  outline: 3px solid rgba(255, 231, 94, 0.9);
  outline-offset: 3px;
}

.review-card__own-badge {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* The review just published (page opened via #review-<id>): a soft
   accent glow that fades out; scroll-margin keeps it clear of the
   sticky header when scrolled into view. */
.review-card--new {
  scroll-margin-top: 130px;
  animation: review-glow 2.6s ease-out;
}

@keyframes review-glow {
  0% {
    box-shadow: 0 0 0 4px rgba(209, 163, 85, 0.55), 0 3px 14px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
  }
}

.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.review-card__top h3 {
  color: #fff;
  font-size: 18px;
}

.review-card__stars {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.review-card__text {
  color: #dfe3ea;
  font-size: 15px;
  margin-bottom: 14px;
  /* the textarea can contain newlines: keep them on the card */
  white-space: pre-wrap;
}

.review-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Author block: a decorative initial circle + the name. */
.review-card__who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8a13c, #d18f2c);
  color: var(--dark);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
}

.review-card__author {
  font-weight: 600;
  color: #fff;
  font-size: 14px;
}

/* Full local time is shown in a tooltip on hover. */
.review-card__date {
  color: #aab2c0;
  font-size: 13px;
  cursor: help;
}

/* Edit/delete row appears only on reviews owned by this browser. */
.review-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.review-card__edit,
.review-card__delete {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #aab2c0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.review-card__edit {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.review-card__edit:hover {
  color: #fff;
  border-color: var(--accent);
}

/* Delete is deliberately red so it reads as destructive. */
.review-card__delete {
  border: 1px solid rgba(179, 64, 46, 0.6);
  color: #ff8a75;
}

.review-card__delete:hover {
  color: #ffd7cf;
  border-color: #ff8a75;
  background: rgba(179, 64, 46, 0.18);
}

/* ----- Review form ----- */

.review-form-wrap {
  /* static: the form stays at the top of the column instead of
     following the viewport (it did not fit on 1366x768 screens) */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
  /* room under the sticky header when the edit mode scrolls to it */
  scroll-margin-top: 90px;
}

.review-form-title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 18px;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-form input,
.review-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  resize: vertical;
}

.review-form input::placeholder,
.review-form textarea::placeholder {
  color: #8a93a5;
}

.review-form input:focus,
.review-form textarea:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

.review-form__label {
  display: block;
}

/* Explicit small-caps labels above the fields. */
.review-form__label-text {
  display: block;
  margin-bottom: 6px;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  color: #aab2c0;
}

/* File picker: styled like the other fields, hint below the label. */
.review-form__media {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #aab2c0;
}

.review-form__media input {
  padding: 10px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #cfd4dd;
  font-size: 14px;
  cursor: pointer;
}

.review-form__media input:hover {
  border-color: var(--accent);
}

/* Editable attachments in edit mode: chips with a remove button. */
.review-form__media-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-media-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  color: #dfe3ea;
}

/* A picked file that still exceeds the server limit (e.g. a video). */
.review-media-chip--oversize {
  border-color: rgba(179, 64, 46, 0.6);
  color: #ff8a75;
  background: rgba(179, 64, 46, 0.15);
}

.review-media-chip__remove {
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  color: #aab2c0;
  font-size: 13px;
  cursor: pointer;
}

.review-media-chip__remove:hover {
  color: #ff6b5a;
}

/* Cancel button of the edit mode. */
.review-form__cancel {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #aab2c0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 30px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.review-form__cancel:hover {
  color: #fff;
  border-color: var(--accent);
}

/* ----- Star rating widget ----- */

.review-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-stars__hint {
  color: #aab2c0;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  margin-right: 6px;
}

.star {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #5a6474;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s, transform 0.15s;
}

.star:hover {
  transform: scale(1.15);
}

.star--active {
  color: var(--accent);
}

/* Submit status line under the form (errors and success message). */
.review-form__status {
  font-size: 14px;
  color: #ff7b6b;
  min-height: 18px;
}

.review-form__status--ok {
  color: #58c98a;
}

/* Inline ring shown next to "Отправка…" while the request is in flight. */
.review-form__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 6px 0 0;
  vertical-align: -2px;
  border-width: 2px;
}

/* ----- Slider captcha ----- */

.captcha-slider {
  user-select: none;
  touch-action: none;
}

.captcha-slider__track {
  position: relative;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  overflow: hidden;
}

/* Accent fill behind the thumb while dragging; turns green when done. */
.captcha-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: rgba(232, 161, 60, 0.28);
  border-radius: 22px 0 0 22px;
}

.captcha-slider__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--dark);
  font-size: 18px;
  line-height: 1;
  cursor: grab;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.captcha-slider__thumb:active {
  cursor: grabbing;
}

.captcha-slider__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aab2c0;
  font-size: 14px;
  pointer-events: none;
}

/* Passed state: green fill, green thumb and label. */
.captcha-slider.captcha--done .captcha-slider__fill {
  background: rgba(88, 201, 138, 0.3);
  border-radius: 22px;
}

.captcha-slider.captcha--done .captcha-slider__thumb {
  background: #58c98a;
  color: var(--dark);
}

.captcha-slider.captcha--done .captcha-slider__label {
  color: #58c98a;
}

/* While the review is being sent the slider is inert. */
.captcha-slider--busy {
  pointer-events: none;
  opacity: 0.65;
}

/* ----- Captcha bubble -----
   A non-modal hint pointing at the slider when a submit is blocked. */

.captcha-bubble {
  position: fixed;
  z-index: 250;
  transform: translate(-50%, -100%);
  background: var(--surface);
  color: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: captcha-bubble-in 0.2s ease-out;
  pointer-events: none;
}

.captcha-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface);
}

.captcha-bubble--out {
  animation: captcha-bubble-out 0.2s ease-in forwards;
}

@keyframes captcha-bubble-in {
  from {
    opacity: 0;
    transform: translate(-50%, -85%);
  }
}

@keyframes captcha-bubble-out {
  to {
    opacity: 0;
    transform: translate(-50%, -115%);
  }
}

/* ----- Review popup (validation messages) ----- */

.review-popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 19, 0.6);
  animation: review-popup-fade 0.2s ease-out;
}

.review-popup__box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 400px;
  margin: 0 20px;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  animation: review-popup-pop 0.25s ease-out;
}

.review-popup__title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
}

.review-popup__text {
  color: #dfe3ea;
  font-size: 15px;
  margin-bottom: 20px;
}

/* Confirm popups (review delete): "Отмена" + a red confirm button. */
.review-popup__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.review-popup__cancel {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #aab2c0;
}

.review-popup__cancel:hover {
  border-color: var(--accent);
  color: #fff;
}

.review-popup__danger {
  background: #c0392b;
  color: #fff;
}

.review-popup__danger:hover {
  background: #a93226;
}

@keyframes review-popup-fade {
  from {
    opacity: 0;
  }
}

@keyframes review-popup-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}