/* Phase 5A: the FOUR non-model selection steps on mobile only.
   Step 4 is owned by booking-model-mobile.css. Homepage, form and desktop untouched. */
@media (max-width: 960px) {
  html body.homepage-premium-page #primitive-wizard-container > #pr-main > #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 18px 32px !important;
    overflow: visible !important;
    border: 1px solid #e0e6ef !important;
    border-radius: 18px !important;
    background: #f9fbfe !important;
    background-image: none !important;
    color: #151c29 !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) .option-section-header:not(.model-option-header) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 0 23px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !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:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) .option-section-header:not(.model-option-header)::before {
    content: none !important;
    display: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) .option-section-header:not(.model-option-header) > span {
    display: block !important;
    width: fit-content !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0c9fa5 !important;
    font: 800 .76rem/1.4 "Manrope", sans-serif !important;
    letter-spacing: .07em !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) .option-section-header:not(.model-option-header) > h3 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: #151c29 !important;
    font: 700 clamp(1.75rem, 7.3vw, 2.3rem)/1.12 "Space Grotesk", sans-serif !important;
    letter-spacing: -.05em !important;
    text-transform: none !important;
    text-align: left !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) .option-section-header:not(.model-option-header) > p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 10px 0 0 !important;
    color: #596578 !important;
    font: 400 .96rem/1.5 "Manrope", sans-serif !important;
    text-align: left !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 110px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 43px 12px 13px !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    grid-template-rows: minmax(82px, auto) !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
    border: 1px solid #dce3ed !important;
    border-radius: 12px !important;
    background: #fff !important;
    background-image: none !important;
    color: #151c29 !important;
    box-shadow: 0 5px 17px rgba(25,40,65,.035) !important;
    text-align: left !important;
    transform: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card::before,
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card > .opt-thumb::before {
    content: none !important;
    display: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 16px !important;
    right: 15px !important;
    bottom: auto !important;
    left: auto !important;
    width: 19px !important;
    height: 19px !important;
    border: 1.5px solid #9aaabd !important;
    border-radius: 50% !important;
    background: #fff !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card:is(.selected, .is-selected, [aria-pressed="true"], [aria-selected="true"]) {
    border-color: #17bbb8 !important;
    background: #f1ffff !important;
    box-shadow: 0 0 0 1px #17bbb8 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card:is(.selected, .is-selected, [aria-pressed="true"], [aria-selected="true"])::after {
    border-color: #17bbb8 !important;
    background: #17bbb8 !important;
    box-shadow: inset 0 0 0 4px #fff !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card > .opt-thumb {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 68px !important;
    max-width: 68px !important;
    min-width: 0 !important;
    height: 82px !important;
    min-height: 0 !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card .opt-thumb-img {
    display: block !important;
    width: 100% !important;
    max-width: 67px !important;
    height: 82px !important;
    max-height: 82px !important;
    margin: auto !important;
    object-fit: contain !important;
    filter: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card > .opt-card-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card .opt-badge {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #617287 !important;
    font: 800 .62rem/1.3 "Manrope", sans-serif !important;
    letter-spacing: .045em !important;
    text-align: left !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card .opt-label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #151c29 !important;
    font: 800 clamp(.9rem, 3.9vw, 1.05rem)/1.32 "Manrope", sans-serif !important;
    text-align: left !important;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card .opt-subtext {
    color: #627184 !important;
    text-align: left !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> .repair-select-panel) .repair-selected-summary > span {
    color: #536578 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> .repair-select-panel) .repair-select-continue {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #19252d !important;
    color: #fff !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> .repair-select-panel) .repair-select-continue:disabled {
    opacity: .45 !important;
  }
}
@media (max-width: 350px) {
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card {
    grid-template-columns: 55px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-right: 37px !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card > .opt-thumb {
    width: 55px !important;
    max-width: 55px !important;
  }
}