/* ==========================================================================
   PRODUCT PAGE - THE REVIEW FORM, DIGIKALA'S "ثبت امتیاز و دیدگاه"
   --------------------------------------------------------------------------
   Views/Product/_PdpReviewForm.cshtml, pdp-review.js. Phones: a page over the product page,
   its header at the top and its button at the bottom. Desktop: a centred dialog with the same
   content. Two steps, as Digikala's: the product and its stars, then the text.

   Type: the page's ladder (base.less --tc-fs-*, a step finer on the phone product page,
   body.tc-pdpm in pdp-mobile.css), as the specification and description sheets use it - the
   form is moved under <body>, so it inherits the same values. Weights stop at 700.
   ========================================================================== */

.tc-rv {
    --tc-rv-ink: #0C0C0C;
    --tc-rv-text: #3F4064;
    --tc-rv-muted: #81858B;
    --tc-rv-rule: #E0E0E2;
    --tc-rv-soft: #F0F0F1;
    --tc-rv-accent: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    --tc-rv-focus: #19BFD3;
    --tc-rv-good: #00A049;
    --tc-rv-good-tint: #E8F7EE;
    --tc-rv-star: #F9A825;
    --tc-rv-star-line: #A1A3A8;
    --tc-rv-star-num: #3F4064;
    position: fixed;
    inset: 0;
    z-index: 10070;
    font-family: yekanbakh, tahoma, sans-serif;
    direction: rtl;
    text-align: right;
    color: var(--tc-rv-ink);
}

.tc-rv[hidden] {
    display: none;
}

html.tc-rv-lock,
html.tc-rv-lock body {
    overflow: hidden;
}

.tc-rv__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.tc-rv__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFF;
}

.tc-rv__page {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.tc-rv__page[hidden] {
    display: none;
}

.tc-rv button {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tc-rv__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 8px;
    border-bottom: 6px solid var(--tc-rv-soft);
}

.tc-rv__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--tc-fs-section, 16px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 26px;
    color: var(--tc-rv-ink);
}

.tc-rv__icon-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--tc-rv-text);
    cursor: pointer;
}

.tc-rv__x {
    display: none;
}

/* "مرحله ۱ از ۲", on the left of the header */
.tc-rv__steps {
    flex: 0 0 auto;
    padding-inline-end: 8px;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-text, 400);
    line-height: 20px;
    color: var(--tc-rv-text);
}

.tc-rv__step[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Step 1: the product, large, and the question with its five stars - the
   whole step in the middle of the page
   -------------------------------------------------------------------------- */

/* the body is a column on step 1, so the step can fill it and centre its content */
.tc-rv[data-step="1"] .tc-rv__body {
    display: flex;
    flex-direction: column;
}

.tc-rv__step--rate {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0 24px;
    text-align: center;
}

.tc-rv__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tc-rv__intro-img {
    width: min(240px, 62vw);
    aspect-ratio: 1;
    margin-bottom: 8px;
    object-fit: contain;
}

.tc-rv__intro-name {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--tc-fs-h4, 14px);
    font-weight: var(--tc-fw-text, 400);
    line-height: 1.9;
    color: var(--tc-rv-ink);
}

.tc-rv__ask {
    margin: 32px 0 20px;
    font-size: var(--tc-fs-section, 16px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.7;
    color: var(--tc-rv-ink);
}

/* the purchase: the store, the variant and the date, a dot between them (_PdpReviewPurchase) */
.tc-rv__purchase {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 100%;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-text, 400);
    line-height: 20px;
    color: var(--tc-rv-muted);
}

.tc-rv__intro .tc-rv__purchase {
    justify-content: center;
}

.tc-rv__purchase-icon {
    flex: 0 0 auto;
    margin-inline-end: 6px;
    color: var(--tc-rv-text);
}

.tc-rv__purchase-part + .tc-rv__purchase-part::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: var(--tc-rv-off, #C0C2C5);
    vertical-align: middle;
}

.tc-rv__purchase-part {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* the variant gives way when the line is long */
.tc-rv__purchase-variant {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   The stars: Digikala's - a grey outline, filled amber once chosen, its number
   under it. Step 1 holds the radios; step 2's row draws the same rating and
   changes it (pdp-review.js)
   -------------------------------------------------------------------------- */

.tc-rv-stars {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.tc-rv-stars__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 44px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-rv-stars__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tc-rv-stars__icon {
    display: block;
    width: 28px;
    height: 28px;
    transition: transform 0.15s;
}

.tc-rv-stars__line {
    fill: var(--tc-rv-star-line);
    transition: fill 0.15s;
}

.tc-rv-stars__solid {
    fill: transparent;
    transition: fill 0.15s;
}

.tc-rv-stars__item.is-on .tc-rv-stars__line,
.tc-rv-stars__item.is-on .tc-rv-stars__solid {
    fill: var(--tc-rv-star);
}

.tc-rv-stars__item.is-picked .tc-rv-stars__icon {
    transform: scale(1.08);
}

.tc-rv-stars__num {
    font-size: var(--tc-fs-body, 13px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 18px;
    color: var(--tc-rv-star-num);
}

.tc-rv-stars__input:focus-visible + .tc-rv-stars__icon {
    outline: 2px solid var(--tc-rv-focus);
    outline-offset: 4px;
    border-radius: 4px;
}

.tc-rv-stars--lg {
    justify-content: center;
    gap: 4px;
}

.tc-rv-stars--lg .tc-rv-stars__item {
    width: 48px;
    gap: 12px;
}

.tc-rv-stars--lg .tc-rv-stars__icon {
    width: 32px;
    height: 32px;
}

.tc-rv-stars--lg .tc-rv-stars__num {
    font-size: var(--tc-fs-h3, 14px);
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */

.tc-rv__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    margin: 0;
}

.tc-rv__product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
}

.tc-rv__product-img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.tc-rv__product-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tc-rv__product-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--tc-fs-h4, 14px);
    font-weight: var(--tc-fw-label, 600);
    line-height: 1.8;
    color: var(--tc-rv-ink);
}

.tc-rv__field {
    padding: 16px 0;
}

.tc-rv__field + .tc-rv__field {
    border-top: 1px solid var(--tc-rv-soft);
}

.tc-rv__label {
    display: block;
    font-size: var(--tc-fs-h3, 15px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 26px;
    color: var(--tc-rv-ink);
    white-space: nowrap;
}

.tc-rv__label b {
    color: #D32F2F;
    font-weight: inherit;
}

/* the stars: the label on the right, the picker beside it */
.tc-rv__field--rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tc-rv-soft);
}

.tc-rv__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    margin-bottom: 12px;
}

.tc-rv__nudge {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tc-rv-good-tint);
    color: var(--tc-rv-good);
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-label, 600);
    line-height: 20px;
}

.tc-rv__nudge[hidden] {
    display: none;
}

/* the text and, under it in the same frame, who the review is sent as */
.tc-rv__box {
    border: 1px solid var(--tc-rv-rule);
    border-radius: 8px;
    background: #FFF;
    transition: border-color 0.2s;
}

.tc-rv__box:focus-within {
    border-color: var(--tc-rv-focus);
    box-shadow: inset 0 -2px 0 var(--tc-rv-focus);
}

.tc-rv__text {
    display: block;
    width: 100%;
    min-height: 140px;
    padding: 16px;
    border: 0;
    border-radius: 8px 8px 0 0;
    outline: 0;
    resize: none;
    background: none;
    font-family: inherit;
    font-size: var(--tc-fs-h4, 14.5px);
    line-height: 2;
    color: var(--tc-rv-ink);
}

.tc-rv__text::placeholder {
    color: var(--tc-rv-muted);
}

.tc-rv__as {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 8px 16px;
    border-top: 1px solid var(--tc-rv-rule);
}

.tc-rv__as-name {
    overflow: hidden;
    font-size: var(--tc-fs-small, 13px);
    font-weight: var(--tc-fw-label, 600);
    color: var(--tc-rv-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-rv__as-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--tc-rv-soft);
    color: var(--tc-rv-text);
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-text, 400);
    cursor: pointer;
}

/* one question to write about, changing every few seconds */
.tc-rv__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin: 14px 0 0;
    font-size: var(--tc-fs-small, 13px);
    line-height: 22px;
    color: var(--tc-rv-text);
}

.tc-rv__hint svg {
    flex: 0 0 auto;
}

.tc-rv__hint span {
    transition: opacity 0.3s, transform 0.3s;
}

.tc-rv__hint span.is-out {
    opacity: 0;
    transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Photos and videos (buyers only)
   -------------------------------------------------------------------------- */

.tc-rv__media {
    padding: 8px 0 0;
}

.tc-rv__media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tc-rv__add {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 96px;
    margin: 0;
    border-radius: 8px;
    background: var(--tc-rv-soft);
    color: var(--tc-rv-ink);
    font-size: var(--tc-fs-small, 13px);
    font-weight: var(--tc-fw-label, 600);
    cursor: pointer;
}

.tc-rv__add-short {
    display: none;
}

/* once there is a file the box is the first of the tiles, four to a row */
.tc-rv__media-list.has-files .tc-rv__add {
    flex: 0 0 auto;
    width: calc((100% - 30px) / 4);
    height: auto;
    aspect-ratio: 1;
}

.tc-rv__media-list.has-files .tc-rv__add-long {
    display: none;
}

.tc-rv__media-list.has-files .tc-rv__add-short {
    display: inline;
}

.tc-rv__media-list.is-full .tc-rv__add {
    display: none;
}

.tc-rv__tile {
    position: relative;
    flex: 0 0 auto;
    width: calc((100% - 30px) / 4);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #111;
}

.tc-rv__tile img,
.tc-rv__tile video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-rv__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
    pointer-events: none;
}

.tc-rv__tile-del {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #FFF;
    cursor: pointer;
}

.tc-rv__tile-play {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    color: #FFF;
}

.tc-rv__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: var(--tc-fs-caption, 12px);
    line-height: 20px;
    color: var(--tc-rv-muted);
}

.tc-rv__note svg {
    flex: 0 0 auto;
}

.tc-rv__note.is-error {
    color: #D32F2F;
}

/* --------------------------------------------------------------------------
   Footer: the button and the rules line
   -------------------------------------------------------------------------- */

.tc-rv__foot {
    flex: 0 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--tc-rv-rule);
    background: #FFF;
}

.tc-rv__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--tc-rv-accent);
    color: #FFF;
    font-size: var(--tc-fs-h4, 14.5px);
    font-weight: var(--tc-fw-title, 700);
    cursor: pointer;
}

.tc-rv__submit[hidden],
.tc-rv__send[hidden] {
    display: none;
}

.tc-rv__submit:disabled {
    background: var(--tc-rv-rule);
    color: #FFF;
    cursor: default;
}

.tc-rv__submit.is-busy {
    opacity: 0.8;
}

.tc-rv__terms {
    margin: 12px 0 0;
    font-size: var(--tc-fs-caption, 12px);
    line-height: 20px;
    text-align: center;
    color: var(--tc-rv-text);
}

.tc-rv__terms a {
    color: #2196F3;
}

/* --------------------------------------------------------------------------
   Who the review is sent as: a sheet from the bottom
   -------------------------------------------------------------------------- */

.tc-rv__sheet {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.tc-rv__sheet[hidden] {
    display: none;
}

.tc-rv__sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.tc-rv__sheet-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #FFF;
    animation: tc-rv-up 0.22s ease-out;
}

.tc-rv__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tc-rv-rule);
    font-size: var(--tc-fs-section, 15px);
}

.tc-rv__sheet-head .tc-rv__icon-btn {
    margin-left: -8px;
}

.tc-rv__choice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 16px 0;
    cursor: pointer;
}

.tc-rv__choice input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: #1A73E8;
}

.tc-rv__choice-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-rv__choice-text b {
    font-size: var(--tc-fs-h4, 14.5px);
    font-weight: var(--tc-fw-title, 700);
    color: var(--tc-rv-ink);
}

.tc-rv__choice-text span {
    font-size: var(--tc-fs-caption, 12px);
    line-height: 20px;
    color: var(--tc-rv-muted);
}

.tc-rv__choice-text strong {
    font-weight: var(--tc-fw-title, 700);
    color: var(--tc-rv-text);
}

@keyframes tc-rv-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* --------------------------------------------------------------------------
   Sent: thanks
   -------------------------------------------------------------------------- */

.tc-rv__done-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 48px;
    text-align: center;
}

.tc-rv__confetti {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 260px;
    margin-bottom: 24px;
}

.tc-rv__confetti i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    opacity: 0;
    animation: tc-rv-burst 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes tc-rv-burst {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
    }
    25% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r));
    }
}

.tc-rv__done-title {
    margin: 0 0 12px;
    font-size: var(--tc-fs-section, 16px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 28px;
    color: var(--tc-rv-ink);
}

.tc-rv__done-text {
    margin: 0;
    font-size: var(--tc-fs-small, 13px);
    line-height: 24px;
    color: var(--tc-rv-text);
}

@media (prefers-reduced-motion: reduce) {
    .tc-rv__confetti i {
        animation-duration: 0.01s;
    }
}

/* --------------------------------------------------------------------------
   Desktop: a dialog in the middle of the page
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
    .tc-rv {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tc-rv__panel {
        position: relative;
        inset: auto;
        width: 600px;
        height: min(760px, calc(100vh - 64px));
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    }

    .tc-rv__head {
        height: 64px;
        padding: 0 12px;
        border-bottom-width: 1px;
        border-bottom-color: var(--tc-rv-rule);
    }

    /* the arrow stays on step 2 (back to the stars); the X always closes */
    .tc-rv[data-step="1"] .tc-rv__back {
        display: none;
    }

    .tc-rv__x {
        display: inline-flex;
    }

    .tc-rv__intro-img {
        width: 220px;
    }

    .tc-rv-stars__item:hover .tc-rv-stars__icon {
        transform: scale(1.12);
    }

    .tc-rv__body {
        padding: 20px 24px;
    }

    .tc-rv__foot {
        padding: 16px 24px;
    }

    .tc-rv__submit {
        cursor: pointer;
    }

    .tc-rv__icon-btn:hover {
        background: var(--tc-rv-soft);
    }

    .tc-rv__add:hover {
        background: #E7E7E9;
    }

    .tc-rv__sheet-panel {
        padding: 0 24px 24px;
        border-radius: 16px 16px 0 0;
    }
}

/* ==========================================================================
   A review's photos and videos (Views/Product/_ProductReviewMedia.cshtml) and the viewer
   ========================================================================== */

.tc-rvm {
    display: flex;
    gap: 8px;
    margin: 12px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    direction: rtl;
}

.tc-rvm::-webkit-scrollbar {
    display: none;
}

.tc-rvm__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #F0F0F1;
    border-radius: 8px;
    background: #F0F0F1;
    cursor: pointer;
}

.tc-rvm__thumb img,
.tc-rvm__thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.tc-rvm__play {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    box-sizing: content-box;
    transform: translate(-50%, -50%);
}

.tc-rvv {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    direction: rtl;
    font-family: yekanbakh, tahoma, sans-serif;
}

.tc-rvv[hidden] {
    display: none;
}

.tc-rvv__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 64px 0;
    box-sizing: border-box;
}

.tc-rvv__stage img,
.tc-rvv__stage video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tc-rvv__btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #FFF;
    cursor: pointer;
}

.tc-rvv__close {
    top: 12px;
    right: 12px;
}

.tc-rvv__prev {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.tc-rvv__next {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

.tc-rvv__count {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    pointer-events: none;
}

.tc-rvv.is-single .tc-rvv__prev,
.tc-rvv.is-single .tc-rvv__next,
.tc-rvv.is-single .tc-rvv__count {
    display: none;
}