/* V90: a simpler, overflow-safe customer journey on small screens. */

@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
  }

  a,
  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .device-shell,
  .v58-shell,
  .booking-page .container {
    width: min(100% - 28px, 620px) !important;
  }
}

/* Startsidan: price/model search first, then booking, with fewer choices. */
@media (max-width: 700px) {
  .home-page .v80-hero-grid {
    padding: 24px 0 28px;
  }

  .home-page .v80-review-badge {
    display: flex;
  }

  .home-page .v80-hero h1 {
    max-width: 360px;
    margin-top: 11px;
    font-size: clamp(2.3rem, 11vw, 3rem);
    line-height: 1;
  }

  .home-page .v80-lead {
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .home-page .v80-main-actions {
    margin-top: 17px;
  }

  .home-page .v80-action {
    min-height: 60px;
  }

  .home-page .v80-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .v80-secondary-actions a {
    min-width: 0;
    line-height: 1.25;
  }

  .home-page .v80-trust-chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    font-size: 0.66rem;
  }

  .home-page .v80-trust-chips span:nth-child(n) {
    display: inline-flex;
  }

  .home-page .v80-search-section {
    padding: 31px 0 36px;
  }

  .home-page .v80-search-intro h2 {
    max-width: 330px;
    font-size: 2rem;
    line-height: 1.05;
  }

  .home-page .v80-search-intro > span {
    font-size: 0.82rem;
  }

  .home-page .v80-repair-search {
    padding: 14px;
  }

  .home-page .repair-search-help {
    font-size: 0.68rem;
  }

  .home-page .v58-section {
    padding: 54px 0;
  }
}

@media (max-width: 420px) {
  .home-page .v80-repair-search .repair-search-field {
    padding: 7px;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 5px;
  }

  .home-page .v80-repair-search .repair-search-field button {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .home-page .repair-search-results {
    position: static;
    margin-top: 8px;
    border-radius: 14px;
  }
}

/* Reparationshubben: one device chooser, then problem chooser. */
@media (max-width: 620px) {
  .repair-page {
    padding-bottom: 82px;
  }

  .repair-page .repair-hero-grid {
    padding: 26px 0 30px;
    gap: 24px;
  }

  .repair-page .device-breadcrumbs {
    padding-top: 13px;
  }

  .repair-page .repair-hero h1 {
    font-size: clamp(2.15rem, 10vw, 2.75rem);
    line-height: 1.02;
  }

  .repair-page .device-lead {
    margin-top: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .repair-page .device-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .repair-page .device-button {
    min-width: 0;
    min-height: 49px;
    padding: 0 12px;
    text-align: center;
  }

  .repair-page .device-trust,
  .repair-page .device-facts,
  .repair-page #enheter {
    display: none;
  }

  .repair-page .repair-selector {
    padding: 14px;
    border-radius: 20px;
  }

  .repair-page .repair-selector-head {
    margin-bottom: 8px;
  }

  .repair-page .repair-selector > a {
    min-height: 53px;
    padding: 8px 2px;
  }

  .repair-page .repair-selector-footer {
    margin-top: 8px;
    padding: 13px;
  }

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

  .repair-page .device-heading {
    margin-bottom: 22px;
    gap: 10px;
  }

  .repair-page .device-heading h2 {
    font-size: 2rem;
  }

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

  .repair-page .repair-issue {
    min-width: 0;
    min-height: 138px;
    padding: 15px;
  }

  .repair-page .repair-issue-icon {
    width: 36px;
    height: 36px;
  }

  .repair-page .repair-issue-top > span:last-child,
  .repair-page .repair-issue p {
    display: none;
  }

  .repair-page .repair-issue h3 {
    margin: 17px 0 0;
    font-size: 1rem;
  }

  .repair-page .repair-issue > span {
    padding-top: 11px;
    font-size: 0.64rem;
  }

  .customer-mobile-actions {
    position: fixed;
    z-index: 90;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    left: 10px;
    padding: 5px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 5px;
    border: 1px solid rgba(20, 20, 24, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
  }

  .customer-mobile-actions a {
    min-height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: #151518;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
  }

  .customer-mobile-actions a:last-child {
    background: #e7192a;
  }

  .customer-mobile-actions a:focus-visible,
  .booking-mobile-help a:focus-visible {
    outline: 3px solid rgba(231, 25, 42, 0.35);
    outline-offset: 2px;
  }
}

@media (min-width: 621px) {
  .customer-mobile-actions {
    display: none;
  }
}

/* Booking: shorter, calmer, and safe at 320–430 px. */
@media (max-width: 680px) {
  .booking-page .booking-hero-grid {
    padding: 22px 0 23px !important;
  }

  .booking-page .booking-hero-copy h1 {
    font-size: clamp(2rem, 9vw, 2.4rem) !important;
  }

  .booking-page .booking-hero-copy p:not(.eyebrow) {
    font-size: 0.86rem !important;
  }

  .booking-page .booking-layout {
    padding: 12px 12px 38px !important;
  }

  .booking-page .booking-form {
    padding: 16px 14px 24px !important;
    border-radius: 18px !important;
  }

  .booking-page .form-section-head {
    display: none;
  }

  .booking-page .mobile-booking-start {
    margin-bottom: 18px;
    padding: 14px;
  }

  .booking-page .mobile-booking-progress {
    gap: 4px;
  }

  .booking-page .option-grid,
  .booking-page .option-grid.service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .booking-page .option-card {
    min-height: 72px !important;
    padding: 12px 10px 12px 38px !important;
  }

  .booking-page .option-card::before {
    left: 11px !important;
    width: 16px !important;
    height: 16px !important;
  }

  .booking-page .option-title {
    font-size: 0.84rem;
  }

  .booking-page .option-text {
    display: none;
  }

  .booking-page .issue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .booking-page .issue-grid label {
    min-width: 0;
    padding: 9px 10px !important;
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .booking-page .field input,
  .booking-page .field select,
  .booking-page .field textarea {
    width: 100%;
    max-width: 100%;
    font-size: 16px !important;
  }

  .booking-page .consent-row {
    align-items: flex-start;
    line-height: 1.5;
  }

  .booking-mobile-help {
    width: min(100% - 28px, 620px);
    margin: 0 auto 40px;
    padding: 17px;
    display: grid;
    gap: 10px;
    border: 1px solid #e2ddd8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20, 18, 17, 0.07);
  }

  .booking-mobile-help strong {
    color: #171719;
    font-size: 1rem;
  }

  .booking-mobile-help span {
    color: #6f6964;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .booking-mobile-help div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .booking-mobile-help a {
    min-height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: #171719;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
  }

  .booking-mobile-help a:first-child {
    background: #e7192a;
  }

  .booking-mobile-help a:focus-visible {
    outline: 3px solid rgba(231, 25, 42, 0.35);
    outline-offset: 2px;
  }
}

@media (min-width: 681px) {
  .booking-mobile-help {
    display: none;
  }
}

@media (max-width: 350px) {
  .booking-page .option-grid,
  .booking-page .option-grid.service-grid,
  .booking-page .issue-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-mobile-actions,
  .nav-quick-booking {
    transition: none !important;
  }
}