/* Sidespecifik CSS for Værktøjer/kliktaeller.html.
   Laa foer i en <style>-blok inde i selve HTML-filen, hvor den var
   usynlig for en soegning i stilarket. Indholdet er ordret det samme,
   og linket staar samme sted i dokumentet, saa kaskaden er uaendret. */

/* --- Calculator Specific Styles --- */
      
      .calculator-section {
          max-width: 900px;
          margin: -3rem auto 0;
          position: relative;
          z-index: 10;
          padding: 0 1rem;
      }

      .calc-card {
          background: #ffffff;
          border-radius: 24px;
          padding: 2.5rem;
          box-shadow: 0 20px 40px rgba(26, 46, 34, 0.08);
          border: 1px solid rgba(0,0,0,0.04);
          margin-bottom: 1.5rem;
          transition: all 0.3s ease;
      }

      .step-header {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 1.5rem;
      }

      .step-number {
          background: var(--primary); /* #205A45 */
          color: #fff;
          width: 32px; height: 32px;
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          font-weight: 700;
          flex-shrink: 0;
      }

      .step-title {
          font-family: 'Manrope', sans-serif;
          font-weight: 700;
          font-size: 1.15rem;
          color: var(--text-dark);
          /* Arvede center fra hero-sektionen. En lang overskrift blev derfor
             centreret over to linjer ved siden af trin-tallet. */
          text-align: left;
      }

      /* Knapper (Pills) */
      .options-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 0.8rem;
      }

      .calc-btn {
          flex: 1;
          min-width: 140px;
          padding: 1rem 1.5rem;
          border: 1px solid var(--border-subtle);
          background: #fff;
          border-radius: 50px; /* Pill shape */
          font-weight: 600;
          color: var(--text-muted);
          cursor: pointer;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          text-align: center;
          font-size: 0.95rem;
      }

      .calc-btn:hover {
          border-color: var(--primary);
          color: var(--primary);
          background: #faf9f7;
      }

      .calc-btn.selected {
          background: var(--primary);
          color: #fff;
          border-color: var(--primary);
          box-shadow: 0 4px 12px rgba(32, 90, 69, 0.2);
          transform: translateY(-1px);
      }

      /* --- Steps Row Layout --- */
      .steps-row {
          display: flex;
          flex-direction: column;
          gap: 0;
          margin-bottom: 1.5rem;
      }
      .steps-row .calc-card {
          margin-bottom: 0;
      }

      /* Step 2 Animation Styles */
      #step-2 {
          max-height: 0;
          padding: 0;
          border-width: 0;
          margin-top: 0;
          opacity: 0;
          overflow: hidden;
          transition:
              max-height 0.6s ease,
              padding 0.4s ease,
              margin 0.4s ease,
              opacity 0.4s ease 0.1s,
              border-width 0.1s linear;
      }
      #step-2.active {
          max-height: 1000px;
          padding: 2.5rem;
          border-width: 1px;
          margin-top: 1.5rem;
          opacity: 1;
      }

      /* Inner wrapper */
      .step-anim-inner {
          min-width: 0;
      }

      /* Product options: always single column */
      #product-options {
          display: flex;
          flex-direction: column;
      }
      #product-options .calc-btn {
          flex: none;
          width: 100%;
      }

      /* --- SLIDER AREA (Opdateret Design) --- */
      .slider-area-wrapper {
          padding: 1rem 0;
      }

      .dose-display-area {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-bottom: 1rem;
          padding: 0 5px;
      }

      .range-label {
          font-size: 0.9rem;
          color: var(--text-muted);
          font-weight: 600;
          margin-bottom: 10px; /* Juster så de liner op med bunden af det store tal */
      }

      .current-dose-wrapper {
          text-align: center;
      }

      .current-dose {
          font-family: inherit;
          font-size: 3.5rem;
          font-weight: 700;
          color: var(--primary); /* #205A45 */
          line-height: 1;
      }

      .unit { 
          font-size: 1rem; 
          color: var(--text-muted); 
          font-weight: 500; 
          display: block; 
          margin-top: 0.2rem;
      }

      /* CUSTOM SLIDER CSS (Fixed) */
      input[type=range] {
          -webkit-appearance: none; /* Fjern standard styling */
          width: 100%;
          height: 12px; /* Tykkere bar for et bedre look */
          background: transparent;
          border-radius: 6px;
          outline: none;
          margin: 0;
          cursor: pointer;
          --slider-progress: 0%;
      }

      input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 12px;
          background: linear-gradient(to right, #205A45 0%, #205A45 var(--slider-progress), #EAE8E0 var(--slider-progress), #EAE8E0 100%);
          border-radius: 6px;
          cursor: pointer;
      }

      /* Styling af "Prikken" (Thumb) */
      input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          height: 32px;
          width: 32px;
          border-radius: 50%;
          background: #ffffff;
          border: 4px solid var(--primary); /* Minora Grøn Kant */
          margin-top: -10px; /* (32px - 12px) / 2 * -1 = -10px for at centrere */
          box-shadow: 0 4px 10px rgba(0,0,0,0.15);
          transition: transform 0.1s ease, box-shadow 0.1s ease;
          cursor: grab;
      }

      input[type=range]::-webkit-slider-thumb:active {
          cursor: grabbing;
          transform: scale(1.05);
          box-shadow: 0 6px 15px rgba(32, 90, 69, 0.25);
      }

      /* Firefox support */
      input[type=range]::-moz-range-track {
          width: 100%;
          height: 12px;
          background: linear-gradient(to right, #205A45 0%, #205A45 var(--slider-progress), #EAE8E0 var(--slider-progress), #EAE8E0 100%);
          border-radius: 6px;
      }
      
      input[type=range]::-moz-range-thumb {
          height: 32px;
          width: 32px;
          border: 4px solid var(--primary);
          border-radius: 50%;
          background: #ffffff;
          cursor: grab;
          box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      }

      /* Resultatskærm */
      .results-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 1.5rem;
          margin-top: 2.5rem;
      }

      .result-box {
          background: #EEFBEE; /* Meget lys grøn */
          border-radius: 16px;
          padding: 2rem 1rem;
          text-align: center;
          border: 1px solid rgba(32, 90, 69, 0.05);
          transition: transform 0.2s;
      }
      
      .result-box:hover { transform: translateY(-2px); }
      
      .result-value {
          font-size: 3rem;
          font-weight: 800;
          color: var(--primary); /* #205A45 */
          margin-bottom: 0.5rem;
          line-height: 1;
      }

      .result-label {
          font-size: 0.85rem;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: var(--text-muted);
          font-weight: 600;
      }

      /* Info Cards */
      .info-container {
          background: #FAF9F7;
          border-radius: 20px;
          padding: 2.5rem;
          border: 1px solid var(--border-subtle);
          margin-top: 4rem;
      }

      .info-item { margin-bottom: 2rem; }
      .info-item:last-child { margin-bottom: 0; }

      .info-header {
          font-weight: 700;
          color: var(--text-dark);
          margin-bottom: 0.8rem;
          display: flex; align-items: center; gap: 0.6rem;
      }

      .info-content {
          font-size: 0.95rem;
          color: var(--text-muted);
          line-height: 1.6;
          padding-left: 2rem; /* Indrykning under ikonet */
      }
      .info-content li {
          margin-bottom: 0.6rem;
      }
      .info-content li:last-child {
          margin-bottom: 0;
      }
      /* KUN direkte barn. Med .info-content strong ramte reglen ogsaa
         <strong> inde i et <li>, og saa blev "Wegovy maa bruges i 6 uger,
         uanset hvilken pen du har" splintret over flere linjer paa mobil.
         Tranen 17/09/2026. */
      .info-content > strong {
          display: block;
          margin-bottom: 0.35rem;
      }

      /* Warning */
      .disclaimer-box {
          background: #FFFBF2; /* Creamy warning */
          color: #9A7B2C;
          border: 1px solid #E8E2D5;
          padding: 1.2rem;
          border-radius: 12px;
          text-align: center;
          font-size: 0.9rem;
          line-height: 1.6;
          margin-bottom: 2rem;
      }

      @media (max-width: 768px) {
          .calculator-section { margin-top: 1.5rem; }
          .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
          .options-grid { 
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 0.8rem;
          }
          .calc-btn {
              min-width: 0;
              padding: 0.8rem 0.5rem;
          }
          .current-dose { font-size: 2.5rem; }
          .step-title { font-size: 1rem; }
      }
      @media (max-width: 480px) {
          /* 2,5 rem indvendig afstand paa en 412 px skaerm gav mest tom plads.
             Pen-knapperne stod desuden ujaevnt, fordi "0,25 mg/0,19 ml"
             ombroed til to linjer, mens naboen stod paa én. */
          .calc-card { padding: 1.5rem 1.25rem; }
          #step-2.active { padding: 1.5rem 1.25rem; }
          #pen-options .calc-btn {
              font-size: 0.9rem;
              white-space: nowrap;
              padding: 0.8rem 0.4rem;
          }
          .results-grid { grid-template-columns: 1fr; gap: 0.75rem; }
          .result-value { font-size: 2.25rem; }
          .result-box { padding: 1.25rem 0.75rem; }
          .step-anim-inner { min-width: 0; }
          .info-container { padding: 1.5rem; }
          .current-dose { font-size: 2rem; }
          .premium-callout { padding: 1.5rem; gap: 1rem; }
          .premium-callout__icon { width: 42px; height: 42px; }
      }

      /* Raekker pennen laengere end den maa bruges efter foerste anvendelse,
         skal tallet ikke se ud som et godt resultat. */
      .result-box--advarsel {
          background: #FDECEC;
          border-color: rgba(178, 39, 39, 0.2);
      }
      .result-box--advarsel .result-value,
      .result-box--advarsel .result-label { color: #B22727; }

      .result-holdbarhed {
          font-size: 0.9rem;
          color: var(--text-muted);
          margin: 1rem 0 0;
          text-align: center;
      }
      .result-holdbarhed--advarsel { color: #B22727; font-weight: 600; }