/* Shared discussion component: light and dark themes, including replies. */
.catalog-comments {
    --comments-surface: #fff;
    --comments-soft: #f1f6fc;
    --comments-border: #dce6f1;
    --comments-text: #172033;
    --comments-body: #33445d;
    --comments-muted: #66758a;
    --comments-accent: #1670cc;
    --comments-accent-soft: #e2efff;
    --comments-star: #ae7300;
    --comments-danger: #b42c42;
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 2rem 0 0;
    padding: 0;
    color: var(--comments-text);
    font-family: inherit;
}
body.dark .catalog-comments {
    --comments-surface: #222b36;
    --comments-soft: #29323d;
    --comments-border: #3b4a5b;
    --comments-text: #f3f6fa;
    --comments-body: #d6dee8;
    --comments-muted: #a6b7ca;
    --comments-accent: #8dc5f4;
    --comments-accent-soft: #293e55;
    --comments-star: #ffcf40;
    --comments-danger: #ffadb7;
    color-scheme: dark;
}
.catalog-comments, .catalog-comments * { box-sizing: border-box; }
.catalog-comments [hidden] { display: none !important; }
.catalog-comments button, .catalog-comments input, .catalog-comments textarea { font: inherit; }
.catalog-comments button, .catalog-comments summary, .catalog-comments a { -webkit-tap-highlight-color: transparent; }
.catalog-comments button, .catalog-comments summary { cursor: pointer; }
.catalog-comments :is(button, summary, a, textarea):focus-visible { outline: 2px solid var(--comments-accent); outline-offset: 3px; }
.catalog-comments a { color: var(--comments-accent); }
.catalog-comments button:disabled { opacity: .55; cursor: default; }
.catalog-comments .poi-comment-top { background: transparent; border: 0; box-shadow: none; }
.catalog-comment-form { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .65rem 1rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--comments-border); border-radius: 1rem; background: var(--comments-surface); }
.universal-comment-form__avatar { grid-column: 1; grid-row: 1 / 3; width: 2.75rem; height: 2.75rem; border-radius: 1rem; object-fit: cover; }
.catalog-comment-form__label, .comment-legacy-anchor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.catalog-comments .catalog-comment-form textarea,
.catalog-comments .webcam-comment-reply-form textarea { display: block; width: 100%; min-width: 0; min-height: 3rem; margin: 0; padding: .75rem .9rem; border: 1px solid var(--comments-border); border-radius: .7rem; background: var(--comments-soft); color: var(--comments-text); font-size: 1rem; line-height: 1.5; resize: vertical; }
.catalog-comment-form > textarea { grid-column: 2; }
.catalog-comments textarea::placeholder { color: var(--comments-muted); opacity: 1; }
.universal-comment-form__footer { grid-column: 2; display: flex; align-items: flex-end; flex-wrap: wrap; gap: .7rem 1rem; min-width: 0; }
.universal-comment-form__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.catalog-rating-input { flex: 0 1 auto; width: 16.5rem; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.catalog-rating-input legend { margin: 0; padding: 0; color: var(--comments-muted); font-size: .9rem; line-height: 1.4; }
.catalog-rating-input__options { display: flex; width: 100%; flex-direction: row-reverse; align-items: center; }
.catalog-rating-input__options label { position: relative; display: grid; flex: 1 1 0; min-width: 0; place-items: center; height: 2.75rem; margin: 0; color: var(--comments-muted); cursor: pointer; }
.catalog-rating-input__options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.catalog-rating-star > span { font-size: 1.85rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px var(--comments-muted); }
.catalog-rating-star:has(input:checked) > span,
.catalog-rating-star:has(input:checked) ~ .catalog-rating-star > span { color: var(--comments-star); -webkit-text-stroke-color: var(--comments-star); }
@media (hover: hover) {
    .catalog-rating-star:hover > span,
    .catalog-rating-star:hover ~ .catalog-rating-star > span { color: var(--comments-star); -webkit-text-stroke-color: var(--comments-star); }
}
.catalog-rating-input__options label:has(input:focus-visible) { outline: 2px solid var(--comments-accent); outline-offset: -2px; border-radius: .5rem; }
.catalog-rating-input__options .catalog-rating-clear { order: -1; flex: 0 0 2rem; font-size: 1.5rem; }
.catalog-rating-clear:has(input:checked) { visibility: hidden; }
.catalog-rating-note { flex: 1 1 15rem; margin: 0; color: var(--comments-muted); font-size: .9rem; line-height: 1.5; }
.catalog-rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0; color: var(--comments-muted); font-size: .9rem; }
.catalog-rating-summary > strong { font-size: .95rem; }
.catalog-rating-summary .fa-star { color: var(--comments-star); }
.universal-comment-media-label, .webcam-comment-media-label { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; max-width: 100%; min-height: 2.75rem; color: var(--comments-muted); font-size: .9rem; cursor: pointer; }
.universal-comment-media-label > span, .webcam-comment-media-label > span { display: flex; align-items: center; gap: .5rem; }
.universal-comment-media-label input, .webcam-comment-media-label input { display: block; max-width: 100%; font-size: .9rem; }
.comments-enhanced .universal-comment-media-label input,
.comments-enhanced .webcam-comment-media-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.universal-comment-media-label:focus-within, .webcam-comment-media-label:focus-within { outline: 2px solid var(--comments-accent); outline-offset: 3px; border-radius: .3rem; }
.comment-media-count { color: var(--comments-accent); font-weight: 700; overflow-wrap: anywhere; }
.universal-comment-dev-toggle, .poi-comment-dev-toggle { display: inline-flex; align-items: center; gap: .35rem; color: var(--comments-muted); font-size: .9rem; }
.universal-comment-dev-toggle input, .poi-comment-dev-toggle input { position: static; opacity: 1; width: 1rem; height: 1rem; margin: 0; accent-color: #1670cc; }
.catalog-comments .catalog-comment-form button[type="submit"],
.catalog-comments .webcam-comment-reply-actions button[type="submit"] { display: inline-flex; justify-content: center; align-items: center; gap: .6rem; min-height: 2.9rem; padding: .65rem 1.1rem; border: 0; border-radius: .85rem; background: #1670cc; color: #fff; font-size: .95rem; font-weight: 700; }
.catalog-comments .catalog-comment-form button[type="submit"]:hover,
.catalog-comments .webcam-comment-reply-actions button[type="submit"]:hover { background: #0f5fae; }
.catalog-comments__pro-note, .universal-comments__empty, .universal-comments__status { margin: 1rem 0; padding: 1rem; border-radius: 1rem; background: var(--comments-soft); color: var(--comments-muted); font-size: 1rem; line-height: 1.5; }
.catalog-comments__pro-note, .universal-comments__empty { display: flex; align-items: center; gap: .75rem; }
.universal-comments__empty strong, .universal-comments__empty small { display: block; }
.universal-comments__empty strong { color: var(--comments-text); }
.universal-comments__empty small { font-size: .9rem; }
.universal-comments__status.is-error { color: var(--comments-danger); }
.catalog-comments__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: .85rem 0 .5rem; }
.catalog-comments__sort { display: flex; flex-wrap: wrap; gap: .3rem; }
.catalog-comments__sort button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; padding: .65rem 1rem; border: 0; border-radius: 2rem; background: var(--comments-soft); color: var(--comments-muted); font-size: .95rem; font-weight: 700; }
.catalog-comments__sort button[aria-pressed="true"] { background: #1670cc; color: #fff; }
.catalog-comments__total { color: var(--comments-muted); font-size: .9rem; }
.catalog-comments .poi-comments-list { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; background: transparent; list-style: none; }
.catalog-comments .poi-comment { position: relative; margin: 0; padding: 0; border: 1px solid var(--comments-border); border-radius: 1rem; background: var(--comments-surface); box-shadow: none; scroll-margin-top: 5rem; }
.catalog-comments .poi-comment-card { display: flex; gap: 1rem; align-items: flex-start; margin: 0; padding: .85rem 1rem; border: 0; border-radius: inherit; background: transparent; box-shadow: none; }
.poi-comment-avatar-wrap { width: 3.25rem; flex: 0 0 3.25rem; }
.poi-comment-avatar { width: 3.25rem; height: 3.25rem; border: 1px solid var(--comments-border); border-radius: 1.1rem; background-color: var(--comments-soft); background-position: center; background-size: cover; }
.poi-comment-avatar--service { display: grid; place-items: center; color: var(--comments-accent); }
.poi-comment-content { flex: 1; min-width: 0; }
.poi-comment-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; margin: 0 0 .3rem; }
.poi-comment-identity { min-width: 0; flex: 1; }
.poi-comment-author-row, .poi-comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem; min-width: 0; }
.poi-comment-author { color: var(--comments-text); font-size: 1rem; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.poi-comment-pro, .poi-comment-moderator, .poi-comment-avatar-tag { display: inline-block; padding: .15rem .45rem; border-radius: .5rem; font-size: .8rem; font-weight: 800; line-height: 1.2; }
.poi-comment-pro { color: var(--comments-accent); background: var(--comments-accent-soft); }
.poi-comment-moderator { color: #127459; background: #e0f5ef; }
body.dark .poi-comment-moderator { color: #79dfc6; background: #24433f; }
.poi-comment-avatar-tag { color: #805600; background: #fff1c7; }
.poi-comment-badges { display: inline-flex; gap: .35rem; }
.poi-comment-badge { color: var(--comments-accent); }
.poi-comment-badge__icon { display: block; width: 1rem; height: 1rem; }
.poi-comment-meta { margin-top: .2rem; color: var(--comments-muted); }
.poi-comment-time, .poi-comment-context { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: inherit; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.poi-comment-time .fa-clock { display: none; }
.poi-comment-rating { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--comments-star); font-size: .95rem; }
.poi-comment-rating > span { display: inline-flex; gap: .15rem; }
.poi-comment-rating .far { color: var(--comments-muted); }
.poi-comment-rating strong { color: var(--comments-text); font-size: .9rem; }
.poi-comment-body { color: var(--comments-body); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.poi-comment-body a { color: var(--comments-accent); font-weight: 700; }
.poi-comment-body--hidden { color: var(--comments-muted); font-style: italic; }
.poi-comment-menu { position: relative; flex: 0 0 2.75rem; margin: -.45rem -.65rem 0 0; }
.poi-comment-menu > summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .7rem; color: var(--comments-muted); list-style: none; }
.poi-comment-menu > summary::-webkit-details-marker, .poi-comment-thread > summary::-webkit-details-marker { display: none; }
.poi-comment-menu[open] { z-index: 5; }
.poi-comment-menu[open] > summary, .poi-comment-menu > summary:hover { background: var(--comments-soft); }
.poi-comment-menu__panel { position: absolute; top: 100%; right: 0; min-width: 10rem; padding: .3rem; border: 1px solid var(--comments-border); border-radius: .8rem; background: var(--comments-soft); box-shadow: 0 8px 24px #0002; }
.catalog-comments .webcam-comment-delete { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: .65rem .85rem; border: 0; border-radius: .5rem; background: transparent; color: var(--comments-danger); font-size: .95rem; text-align: left; }
.catalog-comments .webcam-comment-delete:hover { background: var(--comments-surface); }
.poi-comment-actions, .webcam-comment-votes { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.poi-comment-actions { margin-top: .25rem; gap: .2rem .55rem; }
.catalog-comments :is(.webcam-comment-vote, .webcam-comment-reply, .webcam-comment-share, .webcam-comment-reply-cancel) { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .4rem .55rem; border: 0; border-radius: 1.5rem; background: transparent; color: var(--comments-muted); font-size: .95rem; font-weight: 700; text-decoration: none; }
.catalog-comments .webcam-comment-vote--up { color: var(--comments-accent); background: var(--comments-accent-soft); }
.catalog-comments .webcam-comment-vote.is-active { color: #fff; background: #1670cc; }
.catalog-comments :is(.webcam-comment-reply, .webcam-comment-share, .webcam-comment-reply-cancel):hover { color: var(--comments-accent); background: var(--comments-accent-soft); }
.poi-comment-thread { margin: 0 1rem .6rem 5.25rem; }
.poi-comment-thread > summary { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; color: var(--comments-accent); font-size: .95rem; font-weight: 700; list-style: none; }
.poi-comment-thread:not([open]) > summary i { transform: rotate(-90deg); }
.poi-comment-children { position: relative; margin: 0; padding: 0; }
.poi-comment-children::before { content: ''; position: absolute; left: -1.1rem; top: -1.5rem; bottom: 1.75rem; width: 1px; background: var(--comments-border); }
.catalog-comments .poi-comment-children .poi-comment { background: var(--comments-soft); border: 0; }
.poi-comment-children .poi-comment::before { content: ''; position: absolute; top: 1.2rem; left: -1.1rem; width: .9rem; height: .8rem; border-bottom: 1px solid var(--comments-border); border-left: 1px solid var(--comments-border); border-radius: 0 0 0 .6rem; }
.catalog-comments .poi-comment-children .poi-comment-card { padding: .65rem; gap: .75rem; }
.poi-comment-children .poi-comment-avatar-wrap { width: 2.65rem; flex-basis: 2.65rem; }
.poi-comment-children .poi-comment-avatar { width: 2.65rem; height: 2.65rem; border-radius: 1rem; }
.webcam-comment-reply-form { margin-top: .65rem; padding: .8rem 0; }
.webcam-comment-reply-form__inner { display: grid; gap: .65rem; min-width: 0; }
.webcam-comment-reply-form__title { display: flex; align-items: center; gap: .5rem; color: var(--comments-muted); font-size: .9rem; overflow-wrap: anywhere; }
.webcam-comment-reply-form .field { margin: 0; }
.webcam-comment-reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.poi-comment-media { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; max-width: 100%; margin: .55rem 0 .1rem; }
.poi-comment-media__link { display: block; width: 10rem; max-width: calc(50% - .3rem); overflow: hidden; border-radius: .6rem; background: var(--comments-soft); }
.poi-comment-media__image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.poi-comment-media__video { display: block; width: 22rem; max-width: 100%; aspect-ratio: 16 / 9; border-radius: .6rem; background: var(--comments-soft); }
.universal-comments__more { margin-top: .7rem; }
.universal-comments__more button { display: flex; justify-content: center; align-items: center; gap: .7rem; width: 100%; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--comments-border); border-radius: .7rem; background: var(--comments-surface); color: var(--comments-muted); font-size: .95rem; font-weight: 700; }
.universal-comment-form.is-busy { opacity: .65; }
@media (max-width: 900px) {
    .universal-comment-form__footer { align-items: center; }
    .universal-comment-media-label { flex: 1 1 12rem; }
}
@media (max-width: 600px) {
    .catalog-comments { margin-top: 1.5rem; }
    .catalog-comment-form { padding: .75rem; gap: .65rem; grid-template-columns: 2.25rem minmax(0, 1fr); }
    .universal-comment-form__avatar { width: 2.25rem; height: 2.25rem; border-radius: .75rem; }
    .catalog-comment-form > textarea { min-height: 5rem; }
    .universal-comment-form__footer { grid-column: 1 / -1; }
    .universal-comment-form__actions { justify-content: flex-end; flex: 1 1 auto; }
    .catalog-comments__total { display: none; }
    .catalog-comments__sort { width: 100%; }
    .catalog-comments__sort button { flex: 1; padding: .6rem .65rem; gap: .4rem; }
    .catalog-comments .poi-comment-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .5rem .65rem; padding: .75rem; }
    .poi-comment-avatar-wrap { grid-row: 1; grid-column: 1; width: 2.5rem; }
    .poi-comment-avatar { width: 2.5rem; height: 2.5rem; border-radius: .85rem; }
    .poi-comment-content { display: contents; }
    .poi-comment-top { grid-row: 1; grid-column: 2; margin: 0 0 .25rem; }
    .poi-comment-content > :not(.poi-comment-top) { grid-column: 1 / -1; }
    .poi-comment-meta { gap: .3rem .5rem; }
    .poi-comment-time { font-size: .9rem; }
    .poi-comment-actions { gap: .15rem .3rem; margin-top: 0; }
    .catalog-comments :is(.webcam-comment-vote, .webcam-comment-reply, .webcam-comment-share) { padding: .4rem .45rem; }
    .poi-comment-thread { margin: 0 .55rem .55rem 1.5rem; }
    .poi-comment-children::before { left: -.85rem; }
    .poi-comment-children .poi-comment::before { left: -.85rem; width: .7rem; }
    .catalog-comments .poi-comment-children .poi-comment-card { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .4rem .55rem; }
    .poi-comment-children .poi-comment-avatar-wrap, .poi-comment-children .poi-comment-avatar { width: 2.25rem; height: 2.25rem; }
    .poi-comment-thread .poi-comment-thread { margin-left: .7rem; }
}
@media (max-width: 360px) {
    .catalog-comments__sort button { flex-basis: 100%; }
    .universal-comment-form__actions { width: 100%; }
    .catalog-comment-form button[type="submit"] { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-comments *, .catalog-comments *::before { scroll-behavior: auto !important; transition: none !important; }
}
.webcam-photo-modal-open {
    overflow: hidden;
}

.webcam-photo-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(23, 32, 51, 0.9);
    backdrop-filter: blur(6px);
}

.webcam-photo-modal__frame {
    max-width: min(92vw, 72.5rem);
    max-height: 86vh;
    padding: clamp(0.5rem, 1.2vw, 0.9rem);
    border-radius: 1rem;
    background: #f1f6fb;
    box-shadow: 0 30px 90px rgba(10, 20, 35, 0.42);
}

.webcam-photo-modal__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(86vh - 1.8rem);
    border-radius: 0.75rem;
    object-fit: contain;
}

.webcam-photo-modal__close {
    position: absolute;
    top: clamp(0.9rem, 2vw, 1.5rem);
    right: clamp(0.9rem, 2vw, 1.5rem);
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    background: #29323d;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 1.65rem;
    line-height: 1;
}

.webcam-photo-modal__close:hover,
.webcam-photo-modal__close:focus-visible {
    background: #354252;
}

.webcam-photo-modal__close:focus-visible {
    outline: 3px solid rgba(139, 195, 255, 0.7);
    outline-offset: 2px;
}

body.dark .webcam-photo-modal__frame {
    background: #29323d;
}

/* Override older page and global dark-theme selectors. */
body.dark .catalog-comments .poi-comment-top { background: transparent; }
body.dark .catalog-comments .poi-comment { background: var(--comments-surface); box-shadow: none; }
body.dark .catalog-comments .poi-comment-children .poi-comment { background: var(--comments-soft); }
body.dark .catalog-comments .poi-comment-time { color: var(--comments-muted); }
.catalog-comments .poi-comments-list .poi-comments-list { margin: 0; }