/*
 * Darealmop_StorefrontReviews - SKELETON ONLY.
 *
 * The only visual surface in this module is the "verified buyer" badge. Every
 * property below is an unset --dm-storefront-reviews-* token with NO fallback:
 * the theme supplies the colour / font / shape vocabulary, the skeleton only
 * reserves the structural hooks. Nothing here ships a colour, font, shadow or
 * border literal.
 *
 * The honeypot wrapper is positioned off-screen (geometry only, no cosmetics)
 * so real users never see or focus the hidden anti-bot field while bots that
 * fill every input still trip it.
 */

/* ----------------------------------------------------------------------
 * Verified-buyer badge - structural hooks, theme paints the rest.
 * -------------------------------------------------------------------- */
.dm-storefront-reviews-verified-badge {
    display: var(--dm-storefront-reviews-badge-display);
    align-items: var(--dm-storefront-reviews-badge-align);
    gap: var(--dm-storefront-reviews-badge-gap);
    padding: var(--dm-storefront-reviews-badge-padding);
    border: var(--dm-storefront-reviews-badge-border);
    border-radius: var(--dm-storefront-reviews-badge-radius);
    background: var(--dm-storefront-reviews-badge-bg);
    color: var(--dm-storefront-reviews-badge-color);
    font-size: var(--dm-storefront-reviews-badge-font-size);
    font-weight: var(--dm-storefront-reviews-badge-font-weight);
    line-height: var(--dm-storefront-reviews-badge-line-height);
}

.dm-storefront-reviews-verified-badge__label {
    letter-spacing: var(--dm-storefront-reviews-badge-letter-spacing);
    text-transform: var(--dm-storefront-reviews-badge-text-transform);
}

/* ----------------------------------------------------------------------
 * Honeypot - geometry only. Visually hidden but still in the DOM so a bot
 * that fills every field trips SpamGuardPlugin. Not display:none (some bots
 * skip hidden inputs); pushed off-screen and untabbable instead.
 * -------------------------------------------------------------------- */
.dm-storefront-reviews-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------------------
 * Rating stars (summary + per review).
 *
 * DELIBERATE EXCEPTION to the skeleton rule: stars are the headline visual of a
 * reviews module, so - like Darealmop_AgeGate's fail-closed backdrop - they ship
 * a usable DEFAULT (a unicode star track with a clipped fill) instead of being
 * invisible until themed. The theme still overrides every colour/size via the
 * --dm-storefront-reviews-stars-* tokens, or replaces the glyph by restyling the
 * ::before content / using a background image. The fill width is set inline as a
 * 0-100 percent (== Magento's rating percent), clipping the filled stars over
 * the empty track.
 * -------------------------------------------------------------------- */
.dm-storefront-reviews-stars {
    display: inline-flex;
    align-items: center;
    font-size: var(--dm-storefront-reviews-stars-size, 1em);
    line-height: 1;
}
.dm-storefront-reviews-stars__track {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.dm-storefront-reviews-stars__track::before {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: var(--dm-storefront-reviews-stars-letter-spacing, .08em);
    color: var(--dm-storefront-reviews-stars-empty-color, rgba(0, 0, 0, .2));
}
.dm-storefront-reviews-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* overridden inline with the rating percent */
    overflow: hidden;
    white-space: nowrap;
}
.dm-storefront-reviews-stars__fill::before {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: var(--dm-storefront-reviews-stars-letter-spacing, .08em);
    color: var(--dm-storefront-reviews-stars-color);
}
.dm-storefront-reviews-stars__count {
    margin-left: var(--dm-storefront-reviews-stars-count-gap, .4em);
    font-size: var(--dm-storefront-reviews-stars-count-size, .85em);
    color: var(--dm-storefront-reviews-stars-count-color, inherit);
}

/* ----------------------------------------------------------------------
 * Review list + controls - STRUCTURE only (layout + spacing tokens). These
 * defaults keep the list usable and verifiable out of the box; the theme paints
 * colours / borders / typography by overriding the tokens.
 * -------------------------------------------------------------------- */
.dm-storefront-reviews {
    margin: var(--dm-storefront-reviews-margin, 1.5rem 0);
}
.dm-storefront-reviews__filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-storefront-reviews-filter-gap, .5rem);
    margin-bottom: var(--dm-storefront-reviews-controls-gap, 1rem);
}
.dm-storefront-reviews__filter-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: var(--dm-storefront-reviews-filter-btn-padding, .25em .6em);
    border: var(--dm-storefront-reviews-filter-btn-border, 1px solid currentColor);
    border-radius: var(--dm-storefront-reviews-filter-btn-radius, 999px);
    background: var(--dm-storefront-reviews-filter-btn-bg, transparent);
    color: inherit;
    font: inherit;
}
.dm-storefront-reviews__filter-btn.is-active {
    background: var(--dm-storefront-reviews-filter-btn-active-bg, currentColor);
    color: var(--dm-storefront-reviews-filter-btn-active-color);
}
.dm-storefront-reviews__sort {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-bottom: var(--dm-storefront-reviews-controls-gap, 1rem);
}
.dm-storefront-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dm-storefront-reviews__item {
    padding: var(--dm-storefront-reviews-item-padding, 1rem 0);
    border-bottom: var(--dm-storefront-reviews-item-border, 1px solid rgba(0, 0, 0, .08));
}
.dm-storefront-reviews__item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dm-storefront-reviews-item-head-gap, .5rem);
    margin-bottom: var(--dm-storefront-reviews-item-head-mb, .35rem);
}
.dm-storefront-reviews__author {
    font-weight: var(--dm-storefront-reviews-author-weight, 600);
}
.dm-storefront-reviews__date {
    margin-left: auto;
    font-size: var(--dm-storefront-reviews-date-size, .85em);
    opacity: var(--dm-storefront-reviews-date-opacity, .7);
}
.dm-storefront-reviews__title {
    margin: 0 0 .25rem;
    font-weight: var(--dm-storefront-reviews-title-weight, 600);
}
.dm-storefront-reviews__body {
    margin: 0;
}
.dm-storefront-reviews__more {
    cursor: pointer;
    margin-top: var(--dm-storefront-reviews-more-mt, 1rem);
    padding: var(--dm-storefront-reviews-more-padding, .5em 1.2em);
    border: var(--dm-storefront-reviews-more-border, 1px solid currentColor);
    border-radius: var(--dm-storefront-reviews-more-radius, 4px);
    background: var(--dm-storefront-reviews-more-bg, transparent);
    color: inherit;
    font: inherit;
}
.dm-storefront-reviews__empty {
    margin: var(--dm-storefront-reviews-empty-margin, 1rem 0);
    opacity: var(--dm-storefront-reviews-empty-opacity, .7);
}

/* [hidden] must win even though the controls above set display (the
 * Darealmop_AgeGate lesson: an explicit display overrides the UA [hidden]). */
.dm-storefront-reviews__more[hidden],
.dm-storefront-reviews__empty[hidden] {
    display: none !important;
}

/* ── "was this helpful?" votes ─────────────────────────────────────────── */
.dm-storefront-reviews__helpful {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dm-storefront-reviews-helpful-gap, .5rem);
    margin-top: var(--dm-storefront-reviews-helpful-mt, .5rem);
    font-size: var(--dm-storefront-reviews-helpful-size, .9em);
}
.dm-storefront-reviews__helpful-prompt {
    opacity: var(--dm-storefront-reviews-helpful-prompt-opacity, .8);
}
.dm-storefront-reviews__helpful-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: var(--dm-storefront-reviews-helpful-btn-padding, .15em .55em);
    border: var(--dm-storefront-reviews-helpful-btn-border, 1px solid currentColor);
    border-radius: var(--dm-storefront-reviews-helpful-btn-radius, 999px);
    background: var(--dm-storefront-reviews-helpful-btn-bg, transparent);
    color: inherit;
    font: inherit;
}
.dm-storefront-reviews__helpful-count {
    font-variant-numeric: tabular-nums;
}
.dm-storefront-reviews__helpful.is-voted .dm-storefront-reviews__helpful-btn {
    cursor: default;
    pointer-events: none;
    opacity: var(--dm-storefront-reviews-helpful-voted-opacity, .55);
}

/* ── review photos ─────────────────────────────────────────────────────── */
.dm-storefront-reviews__photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-storefront-reviews-photos-gap, .5rem);
    margin-top: var(--dm-storefront-reviews-photos-mt, .5rem);
}
.dm-storefront-reviews__photo {
    display: inline-block;
    line-height: 0;
}
.dm-storefront-reviews__photo img {
    width: var(--dm-storefront-reviews-photo-size, 64px);
    height: var(--dm-storefront-reviews-photo-size, 64px);
    object-fit: cover;
    border-radius: var(--dm-storefront-reviews-photo-radius, 4px);
    border: var(--dm-storefront-reviews-photo-border, 1px solid rgba(0, 0, 0, .1));
}

/* ── write-a-review form (structure; theme paints) ─────────────────────── */
.dm-storefront-reviews-form {
    margin-top: var(--dm-storefront-reviews-form-mt, 1.5rem);
}
.dm-storefront-reviews-form__toggle {
    cursor: pointer;
    font-weight: var(--dm-storefront-reviews-form-toggle-weight, 600);
}
.dm-storefront-reviews-form__body {
    display: flex;
    flex-direction: column;
    gap: var(--dm-storefront-reviews-form-gap, .75rem);
    margin-top: var(--dm-storefront-reviews-form-body-mt, 1rem);
    max-width: var(--dm-storefront-reviews-form-maxw, 32rem);
}
.dm-storefront-reviews-form__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.dm-storefront-reviews-form__rating {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
}
.dm-storefront-reviews-form__star {
    display: inline-flex;
    align-items: center;
    gap: .25em;
}
.dm-storefront-reviews-form__field input,
.dm-storefront-reviews-form__field textarea {
    font: inherit;
    padding: var(--dm-storefront-reviews-form-input-padding, .4em .6em);
    border: var(--dm-storefront-reviews-form-input-border, 1px solid rgba(0, 0, 0, .2));
    border-radius: var(--dm-storefront-reviews-form-input-radius, 4px);
}
.dm-storefront-reviews-form__submit {
    align-self: flex-start;
    cursor: pointer;
    font: inherit;
    padding: var(--dm-storefront-reviews-form-submit-padding, .5em 1.2em);
    border: var(--dm-storefront-reviews-form-submit-border, 1px solid currentColor);
    border-radius: var(--dm-storefront-reviews-form-submit-radius, 4px);
    background: var(--dm-storefront-reviews-form-submit-bg, transparent);
    color: inherit;
}

/* ----------------------------------------------------------------------
 * Account pages ("Products to review" + "My Reviews") - STRUCTURE only:
 * layout + spacing tokens, no colour/border literals. The theme paints the
 * status pills via the --dm-storefront-reviews-account-status-* tokens (no
 * fallback: colour is the theme's job), so nothing here ships a colour.
 * -------------------------------------------------------------------- */
.dm-storefront-reviews-account__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dm-storefront-reviews-account__item {
    padding: var(--dm-storefront-reviews-account-item-padding, 1rem 0);
    border-bottom: var(--dm-storefront-reviews-account-item-border, 1px solid currentColor);
}
.dm-storefront-reviews-account__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dm-storefront-reviews-account-head-gap, .5rem);
    margin-bottom: var(--dm-storefront-reviews-account-head-mb, .35rem);
}
.dm-storefront-reviews-account__product {
    font-weight: var(--dm-storefront-reviews-account-product-weight, 600);
    color: inherit;
}
.dm-storefront-reviews-account__status {
    padding: var(--dm-storefront-reviews-account-status-padding, .1em .55em);
    border-radius: var(--dm-storefront-reviews-account-status-radius, 999px);
    font-size: var(--dm-storefront-reviews-account-status-size, .8em);
    background: var(--dm-storefront-reviews-account-status-bg);
    color: var(--dm-storefront-reviews-account-status-color);
}
.dm-storefront-reviews-account__status--approved {
    background: var(--dm-storefront-reviews-account-status-approved-bg);
    color: var(--dm-storefront-reviews-account-status-approved-color);
}
.dm-storefront-reviews-account__status--pending {
    background: var(--dm-storefront-reviews-account-status-pending-bg);
    color: var(--dm-storefront-reviews-account-status-pending-color);
}
.dm-storefront-reviews-account__status--not-approved {
    background: var(--dm-storefront-reviews-account-status-rejected-bg);
    color: var(--dm-storefront-reviews-account-status-rejected-color);
}
.dm-storefront-reviews-account__title {
    margin: .25rem 0 0;
    font-weight: var(--dm-storefront-reviews-account-title-weight, 600);
}
.dm-storefront-reviews-account__body {
    margin: .25rem 0 0;
}
.dm-storefront-reviews-account__date {
    display: block;
    margin-top: .25rem;
    font-size: var(--dm-storefront-reviews-account-date-size, .85em);
    opacity: var(--dm-storefront-reviews-account-date-opacity, .7);
}
.dm-storefront-reviews-account__empty {
    margin: var(--dm-storefront-reviews-account-empty-margin, 1rem 0);
    opacity: var(--dm-storefront-reviews-account-empty-opacity, .7);
}