/* The review page's own bits, on top of booking-status.css - same panel, same
   palette, same buttons as the other pages a guest reaches from an email. */

/* .actions sets display:flex, which beats the browser's own [hidden]{display:none}
   - so the "back to the site" button sat on screen under the live form until this
   rule put it back. Anything toggled with the hidden attribute on this page needs
   to win against its own display rule. */
[hidden]{display:none !important;}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

form{margin-top:22px;}

label{display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mist-dim); margin-bottom:7px;}
.optional{text-transform:none; letter-spacing:0; opacity:.7;}

textarea, input[type="text"], select{
  width:100%; background:var(--fjord); color:var(--snow); border:1px solid var(--panel-line);
  border-radius:2px; padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px; line-height:1.55;
  resize:vertical;
}
textarea:focus, input[type="text"]:focus, select:focus{outline:none; border-color:var(--aurora-teal);}
select{margin-bottom:2px;}

.field-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px;}
@media (max-width:420px){ .field-pair{grid-template-columns:1fr;} }

/* ---- the stars -------------------------------------------------------------
   Drawn as a mask over currentColor rather than as a glyph: a text star is
   whatever star the device's emoji font has, which on Windows is a different
   shape and weight from the one on a phone, and it cannot be half a pixel off
   the baseline without looking broken.

   Laid out in reverse so the CSS can light up "this star and everything before
   it" with a sibling selector, which only reaches FORWARDS. row-reverse puts
   the 1-star input last in the DOM and first on screen. */
.stars-field{border:none; padding:0; margin:0 0 20px;}
.stars-field legend{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mist-dim); margin-bottom:10px;}

.stars-input{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px;}
.stars-input input{position:absolute; opacity:0; width:1px; height:1px;}
.stars-input label{
  width:38px; height:38px; margin:0; cursor:pointer;
  background-color:var(--panel-line);
  -webkit-mask-image:var(--icon-star); mask-image:var(--icon-star);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:background-color .12s ease, transform .12s ease;
}
/* Checked star and every star before it (to its left, since the row is reversed). */
.stars-input input:checked ~ label,
.stars-input label:hover,
.stars-input label:hover ~ label{background-color:var(--lantern);}
.stars-input label:hover{transform:scale(1.06);}
/* Keyboard focus has to be visible on a control whose input is off-screen. */
.stars-input input:focus-visible + label{outline:2px solid var(--aurora-teal); outline-offset:3px;}

.rating-word{margin-top:10px; font-size:13px; color:var(--mist); min-height:1.2em;}

:root{
  /* Inline SVG, single-quoted, with # written %23 - an unescaped # ends the URL
     and the icon silently vanishes. */
  --icon-star:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2.4l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.25l-5.81 3.05 1.11-6.47-4.7-4.58 6.5-.95z"/></svg>');
}

/* ---- the stars, read-only (used on the front page too) --------------------- */
.stars-static{display:inline-flex; gap:2px; vertical-align:middle;}
.stars-static i{
  width:14px; height:14px; display:block; background-color:var(--panel-line);
  -webkit-mask-image:var(--icon-star); mask-image:var(--icon-star);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.stars-static i.on{background-color:var(--lantern);}

/* What leaving the review unlocked, said once the review is in rather than
   promised twice on the way. */
.photo-unlock{
  margin-top:18px; padding:14px 16px; border-left:3px solid var(--aurora-green);
  background:rgba(111,231,181,.08);
}
.photo-unlock b{display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--aurora-green); margin-bottom:6px;}
.photo-unlock p{font-size:13.5px; color:var(--mist); line-height:1.6;}
.photo-unlock a{color:var(--aurora-green);}