* {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.5;
}

/* Screen reader only */
.sspot-screen-reader-text {
  position: absolute;
  top: -10000em;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Header */
.main-header {
  position: relative;
  align-items: center;
  justify-content: center;
  color: #000;
  display: grid;
  height: 60px;
  padding: 0 1.2rem;
  border-bottom: 1px solid #e2e2e2;
}

.main-header img {
  max-width: 100%;
  max-height: 24px;
  display: block;
  height: auto;
}
  
.back, .forward {
  position: absolute;
  align-items: center;
  display: grid;
  grid-template-columns: 30px 1fr;
  color: inherit;
  text-decoration: none;
}

.back {
  left: 0;
  margin-left: 1.5rem;
}

.forward {
  right: 0;
  margin-right: 1.5rem;
}

.back-icon,
.forward-icon {
  position: absolute;
  display: block;
  fill: #000;
}

.back-icon {
  left: 0;
}

.forward-icon {
  right: 0;
  transform: scaleX(-1);
}

/* Content */
.sspot-review-content {
  margin: 0 auto;
  width: 500px;
  max-width: 500px;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Store review */
.sspot-store-review .sspot-preview {
  justify-content: center;
  margin-bottom: 2rem;
}
.sspot-store-review .sspot-rating-provided svg {
  width: 30px;
}

@media (max-width: 500px) {
  .sspot-review-content {
    width: 100%;
    box-sizing: border-box;
  }
}

.sspot-review-content h1 {
  font-size: clamp(1.25rem, 1.123rem + 0.4065vw, 1.375rem); /* 20-22 */
  font-weight: 700;
  letter-spacing: -0.0025em;
  margin: 0 0 0.25rem 0;
  max-width: 43ch;
  line-height: 1.4;
  text-wrap: pretty;
}

main p {
  margin-top: 0;
}

/* Step 1: Stars review */
.sspot-product-title {
  margin-bottom: 1.5rem;
  color: #444;
  text-wrap: pretty;
}

.sspot-stars a {
  text-decoration: none;
}

.sspot-stars svg {
  width: 45px;
  stroke: #fab51c;
}

.sspot-stars-submit span {
  display: inline-flex;
  justify-content: center;
}

.sspot-stars-submit a {
  position: relative;
  width: 50px;
  height: 45px;
  text-decoration: none;
  text-indent: -999em;
  font-size: 0px;
  display: flex;
  justify-content: center;
}

.sspot-stars-submit span a:before,
.sspot-stars-submit span a:hover~a:before {
  display: inline-flex;
  width: 45px;
  height: 45px;
  background-color: #fab51c;
  content: "";
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" /></svg>');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.sspot-stars-submit span:hover a:before,
.sspot-stars-submit a.selected:before,
.sspot-star:has(~ .selected):before {
  background-color: #fab51c;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" /></svg>');
}

/* Product preview */
.sspot-preview {
  display: flex;
  text-align: left;
  align-items: center;
  margin-bottom: 2rem;
}

.sspot-preview--image {
  display: flex;
}

.sspot-preview--image img {
  max-width: 60px;
  margin-right: 1rem;
}

.sspot-preview--content p {
  font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); /* 14-15px */
  line-height: 1.4;
  margin-bottom: 0.35rem;
  color: #222;
}

/* Forms */
.sspot-review-content form {
  margin-top: 0.75rem;
}

.sspot-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.sspot-form-row label {
  font-size: 15px;
}

.sspot-form-row:has(input[type="checkbox"]) {
  align-items: flex-start;
}

.sspot-form-row input[type="checkbox"] {
  margin-right: 1rem;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sspot-review-content form a {
  text-decoration: underline;
  color: #1E64E6;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.sspot-review-content form a:hover {
  color: #084ac6;
}

.sspot-review-content input#sspotInput {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e2e2e2;
  padding: 0.75rem;
  font-size: 16px;
  outline: none;
  line-height: 1.5;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.sspot-review-content input#sspotInput:focus {
  border-color: #ccc;
}

.sspot-review-content textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e2e2e2;
  padding: 0.75rem;
  font-size: 16px;
  outline: none;
  line-height: 1.5;
  border-radius: 6px;
  margin-bottom: 1rem;
  resize: vertical;
}

.sspot-review-content .sspot-step-3 textarea {
  min-height: 200px;
}

.sspot-review-content .sspot-step-4 textarea {
  resize: none;
}

.sspot-review-content textarea:focus {
  border-color: #ccc;
}

.sspot-character-count__message {
  color: #555;
  font-size: 14px;
}

#sspotCharacterCount {
  font-size: 13px;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

input#sspotInput + #sspotCharacterCount {
  margin-top: -0.25rem;
}

#sspotCharacterCount.over-limit {
  color: #DF0101;
}

.sspot-hidden {
  display: none !important;
}

.sspot-validation {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 13px;
  color: #DF0101;
}

.sspot-media-validation {
  margin-top: 0.15rem;
  text-align: center;
  font-size: 13px;
  color: #666;
  text-wrap: pretty;
}

.sspot-validation-message {
  border: 4px solid #d4351c;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-size: 15px;
}

.sspot-validation-message svg {
  width: 1.75rem;
  stroke: #13b750;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.sspot-validation-message--title {
  background-color: #d4351c;
  color: #fff;
  padding: 0.4rem 1.25rem 0.65rem 1.25rem;
  font-weight: 700;
}

.sspot-validation-message ul {
  padding-left: 15px;
  margin: 1rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
}

.sspot-validation-message ul li {
  margin-bottom: 0.25rem;
}

.sspot-validation-message.sspot-validation-success {
  background-color: #dff7e6;
  border: none;
  border-left: 4px solid #13b750;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.sspot-validation-message.sspot-validation-success .sspot-validation-message--title {
  background-color: #00703c;
}

.sspot-validation-message.sspot-validation-success p {
  font-weight: 500;
  font-size: 14px;
  color: #00703c;
  margin: 0;
}

.sspot-review-content button.sspotProceed {
  border-radius: 6px;
  padding: 1rem;
  border: none;
  width: 100%;
  background-color: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sspot-review-content button.sspotProceed svg {
  width: 18px;
  margin-left: 0.5rem;
  transition: 0.2s all;
}

.sspot-review-content button.sspotProceed[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.sspot-review-content button.sspotProceed:not([disabled]) svg {
  transform: translateX(5px);
}

.sspot-review-content label.sspotMediaUpload {
  border-radius: 6px;
  padding: 3rem 1.25rem;
  background-color: #f9f9f9;
  border: 2px dashed #e2e2e2;
  display: inline-block;
  margin-top: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.sspot-review-content label.sspotMediaUpload svg.uploadIcon {
  width: 60px;
  stroke: #ccc;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.sspot-review-content label.sspotMediaUpload {
  border-color: #ccc;
}

.sspotMedia {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sspotMedia:has(.sspotMedia--image) {
  padding-top: 1.75rem;
}

.sspotMedia--image {
  max-width: calc(25% - 0.75rem);
  position: relative;
}

.sspotMedia--image img {
  max-width: 100%;
  display: block;
}

.sspotMedia--delete {
  position: absolute;
  display: inline-flex;
  top: -0.25rem;
  right: -0.25rem;
}

.sspotMedia--delete button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  background-color: #111;
  border-radius: 99%;
  cursor: pointer;
}

.sspotMedia--delete button svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: #fff;
}

label + button {
  margin-top: 1rem;
}

/* Step 1 */
.sspot-steps.sspot-step-1,
.sspot-steps.sspot-step-2 {
  text-align: center;
}

.sspot-step-1 img {
  max-height: 200px;
  display: block;
  margin: 0 auto 2rem auto;
}

.sspot-step-1.sspot-404 img {
  max-height: 250px;
  margin-bottom: 1rem;
}

/* Step 2 */
.sspot-rating-provided {
  display: flex;
}

.sspot-recommend-choice {
  padding-top: 1.5rem;
}

.sspot-rating-provided svg {
  width: 18px;
  margin-right: 1px;
}

.sspot-rating-provided svg.selected {
  fill: #fab51c;
}

.sspot-rating-provided svg:not(.selected) {
  stroke: #fab51c;
}

.sspot-recommend-choice a {
  display: inline-flex;
  margin: 0 1.5rem;
  padding: 1rem;
  border-radius: 99%;
  width: 40px;
  height: 40px;
}

.sspot-recommend--yes {
  background-color: #f0f8f1;
}

.sspot-recommend--yes svg {
  stroke: #01670a;
}

.sspot-recommend--no {
  background-color: #fbf0f1;
}

.sspot-recommend--no svg {
  stroke: #c10516;
}

/* Step 5 */
.sspot-skip-step {
  margin-top: 1.5rem;
  text-align: center;
}

.sspot-skip-step a {
  font-size: 15px;
  color: #111;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.sspot-step-5 button {
  margin-top: 1.5rem;
}

/* Step 6 */
.sspot-step-6 .sspot-form-row {
  margin-bottom: 1rem;
  color: #444;
}

.sspot-steps.sspot-step-6 p {
  font-size: 14px;
  color: #444;
  margin-bottom: 2rem;
}

/* Step 7 */
.sspot-steps.sspot-step-7 {
  text-align: center;
}

.sspot-steps.sspot-step-7 h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.sspot-steps.sspot-step-7 p {
  font-size: 15px;
  color: #444;
}

.sspot-steps.sspot-step-7 #sspotComplete {
  max-width: 300px;
  margin: 0 auto;
}

/* Media upload */
.sspot-media-upload {
  margin: 1rem 0;
}

.sspot-media-upload--progress {
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 14px;
  justify-content: space-between;
  color: #555;
}

.sspot-ellipsis-loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;     
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

.sspot-media-upload--bar {
  position: relative;
  background-color: #eee;
  height: 8px;
  border-radius: 20px;
}

.sspot-media-upload--bar--value {
  position: absolute;
  height: 8px;
  background-color: #267ffd;
  border-radius: 20px;
  transition: 0.3s width;
}

.sspot-upload-complete .sspot-media-upload--progress {
  color: #222
}

.sspot-upload-complete .sspot-media-upload--bar--value {
  background-color: #31c48d;
}

/* Footer */
footer {
  margin-top: auto;
}
.sspot-reviews-footer {
  align-items: center;
  display: flex;
  padding-bottom: 30px;
  justify-content: center;
  white-space: nowrap;
  line-height: 15px;
  font-size: 13px;
}
  
.sspot-reviews-footer .sayspot-logo {
  display: block;
  margin-left: 4px;
  width: 60px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
  
.sayspot-logo {
  background-image:  url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="677px" height="159px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path style="opacity:1" fill="%230a0a09" d="M 38.5,-0.5 C 42.8333,-0.5 47.1667,-0.5 51.5,-0.5C 62.828,1.55945 73.1613,6.05945 82.5,13C 84.0074,13.8373 84.5074,15.0039 84,16.5C 79.6598,22.335 75.1598,28.0017 70.5,33.5C 62.9824,26.659 54.1491,22.659 44,21.5C 34.0508,21.7772 29.3842,26.7772 30,36.5C 30.7922,38.5873 31.9588,40.4207 33.5,42C 47.953,48.4807 62.2863,55.1474 76.5,62C 88.2926,73.9049 91.1259,87.7382 85,103.5C 75.5489,117.981 62.0489,125.314 44.5,125.5C 26.8134,125.173 12.1467,118.506 0.5,105.5C 4.7642,99.0662 9.59754,93.0662 15,87.5C 25.6474,100.382 39.1474,104.882 55.5,101C 63.4908,95.3986 64.4908,88.7319 58.5,81C 46.5344,75.6746 34.5344,70.3413 22.5,65C 8.03601,56.6373 2.20268,44.1373 5,27.5C 7.46196,17.3721 13.2953,9.87209 22.5,5C 27.7399,2.53364 33.0732,0.700305 38.5,-0.5 Z"/></g><g><path style="opacity:1" fill="%230a0a09" d="M 322.5,-0.5 C 326.833,-0.5 331.167,-0.5 335.5,-0.5C 346.828,1.55945 357.161,6.05945 366.5,13C 368.007,13.8373 368.507,15.0039 368,16.5C 363.66,22.335 359.16,28.0017 354.5,33.5C 346.982,26.659 338.149,22.659 328,21.5C 318.051,21.7772 313.384,26.7772 314,36.5C 314.792,38.5873 315.959,40.4207 317.5,42C 331.953,48.4807 346.286,55.1474 360.5,62C 372.293,73.9049 375.126,87.7382 369,103.5C 359.549,117.981 346.049,125.314 328.5,125.5C 310.813,125.173 296.147,118.506 284.5,105.5C 288.764,99.0662 293.598,93.0662 299,87.5C 309.647,100.382 323.147,104.882 339.5,101C 347.491,95.3986 348.491,88.7319 342.5,81C 330.534,75.6746 318.534,70.3413 306.5,65C 292.036,56.6373 286.203,44.1373 289,27.5C 291.462,17.3721 297.295,9.87209 306.5,5C 311.74,2.53364 317.073,0.700305 322.5,-0.5 Z"/></g><g><path style="opacity:1" fill="%230a0a09" d="M 605.5,9.5 C 607.167,9.5 608.833,9.5 610.5,9.5C 610.5,19.5 610.5,29.5 610.5,39.5C 618.167,39.5 625.833,39.5 633.5,39.5C 633.5,45.8333 633.5,52.1667 633.5,58.5C 625.833,58.5 618.167,58.5 610.5,58.5C 610.333,71.8375 610.5,85.1708 611,98.5C 612.732,103.617 616.232,105.45 621.5,104C 623.762,103.358 625.929,102.525 628,101.5C 630.652,107.287 632.819,113.287 634.5,119.5C 622.364,126.215 610.03,126.715 597.5,121C 591.266,115.649 588.099,108.816 588,100.5C 587.5,86.504 587.333,72.504 587.5,58.5C 584.223,58.7839 581.057,58.4505 578,57.5C 577.501,51.5092 577.334,45.5092 577.5,39.5C 580.833,39.5 584.167,39.5 587.5,39.5C 587.334,30.4938 587.5,21.4938 588,12.5C 593.906,11.3331 599.74,10.3331 605.5,9.5 Z"/></g><g><path style="opacity:1" fill="%230a0a09" d="M 134.5,37.5 C 144.981,37.3778 153.815,41.0445 161,48.5C 161.498,45.5184 161.665,42.5184 161.5,39.5C 169.167,39.5 176.833,39.5 184.5,39.5C 184.5,67.5 184.5,95.5 184.5,123.5C 177.167,123.5 169.833,123.5 162.5,123.5C 162.665,120.482 162.498,117.482 162,114.5C 155.42,121.533 147.253,125.2 137.5,125.5C 111.484,122.481 97.8176,107.814 96.5,81.5C 97.6094,56.5036 110.276,41.8369 134.5,37.5 Z M 136.5,58.5 C 155.713,58.5545 164.213,68.2212 162,87.5C 156.526,102.984 146.026,107.818 130.5,102C 125.769,99.0435 122.602,94.8769 121,89.5C 117.739,74.6866 122.906,64.3533 136.5,58.5 Z"/></g><g><path style="opacity:1" fill="%230a0a09" d="M 432.5,37.5 C 454.6,38.6283 468.1,49.9616 473,71.5C 476.591,90.0598 471.425,105.56 457.5,118C 444.339,126.167 430.673,127.167 416.5,121C 413.705,119.207 411.205,117.04 409,114.5C 408.5,128.829 408.333,143.163 408.5,157.5C 400.833,157.5 393.167,157.5 385.5,157.5C 385.5,118.167 385.5,78.8333 385.5,39.5C 393.167,39.5 400.833,39.5 408.5,39.5C 408.335,42.5184 408.502,45.5184 409,48.5C 415.594,41.9503 423.427,38.2837 432.5,37.5 Z M 424.5,58.5 C 444.257,58.7655 452.757,68.7655 450,88.5C 444.056,103.215 433.556,107.715 418.5,102C 407.968,93.7102 405.135,83.2102 410,70.5C 413.399,64.7237 418.232,60.7237 424.5,58.5 Z"/></g><g><path style="opacity:1" fill="%230a0a09" d="M 525.5,37.5 C 546.324,36.981 561.157,45.981 570,64.5C 578.373,100.435 564.373,120.768 528,125.5C 499.992,123.991 485.158,109.324 483.5,81.5C 484.923,54.7448 498.923,40.0781 525.5,37.5 Z M 522.5,58.5 C 542.282,58.1162 551.115,67.7829 549,87.5C 542.732,103.926 531.565,108.426 515.5,101C 506.205,92.0604 504.038,81.5604 509,69.5C 512.213,64.1075 516.713,60.4408 522.5,58.5 Z"/></g><g><path style="opacity:1" fill="%230a0a09" d="M 193.5,39.5 C 201.5,39.5 209.5,39.5 217.5,39.5C 223.648,56.7774 230.481,73.7774 238,90.5C 243.889,73.7243 250.055,57.0577 256.5,40.5C 264.479,39.3351 272.479,39.1684 280.5,40C 265.603,78.8558 250.603,117.689 235.5,156.5C 227.862,157.497 220.196,157.831 212.5,157.5C 216.86,144.255 221.527,131.088 226.5,118C 215.201,91.9314 204.201,65.7647 193.5,39.5 Z"/></g><g><path style="opacity:1" fill="%23007eff" d="M 676.5,107.5 C 676.5,109.167 676.5,110.833 676.5,112.5C 671.302,124.846 662.636,128.013 650.5,122C 642.301,113.37 642.634,105.037 651.5,97C 663.649,91.7472 671.983,95.2472 676.5,107.5 Z"/></g></svg>')
}

/* Transitions */
.main-header {
  view-transition-name: mainheader;
  contain: layout;
}

.main-footer {
  view-transition-name: mainfooter;
  contain: layout;
}

.sspot-preview {
  view-transition-name: sspotpreview;
  contain: layout;
}

@view-transition {
  navigation: auto;
}
  
@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-right {
  to { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

::view-transition-old(mainheader) {
  animation: fade 0.2s linear forwards;
}

::view-transition-new(mainheader) {
  animation: fade 0.3s linear reverse;
}

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