/**
 * VELARA — PVR Review Form Status UI
 * Stages 01–04: Uploading, Success, Partial Media Failure, Failed Media List.
 * Presentation only; PVR controls submission, upload, retry and status.
 */
/* ============================================================
   Stage 01 — Uploading / Progress
   ============================================================ */
#pvr-review-form.pvr-form--uploading .pvr-upload-view {
    min-height: 24rem;
    padding: 2.5rem 1.5rem 2rem;
    gap: 1.75rem;
    box-sizing: border-box;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__spinner-box {
    padding: 1.5rem 0 1rem;
    gap: 0.5rem;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-spinner {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.625rem;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-spinner::before {
    width: 100%;
    height: 100%;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #C9C7BD;
    border-top-color: #2A2724;
    animation: velara-pvr-upload-spin 0.9s linear infinite;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-spinner::after {
    content: none;
    animation: none;
}
@keyframes velara-pvr-upload-spin {
    to { transform: rotate(360deg); }
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__title {
    margin: 0;
    max-width: 32rem;
    color: #2A2724;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__body {
    margin: 0;
    max-width: 32rem;
    color: #575757;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__progress {
    width: 100%;
    max-width: 32rem;
    gap: 0.75rem;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__percent-wrap {
    margin-bottom: 0;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__percent {
    color: #2A2724;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__progress .pvr-progress-bar {
    height: 0.25rem;
    border-radius: 999px;
    background: #C9C7BD;
    box-shadow: none;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__progress .pvr-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: #2A2724;
    background-image: none;
    box-shadow: none;
    transition: width 0.15s linear;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__progress .pvr-progress-fill::after {
    content: none;
    animation: none;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__hint {
    margin-top: 0;
    max-width: 32rem;
    color: #575757;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__cancel-wrap {
    margin-top: 0.375rem;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__cancel-btn {
    appearance: none;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: transparent;
    color: #575757;
    box-shadow: none;
    filter: none;
    transform: none;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 0.18s ease;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__cancel-btn:hover:not(:disabled) {
    background: transparent;
    color: #2A2724;
    box-shadow: none;
    filter: none;
    transform: none;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__cancel-btn:focus-visible:not(:disabled) {
    outline: 2px solid #2A2724;
    outline-offset: 0.125rem;
}
#pvr-review-form.pvr-form--uploading .pvr-upload-view__cancel-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: transparent;
    color: #575757;
    box-shadow: none;
    filter: none;
    transform: none;
}
/* ============================================================
 *   Stage 02 — Success / Thank-you
 *   ============================================================ */
#pvr-review-form.pvr-form--thankyou .pvr-thankyou {
    min-height: 24rem;
    box-sizing: border-box;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    margin: 0 0 1.375rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #2A2724;
    box-shadow: none;
    opacity: 1;
    transform-origin: center;
    animation: velara-pvr-success-appear 450ms ease-out both;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__icon svg {
    width: 1.6875rem;
    height: 1.6875rem;
    overflow: visible;
    fill: none;
    stroke: #F8F8F8;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__icon svg polyline {
    fill: none;
    stroke: #F8F8F8;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation: velara-pvr-success-check 420ms 200ms ease-in-out forwards;
}
@keyframes velara-pvr-success-appear {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes velara-pvr-success-check {
    from { stroke-dashoffset: 17; }
    to   { stroke-dashoffset: 0; }
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__title {
    margin: 0 0 0.5rem;
    max-width: 32rem;
    color: #2A2724;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__subtitle {
    margin: 0;
    max-width: 32rem;
    color: #575757;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}
/* ============================================================
 *   Stage 03 + 04 — Partial Media Failure / Retry + Failed List
 *   ============================================================ */
/* The native warning is the recovery container (26.25rem desktop). */
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__warning {
    position: relative;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.625rem;
    row-gap: 0.875rem;
    width: 100%;
    max-width: 26.25rem;
    min-width: 0;
    box-sizing: border-box;
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}
/* Only the partial-media failure state hides the success icon. */
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.pvr-thankyou__icon {
    display: none !important;
}
/* Divider follows the recovery area's width (max. 26.25rem). */
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.pvr-thankyou__warning::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid #D8D4CF;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__warning::before {
    content: "!";
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    margin-top: 0.0625rem;
    border: 1px solid #986A35;
    border-radius: 50%;
    color: #986A35;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__warning-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    color: #2A2724;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}
/* Native Retry remains the only action; Stage 04 places it below the list. */
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__warning-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.pvr-thankyou__warning-actions {
    grid-row: 3;
    margin-top: 0.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
/* Secondary reassurance below the native Retry upload button. */
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.velara-pvr-reassurance {
    margin: 0;
    color: #575757;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__retry {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    min-width: 7.375rem;
    box-sizing: border-box;
    padding: 0.5rem 1.375rem;
    border: 1px solid #2A2724;
    border-radius: 0.25rem;
    background: #2A2724;
    color: #F8F8F8;
    opacity: 1;
    box-shadow: none;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__retry:hover:not(:disabled) {
    border-color: #2A2724;
    background: #FFFFFF;
    color: #2A2724;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__retry:focus-visible {
    outline: 2px solid #2A2724 !important;
    outline-offset: 0.1875rem;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__retry:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
#pvr-review-form.pvr-form--thankyou .pvr-thankyou__retry.pvr-is-loading {
    opacity: 0.55;
    cursor: progress;
}
/* Failed files: two 11.25rem tracks, space-between inside 26.25rem. */
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.velara-pvr-failed-list {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 11.25rem));
    justify-content: space-between;
    column-gap: 0;
    row-gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.velara-pvr-failed-list__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.velara-pvr-failed-list__thumb {
    display: flex;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #D8D4CF;
    border-radius: 0.25rem;
    background: #F8F8F8;
    color: #575757;
}
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.velara-pvr-failed-list__thumb svg {
    display: block;
    flex-shrink: 0;
}
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.velara-pvr-failed-list__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
#pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
.velara-pvr-failed-list__filename {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2A2724;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: left;
}
/* Desktop status gutter only; standard form and mobile stay native. */
@media (min-width: 1025px) {
    #pvr-review-form-modal .pvr-form-section:has(
        #pvr-review-form:is(.pvr-form--uploading, .pvr-form--thankyou)
    ) {
        padding: 0.875rem 1.25rem !important;
    }
}
/* Responsive status layouts. */
@media (max-width: 767px) {
    #pvr-review-form.pvr-form--uploading .pvr-upload-view {
        min-height: 19rem;
        padding: 1.5rem 1rem 1.75rem;
        gap: 1.25rem;
    }
    #pvr-review-form.pvr-form--uploading .pvr-upload-view__spinner-box {
        padding: 1rem 0 0.5rem;
    }
    #pvr-review-form.pvr-form--uploading .pvr-upload-view__title,
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou__title {
        font-size: 1rem;
    }
    #pvr-review-form.pvr-form--uploading .pvr-upload-view__progress {
        max-width: 100%;
    }
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou {
        min-height: 19rem;
        padding: 1.75rem 1rem;
    }
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou__warning {
        max-width: 100%;
    }
    #pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
    .velara-pvr-failed-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.625rem;
    }
    #pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
    .velara-pvr-failed-list__item {
        gap: 0.5rem;
    }
    #pvr-review-form.pvr-form--thankyou.velara-pvr--partial-media
    .velara-pvr-failed-list__thumb {
        flex-basis: 2.25rem;
        width: 2.25rem;
        height: 2.25rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    #pvr-review-form.pvr-form--uploading .pvr-upload-spinner::before,
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou__icon,
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou__icon svg polyline {
        animation: none;
    }
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou__icon {
        opacity: 1;
        transform: none;
    }
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou__icon svg polyline {
        stroke-dashoffset: 0;
    }
    #pvr-review-form.pvr-form--uploading .pvr-upload-view__progress .pvr-progress-fill,
    #pvr-review-form.pvr-form--uploading .pvr-upload-view__cancel-btn,
    #pvr-review-form.pvr-form--thankyou .pvr-thankyou__retry {
        transition: none;
    }
}