.tp-native-spot-card__rating {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
color: #825900;
font-weight: 800;
text-decoration: none;
}
.tp-native-spot-card__rating > span,
.tp-review-stars {
color: #e4a400;
}
.tp-native-spot-card__rating small {
color: #68766d;
font-weight: 600;
}
.tp-spot-reviews {
max-width: 940px;
margin: 24px auto 0;
padding: 28px;
border: 1px solid #e2e8e3;
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 28px rgba(31, 42, 32, .05);
}
.tp-spot-reviews__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
padding-bottom: 20px;
border-bottom: 1px solid #e8ece9;
}
.tp-spot-reviews__eyebrow {
color: #9a6700;
font-size: .75rem;
font-weight: 850;
text-transform: uppercase;
}
.tp-spot-reviews h2 {
margin: 5px 0 0;
color: #1f2a20;
}
.tp-spot-reviews__summary {
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 0 9px;
text-align: right;
}
.tp-spot-reviews__summary strong {
grid-row: 1 / 3;
color: #1f2a20;
font-size: 2.2rem;
}
.tp-spot-reviews__summary small,
.tp-spot-reviews__empty,
.tp-spot-reviews__login,
.tp-spot-reviews__owner-note {
color: #68766d;
}
.tp-review-stars {
letter-spacing: 2px;
white-space: nowrap;
}
.tp-spot-review-form {
display: grid;
gap: 15px;
margin: 22px 0;
padding: 20px;
border-radius: 14px;
background: #f7f4eb;
}
.tp-spot-review-form p {
margin: 0;
}
.tp-spot-review-form textarea {
width: 100%;
margin-top: 7px;
padding: 12px;
border: 1px solid #d8dfda;
border-radius: 10px;
background: #fff;
}
.tp-spot-review-form__rating {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
width: max-content;
margin: 0;
padding: 0;
border: 0;
}
.tp-spot-review-form__rating legend {
margin-bottom: 7px;
color: #314038;
font-size: .84rem;
font-weight: 800;
}
.tp-spot-review-form__rating input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tp-spot-review-form__rating label {
color: #c5c9c6;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
.tp-spot-review-form__rating label:hover,
.tp-spot-review-form__rating label:hover ~ label,
.tp-spot-review-form__rating input:checked ~ label {
color: #e4a400;
}
.tp-spot-review {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 13px;
padding: 20px 0;
border-bottom: 1px solid #edf0ed;
}
.tp-spot-review:last-child {
border-bottom: 0;
}
.tp-spot-review__avatar img {
border-radius: 50%;
}
.tp-spot-review header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tp-spot-review header time {
margin-left: auto;
color: #7a857e;
font-size: .75rem;
}
.tp-spot-review header + div {
margin-top: 7px;
color: #455149;
line-height: 1.6;
}
.tp-spot-review header + div p {
margin: 0;
}
.tp-spot-reviews__empty,
.tp-spot-reviews__login,
.tp-spot-reviews__owner-note {
margin: 20px 0 0;
}
@media (max-width: 680px) {
.tp-spot-reviews {
margin-top: 16px;
padding: 20px 16px;
}
.tp-spot-reviews__header {
flex-direction: column;
}
.tp-spot-reviews__summary {
text-align: left;
}
.tp-spot-review {
grid-template-columns: 40px minmax(0, 1fr);
}
.tp-spot-review__avatar img {
width: 40px;
height: 40px;
}
.tp-spot-review header time {
width: 100%;
margin-left: 0;
}
}