
.container {
  width: 94%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 0 3%;
  background: url(/static/images/src/bg_select_cities.png) 0 0 no-repeat;
    background-size: auto;
  background-size: 100%;
}
.content.location-page {
    width: 85%;
  font-family: 'Montserrat';
  font-size: 13px;
  font-weight: 500;
}
.content.location-page a {
    color: #0081bf;
    font-weight: 700;
}
.content.location-name {
    text-align: center;
    margin-top: 35px;
    margin-block-end: 1em;
    width: 85%;
}

.content.location-name div {
    text-align: center;
    text-transform: uppercase;
}
.content.location-name .page-name {
    padding: 5px;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    font-family: 'MontserratAlternates';
    text-transform: initial;
}
.content.location-name .yellow-label {
    font-family: 'Montserrat';
    background-color: #f7b643;
    font-size: 10px;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    text-transform: uppercase;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 1px 15px;
    display: inline-block;
}

.tag-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.tag-pill {
    text-decoration: none;
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    color: #000000;
    font-family: 'Montserrat';
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.like-bar {
    width: 85%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 8px;
}

.like-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
}

.like-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.like-count {
    min-width: 1ch;
    font-family: 'Montserrat';
    font-size: 13px;
    font-weight: 600;
    color: #262626;
    letter-spacing: 0.2px;
}

.like-buttons button {
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.2s ease;
}

.like-buttons button:hover {
    opacity: 0.85;
}

.like-buttons button:active {
    transform: scale(0.92);
}

.btn-like {
    background-image: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 464s-182.4-105.6-182.4-249.6C73.6 137.6 124.8 80 193.6 80c38.4 0 62.4 22.4 62.4 22.4S280 80 318.4 80c68.8 0 120 57.6 120 134.4C438.4 358.4 256 464 256 464Z' fill='none' stroke='%23000000' stroke-width='32'/%3E%3C/svg%3E");
}

.btn-like.active {
    background-image: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 464s-182.4-105.6-182.4-249.6C73.6 137.6 124.8 80 193.6 80c38.4 0 62.4 22.4 62.4 22.4S280 80 318.4 80c68.8 0 120 57.6 120 134.4C438.4 358.4 256 464 256 464Z' fill='%23ed4956' stroke='%23ed4956' stroke-width='32'/%3E%3C/svg%3E");
}

.btn-dislike {
    background-image: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 464s-182.4-105.6-182.4-249.6C73.6 137.6 124.8 80 193.6 80c38.4 0 62.4 22.4 62.4 22.4S280 80 318.4 80c68.8 0 120 57.6 120 134.4C438.4 358.4 256 464 256 464Z' fill='none' stroke='%23000000' stroke-width='32'/%3E%3Cline x1='140' y1='372' x2='372' y2='140' stroke='%23000000' stroke-width='28'/%3E%3C/svg%3E");
}

.btn-dislike.active {
    background-image: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 464s-182.4-105.6-182.4-249.6C73.6 137.6 124.8 80 193.6 80c38.4 0 62.4 22.4 62.4 22.4S280 80 318.4 80c68.8 0 120 57.6 120 134.4C438.4 358.4 256 464 256 464Z' fill='%23000000'/%3E%3Cline x1='140' y1='372' x2='372' y2='140' stroke='%23ffffff' stroke-width='28'/%3E%3C/svg%3E");
}

.dislike-form {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dislike-form.hidden {
    display: none;
}

.dislike-form textarea {
    width: 100%;
    min-height: 80px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px;
    font-family: 'Montserrat';
    font-size: 13px;
}

.dislike-form .btn-send-dislike {
    align-self: flex-end;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    background: #f7b643;
    color: #1b1b1b;
    font-family: 'Montserrat';
    font-weight: 700;
    cursor: pointer;
}

.like-status {
    min-height: 18px;
    font-family: 'Montserrat';
    font-size: 12px;
    color: #ffffff;
    opacity: 0.9;
    text-align: left;
}

.hidden {
    display: none !important;
}
