/* ================================================================
   Service Pages (Samtal / Intervju / Feedback) — css-designprinciper.md scope
   ================================================================
   Skuggar shared/css/variables.css inom body[data-tool="samtal"],
   body[data-tool="intervju"] och body[data-tool="feedback"] utan
   att paverka andra sidor.

   Spec: projects/prototyp/docs/css-designprinciper.md
   Princip: specen styr, sidorna foljer.

   Etapp 1 (denna fil):
   - Lager 1: variabel-skuggning (palett + font-weight)
   - Lager 2: element-defaults (a, input, textarea)
   - Lager 3: rubriker (H1/H2), Body 1, muted
   - Hero-redesign (.service-hero — speglar upptack-hero monstret)
   - Alla border-lefts borttagna
   - Komponenter: pills, btn, pending-card, booking-note,
                  reschedule-confirm, error-banners, order-summary

   Filen ar laddad fran:
   - /services/samtal/index.html
   - /services/intervju/index.html
   - /services/feedback/index.html
   ================================================================ */

/* ----------------------------------------------------------------
   LAGER 1 — Variabel-skuggning
   ---------------------------------------------------------------- */
body[data-tool="samtal"],
body[data-tool="intervju"],
body[data-tool="feedback"] {
  --color-primary:          #00A09B;
  --color-primary-rgb:      0, 160, 155;
  --color-primary-hover:    #008C87;
  --color-secondary-teal:   #00A09B;

  --color-text-primary:     #262626;
  --color-text-heading:     #262626;
  --color-text-secondary:   #959E9F;
  --color-text-muted:       #959E9F;

  --font-weight-bold:       800;
}

/* ----------------------------------------------------------------
   LAGER 2 — Element-defaults
   ---------------------------------------------------------------- */
body[data-tool="samtal"] a:not([class]),
body[data-tool="intervju"] a:not([class]),
body[data-tool="feedback"] a:not([class]) {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #00A09B;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] a:not([class]),
  body[data-tool="intervju"] a:not([class]),
  body[data-tool="feedback"] a:not([class]) {
    font-size: 12px;
  }
}

body[data-tool="samtal"] input[type="text"],
body[data-tool="samtal"] input[type="tel"],
body[data-tool="samtal"] input[type="email"],
body[data-tool="samtal"] textarea,
body[data-tool="intervju"] input[type="text"],
body[data-tool="intervju"] input[type="tel"],
body[data-tool="intervju"] input[type="email"],
body[data-tool="intervju"] textarea,
body[data-tool="feedback"] input[type="text"],
body[data-tool="feedback"] input[type="tel"],
body[data-tool="feedback"] input[type="email"],
body[data-tool="feedback"] textarea {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
}

/* ================================================================
   HERO — Full-width teal section
   Ersatter tidigare .tool-intro.accent-left
   Speglar upptack-hero med solid #00A09B + vit text.
   Kompaktare padding an upptack (intro till flode, inte
   destinationsinnehall).
   ================================================================ */
body[data-tool="samtal"] .service-hero,
body[data-tool="intervju"] .service-hero,
body[data-tool="feedback"] .service-hero {
  background: #00A09B;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + var(--space-1));
  width: 100%;
}

body[data-tool="samtal"] .service-hero-inner,
body[data-tool="intervju"] .service-hero-inner,
body[data-tool="feedback"] .service-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

body[data-tool="samtal"] .service-hero-title,
body[data-tool="intervju"] .service-hero-title,
body[data-tool="feedback"] .service-hero-title {
  font-family: 'Rubik', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0 0 var(--space-2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-tool="samtal"] .service-hero-tagline,
body[data-tool="intervju"] .service-hero-tagline,
body[data-tool="feedback"] .service-hero-tagline {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.57;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin: 0 auto var(--space-3);
}

body[data-tool="samtal"] .service-hero-meta,
body[data-tool="intervju"] .service-hero-meta,
body[data-tool="feedback"] .service-hero-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0;
}

body[data-tool="samtal"] .service-hero-meta .service-meta-sep,
body[data-tool="intervju"] .service-hero-meta .service-meta-sep,
body[data-tool="feedback"] .service-hero-meta .service-meta-sep {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

body[data-tool="samtal"] .service-hero-meta .service-price,
body[data-tool="intervju"] .service-hero-meta .service-price,
body[data-tool="feedback"] .service-hero-meta .service-price {
  font-weight: 500;
  color: #FFFFFF;
}

/* ?-knappen flyttad in i hero — vit outline-cirkel */
body[data-tool="samtal"] .service-hero .tool-help-btn,
body[data-tool="intervju"] .service-hero .tool-help-btn,
body[data-tool="feedback"] .service-hero .tool-help-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin: 0;
  position: relative;
  top: -10px;
  transition: border-color 0.15s, background 0.15s;
}

body[data-tool="samtal"] .service-hero .tool-help-btn:hover,
body[data-tool="intervju"] .service-hero .tool-help-btn:hover,
body[data-tool="feedback"] .service-hero .tool-help-btn:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .service-hero,
  body[data-tool="intervju"] .service-hero,
  body[data-tool="feedback"] .service-hero {
    padding: var(--space-5) var(--space-3);
  }

  body[data-tool="samtal"] .service-hero-title,
  body[data-tool="intervju"] .service-hero-title,
  body[data-tool="feedback"] .service-hero-title {
    font-size: 30px;
    gap: 8px;
  }

  body[data-tool="samtal"] .service-hero-tagline,
  body[data-tool="intervju"] .service-hero-tagline,
  body[data-tool="feedback"] .service-hero-tagline {
    font-size: 15px;
  }

  body[data-tool="samtal"] .service-hero-meta,
  body[data-tool="intervju"] .service-hero-meta,
  body[data-tool="feedback"] .service-hero-meta {
    flex-wrap: wrap;
  }

  body[data-tool="samtal"] .service-hero .tool-help-btn,
  body[data-tool="intervju"] .service-hero .tool-help-btn,
  body[data-tool="feedback"] .service-hero .tool-help-btn {
    width: 22px;
    height: 22px;
    font-size: 12px;
    top: -4px;
  }
}

/* ================================================================
   LAGER 3 — Rubriker och Body 1 i flodet
   ================================================================ */

/* Intro overlay */
body[data-tool="samtal"] .intro-overlay-title,
body[data-tool="intervju"] .intro-overlay-title,
body[data-tool="feedback"] .intro-overlay-title {
  font-family: 'Rubik', sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  color: #262626;
}

body[data-tool="samtal"] .intro-overlay-tagline,
body[data-tool="intervju"] .intro-overlay-tagline,
body[data-tool="feedback"] .intro-overlay-tagline {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.57;
  color: #959E9F;
}

body[data-tool="samtal"] .intro-overlay-body,
body[data-tool="intervju"] .intro-overlay-body,
body[data-tool="feedback"] .intro-overlay-body,
body[data-tool="samtal"] .intro-overlay-body p,
body[data-tool="intervju"] .intro-overlay-body p,
body[data-tool="feedback"] .intro-overlay-body p {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.57;
  color: #262626;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .intro-overlay-title,
  body[data-tool="intervju"] .intro-overlay-title,
  body[data-tool="feedback"] .intro-overlay-title {
    font-size: 20px;
  }
  body[data-tool="samtal"] .intro-overlay-tagline,
  body[data-tool="intervju"] .intro-overlay-tagline,
  body[data-tool="feedback"] .intro-overlay-tagline,
  body[data-tool="samtal"] .intro-overlay-body,
  body[data-tool="intervju"] .intro-overlay-body,
  body[data-tool="feedback"] .intro-overlay-body,
  body[data-tool="samtal"] .intro-overlay-body p,
  body[data-tool="intervju"] .intro-overlay-body p,
  body[data-tool="feedback"] .intro-overlay-body p {
    font-size: 15px;
  }
}

/* Step-collapse title — GM3 H2 (28/20 500 #262626) */
body[data-tool="samtal"] .step-collapse-title,
body[data-tool="intervju"] .step-collapse-title,
body[data-tool="feedback"] .step-collapse-title {
  font-family: 'Rubik', sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  color: #262626;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .step-collapse-title,
  body[data-tool="intervju"] .step-collapse-title,
  body[data-tool="feedback"] .step-collapse-title {
    font-size: 20px;
  }
}

/* Step-collapse summary — Body 1 muted */
body[data-tool="samtal"] .step-collapse-summary,
body[data-tool="intervju"] .step-collapse-summary,
body[data-tool="feedback"] .step-collapse-summary {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #959E9F;
  line-height: 1.57;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .step-collapse-summary,
  body[data-tool="intervju"] .step-collapse-summary,
  body[data-tool="feedback"] .step-collapse-summary {
    font-size: 15px;
  }
}

/* Form-field labels (falt-rubrik-monstret fran CV-studion/intervjutraning) */
body[data-tool="samtal"] .form-field label,
body[data-tool="intervju"] .form-field label,
body[data-tool="feedback"] .form-field label,
body[data-tool="samtal"] .discount-section label,
body[data-tool="intervju"] .discount-section label,
body[data-tool="feedback"] .discount-section label,
body[data-tool="samtal"] .stripe-card-label,
body[data-tool="intervju"] .stripe-card-label,
body[data-tool="feedback"] .stripe-card-label {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
  line-height: 1.4;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .form-field label,
  body[data-tool="intervju"] .form-field label,
  body[data-tool="feedback"] .form-field label,
  body[data-tool="samtal"] .discount-section label,
  body[data-tool="intervju"] .discount-section label,
  body[data-tool="feedback"] .discount-section label,
  body[data-tool="samtal"] .stripe-card-label,
  body[data-tool="intervju"] .stripe-card-label,
  body[data-tool="feedback"] .stripe-card-label {
    font-size: 15px;
  }
}

/* Field help (under label) — 14 muted */
body[data-tool="samtal"] .form-field .field-help,
body[data-tool="intervju"] .form-field .field-help,
body[data-tool="feedback"] .form-field .field-help,
body[data-tool="samtal"] .input-help,
body[data-tool="intervju"] .input-help,
body[data-tool="feedback"] .input-help {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
  line-height: 1.57;
}

/* Day-group label (veckodag i tidsvaljaren) — Body 1 medium */
body[data-tool="samtal"] .day-group-label,
body[data-tool="intervju"] .day-group-label,
body[data-tool="feedback"] .day-group-label {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  line-height: 1.3;
}

/* Slot-btn typografi (rektangular lista — etapp 2 polishar hover/selected) */
body[data-tool="samtal"] .slot-btn,
body[data-tool="intervju"] .slot-btn,
body[data-tool="feedback"] .slot-btn {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .slot-btn,
  body[data-tool="intervju"] .slot-btn,
  body[data-tool="feedback"] .slot-btn {
    font-size: 15px;
  }
}

body[data-tool="samtal"] .slot-time,
body[data-tool="intervju"] .slot-time,
body[data-tool="feedback"] .slot-time {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #959E9F;
}

/* Week-nav label */
body[data-tool="samtal"] .week-nav-label,
body[data-tool="intervju"] .week-nav-label,
body[data-tool="feedback"] .week-nav-label {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

/* ================================================================
   KNAPPAR — GM3-defaults
   ================================================================ */

body[data-tool="samtal"] .btn-primary,
body[data-tool="intervju"] .btn-primary,
body[data-tool="feedback"] .btn-primary {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: #00A09B;
  color: #FFFFFF;
  border: none;
  border-radius: 32px;
  padding: 10px 22px;
}

body[data-tool="samtal"] .btn-primary:hover,
body[data-tool="intervju"] .btn-primary:hover,
body[data-tool="feedback"] .btn-primary:hover {
  background: #008C87;
}

body[data-tool="samtal"] .btn-secondary,
body[data-tool="intervju"] .btn-secondary,
body[data-tool="feedback"] .btn-secondary {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: #FFFFFF;
  color: #00A09B;
  border: 1px solid #00A09B;
  border-radius: 32px;
  padding: 10px 22px;
}

body[data-tool="samtal"] .btn-secondary:hover,
body[data-tool="intervju"] .btn-secondary:hover,
body[data-tool="feedback"] .btn-secondary:hover {
  background: rgba(0, 160, 155, 0.06);
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .btn-primary,
  body[data-tool="intervju"] .btn-primary,
  body[data-tool="feedback"] .btn-primary,
  body[data-tool="samtal"] .btn-secondary,
  body[data-tool="intervju"] .btn-secondary,
  body[data-tool="feedback"] .btn-secondary {
    font-size: 12px;
  }
}

/* Discount-btn — sekundar stil */
body[data-tool="samtal"] .discount-btn,
body[data-tool="intervju"] .discount-btn,
body[data-tool="feedback"] .discount-btn {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: #FFFFFF;
  color: #00A09B;
  border: 1px solid #00A09B;
  border-radius: 32px;
  padding: 10px 22px;
}

body[data-tool="samtal"] .discount-btn:hover,
body[data-tool="intervju"] .discount-btn:hover,
body[data-tool="feedback"] .discount-btn:hover {
  background: rgba(0, 160, 155, 0.06);
  color: #00A09B;
  border-color: #00A09B;
}

/* ================================================================
   Service-link ("Visa tidigare") — mappad mot .tool-history-toggle
   Samma design som tool-history-toggle i verktygen (profilanalys m.fl.):
   - Rubik 14 secondary, hover -> primary (inte teal)
   - Pilen 9px i 16x16 box, teal med opacity 0.6 -> 1 vid hover
   - .open klassen styr 90-grader rotation
   - Badge: bg neutral, 11 medium, radius 10
   ================================================ */
body[data-tool="samtal"] .service-link,
body[data-tool="intervju"] .service-link,
body[data-tool="feedback"] .service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: var(--space-1) 0;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
  cursor: pointer;
  transition: color 0.15s;
}

body[data-tool="samtal"] .service-link:hover,
body[data-tool="intervju"] .service-link:hover,
body[data-tool="feedback"] .service-link:hover {
  color: #262626;
}

body[data-tool="samtal"] .service-link-arrow,
body[data-tool="intervju"] .service-link-arrow,
body[data-tool="feedback"] .service-link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 9px;
  color: #00A09B;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.15s;
}

body[data-tool="samtal"] .service-link:hover .service-link-arrow,
body[data-tool="intervju"] .service-link:hover .service-link-arrow,
body[data-tool="feedback"] .service-link:hover .service-link-arrow {
  opacity: 1;
}

body[data-tool="samtal"] .service-link.open .service-link-arrow,
body[data-tool="intervju"] .service-link.open .service-link-arrow,
body[data-tool="feedback"] .service-link.open .service-link-arrow {
  transform: rotate(90deg);
}

body[data-tool="samtal"] .service-link-badge,
body[data-tool="intervju"] .service-link-badge,
body[data-tool="feedback"] .service-link-badge {
  background: rgba(0, 0, 0, 0.06);
  color: #959E9F;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .service-link,
  body[data-tool="intervju"] .service-link,
  body[data-tool="feedback"] .service-link {
    font-size: 12px;
  }
}

/* ================================================================
   PILLS — Svenska/English/Telefon/Video
   GM3 Sekundar (default) → Primar (active)
   ================================================================ */
body[data-tool="samtal"] .pill-btn,
body[data-tool="intervju"] .pill-btn,
body[data-tool="feedback"] .pill-btn {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: #FFFFFF;
  color: #00A09B;
  border: 1px solid #00A09B;
  border-radius: 32px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body[data-tool="samtal"] .pill-btn:hover,
body[data-tool="intervju"] .pill-btn:hover,
body[data-tool="feedback"] .pill-btn:hover {
  background: rgba(0, 160, 155, 0.06);
}

body[data-tool="samtal"] .pill-btn.active,
body[data-tool="intervju"] .pill-btn.active,
body[data-tool="feedback"] .pill-btn.active {
  background: #00A09B;
  color: #FFFFFF;
  border-color: #00A09B;
}

body[data-tool="samtal"] .pill-btn.active:hover,
body[data-tool="intervju"] .pill-btn.active:hover,
body[data-tool="feedback"] .pill-btn.active:hover {
  background: #008C87;
  border-color: #008C87;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .pill-btn,
  body[data-tool="intervju"] .pill-btn,
  body[data-tool="feedback"] .pill-btn {
    font-size: 12px;
  }
}

/* ================================================================
   PENDING-BOOKING-CARD — soft-teal utan border-left
   Tillstand via bg-tint, inte border-color (GM3-princip)
   ================================================================ */
body[data-tool="samtal"] .pending-booking-card,
body[data-tool="intervju"] .pending-booking-card,
body[data-tool="feedback"] .pending-booking-card {
  background: rgba(0, 160, 155, 0.06);
  border: 1px solid rgba(0, 160, 155, 0.20);
  border-left: 1px solid rgba(0, 160, 155, 0.20);
  border-radius: 10px;
}

body[data-tool="samtal"] .pending-booking-status,
body[data-tool="intervju"] .pending-booking-status,
body[data-tool="feedback"] .pending-booking-status {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #00A09B;
  letter-spacing: 0.04em;
}

body[data-tool="samtal"] .pending-booking-time,
body[data-tool="intervju"] .pending-booking-time,
body[data-tool="feedback"] .pending-booking-time {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #262626;
  line-height: 1.3;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .pending-booking-time,
  body[data-tool="intervju"] .pending-booking-time,
  body[data-tool="feedback"] .pending-booking-time {
    font-size: 14px;
  }
}

body[data-tool="samtal"] .pending-booking-contact,
body[data-tool="intervju"] .pending-booking-contact,
body[data-tool="feedback"] .pending-booking-contact {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .pending-booking-contact,
  body[data-tool="intervju"] .pending-booking-contact,
  body[data-tool="feedback"] .pending-booking-contact {
    font-size: 15px;
  }
}

body[data-tool="samtal"] .pending-booking-toggle,
body[data-tool="intervju"] .pending-booking-toggle,
body[data-tool="feedback"] .pending-booking-toggle {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #00A09B;
}

body[data-tool="samtal"] .pending-booking-note,
body[data-tool="intervju"] .pending-booking-note,
body[data-tool="feedback"] .pending-booking-note {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #262626;
  line-height: 1.57;
}

/* ================================================================
   BOOKING-NOTE — soft-teal utan border-left
   ================================================================ */
body[data-tool="samtal"] .booking-note,
body[data-tool="intervju"] .booking-note,
body[data-tool="feedback"] .booking-note {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: #262626;
  background: rgba(0, 160, 155, 0.06);
  border: none;
  border-left: none;
  border-radius: 7.5px;
  padding: 12px 18px;
}

/* ================================================================
   RESCHEDULE-CONFIRM — soft-teal utan border-left
   (Mappar mot GM3 .confirm-dialog men utan border-left per beslut)
   ================================================================ */
body[data-tool="samtal"] .reschedule-confirm,
body[data-tool="intervju"] .reschedule-confirm,
body[data-tool="feedback"] .reschedule-confirm {
  background: rgba(0, 160, 155, 0.06);
  border: none;
  border-radius: 7.5px;
  box-shadow: none;
}

body[data-tool="samtal"] .reschedule-confirm-title,
body[data-tool="intervju"] .reschedule-confirm-title,
body[data-tool="feedback"] .reschedule-confirm-title {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

body[data-tool="samtal"] .reschedule-confirm-times,
body[data-tool="intervju"] .reschedule-confirm-times,
body[data-tool="feedback"] .reschedule-confirm-times {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 1.57;
  color: #262626;
}

body[data-tool="samtal"] .reschedule-confirm-time-label,
body[data-tool="intervju"] .reschedule-confirm-time-label,
body[data-tool="feedback"] .reschedule-confirm-time-label {
  color: #959E9F;
}

body[data-tool="samtal"] .reschedule-confirm-time-row--new .reschedule-confirm-time-value,
body[data-tool="intervju"] .reschedule-confirm-time-row--new .reschedule-confirm-time-value,
body[data-tool="feedback"] .reschedule-confirm-time-row--new .reschedule-confirm-time-value {
  color: #00A09B;
  font-weight: 500;
}

body[data-tool="samtal"] .reschedule-confirm-error,
body[data-tool="intervju"] .reschedule-confirm-error,
body[data-tool="feedback"] .reschedule-confirm-error {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
  border: none;
  border-radius: 7.5px;
}

/* ================================================================
   ERROR-BANNERS — soft-red utan border-left
   ================================================================ */
body[data-tool="samtal"] .booking-init-error,
body[data-tool="intervju"] .booking-init-error,
body[data-tool="feedback"] .booking-init-error,
body[data-tool="samtal"] .booking-submit-error,
body[data-tool="intervju"] .booking-submit-error,
body[data-tool="feedback"] .booking-submit-error {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
  border: none;
  border-radius: 7.5px;
}
/* Ad-link validation error — same style as booking-submit-error */
body[data-tool="samtal"] .ad-link-error,
body[data-tool="intervju"] .ad-link-error,
body[data-tool="feedback"] .ad-link-error {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #EF4444;
  margin: var(--space-1) 0 0;
  line-height: 1.5;
}

body[data-tool="samtal"] .cancel-notice,
body[data-tool="intervju"] .cancel-notice,
body[data-tool="feedback"] .cancel-notice {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #262626;
  background: rgba(0, 160, 155, 0.06);
  border: none;
  border-radius: 7.5px;
}

body[data-tool="samtal"] .reschedule-success,
body[data-tool="intervju"] .reschedule-success,
body[data-tool="feedback"] .reschedule-success {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

/* ================================================
   PROGRESS — dots geometriskt centrerade, knapp till höger,
   båda på samma vertikala mittlinje.

   Shared .step-continue är flex med justify-content: flex-end
   → dotsen hamnar i utrymmet till vänster om knappen (inte i
   geometriska mitten). Första försöket (absolute + top:50%)
   centrerade x-led ratt, men y-led hamnade dotsen 5–6px ovanför
   knappens center eftersom .step-continue har padding-top men
   ingen padding-bottom.

   Robust lösning: CSS Grid med tre kolumner (1fr auto 1fr).
   Mittenkolumnen reserverar plats för progress, höger 1fr blir
   spegelbild av vänster 1fr — progress hamnar i geometriska
   mitten. Knappen placeras i kol 3 med justify-self: end. Båda
   på samma rad, samma vertikal-center via align-items: center.
   ================================================================ */
body[data-tool="samtal"] .step-continue,
body[data-tool="intervju"] .step-continue,
body[data-tool="feedback"] .step-continue {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

body[data-tool="samtal"] .step-continue > .progress-bar,
body[data-tool="intervju"] .step-continue > .progress-bar,
body[data-tool="feedback"] .step-continue > .progress-bar {
  grid-column: 2;
  justify-self: center;
  flex: none;
  width: auto;
  padding: 0;
  margin: 0;
}

body[data-tool="samtal"] .step-continue > .btn,
body[data-tool="intervju"] .step-continue > .btn,
body[data-tool="feedback"] .step-continue > .btn {
  grid-column: 3;
  justify-self: end;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .step-continue,
  body[data-tool="intervju"] .step-continue,
  body[data-tool="feedback"] .step-continue {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body[data-tool="samtal"] .step-continue > .progress-bar,
  body[data-tool="intervju"] .step-continue > .progress-bar,
  body[data-tool="feedback"] .step-continue > .progress-bar {
    flex: 1 1 100%;
    order: -1;
    padding: 0 0 var(--space-2) 0;
    justify-self: auto;
  }

  body[data-tool="samtal"] .step-continue > .btn,
  body[data-tool="intervju"] .step-continue > .btn,
  body[data-tool="feedback"] .step-continue > .btn {
    justify-self: auto;
  }
}

/* ================================================================
   PENDING-CARD HEADER — titel vänster, status-pill höger
   ----------------------------------------------------------------
   Speglar mina-arenden:s .arende-body-header (flex space-between).
   .pending-booking-time (titeln) i vänster, .arende-status (pill)
   i höger. Titel-radens font (20/14 500) behålls; pillen
   align-items: flex-start så den sitter i toppär när titeln är
   tvåradig.
   ================================================ */
body[data-tool="samtal"] .pending-booking-header,
body[data-tool="intervju"] .pending-booking-header,
body[data-tool="feedback"] .pending-booking-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 4px;
}

body[data-tool="samtal"] .pending-booking-header .pending-booking-time,
body[data-tool="intervju"] .pending-booking-header .pending-booking-time,
body[data-tool="feedback"] .pending-booking-header .pending-booking-time {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

/* ================================================
   ARENDE-STATUS-PILL i pending-card (mappar mot mina-arenden)
   ----------------------------------------------------------------
   Samma kompakta pill som mina-arenden visar i listvyn. Default-
   tillstand far bg-tint + status-farg. Ej-betald-varianten ar
   den ENDA som anvander mark frame ist allet for fyllning —
   tillstandet kraver atgard, sa det ska sticka ut.
   ================================================================ */
body[data-tool="samtal"] .pending-booking-card .arende-status,
body[data-tool="intervju"] .pending-booking-card .arende-status,
body[data-tool="feedback"] .pending-booking-card .arende-status {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  gap: 0;
  padding: 4px 12px;
  border-radius: 32px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.3;
  background: rgba(0, 0, 0, 0.04);
  color: #262626;
  margin-bottom: 0;
}

body[data-tool="samtal"] .pending-booking-card .arende-status--pagar,
body[data-tool="intervju"] .pending-booking-card .arende-status--pagar,
body[data-tool="feedback"] .pending-booking-card .arende-status--pagar,
body[data-tool="samtal"] .pending-booking-card .arende-status--bokat,
body[data-tool="intervju"] .pending-booking-card .arende-status--bokat,
body[data-tool="feedback"] .pending-booking-card .arende-status--bokat {
  background: rgba(21, 145, 160, 0.10);
  color: #1591A0;
}

body[data-tool="samtal"] .pending-booking-card .arende-status--klar,
body[data-tool="intervju"] .pending-booking-card .arende-status--klar,
body[data-tool="feedback"] .pending-booking-card .arende-status--klar,
body[data-tool="samtal"] .pending-booking-card .arende-status--genomfort,
body[data-tool="intervju"] .pending-booking-card .arende-status--genomfort,
body[data-tool="feedback"] .pending-booking-card .arende-status--genomfort {
  background: rgba(32, 201, 151, 0.10);
  color: #1AA978;
}

body[data-tool="samtal"] .pending-booking-card .arende-status--ej-genomfort,
body[data-tool="intervju"] .pending-booking-card .arende-status--ej-genomfort,
body[data-tool="feedback"] .pending-booking-card .arende-status--ej-genomfort {
  background: rgba(0, 160, 155, 0.04);
  color: rgba(0, 160, 155, 0.7);
}

/* Ej-betald — transparent bg + 1px GM3 error-frame (#EF4444).
   Matchar css-designprinciper.md .alert-error-color och Tillståndet kraver
   atgard — ska sticka ut visuellt mot de övriga pillarna. */
body[data-tool="samtal"] .pending-booking-card .arende-status--ej-betald,
body[data-tool="intervju"] .pending-booking-card .arende-status--ej-betald,
body[data-tool="feedback"] .pending-booking-card .arende-status--ej-betald {
  background: transparent;
  border: 1px solid #EF4444;
  color: #EF4444;
  /* Compensera 1px borden sa pillen behaller samma optiska höjd som de
     andra (3px+12px+3px = 18px effektivt padding-vertikal pa de andra). */
  padding: 3px 11px;
}

/* Pending-card hela kortet far rod frame nar order ar Ej betald.
   :has()-selektorn matchar wrappern när status-spann innehåller
   ej-betald-varianten. Override mot soft-teal-defaulten ovan. */
body[data-tool="samtal"] .pending-booking-card:has(.arende-status--ej-betald),
body[data-tool="intervju"] .pending-booking-card:has(.arende-status--ej-betald),
body[data-tool="feedback"] .pending-booking-card:has(.arende-status--ej-betald) {
  background: transparent;
  border: 1px solid #EF4444;
  border-left: 1px solid #EF4444;
}

/* ================================================================
   ORDER-SUMMARY
   ================================================================ */
body[data-tool="samtal"] .order-row-label,
body[data-tool="intervju"] .order-row-label,
body[data-tool="feedback"] .order-row-label {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
}

body[data-tool="samtal"] .order-row-detail,
body[data-tool="intervju"] .order-row-detail,
body[data-tool="feedback"] .order-row-detail {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
  line-height: 1.57;
}

body[data-tool="samtal"] .order-row-price,
body[data-tool="intervju"] .order-row-price,
body[data-tool="feedback"] .order-row-price {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

body[data-tool="samtal"] .order-row.order-total .order-row-label,
body[data-tool="intervju"] .order-row.order-total .order-row-label,
body[data-tool="feedback"] .order-row.order-total .order-row-label {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

body[data-tool="samtal"] .order-row.order-total .order-row-price,
body[data-tool="intervju"] .order-row.order-total .order-row-price,
body[data-tool="feedback"] .order-row.order-total .order-row-price {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #262626;
}

body[data-tool="samtal"] .order-moms,
body[data-tool="intervju"] .order-moms,
body[data-tool="feedback"] .order-moms {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400 !important;
  color: #959E9F;
}

/* ================================================================
   DISCOUNT-SECTION + STRIPE-CARD-SECTION padding
   Matchar .order-row (padding: var(--space-3) var(--space-4))
   sa labels/inputs linjerar visuellt med order-rows innehall.
   Stripe-card-section: border-top borttagen (separation via
   padding/marginal i stallet for streck).
   ================================================================ */
body[data-tool="samtal"] .discount-section,
body[data-tool="intervju"] .discount-section,
body[data-tool="feedback"] .discount-section {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

body[data-tool="samtal"] .stripe-card-section,
body[data-tool="intervju"] .stripe-card-section,
body[data-tool="feedback"] .stripe-card-section {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: none;
}

/* ================================================================
   DISCOUNT-INPUT + STATUS
   ================================================================ */
body[data-tool="samtal"] .discount-input,
body[data-tool="intervju"] .discount-input,
body[data-tool="feedback"] .discount-input {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
}

body[data-tool="samtal"] .discount-status,
body[data-tool="intervju"] .discount-status,
body[data-tool="feedback"] .discount-status {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

body[data-tool="samtal"] .discount-status.active,
body[data-tool="intervju"] .discount-status.active,
body[data-tool="feedback"] .discount-status.active {
  color: #1AA978;
}

/* ================================================================
   TEXT-INPUT / BOOKING-TEXTAREA
   ================================================================ */
body[data-tool="samtal"] .text-input,
body[data-tool="intervju"] .text-input,
body[data-tool="feedback"] .text-input,
body[data-tool="samtal"] .booking-textarea,
body[data-tool="intervju"] .booking-textarea,
body[data-tool="feedback"] .booking-textarea {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
}

/* ================================================================
   INFO-EXAMPLES (feedback steg 1 "Vad ingar")
   ================================================================ */
body[data-tool="samtal"] .info-examples-label,
body[data-tool="intervju"] .info-examples-label,
body[data-tool="feedback"] .info-examples-label {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #959E9F;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body[data-tool="samtal"] .info-example-list li,
body[data-tool="intervju"] .info-example-list li,
body[data-tool="feedback"] .info-example-list li {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #262626;
  line-height: 1.5;
}

body[data-tool="samtal"] .info-step-body,
body[data-tool="samtal"] .info-step-body p,
body[data-tool="intervju"] .info-step-body,
body[data-tool="intervju"] .info-step-body p,
body[data-tool="feedback"] .info-step-body,
body[data-tool="feedback"] .info-step-body p {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.57;
  color: #262626;
}

body[data-tool="samtal"] .info-price-amount,
body[data-tool="intervju"] .info-price-amount,
body[data-tool="feedback"] .info-price-amount {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #262626;
}

body[data-tool="samtal"] .info-price-note,
body[data-tool="intervju"] .info-price-note,
body[data-tool="feedback"] .info-price-note {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #959E9F;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .info-examples-label,
  body[data-tool="intervju"] .info-examples-label,
  body[data-tool="feedback"] .info-examples-label,
  body[data-tool="samtal"] .info-example-list li,
  body[data-tool="intervju"] .info-example-list li,
  body[data-tool="feedback"] .info-example-list li,
  body[data-tool="samtal"] .info-step-body,
  body[data-tool="intervju"] .info-step-body,
  body[data-tool="feedback"] .info-step-body,
  body[data-tool="samtal"] .info-step-body p,
  body[data-tool="intervju"] .info-step-body p,
  body[data-tool="feedback"] .info-step-body p {
    font-size: 15px;
  }
}

/* ================================================================
   TRUST-BADGES
   Typografi: GM3 Links/Labels-skala (14 desktop / 12 mobil) muted.
   Ikoner: inline SVG i teal (#00A09B) ger en lugn trust-accent
   mot den nedtonade texten. Lucide-style, 1.75px stroke,
   currentColor så hovers/aktiva tillstånd kan styras via color.
   Optisk nudge: align-items baseline + ikon-margin-bottom -1px
   eftersom stroke-ikonernas visuella tyngdpunkt ligger något
   under x-höjden på Rubik 14.
   ================================================================ */
body[data-tool="samtal"] .trust-badge,
body[data-tool="intervju"] .trust-badge,
body[data-tool="feedback"] .trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
  line-height: 1.2;
}

body[data-tool="samtal"] .trust-badge-icon,
body[data-tool="intervju"] .trust-badge-icon,
body[data-tool="feedback"] .trust-badge-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #00A09B;
  display: block;
  position: relative;
  top: -1px;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .trust-badge,
  body[data-tool="intervju"] .trust-badge,
  body[data-tool="feedback"] .trust-badge {
    font-size: 12px;
    gap: 6px;
  }

  body[data-tool="samtal"] .trust-badge-icon,
  body[data-tool="intervju"] .trust-badge-icon,
  body[data-tool="feedback"] .trust-badge-icon {
    width: 14px;
    height: 14px;
  }
}

/* ================================================================
   OPTIONAL-BADGE / WEEK-NAV-BTN
   ================================================================ */
body[data-tool="samtal"] .optional-badge,
body[data-tool="intervju"] .optional-badge,
body[data-tool="feedback"] .optional-badge {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
}

body[data-tool="samtal"] .week-nav-btn,
body[data-tool="intervju"] .week-nav-btn,
body[data-tool="feedback"] .week-nav-btn {
  font-family: 'Rubik', sans-serif;
  color: #959E9F;
}

body[data-tool="samtal"] .week-nav-btn:hover,
body[data-tool="intervju"] .week-nav-btn:hover,
body[data-tool="feedback"] .week-nav-btn:hover {
  border-color: #00A09B;
  color: #00A09B;
}

/* ================================================================
   STRIPE-CARD-ERROR (override till GM3 #EF4444 utan border-left)
   ================================================================ */
body[data-tool="samtal"] .stripe-card-error,
body[data-tool="intervju"] .stripe-card-error,
body[data-tool="feedback"] .stripe-card-error {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
  border: none;
  border-radius: 7.5px;
}

/* CONFIRMATION SECTION (efter submit) — borttaget; ersätts av banner i /mina-arenden/ */

/* ================================================
   BOOKING-CONTAINER — width-fix + top-padding
   Bugg: <body> ar display:flex column. Flex-items utan explicit
   width krymper till content-storlek i stallet for att stretchas
   till max-width. Fix: width: 100% sa containern stretchas till
   body-bredd, capad av max-width 760.
   ================================================================ */
body[data-tool="samtal"] .booking-container,
body[data-tool="intervju"] .booking-container,
body[data-tool="feedback"] .booking-container {
  width: 100%;
  padding-top: var(--space-5);
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .booking-container,
  body[data-tool="intervju"] .booking-container,
  body[data-tool="feedback"] .booking-container {
    padding-top: var(--space-4);
  }
}

/* ================================================================
   ============================= ETAPP 2 =========================== 
   Slot-knappar, intro-overlay, step-collapse-detaljer,
   pending-card-polish, smafix, info-step
   ================================================================ */


/* ================================================================
   1. SLOT-KNAPPAR (tidsvaljaren steg 1)
   ================================================================ */

body[data-tool="samtal"] .slot-btn,
body[data-tool="intervju"] .slot-btn,
body[data-tool="feedback"] .slot-btn {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
  transition: border-color 0.15s, background 0.15s;
  transform: none;
}

body[data-tool="samtal"] .slot-btn:hover,
body[data-tool="intervju"] .slot-btn:hover,
body[data-tool="feedback"] .slot-btn:hover {
  border-color: #00A09B;
  background: rgba(0, 160, 155, 0.04);
  transform: none;
}

body[data-tool="samtal"] .slot-btn.selected,
body[data-tool="intervju"] .slot-btn.selected,
body[data-tool="feedback"] .slot-btn.selected {
  border: 1px solid #00A09B;
  background: rgba(0, 160, 155, 0.08);
  color: #00A09B;
  font-weight: 500;
  box-shadow: none;
}

body[data-tool="samtal"] .slot-btn.selected .slot-time,
body[data-tool="intervju"] .slot-btn.selected .slot-time,
body[data-tool="feedback"] .slot-btn.selected .slot-time {
  color: #00A09B;
  opacity: 0.7;
}

/* Loading/empty-tillstand i tidsvaljaren */
body[data-tool="samtal"] .slots-empty,
body[data-tool="intervju"] .slots-empty,
body[data-tool="feedback"] .slots-empty {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
  background: transparent;
  border: none;
}

body[data-tool="samtal"] .slots-empty.error,
body[data-tool="intervju"] .slots-empty.error,
body[data-tool="feedback"] .slots-empty.error {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
  border: none;
}


/* ================================================================
   2. INTRO-OVERLAY
   ================================================================ */

/* Panel — GM3-kortmonster (radius 10, mjukare skugga) */
body[data-tool="samtal"] .intro-overlay-panel,
body[data-tool="intervju"] .intro-overlay-panel,
body[data-tool="feedback"] .intro-overlay-panel {
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

/* Header — ta bort border-bottom, spacing racker */
body[data-tool="samtal"] .intro-overlay-header,
body[data-tool="intervju"] .intro-overlay-header,
body[data-tool="feedback"] .intro-overlay-header {
  border-bottom: none;
  padding-bottom: var(--space-2);
}

/* CTA-knapp — folja GM3 prim ar (10/22) i stallet for egen 14/56 */
body[data-tool="samtal"] .intro-overlay-cta .btn-primary,
body[data-tool="intervju"] .intro-overlay-cta .btn-primary,
body[data-tool="feedback"] .intro-overlay-cta .btn-primary {
  padding: 10px 22px;
  font-size: 14px;
}

@media (max-width: 600px) {
  body[data-tool="samtal"] .intro-overlay-cta .btn-primary,
  body[data-tool="intervju"] .intro-overlay-cta .btn-primary,
  body[data-tool="feedback"] .intro-overlay-cta .btn-primary {
    font-size: 12px;
  }

  /* Mobil: behall bottom-sheet-formen men anpassa radius */
  body[data-tool="samtal"] .intro-overlay-panel,
  body[data-tool="intervju"] .intro-overlay-panel,
  body[data-tool="feedback"] .intro-overlay-panel {
    border-radius: 10px 10px 0 0;
  }
}

/* Intro-meta i overlayen (samma stil som hero-meta men pa ljus bg) */
body[data-tool="samtal"] .intro-overlay-header .service-meta,
body[data-tool="intervju"] .intro-overlay-header .service-meta,
body[data-tool="feedback"] .intro-overlay-header .service-meta {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #959E9F;
}

body[data-tool="samtal"] .intro-overlay-header .service-meta .service-price,
body[data-tool="intervju"] .intro-overlay-header .service-meta .service-price,
body[data-tool="feedback"] .intro-overlay-header .service-meta .service-price {
  font-weight: 500;
  color: #262626;
}


/* ================================================================
   3. STEG-COLLAPSE-DETALJER
   ================================================================ */

/* Header — GM3 spec: padding 18px 24px 50px (extra luft i botten) */
body[data-tool="samtal"] .step-collapse-header,
body[data-tool="intervju"] .step-collapse-header,
body[data-tool="feedback"] .step-collapse-header {
  padding: 18px 24px 50px;
}

/* Indicator-siffran — Rubik 14 medium (inte font-weight-bold = 800).
   Siffran ligger i en inner <span> så att shared-regeln
   `.step-collapse.completed .step-collapse-indicator span { display: none }`
   kan dölja den vid completed-state (då visas ✓ via ::after istället). */
body[data-tool="samtal"] .step-collapse-indicator,
body[data-tool="intervju"] .step-collapse-indicator,
body[data-tool="feedback"] .step-collapse-indicator {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

/* Active/completed-state behaller shared teal bg + vit text */
/* Default-state (kommande steg) far GM3 muted typografi */
body[data-tool="samtal"] .step-collapse:not(.active):not(.completed) .step-collapse-indicator,
body[data-tool="intervju"] .step-collapse:not(.active):not(.completed) .step-collapse-indicator,
body[data-tool="feedback"] .step-collapse:not(.active):not(.completed) .step-collapse-indicator {
  background: rgba(0, 0, 0, 0.06);
  color: #959E9F;
}

/* Completed checkmark — anpassa storlek */
body[data-tool="samtal"] .step-collapse.completed .step-collapse-indicator::after,
body[data-tool="intervju"] .step-collapse.completed .step-collapse-indicator::after,
body[data-tool="feedback"] .step-collapse.completed .step-collapse-indicator::after {
  font-size: 12px;
  font-weight: 500;
}

/* Chevron — muted default, teal vid hover pa hela headern */
body[data-tool="samtal"] .step-collapse-chevron,
body[data-tool="intervju"] .step-collapse-chevron,
body[data-tool="feedback"] .step-collapse-chevron {
  color: #959E9F;
  font-size: 14px;
}

body[data-tool="samtal"] .step-collapse-header:hover .step-collapse-chevron,
body[data-tool="intervju"] .step-collapse-header:hover .step-collapse-chevron,
body[data-tool="feedback"] .step-collapse-header:hover .step-collapse-chevron {
  color: #00A09B;
}

/* Collapsed-state pa titel — muted i stallet for default-fargen */
body[data-tool="samtal"] .step-collapse.collapsed .step-collapse-title,
body[data-tool="intervju"] .step-collapse.collapsed .step-collapse-title,
body[data-tool="feedback"] .step-collapse.collapsed .step-collapse-title {
  color: #959E9F;
}


/* ================================================================
   4. PENDING-CARD-POLISH
   ================================================================ */

/* Status-prick — anpassa till GM3-teal-prick (var redan #00A09B,
   sakerstall storlek + alignment) */
body[data-tool="samtal"] .pending-booking-dot,
body[data-tool="intervju"] .pending-booking-dot,
body[data-tool="feedback"] .pending-booking-dot {
  width: 8px;
  height: 8px;
  background: #00A09B;
}

/* Toggle-arrow chevron — muted default, teal nar oppen */
body[data-tool="samtal"] .pending-booking-toggle-arrow,
body[data-tool="intervju"] .pending-booking-toggle-arrow,
body[data-tool="feedback"] .pending-booking-toggle-arrow {
  color: #959E9F;
}

body[data-tool="samtal"] .pending-booking-toggle:hover .pending-booking-toggle-arrow,
body[data-tool="intervju"] .pending-booking-toggle:hover .pending-booking-toggle-arrow,
body[data-tool="feedback"] .pending-booking-toggle:hover .pending-booking-toggle-arrow,
body[data-tool="samtal"] .pending-booking-toggle.open .pending-booking-toggle-arrow,
body[data-tool="intervju"] .pending-booking-toggle.open .pending-booking-toggle-arrow,
body[data-tool="feedback"] .pending-booking-toggle.open .pending-booking-toggle-arrow {
  color: #00A09B;
}

/* Toggle-knappens label far hover-teal sa hela toggeln signalerar klickbar */
body[data-tool="samtal"] .pending-booking-toggle:hover,
body[data-tool="intervju"] .pending-booking-toggle:hover,
body[data-tool="feedback"] .pending-booking-toggle:hover {
  color: #00A09B;
}

/* Answers-panel — vit kort-bg over soft-teal pending-bg for kontrast */
body[data-tool="samtal"] .pending-booking-answers,
body[data-tool="intervju"] .pending-booking-answers,
body[data-tool="feedback"] .pending-booking-answers {
  background: #FFFFFF;
  border-radius: 7.5px;
  padding: var(--space-3) var(--space-4);
}

body[data-tool="samtal"] .pending-booking-answer-q,
body[data-tool="intervju"] .pending-booking-answer-q,
body[data-tool="feedback"] .pending-booking-answer-q {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 2px;
}

body[data-tool="samtal"] .pending-booking-answer-a,
body[data-tool="intervju"] .pending-booking-answer-a,
body[data-tool="feedback"] .pending-booking-answer-a {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #262626;
  line-height: 1.57;
}

/* Actions — knappspacing */
body[data-tool="samtal"] .pending-booking-actions,
body[data-tool="intervju"] .pending-booking-actions,
body[data-tool="feedback"] .pending-booking-actions {
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Mobil: stapla knapparna */
@media (max-width: 600px) {
  body[data-tool="samtal"] .pending-booking-actions,
  body[data-tool="intervju"] .pending-booking-actions,
  body[data-tool="feedback"] .pending-booking-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-tool="samtal"] .pending-booking-card,
  body[data-tool="intervju"] .pending-booking-card,
  body[data-tool="feedback"] .pending-booking-card {
    padding: var(--space-4);
  }
}


/* ================================================================
   5. SMAFIX
   ================================================================ */

/* Optional-badge — diskret pill-form for "(valfritt)"-markor */
body[data-tool="samtal"] .optional-badge,
body[data-tool="intervju"] .optional-badge,
body[data-tool="feedback"] .optional-badge {
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #959E9F;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 10px;
  border-radius: 32px;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}

/* Cancel-notice flash — soft-teal redan satt, anpassa typografi */
body[data-tool="samtal"] .cancel-notice a,
body[data-tool="intervju"] .cancel-notice a,
body[data-tool="feedback"] .cancel-notice a {
  color: #00A09B;
  font-weight: 500;
  text-decoration: underline;
}

/* Reschedule-success flash — GM3 positive (mint) */
body[data-tool="samtal"] .reschedule-success,
body[data-tool="intervju"] .reschedule-success,
body[data-tool="feedback"] .reschedule-success {
  background: rgba(32, 201, 151, 0.10);
  border: none;
  color: #1AA978;
}

/* Discount-status.error — mappa mot GM3 #EF4444 (var tidigare var(--red)) */
body[data-tool="samtal"] .discount-status.error,
body[data-tool="intervju"] .discount-status.error,
body[data-tool="feedback"] .discount-status.error {
  color: #EF4444;
}


/* ================================================================
   6. INFO-STEP (feedback steg 1 "Sa har fungerar det")
   ================================================================ */

/* Info-examples — anpassa till GM3 Tool Intro Examples-monstret
   (subtil bg, ingen borda, label uppercase 16 medium muted) */
body[data-tool="samtal"] .info-examples,
body[data-tool="intervju"] .info-examples,
body[data-tool="feedback"] .info-examples {
  background: rgba(0, 160, 155, 0.04);
  border: none;
  border-radius: 10px;
  padding: var(--space-4) var(--space-5);
}

/* Info-price-row — soft-teal pris-stripe */
body[data-tool="samtal"] .info-price-row,
body[data-tool="intervju"] .info-price-row,
body[data-tool="feedback"] .info-price-row {
  background: rgba(0, 160, 155, 0.06);
  border: none;
  border-radius: 10px;
  padding: var(--space-3) var(--space-4);
  font-family: 'Rubik', sans-serif;
}

/* Info-CTA — folj GM3 prim ar (10/22) i stallet for egen 14/48 */
body[data-tool="feedback"] .info-cta .btn-primary {
  padding: 10px 22px;
  font-size: 14px;
}

@media (max-width: 600px) {
  body[data-tool="feedback"] .info-cta .btn-primary {
    font-size: 12px;
  }
}


/* Annons-fält toggle (klistra in text / ange länk) — samma stil som feedback.css.
   Spec: annons-fritext-i-bestallning.md. */
.feedback-link-toggle {
  display: inline-block;
  background: none;
  border: none;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) 0;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.15);
  transition: color 0.15s;
}

.feedback-link-toggle:hover {
  color: var(--color-text-secondary);
}


/* ============================================
   Radio-stack (Fix 6 — verktyg-smafix-juli)
   Vertikala radioknappar med hjälptexter, ersätter horisontella pill-btn.
   Används för leveransmetod (telefon/video) och språkval i
   samtal/intervju/feedback-flöden. Behaller .active-klass för selected
   state (samma som pill-btn) för att minimera JS-ändringar.
   ============================================ */
.radio-stack {
  display: flex;
  flex-direction: column;
}
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.radio-option:first-child {
  border-radius: 10px 10px 0 0;
}
.radio-option:last-child {
  border-radius: 0 0 10px 10px;
}
.radio-option:only-child {
  border-radius: 10px;
}
.radio-option + .radio-option {
  border-top: none;
}
.radio-option:hover {
  background: rgba(0, 160, 155, 0.03);
}
.radio-option.active {
  background: rgba(0, 160, 155, 0.05);
  border-color: #00a09b;
  position: relative;
  z-index: 1;
}
.radio-option.active + .radio-option:not(.active) {
  border-top: 1px solid #00a09b;
}
.radio-circle {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.radio-circle-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00a09b;
  transform: scale(0);
  transition: transform 0.15s;
}
.radio-option.active .radio-circle {
  border-color: #00a09b;
}
.radio-option.active .radio-circle-inner {
  transform: scale(1);
}
.radio-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.radio-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: #262626;
}
.radio-desc {
  font-size: 13px;
  color: #959E9F;
  line-height: 1.5;
}