/*
 * iMobile Repair Flow - Shared Stylesheet
 * Consolidated from the customer-facing repair flow pages.
 *
 * IMPORTANT:
 * - Page-specific rules are intentionally isolated by each page's redesign wrapper.
 * - :where(...) is used for isolation without increasing selector specificity.
 * - Similar-looking rules have not been aggressively normalized in this pass, so the
 *   current visual output and responsive behavior remain unchanged.
 */

/* ==========================================================================
   REPAIR LANDING PAGE
   Source: repair.php
   ========================================================================== */
/* Repair landing page redesign - scoped so shared header/footer are unaffected */
.repair-redesign,
.repair-redesign * {
    box-sizing: border-box;
}

.repair-redesign {
    background: #f4f8fe;
    color: #0b1533;
    font-family: "Poppins", sans-serif;
    padding: 14px 0 28px;
}

.repair-redesign a {
    color: inherit;
    text-decoration: none;
}

.repair-redesign button,
.repair-redesign input,
.repair-redesign select,
.repair-redesign textarea {
    font-family: "Poppins", sans-serif;
}

.repair-redesign .repair-shell {
    width: min(100% - 30px, 1320px);
    margin: 0 auto;
    padding: 0;
}

.repair-redesign .repair-panel {
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(20, 47, 86, .055);
}

/* Hide the extra Trustpilot strip: the reference keeps the review proof inside the hero */
.repair-redesign .TrustBox {
    display: none !important;
}

/* ---------------- HERO ---------------- */
.repair-redesign .repair-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: 12px;
    min-height: 300px;
    overflow: hidden;
    padding: 32px 46px 25px;
    background:
        radial-gradient(circle at 76% 43%, rgba(0, 102, 255, .10) 0, rgba(0, 102, 255, .045) 27%, transparent 52%),
        #fff;
}

.repair-redesign .repair-hero::before {
    content: "";
    position: absolute;
    width: 370px;
    height: 370px;
    right: 70px;
    top: -42px;
    border: 3px solid rgba(0, 101, 255, .065);
    border-radius: 50%;
    pointer-events: none;
}

.repair-redesign .repair-hero-content,
.repair-redesign .repair-hero-media {
    position: relative;
    z-index: 1;
}

.repair-redesign .repair-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 13px;
    padding: 5px 8px;
    border-radius: 4px;
    background: #eaf3ff;
    color: #0067ff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.repair-redesign .repair-hero h1 {
    margin: 0 0 10px;
    color: #07112e;
    font-size: clamp(34px, 3.2vw, 43px);
    font-weight: 600;
    letter-spacing: -.7px;
    line-height: 1.04;
}

.repair-redesign .repair-hero-copy {
    max-width: 485px;
    margin: 0 0 19px;
    color: #5c687c;
    font-size: 15px;
    line-height: 1.45;
}

.repair-redesign .repair-hero-actions {
    display: grid;
    grid-template-columns: 174px minmax(250px, 305px);
    gap: 14px;
    align-items: center;
    max-width: 500px;
}

.repair-redesign .repair-primary-btn,
.repair-redesign .repair-map-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #076bff;
    border-radius: 7px;
    background: #076bff;
    box-shadow: 0 7px 17px rgba(0, 101, 255, .20);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.repair-redesign .repair-search-control {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid #d8e1ee;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(17, 42, 76, .08);
}

.repair-redesign .repair-search-control i {
    margin-right: 9px;
    color: #78869a;
    font-size: 16px;
}

.repair-redesign .repair-search-control input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #182238;
    font-size: 14px;
}

.repair-redesign .repair-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 17px;
    margin-top: 22px;
}

.repair-redesign .repair-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    color: #101b35;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

.repair-redesign .repair-trust-item i {
    color: #076bff;
    font-size: 17px;
}

.repair-redesign .repair-trust-item .bi-star {
    color: #16a65a;
}

.repair-redesign .repair-trust-item span span {
    display: block;
    margin-top: 1px;
    color: #667286;
    font-size: 11.5px;
    font-weight: 600;
}

/* Hero artwork: use one transparent composite asset, matching the reference composition */
.repair-redesign .repair-hero-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 240px;
}

.repair-redesign .repair-hero-media::before {
    content: "";
    position: absolute;
    right: 5%;
    top: 50%;
    width: 325px;
    height: 325px;
    transform: translateY(-50%);
    border: 3px solid rgba(0, 101, 255, .065);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(0, 101, 255, .025);
    pointer-events: none;
}

.repair-redesign .repair-hero-media::after {
    content: "";
    position: absolute;
    left: 2%;
    top: 28px;
    width: 52px;
    height: 52px;
    opacity: .65;
    background-image: radial-gradient(circle, #b8d2fb 1.5px, transparent 1.8px);
    background-size: 11px 11px;
    pointer-events: none;
}

.repair-redesign .repair-hero-artwork {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, 535px);
    max-height: 275px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 14px 18px rgba(14, 33, 67, .10));
}

/* ---------------- GENERIC SECTIONS ---------------- */
.repair-redesign .repair-section {
    margin-top: 10px;
    padding: 17px 46px 19px;
}

.repair-redesign .repair-section-title {
    margin: 0 0 13px;
    color: #0a1532;
    /* font-size: 19px; */
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.2;
}

/* ---------------- DEVICE TYPES ---------------- */
.repair-redesign .repair-device-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.repair-redesign .repair-device-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 158px;
    padding: 11px 12px 12px;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 13px rgba(18, 43, 78, .065);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.repair-redesign .repair-device-card:hover,
.repair-redesign .repair-device-card:focus-visible,
.repair-redesign .repair-device-card.is-selected {
    border-color: #0868f7;
    background: #f5f9ff;
    box-shadow: 0 0 0 1px rgba(8, 104, 247, .10), 0 10px 22px rgba(0, 101, 255, .11);
    transform: translateY(-2px);
    outline: none;
}

.repair-redesign .repair-device-card.is-selected::after {
    content: "\2713";
    position: absolute;
    top: 9px;
    right: 9px;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0868f7;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(8, 104, 247, .20);
}

.repair-redesign .repair-device-card:hover .repair-card-label,
.repair-redesign .repair-device-card:focus-visible .repair-card-label,
.repair-redesign .repair-device-card.is-selected .repair-card-label {
    color: #0868f7;
}

.repair-redesign .store-card:hover,
.repair-redesign .repair-shortcut-card:hover {
    border-color: #9fc3ff;
    box-shadow: 0 10px 22px rgba(0, 101, 255, .11);
    transform: translateY(-2px);
}

.repair-redesign .repair-device-image {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 105px;
}

.repair-redesign .repair-device-image img {
    width: auto;
    max-width: 93%;
    height: 108px;
    object-fit: contain;
}

.repair-redesign .repair-card-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    color: #10213e;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.repair-redesign .repair-card-label i {
    color: #0a56cc;
    font-size: 15px;
}

/* ---------------- SHORTCUTS ---------------- */
.repair-redesign .repair-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.repair-redesign .repair-shortcut-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 158px;
    flex-direction: column;
    justify-content: space-between;
    padding: 13px 14px 12px;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 13px rgba(18, 43, 78, .055);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.repair-redesign .repair-shortcut-card:hover,
.repair-redesign .repair-shortcut-card:focus-visible {
    border-color: #0868f7;
    background: #f5f9ff;
    box-shadow: 0 0 0 1px rgba(8, 104, 247, .08), 0 10px 22px rgba(0, 101, 255, .11);
    transform: translateY(-2px);
    outline: none;
}

.repair-redesign .repair-shortcut-icon {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 105px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 12px;
    border-radius: 7px;
    background: #fbfdff;
}

.repair-redesign .repair-shortcut-icon img {
    display: block;
    width: auto;
    max-width: min(100%, 142px);
    height: auto;
    max-height: 70px;
    object-fit: contain;
}

.repair-redesign .repair-shortcut-footer {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
}

.repair-redesign .repair-shortcut-title {
    min-width: 0;
    color: #10213e;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.repair-redesign .repair-shortcut-footer > i {
    flex: 0 0 auto;
    color: #0a56cc;
    font-size: 15px;
    transition: transform .18s ease;
}

.repair-redesign .repair-shortcut-card:hover .repair-shortcut-title,
.repair-redesign .repair-shortcut-card:focus-visible .repair-shortcut-title {
    color: #0868f7;
}

.repair-redesign .repair-shortcut-card:hover .repair-shortcut-footer > i,
.repair-redesign .repair-shortcut-card:focus-visible .repair-shortcut-footer > i {
    transform: translateX(2px);
}

/* ---------------- HOW IT WORKS ---------------- */
.repair-redesign .repair-how-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 22px;
    min-height: 182px;
    padding: 24px 38px 15px;
    border-radius: 9px;
    background: linear-gradient(90deg, #eef6ff 0%, #f8fbff 100%);
}

.repair-redesign .repair-how-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.repair-redesign .repair-how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 38px;
    left: calc(50% + 55px);
    width: calc(100% - 86px);
    border-top: 2px dashed #b8cee9;
}

.repair-redesign .repair-step-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 13px;
    border: 11px solid rgba(0, 101, 255, .06);
    border-radius: 50%;
    background: #fff;
    color: #076bff;
    font-size: 30px;
    box-shadow: 0 7px 18px rgba(29, 73, 125, .075);
}

.repair-redesign .repair-step-number {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #076bff;
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}

.repair-redesign .repair-how-step h3,
.repair-redesign .repair-benefit h3 {
    margin: 0 0 4px;
    color: #0b1533;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.repair-redesign .repair-how-step p,
.repair-redesign .repair-benefit p {
    margin: 0;
    color: #5d687b;
    font-size: 12.5px;
    line-height: 1.45;
}

.repair-redesign .repair-how-step p {
    max-width: 190px;
}

.repair-redesign .repair-how-note {
    display: table;
    margin: -1px auto 0;
    padding: 4px 26px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #0869ee;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

/* ---------------- BENEFITS ---------------- */
.repair-redesign .repair-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.repair-redesign .repair-benefit {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 12px 15px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
}

.repair-redesign .repair-benefit i {
    color: #076bff;
    font-size: 31px;
}


/* ---------------- RESTORED PRODUCTION CONTENT ---------------- */
.repair-redesign .repair-content-section {
    text-align: center;
}

.repair-redesign .repair-content-copy {
    max-width: 1080px;
    margin: 0 auto;
}

.repair-redesign .repair-content-copy h2 {
    margin: 0 0 12px;
    color: #0b1533;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.repair-redesign .repair-content-copy p {
    margin: 0 auto 12px;
    color: #5d687b;
    font-size: 14px;
    line-height: 1.65;
}

.repair-redesign .repair-content-copy p:last-child {
    margin-bottom: 0;
}

.repair-redesign .repair-content-copy a {
    color: #0869ee;
    text-decoration: none;
}

.repair-redesign .repair-content-copy a:hover {
    text-decoration: underline;
}

.repair-redesign .repair-production-banner {
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
}

.repair-redesign .repair-production-banner picture,
.repair-redesign .repair-production-banner img {
    display: block;
    width: 100%;
}

.repair-redesign .repair-production-banner img {
    height: auto;
    object-fit: cover;
}

/* Full production SEO copy retained inside the redesigned shell. */
.repair-redesign .repair-seo-copy {
    text-align: left;
    padding: 24px 30px;
}

.repair-redesign .repair-seo-copy h2 {
    text-align: center;
    margin-bottom: 14px;
}

.repair-redesign .repair-seo-copy p {
    max-width: 1080px;
    margin: 0 auto 13px;
    font-size: 14px;
    line-height: 1.65;
}

.repair-redesign .repair-seo-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .repair-redesign .repair-content-copy h2 {
        font-size: 17px;
    }

    .repair-redesign .repair-content-copy p,
    .repair-redesign .repair-seo-copy p {
        font-size: 13px;
        line-height: 1.6;
    }

    .repair-redesign .repair-seo-copy {
        padding: 16px 13px;
    }

    .repair-redesign .repair-production-banner {
        border-radius: 9px;
    }
}

/* ---------------- STORE FINDER ---------------- */
.repair-redesign #mapsElement {
    position: relative;
}

.repair-redesign #mapsElement.auto-container {
    max-width: none;
}

.repair-redesign .repair-landing-store-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.repair-redesign .repair-landing-store-head .repair-section-title {
    margin-bottom: 0;
}

.repair-redesign .repair-landing-store-head p {
    max-width: 520px;
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
}

.repair-redesign .repair-map-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 9px;
    margin-bottom: 12px;
}

.repair-redesign .repair-map-search-wrap {
    position: relative;
}

.repair-redesign .repair-map-search .form-control {
    width: 100%;
    min-height: 43px;
    padding: 0 13px 0 39px;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
    background: #fff;
    color: #182238;
    font-size: 14px;
    outline: 0;
}

.repair-redesign .repair-map-search .form-control:focus {
    border-color: #8bb8fb;
    box-shadow: 0 0 0 3px rgba(8, 104, 247, .08);
}

.repair-redesign .repair-map-search button {
    min-height: 43px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 14px;
}

.repair-redesign .repair-map-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 3;
    transform: translateY(-50%);
    color: #8290a3;
    font-size: 14px;
}

.repair-redesign .repair-store-layout {
    display: grid;
    grid-template-columns: minmax(330px, .88fr) minmax(430px, 1.25fr);
    gap: 15px;
    align-items: stretch;
}

.repair-redesign .repair-landing-store-list {
    display: grid;
    align-content: start;
    gap: 8px;
    max-height: 466px;
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-width: thin;
}

.repair-redesign .repair-landing-store-option.store-card {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: start;
    width: 100%;
    min-height: 105px;
    margin: 0 !important;
    padding: 12px 11px !important;
    border: 1px solid #cfdae8 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(16, 24, 40, .03);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    appearance: none;
    -webkit-appearance: none;
}

.repair-redesign .repair-landing-store-option.store-card:hover {
    border-color: #98bfff !important;
    box-shadow: 0 6px 16px rgba(8, 104, 247, .07);
    transform: translateY(-1px);
}

.repair-redesign .repair-landing-store-option.store-card.active {
    border-color: #0868f7 !important;
    background: #f4f8ff !important;
    box-shadow: 0 0 0 1px rgba(8, 104, 247, .08);
}

.repair-redesign .repair-landing-store-rank {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3dce8;
    border-radius: 50%;
    background: #fff;
    color: #445064;
    font-size: 12px;
    font-weight: 600;
}

.repair-redesign .repair-landing-store-option.active .repair-landing-store-rank {
    border-color: #0868f7;
    background: #0868f7;
    color: #fff;
}

.repair-redesign .repair-landing-store-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #10213e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.repair-redesign .repair-landing-store-address {
    display: block;
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

.repair-redesign .repair-landing-store-address i {
    margin-right: 4px;
    color: #778397;
}

.repair-redesign .repair-landing-store-meta {
    display: grid;
    gap: 2px;
    margin-top: 6px;
}

.repair-redesign .repair-landing-store-availability,
.repair-redesign .repair-landing-store-next,
.repair-redesign .repair-landing-store-distance {
    display: block;
    font-size: 11.5px;
    line-height: 1.42;
}

.repair-redesign .repair-landing-store-availability {
    color: #18a957;
    font-weight: 500;
}

.repair-redesign .repair-landing-store-next {
    color: #344054;
}

.repair-redesign .repair-landing-store-next strong {
    font-weight: 600;
}

.repair-redesign .repair-landing-store-distance,
.repair-redesign .repair-landing-store-placeholder {
    color: #8a94a3;
}

.repair-redesign .repair-landing-store-arrow {
    align-self: center;
    color: #0868f7;
    font-size: 14px;
}

.repair-redesign .repair-map-card {
    position: relative;
    min-height: 466px;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 9px;
    background: #f1f4f8;
}

.repair-redesign #map_sec iframe {
    display: block;
    width: 100% !important;
    height: 466px !important;
    min-height: 466px;
    border: 0 !important;
}

.repair-redesign .repair-landing-map-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.72);
    color: #536075;
    font-size: 14px;
}

.repair-redesign .repair-map-card.is-loading .repair-landing-map-loading {
    display: flex;
}

.repair-redesign .repair-landing-selected {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-top: 12px;
    padding: 13px 15px;
    border: 1px solid #dce5ef;
    border-radius: 9px;
    background: linear-gradient(90deg, #f9fbff 0%, #fff 65%);
}

.repair-redesign .repair-landing-selected-label {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 500;
}

.repair-redesign .repair-landing-selected-name {
    display: block;
    margin-bottom: 2px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}

.repair-redesign .repair-landing-selected-address {
    display: block;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.repair-redesign .repair-landing-selected-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.repair-redesign .repair-landing-store-link,
.repair-redesign .repair-landing-start-repair {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.repair-redesign .repair-landing-store-link {
    border: 1px solid #0868f7;
    background: #fff;
    color: #0868f7;
}

.repair-redesign .repair-landing-start-repair {
    border: 1px solid #0868f7;
    background: #0868f7;
    color: #fff;
}

.repair-redesign .repair-map-mobile-toggle {
    display: none;
}

@media (max-width: 991px) {
    .repair-redesign .repair-store-layout {
        grid-template-columns: minmax(285px, .9fr) minmax(350px, 1.1fr);
    }
}

@media (max-width: 767px) {
    .repair-redesign .repair-landing-store-head {
        display: block;
    }

    .repair-redesign .repair-landing-store-head p {
        max-width: none;
        margin-top: 5px;
        font-size: 12px;
        text-align: left;
    }

    .repair-redesign .repair-map-search {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .repair-redesign .repair-map-search button {
        display: none;
    }

    .repair-redesign .repair-map-search .form-control {
        min-height: 40px;
        font-size: 13px;
    }

    .repair-redesign .repair-store-layout {
        display: block;
    }

    .repair-redesign .repair-landing-store-list {
        max-height: none;
        overflow: visible;
        gap: 7px;
    }

    .repair-redesign .repair-landing-store-option.store-card {
        min-height: 101px;
        padding: 10px !important;
    }

    .repair-redesign .repair-landing-store-copy strong {
        font-size: 13px;
    }

    .repair-redesign .repair-landing-store-address {
        font-size: 11px;
    }

    .repair-redesign .repair-landing-store-availability,
    .repair-redesign .repair-landing-store-next,
    .repair-redesign .repair-landing-store-distance {
        font-size: 11px;
    }

    .repair-redesign .repair-map-card {
        display: none;
        min-height: 315px;
        margin-top: 9px;
    }

    .repair-redesign .repair-map-card.is-mobile-open {
        display: block;
    }

    .repair-redesign #map_sec iframe {
        height: 315px !important;
        min-height: 315px;
    }

    .repair-redesign .repair-map-mobile-toggle {
        display: inline-flex;
        width: 100%;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 9px;
        border: 1px solid #0868f7;
        border-radius: 7px;
        background: #fff;
        color: #0868f7;
        font-size: 12px;
        font-weight: 600;
    }

    .repair-redesign .repair-landing-selected {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 11px;
    }

    .repair-redesign .repair-landing-selected-label {
        font-size: 11px;
    }

    .repair-redesign .repair-landing-selected-name {
        font-size: 14px;
    }

    .repair-redesign .repair-landing-selected-address {
        font-size: 11px;
    }

    .repair-redesign .repair-landing-selected-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .repair-redesign .repair-landing-store-link,
    .repair-redesign .repair-landing-start-repair {
        min-height: 40px;
        padding: 0 9px;
        font-size: 11.5px;
    }
}

@media (max-width: 399px) {
    .repair-redesign .repair-landing-selected-actions {
        grid-template-columns: 1fr;
    }
}

/* ---------------- FAQ ---------------- */
.repair-redesign .repair-faq-panel {
    overflow: hidden;
}

.repair-redesign .repair-faq-panel > .container {
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
}

.repair-redesign .repair-faq-panel h4:first-of-type {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #0b1533 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.repair-redesign .repair-faq-panel .col-md-12 > p {
    display: none;
}

 

/* .repair-redesign .repair-faq-panel .accordion-item {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d8e3f1 !important;
    border-radius: 7px !important;
    overflow: hidden;
} */

.repair-redesign .repair-faq-panel .accordion-button {
    min-height: 35px;
    padding: 8px 12px !important;
    border-radius: 7px !important;
    color: #14243f !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.repair-redesign .repair-faq-panel .accordion-body {
    padding: 10px 12px !important;
    color: #5d687b;
    font-size: 14px !important;
    line-height: 1.45;
}

/* ---------------- SEO COPY ---------------- */
.repair-redesign .repair-seo-copy {
    padding: 15px 28px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f9fbfe 0%, #eef5ff 100%);
    color: #536178;
    /* font-size: 10px;  */
    line-height: 1.45;
    text-align: center;
}

.repair-redesign .repair-seo-copy h2 {
    margin: 0 0 7px;
    color: #10213e;
    /* font-size: 15px; */
    font-weight: 600;
}

.repair-redesign .repair-seo-copy p {
    max-width: 950px;
    margin: 0 auto 5px;
}

.repair-redesign .repair-seo-copy p:last-child {
    margin-bottom: 0;
}

/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 1200px) {
    .repair-redesign .repair-hero h1 {
        white-space: nowrap;
    }
}

@media (max-width: 1199px) {
    .repair-redesign .repair-shell {
        width: min(100% - 24px, 1120px);
    }

    .repair-redesign .repair-hero {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
        padding-left: 32px;
        padding-right: 32px;
    }

    .repair-redesign .repair-section {
        padding-left: 32px;
        padding-right: 32px;
    }

    .repair-redesign .repair-hero-actions {
        grid-template-columns: 165px minmax(220px, 1fr);
    }

    .repair-redesign .repair-device-grid {
        gap: 12px;
    }

    .repair-redesign .repair-shortcut-grid {
        gap: 14px;
    }

    .repair-redesign .repair-how-grid {
        gap: 30px;
        padding-left: 35px;
        padding-right: 35px;
    }

    .repair-redesign .repair-how-step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 991px) {
    .repair-redesign .repair-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .repair-redesign .repair-hero h1 {
        white-space: normal;
    }

    .repair-redesign .repair-hero-media {
        min-height: 220px;
    }

    .repair-redesign .repair-hero-artwork {
        width: min(100%, 560px);
        max-height: 255px;
        margin: 0 auto;
    }

    .repair-redesign .repair-device-grid,
    .repair-redesign .repair-shortcut-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .repair-redesign .repair-how-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
    }

    .repair-redesign .repair-how-step:not(:last-child)::after {
        display: none;
    }

    .repair-redesign .repair-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repair-redesign .repair-store-layout {
        grid-template-columns: 1fr;
    }

    .repair-redesign .repair-store-layout > div:first-child {
        padding-bottom: 0;
    }

    .repair-redesign #map_sec .view-store {
        position: static;
        margin-top: 10px;
    }

    .repair-redesign .map-store-list {
        max-height: 280px;
    }
}

@media (max-width: 767px) {
    .repair-redesign {
        padding-top: 8px;
    }

    .repair-redesign .repair-shell {
        width: calc(100% - 16px);
    }

    .repair-redesign .repair-hero,
    .repair-redesign .repair-section {
        padding: 20px 15px;
    }

    .repair-redesign .repair-hero-actions,
    .repair-redesign .repair-map-search,
    .repair-redesign .repair-faq-panel #repairAccordion {
        grid-template-columns: 1fr;
    }

    .repair-redesign .repair-primary-btn,
    .repair-redesign .repair-map-search button {
        width: 100%;
    }

    .repair-redesign .repair-how-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
    }

    .repair-redesign .repair-how-step p {
        max-width: 260px;
    }

    .repair-redesign .repair-how-note {
        margin-top: 8px;
        padding-left: 16px;
        padding-right: 16px;
        text-align: center;
    }

    .repair-redesign .repair-device-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repair-redesign .repair-benefit-grid {
        grid-template-columns: 1fr;
    }

    .repair-redesign .repair-shortcut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .repair-redesign .repair-how-grid {
        padding: 20px 15px;
    }

    .repair-redesign .repair-step-icon {
        width: 64px;
        height: 64px;
        border-width: 8px;
        font-size: 26px;
    }

    .repair-redesign .repair-hero-artwork {
        width: min(100%, 520px);
        max-height: 240px;
    }
}

@media (max-width: 479px) {
    .repair-redesign .repair-device-grid {
        grid-template-columns: 1fr;
    }

    .repair-redesign .repair-hero h1 {
        font-size: 34px;
    }

    .repair-redesign .repair-trust-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================
   MOBILE REFINEMENT
   Keeps desktop/tablet layout unchanged.
   ========================================================== */
@media (max-width: 767px) {
    .repair-redesign {
        padding-top: 6px;
    }

    .repair-redesign .repair-shell {
        width: calc(100% - 12px);
    }

    /* Hero: compact mobile composition */
    .repair-redesign .repair-hero {
        grid-template-columns: 1fr;
        gap: 4px;
        min-height: 0;
        padding: 14px 12px 10px;
        border-radius: 10px;
    }

    .repair-redesign .repair-hero::before {
        width: 235px;
        height: 235px;
        right: -54px;
        top: 155px;
        border-width: 2px;
        opacity: .8;
    }

    .repair-redesign .repair-eyebrow {
        margin-bottom: 8px;
        padding: 4px 6px;
        font-size: 11px;
    }

    .repair-redesign .repair-hero h1 {
        margin-bottom: 6px;
        font-size: 27px;
        letter-spacing: -.4px;
        line-height: 1.06;
    }

    .repair-redesign .repair-hero-copy {
        max-width: none;
        margin-bottom: 11px;
        font-size: 13px;
        line-height: 1.38;
    }

    .repair-redesign .repair-hero-actions {
        grid-template-columns: 1fr;
        gap: 7px;
        max-width: none;
    }

    .repair-redesign .repair-primary-btn,
    .repair-redesign .repair-search-control {
        min-height: 38px;
    }

    .repair-redesign .repair-primary-btn {
        padding: 0 12px;
        font-size: 12.5px;
    }

    .repair-redesign .repair-search-control {
        padding: 0 11px;
    }

    .repair-redesign .repair-search-control i {
        margin-right: 7px;
        font-size: 14px;
    }

    .repair-redesign .repair-search-control input {
        font-size: 12px;
    }

    .repair-redesign .repair-trust-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 9px;
        margin-top: 12px;
    }

    .repair-redesign .repair-trust-item {
        gap: 5px;
        min-height: 22px;
        font-size: 11px;
    }

    .repair-redesign .repair-trust-item i {
        font-size: 14px;
    }

    .repair-redesign .repair-trust-item span span {
        font-size: 10.5px;
    }

    .repair-redesign .repair-hero-media {
        min-height: 0;
        margin-top: 4px;
        padding: 0 2px;
    }

    .repair-redesign .repair-hero-artwork {
        width: min(94%, 360px);
        max-height: 170px;
        margin: 0 auto;
        object-position: center bottom;
        filter: drop-shadow(0 9px 12px rgba(14, 33, 67, .09));
    }

    /* Device cards: two compact cards per row */
    .repair-redesign .repair-section {
        padding: 13px 10px 14px;
    }

    .repair-redesign .repair-section-title {
        margin-bottom: 10px;
        font-size: 15px;
    }

    .repair-redesign .repair-device-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .repair-redesign .repair-device-card {
        min-height: 122px;
        padding: 7px 8px 8px;
        border-radius: 7px;
        box-shadow: 0 4px 10px rgba(18, 43, 78, .05);
    }

    .repair-redesign .repair-device-image {
        min-height: 78px;
    }

    .repair-redesign .repair-device-image img {
        max-width: 88%;
        height: 76px;
    }

    .repair-redesign .repair-card-label {
        gap: 5px;
        margin-top: 4px;
        font-size: 11.5px;
        line-height: 1.15;
    }

    .repair-redesign .repair-card-label i {
        font-size: 13px;
    }

    /* Popular brand shortcuts retain the visual weight of device cards. */
    .repair-redesign .repair-shortcut-card {
        min-height: 126px;
        padding: 9px 9px 10px;
        border-radius: 7px;
    }

    .repair-redesign .repair-shortcut-icon {
        height: 82px;
        padding: 6px 9px;
    }

    .repair-redesign .repair-shortcut-icon img {
        max-width: min(100%, 112px);
        max-height: 54px;
    }

    .repair-redesign .repair-shortcut-footer {
        gap: 5px;
        margin-top: 5px;
    }

    .repair-redesign .repair-shortcut-title {
        font-size: 12px;
        line-height: 1.2;
    }

    .repair-redesign .repair-shortcut-footer > i {
        font-size: 13px;
    }

    .repair-redesign .repair-how-grid {
        gap: 14px;
        min-height: 0;
        padding: 16px 12px;
    }

    .repair-redesign .repair-step-icon {
        width: 56px;
        height: 56px;
        border-width: 7px;
        font-size: 23px;
    }

    .repair-redesign .repair-step-number {
        width: 19px;
        height: 19px;
        font-size: 11px;
    }

    .repair-redesign .repair-benefit {
        min-height: 64px;
        padding: 9px 11px;
    }
}

@media (max-width: 479px) {
    /* Override the earlier single-column rule: two device cards fit better on phones. */
    .repair-redesign .repair-device-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repair-redesign .repair-hero h1 {
        font-size: 27px;
    }
}

@media (max-width: 359px) {
    .repair-redesign .repair-device-card {
        min-height: 114px;
    }

    .repair-redesign .repair-device-image {
        min-height: 70px;
    }

    .repair-redesign .repair-device-image img {
        height: 68px;
    }

    .repair-redesign .repair-card-label {
        font-size: 11px;
    }
}


/* ==========================================================
   MOBILE HERO / DEVICE LIST CORRECTION - V2
   Desktop/tablet remain unchanged.
   ========================================================== */
@media (max-width: 767px) {
    /*
     * Flatten only the hero content wrapper on phones so the artwork
     * can sit between the search controls and the four trust benefits.
     *
     * Mobile order becomes:
     * eyebrow -> title -> copy -> CTA/search -> artwork -> trust benefits
     */
    .repair-redesign .repair-hero-content {
        display: contents;
    }

    .repair-redesign .repair-eyebrow {
        order: 1;
        position: relative;
        z-index: 3;
        justify-self: start;
    }

    .repair-redesign .repair-hero h1 {
        order: 2;
        position: relative;
        z-index: 3;
    }

    .repair-redesign .repair-hero-copy {
        order: 3;
        position: relative;
        z-index: 3;
    }

    .repair-redesign .repair-hero-actions {
        order: 4;
        position: relative;
        z-index: 4;
        width: 100%;
    }

    .repair-redesign .repair-hero-media {
        order: 5;
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 178px;
        margin: 8px 0 3px;
        padding: 0;
        overflow: visible;
        align-items: center;
        justify-content: center;
    }

    .repair-redesign .repair-trust-row {
        order: 6;
        position: relative;
        z-index: 4;
        width: 100%;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid #edf2f8;
    }

    /*
     * Remove the large outer hero ring on mobile. It was being clipped by
     * the hero card and made the background look cut off.
     */
    .repair-redesign .repair-hero::before {
        display: none;
    }

    /*
     * Keep one contained decorative ring behind the transparent artwork.
     */
    .repair-redesign .repair-hero-media::before {
        display: block;
        right: 50%;
        top: 50%;
        width: 168px;
        height: 168px;
        transform: translate(50%, -50%);
        border-width: 2px;
        box-shadow: 0 0 0 26px rgba(0, 101, 255, .022);
        opacity: 1;
    }

    .repair-redesign .repair-hero-media::after {
        left: 8px;
        top: 17px;
        width: 38px;
        height: 38px;
        background-size: 8px 8px;
        opacity: .45;
    }

    .repair-redesign .repair-hero-artwork {
        position: relative;
        z-index: 2;
        width: min(100%, 325px);
        max-height: 165px;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
        filter: drop-shadow(0 8px 10px rgba(14, 33, 67, .08));
    }

    /*
     * Ensure the search control stays in normal document flow and never
     * visually overlaps the hero artwork.
     */
    .repair-redesign .repair-search-control {
        position: relative;
        z-index: 5;
        width: 100%;
        background: #fff;
    }

    /*
     * One device type per row, but keep the row compact.
     */
    .repair-redesign .repair-device-grid,
    .repair-redesign .repair-device-grid {
        grid-template-columns: 1fr !important;
        gap: 7px;
    }

    .repair-redesign .repair-device-card {
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        align-items: center;
        min-height: 82px;
        padding: 6px 10px;
    }

    .repair-redesign .repair-device-image {
        min-height: 68px;
        height: 68px;
        justify-content: center;
    }

    .repair-redesign .repair-device-image img {
        width: auto;
        max-width: 78px;
        height: 64px;
        object-fit: contain;
    }

    .repair-redesign .repair-card-label {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding-left: 7px;
        font-size: 12.5px;
    }

    .repair-redesign .repair-card-label i {
        font-size: 14px;
    }
}

@media (max-width: 479px) {
    .repair-redesign .repair-device-grid {
        grid-template-columns: 1fr !important;
    }

    .repair-redesign .repair-hero-artwork {
        width: min(100%, 305px);
        max-height: 158px;
    }
}

/* ==========================================================================
   SELECT DEVICE
   Source: repair-select-device.php
   ========================================================================== */
/* ==========================================================
   REPAIR SELECT DEVICE REDESIGN
   Scoped to this page so shared header/footer remain untouched.
   ========================================================== */
.repair-device-redesign,
.repair-device-redesign * {
    box-sizing: border-box;
}

.repair-device-redesign {
    --repair-blue: #0868f7;
    --repair-blue-soft: #eef5ff;
    --repair-ink: #111827;
    --repair-muted: #697386;
    --repair-border: #dce4ef;
    --repair-bg: #f4f8fd;
    --repair-card: #ffffff;
    background: var(--repair-bg);
    color: var(--repair-ink);
    font-family: "Poppins", sans-serif;
    padding: 16px 0 34px;
}

.repair-device-redesign button,
.repair-device-redesign input {
    font-family: inherit;
}

:where(.repair-device-redesign) .repair-device-shell {
    width: min(100% - 28px, 1320px);
    margin: 0 auto;
}

/* ---------- Main surface ---------- */
:where(.repair-device-redesign) .repair-device-main-card {
    background: var(--repair-card);
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(30, 55, 90, .06);
    padding: 18px 46px 28px;
}

/* ---------- Progress ---------- */
:where(.repair-device-redesign) .repair-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 16px 32px;
}

:where(.repair-device-redesign) .repair-progress::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 12.5%;
    right: 12.5%;
    height: 4px;
    border-radius: 999px;
    background: #e4e9f0;
}

:where(.repair-device-redesign) .repair-progress::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 12.5%;
    width: 25%;
    height: 4px;
    border-radius: 999px;
    background: var(--repair-blue);
}

:where(.repair-device-redesign) .repair-progress-step {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #7d8796;
    font-size: 15px;
    font-weight: 500;
}

:where(.repair-device-redesign) .repair-progress-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: #e7ebf0;
    color: #8b95a3;
    font-size: 14px;
    font-weight: 700;
}

:where(.repair-device-redesign) .repair-progress-step.is-active {
    color: var(--repair-blue);
}

:where(.repair-device-redesign) .repair-progress-step.is-active .repair-progress-number {
    background: var(--repair-blue);
    color: #fff;
}

/* ---------- Intro ---------- */
:where(.repair-device-redesign) .repair-selector-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 510px);
    gap: 32px;
    align-items: end;
    margin-bottom: 28px;
}

:where(.repair-device-redesign) .repair-selector-title {
    margin: 0 0 6px;
    color: #101010;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -.7px;
    line-height: 1.08;
}

:where(.repair-device-redesign) .repair-selector-subtitle {
    margin: 0;
    color: var(--repair-muted);
    font-size: 14px;
    line-height: 1.5;
}

:where(.repair-device-redesign) .repair-device-search {
    position: relative;
}

:where(.repair-device-redesign) .repair-device-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #7a8798;
    font-size: 18px;
}

:where(.repair-device-redesign) .repair-device-search input {
    width: 100%;
    height: 54px;
    padding: 0 18px 0 52px;
    border: 1px solid #bec9d7;
    border-radius: 10px;
    outline: 0;
    background: #fff;
    color: #1d2735;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(32, 55, 84, .03);
}

:where(.repair-device-redesign) .repair-device-search input:focus {
    border-color: var(--repair-blue);
    box-shadow: 0 0 0 3px rgba(8, 104, 247, .10);
}

/* ---------- Brand rail ---------- */
:where(.repair-device-redesign) .repair-brand-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

:where(.repair-device-redesign) .repair-brand-card,
:where(.repair-device-redesign) .repair-more-brands {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 12px;
    border: 1px solid var(--repair-border);
    border-radius: 9px;
    background: #fff;
    color: #202937;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: .18s ease;
}

:where(.repair-device-redesign) .repair-brand-card:hover,
:where(.repair-device-redesign) .repair-brand-card.is-active {
    border-color: var(--repair-blue);
    color: var(--repair-blue);
    box-shadow: 0 0 0 1px var(--repair-blue);
}

:where(.repair-device-redesign) .repair-brand-card img {
    width: 34px;
    height: 28px;
    object-fit: contain;
}

:where(.repair-device-redesign) .repair-brand-extra {
    display: none;
}

:where(.repair-device-redesign) .repair-brand-row.show-all .repair-brand-extra {
    display: flex;
}

:where(.repair-device-redesign) .repair-more-brands {
    cursor: pointer;
}

:where(.repair-device-redesign) .repair-more-brands i {
    font-size: 20px;
}

/* ---------- Device browser ---------- */
:where(.repair-device-redesign) .repair-device-browser {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--repair-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(21, 48, 84, .06);
}

:where(.repair-device-redesign) .repair-series-sidebar {
    padding: 24px 10px 24px 0;
    border-right: 1px solid #e5eaf0;
}

:where(.repair-device-redesign) .repair-series-title {
    margin: 0 0 18px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 600;
}

:where(.repair-device-redesign) .repair-series-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

:where(.repair-device-redesign) .repair-series-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 9px 18px 9px 28px;
    border: 0;
    background: transparent;
    color: #6d7787;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
}

:where(.repair-device-redesign) .repair-series-btn i {
    width: 20px;
    color: #8290a1;
    font-size: 18px;
    text-align: center;
}

:where(.repair-device-redesign) .repair-series-btn.is-active {
    background: #eef5ff;
    color: var(--repair-blue);
    font-weight: 500;
}

:where(.repair-device-redesign) .repair-series-btn.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--repair-blue);
}

:where(.repair-device-redesign) .repair-series-btn.is-active i {
    color: var(--repair-blue);
}

:where(.repair-device-redesign) .repair-products-panel {
    min-width: 0;
    padding: 24px 20px 20px;
}

:where(.repair-device-redesign) .repair-products-heading {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 600;
}

:where(.repair-device-redesign) .repair-products-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

:where(.repair-device-redesign) .repair-product-wrap {
    min-width: 0;
}

:where(.repair-device-redesign) .repair-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 205px;
    padding: 14px 12px 12px;
    border: 1px solid var(--repair-border);
    border-radius: 10px;
    background: #fff;
    color: #1b2431;
    text-align: center;
    text-decoration: none;
    transition: .18s ease;
}

:where(.repair-device-redesign) .repair-product-card:hover {
    border-color: #aac8f7;
    box-shadow: 0 8px 22px rgba(21, 69, 128, .08);
    transform: translateY(-1px);
}

:where(.repair-device-redesign) .repair-product-card.is-selected {
    border-color: var(--repair-blue);
    box-shadow: 0 0 0 1px var(--repair-blue);
}

:where(.repair-device-redesign) .repair-product-check {
    position: absolute;
    top: -10px;
    right: -10px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--repair-blue);
    color: #fff;
    font-size: 14px;
}

:where(.repair-device-redesign) .repair-product-card.is-selected .repair-product-check {
    display: flex;
}

:where(.repair-device-redesign) .repair-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 135px;
    margin-bottom: 9px;
}

:where(.repair-device-redesign) .repair-product-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 125px;
    object-fit: contain;
}

:where(.repair-device-redesign) .repair-product-name {
    margin-top: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

:where(.repair-device-redesign) .repair-no-results {
    display: none;
    padding: 48px 20px;
    color: #687386;
    text-align: center;
}

:where(.repair-device-redesign) .repair-no-results.show {
    display: block;
}

/* ---------- Selected device confirmation ---------- */
:where(.repair-device-redesign) .repair-device-selection-confirmation {
    display: none;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    width: 100%;
    /* max-width: 900px; */
    min-height: 58px;
    margin: 17px auto 0;
    padding: 13px 15px;
    border: 1px solid #b9e4c9;
    border-radius: 9px;
    background: #f2fbf5;
    color: #315b40;
}

:where(.repair-device-redesign) .repair-device-selection-confirmation.is-visible {
    display: grid;
}

:where(.repair-device-redesign) .repair-device-selection-confirmation-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ddf4e5;
    color: #16864b;
    font-size: 17px;
    box-shadow: none;
}

:where(.repair-device-redesign) .repair-device-selection-confirmation-copy {
    min-width: 0;
}

:where(.repair-device-redesign) .repair-device-selection-confirmation-copy strong {
    display: block;
    margin-bottom: 2px;
    color: #1f5130;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

:where(.repair-device-redesign) .repair-device-selection-confirmation-copy span {
    display: block;
    color: #41664d;
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Selected device / compact help ---------- */
:where(.repair-device-redesign) .repair-selector-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 26px;
}

:where(.repair-device-redesign) .repair-device-selection-confirmation.is-visible + .repair-selector-footer {
    margin-top: 12px;
}

:where(.repair-device-redesign) .repair-selected-card {
    min-height: 112px;
    border: 1px solid var(--repair-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(25, 51, 82, .04);
}

:where(.repair-device-redesign) .repair-selected-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: center;
    padding: 14px 20px;
}

:where(.repair-device-redesign) .repair-selected-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 78px;
}

:where(.repair-device-redesign) .repair-selected-thumb img {
    max-width: 100%;
    max-height: 76px;
    object-fit: contain;
}

:where(.repair-device-redesign) .repair-selected-label {
    margin-bottom: 3px;
    color: #687386;
    font-size: 14px;
}

:where(.repair-device-redesign) .repair-selected-title {
    color: #111827;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

:where(.repair-device-redesign) .repair-selected-copy {
    min-width: 0;
}

:where(.repair-device-redesign) .repair-device-help-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #687386;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

:where(.repair-device-redesign) .repair-device-help-link > i:first-child {
    color: #7b8798;
    font-size: 13px;
}

:where(.repair-device-redesign) .repair-device-help-link strong {
    color: var(--repair-blue);
    font-weight: 600;
}

:where(.repair-device-redesign) .repair-device-help-link > i:last-child {
    color: var(--repair-blue);
    font-size: 15px;
    transition: transform .18s ease;
}

:where(.repair-device-redesign) .repair-device-help-link:hover strong,
:where(.repair-device-redesign) .repair-device-help-link:focus-visible strong {
    text-decoration: underline;
}

:where(.repair-device-redesign) .repair-device-help-link:hover > i:last-child,
:where(.repair-device-redesign) .repair-device-help-link:focus-visible > i:last-child {
    transform: translateX(2px);
}

:where(.repair-device-redesign) .repair-device-help-link:focus-visible {
    outline: 2px solid rgba(8, 104, 247, .28);
    outline-offset: 4px;
    border-radius: 3px;
}

:where(.repair-device-redesign) .repair-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 8px;
    background: var(--repair-blue);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(8, 104, 247, .16);
}

:where(.repair-device-redesign) .repair-continue-btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* ---------- Existing SEO/FAQ content ---------- */
:where(.repair-device-redesign) .repair-device-seo {
    margin-top: 24px;
    padding: 22px 24px;
    border: 1px solid #e4eaf2;
    border-radius: 12px;
    background: #fff;
}

:where(.repair-device-redesign) .repair-device-seo .repair_content {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    :where(.repair-device-redesign) .repair-device-main-card {
        padding-left: 28px;
        padding-right: 28px;
    }

    :where(.repair-device-redesign) .repair-brand-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    :where(.repair-device-redesign) .repair-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    :where(.repair-device-redesign) .repair-selector-intro {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    :where(.repair-device-redesign) .repair-device-browser {
        grid-template-columns: 1fr;
    }

    :where(.repair-device-redesign) .repair-series-sidebar {
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid #e5eaf0;
    }

    :where(.repair-device-redesign) .repair-series-title {
        display: none;
    }

    :where(.repair-device-redesign) .repair-series-list {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
    }

    :where(.repair-device-redesign) .repair-series-btn {
        flex: 0 0 auto;
        width: auto;
        min-height: 40px;
        padding: 8px 13px;
        border: 1px solid var(--repair-border);
        border-radius: 999px;
        background: #fff;
        white-space: nowrap;
    }

    :where(.repair-device-redesign) .repair-series-btn.is-active::before {
        display: none;
    }

    :where(.repair-device-redesign) .repair-series-btn.is-active {
        border-color: var(--repair-blue);
        background: var(--repair-blue-soft);
    }

    :where(.repair-device-redesign) .repair-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(.repair-device-redesign) .repair-selector-footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .repair-device-redesign {
        padding-top: 8px;
    }

    :where(.repair-device-redesign) .repair-device-shell {
        width: calc(100% - 12px);
    }

    :where(.repair-device-redesign) .repair-device-main-card {
        padding: 14px 10px 18px;
        border-radius: 10px;
    }

    :where(.repair-device-redesign) .repair-progress {
        margin: 0 0 22px;
    }

    :where(.repair-device-redesign) .repair-progress::before,
:where(.repair-device-redesign) .repair-progress::after {
        top: 13px;
    }

    :where(.repair-device-redesign) .repair-progress-number {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
        font-size: 13px;
    }

    :where(.repair-device-redesign) .repair-progress-step {
        font-size: 11px;
    }

    :where(.repair-device-redesign) .repair-selector-title {
        font-size: 24px;
    }

    :where(.repair-device-redesign) .repair-selector-subtitle {
        font-size: 13px;
    }

    :where(.repair-device-redesign) .repair-device-search input {
        height: 44px;
        padding-left: 42px;
        font-size: 13px;
    }

    :where(.repair-device-redesign) .repair-device-search i {
        left: 14px;
        font-size: 15px;
    }

    :where(.repair-device-redesign) .repair-brand-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin-right: -10px;
        padding: 1px 10px 5px 0;
        scrollbar-width: thin;
    }

    :where(.repair-device-redesign) .repair-brand-card,
:where(.repair-device-redesign) .repair-more-brands {
        flex: 0 0 126px;
        min-height: 48px;
        font-size: 12px;
    }

    :where(.repair-device-redesign) .repair-brand-card img {
        width: 27px;
        height: 23px;
    }

    :where(.repair-device-redesign) .repair-brand-extra {
        display: flex;
    }

    :where(.repair-device-redesign) .repair-more-brands {
        display: none;
    }

    :where(.repair-device-redesign) .repair-products-panel {
        padding: 16px 10px 12px;
    }

    :where(.repair-device-redesign) .repair-products-heading {
        margin-bottom: 12px;
        font-size: 15px;
    }

    :where(.repair-device-redesign) .repair-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    :where(.repair-device-redesign) .repair-product-card {
        min-height: 164px;
        padding: 10px 8px 9px;
    }

    :where(.repair-device-redesign) .repair-product-image {
        height: 106px;
        margin-bottom: 5px;
    }

    :where(.repair-device-redesign) .repair-product-image img {
        height: 100px;
    }

    :where(.repair-device-redesign) .repair-product-name {
        font-size: 12.5px;
    }

    /*
     * Keep the selected check fully inside the card on mobile.
     * The desktop badge intentionally overlaps the corner, but the
     * mobile product grid clips that overlap to keep the grid contained.
     */
    :where(.repair-device-redesign) .repair-product-check {
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        border-width: 2px;
        font-size: 13px;
        z-index: 3;
    }

    :where(.repair-device-redesign) .repair-device-selection-confirmation {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
        min-height: 52px;
        margin-top: 14px;
        padding: 9px 10px;
        border-radius: 8px;
    }

    :where(.repair-device-redesign) .repair-device-selection-confirmation-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    :where(.repair-device-redesign) .repair-device-selection-confirmation-copy strong {
        margin-bottom: 1px;
        font-size: 12px;
    }

    :where(.repair-device-redesign) .repair-device-selection-confirmation-copy span {
        font-size: 11px;
        line-height: 1.4;
    }

    :where(.repair-device-redesign) .repair-device-selection-confirmation.is-visible + .repair-selector-footer {
        margin-top: 9px;
    }

    :where(.repair-device-redesign) .repair-selected-card {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }

    :where(.repair-device-redesign) .repair-selected-thumb {
        width: 52px;
        height: 58px;
    }

    :where(.repair-device-redesign) .repair-selected-thumb img {
        max-height: 56px;
    }

    :where(.repair-device-redesign) .repair-selected-title {
        font-size: 14px;
    }

    :where(.repair-device-redesign) .repair-continue-btn {
        grid-column: 1 / -1;
        min-height: 44px;
        margin-top: 2px;
        font-size: 14px;
    }

    :where(.repair-device-redesign) .repair-device-help-link {
        margin-top: 7px;
        gap: 4px;
        font-size: 11.5px;
    }
}

@media (max-width: 399px) {
    :where(.repair-device-redesign) .repair-product-card {
        min-height: 154px;
    }

    :where(.repair-device-redesign) .repair-product-image {
        height: 96px;
    }

    :where(.repair-device-redesign) .repair-product-image img {
        height: 90px;
    }
}

/* ==========================================================
   MOBILE CONTAINMENT FIX
   Shared site styles can give cards/images intrinsic widths that
   are wider than the redesigned device browser. Keep every level
   of the series + product browser shrinkable inside the viewport.
   ========================================================== */
@media (max-width: 767.98px) {
    .repair-device-redesign,
:where(.repair-device-redesign) .repair-device-shell,
:where(.repair-device-redesign) .repair-device-main-card,
:where(.repair-device-redesign) .repair-device-browser,
:where(.repair-device-redesign) .repair-series-sidebar,
:where(.repair-device-redesign) .repair-products-panel,
:where(.repair-device-redesign) .repair-products-grid,
:where(.repair-device-redesign) .repair-product-wrap,
:where(.repair-device-redesign) .repair-product-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .repair-device-redesign {
        width: 100%;
        overflow-x: clip;
    }

    :where(.repair-device-redesign) .repair-device-shell {
        width: calc(100% - 12px);
        overflow: visible;
    }

    :where(.repair-device-redesign) .repair-device-main-card {
        width: 100%;
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-device-browser {
        display: block;
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-series-sidebar {
        width: 100%;
        padding: 12px 10px;
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-series-list {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 7px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    :where(.repair-device-redesign) .repair-series-btn {
        flex: 0 0 auto;
        width: auto !important;
        max-width: calc(100vw - 58px) !important;
        min-height: 42px;
        padding: 8px 14px;
        overflow: hidden;
        scroll-snap-align: start;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :where(.repair-device-redesign) .repair-series-btn span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :where(.repair-device-redesign) .repair-products-panel {
        width: 100%;
        padding: 15px 10px 12px;
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-products-heading {
        width: 100%;
        overflow-wrap: anywhere;
    }

    :where(.repair-device-redesign) .repair-products-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        align-items: stretch;
    }

    :where(.repair-device-redesign) .repair-product-wrap {
        width: 100%;
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-product-card {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none;
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-product-card:hover {
        transform: none;
    }

    :where(.repair-device-redesign) .repair-product-image {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-product-image img {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto;
        object-fit: contain;
    }

    :where(.repair-device-redesign) .repair-product-name {
        display: block;
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
        text-align: center;
    }
}

@media (max-width: 479.98px) {
    :where(.repair-device-redesign) .repair-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    :where(.repair-device-redesign) .repair-product-card {
        min-height: 150px;
        padding: 9px 6px 8px;
    }

    :where(.repair-device-redesign) .repair-product-image {
        height: 92px;
    }

    :where(.repair-device-redesign) .repair-product-image img {
        max-height: 88px;
        height: auto;
    }

    :where(.repair-device-redesign) .repair-product-name {
        font-size: 12px;
        line-height: 1.25;
    }
}

/* ==========================================================================
   SELECT SERVICE
   Source: repair-select-service.php
   ========================================================================== */
.chat_live_inline div {
        display: inline !important;
    }

    @media (max-width: 575.98px) {

        .multi-steps-2>li,
        .multi-steps>li {
            display: table-cell;
            font-size: 12px !important;
            font-weight: 600;
            line-height: 40px;
            text-align: center;
            position: relative;
        }

        .star-ratings,
        .star-ratings-list {
            unicode-bidi: bidi-override;
            color: #3c3838;
            font-size: 14px;
            padding: 0;
            position: relative;
        }
    }

    @media (min-width: 575.98px) {
        .custom-tooltip .tooltip-inner {
            max-width: 350px !important;
            /* wider than default 200px */
            white-space: normal;
            /* allow line breaks */
            text-align: left;
            /* optional: makes multi-line more readable */
        }
    }

    /* ==========================================================
   PROGRESS CONSISTENCY FIX
   Keep the same circle-over-label pattern used on
   repair-select-device.php at desktop, tablet and mobile widths.
   ========================================================== */
    .repair-service-redesign .repair-flow-progress {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        padding: 18px 18px 15px;
    }

    .repair-service-redesign .repair-flow-progress::before {
        top: 35px;
        left: 12.5%;
        right: 12.5%;
        height: 3px;
        border-radius: 999px;
    }

    .repair-service-redesign .repair-flow-progress::after {
        top: 35px;
        left: 12.5%;
        width: 25%;
        height: 3px;
        border-radius: 999px;
    }

    .repair-service-redesign .repair-flow-step {
        position: relative;
        z-index: 2;
        display: block;
        color: #727d8d;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.25;
        text-align: center;
    }

    .repair-service-redesign .repair-flow-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        margin: 0 auto 8px;
        flex: none;
    }

    @media (max-width: 767.98px) {
        .repair-service-redesign .repair-flow-progress {
            padding: 12px 0 10px;
        }

        .repair-service-redesign .repair-flow-progress::before,
        .repair-service-redesign .repair-flow-progress::after {
            top: 25px;
        }

        .repair-service-redesign .repair-flow-number {
            width: 27px;
            height: 27px;
            margin-bottom: 6px;
        }

        .repair-service-redesign .repair-flow-step {
            font-size: 11px;
            line-height: 1.2;
        }
    }

/* ==========================================================
   REPAIR SELECT SERVICE REDESIGN
   Scoped so shared header/footer/reviews/FAQ remain functional.
   ========================================================== */
    .repair-service-redesign,
.repair-service-redesign * {
        box-sizing: border-box;
    }

    .repair-service-redesign {
        --repair-blue: #0868f7;
        --repair-blue-dark: #005be7;
        --repair-blue-soft: #eef5ff;
        --repair-ink: #111827;
        --repair-muted: #687386;
        --repair-border: #dce4ef;
        --repair-bg: #f4f8fd;
        --repair-green: #18a957;

        background: var(--repair-bg);
        color: var(--repair-ink);
        font-family: "Poppins", sans-serif;
        padding: 16px 0 30px;
    }

    .repair-service-redesign button,
.repair-service-redesign input,
.repair-service-redesign select,
.repair-service-redesign textarea {
        font-family: inherit;
    }

    :where(.repair-service-redesign) .repair-service-shell {
        width: min(100% - 28px, 1320px);
        margin: 0 auto;
    }

    :where(.repair-service-redesign) .repair-service-panel {
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #e4eaf2;
        border-radius: 13px;
        box-shadow: 0 9px 28px rgba(28, 54, 86, .055);
    }

    /* ---------- Progress ---------- */
    :where(.repair-service-redesign) .repair-flow-progress {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 18px 48px 15px;
    }

    :where(.repair-service-redesign) .repair-flow-progress::before {
        content: "";
        position: absolute;
        top: 36px;
        left: 13%;
        right: 13%;
        height: 2px;
        background: #dde4ec;
    }

    :where(.repair-service-redesign) .repair-flow-progress::after {
        content: "";
        position: absolute;
        top: 36px;
        left: 13%;
        width: 25%;
        height: 2px;
        background: var(--repair-blue);
    }

    :where(.repair-service-redesign) .repair-flow-step {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #727d8d;
        font-size: 14px;
        font-weight: 500;
    }

    :where(.repair-service-redesign) .repair-flow-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        border: 1px solid #cfd8e4;
        border-radius: 50%;
        background: #fff;
        color: #202a38;
        font-size: 14px;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-flow-step.is-complete .repair-flow-number {
        border-color: var(--repair-blue);
        background: var(--repair-blue);
        color: #fff;
    }

    :where(.repair-service-redesign) .repair-flow-step.is-active {
        color: var(--repair-blue);
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-flow-step.is-active .repair-flow-number {
        border-color: var(--repair-blue);
        background: var(--repair-blue);
        color: #fff;
    }

    /* ---------- Device summary ---------- */
    :where(.repair-service-redesign) .repair-device-summary {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 28px;
        align-items: center;
        padding: 26px 70px;
    }

    :where(.repair-service-redesign) .repair-device-photo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 135px;
        height: 150px;
    }

    :where(.repair-service-redesign) .repair-device-photo img {
        max-width: 100%;
        max-height: 145px;
        object-fit: contain;
    }

    :where(.repair-service-redesign) .repair-device-photo-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 112px;
        height: 132px;
        border: 1px solid var(--repair-border);
        border-radius: 10px;
        background: #f8fbff;
        color: #8aa0bc;
        font-size: 48px;
    }

    :where(.repair-service-redesign) .repair-device-title-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
    }

    :where(.repair-service-redesign) .repair-device-title {
        margin: 0;
        color: #111827;
        font-size: 25px;
        font-weight: 600;
        line-height: 1.25;
    }

    :where(.repair-service-redesign) .repair-change-device {
        color: var(--repair-blue) !important;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    :where(.repair-service-redesign) .repair-device-subtitle {
        margin: 8px 0 17px;
        color: #687386;
        font-size: 14px;
    }

    :where(.repair-service-redesign) .repair-device-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    :where(.repair-service-redesign) .repair-device-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 39px;
        padding: 0 15px;
        border: 1px solid var(--repair-border);
        border-radius: 7px;
        color: #263245;
        font-size: 13px;
        font-weight: 500;
    }

    :where(.repair-service-redesign) .repair-device-badge i {
        color: var(--repair-blue);
        font-size: 16px;
    }

    /* ---------- Main repair selector ---------- */
    :where(.repair-service-redesign) .repair-selector {
        padding: 24px 42px 30px;
    }

    :where(.repair-service-redesign) .repair-selector h1 {
        margin: 0 0 3px;
        color: #111827;
        font-size: 28px;
        font-weight: 600;
        line-height: 1.25;
    }

    :where(.repair-service-redesign) .repair-selector-lead {
        margin: 0 0 18px;
        color: var(--repair-muted);
        font-size: 14px;
    }

    :where(.repair-service-redesign) .repair-multi-select-note {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: -4px 0 18px;
        padding: 10px 12px;
        border: 1px solid #dce8fb;
        border-radius: 8px;
        background: #f7faff;
        color: #4d5b70;
        font-size: 12.5px;
        line-height: 1.45;
    }

    :where(.repair-service-redesign) .repair-multi-select-note-main {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    :where(.repair-service-redesign) .repair-multi-select-note-main i {
        flex: 0 0 auto;
        color: var(--repair-blue);
        font-size: 15px;
    }

    :where(.repair-service-redesign) .repair-multi-select-note strong {
        color: #273448;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-multi-select-count {
        flex: 0 0 auto;
        min-width: 82px;
        padding: 5px 9px;
        border: 1px solid #cfe0fb;
        border-radius: 999px;
        background: #fff;
        color: var(--repair-blue);
        font-size: 11.5px;
        font-weight: 600;
        text-align: center;
    }

    :where(.repair-service-redesign) .repair-type-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 18px;
    }

    :where(.repair-service-redesign) .repair-type-card {
        position: relative;
        display: flex;
        min-height: 104px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 11px 8px;
        border: 1px solid var(--repair-border);
        border-radius: 9px;
        background: #fff;
        color: #3d4758;
        text-align: center;
        cursor: pointer;
        transition: .18s ease;
    }

    :where(.repair-service-redesign) .repair-type-card:hover {
        border-color: #a9c8f9;
        transform: translateY(-1px);
    }

    :where(.repair-service-redesign) .repair-type-card.is-active {
        border-color: var(--repair-blue);
        background: linear-gradient(180deg, #1172ff 0%, #0065f6 100%);
        box-shadow: 0 8px 18px rgba(8, 104, 247, .16);
        color: #fff;
    }

    :where(.repair-service-redesign) .repair-type-card.has-selection:not(.is-active) {
        border-color: #8ab8ff;
        box-shadow: 0 0 0 1px rgba(8, 104, 247, .18);
    }

    :where(.repair-service-redesign) .repair-type-selected-mark {
        position: absolute;
        top: 7px;
        right: 7px;
        display: none;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--repair-blue);
        color: #fff;
        font-size: 13px;
        box-shadow: 0 2px 7px rgba(8, 104, 247, .18);
    }

    :where(.repair-service-redesign) .repair-type-card.has-selection .repair-type-selected-mark {
        display: flex;
    }

    :where(.repair-service-redesign) .repair-type-card.is-active .repair-type-selected-mark {
        border: 1px solid rgba(255, 255, 255, .75);
        background: #fff;
        color: var(--repair-blue);
    }

    :where(.repair-service-redesign) .repair-type-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        font-size: 30px;
    }

    :where(.repair-service-redesign) .repair-type-photo {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    :where(.repair-service-redesign) .repair-type-card.is-active .repair-type-photo {
        filter: brightness(0) invert(1);
    }

    :where(.repair-service-redesign) .repair-type-name {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
    }

    /*
 * Compatibility status icon. ChildModal and the existing service scripts
 * can continue to update add_service_{parent_id} without controlling layout.
 */
    :where(.repair-service-redesign) .repair-type-status {
        position: absolute;
        right: 8px;
        top: 7px;
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    /* ---------- Detail area ---------- */
    :where(.repair-service-redesign) .repair-option-panel {
        display: none;
        padding: 15px 17px 13px;
        border: 1px solid var(--repair-border);
        border-radius: 10px;
        background: #fff;
    }

    :where(.repair-service-redesign) .repair-option-panel.is-active {
        display: block;
    }

    :where(.repair-service-redesign) .repair-option-heading-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }

    :where(.repair-service-redesign) .repair-option-heading {
        margin: 0;
        color: #111827;
        font-size: 19px;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-option-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    :where(.repair-service-redesign) .repair-option-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 31px;
        padding: 0 11px;
        border: 1px solid #d9e2ee;
        border-radius: 6px;
        color: #39465a;
        font-size: 12px;
        font-weight: 500;
    }

    :where(.repair-service-redesign) .repair-option-badge i {
        color: var(--repair-green);
    }

    :where(.repair-service-redesign) .repair-guide {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        margin-bottom: 10px;
        padding: 8px 12px;
        border: 1px solid #e0e7f0;
        border-radius: 7px;
        background: #f8faff;
        color: #556176;
        font-size: 14px;
    }

    :where(.repair-service-redesign) .repair-guide i {
        color: var(--repair-blue);
        font-size: 15px;
    }

    :where(.repair-service-redesign) .repair-guide button {
        margin-left: 2px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--repair-blue);
        font-weight: 600;
    }

    /* Clear next-step instruction shown immediately above the selectable repair row. */
    :where(.repair-service-redesign) .repair-service-instruction {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 11px;
        align-items: start;
        margin: 0 0 11px;
        padding: 11px 13px;
        border: 1px solid #c9ddfb;
        border-left: 3px solid var(--repair-blue);
        border-radius: 8px;
        background: #f5f9ff;
        color: #33445e;
        scroll-margin-top: 105px;
    }

    :where(.repair-service-redesign) .repair-service-instruction-icon {
        display: inline-flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #e4efff;
        color: var(--repair-blue);
        font-size: 16px;
    }

    :where(.repair-service-redesign) .repair-service-instruction-copy strong {
        display: block;
        margin: 0 0 2px;
        color: #17375f;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.35;
    }

    :where(.repair-service-redesign) .repair-service-instruction-copy span {
        display: block;
        color: #50627a;
        font-size: 14px;
        line-height: 1.48;
    }

    :where(.repair-service-redesign) .repair-service-instruction-copy b {
        color: #274f80;
        font-weight: 600;
    }

    /* One parent service = one functional option row.
   Child parents open the existing ChildModal to choose the actual child/variant. */
    :where(.repair-service-redesign) .repair-choice-row {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr) 125px 48px;
        gap: 15px;
        align-items: center;
        min-height: 115px;
        padding: 10px 14px;
        border: 1px solid #dbe4ef;
        border-radius: 8px;
        background: #fff;
        transition: .18s ease;
    }

    :where(.repair-service-redesign) .repair-choice-row.is-selected {
        border-color: var(--repair-blue);
        box-shadow: 0 0 0 1px var(--repair-blue);
    }

    :where(.repair-service-redesign) .repair-choice-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 82px;
        height: 91px;
    }

    :where(.repair-service-redesign) .repair-choice-image img {
        max-width: 100%;
        max-height: 88px;
        object-fit: contain;
    }

    :where(.repair-service-redesign) .repair-choice-main h3 {
        margin: 0 0 6px;
        color: #111827;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }

    :where(.repair-service-redesign) .repair-choice-main p {
        margin: 0;
        color: #687386;
        font-size: 14px;
        line-height: 1.55;
    }

    :where(.repair-service-redesign) .repair-choice-intro {
        margin: 0 0 6px;
        color: #687386;
        font-size: 11.5px;
        line-height: 1.5;
    }

    :where(.repair-service-redesign) .repair-choice-features {
        display: grid;
        gap: 3px;
        margin: 5px 0 0;
        padding: 0;
        list-style: none;
    }

    :where(.repair-service-redesign) .repair-choice-features li {
        display: grid;
        grid-template-columns: 12px minmax(0, 1fr);
        gap: 4px;
        align-items: start;
        color: #526175;
        font-size: 14px;
        line-height: 1.7;
    }

    :where(.repair-service-redesign) .repair-choice-features li > i {
        margin-top: 1px;
        color: var(--repair-blue);
        font-size: 14px;
    }

    :where(.repair-service-redesign) .repair-choice-features strong {
        color: #344054;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-choice-subtitle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 5px;
        color: var(--repair-blue);
        font-size: 12px;
        font-weight: 500;
    }

    :where(.repair-service-redesign) .repair-choice-price {
        text-align: right;
    }

    :where(.repair-service-redesign) .repair-choice-price strong {
        display: block;
        color: #111827;
        font-size: 17px;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-stock {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 7px;
        color: var(--repair-green);
        font-size: 12px;
        font-weight: 500;
    }

    :where(.repair-service-redesign) .repair-choice-selector {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :where(.repair-service-redesign) .repair-select-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        border: 2px solid #d2dbe7;
        border-radius: 50%;
        background: #fff;
        color: transparent;
        cursor: pointer;
    }

    :where(.repair-service-redesign) .repair-choice-row.is-selected .repair-select-circle {
        border-color: var(--repair-blue);
        background: var(--repair-blue);
        color: #fff;
    }

    :where(.repair-service-redesign) .repair-child-choice-btn {
        min-height: 34px;
        padding: 0 11px;
        border: 1px solid var(--repair-blue);
        border-radius: 6px;
        background: #fff;
        color: var(--repair-blue);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }


    /* ==========================================================
   CHILD SERVICE COMPARISON MODAL
   ========================================================== */

:where(.repair-service-redesign) .repair-child-service-modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(24, 39, 62, .14);
}

:where(.repair-service-redesign) .repair-child-service-modal .modal-header {
    align-items: flex-start;
    padding: 18px 20px 10px;
}

:where(.repair-service-redesign) .repair-child-service-modal .modal-title {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
}

:where(.repair-service-redesign) .repair-child-modal-lead {
    margin: 4px 0 0;
    color: #687386;
    font-size: 12px;
}

:where(.repair-service-redesign) .repair-child-service-modal .modal-body {
    padding: 10px 20px 20px;
}

:where(.repair-service-redesign) .repair-child-options {
    display: grid;
    gap: 9px;
}

:where(.repair-service-redesign) .repair-child-option {
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

:where(.repair-service-redesign) .repair-child-option.active {
    border-color: var(--repair-blue);
    box-shadow: 0 0 0 1px var(--repair-blue);
}

:where(.repair-service-redesign) .repair-child-option-main {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 105px 34px;
    gap: 12px;
    align-items: center;
    min-height: 112px;
    margin: 0;
    padding: 11px 13px;
    cursor: pointer;
}

:where(.repair-service-redesign) .repair-child-option-image {
    display: flex;
    width: 70px;
    height: 82px;
    align-items: center;
    justify-content: center;
}

:where(.repair-service-redesign) .repair-child-option-image img {
    max-width: 68px;
    max-height: 80px;
    object-fit: contain;
}

:where(.repair-service-redesign) .repair-child-option-image i {
    color: var(--repair-blue);
    font-size: 34px;
}

:where(.repair-service-redesign) .repair-child-option-copy {
    min-width: 0;
}

:where(.repair-service-redesign) .repair-child-option-copy h4 {
    margin: 0 0 3px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}

:where(.repair-service-redesign) .repair-child-option-intro {
    margin: 0 0 6px;
    color: #687386;
    font-size: 11px;
    line-height: 1.45;
}

:where(.repair-service-redesign) .repair-child-option-features {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.repair-service-redesign) .repair-child-option-features li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 4px;
    color: #526175;
    font-size: 10.5px;
    line-height: 1.4;
}

:where(.repair-service-redesign) .repair-child-option-features li > i {
    margin-top: 1px;
    color: var(--repair-blue);
    font-size: 11px;
}

:where(.repair-service-redesign) .repair-child-option-features strong {
    color: #344054;
    font-weight: 600;
}

:where(.repair-service-redesign) .repair-child-option-warranty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: var(--repair-blue);
    font-size: 10.5px;
    font-weight: 500;
}

:where(.repair-service-redesign) .repair-child-option-price {
    text-align: right;
}

:where(.repair-service-redesign) .repair-child-option-price strong {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}

:where(.repair-service-redesign) .repair-child-option-price span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: var(--repair-green);
    font-size: 10.5px;
    font-weight: 500;
}

:where(.repair-service-redesign) .repair-child-option-selector {
    display: flex;
    justify-content: center;
}

:where(.repair-service-redesign) .repair-child-select-circle {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border: 2px solid #d2dbe7;
    border-radius: 50%;
    background: #fff;
    color: transparent;
}

:where(.repair-service-redesign) .repair-child-option.active .repair-child-select-circle {
    border-color: var(--repair-blue);
    background: var(--repair-blue);
    color: #fff;
}

:where(.repair-service-redesign) .repair-child-legacy-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

:where(.repair-service-redesign) .repair-child-option .repair-child-variant {
    margin: 0;
    padding: 0 13px 12px 101px;
    max-width: none;
}

@media (max-width: 767.98px) {

    :where(.repair-service-redesign) .repair-child-service-modal .modal-dialog {
        margin: 6px;
    }

    :where(.repair-service-redesign) .repair-child-service-modal .modal-header {
        padding: 13px 12px 7px;
    }

    :where(.repair-service-redesign) .repair-child-service-modal .modal-title {
        font-size: 14px;
    }

    :where(.repair-service-redesign) .repair-child-modal-lead {
        font-size: 10.5px;
    }

    :where(.repair-service-redesign) .repair-child-service-modal .modal-body {
        padding: 8px 10px 12px;
    }

    :where(.repair-service-redesign) .repair-child-option-main {
        grid-template-columns: 52px minmax(0, 1fr) 64px;
        gap: 7px;
        min-height: 94px;
        padding: 8px;
    }

    :where(.repair-service-redesign) .repair-child-option-image {
        width: 48px;
        height: 60px;
    }

    :where(.repair-service-redesign) .repair-child-option-image img {
        max-width: 47px;
        max-height: 58px;
    }

    :where(.repair-service-redesign) .repair-child-option-copy h4 {
        font-size: 12px;
    }

    :where(.repair-service-redesign) .repair-child-option-intro {
        margin-bottom: 4px;
        font-size: 10px;
    }

    :where(.repair-service-redesign) .repair-child-option-features {
        gap: 2px;
    }

    :where(.repair-service-redesign) .repair-child-option-features li {
        grid-template-columns: 9px minmax(0, 1fr);
        gap: 2px;
        font-size: 10px;
    }

    /*
     * Keep the child rows useful but compact on mobile.
     * Show the first three comparison points.
     */
    :where(.repair-service-redesign) .repair-child-option-features li:nth-child(n+4) {
        display: none;
    }

    :where(.repair-service-redesign) .repair-child-option-warranty {
        margin-top: 4px;
        font-size: 10px;
    }

    :where(.repair-service-redesign) .repair-child-option-price strong {
        font-size: 12px;
    }

    :where(.repair-service-redesign) .repair-child-option-price span {
        font-size: 10px;
    }

    :where(.repair-service-redesign) .repair-child-option-selector {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: -4px;
    }

    :where(.repair-service-redesign) .repair-child-select-circle {
        width: 22px;
        height: 22px;
    }

    :where(.repair-service-redesign) .repair-child-option .repair-child-variant {
        padding: 0 8px 9px 67px;
    }
}

    /* Generic service variants. The select itself carries the supplementary
   repair_service_variants[service_id] contract and is disabled whenever its
   repair service is not selected, so stale values are never submitted. */
    :where(.repair-service-redesign) .repair-service-variant {
        margin-top: 10px;
        max-width: 330px;
    }

    :where(.repair-service-redesign) .repair-service-variant[hidden] {
        display: none !important;
    }

    :where(.repair-service-redesign) .repair-service-variant-label {
        display: block;
        margin-bottom: 5px;
        color: #344156;
        font-size: 12px;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-service-variant-control {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    :where(.repair-service-redesign) .repair-service-variant-select,
:where(.repair-service-redesign) #repair-store-form .modal .repair-service-variant-select {
        width: 100%;
        min-height: 38px;
        padding: 0 34px 0 10px;
        border: 1px solid #cfd9e6;
        border-radius: 7px;
        background-color: #fff;
        color: #273448;
        font-family: "Poppins", sans-serif;
        font-size: 12px;
    }

    :where(.repair-service-redesign) .repair-service-variant-select:focus {
        border-color: var(--repair-blue);
        outline: 0;
        box-shadow: 0 0 0 2px rgba(8, 104, 247, .10);
    }

    :where(.repair-service-redesign) .repair-service-variant-select:disabled {
        background-color: #f4f6f9;
        color: #8a94a4;
        cursor: not-allowed;
    }

    :where(.repair-service-redesign) .repair-service-variant-swatch {
        display: none;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border: 1px solid #cfd9e6;
        border-radius: 50%;
        background: #fff;
    }

    :where(.repair-service-redesign) .repair-service-variant-swatch.has-colour {
        display: inline-block;
    }

    :where(.repair-service-redesign) .repair-service-variant-help {
        display: block;
        margin-top: 4px;
        color: #7a8494;
        font-size: 11px;
    }

    :where(.repair-service-redesign) .repair-service-variant.is-required .repair-service-variant-help {
        color: #b42318;
    }

    /* Existing ChildModal selectors stay compatible with the redesign. */
    :where(.repair-service-redesign) #repair-store-form .modal select,
:where(.repair-service-redesign) #repair-store-form .modal .form-select {
        min-height: 42px;
        border: 1px solid #cfd9e6;
        border-radius: 7px;
        font-family: "Poppins", sans-serif;
    }

    :where(.repair-service-redesign) #repair-store-form .modal .repair-child-variant {
        margin: -10px 0 18px;
        max-width: none;
    }

    /*
 * Hidden compatibility controls preserve the IDs/classes used by ChildModal.php:
 * booking_service_*, checkbox_*, parent_price_* and add_service_*.
 */
    :where(.repair-service-redesign) .repair-service-contract {
        position: absolute !important;
        left: -10000px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }

    /* ---------- Summary / trust ---------- */
    :where(.repair-service-redesign) .repair-bottom-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 15px;
    }

    :where(.repair-service-redesign) .repair-summary-card,
:where(.repair-service-redesign) .repair-why-card {
        min-height: 205px;
        padding: 16px 20px;
        border: 1px solid var(--repair-border);
        border-radius: 9px;
        background: #fff;
    }

    :where(.repair-service-redesign) .repair-summary-card h2,
:where(.repair-service-redesign) .repair-why-card h2 {
        margin: 0 0 11px;
        color: #172132;
        font-size: 15px;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-summary-device {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #edf1f5;
    }

    :where(.repair-service-redesign) .repair-summary-device-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 62px;
    }

    :where(.repair-service-redesign) .repair-summary-device-thumb img {
        max-width: 100%;
        max-height: 60px;
        object-fit: contain;
    }

    :where(.repair-service-redesign) .repair-summary-device-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 56px;
        border: 1px solid #e1e7ef;
        border-radius: 6px;
        color: #8aa0bc;
        font-size: 24px;
    }

    :where(.repair-service-redesign) .repair-summary-device strong {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-summary-device span {
        display: block;
        margin-top: 2px;
        color: #7a8494;
        font-size: 11px;
    }

    :where(.repair-service-redesign) .repair-summary-lines {
        margin-top: 9px;
    }

    :where(.repair-service-redesign) .repair-summary-line {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        padding: 5px 0;
        color: #687386;
        font-size: 12px;
    }

    :where(.repair-service-redesign) .repair-summary-line strong {
        max-width: 62%;
        color: #243043;
        font-weight: 500;
        text-align: right;
    }

    :where(.repair-service-redesign) .repair-summary-total {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        margin-top: 5px;
        padding-top: 9px;
        border-top: 1px solid #e5eaf1;
        color: #111827;
        font-size: 14px;
        font-weight: 600;
    }

    :where(.repair-service-redesign) .repair-summary-total strong {
        font-size: 21px;
    }

    :where(.repair-service-redesign) .repair-why-list {
        display: grid;
        gap: 10px;
        margin: 0 0 14px;
        padding: 0;
        list-style: none;
    }

    :where(.repair-service-redesign) .repair-why-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #354155;
        font-size: 12px;
    }

    :where(.repair-service-redesign) .repair-why-list i {
        color: var(--repair-blue);
        font-size: 14px;
    }

    :where(.repair-service-redesign) .repair-live-trust {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #edf1f5;
    }

    :where(.repair-service-redesign) .repair-live-trust .trustpilot-widget {
        min-height: 24px;
    }

    /* ---------- Continue ---------- */
    :where(.repair-service-redesign) .repair-continue-wrap {
        max-width: 900px;
        margin: 20px auto 0;
    }

    :where(.repair-service-redesign) .repair-continue-btn {
        display: inline-flex;
        width: 100%;
        min-height: 54px;
        align-items: center;
        justify-content: center;
        gap: 14px;
        border: 0;
        border-radius: 7px;
        background: linear-gradient(90deg, #0868f7, #0470ff);
        box-shadow: 0 9px 20px rgba(8, 104, 247, .18);
        color: #fff;
        font-size: 17px;
        font-weight: 500;
    }

    :where(.repair-service-redesign) .repair-continue-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
        box-shadow: none;
    }

    :where(.repair-service-redesign) .repair-secure-note {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin-top: 10px;
        color: #6b7585;
        font-size: 13px;
    }

    :where(.repair-service-redesign) .repair-add-another {
        display: none;
        width: 100%;
        margin-top: 8px;
        padding: 7px 10px;
        border: 0;
        background: transparent;
        color: var(--repair-blue);
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }

    :where(.repair-service-redesign) .repair-add-another.is-visible {
        display: block;
    }

    :where(.repair-service-redesign) .repair-add-another i {
        margin-right: 4px;
    }

    :where(.repair-service-redesign) .repair-mobile-submit {
        display: none;
    }

    /* ---------- Existing content below selector ---------- */
    .repair-service-long-content {
        width: min(100% - 28px, 1320px);
        margin: 12px auto;
        padding: 22px 25px;
        border: 1px solid #e4eaf2;
        border-radius: 12px;
        background: #fff;
    }

    .repair-service-long-content .repair_content {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .repair-service-long-content .repair_content h2 {
        font-size: 23px;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199.98px) {
        :where(.repair-service-redesign) .repair-type-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        :where(.repair-service-redesign) .repair-device-summary {
            padding-left: 42px;
            padding-right: 42px;
        }

        :where(.repair-service-redesign) .repair-selector {
            padding-left: 28px;
            padding-right: 28px;
        }
    }

    @media (max-width: 991.98px) {
        :where(.repair-service-redesign) .repair-flow-progress {
            padding-left: 18px;
            padding-right: 18px;
        }

        :where(.repair-service-redesign) .repair-flow-step {
            flex-direction: column;
            gap: 5px;
            font-size: 12px;
        }

        :where(.repair-service-redesign) .repair-flow-progress::before,
:where(.repair-service-redesign) .repair-flow-progress::after {
            top: 35px;
        }

        :where(.repair-service-redesign) .repair-type-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        :where(.repair-service-redesign) .repair-choice-row {
            grid-template-columns: 78px minmax(0, 1fr) 105px 44px;
        }

        :where(.repair-service-redesign) .repair-bottom-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767.98px) {
        .repair-service-redesign {
            padding-top: 7px;
            padding-bottom: 18px;
        }

        :where(.repair-service-redesign) .repair-service-shell {
            width: calc(100% - 12px);
        }

        :where(.repair-service-redesign) .repair-service-panel {
            border-radius: 9px;
            margin-bottom: 7px;
        }

        :where(.repair-service-redesign) .repair-flow-progress {
            padding: 12px 3px 10px;
        }

        :where(.repair-service-redesign) .repair-flow-progress::before,
:where(.repair-service-redesign) .repair-flow-progress::after {
            top: 26px;
        }

        :where(.repair-service-redesign) .repair-flow-progress::before {
            left: 12%;
            right: 12%;
        }

        :where(.repair-service-redesign) .repair-flow-progress::after {
            left: 12%;
            width: 26%;
        }

        :where(.repair-service-redesign) .repair-flow-number {
            width: 27px;
            height: 27px;
            flex-basis: 27px;
            font-size: 12px;
        }

        :where(.repair-service-redesign) .repair-flow-step {
            font-size: 10.5px;
            text-align: center;
        }

        :where(.repair-service-redesign) .repair-device-summary {
            grid-template-columns: 76px minmax(0, 1fr);
            gap: 13px;
            padding: 14px 12px;
        }

        :where(.repair-service-redesign) .repair-device-photo {
            width: 70px;
            height: 82px;
        }

        :where(.repair-service-redesign) .repair-device-photo img {
            max-height: 80px;
        }

        :where(.repair-service-redesign) .repair-device-photo-fallback {
            width: 62px;
            height: 72px;
            font-size: 29px;
        }

        :where(.repair-service-redesign) .repair-device-title {
            font-size: 17px;
        }

        :where(.repair-service-redesign) .repair-change-device {
            font-size: 11px;
        }

        :where(.repair-service-redesign) .repair-device-subtitle {
            margin: 4px 0 9px;
            font-size: 11px;
        }

        :where(.repair-service-redesign) .repair-device-badges {
            gap: 5px;
        }

        :where(.repair-service-redesign) .repair-device-badge {
            min-height: 29px;
            padding: 0 7px;
            gap: 4px;
            font-size: 10px;
        }

        :where(.repair-service-redesign) .repair-device-badge i {
            font-size: 13px;
        }

        :where(.repair-service-redesign) .repair-selector {
            padding: 15px 10px 16px;
        }

        :where(.repair-service-redesign) .repair-selector h1 {
            font-size: 21px;
        }

        :where(.repair-service-redesign) .repair-selector-lead {
            margin-bottom: 12px;
            font-size: 12px;
        }

        :where(.repair-service-redesign) .repair-multi-select-note {
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 12px;
            padding: 8px 9px;
            font-size: 11px;
        }

        :where(.repair-service-redesign) .repair-multi-select-note-main {
            align-items: flex-start;
        }

        :where(.repair-service-redesign) .repair-multi-select-note-main i {
            margin-top: 1px;
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-multi-select-count {
            min-width: 68px;
            padding: 4px 6px;
            font-size: 10.5px;
        }

        :where(.repair-service-redesign) .repair-type-grid {
            display: flex;
            gap: 7px;
            overflow-x: auto;
            margin-right: -10px;
            padding: 1px 10px 5px 0;
            scrollbar-width: thin;
        }

        :where(.repair-service-redesign) .repair-type-card {
            flex: 0 0 108px;
            min-height: 88px;
            gap: 6px;
        }


        :where(.repair-service-redesign) .repair-type-selected-mark {
            top: 5px;
            right: 5px;
            width: 18px;
            height: 18px;
            font-size: 11px;
        }

        :where(.repair-service-redesign) .repair-type-icon {
            width: 30px;
            height: 30px;
            font-size: 24px;
        }

        :where(.repair-service-redesign) .repair-type-photo {
            width: 32px;
            height: 32px;
        }

        :where(.repair-service-redesign) .repair-type-name {
            font-size: 11px;
        }

        :where(.repair-service-redesign) .repair-option-panel {
            padding: 11px 9px 10px;
        }

        :where(.repair-service-redesign) .repair-option-heading {
            font-size: 15px;
        }

        :where(.repair-service-redesign) .repair-option-badge {
            min-height: 27px;
            padding: 0 8px;
            font-size: 10.5px;
        }

        :where(.repair-service-redesign) .repair-guide {
            font-size: 12px;
        }

        :where(.repair-service-redesign) .repair-service-instruction {
            grid-template-columns: 30px minmax(0, 1fr);
            gap: 9px;
            margin-bottom: 9px;
            padding: 10px;
            border-left-width: 3px;
            border-radius: 7px;
            scroll-margin-top: 72px;
        }

        :where(.repair-service-redesign) .repair-service-instruction-icon {
            width: 28px;
            height: 28px;
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-service-instruction-copy strong {
            margin-bottom: 2px;
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-service-instruction-copy span {
            font-size: 12px;
            line-height: 1.45;
        }

        :where(.repair-service-redesign) .repair-choice-row {
            grid-template-columns: 62px minmax(0, 1fr) 76px;
            gap: 9px;
            min-height: 96px;
            padding: 8px;
        }

        :where(.repair-service-redesign) .repair-choice-image {
            width: 58px;
            height: 70px;
        }

        :where(.repair-service-redesign) .repair-choice-image img {
            max-height: 67px;
        }

        :where(.repair-service-redesign) .repair-choice-main h3 {
            font-size: 13px;
        }

        :where(.repair-service-redesign) .repair-choice-main p,
:where(.repair-service-redesign) .repair-choice-subtitle {
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-choice-intro {
            margin-bottom: 4px;
            font-size: 10px;
        }

        :where(.repair-service-redesign) .repair-choice-features {
            gap: 2px;
            margin-top: 4px;
        }

        :where(.repair-service-redesign) .repair-choice-features li {
            grid-template-columns: 9px minmax(0, 1fr);
            gap: 2px;
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-choice-features li > i {
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-choice-features li:nth-child(n+4) {
            display: none;
        }

        :where(.repair-service-redesign) .repair-choice-price strong {
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-stock {
            font-size: 10.5px;
        }

        :where(.repair-service-redesign) .repair-choice-selector {
            grid-column: 1 / -1;
            justify-content: flex-end;
            margin-top: -2px;
        }

        :where(.repair-service-redesign) .repair-select-circle {
            width: 24px;
            height: 24px;
        }

        :where(.repair-service-redesign) .repair-child-choice-btn {
            min-height: 31px;
            font-size: 11px;
        }


        :where(.repair-service-redesign) .repair-service-variant {
            max-width: 100%;
        }

        :where(.repair-service-redesign) .repair-service-variant-label,
:where(.repair-service-redesign) .repair-service-variant-select {
            font-size: 11px;
        }

        :where(.repair-service-redesign) .repair-bottom-grid {
            gap: 8px;
            margin-top: 8px;
        }

        :where(.repair-service-redesign) .repair-summary-card,
:where(.repair-service-redesign) .repair-why-card {
            min-height: 0;
            padding: 12px;
        }

        :where(.repair-service-redesign) .repair-summary-card h2,
:where(.repair-service-redesign) .repair-why-card h2 {
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-continue-wrap {
            margin-top: 12px;
        }

        :where(.repair-service-redesign) .repair-continue-btn {
            min-height: 45px;
            font-size: 14px;
        }

        :where(.repair-service-redesign) .repair-secure-note {
            font-size: 11px;
        }

        .repair-service-long-content {
            width: calc(100% - 12px);
            padding: 14px 12px;
        }

        .repair-service-long-content .repair_content h2 {
            font-size: 17px;
        }

        /*
     * Sticky mobile action stays inside the form/page section instead of
     * floating over reviews/FAQ/footer after the selector has ended.
     */
        :where(.repair-service-redesign) .repair-mobile-submit {
            position: sticky;
            bottom: 6px;
            z-index: 1020;
            display: block;
            margin: 12px -4px -4px;
            padding: 7px;
            border: 1px solid #e2e8f0;
            border-radius: 9px;
            background: rgba(255, 255, 255, .96);
            box-shadow: 0 -4px 14px rgba(25, 48, 78, .08);
            backdrop-filter: blur(6px);
        }

        :where(.repair-service-redesign) .repair-mobile-submit .repair-continue-btn {
            min-height: 43px;
        }


        :where(.repair-service-redesign) .repair-mobile-submit .repair-add-another {
            margin-top: 4px;
            padding: 5px 8px 2px;
            font-size: 11px;
        }

        :where(.repair-service-redesign) .repair-desktop-submit {
            display: none;
        }
    }

    @media (max-width: 399px) {
        :where(.repair-service-redesign) .repair-device-badges {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        :where(.repair-service-redesign) .repair-choice-row {
            grid-template-columns: 54px minmax(0, 1fr) 70px;
        }
    }

/* ==========================================================================
   SELECT STORE
   Source: repair-select-store.php
   ========================================================================== */
/* ==========================================================
   REPAIR SELECT STORE REDESIGN
   Scoped to avoid altering the shared header/footer/FAQ.
   Existing form routes, session keys, store-map AJAX endpoint,
   payment values and mail-in flow.
   ========================================================== */
     .repair-store-redesign,
.repair-store-redesign * {
         box-sizing: border-box;
     }

     .repair-store-redesign {
         --repair-blue: #0868f7;
         --repair-blue-dark: #005ee8;
         --repair-blue-soft: #eff6ff;
         --repair-ink: #111827;
         --repair-muted: #667085;
         --repair-border: #dfe6ef;
         --repair-border-strong: #cdd8e6;
         --repair-bg: #f7f9fc;
         --repair-green: #18a957;
         --repair-card: #ffffff;

         background: var(--repair-bg);
         color: var(--repair-ink);
         font-family: "Poppins", sans-serif;
         padding: 22px 0 34px;
     }

     .repair-store-redesign button,
.repair-store-redesign input,
.repair-store-redesign select,
.repair-store-redesign textarea {
         font-family: inherit;
     }

     :where(.repair-store-redesign) .repair-store-shell {
         width: min(100% - 28px, 1180px);
         margin: 0 auto;
     }

     :where(.repair-store-redesign) .repair-store-page-title {
         margin: 0 0 13px;
         color: #111;
         font-size: 17px;
         font-weight: 700;
         letter-spacing: .01em;
         text-transform: uppercase;
     }

     :where(.repair-store-redesign) .repair-store-card {
         background: var(--repair-card);
         border: 1px solid #e4e9f0;
         border-radius: 13px;
         box-shadow: 0 8px 28px rgba(33, 49, 70, .045);
     }

     /* ---------- Progress ---------- */
     :where(.repair-store-redesign) .repair-store-progress-card {
         padding: 17px 18px 13px;
         margin-bottom: 14px;
     }

     :where(.repair-store-redesign) .repair-store-brand-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 15px;
     }

     :where(.repair-store-redesign) .repair-store-wordmark {
         color: #121722;
         font-size: 19px;
         font-weight: 700;
         letter-spacing: -.04em;
     }

     :where(.repair-store-redesign) .repair-store-progress {
         position: relative;
         display: grid;
         grid-template-columns: repeat(5, minmax(0, 1fr));
         gap: 0;
     }

     :where(.repair-store-redesign) .repair-store-progress::before {
         content: "";
         position: absolute;
         top: 14px;
         left: 10%;
         right: 10%;
         height: 2px;
         background: #dfe5ed;
     }

     :where(.repair-store-redesign) .repair-store-progress::after {
         content: "";
         position: absolute;
         top: 14px;
         left: 10%;
         width: 40%;
         height: 2px;
         background: var(--repair-blue);
     }

     :where(.repair-store-redesign) .repair-store-step {
         position: relative;
         z-index: 2;
         min-width: 0;
         color: #727b89;
         font-size: 11px;
         font-weight: 500;
         line-height: 1.25;
         text-align: center;
     }

     :where(.repair-store-redesign) .repair-store-step-number {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 29px;
         height: 29px;
         margin: 0 auto 7px;
         border: 1px solid #cfd7e2;
         border-radius: 50%;
         background: #fff;
         color: #253044;
         font-size: 13px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-store-step.is-complete .repair-store-step-number,
:where(.repair-store-redesign) .repair-store-step.is-active .repair-store-step-number {
         border-color: var(--repair-blue);
         background: var(--repair-blue);
         color: #fff;
     }

     :where(.repair-store-redesign) .repair-store-step.is-active {
         color: var(--repair-blue);
         font-weight: 600;
     }

     /* ---------- Device / repair summary ---------- */
     :where(.repair-store-redesign) .repair-store-device-card {
         display: grid;
         grid-template-columns: 76px minmax(0, 1fr) auto;
         gap: 18px;
         align-items: center;
         padding: 15px 17px;
         margin-bottom: 14px;
     }

     :where(.repair-store-redesign) .repair-store-device-image {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 68px;
         height: 78px;
         border: 1px solid #e5eaf1;
         border-radius: 8px;
         background: #fafcff;
         overflow: hidden;
     }

     :where(.repair-store-redesign) .repair-store-device-image img {
         max-width: 100%;
         max-height: 76px;
         object-fit: contain;
     }

     :where(.repair-store-redesign) .repair-store-device-fallback {
         color: #8ba0bb;
         font-size: 31px;
     }

     :where(.repair-store-redesign) .repair-store-device-copy strong {
         display: block;
         margin-bottom: 3px;
         color: #111827;
         font-size: 15px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-store-device-copy>span {
         display: block;
         color: #626d7d;
         font-size: 12px;
     }

     :where(.repair-store-redesign) .repair-store-service-summary {
         margin-top: 2px;
     }

     :where(.repair-store-redesign) .repair-store-service-count {
         display: block;
         color: #626d7d;
         font-size: 12px;
     }

     :where(.repair-store-redesign) .repair-store-service-chips {
         display: flex;
         flex-wrap: wrap;
         gap: 5px;
         margin-top: 7px;
     }

     :where(.repair-store-redesign) .repair-store-service-chip {
         display: inline-flex;
         min-height: 26px;
         align-items: center;
         gap: 6px;
         padding: 3px 4px 3px 9px;
         border: 1px solid #d7e3f3;
         border-radius: 999px;
         background: #fff;
         color: #344054;
         font-size: 11px;
         font-weight: 500;
         line-height: 1.25;
     }

     :where(.repair-store-redesign) .repair-store-service-chip-title {
         display: inline-flex;
         align-items: center;
     }

     :where(.repair-store-redesign) .repair-store-service-variant {
         display: inline-flex;
         min-height: 20px;
         align-items: center;
         gap: 5px;
         padding: 2px 7px;
         border-radius: 999px;
         background: #eff6ff;
         color: var(--repair-blue);
         font-weight: 600;
         white-space: nowrap;
     }

     :where(.repair-store-redesign) .repair-store-variant-swatch {
         display: inline-block;
         width: 10px;
         height: 10px;
         flex: 0 0 10px;
         border: 1px solid rgba(17, 24, 39, .18);
         border-radius: 50%;
     }

     :where(.repair-store-redesign) .repair-store-service-mobile {
         display: none;
     }

     :where(.repair-store-redesign) .repair-store-device-meta {
         display: flex;
         flex-wrap: wrap;
         gap: 9px 16px;
         margin-top: 10px;
     }

     :where(.repair-store-redesign) .repair-store-device-meta span {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         color: #344054;
         font-size: 11px;
         font-weight: 500;
     }

     :where(.repair-store-redesign) .repair-store-device-meta i {
         color: var(--repair-blue);
         font-size: 14px;
     }

     :where(.repair-store-redesign) .repair-store-change {
         color: var(--repair-blue) !important;
         font-size: 12px;
         font-weight: 600;
         text-decoration: none;
         white-space: nowrap;
     }

     /* ---------- Method cards ---------- */
     :where(.repair-store-redesign) .repair-store-question {
         margin: 0 0 10px;
         color: #111827;
         font-size: 14px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-method-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 12px;
         margin-bottom: 14px;
     }

     :where(.repair-store-redesign) .repair-method-card {
         display: grid;
         grid-template-columns: 42px minmax(0, 1fr) 22px;
         gap: 12px;
         align-items: center;
         min-height: 94px;
         padding: 14px 15px;
         border: 1px solid var(--repair-border);
         border-radius: 10px;
         background: #fff;
         color: inherit;
         text-align: left;
         cursor: pointer;
         transition: .18s ease;
     }

     :where(.repair-store-redesign) .repair-method-card:hover {
         border-color: #a9c9ff;
     }

     :where(.repair-store-redesign) .repair-method-card.is-active {
         border-color: var(--repair-blue);
         background: #f7fbff;
         box-shadow: inset 0 0 0 1px rgba(8, 104, 247, .05);
     }

     :where(.repair-store-redesign) .repair-method-icon {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 38px;
         height: 38px;
         border-radius: 8px;
         background: var(--repair-blue-soft);
         color: var(--repair-blue);
         font-size: 20px;
     }

     :where(.repair-store-redesign) .repair-method-copy strong {
         display: block;
         margin-bottom: 3px;
         font-size: 14px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-method-copy span {
         display: block;
         color: #667085;
         font-size: 14px;
         line-height: 1.45;
     }

     :where(.repair-store-redesign) .repair-method-check {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 19px;
         height: 19px;
         border: 1px solid #cdd7e5;
         border-radius: 50%;
         color: transparent;
         font-size: 13px;
     }

     :where(.repair-store-redesign) .repair-method-card.is-active .repair-method-check {
         border-color: var(--repair-blue);
         background: var(--repair-blue);
         color: #fff;
     }

     /* ---------- Main store area ---------- */
     :where(.repair-store-redesign) .repair-store-content {
         padding: 17px;
     }

     :where(.repair-store-redesign) .repair-store-content-title {
         margin: 0 0 12px;
         font-size: 14px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-store-search-row {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto;
         gap: 9px;
         margin-bottom: 14px;
     }

     :where(.repair-store-redesign) .repair-store-search-wrap {
         position: relative;
     }

     :where(.repair-store-redesign) .repair-store-search-wrap i {
         position: absolute;
         top: 50%;
         left: 13px;
         z-index: 2;
         color: #8b97a7;
         font-size: 14px;
         transform: translateY(-50%);
         pointer-events: none;
     }

     :where(.repair-store-redesign) .repair-store-search {
         width: 100%;
         height: 42px;
         padding: 0 13px 0 36px;
         border: 1px solid #d7e0eb;
         border-radius: 7px;
         background: #fff;
         color: #1d2939;
         font-size: 12px;
         outline: none;
     }

     :where(.repair-store-redesign) .repair-store-search:focus {
         border-color: #8bb8fb;
         box-shadow: 0 0 0 3px rgba(8, 104, 247, .08);
     }

     :where(.repair-store-redesign) .repair-store-search-btn {
         min-width: 74px;
         height: 42px;
         padding: 0 15px;
         border: 0;
         border-radius: 7px;
         background: var(--repair-blue);
         color: #fff;
         font-size: 12px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-store-layout {
         display: grid;
         grid-template-columns: minmax(290px, .9fr) minmax(360px, 1.35fr);
         gap: 14px;
         align-items: stretch;
     }

     :where(.repair-store-redesign) .repair-store-list {
         display: grid;
         align-content: start;
         gap: 8px;
         max-height: 505px;
         overflow-y: auto;
         padding-right: 2px;
         scrollbar-width: thin;
     }

     .repair-store-redesign .repair-store-option.store-card {
         position: relative;
         display: grid;
         grid-template-columns: 27px minmax(0, 1fr) 18px;
         gap: 9px;
         align-items: start;
         width: 100%;
         min-height: 118px;
         padding: 12px 10px;
         border: 1px solid #cfd9e7 !important;
         border-radius: 9px;
         background: #fff !important;
         box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
         color: inherit;
         text-align: left;
         cursor: pointer;
         transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
         appearance: none;
         -webkit-appearance: none;
     }

     .repair-store-redesign .repair-store-option.store-card:hover {
         border-color: #98bfff !important;
         box-shadow: 0 4px 12px rgba(8, 104, 247, .055);
         transform: translateY(-1px);
     }

     .repair-store-redesign .repair-store-option.store-card.active {
         border-color: var(--repair-blue) !important;
         background: #f4f8ff !important;
         box-shadow: 0 0 0 1px rgba(8, 104, 247, .08);
     }

     :where(.repair-store-redesign) .repair-store-rank {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 22px;
         height: 22px;
         border: 1px solid #d3dce8;
         border-radius: 50%;
         background: #fff;
         color: #445064;
         font-size: 11px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-store-option.active .repair-store-rank {
         border-color: var(--repair-blue);
         background: var(--repair-blue);
         color: #fff;
     }

     :where(.repair-store-redesign) .repair-store-option-copy strong {
         display: block;
         margin-bottom: 5px;
         font-size: 13px;
         font-weight: 600;
         line-height: 1.3;
     }

     :where(.repair-store-redesign) .repair-store-address {
         display: block;
         color: #6b7584;
         font-size: 11px;
         line-height: 1.45;
     }

     :where(.repair-store-redesign) .repair-store-address i {
         margin-right: 4px;
         color: #778397;
     }

     :where(.repair-store-redesign) .repair-store-detail-lines {
         display: grid;
         gap: 2px;
         margin-top: 6px;
     }

     :where(.repair-store-redesign) .repair-store-availability,
:where(.repair-store-redesign) .repair-store-next,
:where(.repair-store-redesign) .repair-store-distance {
         display: block;
         font-size: 10.5px;
         line-height: 1.42;
     }

     :where(.repair-store-redesign) .repair-store-availability {
         color: var(--repair-green);
         font-weight: 500;
     }

     :where(.repair-store-redesign) .repair-store-next {
         color: #253044;
         font-weight: 500;
     }

     :where(.repair-store-redesign) .repair-store-next strong {
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-store-distance {
         color: #7a8493;
     }

     :where(.repair-store-redesign) .repair-store-detail-placeholder {
         color: #8a94a3;
     }

     :where(.repair-store-redesign) .repair-store-arrow {
         align-self: center;
         color: var(--repair-blue);
         font-size: 14px;
     }

     :where(.repair-store-redesign) .repair-store-map-wrap {
         position: relative;
         min-height: 505px;
         overflow: hidden;
         border: 1px solid #dfe6ef;
         border-radius: 9px;
         background: #f1f4f8;
     }

     :where(.repair-store-redesign) .repair-store-map-wrap iframe {
         display: block;
         width: 100% !important;
         height: 505px !important;
         border: 0 !important;
     }

     :where(.repair-store-redesign) .repair-store-map-loading {
         position: absolute;
         inset: 0;
         z-index: 4;
         display: none;
         align-items: center;
         justify-content: center;
         background: rgba(255, 255, 255, .72);
         color: #536075;
         font-size: 13px;
     }

     :where(.repair-store-redesign) .repair-store-map-wrap.is-loading .repair-store-map-loading {
         display: flex;
     }

     :where(.repair-store-redesign) .repair-map-mobile-toggle {
         display: none;
     }

     :where(.repair-store-redesign) .repair-no-stores {
         padding: 30px 18px;
         border: 1px dashed #cfd8e5;
         border-radius: 9px;
         color: #667085;
         font-size: 13px;
         text-align: center;
     }

     /* ---------- Bottom trust/action ---------- */
     :where(.repair-store-redesign) .repair-store-bottom-grid {
         display: grid;
         grid-template-columns: minmax(0, 1fr) 400px;
         gap: 14px;
         margin-top: 14px;
     }

     :where(.repair-store-redesign) .repair-store-benefits,
:where(.repair-store-redesign) .repair-store-selected-card {
         padding: 15px 17px;
     }

     :where(.repair-store-redesign) .repair-store-benefits-title,
:where(.repair-store-redesign) .repair-selected-label {
         display: block;
         margin-bottom: 11px;
         color: #344054;
         font-size: 11px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-store-benefit-list {
         display: flex;
         flex-wrap: wrap;
         gap: 9px 22px;
     }

     :where(.repair-store-redesign) .repair-store-benefit {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         color: #344054;
         font-size: 11px;
         font-weight: 500;
     }

     :where(.repair-store-redesign) .repair-store-benefit i {
         color: var(--repair-blue);
         font-size: 14px;
     }

     :where(.repair-store-redesign) .repair-selected-store-name {
         display: block;
         margin-bottom: 4px;
         color: #111827;
         font-size: 14px;
         font-weight: 600;
     }

     :where(.repair-store-redesign) .repair-selected-store-address {
         display: block;
         min-height: 16px;
         margin-bottom: 12px;
         color: #707b8b;
         font-size: 16px;
         line-height: 1.4;
     }

     :where(.repair-store-redesign) .repair-payment-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         margin: 11px 0;
         padding-top: 10px;
         border-top: 1px solid #edf1f5;
     }

     :where(.repair-store-redesign) .repair-payment-copy {
         font-size: 11px;
         color: #4e5a6c;
     }

     :where(.repair-store-redesign) .repair-payment-switch {
         position: relative;
         display: inline-flex;
         align-items: center;
         gap: 7px;
         color: #111827;
         font-size: 11px;
         font-weight: 600;
         cursor: pointer;
     }

     :where(.repair-store-redesign) .repair-payment-switch input[type="checkbox"] {
         position: absolute;
         opacity: 0;
         pointer-events: none;
     }

     :where(.repair-store-redesign) .repair-payment-track {
         position: relative;
         width: 34px;
         height: 19px;
         border-radius: 999px;
         background: #cfd7e2;
         transition: .16s ease;
     }

     :where(.repair-store-redesign) .repair-payment-track::after {
         content: "";
         position: absolute;
         top: 3px;
         left: 3px;
         width: 13px;
         height: 13px;
         border-radius: 50%;
         background: #fff;
         box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
         transition: .16s ease;
     }

     :where(.repair-store-redesign) .repair-payment-switch input:checked+.repair-payment-track {
         background: var(--repair-blue);
     }

     :where(.repair-store-redesign) .repair-payment-switch input:checked+.repair-payment-track::after {
         transform: translateX(15px);
     }

     :where(.repair-store-redesign) .repair-store-continue {
         display: inline-flex;
         width: 100%;
         min-height: 43px;
         align-items: center;
         justify-content: center;
         gap: 10px;
         padding: 0 16px;
         border: 0;
         border-radius: 7px;
         background: linear-gradient(90deg, #0868f7, #0572ff);
         box-shadow: 0 7px 17px rgba(8, 104, 247, .18);
         color: #fff;
         font-size: 12px;
         font-weight: 600;
         cursor: pointer;
     }

     :where(.repair-store-redesign) .repair-store-continue:disabled {
         opacity: .45;
         cursor: not-allowed;
         box-shadow: none;
     }

     /* ---------- Mail in ---------- */
     :where(.repair-store-redesign) .repair-mail-panel {
         display: none;
         padding: 18px;
     }

     :where(.repair-store-redesign) .repair-mail-panel.is-active {
         display: block;
     }

     :where(.repair-store-redesign) .repair-mail-intro {
         max-width: 700px;
         margin: 0 auto 17px;
         color: #667085;
         font-size: 12px;
         line-height: 1.65;
         text-align: center;
     }

     :where(.repair-store-redesign) .repair-mail-steps {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 12px;
         max-width: 850px;
         margin: 0 auto 16px;
     }

     :where(.repair-store-redesign) .repair-mail-step {
         padding: 18px;
         border: 1px solid var(--repair-border);
         border-radius: 9px;
         background: #f9fbfe;
         text-align: center;
     }

     :where(.repair-store-redesign) .repair-mail-step-icon {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 48px;
         height: 48px;
         margin-bottom: 10px;
         border-radius: 11px;
         background: var(--repair-blue-soft);
         color: var(--repair-blue);
         font-size: 24px;
     }

     :where(.repair-store-redesign) .repair-mail-step strong {
         display: block;
         margin-bottom: 6px;
         font-size: 13px;
     }

     :where(.repair-store-redesign) .repair-mail-step p {
         margin: 0;
         color: #667085;
         font-size: 11px;
         line-height: 1.55;
     }

     :where(.repair-store-redesign) .repair-mail-action {
         max-width: 310px;
         margin: 0 auto;
     }

     /* ---------- Existing content below ---------- */
     .repair-store-after {
         background: #fff;
     }

     /* ---------- Responsive ---------- */
     @media (max-width: 991.98px) {
         :where(.repair-store-redesign) .repair-store-layout {
             grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr);
         }

         :where(.repair-store-redesign) .repair-store-bottom-grid {
             grid-template-columns: 1fr 270px;
         }
     }

     @media (max-width: 767.98px) {
         .repair-store-redesign {
             padding: 9px 0 20px;
         }

         :where(.repair-store-redesign) .repair-store-shell {
             width: calc(100% - 12px);
         }

         :where(.repair-store-redesign) .repair-store-page-title {
             margin: 0 5px 8px;
             font-size: 14px;
         }

         :where(.repair-store-redesign) .repair-store-card {
             border-radius: 9px;
         }

         :where(.repair-store-redesign) .repair-store-progress-card {
             padding: 12px 10px 10px;
             margin-bottom: 8px;
         }

         :where(.repair-store-redesign) .repair-store-brand-row {
             margin-bottom: 12px;
         }

         :where(.repair-store-redesign) .repair-store-wordmark {
             font-size: 15px;
         }

         :where(.repair-store-redesign) .repair-store-progress::before,
:where(.repair-store-redesign) .repair-store-progress::after {
             top: 11px;
         }

         :where(.repair-store-redesign) .repair-store-step-number {
             width: 23px;
             height: 23px;
             margin-bottom: 5px;
             font-size: 10.5px;
         }

         :where(.repair-store-redesign) .repair-store-step {
             font-size: 10px;
         }

         :where(.repair-store-redesign) .repair-store-device-card {
             grid-template-columns: 54px minmax(0, 1fr);
             gap: 10px;
             padding: 11px;
             margin-bottom: 8px;
         }

         :where(.repair-store-redesign) .repair-store-device-image {
             width: 51px;
             height: 61px;
         }

         :where(.repair-store-redesign) .repair-store-device-image img {
             max-height: 59px;
         }

         :where(.repair-store-redesign) .repair-store-device-copy strong {
             font-size: 13px;
         }

         :where(.repair-store-redesign) .repair-store-device-copy>span {
             font-size: 10.5px;
         }

         :where(.repair-store-redesign) .repair-store-service-count {
             font-size: 10.5px;
             font-weight: 500;
         }

         :where(.repair-store-redesign) .repair-store-service-chips {
             display: none;
         }

         :where(.repair-store-redesign) .repair-store-service-mobile {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
             gap: 4px;
             margin-top: 5px;
         }

         :where(.repair-store-redesign) .repair-store-service-mobile-item {
             display: flex;
             flex-wrap: wrap;
             align-items: center;
             gap: 4px;
             max-width: 100%;
         }

         :where(.repair-store-redesign) .repair-store-service-mobile-title {
             color: #4e5a6c;
             font-size: 10px;
             font-weight: 500;
             line-height: 1.4;
         }

         :where(.repair-store-redesign) .repair-store-service-mobile-variant {
             display: inline-flex;
             align-items: center;
             gap: 4px;
             min-height: 17px;
             padding: 1px 5px;
             border-radius: 999px;
             background: #eff6ff;
             color: var(--repair-blue);
             font-size: 10px;
             font-weight: 600;
             line-height: 1.3;
             white-space: nowrap;
         }

         :where(.repair-store-redesign) .repair-store-mobile-variant-swatch {
             display: inline-block;
             width: 8px;
             height: 8px;
             flex: 0 0 8px;
             border: 1px solid rgba(17, 24, 39, .18);
             border-radius: 50%;
         }

         :where(.repair-store-redesign) .repair-store-service-more {
             color: var(--repair-blue);
             font-size: 10px;
             font-weight: 600;
             white-space: nowrap;
         }

         :where(.repair-store-redesign) .repair-store-device-meta {
             gap: 5px 10px;
             margin-top: 7px;
         }

         :where(.repair-store-redesign) .repair-store-device-meta span {
             font-size: 10px;
         }

         :where(.repair-store-redesign) .repair-store-change {
             grid-column: 1 / -1;
             justify-self: end;
             margin-top: -4px;
             font-size: 10.5px;
         }

         :where(.repair-store-redesign) .repair-store-question {
             margin: 12px 2px 8px;
             font-size: 12px;
         }

         :where(.repair-store-redesign) .repair-method-grid {
             grid-template-columns: 1fr;
             gap: 7px;
             margin-bottom: 8px;
         }

         :where(.repair-store-redesign) .repair-method-card {
             grid-template-columns: 34px minmax(0, 1fr) 18px;
             min-height: 66px;
             padding: 9px 10px;
             gap: 9px;
         }

         :where(.repair-store-redesign) .repair-method-icon {
             width: 31px;
             height: 31px;
             font-size: 16px;
         }

         :where(.repair-store-redesign) .repair-method-copy strong {
             font-size: 11px;
         }

         :where(.repair-store-redesign) .repair-method-copy span {
             font-size: 12px;
         }

         :where(.repair-store-redesign) .repair-method-check {
             width: 17px;
             height: 17px;
             font-size: 11px;
         }

         :where(.repair-store-redesign) .repair-store-content {
             padding: 11px;
         }

         :where(.repair-store-redesign) .repair-store-content-title {
             font-size: 13px;
         }

         :where(.repair-store-redesign) .repair-store-search-row {
             grid-template-columns: 1fr;
             gap: 6px;
             margin-bottom: 10px;
         }

         :where(.repair-store-redesign) .repair-store-search,
:where(.repair-store-redesign) .repair-store-search-btn {
             height: 38px;
             font-size: 11px;
         }

         :where(.repair-store-redesign) .repair-store-search-btn {
             display: none;
         }

         :where(.repair-store-redesign) .repair-store-layout {
             display: block;
         }

         :where(.repair-store-redesign) .repair-store-list {
             max-height: none;
             overflow: visible;
             gap: 7px;
         }

         .repair-store-redesign .repair-store-option.store-card {
             min-height: 111px;
             padding: 10px 9px;
         }

         :where(.repair-store-redesign) .repair-store-option-copy strong {
             font-size: 11.5px;
         }

         :where(.repair-store-redesign) .repair-store-address {
             font-size: 10px;
         }

         :where(.repair-store-redesign) .repair-store-detail-lines {
             margin-top: 5px;
             gap: 1px;
         }

         :where(.repair-store-redesign) .repair-store-availability,
:where(.repair-store-redesign) .repair-store-next,
:where(.repair-store-redesign) .repair-store-distance {
             font-size: 10px;
         }

         :where(.repair-store-redesign) .repair-store-map-wrap {
             display: none;
             min-height: 315px;
             margin-top: 9px;
         }

         :where(.repair-store-redesign) .repair-store-map-wrap.is-mobile-open {
             display: block;
         }

         :where(.repair-store-redesign) .repair-store-map-wrap iframe {
             height: 315px !important;
         }

         :where(.repair-store-redesign) .repair-map-mobile-toggle {
             display: inline-flex;
             width: 100%;
             min-height: 38px;
             align-items: center;
             justify-content: center;
             gap: 7px;
             margin-top: 9px;
             border: 1px solid var(--repair-blue);
             border-radius: 7px;
             background: #fff;
             color: var(--repair-blue);
             font-size: 11px;
             font-weight: 600;
         }

         :where(.repair-store-redesign) .repair-store-bottom-grid {
             grid-template-columns: 1fr;
             gap: 8px;
             margin-top: 8px;
         }

         :where(.repair-store-redesign) .repair-store-benefits {
             display: none;
         }

         :where(.repair-store-redesign) .repair-store-selected-card {
             padding: 11px;
         }

         :where(.repair-store-redesign) .repair-selected-label {
             font-size: 10px;
         }

         :where(.repair-store-redesign) .repair-selected-store-name {
             font-size: 12px;
         }

         :where(.repair-store-redesign) .repair-selected-store-address,
:where(.repair-store-redesign) .repair-payment-copy,
:where(.repair-store-redesign) .repair-payment-switch {
             font-size: 14px;
         }

         :where(.repair-store-redesign) .repair-store-continue {
             min-height: 41px;
             font-size: 12px;
         }

         :where(.repair-store-redesign) .repair-mail-panel {
             padding: 12px 10px;
         }

         :where(.repair-store-redesign) .repair-mail-intro {
             font-size: 10.5px;
         }

         :where(.repair-store-redesign) .repair-mail-steps {
             grid-template-columns: 1fr;
             gap: 7px;
         }

         :where(.repair-store-redesign) .repair-mail-step {
             padding: 13px 11px;
         }

         :where(.repair-store-redesign) .repair-mail-step strong {
             font-size: 11px;
         }

         :where(.repair-store-redesign) .repair-mail-step p {
             font-size: 10.5px;
         }
     }

/* ==========================================================================
   SELECT DATE & TIME
   Source: repair-select-date.php
   ========================================================================== */
/* ==========================================================
   REPAIR SELECT DATE REDESIGN
   Scoped to this page so shared header/footer/FAQ stay intact.
   ========================================================== */
     .repair-date-redesign,
.repair-date-redesign * {
         box-sizing: border-box;
     }

     .repair-date-redesign {
         --repair-blue: #0868f7;
         --repair-blue-dark: #055fd9;
         --repair-blue-soft: #eef5ff;
         --repair-green: #169c52;
         --repair-green-soft: #f2fbf5;
         --repair-ink: #111827;
         --repair-muted: #687386;
         --repair-border: #dbe4ef;
         --repair-bg: #f7f9fc;

         background: var(--repair-bg);
         color: var(--repair-ink);
         font-family: "Poppins", sans-serif;
         padding: 18px 0 32px;
     }

     .repair-date-redesign button,
.repair-date-redesign input {
         font-family: inherit;
     }

     :where(.repair-date-redesign) .repair-date-shell {
         width: min(100% - 28px, 1320px);
         margin: 0 auto;
     }

     :where(.repair-date-redesign) .repair-date-card {
         background: #fff;
         border: 1px solid #e1e7ef;
         border-radius: 13px;
         box-shadow: 0 8px 28px rgba(33, 49, 70, .045);
     }

     /* ---------- Progress ---------- */
     :where(.repair-date-redesign) .repair-date-progress-card {
         padding: 18px 22px 14px;
         margin-bottom: 14px;
     }

     :where(.repair-date-redesign) .repair-date-progress {
         position: relative;
         display: grid;
         grid-template-columns: repeat(5, minmax(0, 1fr));
     }

     :where(.repair-date-redesign) .repair-date-progress::before {
         content: "";
         position: absolute;
         top: 18px;
         left: 10%;
         right: 10%;
         height: 2px;
         background: #dfe5ed;
     }

     :where(.repair-date-redesign) .repair-date-progress::after {
         content: "";
         position: absolute;
         top: 18px;
         left: 10%;
         width: 60%;
         height: 2px;
         background: var(--repair-blue);
     }

     :where(.repair-date-redesign) .repair-date-step {
         position: relative;
         z-index: 2;
         color: #667085;
         text-align: center;
         font-size: 13px;
         font-weight: 500;
     }

     :where(.repair-date-redesign) .repair-date-step-number {
         display: flex;
         width: 37px;
         height: 37px;
         margin: 0 auto 7px;
         align-items: center;
         justify-content: center;
         border: 1px solid #cbd5e1;
         border-radius: 50%;
         background: #fff;
         color: #253044;
         font-size: 14px;
         font-weight: 600;
     }

     :where(.repair-date-redesign) .repair-date-step.is-complete .repair-date-step-number,
:where(.repair-date-redesign) .repair-date-step.is-active .repair-date-step-number {
         border-color: var(--repair-blue);
         background: var(--repair-blue);
         color: #fff;
     }

     :where(.repair-date-redesign) .repair-date-step.is-active {
         color: var(--repair-blue);
         font-weight: 600;
     }

     :where(.repair-date-redesign) .repair-date-step.is-complete .repair-date-step-number i {
         font-size: 15px;
     }

     /* ---------- Booking summary ---------- */
     :where(.repair-date-redesign) .repair-date-summary-card {
         display: grid;
         grid-template-columns: 110px minmax(190px, 1.15fr) minmax(220px, 1.35fr) minmax(220px, 1.25fr) minmax(130px, .65fr);
         gap: 0;
         align-items: stretch;
         padding: 17px 20px;
         margin-bottom: 18px;
     }

     :where(.repair-date-redesign) .repair-date-device-image {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 90px;
         min-height: 108px;
     }

     :where(.repair-date-redesign) .repair-date-device-image img {
         max-width: 86px;
         max-height: 104px;
         object-fit: contain;
     }

     :where(.repair-date-redesign) .repair-date-device-fallback {
         display: flex;
         width: 68px;
         height: 84px;
         align-items: center;
         justify-content: center;
         border: 1px solid #e2e8f0;
         border-radius: 8px;
         background: #f8fbff;
         color: #8aa0bc;
         font-size: 30px;
     }

     :where(.repair-date-redesign) .repair-date-summary-cell {
         min-width: 0;
         padding: 8px 20px;
         border-left: 1px solid #e7ecf2;
     }

     :where(.repair-date-redesign) .repair-date-summary-cell:first-of-type {
         border-left: 0;
     }

     :where(.repair-date-redesign) .repair-date-summary-label {
         display: block;
         margin-bottom: 5px;
         color: #667085;
         font-size: 12px;
         font-weight: 500;
     }

     :where(.repair-date-redesign) .repair-date-summary-value {
         display: block;
         color: #111827;
         font-size: 14px;
         font-weight: 600;
         line-height: 1.45;
     }

     /* ---------- Selected repairs / variants ---------- */
     :where(.repair-date-redesign) .repair-date-repair-list {
         display: grid;
         gap: 7px;
     }

     :where(.repair-date-redesign) .repair-date-repair-item {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 6px;
         min-width: 0;
     }

     :where(.repair-date-redesign) .repair-date-repair-title {
         color: #111827;
         font-size: 14px;
         font-weight: 600;
         line-height: 1.4;
     }

     :where(.repair-date-redesign) .repair-date-repair-variant {
         display: inline-flex;
         min-height: 22px;
         align-items: center;
         gap: 5px;
         padding: 2px 7px;
         border-radius: 999px;
         background: var(--repair-blue-soft);
         color: var(--repair-blue);
         font-size: 10.5px;
         font-weight: 600;
         line-height: 1.3;
         white-space: nowrap;
     }

     :where(.repair-date-redesign) .repair-date-repair-swatch {
         display: inline-block;
         width: 9px;
         height: 9px;
         flex: 0 0 9px;
         border: 1px solid rgba(17, 24, 39, .18);
         border-radius: 50%;
     }

     :where(.repair-date-redesign) .repair-date-summary-sub {
         display: block;
         margin-top: 4px;
         color: #6d7786;
         font-size: 11px;
         line-height: 1.45;
     }

     :where(.repair-date-redesign) .repair-date-summary-link {
         display: inline-flex;
         margin-top: 9px;
         color: var(--repair-blue) !important;
         font-size: 11px;
         font-weight: 600;
         text-decoration: none;
     }

     :where(.repair-date-redesign) .repair-date-payment-pill {
         display: inline-flex;
         min-height: 26px;
         margin-top: 3px;
         padding: 3px 8px;
         align-items: center;
         border: 1px solid #d9e4f4;
         border-radius: 999px;
         background: #f7faff;
         color: #344054;
         font-size: 11px;
         font-weight: 500;
     }

     /* ---------- Main appointment area ---------- */
     :where(.repair-date-redesign) .repair-date-appointment-card {
         padding: 20px;
     }

     :where(.repair-date-redesign) .repair-date-section-title {
         margin: 0 0 11px;
         color: #111827;
         font-size: 17px;
         font-weight: 600;
     }

     :where(.repair-date-redesign) .repair-date-local-note {
         display: flex;
         min-height: 38px;
         margin-bottom: 17px;
         padding: 8px 11px;
         align-items: center;
         gap: 8px;
         border: 1px solid #dce8f8;
         border-radius: 7px;
         background: #f6faff;
         color: #526175;
         font-size: 11px;
     }

     :where(.repair-date-redesign) .repair-date-local-note i {
         color: var(--repair-blue);
     }

     /* Date cards */
     :where(.repair-date-redesign) .repair-date-day-rail {
         display: grid;
         grid-template-columns: repeat(6, minmax(0, 1fr));
         gap: 11px;
         margin-bottom: 20px;
     }

     :where(.repair-date-redesign) .repair-date-day {
         position: relative;
         min-height: 137px;
         padding: 15px 8px 13px;
         border: 1px solid var(--repair-border);
         border-radius: 9px;
         background: #fff;
         color: #344054;
         text-align: center;
         cursor: pointer;
         transition: .16s ease;
     }

     :where(.repair-date-redesign) .repair-date-day:hover {
         border-color: #9dc4ff;
     }

     :where(.repair-date-redesign) .repair-date-day.is-selected {
         border-color: var(--repair-blue);
         background: #f7fbff;
         box-shadow: 0 0 0 1px rgba(8, 104, 247, .05);
     }

     :where(.repair-date-redesign) .repair-date-day-name {
         display: block;
         margin-bottom: 5px;
         font-size: 13px;
         font-weight: 500;
     }

     :where(.repair-date-redesign) .repair-date-day-number {
         display: block;
         color: #111827;
         font-size: 29px;
         font-weight: 600;
         line-height: 1.05;
     }

     :where(.repair-date-redesign) .repair-date-day-month {
         display: block;
         margin-top: 4px;
         color: #667085;
         font-size: 12px;
     }

     :where(.repair-date-redesign) .repair-date-day-today {
         display: block;
         margin-top: 6px;
         color: var(--repair-blue);
         font-size: 10.5px;
         font-weight: 600;
     }

     :where(.repair-date-redesign) .repair-date-day-check {
         display: none;
         width: 22px;
         height: 22px;
         margin: 9px auto 0;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background: var(--repair-blue);
         color: #fff;
         font-size: 13px;
     }

     :where(.repair-date-redesign) .repair-date-day.is-selected .repair-date-day-check {
         display: flex;
     }

     /* Slots + selected appointment */
     :where(.repair-date-redesign) .repair-date-main-grid {
         display: grid;
         grid-template-columns: minmax(0, 1fr) 355px;
         gap: 22px;
         align-items: start;
     }

     :where(.repair-date-redesign) .repair-date-time-heading {
         margin: 0 0 10px;
         color: #111827;
         font-size: 14px;
         font-weight: 600;
     }

     :where(.repair-date-redesign) .repair-date-slots-wrap {
         position: relative;
         min-height: 170px;
     }

     :where(.repair-date-redesign) .repair-date-slot-grid {
         display: grid;
         grid-template-columns: repeat(6, minmax(0, 1fr));
         gap: 9px;
     }

     :where(.repair-date-redesign) .repair-date-time-slot,
:where(.repair-date-redesign) #booking_slots .primary-border-1 {
         display: flex;
         width: 100%;
         min-height: 43px;
         padding: 7px 8px;
         align-items: center;
         justify-content: center;
         border: 1px solid #dbe4ef !important;
         border-radius: 7px !important;
         background: #fff !important;
         color: #273448;
         text-align: center;
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
         transition: .15s ease;
     }

     :where(.repair-date-redesign) .repair-date-time-slot:hover:not(:disabled),
:where(.repair-date-redesign) #booking_slots .primary-border-1:hover:not(.text-muted) {
         border-color: #98bfff !important;
     }

     :where(.repair-date-redesign) .repair-date-time-slot.is-selected {
         border-color: var(--repair-blue) !important;
         background: var(--repair-blue) !important;
         color: #fff !important;
         box-shadow: 0 5px 12px rgba(8, 104, 247, .14);
     }

     :where(.repair-date-redesign) .repair-date-time-slot.is-disabled,
:where(.repair-date-redesign) .repair-date-time-slot:disabled {
         border-color: #e5eaf0 !important;
         background: #f6f7f9 !important;
         color: #a2aab5 !important;
         cursor: not-allowed;
     }

     :where(.repair-date-redesign) .repair-date-empty-slots {
         grid-column: 1 / -1;
         padding: 30px 10px;
         color: #667085;
         font-size: 12px;
         text-align: center;
     }

     :where(.repair-date-redesign) .repair-date-loader {
         display: none;
         padding: 34px 0;
         color: #667085;
         font-size: 12px;
         text-align: center;
     }

     :where(.repair-date-redesign) .repair-date-loader.is-active {
         display: block;
     }

     :where(.repair-date-redesign) .slot-loader {
         display: inline-block;
         width: 34px;
         height: 34px;
         border: 3px solid #e5eaf0;
         border-top-color: var(--repair-blue);
         border-radius: 50%;
         animation: repairDateSpin .8s linear infinite;
     }

     @keyframes repairDateSpin {
         to {
             transform: rotate(360deg);
         }
     }

     /* Selected appointment */
     :where(.repair-date-redesign) .repair-date-selected-card {
         padding: 17px;
     }

     :where(.repair-date-redesign) .repair-date-selected-head {
         display: grid;
         grid-template-columns: 44px minmax(0, 1fr);
         gap: 11px;
         align-items: center;
         padding-bottom: 13px;
         border-bottom: 1px solid #edf1f5;
     }

     :where(.repair-date-redesign) .repair-date-selected-icon {
         display: flex;
         width: 42px;
         height: 42px;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background: var(--repair-blue-soft);
         color: var(--repair-blue);
         font-size: 20px;
     }

     :where(.repair-date-redesign) .repair-date-selected-label {
         display: block;
         margin-bottom: 3px;
         color: #344054;
         font-size: 11px;
         font-weight: 600;
     }

     :where(.repair-date-redesign) .repair-date-selected-value {
         display: block;
         color: #111827;
         font-size: 14px;
         font-weight: 600;
         line-height: 1.4;
     }

     :where(.repair-date-redesign) .repair-date-selected-store {
         display: grid;
         grid-template-columns: 22px minmax(0, 1fr);
         gap: 8px;
         padding: 13px 0;
         border-bottom: 1px solid #edf1f5;
     }

     :where(.repair-date-redesign) .repair-date-selected-store i {
         color: var(--repair-blue);
         font-size: 16px;
     }

     :where(.repair-date-redesign) .repair-date-selected-store strong {
         display: block;
         margin-bottom: 3px;
         font-size: 12px;
     }

     :where(.repair-date-redesign) .repair-date-selected-store span {
         display: block;
         color: #667085;
         font-size: 12px;
         line-height: 1.45;
     }

     :where(.repair-date-redesign) .repair-date-selected-meta {
         display: grid;
         gap: 8px;
         padding-top: 13px;
     }

     :where(.repair-date-redesign) .repair-date-selected-meta span {
         display: flex;
         align-items: center;
         gap: 8px;
         color: #4e5a6c;
         font-size: 11px;
     }

     :where(.repair-date-redesign) .repair-date-selected-meta i {
         color: #344054;
         font-size: 14px;
     }

     /* Repair time message */
     :where(.repair-date-redesign) .repair-date-time-note {
         display: flex;
         margin-top: 16px;
         padding: 12px 13px;
         align-items: flex-start;
         gap: 9px;
         border: 1px solid #cdebd6;
         border-radius: 8px;
         background: var(--repair-green-soft);
         color: #325d40;
     }

     :where(.repair-date-redesign) .repair-date-time-note i {
         margin-top: 1px;
         color: var(--repair-green);
         font-size: 16px;
     }

     :where(.repair-date-redesign) .repair-date-time-note strong {
         display: block;
         margin-bottom: 2px;
         color: #1f5130;
         font-size: 11px;
     }

     :where(.repair-date-redesign) .repair-date-time-note span {
         display: block;
         font-size: 10.5px;
         line-height: 1.45;
     }

     /* Bottom action */
     :where(.repair-date-redesign) .repair-date-action-card {
         display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
         gap: 22px;
         align-items: center;
         margin-top: 16px;
         padding: 15px 18px;
     }

     :where(.repair-date-redesign) .repair-date-ready {
         display: flex;
         align-items: center;
         gap: 11px;
     }

     /*
 * Use the exact same icon treatment as the working
 * "Selected appointment" calendar above.
 */
     :where(.repair-date-redesign) .repair-date-ready-calendar {
         flex: 0 0 42px;
     }

     :where(.repair-date-redesign) .repair-date-ready-icon {
         display: flex;
         width: 43px;
         height: 43px;
         flex: 0 0 43px;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background: var(--repair-blue-soft);
         color: var(--repair-blue);
         font-size: 19px;
     }

     :where(.repair-date-redesign) .repair-date-ready strong {
         display: block;
         margin-bottom: 2px;
         font-size: 14px;
     }

     :where(.repair-date-redesign) .repair-date-ready>div>span {
         display: block;
         color: #687386;
         font-size: 11px;
     }

     :where(.repair-date-redesign) .repair-date-action-summary {
         display: flex;
         justify-content: flex-end;
         gap: 15px;
         margin-bottom: 8px;
         color: #4e5a6c;
         font-size: 11px;
     }

     :where(.repair-date-redesign) .repair-date-action-summary span {
         display: inline-flex;
         align-items: center;
         gap: 5px;
     }

     :where(.repair-date-redesign) .repair-date-review-btn {
         display: inline-flex;
         width: 100%;
         min-height: 48px;
         align-items: center;
         justify-content: center;
         gap: 12px;
         border: 0;
         border-radius: 7px;
         background: linear-gradient(90deg, #0759d9, #0868f7);
         box-shadow: 0 8px 18px rgba(8, 104, 247, .18);
         color: #fff;
         font-size: 14px;
         font-weight: 600;
         cursor: pointer;
     }

     :where(.repair-date-redesign) .repair-date-review-btn:disabled {
         opacity: .42;
         cursor: not-allowed;
         box-shadow: none;
     }

     :where(.repair-date-redesign) .repair-date-action-trust {
         display: flex;
         justify-content: center;
         gap: 7px;
         margin-top: 7px;
         color: #6b7585;
         font-size: 10.5px;
     }

     /* Help */
     :where(.repair-date-redesign) .repair-date-help-card {
         display: grid;
         grid-template-columns: minmax(0, 1fr) 215px 215px;
         gap: 12px;
         align-items: center;
         margin-top: 12px;
         padding: 14px 18px;
     }

     :where(.repair-date-redesign) .repair-date-help-copy {
         display: flex;
         align-items: center;
         gap: 11px;
     }

     :where(.repair-date-redesign) .repair-date-help-copy i {
         display: flex;
         width: 39px;
         height: 39px;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background: var(--repair-blue-soft);
         color: var(--repair-blue);
         font-size: 18px;
     }

     :where(.repair-date-redesign) .repair-date-help-copy strong {
         display: block;
         margin-bottom: 2px;
         font-size: 13px;
     }

     :where(.repair-date-redesign) .repair-date-help-copy span {
         display: block;
         color: #687386;
         font-size: 11px;
     }

     :where(.repair-date-redesign) .repair-date-help-btn {
         display: inline-flex;
         min-height: 40px;
         align-items: center;
         justify-content: center;
         gap: 7px;
         border: 1px solid var(--repair-blue);
         border-radius: 7px;
         background: #fff;
         color: var(--repair-blue) !important;
         font-size: 11px;
         font-weight: 600;
         text-decoration: none;
     }

     /* ---------- Responsive ---------- */
     @media (max-width: 1199.98px) {
         :where(.repair-date-redesign) .repair-date-summary-card {
             grid-template-columns: 90px 1fr 1.15fr 1.1fr .75fr;
         }

         :where(.repair-date-redesign) .repair-date-summary-cell {
             padding-left: 14px;
             padding-right: 14px;
         }

         :where(.repair-date-redesign) .repair-date-slot-grid {
             grid-template-columns: repeat(5, minmax(0, 1fr));
         }
     }

     @media (max-width: 991.98px) {
         :where(.repair-date-redesign) .repair-date-summary-card {
             grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr);
         }

         :where(.repair-date-redesign) .repair-date-summary-cell {
             border-left: 1px solid #e7ecf2;
         }

         :where(.repair-date-redesign) .repair-date-summary-cell:nth-of-type(3),
:where(.repair-date-redesign) .repair-date-summary-cell:nth-of-type(4) {
             margin-top: 12px;
             padding-top: 12px;
             border-top: 1px solid #e7ecf2;
         }

         :where(.repair-date-redesign) .repair-date-main-grid {
             grid-template-columns: 1fr;
         }

         :where(.repair-date-redesign) .repair-date-selected-card {
             order: 2;
         }

         :where(.repair-date-redesign) .repair-date-action-card {
             grid-template-columns: 1fr;
         }

         :where(.repair-date-redesign) .repair-date-help-card {
             grid-template-columns: 1fr 1fr;
         }

         :where(.repair-date-redesign) .repair-date-help-copy {
             grid-column: 1 / -1;
         }
     }

     @media (max-width: 767.98px) {
         .repair-date-redesign {
             padding: 8px 0 20px;
         }

         :where(.repair-date-redesign) .repair-date-shell {
             width: calc(100% - 12px);
         }

         :where(.repair-date-redesign) .repair-date-card {
             border-radius: 9px;
         }

         :where(.repair-date-redesign) .repair-date-progress-card {
             padding: 11px 6px 9px;
             margin-bottom: 8px;
         }

         :where(.repair-date-redesign) .repair-date-progress::before,
:where(.repair-date-redesign) .repair-date-progress::after {
             top: 11px;
         }

         :where(.repair-date-redesign) .repair-date-step-number {
             width: 23px;
             height: 23px;
             margin-bottom: 5px;
             font-size: 10.5px;
         }

         :where(.repair-date-redesign) .repair-date-step.is-complete .repair-date-step-number i {
             font-size: 11px;
         }

         :where(.repair-date-redesign) .repair-date-step {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-summary-card {
             grid-template-columns: 58px minmax(0, 1fr);
             gap: 8px;
             padding: 11px;
         }

         :where(.repair-date-redesign) .repair-date-device-image {
             width: 54px;
             min-height: 66px;
         }

         :where(.repair-date-redesign) .repair-date-device-image img {
             max-width: 52px;
             max-height: 64px;
         }

         :where(.repair-date-redesign) .repair-date-device-fallback {
             width: 49px;
             height: 60px;
             font-size: 23px;
         }

         :where(.repair-date-redesign) .repair-date-summary-cell {
             padding: 2px 0 8px;
             border-left: 0;
         }

         :where(.repair-date-redesign) .repair-date-summary-cell.repair-date-device-main {
             padding-left: 2px;
         }

         :where(.repair-date-redesign) .repair-date-summary-cell.repair-date-repair-cell,
:where(.repair-date-redesign) .repair-date-summary-cell.repair-date-store-cell,
:where(.repair-date-redesign) .repair-date-summary-cell.repair-date-payment-cell {
             grid-column: 1 / -1;
             margin-top: 0;
             padding: 9px 0 0;
             border-top: 1px solid #edf1f5;
         }

         :where(.repair-date-redesign) .repair-date-summary-label {
             margin-bottom: 3px;
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-summary-value {
             font-size: 12px;
         }

         :where(.repair-date-redesign) .repair-date-repair-list {
             gap: 5px;
         }

         :where(.repair-date-redesign) .repair-date-repair-item {
             gap: 4px;
         }

         :where(.repair-date-redesign) .repair-date-repair-title {
             font-size: 11px;
             line-height: 1.4;
         }

         :where(.repair-date-redesign) .repair-date-repair-variant {
             min-height: 18px;
             gap: 4px;
             padding: 1px 5px;
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-repair-swatch {
             width: 8px;
             height: 8px;
             flex-basis: 8px;
         }

         :where(.repair-date-redesign) .repair-date-summary-sub,
:where(.repair-date-redesign) .repair-date-summary-link,
:where(.repair-date-redesign) .repair-date-payment-pill {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-appointment-card {
             padding: 11px;
         }

         :where(.repair-date-redesign) .repair-date-section-title {
             font-size: 14px;
         }

         :where(.repair-date-redesign) .repair-date-local-note {
             min-height: 34px;
             margin-bottom: 12px;
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-day-rail {
             display: flex;
             gap: 7px;
             overflow-x: auto;
             margin-right: -11px;
             padding: 1px 11px 5px 0;
             scrollbar-width: thin;
         }

         :where(.repair-date-redesign) .repair-date-day {
             flex: 0 0 78px;
             min-height: 91px;
             padding: 9px 5px;
         }

         :where(.repair-date-redesign) .repair-date-day-name {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-day-number {
             font-size: 17px;
         }

         :where(.repair-date-redesign) .repair-date-day-month {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-day-today {
             margin-top: 3px;
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-day-check {
             width: 16px;
             height: 16px;
             margin-top: 5px;
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-time-heading {
             font-size: 12px;
         }

         :where(.repair-date-redesign) .repair-date-slot-grid {
             grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: 7px;
         }

         :where(.repair-date-redesign) .repair-date-time-slot {
             min-height: 39px;
             padding: 6px 4px;
             font-size: 10.5px;
         }

         :where(.repair-date-redesign) .repair-date-selected-card {
             padding: 11px;
         }

         :where(.repair-date-redesign) .repair-date-selected-head {
             grid-template-columns: 35px minmax(0, 1fr);
         }

         :where(.repair-date-redesign) .repair-date-selected-icon {
             width: 34px;
             height: 34px;
             font-size: 15px;
         }

         :where(.repair-date-redesign) .repair-date-ready-calendar {
             flex-basis: 34px;
         }

         :where(.repair-date-redesign) .repair-date-selected-label {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-selected-value {
             font-size: 11px;
         }

         :where(.repair-date-redesign) .repair-date-selected-store strong {
             font-size: 11px;
         }

         :where(.repair-date-redesign) .repair-date-selected-store span,
:where(.repair-date-redesign) .repair-date-selected-meta span {
             font-size: 12px;
         }

         :where(.repair-date-redesign) .repair-date-time-note {
             padding: 10px;
         }

         :where(.repair-date-redesign) .repair-date-action-card {
             gap: 10px;
             padding: 11px;
         }

         :where(.repair-date-redesign) .repair-date-ready-icon {
             width: 35px;
             height: 35px;
             flex-basis: 35px;
             font-size: 15px;
         }

         :where(.repair-date-redesign) .repair-date-ready strong {
             font-size: 11px;
         }

         :where(.repair-date-redesign) .repair-date-ready>div>span {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-action-summary {
             justify-content: flex-start;
             flex-wrap: wrap;
             gap: 7px 12px;
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-review-btn {
             min-height: 43px;
             font-size: 11px;
         }

         :where(.repair-date-redesign) .repair-date-action-trust {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-help-card {
             grid-template-columns: 1fr 1fr;
             padding: 11px;
         }

         :where(.repair-date-redesign) .repair-date-help-copy strong {
             font-size: 11px;
         }

         :where(.repair-date-redesign) .repair-date-help-copy span,
:where(.repair-date-redesign) .repair-date-help-btn {
             font-size: 10px;
         }

         :where(.repair-date-redesign) .repair-date-help-btn {
             min-height: 37px;
         }
     }

     @media (max-width: 399px) {
         :where(.repair-date-redesign) .repair-date-slot-grid {
             grid-template-columns: repeat(3, minmax(0, 1fr));
         }

         :where(.repair-date-redesign) .repair-date-help-card {
             grid-template-columns: 1fr;
         }

         :where(.repair-date-redesign) .repair-date-help-copy {
             grid-column: auto;
         }
     }

/* ==========================================================================
   CONFIRM BOOKING
   Source: repair-confirm.php
   ========================================================================== */
/* ==========================================================
   REPAIR CONFIRM REDESIGN
   Scoped so shared header/footer and repair-addon.js remain intact.
   ========================================================== */
.repair-confirm-redesign,
.repair-confirm-redesign * {
    box-sizing: border-box;
}

.repair-confirm-redesign {
    --repair-blue: #0868f7;
    --repair-blue-soft: #eef5ff;
    --repair-ink: #111827;
    --repair-muted: #667085;
    --repair-border: #dfe6ef;
    --repair-bg: #f7f9fc;
    --repair-green: #159653;

    background: var(--repair-bg);
    color: var(--repair-ink);
    font-family: "Poppins", sans-serif;
    padding: 18px 0 34px;
}

.repair-confirm-redesign button,
.repair-confirm-redesign input {
    font-family: inherit;
}

:where(.repair-confirm-redesign) .repair-confirm-shell {
    width: min(100% - 28px, 1180px);
    margin: 0 auto;
}

:where(.repair-confirm-redesign) .repair-confirm-page-title {
    margin: 0 0 13px;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

:where(.repair-confirm-redesign) .repair-confirm-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(33, 49, 70, .045);
}

/* ---------- Progress ---------- */
:where(.repair-confirm-redesign) .repair-confirm-progress-card {
    padding: 17px 18px 13px;
    margin-bottom: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-brand {
    display: block;
    margin-bottom: 14px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.04em;
}

:where(.repair-confirm-redesign) .repair-confirm-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

:where(.repair-confirm-redesign) .repair-confirm-progress::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #dfe5ed;
}

:where(.repair-confirm-redesign) .repair-confirm-progress::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--repair-blue);
}

:where(.repair-confirm-redesign) .repair-confirm-progress.is-mailin-progress::after {
    width: 60%;
}

:where(.repair-confirm-redesign) .repair-confirm-step {
    position: relative;
    z-index: 2;
    min-width: 0;
    color: #727b89;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

:where(.repair-confirm-redesign) .repair-confirm-step-number {
    display: flex;
    width: 29px;
    height: 29px;
    margin: 0 auto 7px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd7e2;
    border-radius: 50%;
    background: #fff;
    color: #253044;
    font-size: 12px;
    font-weight: 600;
}

:where(.repair-confirm-redesign) .repair-confirm-step.is-complete .repair-confirm-step-number,
:where(.repair-confirm-redesign) .repair-confirm-step.is-active .repair-confirm-step-number {
    border-color: var(--repair-blue);
    background: var(--repair-blue);
    color: #fff;
}

:where(.repair-confirm-redesign) .repair-confirm-step.is-active {
    color: var(--repair-blue);
    font-weight: 600;
}

/* ---------- Layout ---------- */
:where(.repair-confirm-redesign) .repair-confirm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, .82fr);
    gap: 14px;
    align-items: start;
}

:where(.repair-confirm-redesign) .repair-confirm-main,
:where(.repair-confirm-redesign) .repair-confirm-side {
    display: grid;
    gap: 12px;
}

:where(.repair-confirm-redesign) .repair-confirm-section {
    padding: 17px 18px;
}

:where(.repair-confirm-redesign) .repair-confirm-intro h1 {
    margin: 0 0 5px;
    color: #111827;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}

:where(.repair-confirm-redesign) .repair-confirm-intro p {
    margin: 0;
    color: var(--repair-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ---------- Section headings ---------- */
:where(.repair-confirm-redesign) .repair-confirm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

:where(.repair-confirm-redesign) .repair-confirm-section-title {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

:where(.repair-confirm-redesign) .repair-confirm-edit {
    color: var(--repair-blue) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- Repair ---------- */
:where(.repair-confirm-redesign) .repair-confirm-repair {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

:where(.repair-confirm-redesign) .repair-confirm-device-image {
    display: flex;
    width: 64px;
    height: 76px;
    align-items: center;
    justify-content: center;
}

:where(.repair-confirm-redesign) .repair-confirm-device-image img {
    max-width: 62px;
    max-height: 74px;
    object-fit: contain;
}

:where(.repair-confirm-redesign) .repair-confirm-device-fallback {
    display: flex;
    width: 54px;
    height: 66px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fbff;
    color: #8aa0bc;
    font-size: 24px;
}

:where(.repair-confirm-redesign) .repair-confirm-device-title {
    display: block;
    margin-bottom: 3px;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

:where(.repair-confirm-redesign) .repair-confirm-service-text {
    display: block;
    color: #455468;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------- Selected repair variants ---------- */
:where(.repair-confirm-redesign) .repair-confirm-service-list {
    display: grid;
    gap: 6px;
    margin-top: 3px;
}

:where(.repair-confirm-redesign) .repair-confirm-service-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

:where(.repair-confirm-redesign) .repair-confirm-service-title {
    color: #455468;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

:where(.repair-confirm-redesign) .repair-confirm-service-variant {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--repair-blue-soft);
    color: var(--repair-blue);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

:where(.repair-confirm-redesign) .repair-confirm-service-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1px solid rgba(17, 24, 39, .18);
    border-radius: 50%;
}

:where(.repair-confirm-redesign) .repair-confirm-service-warranty {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f2fbf5;
    color: #137a46;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

:where(.repair-confirm-redesign) .repair-confirm-service-warranty i {
    font-size: 11px;
}

:where(.repair-confirm-redesign) .repair-confirm-service-count {
    display: block;
    margin-top: 4px;
    color: #7a8494;
    font-size: 11.5px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #edf1f5;
}

:where(.repair-confirm-redesign) .repair-confirm-meta-label {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 11.5px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-meta-value {
    display: block;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

/* ---------- Store / date ---------- */
:where(.repair-confirm-redesign) .repair-confirm-info-row {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: start;
}

:where(.repair-confirm-redesign) .repair-confirm-info-row + .repair-confirm-info-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf1f5;
}

:where(.repair-confirm-redesign) .repair-confirm-info-icon {
    color: #344054;
    font-size: 16px;
}

:where(.repair-confirm-redesign) .repair-confirm-info-copy strong {
    display: block;
    margin-bottom: 3px;
    color: #111827;
    font-size: 13.5px;
    line-height: 1.4;
}

:where(.repair-confirm-redesign) .repair-confirm-info-copy span {
    display: block;
    color: #667085;
    font-size: 13px;
    line-height: 1.55;
}

/* ---------- Payment ---------- */
:where(.repair-confirm-redesign) .repair-confirm-payment-lines {
    display: grid;
    gap: 9px;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-line {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #485568;
    font-size: 13px;
    line-height: 1.5;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-line strong {
    color: #111827;
    font-weight: 600;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-line.is-discount strong {
    color: var(--repair-green);
}

:where(.repair-confirm-redesign) .repair-confirm-payment-total {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 3px;
    padding-top: 11px;
    border-top: 1px solid #e7ecf2;
    color: #111827;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-total strong {
    font-size: 18px;
}

:where(.repair-confirm-redesign) .repair-confirm-vat {
    display: block;
    margin-top: 2px;
    color: #7a8494;
    font-size: 11.5px;
    line-height: 1.4;
}

/* ---------- Add-on ---------- */
:where(.repair-confirm-redesign) .repair-confirm-addon {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 13px 40px 13px 13px;
    border: 1px solid #f1d38a;
    border-radius: 9px;
    background: #fffaf0;
}

:where(.repair-confirm-redesign) .repair-confirm-addon img {
    max-width: 58px;
    max-height: 62px;
    object-fit: contain;
}

:where(.repair-confirm-redesign) .repair-confirm-addon strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.4;
}

:where(.repair-confirm-redesign) .repair-confirm-addon span {
    display: block;
    color: #687386;
    font-size: 12px;
    line-height: 1.5;
}

:where(.repair-confirm-redesign) .repair-confirm-addon-price {
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 600;
    white-space: nowrap;
}

:where(.repair-confirm-redesign) .repair-confirm-addon .repair_remove_addon {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 20px;
    height: 20px;
    padding: 0;
}

/* ---------- What happens next ---------- */
:where(.repair-confirm-redesign) .repair-confirm-next-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.repair-confirm-redesign) .repair-confirm-next-list li {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    color: #344054;
    font-size: 13px;
    line-height: 1.55;
}

:where(.repair-confirm-redesign) .repair-confirm-next-list i {
    color: var(--repair-blue);
    font-size: 14px;
}

/* ---------- CTA ---------- */
:where(.repair-confirm-redesign) .repair-confirm-action {
    padding: 12px;
}

:where(.repair-confirm-redesign) .repair-confirm-submit {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(90deg, #0868f7, #0572ff);
    box-shadow: 0 7px 17px rgba(8,104,247,.18);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

:where(.repair-confirm-redesign) .repair-confirm-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    color: #687386;
    font-size: 11.5px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-trust i {
    color: #344054;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    :where(.repair-confirm-redesign) .repair-confirm-layout {
        grid-template-columns: 1fr;
    }

    :where(.repair-confirm-redesign) .repair-confirm-side {
        grid-template-columns: 1fr 1fr;
    }

    :where(.repair-confirm-redesign) .repair-confirm-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .repair-confirm-redesign {
        padding: 8px 0 20px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-shell {
        width: calc(100% - 12px);
    }

    :where(.repair-confirm-redesign) .repair-confirm-page-title {
        margin: 0 5px 8px;
        font-size: 16px;
        line-height: 1.35;
    }

    :where(.repair-confirm-redesign) .repair-confirm-card {
        border-radius: 9px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-progress-card {
        padding: 11px 8px 9px;
        margin-bottom: 8px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-brand {
        margin-bottom: 10px;
        font-size: 14px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-progress::before,
:where(.repair-confirm-redesign) .repair-confirm-progress::after {
        top: 11px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-step-number {
        width: 23px;
        height: 23px;
        margin-bottom: 5px;
        font-size: 10.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-step {
        font-size: 10.5px;
        line-height: 1.35;
    }

    :where(.repair-confirm-redesign) .repair-confirm-layout {
        gap: 8px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-main,
:where(.repair-confirm-redesign) .repair-confirm-side {
        gap: 8px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-side {
        grid-template-columns: 1fr;
    }

    :where(.repair-confirm-redesign) .repair-confirm-section {
        padding: 12px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-intro h1 {
        font-size: 18px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-intro p {
        font-size: 12.5px;
        line-height: 1.55;
    }

    :where(.repair-confirm-redesign) .repair-confirm-section-title {
        font-size: 15px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-edit {
        font-size: 11.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-repair {
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 9px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-device-image {
        width: 51px;
        height: 62px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-device-image img {
        max-width: 49px;
        max-height: 60px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-device-title {
        font-size: 14px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-text {
        font-size: 12.5px;
        line-height: 1.5;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-list {
        gap: 4px;
        margin-top: 2px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-item {
        gap: 4px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-title {
        font-size: 12.5px;
        line-height: 1.5;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-variant {
        min-height: 19px;
        gap: 4px;
        padding: 2px 6px;
        font-size: 11px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-swatch {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-warranty {
        min-height: 19px;
        gap: 4px;
        padding: 2px 6px;
        font-size: 11px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-warranty i {
        font-size: 10px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-count,
:where(.repair-confirm-redesign) .repair-confirm-meta-label {
        font-size: 11px;
        line-height: 1.45;
    }

    :where(.repair-confirm-redesign) .repair-confirm-meta-value {
        font-size: 12px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-info-copy strong {
        font-size: 12.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-info-copy span {
        font-size: 12px;
        line-height: 1.5;
    }

    :where(.repair-confirm-redesign) .repair-confirm-payment-line {
        font-size: 12.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-payment-total {
        font-size: 15px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-payment-total strong {
        font-size: 17px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-addon {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    :where(.repair-confirm-redesign) .repair-confirm-addon-price {
        grid-column: 2;
        justify-self: start;
    }

    :where(.repair-confirm-redesign) .repair-confirm-next-list li {
        font-size: 12px;
        line-height: 1.55;
    }

    :where(.repair-confirm-redesign) .repair-confirm-submit {
        min-height: 46px;
        font-size: 13.5px;
    }
}

/* ==========================================================================
   CHECKOUT
   Source: repair-checkout.php
   ========================================================================== */
/* ==========================================================
   REPAIR CHECKOUT REDESIGN
   Internal for now. Will later be consolidated into repair-flow.css.
   ========================================================== */
    .repair-checkout-redesign,
.repair-checkout-redesign * {
        box-sizing: border-box;
    }

    .repair-checkout-redesign {
        --repair-blue: #0868f7;
        --repair-blue-dark: #065bd7;
        --repair-blue-soft: #eef5ff;
        --repair-green: #159653;
        --repair-red: #dc3545;
        --repair-ink: #101828;
        --repair-muted: #667085;
        --repair-border: #d8e1ec;
        --repair-bg: #f8fafc;
        --repair-card: #ffffff;

        background: var(--repair-bg);
        color: var(--repair-ink);
        font-family: "Poppins", sans-serif;
        padding: 18px 0 36px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .repair-checkout-redesign button,
.repair-checkout-redesign input,
.repair-checkout-redesign select,
.repair-checkout-redesign textarea {
        font-family: inherit;
    }

    :where(.repair-checkout-redesign) .repair-checkout-shell {
        width: min(100% - 40px, 1180px);
        margin: 0 auto;
    }

    /* ---------- Progress ---------- */
    :where(.repair-checkout-redesign) .repair-checkout-progress {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin-bottom: 24px;
        padding: 10px 18px 0;
    }

    :where(.repair-checkout-redesign) .repair-checkout-progress::before {
        content: "";
        position: absolute;
        top: 25px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: #dfe5ed;
    }

    :where(.repair-checkout-redesign) .repair-checkout-progress::after {
        content: "";
        position: absolute;
        top: 25px;
        left: 10%;
        width: 80%;
        height: 2px;
        background: var(--repair-blue);
    }

    :where(.repair-checkout-redesign) .repair-checkout-step {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #5f6b7a;
        font-size: 12px;
        font-weight: 500;
    }

    :where(.repair-checkout-redesign) .repair-checkout-step-number {
        display: flex;
        width: 32px;
        height: 32px;
        margin: 0 auto 7px;
        align-items: center;
        justify-content: center;
        border: 1px solid #cdd7e3;
        border-radius: 50%;
        background: #fff;
        color: #344054;
        font-size: 12px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-checkout-step.is-complete .repair-checkout-step-number,
:where(.repair-checkout-redesign) .repair-checkout-step.is-active .repair-checkout-step-number {
        border-color: var(--repair-blue);
        background: var(--repair-blue);
        color: #fff;
    }

    :where(.repair-checkout-redesign) .repair-checkout-step.is-active {
        color: var(--repair-blue);
        font-weight: 600;
    }

    /* ---------- Page heading ---------- */
    :where(.repair-checkout-redesign) .repair-checkout-heading {
        margin-bottom: 18px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-heading h1 {
        margin: 0 0 5px;
        color: #111827;
        font-size: clamp(30px, 3vw, 42px);
        font-weight: 600;
        line-height: 1.18;
    }

    :where(.repair-checkout-redesign) .repair-checkout-heading p {
        margin: 0;
        color: #5f6b7a;
        font-size: 14px;
        line-height: 1.55;
    }

    /* ---------- Main layout ---------- */
    :where(.repair-checkout-redesign) .repair-checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(330px, .82fr);
        gap: 22px;
        align-items: start;
    }

    :where(.repair-checkout-redesign) .repair-checkout-form-area {
        min-width: 0;
    }

    :where(.repair-checkout-redesign) .repair-checkout-summary-wrap {
        position: sticky;
        top: 20px;
        min-width: 0;
    }

    :where(.repair-checkout-redesign) .repair-checkout-card {
        background: var(--repair-card);
        border: 1px solid #dfe6ef;
        border-radius: 13px;
        box-shadow: 0 8px 26px rgba(33, 49, 70, .045);
    }

    /* ---------- Form sections ---------- */
    :where(.repair-checkout-redesign) .repair-checkout-section {
        padding: 0 0 23px;
        margin-bottom: 23px;
        border-bottom: 1px solid #e4e9f0;
    }

    :where(.repair-checkout-redesign) .repair-checkout-section:last-of-type {
        margin-bottom: 15px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-section-title {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 14px;
        color: var(--repair-blue);
        font-size: 18px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-checkout-section-title .repair-checkout-section-number {
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-checkout-subtitle {
        margin: 0 0 11px;
        color: #344054;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }

    :where(.repair-checkout-redesign) .repair-checkout-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px 18px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-field {
        min-width: 0;
    }

    :where(.repair-checkout-redesign) .repair-checkout-field.is-full {
        grid-column: 1 / -1;
    }

    :where(.repair-checkout-redesign) .repair-checkout-field.is-third {
        grid-column: span 1;
    }

    :where(.repair-checkout-redesign) .repair-checkout-label {
        display: block;
        margin-bottom: 6px;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-checkout-input-wrap {
        position: relative;
    }

    :where(.repair-checkout-redesign) .repair-checkout-input-icon {
        position: absolute;
        top: 50%;
        left: 13px;
        color: #7b8797;
        font-size: 15px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    :where(.repair-checkout-redesign) .repair-checkout-input {
        width: 100%;
        min-height: 48px;
        padding: 10px 13px;
        border: 1px solid #cfd9e6;
        border-radius: 8px;
        background: #fff;
        color: #1d2939;
        font-size: 14px;
        outline: 0;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    :where(.repair-checkout-redesign) .repair-checkout-input.has-icon {
        padding-left: 39px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-input:focus {
        border-color: #82b5ff;
        box-shadow: 0 0 0 3px rgba(8, 104, 247, .08);
    }

    :where(.repair-checkout-redesign) .repair-checkout-input.is-invalid {
        border-color: var(--repair-red) !important;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, .08);
    }

    :where(.repair-checkout-redesign) .repair-checkout-input.is-valid {
        border-color: #69b985;
    }

    :where(.repair-checkout-redesign) .repair-checkout-help {
        display: block;
        margin-top: 5px;
        color: #667085;
        font-size: 12px;
        line-height: 1.45;
    }

    :where(.repair-checkout-redesign) .invalid-feedback {
        font-size: 12px;
    }

    /* Address help */
    :where(.repair-checkout-redesign) .repair-address-help {
        margin-bottom: 13px;
        padding: 11px 13px;
        border: 1px solid #bce5ef;
        border-radius: 8px;
        background: #eaf9fc;
        color: #285461;
        font-size: 12px;
        line-height: 1.5;
    }

    :where(.repair-checkout-redesign) .repair-address-help strong {
        color: #153e49;
    }

    /* Billing checkbox */
    :where(.repair-checkout-redesign) .repair-checkout-check-row {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-top: 3px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-check-row input {
        width: 17px;
        height: 17px;
        margin-top: 2px;
        flex: 0 0 17px;
        accent-color: var(--repair-blue);
    }

    :where(.repair-checkout-redesign) .repair-checkout-check-row label {
        color: #344054;
        font-size: 13px;
        line-height: 1.45;
    }

    /* Billing collapse */
    :where(.repair-checkout-redesign) .repair-billing-panel {
        margin-top: 17px;
        padding-top: 17px;
        border-top: 1px solid #e7ecf2;
    }

    /* ---------- Shipping ---------- */
    :where(.repair-checkout-redesign) .repair-shipping-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 14px;
        border: 1px solid #ccd9eb;
        border-radius: 9px;
        background: #fbfdff;
    }

    :where(.repair-checkout-redesign) .repair-shipping-icon {
        display: flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--repair-blue-soft);
    }

    :where(.repair-checkout-redesign) .repair-shipping-icon img {
        max-width: 31px;
        max-height: 31px;
    }

    :where(.repair-checkout-redesign) .repair-shipping-copy strong {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
    }

    :where(.repair-checkout-redesign) .repair-shipping-copy span {
        display: block;
        color: #667085;
        font-size: 12px;
    }

    :where(.repair-checkout-redesign) .repair-shipping-price {
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* ---------- Payment methods ---------- */
    :where(.repair-checkout-redesign) .payment-method-invalid {
        padding: 9px;
        border: 2px solid var(--repair-red);
        border-radius: 11px;
    }

    :where(.repair-checkout-redesign) .repair-payment-list {
        display: grid;
        gap: 8px;
    }

    :where(.repair-checkout-redesign) .repair-payment-option {
        position: relative;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        gap: 11px;
        align-items: center;
        min-height: 61px;
        padding: 10px 14px;
        border: 1px solid #cfd9e6;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        transition: .15s ease;
    }

    :where(.repair-checkout-redesign) .repair-payment-option:hover {
        border-color: #9dc3fb;
    }

    :where(.repair-checkout-redesign) .repair-payment-option.active {
        border-color: var(--repair-blue);
        box-shadow: 0 0 0 1px rgba(8, 104, 247, .06);
    }

    :where(.repair-checkout-redesign) .repair-payment-option input[type="radio"] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: var(--repair-blue);
    }

    :where(.repair-checkout-redesign) .repair-payment-copy strong {
        display: block;
        color: #111827;
        font-size: 14px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-payment-copy span {
        display: block;
        margin-top: 1px;
        color: #667085;
        font-size: 11px;
    }

    :where(.repair-checkout-redesign) .repair-payment-logo {
        display: flex;
        min-width: 78px;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
    }

    :where(.repair-checkout-redesign) .repair-payment-logo img {
        display: block;
        max-width: 78px;
        max-height: 26px;
        object-fit: contain;
    }

    :where(.repair-checkout-redesign) .repair-payment-mini-logo {
        max-width: 36px !important;
        max-height: 20px !important;
    }

    /* ---------- Terms ---------- */
    :where(.repair-checkout-redesign) .repair-checkout-consents {
        display: grid;
        gap: 10px;
        margin: 18px 0;
    }

    :where(.repair-checkout-redesign) .repair-checkout-consents .repair-checkout-check-row {
        margin: 0;
    }

    :where(.repair-checkout-redesign) .repair-checkout-consents a {
        color: var(--repair-blue);
    }

    /* ---------- CTA ---------- */
    :where(.repair-checkout-redesign) .repair-checkout-submit {
        display: inline-flex;
        width: 100%;
        min-height: 54px;
        align-items: center;
        justify-content: center;
        gap: 14px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(90deg, #0868f7, #0564df);
        box-shadow: 0 9px 20px rgba(8, 104, 247, .18);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }

    :where(.repair-checkout-redesign) .repair-checkout-submit:disabled {
        opacity: .6;
        cursor: not-allowed;
        box-shadow: none;
    }

    :where(.repair-checkout-redesign) .repair-checkout-secure {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 10px;
        color: #667085;
        font-size: 12px;
    }

    /* Hidden legacy hooks used by repair-addon.js. */
    :where(.repair-checkout-redesign) .repair-checkout-contract-hook {
        position: absolute !important;
        left: -10000px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }

    :where(.repair-checkout-redesign) .repair-checkout-submit-total {
        display: none;
        margin-left: auto;
        font-weight: 600;
    }

    /* ---------- Booking summary ---------- */
    :where(.repair-checkout-redesign) .repair-booking-summary {
        overflow: hidden;
    }

    :where(.repair-checkout-redesign) .repair-booking-summary-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 18px 0;
    }

    :where(.repair-checkout-redesign) .repair-booking-summary-head h2 {
        margin: 0;
        color: #111827;
        font-size: 18px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-booking-edit {
        color: var(--repair-blue) !important;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    :where(.repair-checkout-redesign) .repair-booking-body {
        padding: 15px 18px 18px;
    }

    :where(.repair-checkout-redesign) .repair-booking-product {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 13px;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 1px solid #e8edf3;
    }

    :where(.repair-checkout-redesign) .repair-booking-product-image {
        display: flex;
        width: 70px;
        height: 82px;
        align-items: center;
        justify-content: center;
    }

    :where(.repair-checkout-redesign) .repair-booking-product-image img {
        max-width: 68px;
        max-height: 80px;
        object-fit: contain;
    }

    :where(.repair-checkout-redesign) .repair-booking-product-fallback {
        display: flex;
        width: 58px;
        height: 70px;
        align-items: center;
        justify-content: center;
        border: 1px solid #e0e7ef;
        border-radius: 8px;
        background: #f8fbff;
        color: #8aa0bc;
        font-size: 26px;
    }

    :where(.repair-checkout-redesign) .repair-booking-product strong {
        display: block;
        margin-bottom: 4px;
        color: #111827;
        font-size: 16px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-booking-product span {
        display: block;
        color: #455468;
        font-size: 12px;
        line-height: 1.45;
    }

    /* Repair service + optional service variant */
    :where(.repair-checkout-redesign) .repair-booking-service-list {
        display: grid;
        gap: 7px;
        margin-top: 4px;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-title {
        color: #455468 !important;
        font-size: 12px !important;
        font-weight: 500;
        line-height: 1.45;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-variant {
        display: inline-flex !important;
        width: auto;
        min-height: 21px;
        align-items: center;
        gap: 5px;
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--repair-blue-soft);
        color: var(--repair-blue) !important;
        font-size: 8px !important;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-variant>span {
        display: inline;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-swatch {
        display: inline-block !important;
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        border: 1px solid rgba(17, 24, 39, .18);
        border-radius: 50%;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-warranty {
        display: inline-flex !important;
        width: auto;
        min-height: 21px;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        border-radius: 999px;
        background: #f2fbf5;
        color: #137a46 !important;
        font-size: 8px !important;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-warranty > i {
        color: inherit;
        font-size: 10px;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-warranty > span {
        display: inline !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-count {
        margin-top: 4px;
        color: #7a8494 !important;
        font-size: 11px !important;
    }

    /* summary detail rows */
    :where(.repair-checkout-redesign) .repair-booking-detail {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 9px;
        padding: 13px 0;
        border-bottom: 1px solid #edf1f5;
    }

    :where(.repair-checkout-redesign) .repair-booking-detail>i {
        color: #536075;
        font-size: 16px;
    }

    :where(.repair-checkout-redesign) .repair-booking-detail strong {
        display: block;
        margin-bottom: 2px;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-booking-detail span {
        display: block;
        color: #667085;
        font-size: 12px;
        line-height: 1.45;
    }

    /* add-on */
    :where(.repair-checkout-redesign) .repair-booking-addon {
        position: relative;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        margin-top: 13px;
        padding: 10px 34px 10px 10px;
        border: 1px solid #f0d490;
        border-radius: 8px;
        background: #fffaf1;
    }

    :where(.repair-checkout-redesign) .repair-booking-addon img {
        max-width: 48px;
        max-height: 50px;
        object-fit: contain;
    }

    :where(.repair-checkout-redesign) .repair-booking-addon strong {
        display: block;
        font-size: 12px;
    }

    :where(.repair-checkout-redesign) .repair-booking-addon span {
        display: block;
        color: #667085;
        font-size: 10px;
    }

    :where(.repair-checkout-redesign) .repair-booking-addon-price {
        color: #111827 !important;
        font-size: 12px !important;
        font-weight: 600;
        white-space: nowrap;
    }

    :where(.repair-checkout-redesign) .repair-booking-addon .repair_remove_addon {
        position: absolute;
        top: 7px;
        right: 7px;
        width: 18px;
        height: 18px;
    }

    /* Totals */
    :where(.repair-checkout-redesign) .repair-booking-totals {
        display: grid;
        gap: 9px;
        padding-top: 15px;
    }

    :where(.repair-checkout-redesign) .repair-booking-total-row {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        color: #485568;
        font-size: 12px;
    }

    :where(.repair-checkout-redesign) .repair-booking-total-row strong {
        color: #111827;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-booking-total-row.is-discount strong {
        color: var(--repair-green);
    }

    :where(.repair-checkout-redesign) .repair-booking-grand {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        margin-top: 3px;
        padding-top: 12px;
        border-top: 1px solid #e4e9f0;
        color: #111827;
        font-size: 16px;
        font-weight: 600;
    }

    :where(.repair-checkout-redesign) .repair-booking-grand strong {
        font-size: 20px;
    }

    :where(.repair-checkout-redesign) .repair-booking-grand small {
        display: block;
        margin-top: 2px;
        color: #7a8494;
        font-size: 10px;
        font-weight: 400;
    }

    /* reassurance */
    :where(.repair-checkout-redesign) .repair-booking-message {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
        margin-top: 15px;
        padding: 11px;
        border-radius: 8px;
        background: #f0f6ff;
        color: #315987;
        font-size: 11px;
        line-height: 1.5;
    }

    :where(.repair-checkout-redesign) .repair-booking-message i {
        color: var(--repair-blue);
        font-size: 20px;
    }

    /* Payment logos bottom */
    :where(.repair-checkout-redesign) .repair-booking-payment-logos {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 13px;
    }

    :where(.repair-checkout-redesign) .repair-booking-payment-logos img {
        max-height: 22px;
        object-fit: contain;
    }

    /* ---------- Mobile summary accordion ---------- */
    :where(.repair-checkout-redesign) .repair-booking-mobile-toggle {
        display: none;
    }

    /* ---------- Tablet ---------- */
    @media (max-width: 1099.98px) {
        :where(.repair-checkout-redesign) .repair-checkout-layout {
            grid-template-columns: minmax(0, 1.3fr) minmax(310px, .85fr);
            gap: 20px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-shell {
            width: min(100% - 28px, 1180px);
        }
    }

    /* ---------- Tablet / small laptop ---------- */
    @media (max-width: 991.98px) {
        :where(.repair-checkout-redesign) .repair-checkout-layout {
            display: flex;
            flex-direction: column;
        }

        :where(.repair-checkout-redesign) .repair-checkout-summary-wrap {
            position: static;
            order: -1;
            width: 100%;
        }

        :where(.repair-checkout-redesign) .repair-booking-summary {
            width: 100%;
        }

        :where(.repair-checkout-redesign) .repair-booking-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
            gap: 0 22px;
        }

        :where(.repair-checkout-redesign) .repair-booking-product,
:where(.repair-checkout-redesign) .repair-booking-detail,
:where(.repair-checkout-redesign) .repair-booking-addon {
            grid-column: 1;
        }

        :where(.repair-checkout-redesign) .repair-booking-totals,
:where(.repair-checkout-redesign) .repair-booking-message,
:where(.repair-checkout-redesign) .repair-booking-payment-logos {
            grid-column: 2;
        }

        :where(.repair-checkout-redesign) .repair-booking-totals {
            grid-row: 1 / span 4;
            align-content: start;
            padding-top: 0;
        }
    }

    /* ---------- Mobile ---------- */
    @media (max-width: 767.98px) {
        .repair-checkout-redesign {
            padding: 8px 0 22px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-shell {
            width: calc(100% - 12px);
        }

        :where(.repair-checkout-redesign) .repair-checkout-progress {
            margin-bottom: 11px;
            padding: 8px 2px 0;
        }

        :where(.repair-checkout-redesign) .repair-checkout-progress::before,
:where(.repair-checkout-redesign) .repair-checkout-progress::after {
            top: 18px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-step-number {
            width: 22px;
            height: 22px;
            margin-bottom: 5px;
            font-size: 9px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-step {
            font-size: 9px;
            line-height: 1.25;
        }

        :where(.repair-checkout-redesign) .repair-checkout-heading {
            margin: 9px 5px 14px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-heading h1 {
            font-size: 26px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-heading p {
            font-size: 12px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-layout {
            gap: 14px;
        }

        /* Summary first, compact */
        :where(.repair-checkout-redesign) .repair-booking-summary-head {
            padding: 13px 13px 0;
        }

        :where(.repair-checkout-redesign) .repair-booking-summary-head h2 {
            font-size: 15px;
        }

        :where(.repair-checkout-redesign) .repair-booking-edit {
            font-size: 11px;
        }

        :where(.repair-checkout-redesign) .repair-booking-body {
            display: block;
            padding: 11px 13px 13px;
        }

        :where(.repair-checkout-redesign) .repair-booking-product {
            grid-template-columns: 60px minmax(0, 1fr);
            gap: 9px;
        }

        :where(.repair-checkout-redesign) .repair-booking-product-image {
            width: 56px;
            height: 66px;
        }

        :where(.repair-checkout-redesign) .repair-booking-product-image img {
            max-width: 54px;
            max-height: 64px;
        }

        :where(.repair-checkout-redesign) .repair-booking-product strong {
            font-size: 13px;
        }

        :where(.repair-checkout-redesign) .repair-booking-product span {
            font-size: 11px;
        }

        :where(.repair-checkout-redesign) .repair-booking-service-list {
            gap: 5px;
            margin-top: 3px;
        }

        :where(.repair-checkout-redesign) .repair-booking-service-item {
            gap: 4px;
        }

        :where(.repair-checkout-redesign) .repair-booking-service-title {
            font-size: 10px !important;
            line-height: 1.4;
        }

        :where(.repair-checkout-redesign) .repair-booking-service-variant {
            min-height: 18px;
            gap: 4px;
            padding: 1px 5px;
            font-size: 7.5px !important;
        }

        :where(.repair-checkout-redesign) .repair-booking-service-swatch {
            width: 8px;
            height: 8px;
            flex-basis: 8px;
        }

        :where(.repair-checkout-redesign) .repair-booking-service-warranty {
            min-height: 18px;
            gap: 3px;
            padding: 1px 5px;
            font-size: 7.5px !important;
        }

        :where(.repair-checkout-redesign) .repair-booking-service-warranty > i {
            font-size: 8px;
        }

        :where(.repair-checkout-redesign) .repair-booking-detail {
            padding: 10px 0;
        }

        :where(.repair-checkout-redesign) .repair-booking-detail strong {
            font-size: 12px;
        }

        :where(.repair-checkout-redesign) .repair-booking-detail span {
            font-size: 11px;
        }

        :where(.repair-checkout-redesign) .repair-booking-totals {
            padding-top: 12px;
        }

        :where(.repair-checkout-redesign) .repair-booking-total-row {
            font-size: 11px;
        }

        :where(.repair-checkout-redesign) .repair-booking-grand {
            font-size: 14px;
        }

        :where(.repair-checkout-redesign) .repair-booking-grand strong {
            font-size: 17px;
        }

        :where(.repair-checkout-redesign) .repair-booking-message,
:where(.repair-checkout-redesign) .repair-booking-payment-logos {
            display: none;
        }

        /* Form */
        :where(.repair-checkout-redesign) .repair-checkout-section {
            padding: 0 5px 19px;
            margin-bottom: 19px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-section-title {
            margin-bottom: 12px;
            font-size: 15px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-subtitle {
            font-size: 12px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-fields {
            grid-template-columns: 1fr 1fr;
            gap: 12px 9px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-field.is-full {
            grid-column: 1 / -1;
        }

        :where(.repair-checkout-redesign) .repair-checkout-label {
            margin-bottom: 5px;
            font-size: 11px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-input {
            min-height: 44px;
            padding: 9px 10px;
            font-size: 12px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-input.has-icon {
            padding-left: 34px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-input-icon {
            left: 11px;
            font-size: 13px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-help,
:where(.repair-checkout-redesign) .invalid-feedback {
            font-size: 10px;
        }

        :where(.repair-checkout-redesign) .repair-address-help {
            padding: 10px;
            font-size: 10px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-check-row label {
            font-size: 11px;
        }

        :where(.repair-checkout-redesign) .repair-shipping-card {
            grid-template-columns: 38px minmax(0, 1fr) auto;
            padding: 10px;
        }

        :where(.repair-checkout-redesign) .repair-shipping-icon {
            width: 36px;
            height: 36px;
        }

        :where(.repair-checkout-redesign) .repair-shipping-copy strong,
:where(.repair-checkout-redesign) .repair-shipping-price {
            font-size: 12px;
        }

        :where(.repair-checkout-redesign) .repair-shipping-copy span {
            font-size: 10px;
        }

        :where(.repair-checkout-redesign) .repair-payment-option {
            min-height: 54px;
            padding: 9px 10px;
        }

        :where(.repair-checkout-redesign) .repair-payment-copy strong {
            font-size: 12px;
        }

        :where(.repair-checkout-redesign) .repair-payment-copy span {
            font-size: 10px;
        }

        :where(.repair-checkout-redesign) .repair-payment-logo {
            min-width: 55px;
        }

        :where(.repair-checkout-redesign) .repair-payment-logo img {
            max-width: 62px;
            max-height: 22px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-consents {
            margin: 14px 5px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-submit {
            min-height: 49px;
            padding-left: 13px;
            padding-right: 13px;
            font-size: 14px;
            justify-content: flex-start;
        }

        :where(.repair-checkout-redesign) .repair-checkout-submit>i {
            margin-left: 3px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-submit-total {
            display: inline-flex;
            margin-left: auto;
            font-size: 14px;
        }

        :where(.repair-checkout-redesign) .repair-checkout-secure {
            font-size: 10px;
        }
    }

    /* ---------- Small mobile ---------- */
    @media (max-width: 419.98px) {
        :where(.repair-checkout-redesign) .repair-checkout-fields {
            grid-template-columns: 1fr;
        }

        :where(.repair-checkout-redesign) .repair-checkout-field,
:where(.repair-checkout-redesign) .repair-checkout-field.is-full {
            grid-column: 1;
        }

        :where(.repair-checkout-redesign) .repair-checkout-step {
            font-size: 8px;
        }

        :where(.repair-checkout-redesign) .repair-payment-option {
            grid-template-columns: 20px minmax(0, 1fr) auto;
            gap: 8px;
        }

        :where(.repair-checkout-redesign) .repair-payment-logo {
            min-width: 42px;
        }
    }

/* ==========================================================================
   ORDER COMPLETE
   Source: order-complete-repair-final.php
   Scoped so no other repair page, shared header or footer is affected.
   ========================================================================== */
.repair-order-complete-redesign,
.repair-order-complete-redesign * {
    box-sizing: border-box;
}

.repair-order-complete-redesign {
    --repair-complete-blue: #0868f7;
    --repair-complete-blue-soft: #eef5ff;
    --repair-complete-green: #168b4d;
    --repair-complete-green-soft: #f1fbf5;
    --repair-complete-red: #c63c32;
    --repair-complete-red-soft: #fff5f4;
    --repair-complete-amber: #ad6b00;
    --repair-complete-amber-soft: #fff9eb;
    --repair-complete-ink: #111827;
    --repair-complete-muted: #687386;
    --repair-complete-border: #dfe6ef;
    --repair-complete-bg: #f7f9fc;

    background: var(--repair-complete-bg);
    color: var(--repair-complete-ink);
    font-family: "Poppins", sans-serif;
    padding: 24px 0 38px;
}

:where(.repair-order-complete-redesign) .repair-order-complete-shell {
    width: min(100% - 28px, 1040px);
    margin: 0 auto;
}

:where(.repair-order-complete-redesign) .repair-complete-card,
:where(.repair-order-complete-redesign) .repair-complete-status-card {
    border: 1px solid var(--repair-complete-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(30, 55, 90, .055);
}

/* ---------- Status ---------- */
:where(.repair-order-complete-redesign) .repair-complete-status-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 20px 22px;
}

:where(.repair-order-complete-redesign) .repair-complete-status-card.is-success {
    border-color: #c4e6d0;
    background: linear-gradient(110deg, #f2fbf5 0%, #ffffff 72%);
}

:where(.repair-order-complete-redesign) .repair-complete-status-card.is-payment {
    border-color: #cddffc;
    background: linear-gradient(110deg, #f3f8ff 0%, #ffffff 72%);
}

:where(.repair-order-complete-redesign) .repair-complete-status-card.is-error {
    border-color: #f0c9c5;
    background: linear-gradient(110deg, #fff5f4 0%, #ffffff 72%);
}

:where(.repair-order-complete-redesign) .repair-complete-status-card.is-pending {
    border-color: #efdcae;
    background: linear-gradient(110deg, #fff9eb 0%, #ffffff 72%);
}

:where(.repair-order-complete-redesign) .repair-complete-status-card.is-refunded {
    border-color: #d9e2ef;
    background: linear-gradient(110deg, #f5f8fc 0%, #ffffff 72%);
}

:where(.repair-order-complete-redesign) .repair-complete-status-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef2f7;
    color: #526176;
    font-size: 23px;
}

:where(.repair-order-complete-redesign) .is-success .repair-complete-status-icon {
    background: #ddf4e5;
    color: var(--repair-complete-green);
}

:where(.repair-order-complete-redesign) .is-payment .repair-complete-status-icon {
    background: #dceaff;
    color: var(--repair-complete-blue);
}

:where(.repair-order-complete-redesign) .is-error .repair-complete-status-icon {
    background: #fde6e3;
    color: var(--repair-complete-red);
}

:where(.repair-order-complete-redesign) .is-pending .repair-complete-status-icon {
    background: #fff0c7;
    color: var(--repair-complete-amber);
}

:where(.repair-order-complete-redesign) .is-refunded .repair-complete-status-icon {
    background: #e9eef5;
    color: #526176;
}

:where(.repair-order-complete-redesign) .repair-complete-status-copy {
    min-width: 0;
}

:where(.repair-order-complete-redesign) .repair-complete-status-eyebrow,
:where(.repair-order-complete-redesign) .repair-complete-card-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--repair-complete-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

:where(.repair-order-complete-redesign) .repair-complete-status-copy h1 {
    margin: 0 0 5px;
    color: var(--repair-complete-ink);
    font-size: 25px;
    font-weight: 650;
    line-height: 1.25;
}

:where(.repair-order-complete-redesign) .repair-complete-status-copy p {
    max-width: 650px;
    margin: 0;
    color: #596579;
    font-size: 14px;
    line-height: 1.55;
}

:where(.repair-order-complete-redesign) .repair-complete-status-preline {
    white-space: pre-line;
}

:where(.repair-order-complete-redesign) .repair-complete-reference-pill {
    min-width: 150px;
    padding: 9px 13px;
    border: 1px solid rgba(8, 104, 247, .14);
    border-radius: 9px;
    background: rgba(255, 255, 255, .82);
    text-align: right;
}

:where(.repair-order-complete-redesign) .repair-complete-reference-pill span {
    display: block;
    margin-bottom: 1px;
    color: #707b8c;
    font-size: 10.5px;
}

:where(.repair-order-complete-redesign) .repair-complete-reference-pill strong {
    color: #111827;
    font-size: 16px;
    font-weight: 650;
}

:where(.repair-order-complete-redesign) .repair-complete-status-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    padding: 0 13px;
    border: 1px solid var(--repair-complete-blue);
    border-radius: 7px;
    background: #fff;
    color: var(--repair-complete-blue) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Main layout ---------- */
:where(.repair-order-complete-redesign) .repair-complete-layout {
    display: grid;
    gap: 18px;
    align-items: start;
}

:where(.repair-order-complete-redesign) .repair-complete-layout.has-payment {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
}

:where(.repair-order-complete-redesign) .repair-complete-layout.is-complete {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
}

/* ---------- Repair summary ---------- */
:where(.repair-order-complete-redesign) .repair-complete-summary {
    overflow: hidden;
}

:where(.repair-order-complete-redesign) .repair-complete-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf1f5;
}

:where(.repair-order-complete-redesign) .repair-complete-summary__title {
    margin: 0;
    color: var(--repair-complete-ink);
    font-size: 20px;
    font-weight: 650;
    line-height: 1.3;
}

:where(.repair-order-complete-redesign) .repair-complete-summary__reference {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f2f6fb;
    color: #596579;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

:where(.repair-order-complete-redesign) .repair-complete-device {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    padding: 17px 20px;
    border-bottom: 1px solid #edf1f5;
    background: #fbfdff;
}

:where(.repair-order-complete-redesign) .repair-complete-device__image {
    display: flex;
    width: 70px;
    height: 78px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e1e7ef;
    border-radius: 9px;
    background: #fff;
    color: #8aa0bc;
    font-size: 29px;
}

:where(.repair-order-complete-redesign) .repair-complete-device__image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 76px;
    object-fit: contain;
}

:where(.repair-order-complete-redesign) .repair-complete-device__copy {
    min-width: 0;
}

:where(.repair-order-complete-redesign) .repair-complete-device__label {
    display: block;
    margin-bottom: 3px;
    color: var(--repair-complete-muted);
    font-size: 11px;
    font-weight: 500;
}

:where(.repair-order-complete-redesign) .repair-complete-device__title {
    display: block;
    color: var(--repair-complete-ink);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.4;
}

:where(.repair-order-complete-redesign) .repair-complete-service {
    padding: 17px 20px;
}

:where(.repair-order-complete-redesign) .repair-complete-service + .repair-complete-service {
    border-top: 1px solid #edf1f5;
}

:where(.repair-order-complete-redesign) .repair-complete-service__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

:where(.repair-order-complete-redesign) .repair-complete-service__name {
    color: var(--repair-complete-ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

:where(.repair-order-complete-redesign) .repair-complete-service__price {
    flex: 0 0 auto;
    color: var(--repair-complete-ink);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

:where(.repair-order-complete-redesign) .repair-complete-service__meta,
:where(.repair-order-complete-redesign) .repair-complete-service__warranty {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
}

:where(.repair-order-complete-redesign) .repair-complete-service__meta {
    color: #667085;
}

:where(.repair-order-complete-redesign) .repair-complete-service__warranty {
    color: #315b40;
    font-weight: 500;
}

:where(.repair-order-complete-redesign) .repair-complete-service__meta i {
    color: var(--repair-complete-blue);
}

:where(.repair-order-complete-redesign) .repair-complete-service__warranty i {
    color: var(--repair-complete-green);
}

:where(.repair-order-complete-redesign) .repair-complete-payment-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 20px;
    border-top: 1px solid #edf1f5;
    background: #fafcff;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-status > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 12px;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-status > strong {
    color: #344054;
    font-size: 12px;
    font-weight: 650;
    text-align: right;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-success > strong,
:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-success i {
    color: var(--repair-complete-green);
}

:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-payment > strong,
:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-payment i {
    color: var(--repair-complete-blue);
}

:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-error > strong,
:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-error i {
    color: var(--repair-complete-red);
}

:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-pending > strong,
:where(.repair-order-complete-redesign) .repair-complete-payment-status.is-pending i {
    color: var(--repair-complete-amber);
}

/* ---------- Payment card ---------- */
:where(.repair-order-complete-redesign) .repair-complete-payment-card {
    overflow: hidden;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #edf1f5;
    background: #fbfdff;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--repair-complete-blue-soft);
    color: var(--repair-complete-blue);
    font-size: 18px;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-head h2 {
    margin: 0 0 3px;
    color: var(--repair-complete-ink);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-head p {
    margin: 0;
    color: #667085;
    font-size: 11.5px;
    line-height: 1.5;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-provider {
    padding: 16px 18px 13px;
}

/*
 * Flatten only the payment module inside this page's new card. The provider
 * PHP files and their form fields/buttons remain untouched.
 */
:where(.repair-order-complete-redesign) .repair-complete-payment-box.payment_box {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-box > * {
    max-width: 100% !important;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-box .card,
:where(.repair-order-complete-redesign) .repair-complete-payment-box form {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-box .card {
    border-color: #dfe6ef !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-box .btn,
:where(.repair-order-complete-redesign) .repair-complete-payment-box button,
:where(.repair-order-complete-redesign) .repair-complete-payment-box input[type="submit"] {
    max-width: 100%;
}

:where(.repair-order-complete-redesign) .repair-complete-klarna-logo {
    display: block;
    width: auto;
    max-width: 92px !important;
    max-height: 34px;
    margin: 0 0 12px;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-empty {
    padding: 20px 10px;
    color: #667085;
    font-size: 13px;
    text-align: center;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 15px 14px;
    border-top: 1px solid #edf1f5;
    color: #667085;
    font-size: 10.5px;
    text-align: center;
}

:where(.repair-order-complete-redesign) .repair-complete-payment-trust i {
    color: var(--repair-complete-green);
    font-size: 13px;
}

/* ---------- Footer action ---------- */
:where(.repair-order-complete-redesign) .repair-complete-footer-action {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

:where(.repair-order-complete-redesign) .repair-complete-back-link {
    display: inline-flex;
    min-width: 185px;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--repair-complete-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--repair-complete-blue) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

:where(.repair-order-complete-redesign) .repair-complete-back-link:hover {
    background: var(--repair-complete-blue);
    color: #fff !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 899.98px) {
    :where(.repair-order-complete-redesign) .repair-complete-layout.has-payment {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .repair-order-complete-redesign {
        padding: 10px 0 24px;
    }

    :where(.repair-order-complete-redesign) .repair-order-complete-shell {
        width: calc(100% - 12px);
    }

    :where(.repair-order-complete-redesign) .repair-complete-status-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 9px;
        padding: 13px 12px;
        border-radius: 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-status-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-status-eyebrow,
    :where(.repair-order-complete-redesign) .repair-complete-card-kicker {
        font-size: 9.5px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-status-copy h1 {
        margin-bottom: 3px;
        font-size: 18px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-status-copy p {
        font-size: 11px;
        line-height: 1.5;
    }

    :where(.repair-order-complete-redesign) .repair-complete-reference-pill {
        grid-column: 1 / -1;
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 9px;
        text-align: left;
    }

    :where(.repair-order-complete-redesign) .repair-complete-reference-pill span {
        margin: 0;
        font-size: 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-reference-pill strong {
        font-size: 13px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-layout {
        gap: 9px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-layout.has-payment .repair-complete-payment-card {
        order: 1;
    }

    :where(.repair-order-complete-redesign) .repair-complete-layout.has-payment .repair-complete-summary {
        order: 2;
    }

    :where(.repair-order-complete-redesign) .repair-complete-card {
        border-radius: 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-summary__header {
        padding: 12px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-summary__title {
        font-size: 16px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-summary__reference {
        min-height: 25px;
        padding: 2px 7px;
        font-size: 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-device {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-device__image {
        width: 54px;
        height: 61px;
        border-radius: 7px;
        font-size: 22px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-device__image img {
        max-height: 59px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-device__label {
        font-size: 9.5px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-device__title {
        font-size: 13px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-service {
        padding: 12px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-service__name,
    :where(.repair-order-complete-redesign) .repair-complete-service__price {
        font-size: 12px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-service__meta,
    :where(.repair-order-complete-redesign) .repair-complete-service__warranty {
        gap: 5px;
        margin-top: 6px;
        font-size: 10.5px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-status {
        padding: 10px 12px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-status > span,
    :where(.repair-order-complete-redesign) .repair-complete-payment-status > strong {
        font-size: 10.5px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-head {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 9px;
        padding: 12px 11px 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-icon {
        width: 33px;
        height: 33px;
        border-radius: 8px;
        font-size: 15px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-head h2 {
        font-size: 14px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-head p {
        font-size: 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-provider {
        padding: 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-payment-trust {
        padding: 9px 10px 11px;
        font-size: 9.5px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-footer-action {
        margin-top: 11px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-back-link {
        width: 100%;
        min-height: 40px;
        font-size: 11px;
    }
}

@media (max-width: 399.98px) {
    :where(.repair-order-complete-redesign) .repair-complete-service__top {
        gap: 10px;
    }

    :where(.repair-order-complete-redesign) .repair-complete-summary__header {
        align-items: flex-start;
    }
}

/* ==========================================================================
   SELECT STORE - TYPOGRAPHY LEGIBILITY PASS
   Keeps Checkout and all other repair pages unchanged.
   ========================================================================== */
:where(.repair-store-redesign) .repair-store-page-title {
    font-size: 20px;
}

:where(.repair-store-redesign) .repair-store-wordmark {
    font-size: 20px;
}

:where(.repair-store-redesign) .repair-store-step {
    font-size: 12px;
}

:where(.repair-store-redesign) .repair-store-device-copy strong {
    font-size: 16px;
}

:where(.repair-store-redesign) .repair-store-device-copy > span,
:where(.repair-store-redesign) .repair-store-service-count {
    font-size: 13px;
}

:where(.repair-store-redesign) .repair-store-service-chip {
    font-size: 12px;
}

:where(.repair-store-redesign) .repair-store-device-meta span {
    font-size: 12px;
}

:where(.repair-store-redesign) .repair-store-change {
    font-size: 13px;
}

:where(.repair-store-redesign) .repair-store-question,
:where(.repair-store-redesign) .repair-store-content-title {
    font-size: 16px;
}

:where(.repair-store-redesign) .repair-method-copy strong {
    font-size: 14px;
}

:where(.repair-store-redesign) .repair-method-copy span {
    font-size: 14px;
}

:where(.repair-store-redesign) .repair-store-search,
:where(.repair-store-redesign) .repair-store-search-btn {
    font-size: 13px;
}

:where(.repair-store-redesign) .repair-store-option-copy strong {
    font-size: 14px;
}

:where(.repair-store-redesign) .repair-store-address {
    font-size: 12.5px;
}

:where(.repair-store-redesign) .repair-store-availability,
:where(.repair-store-redesign) .repair-store-next,
:where(.repair-store-redesign) .repair-store-distance {
    font-size: 12px;
    line-height: 1.5;
}

:where(.repair-store-redesign) .repair-store-benefits-title,
:where(.repair-store-redesign) .repair-selected-label,
:where(.repair-store-redesign) .repair-store-benefit {
    font-size: 12.5px;
}

:where(.repair-store-redesign) .repair-selected-store-name {
    font-size: 15px;
}

:where(.repair-store-redesign) .repair-selected-store-address,
:where(.repair-store-redesign) .repair-payment-copy,
:where(.repair-store-redesign) .repair-payment-switch {
    font-size: 14px;
}

:where(.repair-store-redesign) .repair-store-continue {
    font-size: 13px;
}

:where(.repair-store-redesign) .repair-mail-intro {
    font-size: 13px;
}

:where(.repair-store-redesign) .repair-mail-step p {
    font-size: 12.5px;
}

@media (max-width: 767.98px) {
    :where(.repair-store-redesign) .repair-store-page-title {
        font-size: 16px;
    }

    :where(.repair-store-redesign) .repair-store-wordmark {
        font-size: 16px;
    }

    :where(.repair-store-redesign) .repair-store-step {
        font-size: 10.5px;
    }

    :where(.repair-store-redesign) .repair-store-device-copy strong {
        font-size: 14px;
    }

    :where(.repair-store-redesign) .repair-store-device-copy > span,
    :where(.repair-store-redesign) .repair-store-service-count {
        font-size: 12px;
    }

    :where(.repair-store-redesign) .repair-store-service-mobile-title,
    :where(.repair-store-redesign) .repair-store-service-mobile-variant,
    :where(.repair-store-redesign) .repair-store-service-more,
    :where(.repair-store-redesign) .repair-store-device-meta span {
        font-size: 11.5px;
    }

    :where(.repair-store-redesign) .repair-store-change {
        font-size: 12px;
    }

    :where(.repair-store-redesign) .repair-store-question,
    :where(.repair-store-redesign) .repair-store-content-title {
        font-size: 14px;
    }

    :where(.repair-store-redesign) .repair-method-copy strong {
        font-size: 13px;
    }

    :where(.repair-store-redesign) .repair-method-copy span {
        font-size: 14px;
    }

    :where(.repair-store-redesign) .repair-store-search,
    :where(.repair-store-redesign) .repair-store-search-btn {
        font-size: 14px;
    }

    :where(.repair-store-redesign) .repair-store-option-copy strong {
        font-size: 13px;
    }

    :where(.repair-store-redesign) .repair-store-address,
    :where(.repair-store-redesign) .repair-store-availability,
    :where(.repair-store-redesign) .repair-store-next,
    :where(.repair-store-redesign) .repair-store-distance {
        font-size: 12px;
    }

    :where(.repair-store-redesign) .repair-map-mobile-toggle,
    :where(.repair-store-redesign) .repair-selected-label {
        font-size: 12px;
    }

    :where(.repair-store-redesign) .repair-selected-store-name {
        font-size: 14px;
    }

    :where(.repair-store-redesign) .repair-selected-store-address,
    :where(.repair-store-redesign) .repair-payment-copy,
    :where(.repair-store-redesign) .repair-payment-switch {
        font-size: 14px;
    }

    :where(.repair-store-redesign) .repair-store-continue {
        font-size: 12px;
    }

    :where(.repair-store-redesign) .repair-mail-intro,
    :where(.repair-store-redesign) .repair-mail-step strong {
        font-size: 12px;
    }

    :where(.repair-store-redesign) .repair-mail-step p {
        font-size: 12px;
    }
}

/* ==========================================================================\n   TYPOGRAPHY READABILITY FIX - SELECT DATE + CONFIRM\n   Keeps checkout/store and other repair pages unchanged.\n   ========================================================================== */

/* ---------- Select Date: desktop / tablet readability ---------- */
:where(.repair-date-redesign) .repair-date-repair-variant {
    font-size: 14px;
}

:where(.repair-date-redesign) .repair-date-summary-sub,
:where(.repair-date-redesign) .repair-date-summary-link,
:where(.repair-date-redesign) .repair-date-payment-pill,
:where(.repair-date-redesign) .repair-date-local-note,
:where(.repair-date-redesign) .repair-date-selected-label,
:where(.repair-date-redesign) .repair-date-selected-store span,
:where(.repair-date-redesign) .repair-date-selected-meta span,
:where(.repair-date-redesign) .repair-date-ready > div > span,
:where(.repair-date-redesign) .repair-date-action-summary,
:where(.repair-date-redesign) .repair-date-help-copy span,
:where(.repair-date-redesign) .repair-date-help-btn {
    font-size: 14px;
}

:where(.repair-date-redesign) .repair-date-day-today,
:where(.repair-date-redesign) .repair-date-time-note span,
:where(.repair-date-redesign) .repair-date-action-trust {
    font-size: 14px;
}

:where(.repair-date-redesign) .repair-date-time-note strong {
    font-size: 14px;
}

/* ---------- Confirm: desktop / tablet readability ---------- */
:where(.repair-confirm-redesign) .repair-confirm-step {
    font-size: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-intro p,
:where(.repair-confirm-redesign) .repair-confirm-service-text,
:where(.repair-confirm-redesign) .repair-confirm-service-title,
:where(.repair-confirm-redesign) .repair-confirm-payment-line,
:where(.repair-confirm-redesign) .repair-confirm-addon strong {
    font-size: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-edit,
:where(.repair-confirm-redesign) .repair-confirm-meta-value,
:where(.repair-confirm-redesign) .repair-confirm-info-copy span,
:where(.repair-confirm-redesign) .repair-confirm-next-list li {
    font-size: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-service-variant,
:where(.repair-confirm-redesign) .repair-confirm-service-warranty,
:where(.repair-confirm-redesign) .repair-confirm-service-count,
:where(.repair-confirm-redesign) .repair-confirm-meta-label,
:where(.repair-confirm-redesign) .repair-confirm-vat {
    font-size: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-service-warranty i {
    font-size: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-info-copy strong {
    font-size: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-addon span,
:where(.repair-confirm-redesign) .repair-confirm-trust {
    font-size: 14px;
}

/* ---------- Mobile readability ---------- */
@media (max-width: 767.98px) {
    :where(.repair-date-redesign) .repair-date-step {
        font-size: 12px;
    }

    :where(.repair-date-redesign) .repair-date-summary-label {
        font-size: 12px;
    }

    :where(.repair-date-redesign) .repair-date-repair-title {
        font-size: 14px;
    }

    :where(.repair-date-redesign) .repair-date-repair-variant,
    :where(.repair-date-redesign) .repair-date-summary-sub,
    :where(.repair-date-redesign) .repair-date-summary-link,
    :where(.repair-date-redesign) .repair-date-payment-pill,
    :where(.repair-date-redesign) .repair-date-day-name,
    :where(.repair-date-redesign) .repair-date-day-month,
    :where(.repair-date-redesign) .repair-date-day-today,
    :where(.repair-date-redesign) .repair-date-action-trust {
        font-size: 12px;
    }

    :where(.repair-date-redesign) .repair-date-local-note,
    :where(.repair-date-redesign) .repair-date-selected-label,
    :where(.repair-date-redesign) .repair-date-selected-store span,
    :where(.repair-date-redesign) .repair-date-selected-meta span,
    :where(.repair-date-redesign) .repair-date-ready > div > span,
    :where(.repair-date-redesign) .repair-date-action-summary,
    :where(.repair-date-redesign) .repair-date-help-copy span,
    :where(.repair-date-redesign) .repair-date-help-btn {
        font-size: 12px;
    }

    :where(.repair-date-redesign) .repair-date-time-slot {
        font-size: 12px;
    }

    :where(.repair-date-redesign) .repair-date-selected-value,
    :where(.repair-date-redesign) .repair-date-selected-store strong,
    :where(.repair-date-redesign) .repair-date-ready strong,
    :where(.repair-date-redesign) .repair-date-review-btn,
    :where(.repair-date-redesign) .repair-date-help-copy strong {
        font-size: 12.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-step {
        font-size: 12px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-intro p,
    :where(.repair-confirm-redesign) .repair-confirm-service-text,
    :where(.repair-confirm-redesign) .repair-confirm-service-title,
    :where(.repair-confirm-redesign) .repair-confirm-info-copy span,
    :where(.repair-confirm-redesign) .repair-confirm-payment-line,
    :where(.repair-confirm-redesign) .repair-confirm-next-list li {
        font-size: 11.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-section-title {
        font-size: 13px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-edit,
    :where(.repair-confirm-redesign) .repair-confirm-service-variant,
    :where(.repair-confirm-redesign) .repair-confirm-service-warranty,
    :where(.repair-confirm-redesign) .repair-confirm-service-count,
    :where(.repair-confirm-redesign) .repair-confirm-meta-label {
        font-size: 11px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-variant,
    :where(.repair-confirm-redesign) .repair-confirm-service-warranty {
        min-height: 19px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-meta-value {
        font-size: 11.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-device-title,
    :where(.repair-confirm-redesign) .repair-confirm-submit {
        font-size: 12.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-info-copy strong {
        font-size: 12px;
    }
}


/* ========================================================================== 
   REPAIR SELECT SERVICE - SELECTION STATE / CLICK TARGET UPDATE
   - Selected repair types stay blue even when another panel is being viewed.
   - The active-but-unselected repair type uses a light focus state.
   - The complete repair option row is a click target.
   - A responsive selection status appears before Continue.
   ========================================================================== */
:where(.repair-service-redesign) .repair-type-card.is-active:not(.has-selection) {
    border-color: #86b6ff;
    background: #f5f9ff;
    box-shadow: 0 0 0 1px rgba(8, 104, 247, .08);
    color: var(--repair-blue);
}

:where(.repair-service-redesign) .repair-type-card.has-selection,
:where(.repair-service-redesign) .repair-type-card.has-selection:not(.is-active),
:where(.repair-service-redesign) .repair-type-card.has-selection.is-active {
    border-color: var(--repair-blue);
    background: linear-gradient(180deg, #1172ff 0%, #0065f6 100%);
    box-shadow: 0 8px 18px rgba(8, 104, 247, .16);
    color: #fff;
}

:where(.repair-service-redesign) .repair-type-card.has-selection .repair-type-selected-mark,
:where(.repair-service-redesign) .repair-type-card.has-selection:not(.is-active) .repair-type-selected-mark,
:where(.repair-service-redesign) .repair-type-card.has-selection.is-active .repair-type-selected-mark {
    display: flex;
    border: 1px solid rgba(255, 255, 255, .78);
    background: #fff;
    color: var(--repair-blue);
}

:where(.repair-service-redesign) .repair-type-card.has-selection .repair-type-photo {
    filter: brightness(0) invert(1);
}

:where(.repair-service-redesign) .repair-type-card.is-active:not(.has-selection) .repair-type-photo {
    filter: none;
}

:where(.repair-service-redesign) .repair-choice-row {
    cursor: pointer;
}

:where(.repair-service-redesign) .repair-choice-row:hover {
    border-color: #9dc3fb;
    box-shadow: 0 4px 14px rgba(8, 104, 247, .055);
}

:where(.repair-service-redesign) .repair-choice-row.is-selected:hover {
    border-color: var(--repair-blue);
    box-shadow: 0 0 0 1px var(--repair-blue), 0 5px 15px rgba(8, 104, 247, .075);
}

:where(.repair-service-redesign) .repair-choice-row select,
:where(.repair-service-redesign) .repair-choice-row button,
:where(.repair-service-redesign) .repair-choice-row a,
:where(.repair-service-redesign) .repair-choice-row input,
:where(.repair-service-redesign) .repair-choice-row label {
    cursor: auto;
}

:where(.repair-service-redesign) .repair-choice-row button,
:where(.repair-service-redesign) .repair-choice-row a,
:where(.repair-service-redesign) .repair-choice-row label {
    cursor: pointer;
}

:where(.repair-service-redesign) .repair-selection-status {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    max-width: 900px;
    margin: 17px auto 0;
    padding: 13px 15px;
    border: 1px solid #bcd8ff;
    border-radius: 9px;
    background: #f4f8ff;
    color: #31445f;
}

:where(.repair-service-redesign) .repair-selection-status[hidden] {
    display: none !important;
}

:where(.repair-service-redesign) .repair-selection-status.is-ready {
    border-color: #b9e4c9;
    background: #f2fbf5;
    color: #315b40;
}

:where(.repair-service-redesign) .repair-selection-status.is-warning {
    border-color: #f3d49c;
    background: #fffaf0;
    color: #684c1f;
}

:where(.repair-service-redesign) .repair-selection-status-icon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5f0ff;
    color: var(--repair-blue);
    font-size: 18px;
}

:where(.repair-service-redesign) .repair-selection-status.is-ready .repair-selection-status-icon {
    background: #ddf4e5;
    color: #16864b;
}

:where(.repair-service-redesign) .repair-selection-status.is-warning .repair-selection-status-icon {
    background: #fff0cf;
    color: #b7791f;
}

:where(.repair-service-redesign) .repair-selection-status-copy strong {
    display: block;
    margin-bottom: 2px;
    color: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

:where(.repair-service-redesign) .repair-selection-status-copy span {
    display: block;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    :where(.repair-service-redesign) .repair-selection-status {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
        margin: 10px 0 8px;
        padding: 10px 11px;
        border-radius: 8px;
    }

    :where(.repair-service-redesign) .repair-selection-status-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    :where(.repair-service-redesign) .repair-selection-status-copy strong {
        font-size: 12px;
    }

    :where(.repair-service-redesign) .repair-selection-status-copy span {
        font-size: 11px;
        line-height: 1.45;
    }
}

/* ========================================================================== 
   SELECT STORE - STORE SELECTION CONFIRMATION
   Reuses the same success language as Select Device / Select Service.
   ========================================================================== */
.repair-store-redesign .repair-store-selection-status {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    /* max-width: 900px; */
    margin: 14px auto 0;
    padding: 13px 15px;
    border: 1px solid #b9e4c9;
    border-radius: 9px;
    background: #f2fbf5;
    color: #315b40;
}

.repair-store-redesign .repair-store-selection-status-icon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ddf4e5;
    color: #16864b;
    font-size: 18px;
}

.repair-store-redesign .repair-store-selection-status-copy strong {
    display: block;
    margin-bottom: 2px;
    color: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

.repair-store-redesign .repair-store-selection-status-copy span {
    display: block;
    color: #41664d;
    font-size: 12px;
    line-height: 1.5;
}

/* ========================================================================== 
   SELECT DATE - APPOINTMENT CONFIRMATION STATE
   Keep the existing bottom action block neutral until a time is selected,
   then promote it to the same green success treatment used earlier in flow.
   ========================================================================== */
.repair-date-redesign .repair-date-action-card {
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.repair-date-redesign .repair-date-action-card.is-ready {
    border-color: #b9e4c9;
    background: #f2fbf5;
    box-shadow: 0 8px 24px rgba(22, 134, 75, .055);
}

.repair-date-redesign .repair-date-action-card.is-ready .repair-date-ready-calendar {
    background: #ddf4e5;
    color: #16864b;
}

.repair-date-redesign .repair-date-action-card.is-ready .repair-date-ready strong {
    color: #1f5130;
}

.repair-date-redesign .repair-date-action-card.is-ready .repair-date-ready > div > span {
    color: #41664d;
}

.repair-date-redesign .repair-date-action-card.is-ready .repair-date-action-summary {
    color: #315b40;
}

@media (max-width: 767.98px) {
    .repair-store-redesign .repair-store-selection-status {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
        margin: 8px 0 0;
        padding: 10px 11px;
        border-radius: 8px;
    }

    .repair-store-redesign .repair-store-selection-status-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .repair-store-redesign .repair-store-selection-status-copy strong {
        font-size: 12px;
    }

    .repair-store-redesign .repair-store-selection-status-copy span {
        font-size: 11px;
        line-height: 1.45;
    }

    .repair-date-redesign .repair-date-action-card.is-ready {
        padding: 12px 11px;
    }
}
/* ==========================================================
   REPAIR LANDING - POPULAR BRAND SHORTCUT REFINEMENT
   Keeps brand shortcuts visually aligned with device-type cards.
   ========================================================== */
@media (max-width: 479.98px) {
    .repair-redesign .repair-shortcut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .repair-redesign .repair-shortcut-card {
        min-height: 120px;
        padding: 8px;
    }

    .repair-redesign .repair-shortcut-icon {
        height: 76px;
        padding: 5px 7px;
    }

    .repair-redesign .repair-shortcut-icon img {
        max-width: min(100%, 102px);
        max-height: 49px;
    }

    .repair-redesign .repair-shortcut-title {
        font-size: 11.5px;
    }
}

/* ==========================================================
   REPAIR LANDING - HERO SEARCH / MOBILE TRUST REFINEMENT
   - Replaces the old hero CTA button with a simple text prompt.
   - Keeps live search as the primary interaction.
   - Hides decorative hero artwork on phones.
   - Presents trust benefits as a compact 2 x 2 mobile grid.
   ========================================================== */
.repair-redesign .repair-hero-search-actions {
    grid-template-columns: auto minmax(280px, 365px);
    gap: 14px;
    max-width: 570px;
}

.repair-redesign .repair-find-device-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #10213e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.repair-redesign .repair-find-device-label i {
    color: #076bff;
    font-size: 18px;
}

.repair-redesign .repair-hero-search-actions .repair-search-control {
    width: 100%;
}

@media (max-width: 991.98px) {
    .repair-redesign .repair-hero-search-actions {
        grid-template-columns: auto minmax(250px, 1fr);
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    /*
     * On phones the artwork is decorative rather than functional.
     * Removing it gets customers to the actual device choices sooner.
     */
    .repair-redesign .repair-hero-media {
        display: none !important;
    }

    /* Undo the earlier mobile display:contents artwork composition. */
    .repair-redesign .repair-hero-content {
        display: block !important;
    }

    .repair-redesign .repair-hero {
        display: block;
        min-height: 0;
        padding: 15px 12px 13px;
    }

    .repair-redesign .repair-hero::before {
        display: none !important;
    }

    .repair-redesign .repair-hero-search-actions {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 6px;
        width: 100%;
        max-width: none;
    }

    .repair-redesign .repair-find-device-label {
        min-height: 0;
        gap: 6px;
        margin: 1px 0 2px;
        font-size: 13px;
    }

    .repair-redesign .repair-find-device-label i {
        font-size: 15px;
    }

    .repair-redesign .repair-hero-search-actions .repair-search-control {
        min-height: 42px;
        padding: 0 11px;
        border-radius: 8px;
    }

    .repair-redesign .repair-hero-search-actions .repair-search-control input {
        font-size: 12.5px;
    }

    /*
     * Trust proof becomes the visual footer of the mobile hero.
     * Light cards add structure without competing with the device cards below.
     */
    .repair-redesign .repair-trust-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100%;
        margin-top: 12px !important;
        padding-top: 11px !important;
        border-top: 1px solid #edf2f8;
    }

    .repair-redesign .repair-trust-item {
        display: flex;
        min-width: 0;
        min-height: 48px;
        align-items: center;
        gap: 7px;
        padding: 8px 9px;
        border: 1px solid #e3eaf3;
        border-radius: 8px;
        background: #f9fbfe;
        color: #17233b;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.25;
    }

    .repair-redesign .repair-trust-item > i {
        flex: 0 0 auto;
        font-size: 16px;
    }

    .repair-redesign .repair-trust-item > span {
        min-width: 0;
    }

    .repair-redesign .repair-trust-item span span {
        display: block;
        margin-top: 2px;
        color: #6d788a;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.2;
    }
}

@media (max-width: 359.98px) {
    .repair-redesign .repair-trust-row {
        gap: 6px !important;
    }

    .repair-redesign .repair-trust-item {
        min-height: 46px;
        gap: 5px;
        padding: 7px;
        font-size: 10.5px;
    }

    .repair-redesign .repair-trust-item > i {
        font-size: 14px;
    }

    .repair-redesign .repair-trust-item span span {
        font-size: 9.5px;
    }
}

/* ========================================================================== 
   SELECT SERVICE - MULTI-REPAIR MANAGEMENT / MOBILE NAVIGATION
   - Selected repairs are listed inside the existing success/warning alert.
   - Each selected repair has an explicit Remove control.
   - Mobile service types have visible previous/next arrow controls.
   - Mobile Continue stays sticky inside the repair selector and shows total.
   ========================================================================== */
:where(.repair-service-redesign) .repair-type-browser {
    position: relative;
}

:where(.repair-service-redesign) .repair-type-scroll-btn {
    display: none;
}

:where(.repair-service-redesign) .repair-selection-list {
    display: grid;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(49, 91, 64, .14);
}

:where(.repair-service-redesign) .repair-selection-status.is-warning .repair-selection-list {
    border-top-color: rgba(104, 76, 31, .16);
}

:where(.repair-service-redesign) .repair-selection-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 8px 9px 8px 10px;
    border: 1px solid rgba(22, 134, 75, .14);
    border-radius: 7px;
    background: rgba(255, 255, 255, .78);
}

:where(.repair-service-redesign) .repair-selection-status.is-warning .repair-selection-item {
    border-color: rgba(183, 121, 31, .16);
}

:where(.repair-service-redesign) .repair-selection-item-copy {
    min-width: 0;
}

:where(.repair-service-redesign) .repair-selection-status-copy .repair-selection-item-name {
    display: block;
    margin: 0 0 2px;
    overflow: hidden;
    color: #244b32;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
}

:where(.repair-service-redesign) .repair-selection-status.is-warning .repair-selection-item-name {
    color: #5b421c;
}

:where(.repair-service-redesign) .repair-selection-status-copy .repair-selection-item-meta {
    display: block;
    margin: 0;
    color: #5a7563;
    font-size: 11px;
    line-height: 1.4;
}

:where(.repair-service-redesign) .repair-selection-status.is-warning .repair-selection-item-meta {
    color: #79623c;
}

:where(.repair-service-redesign) .repair-selection-remove {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid #efc8c8;
    border-radius: 6px;
    background: #fff;
    color: #b43f3f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

:where(.repair-service-redesign) .repair-selection-remove:hover,
:where(.repair-service-redesign) .repair-selection-remove:focus-visible {
    border-color: #dc8f8f;
    background: #fff6f6;
    color: #9f2f2f;
    outline: 0;
}

:where(.repair-service-redesign) .repair-mobile-sticky-summary {
    display: none;
}

@media (max-width: 767.98px) {
    :where(.repair-service-redesign) .repair-type-browser {
        margin: 0 -2px 13px;
        padding: 0 31px;
    }

    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid {
        gap: 7px;
        width: 100%;
        margin: 0;
        padding: 1px 0 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    :where(.repair-service-redesign) .repair-type-browser .repair-type-card {
        scroll-snap-align: start;
    }

    :where(.repair-service-redesign) .repair-type-browser.has-overflow .repair-type-scroll-btn {
        position: absolute;
        top: 50%;
        z-index: 6;
        display: inline-flex;
        width: 27px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #b9d2fa;
        border-radius: 8px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 4px 12px rgba(19, 54, 100, .11);
        color: var(--repair-blue);
        font-size: 15px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    :where(.repair-service-redesign) .repair-type-scroll-btn.is-previous {
        left: 0;
    }

    :where(.repair-service-redesign) .repair-type-scroll-btn.is-next {
        right: 0;
    }

    :where(.repair-service-redesign) .repair-type-scroll-btn:disabled {
        opacity: .28;
        cursor: default;
        box-shadow: none;
    }

    :where(.repair-service-redesign) .repair-selection-list {
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
    }

    :where(.repair-service-redesign) .repair-selection-item {
        gap: 8px;
        padding: 7px 7px 7px 8px;
    }

    :where(.repair-service-redesign) .repair-selection-status-copy .repair-selection-item-name {
        font-size: 11.5px;
    }

    :where(.repair-service-redesign) .repair-selection-status-copy .repair-selection-item-meta {
        font-size: 10.5px;
    }

    :where(.repair-service-redesign) .repair-selection-remove {
        min-height: 29px;
        padding: 0 7px;
        font-size: 10.5px;
    }

    :where(.repair-service-redesign) .repair-mobile-submit {
        bottom: max(6px, env(safe-area-inset-bottom));
        margin: 12px -4px -4px;
        padding: 8px;
        border-color: #d9e2ee;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -6px 20px rgba(25, 48, 78, .12);
    }

    :where(.repair-service-redesign) .repair-mobile-sticky-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 7px;
        padding: 0 2px;
        color: #465469;
        font-size: 11px;
        font-weight: 500;
    }

    :where(.repair-service-redesign) .repair-mobile-sticky-summary strong {
        flex: 0 0 auto;
        color: #111827;
        font-size: 12px;
        font-weight: 700;
    }

    :where(.repair-service-redesign) .repair-mobile-submit .repair-continue-btn {
        width: 100%;
        min-height: 45px;
        margin: 0;
    }
}

@media (max-width: 379.98px) {
    :where(.repair-service-redesign) .repair-type-browser {
        padding-right: 29px;
        padding-left: 29px;
    }

    :where(.repair-service-redesign) .repair-type-browser.has-overflow .repair-type-scroll-btn {
        width: 25px;
    }

    :where(.repair-service-redesign) .repair-selection-remove span {
        display: none;
    }

    :where(.repair-service-redesign) .repair-selection-remove {
        width: 30px;
        padding: 0;
    }
}



/* ========================================================================== 
   MOBILE HORIZONTAL CAROUSEL DISCOVERY
   Device: Series + Device models keep native touch scrolling and gain arrows.
   Service: Repair types keep touch scrolling/arrows and gain a visible track.
   Custom progress tracks remain visible even where mobile OS scrollbars hide.
   ========================================================================== */

:where(.repair-device-redesign) .repair-device-series-carousel,
:where(.repair-device-redesign) .repair-products-carousel {
    position: relative;
}

:where(.repair-device-redesign) .repair-device-scroll-btn,
:where(.repair-device-redesign) .repair-device-scroll-progress,
:where(.repair-service-redesign) .repair-type-scroll-progress {
    display: none;
}

@media (max-width: 767.98px) {
    /* ---------- Select Device: common rail controls ---------- */
    :where(.repair-device-redesign) .repair-device-series-carousel,
    :where(.repair-device-redesign) .repair-products-carousel {
        width: 100%;
        min-width: 0;
        padding-right: 31px;
        padding-bottom: 12px;
        padding-left: 31px;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel {
        margin: 0;
    }

    :where(.repair-device-redesign) .repair-products-carousel {
        margin: 0 -2px;
        width: calc(100% + 4px);
    }

    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-list,
    :where(.repair-device-redesign) .repair-products-carousel .repair-products-grid {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scrollbar-color: #9db9df #edf3fb;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-list::-webkit-scrollbar,
    :where(.repair-device-redesign) .repair-products-carousel .repair-products-grid::-webkit-scrollbar {
        height: 4px;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-list::-webkit-scrollbar-track,
    :where(.repair-device-redesign) .repair-products-carousel .repair-products-grid::-webkit-scrollbar-track {
        border-radius: 999px;
        background: #edf3fb;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-list::-webkit-scrollbar-thumb,
    :where(.repair-device-redesign) .repair-products-carousel .repair-products-grid::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #9db9df;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel.has-overflow .repair-device-scroll-btn,
    :where(.repair-device-redesign) .repair-products-carousel.has-overflow .repair-device-scroll-btn {
        position: absolute;
        top: calc(50% - 6px);
        z-index: 7;
        display: inline-flex;
        width: 27px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #b9d2fa;
        border-radius: 8px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 4px 12px rgba(19, 54, 100, .11);
        color: var(--repair-blue);
        font-size: 15px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    :where(.repair-device-redesign) .repair-device-scroll-btn.is-previous {
        left: 0;
    }

    :where(.repair-device-redesign) .repair-device-scroll-btn.is-next {
        right: 0;
    }

    :where(.repair-device-redesign) .repair-device-scroll-btn:disabled {
        opacity: .28;
        cursor: default;
        box-shadow: none;
    }

    :where(.repair-device-redesign) .repair-device-scroll-progress,
    :where(.repair-service-redesign) .repair-type-scroll-progress {
        position: absolute;
        right: 35px;
        bottom: 0;
        left: 35px;
        height: 4px;
        overflow: hidden;
        border-radius: 999px;
        background: #e8eef7;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
    }

    :where(.repair-device-redesign) .repair-device-scroll-progress.is-visible,
    :where(.repair-service-redesign) .repair-type-scroll-progress.is-visible {
        display: block;
        opacity: 1;
    }

    :where(.repair-device-redesign) .repair-device-scroll-progress-thumb,
    :where(.repair-service-redesign) .repair-type-scroll-progress-thumb {
        display: block;
        width: 28px;
        height: 100%;
        border-radius: inherit;
        background: var(--repair-blue);
        transform: translateX(0);
        will-change: width, transform;
    }

    /* ---------- Select Device: series rail ---------- */
    :where(.repair-device-redesign) .repair-series-sidebar {
        padding-right: 9px;
        padding-left: 9px;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-list {
        gap: 8px;
        padding: 2px 0 8px;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-btn {
        scroll-snap-align: start;
    }

    /* ---------- Select Device: model rail ---------- */
    :where(.repair-device-redesign) .repair-products-panel {
        overflow: hidden;
    }

    :where(.repair-device-redesign) .repair-products-carousel .repair-products-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 9px;
        align-items: stretch;
        padding: 1px 0 8px;
    }

    :where(.repair-device-redesign) .repair-products-carousel .repair-product-wrap {
        flex: 0 0 clamp(132px, 42vw, 164px);
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible;
        scroll-snap-align: start;
    }

    :where(.repair-device-redesign) .repair-products-carousel .repair-product-card {
        width: 100% !important;
        height: 100%;
        min-height: 164px;
    }

    /* ---------- Select Service: keep swipe + show native scrollbar + custom track ---------- */
    :where(.repair-service-redesign) .repair-type-browser {
        padding-bottom: 13px;
    }

    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid {
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: #9db9df #edf3fb;
    }

    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid::-webkit-scrollbar {
        display: block;
        width: auto;
        height: 4px;
    }

    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid::-webkit-scrollbar-track {
        border-radius: 999px;
        background: #edf3fb;
    }

    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #9db9df;
    }

    :where(.repair-service-redesign) .repair-type-scroll-progress {
        right: 35px;
        left: 35px;
    }

    /* Arrows stay vertically aligned with the service cards, not the progress track. */
    :where(.repair-service-redesign) .repair-type-browser.has-overflow .repair-type-scroll-btn {
        top: calc(50% - 7px);
    }
}

@media (max-width: 379.98px) {
    :where(.repair-device-redesign) .repair-device-series-carousel,
    :where(.repair-device-redesign) .repair-products-carousel {
        padding-right: 29px;
        padding-left: 29px;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel.has-overflow .repair-device-scroll-btn,
    :where(.repair-device-redesign) .repair-products-carousel.has-overflow .repair-device-scroll-btn {
        width: 25px;
    }

    :where(.repair-device-redesign) .repair-device-scroll-progress,
    :where(.repair-service-redesign) .repair-type-scroll-progress {
        right: 32px;
        left: 32px;
    }
}

/* ========================================================================== 
   MOBILE CAROUSEL POLISH - SINGLE VISIBLE TRACK + BRAND CONTROLS
   Keep touch/drag horizontal scrolling, hide browser-native scrollbars, and
   use the custom progress track as the single consistent visual indicator.
   ========================================================================== */

:where(.repair-device-redesign) .repair-brand-carousel {
    position: relative;
}

@media (max-width: 767.98px) {
    /* ---------- Device brands: arrows + swipe + custom progress ---------- */
    :where(.repair-device-redesign) .repair-brand-carousel {
        width: 100%;
        min-width: 0;
        margin-bottom: 22px;
        padding-right: 31px;
        padding-bottom: 12px;
        padding-left: 31px;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-brand-row {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        margin: 0;
        padding: 1px 0 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: none !important;
        -ms-overflow-style: none;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-brand-row::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-brand-card {
        flex: 0 0 126px;
        scroll-snap-align: start;
    }

    /* All brands are already accessible by horizontal scrolling on mobile. */
    :where(.repair-device-redesign) .repair-brand-carousel .repair-brand-extra {
        display: flex;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-more-brands {
        display: none !important;
    }

    /* Include the brand rail in the same arrow system as series/models. */
    :where(.repair-device-redesign) .repair-brand-carousel.has-overflow .repair-device-scroll-btn {
        position: absolute;
        top: calc(50% - 6px);
        z-index: 7;
        display: inline-flex;
        width: 27px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #b9d2fa;
        border-radius: 8px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 4px 12px rgba(19, 54, 100, .11);
        color: var(--repair-blue);
        font-size: 15px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-device-scroll-btn.is-previous {
        left: 0;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-device-scroll-btn.is-next {
        right: 0;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-device-scroll-btn:disabled {
        opacity: .28;
        cursor: default;
        box-shadow: none;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-device-scroll-progress {
        right: 35px;
        bottom: 0;
        left: 35px;
    }

    /* ---------- One scrollbar only: hide native rails, keep swipe ---------- */
    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-list,
    :where(.repair-device-redesign) .repair-products-carousel .repair-products-grid,
    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid {
        scrollbar-width: none !important;
        -ms-overflow-style: none;
    }

    :where(.repair-device-redesign) .repair-device-series-carousel .repair-series-list::-webkit-scrollbar,
    :where(.repair-device-redesign) .repair-products-carousel .repair-products-grid::-webkit-scrollbar,
    :where(.repair-service-redesign) .repair-type-browser .repair-type-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* The custom progress bar remains the only visible horizontal indicator. */
    :where(.repair-device-redesign) .repair-brand-carousel .repair-device-scroll-progress,
    :where(.repair-device-redesign) .repair-device-series-carousel .repair-device-scroll-progress,
    :where(.repair-device-redesign) .repair-products-carousel .repair-device-scroll-progress,
    :where(.repair-service-redesign) .repair-type-scroll-progress {
        height: 4px;
        background: #e8eef7;
    }
}

@media (max-width: 379.98px) {
    :where(.repair-device-redesign) .repair-brand-carousel {
        padding-right: 29px;
        padding-left: 29px;
    }

    :where(.repair-device-redesign) .repair-brand-carousel.has-overflow .repair-device-scroll-btn {
        width: 25px;
    }

    :where(.repair-device-redesign) .repair-brand-carousel .repair-device-scroll-progress {
        right: 32px;
        left: 32px;
    }
}

/* ==========================================================================
   REPAIR CONFIRM - FINAL TYPOGRAPHY SCALE
   Purpose: make the booking review clearly readable on desktop and mobile.
   Scope: repair-confirm only. Checkout and all other repair pages unchanged.
   ========================================================================== */

:where(.repair-confirm-redesign) .repair-confirm-page-title {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

:where(.repair-confirm-redesign) .repair-confirm-progress-card {
    padding-top: 19px;
    padding-bottom: 15px;
}

:where(.repair-confirm-redesign) .repair-confirm-step {
    font-size: 12px;
    line-height: 1.4;
}

:where(.repair-confirm-redesign) .repair-confirm-step-number {
    width: 31px;
    height: 31px;
    font-size: 12.5px;
}

:where(.repair-confirm-redesign) .repair-confirm-section {
    padding: 20px 21px;
}

:where(.repair-confirm-redesign) .repair-confirm-intro h1 {
    font-size: 23px;
    line-height: 1.35;
}

:where(.repair-confirm-redesign) .repair-confirm-intro p {
    font-size: 14.5px;
    line-height: 1.65;
}

:where(.repair-confirm-redesign) .repair-confirm-section-title {
    font-size: 18px;
    line-height: 1.35;
}

:where(.repair-confirm-redesign) .repair-confirm-edit {
    font-size: 13.5px;
}

:where(.repair-confirm-redesign) .repair-confirm-device-title {
    font-size: 17px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-service-text,
:where(.repair-confirm-redesign) .repair-confirm-service-title {
    font-size: 15px;
    line-height: 1.6;
}

:where(.repair-confirm-redesign) .repair-confirm-service-list {
    gap: 8px;
    margin-top: 5px;
}

:where(.repair-confirm-redesign) .repair-confirm-service-item {
    gap: 6px;
}

:where(.repair-confirm-redesign) .repair-confirm-service-variant,
:where(.repair-confirm-redesign) .repair-confirm-service-warranty {
    min-height: 24px;
    padding: 3px 9px;
    font-size: 12.5px;
    line-height: 1.35;
}

:where(.repair-confirm-redesign) .repair-confirm-service-warranty i {
    font-size: 13px;
}

:where(.repair-confirm-redesign) .repair-confirm-service-count {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
}

:where(.repair-confirm-redesign) .repair-confirm-meta-grid {
    margin-top: 16px;
    padding-top: 15px;
}

:where(.repair-confirm-redesign) .repair-confirm-meta-label {
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.5;
}

:where(.repair-confirm-redesign) .repair-confirm-meta-value {
    font-size: 14.5px;
    line-height: 1.5;
}

:where(.repair-confirm-redesign) .repair-confirm-info-row {
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 11px;
}

:where(.repair-confirm-redesign) .repair-confirm-info-row + .repair-confirm-info-row {
    margin-top: 17px;
    padding-top: 17px;
}

:where(.repair-confirm-redesign) .repair-confirm-info-icon {
    font-size: 18px;
}

:where(.repair-confirm-redesign) .repair-confirm-info-copy strong {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-info-copy span {
    font-size: 14px;
    line-height: 1.65;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-lines {
    gap: 11px;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-line {
    font-size: 14px;
    line-height: 1.55;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-total {
    margin-top: 5px;
    padding-top: 14px;
    font-size: 18px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-payment-total strong {
    font-size: 20px;
}

:where(.repair-confirm-redesign) .repair-confirm-vat {
    font-size: 12.5px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-addon strong {
    font-size: 14.5px;
    line-height: 1.45;
}

:where(.repair-confirm-redesign) .repair-confirm-addon span {
    font-size: 13px;
    line-height: 1.55;
}

:where(.repair-confirm-redesign) .repair-confirm-addon-price {
    font-size: 15.5px !important;
}

:where(.repair-confirm-redesign) .repair-confirm-next-list {
    gap: 12px;
}

:where(.repair-confirm-redesign) .repair-confirm-next-list li {
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 9px;
    font-size: 14px;
    line-height: 1.65;
}

:where(.repair-confirm-redesign) .repair-confirm-next-list i {
    font-size: 16px;
    line-height: 1.5;
}

:where(.repair-confirm-redesign) .repair-confirm-action {
    padding: 14px;
}

:where(.repair-confirm-redesign) .repair-confirm-submit {
    min-height: 48px;
    font-size: 15px;
}

:where(.repair-confirm-redesign) .repair-confirm-trust {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    :where(.repair-confirm-redesign) .repair-confirm-page-title {
        margin: 0 5px 10px;
        font-size: 22px;
        line-height: 1.3;
    }

    :where(.repair-confirm-redesign) .repair-confirm-progress-card {
        padding: 12px 8px 10px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-step {
        font-size: 10.5px;
        line-height: 1.35;
    }

    :where(.repair-confirm-redesign) .repair-confirm-step-number {
        width: 25px;
        height: 25px;
        font-size: 11px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-section {
        padding: 15px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-intro h1 {
        font-size: 19px;
        line-height: 1.4;
    }

    :where(.repair-confirm-redesign) .repair-confirm-intro p {
        font-size: 13.5px;
        line-height: 1.65;
    }

    :where(.repair-confirm-redesign) .repair-confirm-section-title {
        font-size: 16px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-edit {
        font-size: 12.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-device-title {
        font-size: 15px;
        line-height: 1.45;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-text,
    :where(.repair-confirm-redesign) .repair-confirm-service-title {
        font-size: 14px;
        line-height: 1.6;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-list {
        gap: 6px;
        margin-top: 4px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-variant,
    :where(.repair-confirm-redesign) .repair-confirm-service-warranty {
        min-height: 23px;
        padding: 3px 8px;
        font-size: 11.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-warranty i {
        font-size: 12px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-service-count,
    :where(.repair-confirm-redesign) .repair-confirm-meta-label {
        font-size: 11.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-meta-value {
        font-size: 13.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-info-icon {
        font-size: 17px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-info-copy strong {
        font-size: 14px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-info-copy span {
        font-size: 13.5px;
        line-height: 1.6;
    }

    :where(.repair-confirm-redesign) .repair-confirm-payment-line {
        font-size: 13.5px;
        line-height: 1.55;
    }

    :where(.repair-confirm-redesign) .repair-confirm-payment-total {
        font-size: 17px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-payment-total strong {
        font-size: 18px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-vat {
        font-size: 11.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-addon strong {
        font-size: 13.5px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-addon span {
        font-size: 12px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-addon-price {
        font-size: 14.5px !important;
    }

    :where(.repair-confirm-redesign) .repair-confirm-next-list li {
        font-size: 13.5px;
        line-height: 1.65;
    }

    :where(.repair-confirm-redesign) .repair-confirm-next-list i {
        font-size: 15px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-submit {
        min-height: 49px;
        font-size: 14px;
    }

    :where(.repair-confirm-redesign) .repair-confirm-trust {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   REPAIR CHECKOUT TYPOGRAPHY + TERMS NOTICE - AUG 2026
   Scoped to repair-checkout.php only. Checkout processing/layout unchanged.
   ========================================================================== */
:where(.repair-checkout-redesign) .repair-checkout-heading h1 {
    font-size: clamp(30px, 3vw, 42px);
}

:where(.repair-checkout-redesign) .repair-checkout-heading p {
    font-size: 15px;
    line-height: 1.65;
}

:where(.repair-checkout-redesign) .repair-checkout-section-title {
    font-size: 19px;
    line-height: 1.35;
}

:where(.repair-checkout-redesign) .repair-checkout-subtitle {
    font-size: 15px;
    line-height: 1.4;
}

:where(.repair-checkout-redesign) .repair-checkout-label {
    font-size: 14px;
    line-height: 1.4;
}

:where(.repair-checkout-redesign) .repair-checkout-input {
    min-height: 50px;
    font-size: 15px;
    line-height: 1.45;
}

:where(.repair-checkout-redesign) .repair-checkout-help,
:where(.repair-checkout-redesign) .invalid-feedback {
    font-size: 13px;
    line-height: 1.5;
}

:where(.repair-checkout-redesign) .repair-address-help {
    font-size: 13px;
    line-height: 1.6;
}

:where(.repair-checkout-redesign) .repair-checkout-check-row label {
    font-size: 14px;
    line-height: 1.55;
}

:where(.repair-checkout-redesign) .repair-shipping-copy strong,
:where(.repair-checkout-redesign) .repair-shipping-price {
    font-size: 15px;
}

:where(.repair-checkout-redesign) .repair-shipping-copy span {
    font-size: 13px;
    line-height: 1.5;
}

:where(.repair-checkout-redesign) .repair-payment-copy strong {
    font-size: 15px;
    line-height: 1.4;
}

:where(.repair-checkout-redesign) .repair-payment-copy span {
    font-size: 13px;
    line-height: 1.5;
}

:where(.repair-checkout-redesign) .repair-checkout-consents {
    gap: 12px;
    margin: 18px 0 20px;
}

:where(.repair-checkout-redesign) .repair-checkout-terms-note {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #d9e6f7;
    border-radius: 8px;
    background: #f7faff;
    color: #475467;
    font-size: 13.5px;
    line-height: 1.55;
}

:where(.repair-checkout-redesign) .repair-checkout-terms-note a {
    color: var(--repair-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(.repair-checkout-redesign) .repair-checkout-submit {
    min-height: 56px;
    font-size: 16px;
}

:where(.repair-checkout-redesign) .repair-checkout-secure {
    font-size: 12.5px;
    line-height: 1.45;
}

:where(.repair-checkout-redesign) .repair-booking-summary-head h2 {
    font-size: 19px;
}

:where(.repair-checkout-redesign) .repair-booking-edit {
    font-size: 13px;
}

:where(.repair-checkout-redesign) .repair-booking-product strong {
    font-size: 17px;
    line-height: 1.4;
}

:where(.repair-checkout-redesign) .repair-booking-product span {
    font-size: 13.5px;
    line-height: 1.55;
}

:where(.repair-checkout-redesign) .repair-booking-service-title {
    font-size: 14px !important;
    line-height: 1.5;
}

:where(.repair-checkout-redesign) .repair-booking-service-variant,
:where(.repair-checkout-redesign) .repair-booking-service-warranty {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11.5px !important;
}

:where(.repair-checkout-redesign) .repair-booking-service-count {
    font-size: 12.5px !important;
}

:where(.repair-checkout-redesign) .repair-booking-detail strong {
    font-size: 14px;
    line-height: 1.4;
}

:where(.repair-checkout-redesign) .repair-booking-detail span {
    font-size: 13.5px;
    line-height: 1.55;
}

:where(.repair-checkout-redesign) .repair-booking-addon strong,
:where(.repair-checkout-redesign) .repair-booking-addon-price {
    font-size: 13.5px !important;
}

:where(.repair-checkout-redesign) .repair-booking-addon span {
    font-size: 11.5px;
    line-height: 1.45;
}

:where(.repair-checkout-redesign) .repair-booking-total-row {
    font-size: 13.5px;
    line-height: 1.45;
}

:where(.repair-checkout-redesign) .repair-booking-grand {
    font-size: 17px;
}

:where(.repair-checkout-redesign) .repair-booking-grand strong {
    font-size: 21px;
}

:where(.repair-checkout-redesign) .repair-booking-grand small {
    font-size: 11.5px;
}

:where(.repair-checkout-redesign) .repair-booking-message {
    font-size: 12.5px;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    :where(.repair-checkout-redesign) .repair-checkout-heading h1 {
        font-size: 28px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-heading p {
        font-size: 13.5px;
        line-height: 1.6;
    }

    :where(.repair-checkout-redesign) .repair-booking-summary-head h2 {
        font-size: 17px;
    }

    :where(.repair-checkout-redesign) .repair-booking-edit {
        font-size: 12px;
    }

    :where(.repair-checkout-redesign) .repair-booking-product strong {
        font-size: 15px;
    }

    :where(.repair-checkout-redesign) .repair-booking-product span {
        font-size: 12.5px;
        line-height: 1.5;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-title {
        font-size: 13px !important;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-variant,
    :where(.repair-checkout-redesign) .repair-booking-service-warranty {
        min-height: 22px;
        padding: 2px 7px;
        font-size: 10.5px !important;
    }

    :where(.repair-checkout-redesign) .repair-booking-service-count {
        font-size: 11.5px !important;
    }

    :where(.repair-checkout-redesign) .repair-booking-detail strong {
        font-size: 13.5px;
    }

    :where(.repair-checkout-redesign) .repair-booking-detail span {
        font-size: 12.5px;
        line-height: 1.55;
    }

    :where(.repair-checkout-redesign) .repair-booking-total-row {
        font-size: 12.5px;
    }

    :where(.repair-checkout-redesign) .repair-booking-grand {
        font-size: 16px;
    }

    :where(.repair-checkout-redesign) .repair-booking-grand strong {
        font-size: 19px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-section-title {
        font-size: 17px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-subtitle {
        font-size: 13.5px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-label {
        font-size: 13.5px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-input {
        min-height: 46px;
        font-size: 14.5px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-help,
    :where(.repair-checkout-redesign) .invalid-feedback {
        font-size: 12px;
        line-height: 1.5;
    }

    :where(.repair-checkout-redesign) .repair-address-help {
        font-size: 12.5px;
        line-height: 1.55;
    }

    :where(.repair-checkout-redesign) .repair-checkout-check-row label {
        font-size: 13px;
        line-height: 1.5;
    }

    :where(.repair-checkout-redesign) .repair-shipping-copy strong,
    :where(.repair-checkout-redesign) .repair-shipping-price {
        font-size: 13px;
    }

    :where(.repair-checkout-redesign) .repair-shipping-copy span {
        font-size: 11.5px;
    }

    :where(.repair-checkout-redesign) .repair-payment-copy strong {
        font-size: 14px;
    }

    :where(.repair-checkout-redesign) .repair-payment-copy span {
        font-size: 12.5px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-terms-note {
        padding: 10px 11px;
        font-size: 13px;
        line-height: 1.55;
    }

    :where(.repair-checkout-redesign) .repair-checkout-submit {
        min-height: 52px;
        font-size: 15px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-submit-total {
        font-size: 15px;
    }

    :where(.repair-checkout-redesign) .repair-checkout-secure {
        font-size: 11.5px;
    }
}


/* ==========================================================================
   SELECT DATE - COMPACT HELP ROW
   Replaces the separate support card so the Continue action stays primary.
   ========================================================================== */
:where(.repair-date-redesign) .repair-date-inline-help {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 7px;
    margin-top: 9px;
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

:where(.repair-date-redesign) .repair-date-inline-help-prompt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

:where(.repair-date-redesign) .repair-date-inline-help-prompt i {
    color: #667085;
    font-size: 13px;
}

:where(.repair-date-redesign) .repair-date-inline-help-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--repair-blue) !important;
    font: inherit;
    font-weight: 600;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

:where(.repair-date-redesign) .repair-date-inline-help-link:hover,
:where(.repair-date-redesign) .repair-date-inline-help-link:focus-visible {
    color: #0759d9 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(.repair-date-redesign) .repair-date-inline-help-link:focus-visible {
    outline: 2px solid rgba(8, 104, 247, .22);
    outline-offset: 3px;
    border-radius: 3px;
}

:where(.repair-date-redesign) .repair-date-inline-help-phone i {
    font-size: 11px;
}

:where(.repair-date-redesign) .repair-date-inline-help-separator {
    color: #a2aabc;
}

@media (max-width: 767.98px) {
    /*
     * Keep appointment help visually aligned with the centred trust row above.
     * The prompt occupies the first line; both support actions stay together
     * on the second line, including on 320-399px phones.
     */
    :where(.repair-date-redesign) .repair-date-inline-help {
        width: 100%;
        justify-content: center;
        gap: 5px 8px;
        margin-top: 10px;
        font-size: 11.5px;
        line-height: 1.45;
        text-align: center;
    }

    :where(.repair-date-redesign) .repair-date-inline-help-prompt {
        flex: 0 0 100%;
        justify-content: center;
        margin-bottom: 1px;
        text-align: center;
    }

    :where(.repair-date-redesign) .repair-date-inline-help-prompt i {
        font-size: 12px;
    }

    :where(.repair-date-redesign) .repair-date-inline-help-link {
        flex: 0 0 auto;
        justify-content: center;
        white-space: nowrap;
    }

    :where(.repair-date-redesign) .repair-date-inline-help-separator {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
    }

    :where(.repair-date-redesign) .repair-date-inline-help-phone {
        flex-basis: auto;
    }
}

/* ========================================================================== 
   SELECT DATE - MOBILE DATE CAROUSEL DISCOVERY
   Keeps touch/swipe scrolling, adds left/right buttons and one custom
   horizontal progress indicator. The native scrollbar is intentionally
   hidden so customers never see two scrollbars at the same time.
   ========================================================================== */

:where(.repair-date-redesign) .repair-date-day-carousel {
    position: relative;
}

:where(.repair-date-redesign) .repair-date-day-scroll-btn,
:where(.repair-date-redesign) .repair-date-day-scroll-progress {
    display: none;
}

@media (max-width: 767.98px) {
    :where(.repair-date-redesign) .repair-date-day-carousel {
        width: 100%;
        min-width: 0;
        margin-bottom: 20px;
        padding: 0 31px 13px;
    }

    :where(.repair-date-redesign) .repair-date-day-carousel .repair-date-day-rail {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 !important;
        padding: 1px 0 7px !important;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: none !important;
        -ms-overflow-style: none;
    }

    :where(.repair-date-redesign) .repair-date-day-carousel .repair-date-day-rail::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    :where(.repair-date-redesign) .repair-date-day-carousel .repair-date-day {
        flex: 0 0 78px;
        scroll-snap-align: start;
    }

    :where(.repair-date-redesign) .repair-date-day-carousel.has-overflow .repair-date-day-scroll-btn {
        position: absolute;
        top: 46px;
        z-index: 7;
        display: inline-flex;
        width: 27px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #b9d2fa;
        border-radius: 8px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 4px 12px rgba(19, 54, 100, .11);
        color: var(--repair-blue);
        font-size: 15px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    :where(.repair-date-redesign) .repair-date-day-scroll-btn.is-previous {
        left: 0;
    }

    :where(.repair-date-redesign) .repair-date-day-scroll-btn.is-next {
        right: 0;
    }

    :where(.repair-date-redesign) .repair-date-day-scroll-btn:disabled {
        opacity: .28;
        cursor: default;
        box-shadow: none;
    }

    :where(.repair-date-redesign) .repair-date-day-scroll-progress {
        position: absolute;
        right: 35px;
        bottom: 0;
        left: 35px;
        height: 4px;
        overflow: hidden;
        border-radius: 999px;
        background: #e8eef7;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
    }

    :where(.repair-date-redesign) .repair-date-day-scroll-progress.is-visible {
        display: block;
        opacity: 1;
    }

    :where(.repair-date-redesign) .repair-date-day-scroll-progress-thumb {
        display: block;
        width: 28px;
        height: 100%;
        border-radius: inherit;
        background: var(--repair-blue);
        transform: translateX(0);
        will-change: width, transform;
    }
}

@media (max-width: 379.98px) {
    :where(.repair-date-redesign) .repair-date-day-carousel {
        padding-right: 29px;
        padding-left: 29px;
    }

    :where(.repair-date-redesign) .repair-date-day-carousel.has-overflow .repair-date-day-scroll-btn {
        width: 25px;
    }

    :where(.repair-date-redesign) .repair-date-day-scroll-progress {
        right: 32px;
        left: 32px;
    }
}