/* Phase 5B: mobile repair summary presentation only. Existing sheet mechanics,
   visible-state classes, inert/ARIA behavior and button handlers stay in JS. */
@media (max-width: 960px) {
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-trigger {
    border: 1px solid #dce3ed !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.98) !important;
    background-image: none !important;
    color: #1b2430 !important;
    box-shadow: 0 14px 35px rgba(23,40,62,.18) !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-thumb {
    border: 1px solid #e3e9f1 !important;
    background-color: #f8fbfd !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-copy small {
    color: #109da0 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-copy strong {
    color: #1b2430 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-copy > span {
    color: #657386 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-progress {
    border-color: #bce7e5 !important;
    background: #effcfc !important;
    color: #0c9196 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-chevron {
    color: #15202c !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-surface {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(82svh, 740px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid #e0e7f0 !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    background-image: none !important;
    color: #1b2430 !important;
    box-shadow: 0 -18px 55px rgba(12,23,39,.22) !important;
    scrollbar-color: #becbd8 transparent !important;
    overscroll-behavior: contain !important;
  }
  /* Keep the accessible close button and current-stage title, unlike the desktop summary. */
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    min-height: 65px !important;
    padding: 16px 18px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #e3e9f1 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-kicker {
    display: block !important;
    margin: 0 0 3px !important;
    color: #1b2430 !important;
    font: 700 1.42rem/1.2 "Space Grotesk",sans-serif !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary #pr-summary-stage-title {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    color: #657386 !important;
    font: 500 .74rem/1.4 "Manrope",sans-serif !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-close {
    grid-column: 2 !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border: 1px solid #dce3ed !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1b2430 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-visual {
    display: grid !important;
    grid-template-columns: 90px minmax(0,1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 104px !important;
    margin: 4px 18px 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-image {
    width: 88px !important;
    height: 94px !important;
    background-size: contain !important;
    filter: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary #pr-summary-visual-label {
    color: #253346 !important;
    font-size: .8rem !important;
    text-align: left !important;
    white-space: normal !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-ref-progress-track {
    display: block !important;
    flex: 0 0 auto !important;
    height: 8px !important;
    margin: 4px 18px 0 !important;
    overflow: hidden !important;
    border-radius: 99px !important;
    background: #e1e7ef !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-ref-progress-fill {
    display: block !important;
    width: 0;
    height: 100% !important;
    border-radius: inherit !important;
    background: #25c6c1 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-ref-progress-copy {
    display: block !important;
    margin: 5px 18px 8px !important;
    color: #657386 !important;
    font: 500 .74rem/1.35 "Manrope",sans-serif !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid {
    padding: 0 16px 8px !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card {
    display: grid !important;
    grid-template-columns: 25px minmax(45px,.6fr) minmax(0,1.4fr) 40px !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 51px !important;
    margin: 0 !important;
    padding: 8px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid #e3e9f1 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card:last-child {
    border-bottom: 0 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card.is-current-step {
    margin: 0 !important;
    padding: 8px 2px !important;
    border-bottom-color: #e3e9f1 !important;
    border-radius: 0 !important;
    background: #f4fdfd !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-row-state {
    width: 23px !important;
    height: 23px !important;
    border: 1.5px solid #aab8c7 !important;
    background: #fff !important;
    color: #8391a3 !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-progress-card.is-complete-step .pr-summary-row-state {
    border-color: #24c1bd !important;
    background: #24c1bd !important;
    color: #fff !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .card-heading {
    color: #283343 !important;
    font: 650 .66rem/1.3 "Manrope",sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .card-label {
    color: #1b2430 !important;
    font: 600 .68rem/1.4 "Manrope",sans-serif !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-progress-card.is-upcoming-step .card-label {
    color: #8793a3 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .card-back {
    width: 40px !important;
    min-width: 40px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: #109da0 !important;
    font: 750 .66rem/1 "Manrope",sans-serif !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-footer {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    padding: 11px 18px calc(14px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e3e9f1 !important;
    background: rgba(255,255,255,.98) !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-footer p {
    color: #657386 !important;
    font-size: .67rem !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-footer svg {
    color: #1b2430 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-continue {
    display: flex !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #19252d !important;
    color: #fff !important;
  }
}
@media (max-width: 350px) {
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card {
    grid-template-columns: 23px minmax(42px,.58fr) minmax(0,1.42fr) 37px !important;
    gap: 5px !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-trigger {
    grid-template-columns: 42px minmax(0,1fr) auto 18px !important;
    gap: 7px !important;
    padding-inline: 7px !important;
  }
}
@media (prefers-reduced-transparency: reduce) and (max-width: 960px) {
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-surface,
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .pr-summary-mobile-trigger {
    background: #fff !important;
    backdrop-filter: none !important;
  }
}
/* The same existing selection state driving the desktop progress bar. */
@media (max-width: 960px) {
  #pr-selection-cards.pr-saas-summary[data-completed-steps="0"] .pr-ref-progress-fill { width: 0% !important; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="1"] .pr-ref-progress-fill { width: 20% !important; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="2"] .pr-ref-progress-fill { width: 40% !important; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="3"] .pr-ref-progress-fill { width: 60% !important; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="4"] .pr-ref-progress-fill { width: 80% !important; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="5"] .pr-ref-progress-fill { width: 100% !important; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="0"] .pr-ref-progress-copy::before { content: "0 of 5 complete"; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="1"] .pr-ref-progress-copy::before { content: "1 of 5 complete"; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="2"] .pr-ref-progress-copy::before { content: "2 of 5 complete"; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="3"] .pr-ref-progress-copy::before { content: "3 of 5 complete"; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="4"] .pr-ref-progress-copy::before { content: "4 of 5 complete"; }
  #pr-selection-cards.pr-saas-summary[data-completed-steps="5"] .pr-ref-progress-copy::before { content: "5 of 5 complete"; }
}

/*
 * PHASE 20: PREMIUM PHONE FLOAT
 *
 * Subtle device animation inside the mobile
 * repair summary sheet.
 */

@media (max-width: 960px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-selection-cards.pr-saas-summary[data-mobile-open="true"]
    #pr-summary-image {

        transform-origin: center center;

        animation:
            prPhoneModalEnterP20 500ms ease-out both,
            prPhoneModalFloatP20 6s ease-in-out 500ms infinite;

    }

}

/* Fade in when the summary opens. */

@keyframes prPhoneModalEnterP20 {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

/* Slow premium floating motion. */

@keyframes prPhoneModalFloatP20 {

    0%, 100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-4px)
            scale(1.01);

    }

}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-selection-cards.pr-saas-summary
    #pr-summary-image {

        animation: none !important;

        transform: none !important;

    }

}

/*
 * PHASE 22: MOBILE THUMBNAIL IMAGE FIT
 *
 * Prevent device images from touching or appearing
 * cropped against the edges of the Current Repair
 * thumbnail.
 *
 * Only affects the collapsed mobile summary trigger.
 */

@media (max-width: 960px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-selection-cards.pr-saas-summary
    .pr-summary-mobile-trigger
    > .pr-summary-mobile-thumb {

        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 50px !important;
        min-width: 0 !important;

        height: 50px !important;
        min-height: 50px !important;

        padding: 6px !important;

        flex-shrink: 0 !important;

        align-self: center !important;
        justify-self: center !important;

        background-origin: content-box !important;

        background-size: contain !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

    }

}

/* Smaller mobile screens */

@media (max-width: 350px) {

    html body.homepage-premium-page
    #primitive-wizard-container
    #pr-selection-cards.pr-saas-summary
    .pr-summary-mobile-trigger
    > .pr-summary-mobile-thumb {

        padding: 5px !important;

    }

}