/*
 * Primitive Tech Repairs
 * Phase 16: Request Received
 *
 * Desktop and mobile.
 *
 * This stylesheet applies only to the successful
 * repair request confirmation screen.
 */

/* =========================================
   MAIN CONFIRMATION SURFACE
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
> #pr-main
> #pr-steps-area.animated-area:has(> .success-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;
}

/* Remove the original dark inner panel. */

html body.homepage-premium-page
#primitive-wizard-container
#pr-steps-area.animated-area
> .success-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;
}

/* =========================================
   SUCCESS HEADING
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-hero {

    display: grid !important;

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

    gap: 22px !important;

    align-items: center !important;

    margin: 0 0 24px !important;

    padding: 0 0 26px !important;

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

    background: transparent !important;
}

/* Checkmark */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-icon {

    display: grid !important;

    place-items: center !important;

    width: 68px !important;

    height: 68px !important;

    margin: 0 !important;

    border: 1px solid #b5e8e5 !important;

    border-radius: 16px !important;

    background: #eafbf9 !important;

    color: #0c9fa5 !important;

    font-size: 2rem !important;

    font-weight: 700 !important;

    box-shadow: none !important;
}

/* Heading container */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-option-header {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    text-align: left !important;
}

/* Eyebrow */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-option-header > span {

    display: block !important;

    margin: 0 0 10px !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #0c9fa5 !important;

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

    letter-spacing: .1em !important;

    text-align: left !important;
}

/* Main success title */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-option-header h3 {

    margin: 0 !important;

    color: #1b2430 !important;

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

    font-size: clamp(1.8rem, 3vw, 2.65rem) !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    letter-spacing: -.045em !important;

    text-align: left !important;

    text-transform: none !important;

    text-shadow: none !important;
}

/* Confirmation message */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-message {

    max-width: 760px !important;

    margin: 12px 0 0 !important;

    color: #596578 !important;

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

    text-align: left !important;
}

/* =========================================
   REQUEST ID
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-request-confirmation {

    display: grid !important;

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

    gap: 8px 16px !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 0 20px !important;

    padding: 22px 24px !important;

    border: 1px solid #b5e8e5 !important;

    border-radius: 14px !important;

    background: #effbf9 !important;

    background-image: none !important;

    box-shadow: none !important;

    text-align: left !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-request-confirmation > span {

    grid-column: 1 / -1 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #0c9fa5 !important;

    font-size: .7rem !important;

    font-weight: 800 !important;

    letter-spacing: .08em !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-request-confirmation > strong {

    grid-column: 1 / -1 !important;

    min-width: 0 !important;

    color: #1b2430 !important;

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

    font-size: clamp(1.05rem, 2.3vw, 1.55rem) !important;

    font-weight: 700 !important;

    letter-spacing: -.025em !important;

    overflow-wrap: anywhere !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-request-confirmation > small {

    grid-column: 1 / -1 !important;

    color: #596578 !important;

    font-size: .8rem !important;
}

/* =========================================
   CONFIRMATION DETAILS
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-summary {

    display: grid !important;

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

    gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;

    text-align: left !important;
}

/*
 * The request ID is already displayed prominently above.
 * Preserve the original markup, but hide the duplicate tile.
 */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-summary-request-layout > div:first-child {

    display: none !important;
}

/* Detail cards */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-summary-request-layout > div:nth-child(n) {

    box-sizing: border-box !important;

    min-width: 0 !important;

    min-height: 76px !important;

    padding: 16px 18px !important;

    border: 1px solid #dce3ed !important;

    border-radius: 12px !important;

    background: #fff !important;

    background-image: none !important;

    box-shadow: none !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-summary-request-layout > div:first-child {

    display: none !important;
}

/* Detail labels */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-summary-request-layout > div > strong {

    display: block !important;

    margin: 0 0 8px !important;

    color: #0c9fa5 !important;

    font-size: .65rem !important;

    font-weight: 800 !important;

    letter-spacing: .055em !important;

    text-transform: uppercase !important;
}

/* Detail values */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-summary-request-layout > div > span {

    display: block !important;

    min-width: 0 !important;

    color: #1b2430 !important;

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

    font-size: .86rem !important;

    font-weight: 650 !important;

    line-height: 1.5 !important;

    overflow-wrap: anywhere !important;
}

/* =========================================
   WHAT HAPPENS NEXT
========================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps {

    margin: 24px 0 0 !important;

    padding: clamp(20px, 3vw, 30px) !important;

    border: 1px solid #b5e8e5 !important;

    border-radius: 14px !important;

    background: #f0fbfa !important;

    background-image: none !important;

    box-shadow: none !important;

    text-align: left !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps-header {

    margin: 0 0 20px !important;

    padding: 0 0 18px !important;

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

    text-align: left !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps-header > span {

    color: #0c9fa5 !important;

    font-size: .7rem !important;

    font-weight: 800 !important;

    letter-spacing: .08em !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps-header h4 {

    margin: 8px 0 0 !important;

    color: #1b2430 !important;

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

    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;
}

/* Next-step grid */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps-grid {

    display: grid !important;

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

    gap: 12px !important;

    border: 0 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps-grid > div {

    display: grid !important;

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

    gap: 12px !important;

    align-items: start !important;

    min-width: 0 !important;

    padding: 16px !important;

    border: 1px solid #d1eae8 !important;

    border-radius: 10px !important;

    background: #fff !important;
}

/* Step number */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps-grid strong {

    display: grid !important;

    place-items: center !important;

    width: 28px !important;

    height: 28px !important;

    border-radius: 50% !important;

    background: #e4f8f6 !important;

    color: #087f83 !important;

    font-size: .8rem !important;

    font-weight: 800 !important;
}

/* Step description */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps-grid span {

    color: #344255 !important;

    font-size: .8rem !important;

    line-height: 1.55 !important;
}

/* =========================================
   START NEW REQUEST
========================================= */

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

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: min(340px, 100%) !important;

    min-height: 54px !important;

    margin: 24px 0 0 !important;

    padding: 14px 20px !important;

    border: 1px solid #19252d !important;

    border-radius: 10px !important;

    background: #19252d !important;

    background-image: none !important;

    color: #fff !important;

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

    font-size: .85rem !important;

    font-weight: 800 !important;

    text-transform: none !important;

    box-shadow: none !important;
}

/* =========================================
   SUBMITTED REPAIR SUMMARY
========================================= */

/*
 * A submitted repair request is now read-only.
 * Hide the previous selection-step Edit buttons.
 */

html body.homepage-premium-page
#primitive-wizard-container:has(.success-panel)
#pr-selection-cards .card-back {

    display: none !important;
}

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

@media (max-width: 960px) {

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

        padding: 20px 14px !important;

        border-radius: 17px !important;
    }

    /* Stack the success icon and heading. */

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-hero {

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

        gap: 16px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-icon {

        width: 58px !important;

        height: 58px !important;

        font-size: 1.7rem !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-option-header h3 {

        font-size: clamp(1.65rem, 6vw, 2rem) !important;
    }

    /* Full-width reference card. */

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-request-confirmation {

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

        padding: 18px !important;
    }

    /* One-column confirmation details. */

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary {

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

    /*
     * Compact information rows instead of
     * oversized mobile information tiles.
     */

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary-request-layout > div:nth-child(n) {

        display: grid !important;

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

        gap: 12px !important;

        align-items: center !important;

        min-height: 0 !important;

        padding: 15px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary-request-layout > div:first-child {

        display: none !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary-request-layout > div > strong {

        margin: 0 !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary-request-layout > div > span {

        text-align: right !important;
    }

    /* Stack next steps. */

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-next-steps-grid {

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

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

        width: 100% !important;
    }

}

/* Narrow phones */

@media (max-width: 380px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary-request-layout > div:nth-child(n) {

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

        gap: 5px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary-request-layout > div:first-child {

        display: none !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-summary-request-layout > div > span {

        text-align: left !important;
    }

}

/* PHASE 16B: CONFIRMATION CORRECTIONS */

/*
 * Override the original dark-theme option-section-header
 * selectors using the actual #pr-steps-area hierarchy.
 */

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

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

    min-height: 0 !important;

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

    border: 0 !important;

    background: transparent !important;

    text-align: left !important;
}

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

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    color: #1b2430 !important;

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

    font-size: clamp(1.8rem, 3vw, 2.65rem) !important;

    font-weight: 700 !important;

    line-height: 1.15 !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
> .success-panel
.option-section-header.success-option-header
p.success-message {

    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 12px 0 0 !important;

    color: #596578 !important;

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

    font-size: .9rem !important;

    font-weight: 400 !important;

    line-height: 1.65 !important;

    text-align: left !important;
}

/* Remove the original oversized heading spacing. */

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

    min-height: 0 !important;

    margin: 0 0 24px !important;

    padding: 0 0 26px !important;
}

/* Submitted requests are read-only. */

html body.homepage-premium-page
#primitive-wizard-container:has(
    > #pr-main > #pr-steps-area > .success-panel
)
#pr-selection-cards.pr-saas-summary
.blueprint-profile-grid
> .pr-progress-card
> .card-back {

    display: none !important;
}

/* Display the final confirmation stage in the sidebar. */

html body.homepage-premium-page
#primitive-wizard-container:has(
    > #pr-main > #pr-steps-area > .success-panel
)
#pr-selection-cards.pr-saas-summary
#pr-summary-stage-title {

    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 7px 0 0 !important;

    overflow: visible !important;

    clip-path: none !important;

    white-space: normal !important;

    color: #1b2430 !important;

    font-size: .9rem !important;
}

/* Mobile */

@media (max-width: 960px) {

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

        gap: 16px !important;
    }

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

        font-size: clamp(1.65rem, 6vw, 2rem) !important;
    }

}

/*
 * PHASE 18: PREMIUM CONFIRMATION EXPERIENCE
 *
 * Confirmation-only presentation.
 * Existing request submission logic is unchanged.
 */

/* =========================================================
   CONFIRMATION PAGE LAYOUT
========================================================= */

/*
 * After successful submission, the booking wizard is
 * complete. Remove its redundant title and progress UI.
 *
 * Preserve the dynamically inserted service-hours banner.
 */

html body.homepage-premium-page
#primitive-wizard-container:has(
  > #pr-main > #pr-steps-area.animated-area > .success-panel
)
> .pr-header
> :is(
  .pr-header-copy,
  .pr-progress-row,
  .pr-progress-bar-wrap
) {

    display: none !important;
}

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

    min-height: 0 !important;

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

    border: 0 !important;

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

    box-shadow: none !important;
}

/* No empty header when the after-hours banner is absent. */

html body.homepage-premium-page
#primitive-wizard-container:has(
  > #pr-main > #pr-steps-area.animated-area > .success-panel
)
> .pr-header:not(:has(> .service-hours-banner)) {

    display: none !important;
}

/* Remove the completed wizard's redundant sidebar. */

html body.homepage-premium-page
#primitive-wizard-container:has(
  > #pr-main > #pr-steps-area.animated-area > .success-panel
)
> #pr-selection-cards.pr-saas-summary {

    display: none !important;
}

/* Give the confirmation page the full available width. */

@media (min-width: 961px) {

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

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

        grid-template-rows: auto auto !important;

        gap: 0 !important;
    }

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

        grid-column: 1 / -1 !important;

        grid-row: 2 !important;

        width: min(100%, 1050px) !important;
        max-width: 1050px !important;

        margin: 24px auto 30px !important;

        padding: 0 16px !important;
    }

}

/* =========================================================
   CONFIRMATION HERO
========================================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-hero {

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

    gap: 24px !important;

    align-items: center !important;

    padding-bottom: 26px !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-icon {

    width: 62px !important;
    height: 62px !important;

    border-radius: 16px !important;
}

/* =========================================================
   WHAT HAPPENS NEXT
========================================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-next-steps {

    margin: 20px 0 30px !important;

    padding: 24px !important;

    border-radius: 14px !important;
}

/* =========================================================
   REQUEST DETAILS HEADING
========================================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-heading {

    margin: 30px 0 18px !important;

    text-align: left !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-heading > span {

    display: block !important;

    margin-bottom: 8px !important;

    color: #0c9fa5 !important;

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

    letter-spacing: .1em !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-heading h4 {

    margin: 0 !important;

    color: #1b2430 !important;

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

    font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    letter-spacing: -.035em !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-heading p {

    margin: 8px 0 0 !important;

    color: #657386 !important;

    font-size: .85rem !important;

    line-height: 1.5 !important;
}

/* =========================================================
   THREE INFORMATION CARDS
========================================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-grid {

    display: grid !important;

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

    gap: 16px !important;

    align-items: stretch !important;
}

/* Device and repair receives the first full-width row. */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-device {

    grid-column: 1 / -1 !important;
}

/* Uniform cards */

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

    box-sizing: border-box !important;

    min-width: 0 !important;

    padding: clamp(20px, 2.5vw, 28px) !important;

    border: 1px solid #dce3ed !important;

    border-radius: 14px !important;

    background: #fff !important;

    box-shadow:
        0 5px 20px rgba(23, 40, 62, .035) !important;
}

/* Card headers */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-card-heading {

    margin: 0 0 18px !important;

    padding: 0 0 18px !important;

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

    text-align: left !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-card-heading span {

    display: block !important;

    margin-bottom: 8px !important;

    color: #0c9fa5 !important;

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

    letter-spacing: .08em !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-card-heading h4 {

    margin: 0 !important;

    color: #1b2430 !important;

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

    font-size: 1.2rem !important;

    font-weight: 700 !important;

    letter-spacing: -.025em !important;

    line-height: 1.3 !important;
}

/* =========================================================
   INFORMATION ROWS
========================================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-rows {

    display: grid !important;

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

    gap: 0 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-rows > div {

    display: grid !important;

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

    gap: 16px !important;

    align-items: start !important;

    min-width: 0 !important;

    padding: 13px 0 !important;

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

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-rows > div:last-child {

    border-bottom: 0 !important;
}

/* Labels */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-rows > div > strong {

    color: #0c9fa5 !important;

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

    font-size: .68rem !important;

    font-weight: 800 !important;

    letter-spacing: .045em !important;

    line-height: 1.5 !important;

    text-transform: uppercase !important;
}

/* Values */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-rows > div > span {

    min-width: 0 !important;

    color: #344255 !important;

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

    font-size: .85rem !important;

    font-weight: 600 !important;

    line-height: 1.5 !important;

    overflow-wrap: anywhere !important;
}

/* =========================================================
   APPOINTMENT STATUS
========================================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-status {

    display: flex !important;

    align-items: center !important;

    gap: 9px !important;

    width: fit-content !important;

    max-width: 100% !important;

    margin-bottom: 12px !important;

    padding: 10px 13px !important;

    border: 1px solid #bfe9e7 !important;

    border-radius: 9px !important;

    background: #f0fbfa !important;

    color: #087f83 !important;

    font-size: .76rem !important;

    font-weight: 800 !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-status-dot {

    display: block !important;

    flex: 0 0 7px !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: #0c9fa5 !important;
}

/* =========================================================
   ADDITIONAL INFORMATION
========================================================= */

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-extra {

    margin-top: 18px !important;

    padding: 0 20px !important;

    border: 1px solid #dce3ed !important;

    border-radius: 12px !important;

    background: #fff !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-extra > summary {

    padding: 18px 0 !important;

    color: #344255 !important;

    font-size: .83rem !important;

    font-weight: 750 !important;

    cursor: pointer !important;
}

html body.homepage-premium-page
#primitive-wizard-container
.success-panel
.success-receipt-extra[open]
> .success-receipt-rows {

    padding-bottom: 12px !important;

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

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

@media (max-width: 960px) {

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

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

        margin: 0 auto !important;

        padding: 12px 12px 24px !important;
        padding-bottom: 24px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-hero {

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

        gap: 14px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-receipt-grid {

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

        gap: 12px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-receipt-device {

        grid-column: 1 !important;
    }

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

        padding: 18px 16px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-receipt-rows > div {

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

        gap: 12px !important;
    }

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-next-steps {

        margin: 16px 0 24px !important;

        padding: 20px 16px !important;
    }

}

/* Narrow phones */

@media (max-width: 380px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    .success-panel
    .success-receipt-rows > div {

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

        gap: 5px !important;
    }

}