/*
|--------------------------------------------------------------------------
| MKTECHSUPPORT - Public Repairs
|--------------------------------------------------------------------------
|
| Shared styling for:
|
| /repairs/
| /repairs/book/
| /repairs/track/
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Repair Theme
|--------------------------------------------------------------------------
*/

.repairs-page {
    --repair-primary: #1570ef;
    --repair-primary-dark: #0c5fc1;

    --repair-dark: #102a43;
    --repair-dark-deep: #0a1c30;

    --repair-border: #e5e7eb;
    --repair-border-strong: #cfd5dd;

    --repair-muted: #f7f8fa;
    --repair-muted-strong: #eef2f6;

    --repair-text: #17212b;
    --repair-text-muted: #5f6773;

    --repair-success: #16803d;
    --repair-success-bg: #f3fbf6;
    --repair-success-border: #b8e1c7;

    --repair-danger: #8f1d1d;
    --repair-danger-bg: #fff2f2;
    --repair-danger-border: #f5b8b8;

    --repair-warning: #835c00;
    --repair-warning-bg: #fff7df;

    --repair-radius: 18px;
    --repair-radius-small: 12px;

    --repair-shadow:
        0 12px 34px rgba(16, 42, 67, 0.08);
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.mk-repair-hero,
.mk-repair-page-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    background:
        linear-gradient(
            135deg,
            rgba(10, 28, 48, 0.99),
            rgba(18, 53, 82, 0.95)
        );
    color: #fff;
}

.mk-repair-hero::after,
.mk-repair-page-hero::after {
    content: "";
    position: absolute;
    top: -160px;
    right: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(21, 112, 239, 0.22),
            rgba(21, 112, 239, 0)
        );
    pointer-events: none;
}

.mk-repair-hero .mk-container,
.mk-repair-page-hero .mk-container {
    position: relative;
    z-index: 1;
}

.mk-repair-hero__content {
    max-width: 800px;
}

.mk-repair-hero h1,
.mk-repair-page-hero h1 {
    margin: 10px 0 18px;
    max-width: 850px;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #fff;
}

.mk-repair-hero p,
.mk-repair-page-hero p {
    max-width: 720px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
}

.mk-repair-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mk-repair-hero .mk-repair-eyebrow,
.mk-repair-page-hero .mk-repair-eyebrow {
    color: rgba(255, 255, 255, 0.82);
}

.mk-repair-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.repairs-page .mk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.repairs-page .mk-button:hover {
    transform: translateY(-1px);
}

.repairs-page .mk-button:focus-visible {
    outline: 3px solid rgba(21, 112, 239, 0.25);
    outline-offset: 3px;
}

.repairs-page .mk-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.repairs-page .mk-button--primary {
    border-color: var(--repair-primary);
    background: var(--repair-primary);
    color: #fff;
}

.repairs-page .mk-button--primary:hover:not(:disabled) {
    border-color: var(--repair-primary-dark);
    background: var(--repair-primary-dark);
    color: #fff;
    box-shadow:
        0 8px 20px rgba(21, 112, 239, 0.2);
}

.repairs-page .mk-button--secondary {
    border-color: var(--repair-border-strong);
    background: #fff;
    color: var(--repair-dark);
}

.repairs-page .mk-button--secondary:hover {
    border-color: #aeb8c4;
    background: var(--repair-muted);
    color: var(--repair-dark);
}

/*
 * Secondary buttons inside dark sections.
 */

.mk-repair-hero .mk-button--secondary,
.mk-repair-cta .mk-button--secondary {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.mk-repair-hero .mk-button--secondary:hover,
.mk-repair-cta .mk-button--secondary:hover {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/

.mk-repair-section {
    padding: 70px 0;
}

.mk-repair-section--muted {
    background: var(--repair-muted);
}

.mk-section-heading {
    max-width: 720px;
    margin-bottom: 34px;
}

.mk-section-heading h2 {
    margin: 8px 0 12px;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.15;
}

.mk-section-heading p {
    margin: 0;
    color: var(--repair-text-muted);
    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Repair Process
|--------------------------------------------------------------------------
*/

.mk-repair-process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.mk-repair-step {
    position: relative;
    padding: 28px;
    border: 1px solid var(--repair-border);
    border-radius: var(--repair-radius);
    background: #fff;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.mk-repair-step:hover {
    transform: translateY(-2px);
    border-color: #d4dae2;
    box-shadow: var(--repair-shadow);
}

.mk-repair-step__number {
    display: block;
    margin-bottom: 22px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--repair-primary);
}

.mk-repair-step h3 {
    margin: 0 0 10px;
}

.mk-repair-step p {
    margin: 0;
    color: var(--repair-text-muted);
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Repair Services
|--------------------------------------------------------------------------
*/

.mk-repair-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mk-repair-service-card {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 26px;
    border: 1px solid var(--repair-border);
    border-radius: var(--repair-radius);
    background: #fff;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.mk-repair-service-card:hover {
    transform: translateY(-2px);
    border-color: #d4dae2;
    box-shadow: var(--repair-shadow);
}

.mk-repair-service-card__category {
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--repair-primary);
}

.mk-repair-service-card h3 {
    margin: 0 0 12px;
    font-size: 1.2rem;
}

.mk-repair-service-card p {
    margin: 0 0 22px;
    color: var(--repair-text-muted);
    line-height: 1.7;
}

.mk-repair-service-card__link {
    margin-top: auto;
    font-weight: 800;
    color: var(--repair-primary);
    text-decoration: none;
}

.mk-repair-service-card__link:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| Repair CTA
|--------------------------------------------------------------------------
*/

.mk-repair-cta {
    padding: 65px 0;
}

.mk-repair-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 42px;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            var(--repair-dark),
            #173d60
        );
    color: #fff;
}

.mk-repair-cta__inner h2 {
    margin: 8px 0;
    color: #fff;
}

.mk-repair-cta__inner p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
}

.mk-repair-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}


/*
|--------------------------------------------------------------------------
| Booking / Tracking Containers
|--------------------------------------------------------------------------
*/

.mk-repair-form-container,
.mk-repair-track-container {
    width: 100%;
    max-width: 1000px;
}

.mk-repair-form-container {
    margin-inline: auto;
}

.mk-repair-track-container {
    margin-inline: auto;
}


/*
|--------------------------------------------------------------------------
| Booking Form
|--------------------------------------------------------------------------
*/

.mk-repair-form {
    display: grid;
    gap: 24px;
}

.mk-repair-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 28px;
    border: 1px solid var(--repair-border);
    border-radius: var(--repair-radius);
    background: #fff;
}

.mk-repair-form legend {
    padding: 0 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--repair-text);
}

.mk-repair-fieldset-intro {
    margin: 0 0 24px;
    color: var(--repair-text-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

.mk-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.mk-field {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    margin-bottom: 18px;
}

.mk-form-grid > .mk-field {
    margin-bottom: 0;
}

.mk-field--full {
    grid-column: 1 / -1;
}

.mk-field label {
    font-size: 0.9rem;
    font-weight: 750;
    color: var(--repair-text);
}

.mk-field label span[aria-hidden="true"] {
    color: #b42318;
}

.mk-field input,
.mk-field select,
.mk-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--repair-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--repair-text);
    font: inherit;
    line-height: 1.4;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.mk-field input {
    min-height: 48px;
}

.mk-field select {
    min-height: 48px;
}

.mk-field textarea {
    min-height: 120px;
    resize: vertical;
}

.mk-field input::placeholder,
.mk-field textarea::placeholder {
    color: #8b95a1;
}

.mk-field input:hover,
.mk-field select:hover,
.mk-field textarea:hover {
    border-color: #aeb8c4;
}

.mk-field input:focus,
.mk-field select:focus,
.mk-field textarea:focus {
    border-color: var(--repair-primary);
    box-shadow:
        0 0 0 3px rgba(21, 112, 239, 0.12);
}

.mk-field small {
    display: block;
    color: var(--repair-text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.mk-repair-form__submit {
    padding: 25px;
    border: 1px solid var(--repair-border);
    border-radius: var(--repair-radius);
    background: var(--repair-muted);
}

.mk-repair-form__submit p {
    margin: 12px 0 0;
    color: var(--repair-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Honeypot
|--------------------------------------------------------------------------
*/

.mk-repair-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/*
|--------------------------------------------------------------------------
| Messages
|--------------------------------------------------------------------------
*/

.mk-repair-message {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 12px;
    line-height: 1.65;
}

.mk-repair-message strong {
    display: block;
    margin-bottom: 6px;
}

.mk-repair-message ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.mk-repair-message li + li {
    margin-top: 4px;
}

.mk-repair-message--error {
    border: 1px solid var(--repair-danger-border);
    background: var(--repair-danger-bg);
    color: var(--repair-danger);
}


/*
|--------------------------------------------------------------------------
| Booking Success
|--------------------------------------------------------------------------
*/

.mk-repair-success {
    padding: 36px;
    border: 1px solid var(--repair-success-border);
    border-radius: var(--repair-radius);
    background: var(--repair-success-bg);
}

.mk-repair-success__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--repair-success);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 900;
}

.mk-repair-success > .mk-repair-eyebrow {
    margin-bottom: 8px;
    color: var(--repair-success);
}

.mk-repair-success h2 {
    margin: 0 0 10px;
}

.mk-repair-success > p {
    max-width: 720px;
    margin: 0;
    color: var(--repair-text-muted);
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Booking Success Summary
|--------------------------------------------------------------------------
*/

.mk-repair-success__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 25px;
}

.mk-repair-success__summary > div {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(22, 128, 61, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.mk-repair-success__summary span {
    display: block;
    margin-bottom: 5px;
    color: var(--repair-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mk-repair-success__summary strong {
    display: block;
    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Repair References
|--------------------------------------------------------------------------
*/

.mk-repair-reference-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr);
    gap: 15px;
    margin: 25px 0;
}

.mk-repair-reference-grid > div,
.mk-repair-reference {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(22, 128, 61, 0.12);
    border-radius: 12px;
    background: #fff;
}

.mk-repair-reference-grid span,
.mk-repair-summary-grid span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--repair-text-muted);
}

.mk-repair-reference-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.mk-token {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    font-size: 0.92rem;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Security Note
|--------------------------------------------------------------------------
*/

.mk-repair-security-note {
    padding: 16px 18px;
    border: 1px solid rgba(21, 112, 239, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--repair-text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.mk-repair-security-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--repair-text);
}

.mk-repair-security-note p {
    margin: 0;
}

.mk-repair-security-note p + p {
    margin-top: 8px;
}


/*
|--------------------------------------------------------------------------
| Booking Success Actions
|--------------------------------------------------------------------------
*/

.mk-repair-success__track {
    margin-top: 20px;
}

.mk-repair-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}


/*
|--------------------------------------------------------------------------
| Tracking Panel
|--------------------------------------------------------------------------
*/

.mk-repair-track-panel {
    padding: 30px;
    border: 1px solid var(--repair-border);
    border-radius: var(--repair-radius);
    background: #fff;
    box-shadow: var(--repair-shadow);
}

.mk-repair-track-panel__header {
    max-width: 720px;
    margin-bottom: 24px;
}

.mk-repair-track-panel__header .mk-repair-eyebrow {
    color: var(--repair-primary);
}

.mk-repair-track-panel__header h2 {
    margin: 7px 0 10px;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.mk-repair-track-panel__header p {
    margin: 0;
    color: var(--repair-text-muted);
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Tracking Form
|--------------------------------------------------------------------------
*/

.mk-repair-track-form {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(280px, 2fr)
        auto;
    align-items: end;
    gap: 14px;
}

.mk-repair-track-form .mk-field {
    margin: 0;
}

.mk-repair-track-form__submit {
    display: flex;
    align-items: flex-end;
}

.mk-repair-track-form__submit .mk-button {
    min-height: 48px;
    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| Tracking Security Information
|--------------------------------------------------------------------------
*/

.mk-repair-track-security {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--repair-muted);
    color: var(--repair-text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.mk-repair-track-security strong {
    display: block;
    margin-bottom: 4px;
    color: var(--repair-text);
}

.mk-repair-track-security p {
    margin: 0;
}


/*
|--------------------------------------------------------------------------
| Tracking Result
|--------------------------------------------------------------------------
*/

.mk-repair-tracking-result {
    border: 1px solid var(--repair-border);
    border-radius: var(--repair-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--repair-shadow);
}

.mk-repair-tracking-result__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px;
    border-bottom: 1px solid var(--repair-border);
    background: var(--repair-muted);
}

.mk-repair-tracking-result__header .mk-repair-eyebrow {
    color: var(--repair-primary);
}

.mk-repair-tracking-result__header h2 {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Repair Status
|--------------------------------------------------------------------------
*/

.mk-repair-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e9f2ff;
    color: #0c5fc1;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.mk-repair-status--request,
.mk-repair-status--received,
.mk-repair-status--repair,
.mk-repair-status--assessment,
.mk-repair-status--testing {
    background: #e9f2ff;
    color: #0c5fc1;
}

.mk-repair-status--awaiting,
.mk-repair-status--approval {
    background: var(--repair-warning-bg);
    color: var(--repair-warning);
}

.mk-repair-status--ready,
.mk-repair-status--completed,
.mk-repair-status--collected {
    background: #e8f7ee;
    color: #16733b;
}

.mk-repair-status--cancelled,
.mk-repair-status--beyond-economic-repair {
    background: #fff0f0;
    color: #9c2424;
}


/*
|--------------------------------------------------------------------------
| Repair Summary
|--------------------------------------------------------------------------
*/

.mk-repair-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--repair-border);
}

.mk-repair-summary-grid > div {
    min-width: 0;
    padding: 20px;
    background: #fff;
}

.mk-repair-summary-grid strong {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Repair Progress Summary
|--------------------------------------------------------------------------
*/

.mk-repair-progress-summary {
    padding: 28px;
    border-top: 1px solid var(--repair-border);
}

.mk-repair-progress-summary h3 {
    margin: 0 0 18px;
}

.mk-repair-progress-summary .mk-repair-summary-grid {
    overflow: hidden;
    border: 1px solid var(--repair-border);
    border-radius: 12px;
}


/*
|--------------------------------------------------------------------------
| Reported Issue
|--------------------------------------------------------------------------
*/

.mk-repair-issue {
    padding: 28px;
    border-top: 1px solid var(--repair-border);
}

.mk-repair-issue h3 {
    margin: 0 0 12px;
}

.mk-repair-issue p {
    margin: 0;
    line-height: 1.75;
    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Repair History
|--------------------------------------------------------------------------
*/

.mk-repair-history {
    padding: 28px;
    border-top: 1px solid var(--repair-border);
}

.mk-repair-history h3 {
    margin: 0 0 22px;
}

.mk-repair-history__empty {
    margin: 0;
    color: var(--repair-text-muted);
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Timeline
|--------------------------------------------------------------------------
*/

.mk-repair-timeline {
    position: relative;
}

.mk-repair-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 15px;
    padding-bottom: 25px;
}

.mk-repair-timeline__item:last-child {
    padding-bottom: 0;
}

.mk-repair-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: -4px;
    left: 6px;
    width: 2px;
    background: var(--repair-border);
}

.mk-repair-timeline__marker {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: 5px;
    border: 3px solid var(--repair-primary);
    border-radius: 50%;
    background: #fff;
}

.mk-repair-timeline__content {
    min-width: 0;
}

.mk-repair-timeline__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.mk-repair-timeline__top strong {
    overflow-wrap: anywhere;
}

.mk-repair-timeline__top time {
    flex-shrink: 0;
    color: var(--repair-text-muted);
    font-size: 0.84rem;
}

.mk-repair-timeline__content p {
    margin: 8px 0 0;
    color: var(--repair-text-muted);
    line-height: 1.65;
    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Tracking Result Actions
|--------------------------------------------------------------------------
*/

.mk-repair-tracking-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 24px 28px 28px;
    border-top: 1px solid var(--repair-border);
    background: var(--repair-muted);
}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.mk-repair-empty {
    padding: 32px;
    border: 1px dashed #cbd2da;
    border-radius: var(--repair-radius);
    background: #fff;
}

.mk-repair-empty h2,
.mk-repair-empty h3 {
    margin-top: 0;
}

.mk-repair-empty p {
    margin-bottom: 0;
    color: var(--repair-text-muted);
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.repairs-page a:focus-visible,
.repairs-page button:focus-visible,
.repairs-page input:focus-visible,
.repairs-page select:focus-visible,
.repairs-page textarea:focus-visible {
    outline-offset: 3px;
}

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

    .repairs-page *,
    .repairs-page *::before,
    .repairs-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

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

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

    .mk-repair-track-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .mk-repair-track-form__submit {
        align-items: stretch;
    }

    .mk-repair-track-form__submit .mk-button {
        width: 100%;
    }

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

    .mk-repair-cta__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .mk-repair-cta__actions {
        width: 100%;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 680px) {

    .mk-repair-hero,
    .mk-repair-page-hero {
        padding: 52px 0;
    }

    .mk-repair-hero h1,
    .mk-repair-page-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .mk-repair-section {
        padding: 48px 0;
    }

    .mk-repair-process,
    .mk-repair-services,
    .mk-form-grid,
    .mk-repair-reference-grid,
    .mk-repair-success__summary,
    .mk-repair-summary-grid {
        grid-template-columns: 1fr;
    }

    .mk-repair-form fieldset {
        padding: 20px;
    }

    .mk-repair-form legend {
        font-size: 1.05rem;
    }

    .mk-repair-form__submit {
        padding: 20px;
    }

    .mk-repair-form__submit .mk-button {
        width: 100%;
    }

    .mk-repair-success {
        padding: 24px;
    }

    .mk-repair-success__track .mk-button {
        width: 100%;
    }

    .mk-repair-success__actions {
        flex-direction: column;
    }

    .mk-repair-success__actions .mk-button {
        width: 100%;
    }

    .mk-repair-track-panel {
        padding: 22px;
    }

    .mk-repair-tracking-result__header {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .mk-repair-status {
        align-self: flex-start;
    }

    .mk-repair-progress-summary,
    .mk-repair-issue,
    .mk-repair-history {
        padding: 22px;
    }

    .mk-repair-timeline__top {
        flex-direction: column;
        gap: 3px;
    }

    .mk-repair-timeline__top time {
        flex-shrink: 1;
    }

    .mk-repair-tracking-result__actions {
        flex-direction: column;
        padding: 20px 22px 22px;
    }

    .mk-repair-tracking-result__actions .mk-button {
        width: 100%;
    }

    .mk-repair-cta__inner {
        padding: 28px;
    }

    .mk-repair-cta__actions {
        flex-direction: column;
    }

    .mk-repair-cta__actions .mk-button {
        width: 100%;
    }
}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .mk-repair-hero,
    .mk-repair-page-hero {
        padding: 44px 0;
    }

    .mk-repair-form fieldset,
    .mk-repair-success,
    .mk-repair-track-panel {
        padding: 18px;
    }

    .mk-repair-reference-grid > div,
    .mk-repair-reference {
        padding: 15px;
    }

    .mk-token {
        font-size: 0.82rem;
    }

    .mk-repair-step,
    .mk-repair-service-card {
        padding: 22px;
    }
}