/* Product review component - Máy Trường Phát */
/* Product reviews */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pd-reviews {
    margin: 20px 0px;
    color: #35271f;
}

.pd-reviews__heading h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: #4b3528;
    font-size: 18px;
    text-transform: uppercase;
}

.pd-reviews__heading h2 span {
    color: var(--pd-brown-soft);
    font-size: 16px;
}

.pd-review-alert,
.pd-review-status {
    margin: 10px 0px;
    border-radius: 8px;
    font-size: 13px;
}

.pd-review-alert {
    padding: 11px 14px;
}

.pd-review-alert--success {
    color: #17612e;
    background: #edf8ef;
    border: 1px solid #bfe1c6;
}

.pd-review-alert--error {
    color: #a32720;
    background: #fff0ee;
    border: 1px solid #efc4bf;
}

.pd-review-status:not(:empty) {
    padding: 10px 12px;
    color: #755121;
    background: #fff7e9;
    border: 1px solid #ead8bb;
}

.pd-review-summary {
    display: grid;
    grid-template-columns: 145px 220px minmax(280px, 1fr) 170px;
    min-height: 142px;
    border: 1px solid #dfd5c8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(51, 34, 22, .035);
}

.pd-review-score,
.pd-review-bars,
.pd-review-media-strip,
.pd-review-summary__actions {
    min-width: 0;
    padding: 17px 18px;
}

.pd-review-score,
.pd-review-bars,
.pd-review-media-strip {
    border-right: 1px solid #eee5d9;
}

.pd-review-score {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.pd-review-score strong {
    color: #143d22;
    font: 700 38px/1 Georgia, serif;
}

.pd-review-score > div:first-child span {
    color: #5f574e;
    font-size: 17px;
}

.pd-review-score small {
    margin-top: 5px;
    color: #6d655e;
    font-size: 11px;
}

.pd-review-stars,
.pd-review-card__stars {
    display: flex;
    gap: 2px;
    color: #ddd5ca;
}

.pd-review-stars {
    margin-top: 5px;
    font-size: 19px;
}

.pd-review-stars .is-filled,
.pd-review-card__stars .is-filled {
    color: #f0a500;
}

.pd-review-bars {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.pd-review-bar {
    display: grid;
    grid-template-columns: 38px 1fr 22px;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}

.pd-review-bar i {
    height: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: #e7e4df;
}

.pd-review-bar b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #eda600;
}

.pd-review-bar small {
    color: #777069;
}

.pd-review-media-strip strong {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
}

.pd-review-media-strip p {
    margin: 21px 0 0;
    color: #8a8178;
    font-size: 12px;
}

.pd-review-media-strip__list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pd-review-media-strip__list button,
.pd-review-card__media button {
    flex: 0 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e5dacb;
    border-radius: 6px;
    background: #f7f3ed;
    cursor: pointer;
}

.pd-review-media-strip__list button {
    width: 68px;
    height: 68px;
}

.pd-review-media-strip__list img,
.pd-review-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-review-summary__actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pd-review-write,
.pd-review-all,
.pd-review-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #103c21;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.pd-review-write {
    gap: 7px;
    text-align: center;
}

.pd-review-sort select {
    width: 100%;
    height: 36px;
    padding: 0 30px 0 11px;
    border: 1px solid #e1dbd2;
    border-radius: 5px;
    color: #4d4842;
    background: #fff;
    font-size: 11px;
}

.pd-review-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.pd-review-card {
    display: flex;
    min-width: 0;
    min-height: 248px;
    padding: 13px;
    border: 1px solid #e8e1d8;
    border-radius: 8px;
    background: #fff;
    flex-direction: column;
}

.pd-review-card header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.pd-review-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #785126;
    font-size: 12px;
    font-weight: 800;
}

.pd-review-card header strong {
    display: inline;
    font-size: 11px;
}

.pd-review-card header em {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 5px;
    border-radius: 3px;
    color: #24743a;
    background: #e8f6eb;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
}

.pd-review-card time {
    align-self: start;
    color: #8a837b;
    font-size: 8px;
}

.pd-review-card__stars {
    margin-top: 9px;
    font-size: 12px;
}

.pd-review-card h3 {
    margin: 7px 0 5px;
    font-size: 12px;
    line-height: 1.35;
}

.pd-review-card > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #686159;
    font-size: 10px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.pd-review-card__media {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    overflow-x: auto;
}

.pd-review-card__media button {
    width: 44px;
    height: 44px;
}

.pd-review-card__product {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    color: #6f665d;
    font-size: 9px;
}

.pd-review-card__product img,
.pd-review-card__product .pd-img-placeholder {
    width: 30px;
    height: 30px;
    min-height: 0;
    border-radius: 4px;
    object-fit: cover;
}

.pd-review-card footer {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #f0e9e1;
}

.pd-review-card footer button {
    padding: 0;
    border: 0;
    color: #766e66;
    background: transparent;
    font-size: 9px;
    cursor: pointer;
}

.pd-review-card footer button.is-active {
    color: var(--pd-green);
    font-weight: 700;
}

.pd-review-empty {
    margin-top: 12px;
    padding: 32px 20px;
    border: 1px dashed #ddcfbd;
    border-radius: 8px;
    color: #746a60;
    text-align: center;
    background: #fffdf9;
}

.pd-review-empty[hidden] {
    display: none;
}

.pd-review-empty strong {
    display: block;
    margin-bottom: 6px;
    color: #3f3027;
}

.pd-review-empty p {
    margin: 0;
    font-size: 12px;
}

.pd-review-all {
    min-width: 190px;
    min-height: 34px;
    margin: 12px auto 0;
    border: 1px solid #d8cbbb;
    color: #4a382c;
    background: #fff;
    font-size: 10px;
}

.pd-review-all[hidden] {
    display: none;
}

.pd-review-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    padding: 20px;
    place-items: center;
}

.pd-review-modal[hidden] {
    display: none;
}

.pd-review-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 17, 12, .68);
}

.pd-review-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(580px, 100%);
    max-height: calc(100vh - 40px);
    padding: 26px;
    overflow-y: auto;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .24);
}

.pd-review-modal__dialog h2 {
    margin: 0 35px 7px 0;
    color: #3c2a20;
}

.pd-review-modal__dialog > p {
    margin: 0 0 20px;
    color: #736a62;
    font-size: 13px;
}

.pd-review-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #57463a;
    background: #f3eee8;
    font-size: 24px;
    cursor: pointer;
}

.pd-review-modal form > label,
.pd-review-upload {
    display: grid;
    gap: 7px;
    margin-top: 15px;
    color: #49392e;
    font-size: 12px;
    font-weight: 700;
}

.pd-review-modal input[type="text"],
.pd-review-modal textarea,
.pd-review-modal input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dfd4c7;
    border-radius: 7px;
    outline: 0;
    background: #fff;
    font: inherit;
}

.pd-review-modal input[type="text"]:focus,
.pd-review-modal textarea:focus {
    border-color: var(--pd-green);
    box-shadow: 0 0 0 3px rgba(15, 74, 39, .09);
}

.pd-review-form__stars {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.pd-review-form__stars legend {
    margin-bottom: 6px;
    color: #49392e;
    font-size: 12px;
    font-weight: 700;
}

.pd-review-form__stars input {
    position: absolute;
    opacity: 0;
}

.pd-review-form__stars label {
    color: #d9d2c9;
    font-size: 30px;
    cursor: pointer;
}

.pd-review-form__stars input:checked ~ label,
.pd-review-form__stars label:hover,
.pd-review-form__stars label:hover ~ label {
    color: #f0a500;
}

.pd-review-form__current {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    flex-wrap: wrap;
    font-size: 11px;
}

.pd-review-form__current span,
.pd-review-form__current small {
    flex-basis: 100%;
}

.pd-review-form__current img,
.pd-review-form__previews img {
    width: 58px;
    height: 58px;
    border: 1px solid #e2d7ca;
    border-radius: 6px;
    object-fit: cover;
}

.pd-review-form__previews {
    display: flex;
    gap: 7px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pd-review-form__message {
    min-height: 18px;
    margin-top: 12px;
    color: #a32720;
    font-size: 12px;
}

.pd-review-form__message.is-success {
    color: #17612e;
}

.pd-review-form__submit {
    width: 100%;
    margin-top: 8px;
}

@media (max-width: 980px) {
    .pd-review-summary {
        grid-template-columns: 150px 1fr 180px;
    }

    .pd-review-media-strip {
        grid-column: 1 / -1;
        grid-row: 2;
        border-top: 1px solid #eee5d9;
        border-right: 0;
    }

    .pd-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .pd-reviews {
        margin-top: 26px;
    }

    .pd-review-summary {
        grid-template-columns: 1fr;
    }

    .pd-review-score,
    .pd-review-bars,
    .pd-review-media-strip,
    .pd-review-summary__actions {
        grid-column: auto;
        grid-row: auto;
        border-right: 0;
        border-bottom: 1px solid #eee5d9;
    }

    .pd-review-summary__actions {
        gap: 10px;
        border-bottom: 0;
    }

    .pd-review-grid {
        grid-template-columns: 1fr;
    }

    .pd-review-card {
        min-height: 220px;
    }

    .pd-review-modal {
        padding: 10px;
    }

    .pd-review-modal__dialog {
        max-height: calc(100vh - 20px);
        padding: 22px 18px;
    }
}

/* Align the review experience with the navy/blue storefront theme. */
.pd-reviews {
    --review-navy: var(--mtp-navy, #06376f);
    --review-navy-deep: var(--mtp-navy-deep, #03295b);
    --review-blue: var(--mtp-blue, #0868b9);
    --review-orange: var(--mtp-orange, #fa4d12);
    --review-ink: var(--mtp-ink, #142943);
    --review-muted: var(--mtp-muted, #64748b);
    --review-line: var(--mtp-line, #e1e9f1);
    --review-bg: var(--mtp-bg, #f6f9fc);
    margin: 28px 0 8px;
    color: var(--review-ink);
}

.pd-reviews__heading {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 14px;
    padding: 0 16px;
    border-left: 4px solid var(--review-orange);
    border-radius: 0 7px 7px 0;
    background: linear-gradient(90deg, #edf6ff, transparent);
}

.pd-reviews__heading h2 {
    margin: 0;
    color: var(--review-navy);
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.pd-reviews__heading h2 span {
    color: var(--review-orange);
    font-size: 14px;
}

.pd-review-summary {
    grid-template-columns: 175px minmax(220px, .8fr) minmax(220px, 1fr) 180px;
    overflow: hidden;
    min-height: 154px;
    border-color: var(--review-line);
    border-radius: var(--mtp-radius, 9px);
    background: #fff;
    box-shadow: var(--mtp-shadow, 0 4px 16px rgba(9, 45, 83, .08));
}

.pd-review-score,
.pd-review-bars,
.pd-review-media-strip {
    border-color: var(--review-line);
}

.pd-review-score,
.pd-review-bars,
.pd-review-media-strip,
.pd-review-summary__actions {
    padding: 20px;
}

.pd-review-score {
    background: linear-gradient(145deg, var(--review-navy-deep), var(--review-blue));
    color: #fff;
}

.pd-review-score strong {
    color: #fff;
    font-family: var(--font-primary, Arial, sans-serif);
    font-size: 40px;
}

.pd-review-score > div:first-child span,
.pd-review-score small {
    color: rgba(255, 255, 255, .8);
}

.pd-review-bars { gap: 10px; }
.pd-review-bar { grid-template-columns: 41px 1fr 24px; color: var(--review-ink); font-size: 11px; }
.pd-review-bar i { height: 7px; background: #e9f0f7; }
.pd-review-bar b { background: var(--review-orange); }
.pd-review-bar small { color: var(--review-muted); }

.pd-review-media-strip strong { color: var(--review-navy); font-size: 13px; }
.pd-review-media-strip p { margin-top: 24px; color: var(--review-muted); font-size: 12px; }
.pd-review-media-strip__list { gap: 8px; }
.pd-review-media-strip__list button,
.pd-review-card__media button {
    border-color: #d5e3f0;
    border-radius: 6px;
    background: #f4f8fc;
}
.pd-review-media-strip__list button:hover,
.pd-review-card__media button:hover { border-color: var(--review-blue); }

.pd-review-summary__actions { justify-content: center; gap: 12px; background: #f8fbfe; }
.pd-review-write,
.pd-review-form__submit {
    border-radius: 5px;
    background: var(--review-orange);
    box-shadow: 0 4px 10px rgba(250, 77, 18, .18);
    font-size: 13px;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.pd-review-write:hover,
.pd-review-form__submit:hover {
    background: #e7440c;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(250, 77, 18, .24);
}
.pd-review-sort select {
    height: 38px;
    border-color: #cdddea;
    border-radius: 5px;
    color: var(--review-ink);
    font-size: 12px;
}
.pd-review-sort select:focus { border-color: var(--review-blue); outline: 2px solid rgba(8, 104, 185, .14); outline-offset: 1px; }

.pd-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.pd-review-card {
    min-height: 235px;
    padding: 17px;
    border-color: var(--review-line);
    border-radius: var(--mtp-radius, 9px);
    box-shadow: 0 2px 8px rgba(9, 45, 83, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pd-review-card:hover { border-color: #b9d5ec; box-shadow: var(--mtp-shadow, 0 4px 16px rgba(9, 45, 83, .08)); transform: translateY(-2px); }
.pd-review-avatar { width: 36px; height: 36px; background: var(--review-navy); font-size: 13px; }
.pd-review-card header { grid-template-columns: 36px minmax(0, 1fr) auto; }
.pd-review-card header strong { color: var(--review-ink); font-size: 13px; }
.pd-review-card header em { color: var(--review-blue); background: #e8f4ff; font-size: 9px; }
.pd-review-card time { color: var(--review-muted); font-size: 10px; }
.pd-review-card__stars { margin-top: 12px; font-size: 15px; }
.pd-review-stars .is-filled,
.pd-review-card__stars .is-filled { color: var(--review-orange); }
.pd-review-card h3 { margin-top: 10px; color: var(--review-ink); font-size: 14px; }
.pd-review-card > p { color: #52657d; font-size: 12px; line-height: 1.55; }
.pd-review-card__product { color: var(--review-muted); font-size: 11px; }
.pd-review-card footer { border-color: #edf2f7; }
.pd-review-card footer button { color: var(--review-muted); font-size: 11px; }
.pd-review-card footer button.is-active { color: var(--review-blue); }

.pd-review-all { border-color: #c9dce9; color: var(--review-navy); background: #fff; font-size: 12px; }
.pd-review-all:hover { border-color: var(--review-blue); color: #fff; background: var(--review-blue); }
.pd-review-empty { border-color: #bdd5e8; color: var(--review-muted); background: #f8fbfe; }
.pd-review-empty strong { color: var(--review-navy); }

.pd-review-modal__backdrop { background: rgba(3, 41, 91, .62); }
.pd-review-modal__dialog { border-radius: var(--mtp-radius, 9px); box-shadow: 0 24px 60px rgba(3, 41, 91, .28); }
.pd-review-modal__dialog h2 { color: var(--review-navy); }
.pd-review-modal__dialog > p { color: var(--review-muted); }
.pd-review-modal__close { color: var(--review-navy); background: #edf5fc; }
.pd-review-modal form > label,
.pd-review-upload,
.pd-review-form__stars legend { color: var(--review-ink); }
.pd-review-modal input[type="text"],
.pd-review-modal textarea,
.pd-review-modal input[type="file"] { border-color: #cdddea; }
.pd-review-modal input[type="text"]:focus,
.pd-review-modal textarea:focus { border-color: var(--review-blue); box-shadow: 0 0 0 3px rgba(8, 104, 185, .12); }
.pd-review-form__stars input:checked ~ label,
.pd-review-form__stars label:hover,
.pd-review-form__stars label:hover ~ label { color: var(--review-orange); }

@media (max-width: 980px) {
    .pd-review-summary { grid-template-columns: 165px minmax(0, 1fr) 180px; }
}

@media (max-width: 620px) {
    .pd-reviews__heading { margin-bottom: 12px; padding: 0 12px; }
    .pd-review-summary { grid-template-columns: 1fr; }
    .pd-review-score { min-height: 135px; }
    .pd-review-summary__actions { padding: 16px; }
    .pd-review-grid { gap: 12px; margin-top: 12px; }
    .pd-review-card { min-height: 0; padding: 15px; }
    .pd-review-card:hover { transform: none; }
}