/************************************************************************
Customer Reviews (/reviews/, template page-reviews.php)
Loads on top of the global bundle plus assets/css/woocommerce/reviews.css
and PhotoSwipe's CSS (see toolcurve_theme_style) — the review components
are styled there; this file only adds the page shell and the per-review
product-context chip that exists on the all-reviews page alone.
/************************************************************************/

#tc-reviews-page {
    padding: var(--space-8) var(--gutter);
}

.tc-reviews-page-header {
    max-width: 960px;
    margin: 0 auto var(--space-6);
}

.tc-reviews-page-header h1 {
    margin: 0;
    font-size: var(--fs-26);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--text-heading);
}

.tc-reviews-page-header p {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-14);
    color: var(--text-muted);
}

#tc-reviews-page .tc-reviews {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--pad-card-lg);
    background-color: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hairline);
}

/* ── tc-select: button-triggered popover dropdowns (sort + photos) ── */

/* One control height across the whole row: search input, both dropdown
   triggers, and the Search button all sit at --control-h. */
#tc-reviews-page .tc-reviews-search input[type="search"],
#tc-reviews-page .tc-reviews-search .tc-btn {
    height: var(--control-h);
}

.tc-select {
    position: relative;
}

.tc-select-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-h);
    padding: 0 14px 0 16px;
    background-color: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    font-size: var(--fs-14);
    color: var(--text-body);
    white-space: nowrap;
    cursor: pointer;
}

.tc-select-btn:hover {
    border-color: var(--text-muted);
}

.tc-select-chev {
    width: 12px;
    height: 12px;
    fill: var(--text-muted);
    transition: transform 120ms ease;
}

.tc-select.is-open .tc-select-chev {
    transform: rotate(180deg);
}

.tc-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: max(100%, 180px);
    width: max-content;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
}

.tc-select.is-open .tc-select-menu {
    display: block;
}

.tc-select-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: var(--fs-14);
    color: var(--text-body);
    text-decoration: none;
}

/* Orange is the primary action colour — hover gets the faintest tint,
   the current selection the next step up. */
.tc-select-menu a:hover {
    background-color: var(--orange-050);
    color: var(--text-heading);
}

.tc-select-menu a.is-selected {
    background-color: var(--orange-100);
    color: var(--text-heading);
}

/* ── "Review of: [product]" chip ── */
.tc-review-product {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    background-color: var(--surface-1);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.tc-review-product:hover .tc-review-product-name {
    text-decoration: underline;
}

.tc-review-product-img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-xs);
    object-fit: cover;
}

.tc-review-product-text {
    display: flex;
    flex-direction: column;
}

.tc-review-product-label {
    font-size: var(--fs-12);
    color: var(--text-muted);
}

.tc-review-product-name {
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}

/* The chip and the voting row are both inline-flex — force Helpful? onto
   its own line beneath the chip, slightly tighter than on product pages. */
.tc-reviews-all .tc-review .cr-voting-cont-uni {
    display: flex;
    margin-top: var(--space-2);
}

@media all and (min-width: 768px) {
    #tc-reviews-page {
        padding: var(--space-8) var(--gutter-lg);
    }
}