/*
 * Primitive Tech Repairs
 * Phase 15: Premium Final Review
 *
 * Desktop and mobile.
 * No changes to submission functionality.
 */

/* =========================================
   MAIN REVIEW SURFACE
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
> #pr-main
> #pr-steps-area.animated-area:has(> .review-panel) {

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    margin-top: 0 !important;

    padding: clamp(24px, 3vw, 44px) !important;

    border: 1px solid #e0e6ef !important;
    border-radius: 18px !important;

    background: #f9fbfe !important;
    background-image: none !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area:has(> .review-panel)::before {

    content: none !important;
    display: none !important;
}

/* Remove legacy inner panel styling. */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area
> .review-panel {

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}

/* =========================================
   FINAL REVIEW HEADING
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area
> .review-panel
> .review-option-header {

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 26px !important;
    padding: 0 0 24px !important;

    border: 0 !important;
    border-bottom: 1px solid #e3e9f1 !important;

    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    text-align: left !important;
}

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area
> .review-panel
> .review-option-header
> span {

    display: block !important;

    width: fit-content !important;

    margin: 0 0 12px !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #0c9fa5 !important;

    font: 800 .75rem/1.4 "Manrope", sans-serif !important;

    letter-spacing: .09em !important;

    text-align: left !important;
}

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area
> .review-panel
> .review-option-header
> h3 {

    width: 100% !important;

    margin: 0 !important;

    color: #1b2430 !important;

    font-family: "Space Grotesk", sans-serif !important;

    font-size: clamp(2rem, 3vw, 2.8rem) !important;

    font-weight: 700 !important;

    line-height: 1.14 !important;

    letter-spacing: -.045em !important;

    text-align: left !important;

    text-transform: none !important;

    text-shadow: none !important;
}

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area
> .review-panel
> .review-option-header
> p {

    margin: 12px 0 0 !important;

    color: #596578 !important;

    font: 400 .9rem/1.6 "Manrope", sans-serif !important;

    text-align: left !important;
}

/* =========================================
   REVIEW GRID
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area
> .review-panel
> .review-grid {

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas: none !important;

    gap: 16px !important;

    align-items: start !important;
}

/* Prioritize useful customer-facing information. */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-customer {

    order: 1 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-device {

    order: 2 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-selected-repairs {

    order: 3 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-appointment {

    order: 4 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-addons {

    order: 5 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-notes {

    order: 6 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-request {

    order: 7 !important;
}

/* Important information receives full-width cards. */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
:is(
    .review-card-selected-repairs,
    .review-card-appointment,
    .review-card-addons,
    .review-card-notes,
    .review-card-request
) {

    grid-column: 1 / -1 !important;

    grid-row: auto !important;

    grid-area: auto !important;
}

/* =========================================
   REVIEW CARDS
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card {

    box-sizing: border-box !important;

    min-width: 0 !important;

    padding: clamp(18px, 2.5vw, 26px) !important;

    border: 1px solid #dce3ed !important;

    border-radius: 14px !important;

    background: #fff !important;
    background-image: none !important;

    box-shadow: 0 4px 18px rgba(23,40,62,.025) !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card::before {

    content: none !important;
    display: none !important;
}

/* Card headings */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card > h4 {

    display: block !important;

    margin: 0 0 18px !important;

    padding: 0 0 0 12px !important;

    border: 0 !important;
    border-left: 2px solid #25c6c1 !important;

    background: transparent !important;

    color: #1b2430 !important;

    font-family: "Space Grotesk", sans-serif !important;

    font-size: 1.05rem !important;

    font-weight: 700 !important;

    letter-spacing: -.025em !important;

    text-transform: none !important;
}

/* Card information rows */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card p {

    display: grid !important;

    grid-template-columns:
        minmax(110px, .38fr)
        minmax(0, 1fr) !important;

    gap: 14px !important;

    align-items: start !important;

    margin: 0 !important;

    padding: 13px 0 !important;

    border-bottom: 1px solid #edf1f6 !important;

    color: #344255 !important;

    font-size: .85rem !important;

    line-height: 1.5 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card p:last-child {

    border-bottom: 0 !important;
}

/* Labels */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card p > strong {

    color: #0c9fa5 !important;

    font-size: .7rem !important;

    font-weight: 800 !important;

    letter-spacing: .04em !important;

    text-transform: uppercase !important;
}

/* Values */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card p > span {

    min-width: 0 !important;

    color: #344255 !important;

    font-size: .85rem !important;

    font-weight: 550 !important;

    overflow-wrap: anywhere !important;
}

/* Selected repair separators */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-repair-item + .review-repair-item {

    border-top: 1px solid #dce3ed !important;
}

/* Request metadata is visually secondary. */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-request {

    background: #f3f7fb !important;
}

/* =========================================
   FINAL CONFIRMATION
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-submit-reassurance {

    width: 100% !important;
    max-width: none !important;

    margin: 24px 0 0 !important;

    padding: 22px !important;

    border: 1px solid #bfe9e7 !important;
    border-radius: 12px !important;

    background: #f0fbfa !important;
    background-image: none !important;

    box-shadow: none !important;

    text-align: left !important;

    justify-items: start !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-submit-reassurance strong {

    color: #087f83 !important;

    font-size: .8rem !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-submit-reassurance span {

    color: #344255 !important;

    font-size: .85rem !important;

    line-height: 1.5 !important;
}

/* Submission status */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-submission-status {

    color: #344255 !important;

    border-radius: 10px !important;
}

/* =========================================
   FINAL ACTIONS
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-actions {

    display: grid !important;

    grid-template-columns: 1fr 1.4fr !important;

    gap: 12px !important;

    margin-top: 24px !important;

    padding-top: 22px !important;

    border-top: 1px solid #dce3ed !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
:is(.review-back, .review-submit) {

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 54px !important;

    border-radius: 10px !important;

    font-family: "Manrope", sans-serif !important;

    font-size: .85rem !important;

    font-weight: 800 !important;

    text-transform: none !important;
}

/* Back */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-back {

    border: 1px solid #dce3ed !important;

    background: #fff !important;
    background-image: none !important;

    color: #1b2430 !important;

    box-shadow: none !important;
}

/* Submit */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-submit {

    border: 1px solid #19252d !important;

    background: #19252d !important;
    background-image: none !important;

    color: #fff !important;

    box-shadow: none !important;
}

/* Preserve disabled state during submission. */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-submit:disabled {

    opacity: .6 !important;

    cursor: wait !important;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 960px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    > #pr-main
    > #pr-steps-area.animated-area:has(> .review-panel) {

        padding: 20px 14px !important;

        border-radius: 17px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area.animated-area
    > .review-panel
    > .review-option-header
    > h3 {

        font-size: clamp(1.7rem, 7vw, 2.1rem) !important;
    }

    /* One column throughout the entire review. */

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area.animated-area
    > .review-panel
    > .review-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-areas: none !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area.animated-area
    > .review-panel
    .review-grid > .review-card {

        grid-column: 1 / -1 !important;

        grid-row: auto !important;

        grid-area: auto !important;

        min-width: 0 !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .review-panel
    .review-actions {

        grid-template-columns:
            minmax(0, 1fr) !important;
    }

}

/* Small phones */

@media (max-width: 420px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    .review-panel
    .review-card {

        padding: 18px 16px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .review-panel
    .review-card p {

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 5px !important;
    }

}

/*
 * PHASE 15B: PREMIUM REVIEW CARD ORGANIZATION
 *
 * Equal-width desktop cards.
 * Equal-height paired rows.
 * Consistent card presentation.
 *
 * Existing review data and submission functionality
 * remain unchanged.
 */

/* ---------------------------------------------------------
   DESKTOP REVIEW GRID
--------------------------------------------------------- */

@media (min-width: 961px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area
    > .review-panel
    > .review-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-areas: none !important;

        grid-auto-flow: row !important;

        gap: 16px !important;

        align-items: stretch !important;

        justify-items: stretch !important;
    }

    /*
     * Reset the conflicting full-width rules from Phase 15.
     *
     * grid-area must come BEFORE grid-column and grid-row.
     * Otherwise the shorthand resets their placement.
     */

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area
    > .review-panel
    > .review-grid
    > .review-card {

        grid-area: auto !important;

        grid-column: auto !important;

        grid-row: auto !important;

        align-self: stretch !important;

        justify-self: stretch !important;

        height: 100% !important;

        width: 100% !important;
    }

}

/* ---------------------------------------------------------
   CARD ORDER
--------------------------------------------------------- */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-customer {

    order: 1 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-device {

    order: 2 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-selected-repairs {

    order: 3 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-appointment {

    order: 4 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-addons {

    order: 5 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-savings {

    order: 6 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-notes {

    order: 7 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-card-request {

    order: 8 !important;
}

/* ---------------------------------------------------------
   UNIFORM CARD SURFACES
--------------------------------------------------------- */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-grid > .review-card {

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 24px !important;

    border: 1px solid #dce3ed !important;

    border-radius: 14px !important;

    background: #fff !important;

    background-image: none !important;

    color: #1b2430 !important;

    box-shadow:
        0 4px 18px rgba(23, 40, 62, .035) !important;

    overflow: hidden !important;
}

/* Remove legacy decorative overlays. */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-grid > .review-card::before,

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-grid > .review-card::after {

    content: none !important;

    display: none !important;
}

/* ---------------------------------------------------------
   CONSISTENT CARD HEADINGS
--------------------------------------------------------- */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-grid > .review-card > h4 {

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 30px !important;

    margin: 0 0 18px !important;

    padding: 0 0 0 13px !important;

    border: 0 !important;

    border-left: 2px solid #25c6c1 !important;

    border-radius: 0 !important;

    background: transparent !important;

    color: #1b2430 !important;

    font-family: "Space Grotesk", sans-serif !important;

    font-size: 1.08rem !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    letter-spacing: -.025em !important;

    text-align: left !important;

    text-transform: none !important;

    box-shadow: none !important;
}

/* ---------------------------------------------------------
   INFORMATION ROWS
--------------------------------------------------------- */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-card p {

    display: grid !important;

    grid-template-columns:
        minmax(90px, .38fr)
        minmax(0, .62fr) !important;

    gap: 12px !important;

    align-items: start !important;

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 12px 0 !important;

    border: 0 !important;

    border-bottom: 1px solid #e8edf4 !important;

    background: transparent !important;

    color: #344255 !important;

    font-size: .84rem !important;

    line-height: 1.5 !important;
}

/* Remove the final row divider. */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-card > p:last-child,

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-repair-item > p:last-child {

    border-bottom: 0 !important;
}

/* Labels */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-card p > strong {

    color: #0c9fa5 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: .68rem !important;

    font-weight: 800 !important;

    line-height: 1.5 !important;

    letter-spacing: .045em !important;

    text-align: left !important;

    text-transform: uppercase !important;
}

/* Values */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-card p > span {

    min-width: 0 !important;

    color: #344255 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: .83rem !important;

    font-weight: 550 !important;

    line-height: 1.5 !important;

    text-align: left !important;

    overflow-wrap: anywhere !important;
}

/* ---------------------------------------------------------
   SELECTED REPAIR DETAILS
--------------------------------------------------------- */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-repair-item {

    box-sizing: border-box !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    background-image: none !important;

    box-shadow: none !important;
}

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-repair-item
+ .review-repair-item {

    margin-top: 12px !important;

    padding-top: 12px !important;

    border-top: 1px solid #dce3ed !important;
}

/* ---------------------------------------------------------
   REQUEST OVERVIEW
--------------------------------------------------------- */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area
.review-panel
.review-card-request {

    background: #f3f8fc !important;

    background-image: none !important;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 960px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area
    > .review-panel
    > .review-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-auto-flow: row !important;

        gap: 12px !important;

        align-items: stretch !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area
    > .review-panel
    > .review-grid
    > .review-card {

        grid-area: auto !important;

        grid-column: 1 / -1 !important;

        grid-row: auto !important;

        width: 100% !important;

        height: auto !important;

        padding: 20px 18px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area
    .review-panel
    .review-card > h4 {

        text-align: left !important;
    }

}

/* Narrow phones */

@media (max-width: 420px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-steps-area
    .review-panel
    .review-card p {

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 5px !important;
    }

}

/* Explicit recovery for a changed submission identity */

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-start-new-request {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 50px !important;

    margin-top: 16px !important;

    padding: 12px 20px !important;

    border: 1px solid #25c6c1 !important;

    border-radius: 10px !important;

    background: #f0fbfa !important;

    color: #087f83 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: .85rem !important;

    font-weight: 800 !important;

    cursor: pointer !important;

}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-start-new-request:hover {

    background: #dff7f4 !important;

}

html body.homepage-premium-page
#primitive-wizard-container
.review-panel
.review-start-new-request:focus-visible {

    outline: 3px solid #25c6c1 !important;

    outline-offset: 3px !important;

}