/* Offertgenerator: visuell förbättring utan ändrad affärslogik. */

/* På laptop ger den permanenta företagsmenyn tillräcklig vägledning. Den
   extra stegmenyn visas först när båda menyerna och formuläret ryms bra. */
@media (min-width: 1025px) and (max-width: 1399px) {
  body.company-arv-rail.quote-generator-page .quote-sidebar {
    display: none !important;
  }

  body.company-arv-rail.quote-generator-page .quote-sidebar.open,
  body.sidebar-open.company-arv-rail.quote-generator-page .quote-sidebar {
    display: flex !important;
    z-index: 1100;
  }

  body.company-arv-rail.quote-generator-page .quote-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body.company-arv-rail.quote-generator-page .floating-action-bar {
    left: var(--arv-rail-w, 16.5rem) !important;
  }
}

@media (min-width: 1400px) {
  body.company-arv-rail.quote-generator-page .quote-sidebar {
    width: 288px;
  }

  body.company-arv-rail.quote-generator-page .quote-main {
    margin-left: 288px !important;
    width: calc(100% - 288px);
  }

  body.company-arv-rail.quote-generator-page .floating-action-bar {
    left: calc(var(--arv-rail-w, 16.5rem) + 288px) !important;
  }

  body.company-arv-rail.quote-generator-page .sidebar-header {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  body.company-arv-rail.quote-generator-page .sidebar-steps {
    padding: .75rem 0;
  }

  body.company-arv-rail.quote-generator-page .step-item {
    gap: .75rem;
    padding: .8rem 1.25rem;
  }

  body.company-arv-rail.quote-generator-page .step-icon {
    width: 38px;
    height: 38px;
    font-size: .95rem;
  }

  body.company-arv-rail.quote-generator-page .step-title {
    font-size: .925rem;
  }

  body.company-arv-rail.quote-generator-page .sidebar-summary {
    padding: 1.25rem;
  }
}

body.quote-generator-page .steps-container {
  border: 1px solid #e6e9ed;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
}

body.quote-generator-page .step > h3 {
  letter-spacing: -.015em;
}

body.quote-generator-page .company-info-status {
  background: #f0f7f1 !important;
  border-color: #b7d2ba !important;
  color: #254b2c;
}

body.quote-generator-page input,
body.quote-generator-page select,
body.quote-generator-page textarea {
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body.quote-generator-page input:focus,
body.quote-generator-page select:focus,
body.quote-generator-page textarea:focus {
  border-color: #406b55 !important;
  box-shadow: 0 0 0 3px rgba(64, 107, 85, .14) !important;
  outline: none !important;
}

body.quote-generator-page .preview-fab {
  width: 48px;
  height: 48px;
  right: 1.25rem;
  bottom: 6.25rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
}

@media (max-width: 1024px) {
  body.quote-generator-page .quote-wrapper {
    padding-top: 18px !important;
  }

  body.quote-generator-page .quote-main {
    padding-top: .75rem;
  }

  body.quote-generator-page .steps-container {
    overflow-x: visible;
  }

  body.quote-generator-page .preview-fab {
    left: auto !important;
    width: 44px;
    height: 44px;
    right: .75rem !important;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) {
  body.quote-generator-page .quote-wrapper {
    padding-top: 10px !important;
  }

  body.quote-generator-page .quote-main {
    padding: .5rem .4rem calc(205px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.quote-generator-page .steps-container {
    padding: .8rem !important;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
  }

  body.quote-generator-page .step > h3 {
    font-size: 1.08rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.35;
  }

  body.quote-generator-page .company-info-status {
    padding: .8rem !important;
    font-size: .88rem;
    line-height: 1.45;
  }

  body.quote-generator-page .form-group {
    margin-bottom: 1rem !important;
  }

  body.quote-generator-page .form-group label {
    margin-bottom: .42rem;
    font-size: .84rem;
  }

  body.quote-generator-page input,
  body.quote-generator-page select,
  body.quote-generator-page textarea {
    min-height: 48px;
  }

  body.quote-generator-page .floating-action-bar {
    padding: .45rem .5rem !important;
  }

  body.quote-generator-page .fab-center {
    min-width: 88px;
    padding: .45rem .65rem;
  }

  body.quote-generator-page .fab-step {
    font-size: .76rem;
  }

  body.quote-generator-page #fabTotal {
    font-size: .94rem !important;
  }

  body.quote-generator-page .fab-btn {
    min-width: 48px;
    min-height: 48px;
    padding: .72rem !important;
    border-radius: 12px;
  }

  body.quote-generator-page .preview-fab {
    left: auto !important;
    width: 42px;
    height: 42px;
    right: .75rem !important;
    bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  }

  body.quote-generator-page #quoteResumePromptModal .modal-content,
  body.quote-generator-page #quoteResumePromptModal .modal-container {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 380px) {
  body.quote-generator-page .fab-center {
    min-width: 80px;
    padding-inline: .45rem;
  }

  body.quote-generator-page .fab-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Artikelrubriken får inte täcka första offertraden när sidan återställer scrollposition. */
body.quote-generator-page .articles-header-sticky {
  position: relative !important;
  top: auto !important;
}

body.quote-generator-page .articles-header-sticky-sentinel {
  display: none !important;
}

body.quote-generator-page .preview-cover-section {
  margin: 0 0 1.25rem;
}

body.quote-generator-page .preview-cover-section img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  background: #f8fafc;
}

body.quote-generator-page .image-preview-item .remove-btn:focus-visible,
body.quote-generator-page .cover-image-change-btn:focus-visible {
  outline: 2px solid #334155;
  outline-offset: 2px;
}

body.quote-generator-page .image-preview-item.is-missing img {
  display: none;
}

body.quote-generator-page .image-preview-item.is-missing::before {
  content: "Omslagsbilden kunde inte visas";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 1rem;
  color: #64748b;
  background: #f8fafc;
  text-align: center;
}