prisregner-container {
   position:fixed;
   z-index:10000;
   bottom:90px;
   right:10px;
   background-color: rgba(255,255,255,1);
   padding:10px;
   display:none;
   max-width: 100vw;
}

prisregner-title, prisregner-subtitle {
   display:block;
}

prisregner-title {
   font-size:xx-large;
}

prisregner-subtitle {
   padding-top:10px;
   padding-bottom:10px;
}

prisregner-box {
   width:100%;
}

prisregner-container.active {
   display:block;
}

#prisregner-btn-box {
   position:fixed;
   z-index:10000;
   bottom:0px;
   right:10px;
   max-width: 290px;
   /*background-color: rgba(255, 255, 255, 0.80);*/
   padding-top: 10px;
   padding-bottom: 10px;
}

#prisregner-btn-box button-outer {
   background-color: rgba(255,255,255,1) !important;
   width:290px !important;
}

@media only screen and (max-width: 460px) {
   prisregner-container select {
      font-size: small !important;
      padding: 8px 11px;
   }
}

@media (max-width: 450px) {
   grid-item-title {
      font-size: 80%;
   }
   prisregner-container select {
      padding:0;
   }
   #model-select-grid-item {
      padding:0;
   }
   grid-line{
     grid-template-columns: 1fr 110px 110px !important; /* tekst | input-kolonne */
   }
   grid-line:first-child{ grid-template-columns: 1fr 220px !important;}
}
@media (max-height: 600px) and (orientation: landscape) {
   prisregner-container {
         overflow-y: scroll;
         max-height: calc(100vh - 100px);
   }
}
@media (max-width: 377px) {
   grid-line > grid-item:first-child{ max-width:28vw;}
   grid-line{
     grid-template-columns: 28vw 1fr 1fr !important; /* tekst | input-kolonne */
   }
   grid-line:first-child{ grid-template-columns: 28vw 1fr !important;}
   #model-select-grid-item {
      border-right: none;
   }
   prisregner-container {
      bottom:60px;
   }
   #prisregner-btn-box {
      padding: 0;
   }
   prisregner-subtitle {
      display:none;
   }
   prisregner-title {
      padding-bottom:8px;
   }
}

grid-item, grid-item-title, grid-item-subtitle {
   display: block;
   overflow-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
}

@media only screen and (max-width: 720px) {
   prisregner-container {
      right:0;
   }
}

@media only screen and (max-width: 500px) {
   grid-item {
      padding:6px !important;
   }

   prisregner-container {
      font-size: medium;
   }

   /*prisregner-container select {
      font-size: medium !important;
      padding: 0px;
   }*/
}

.grid-item-titles {
   display:flex;
   flex-direction: column;
}

grid-item-subtitle {
   font-size:70%;
   color: var(--color-gray-700);
}

  prisregner-box > .form-group{
    display: grid;
    gap: 0px;                 /* ingen mellemrum => table-look */
    border: 1px solid #333;
    max-width: 700px;
    font-family: Arial, sans-serif;
  }

  /* Hver række: 2 kolonner med fast logik */
  grid-line{
    display: grid;
     grid-template-columns: 1fr 140px 140px; /* tekst | input-kolonne */
    border-bottom: 1px solid #333;
    align-items: stretch;
  }

  grid-line grid-item:first-child {border-right: 1px solid #333;}
  grid-line:first-child{ grid-template-columns: 1fr 280px; justify-content: center; }
  grid-line:first-child .grid-item-our-value{ justify-content: center; }
  grid-line:last-child{ border-bottom: 0; }

  /* Cell styling */
  grid-item{
    display: block;
    padding: 10px;
  }

  .prisregner-container select {
   display: block;
   width: 100%;
  }

  #column-titles-line {
    font-weight: 700;
    font-size: 80%;
  }

  /* Lodret streg mellem kolonner */
  .grid-item-titles { border-right: 1px solid #333; }
  grid-item-our-value {
   margin:auto;
  }
  .grid-item-our-value{ border-right: 1px solid #333; }

  /* Title/subtitle layout (nesting) */
  .grid-item-titles{
    display: grid;
    gap: 4px;
  }
  grid-item-title{ font-weight: 700;line-height: 1.2; }
  grid-item-subtitle{ font-size: 12px; opacity: 0.8; margin: top -4px; line-height: 1.2; }

  #model-select-line > *:last-child {
    border-right: none;
  }

  /* Input cell: centrer som i en tabel */
  .grid-item-their-value, .grid-item-our-value{
    display: flex;
    align-items: center;
    justify-content: stretch;
  }
  .grid-item-their-value input{
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
  }

/* Price calculator panel */
:root {
   --prisregner-ink: #17322e;
   --prisregner-muted: #5a6864;
   --prisregner-surface: #ffffff;
   --prisregner-surface-soft: #f1f5f1;
   --prisregner-line: #c9d4ce;
   --prisregner-accent: #0f6c5f;
}

prisregner-container {
   inset: 0;
   display: grid;
   overflow: hidden;
   padding: clamp(16px, 4vw, 48px);
   background-color: #17322e;
   background-image: linear-gradient(rgba(16, 37, 33, 0.58), rgba(16, 37, 33, 0.72)), url("/global/images/natur.webp");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   backdrop-filter: blur(6px);
   box-sizing: border-box;
   place-items: center;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 180ms ease, visibility 0s linear 180ms;
}

prisregner-container.active {
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
   transition: opacity 180ms ease;
}

prisregner-container .prisregner-panel {
   width: fit-content;
   max-width: min(100%, 780px);
   max-height: calc(100vh - 48px);
   overflow-y: auto;
   padding: clamp(22px, 3vw, 32px);
   border: 1px solid rgba(255, 255, 255, 0.48);
   border-radius: 8px;
   background: var(--prisregner-surface);
   box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
   box-sizing: border-box;
   transform: translateY(10px) scale(0.985);
   transition: transform 180ms ease;
}

prisregner-container.active .prisregner-panel {
   transform: translateY(0) scale(1);
}

prisregner-title {
   color: var(--prisregner-ink);
   font-family: var(--font-family-heading);
   font-size: clamp(1.55rem, 3vw, 2.25rem);
   font-weight: 700;
   line-height: 1.15;
}

prisregner-subtitle {
   margin: 10px 0 24px;
   color: var(--prisregner-muted);
   font-size: 0.95rem;
   line-height: 1.5;
}

prisregner-box > .form-group {
   overflow: hidden;
   border: 1px solid var(--prisregner-line);
   border-radius: 6px;
   background: var(--prisregner-surface);
   font-family: var(--font-family-base);
}

grid-line {
   grid-template-columns: minmax(220px, 1fr) 170px 170px;
   border-color: var(--prisregner-line);
}

grid-line > grid-item {
   display: flex;
   align-items: center;
   min-width: 0;
   padding: 14px 16px;
   border-right: 1px solid var(--prisregner-line);
}

grid-line > grid-item:last-child {
   border-right: 0;
}

#model-select-line {
   grid-template-columns: minmax(220px, 1fr) 170px 170px;
}

#model-select-line > grid-item:first-child {
   padding: 10px 16px;
}

#column-titles-line {
   grid-template-columns: minmax(220px, 1fr) 170px 170px;
   background: #e7eeea;
   color: var(--prisregner-muted);
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
}

#column-titles-line .grid-item-our-value,
#column-titles-line .grid-item-their-value {
   color: var(--prisregner-muted);
   margin: 0;
   justify-content: center;
   font-weight: 700;
}

grid-item-title {
   color: var(--prisregner-ink);
}

grid-item-subtitle {
   color: var(--prisregner-muted);
}

.grid-item-our-value,
.grid-item-their-value {
   justify-content: flex-end;
   font-variant-numeric: tabular-nums;
}

.grid-item-our-value {
   color: var(--prisregner-ink);
   font-weight: 600;
}

#our-total-value,
#their-total-value {
   white-space: nowrap;
   font-size: 1.35rem;
   font-weight: 700;
   line-height: 1.2;
}

.grid-item-their-value input,
.prisregner-container select {
   min-height: 42px;
   border: 1px solid #aebdb6;
   border-radius: 4px;
   background: #ffffff;
   color: var(--prisregner-ink);
   font: inherit;
}

#model-select-line select {
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
}

.grid-item-their-value input {
   text-align: right;
}

.grid-item-their-value input:focus,
.prisregner-container select:focus {
   outline: 3px solid rgba(15, 108, 95, 0.25);
   outline-offset: 1px;
   border-color: var(--prisregner-accent);
}

grid-line:last-child {
   background: var(--prisregner-ink);
}

grid-line:last-child grid-item,
grid-line:last-child grid-item-title,
grid-line:last-child .grid-item-our-value,
grid-line:last-child .grid-item-their-value {
   color: #ffffff;
   font-weight: 700;
}

grid-line:last-child > grid-item {
   min-height: 76px;
}

grid-line:last-child grid-item-title {
   font-size: 1.25rem;
}

#prisregner-close {
   position: absolute;
   top: 14px;
   right: 14px;
   display: grid;
   width: 42px;
   height: 42px;
   padding: 0;
   place-items: center;
   border: 1px solid var(--prisregner-line);
   border-radius: 50%;
   background: #ffffff;
   color: var(--prisregner-ink);
   cursor: pointer;
   font-size: 1.55rem;
   line-height: 1;
}

#prisregner-close:hover,
#prisregner-close:focus-visible {
   border-color: var(--prisregner-accent);
   background: var(--prisregner-surface-soft);
   outline: 3px solid rgba(15, 108, 95, 0.2);
   outline-offset: 2px;
}

#prisregner-btn-box {
   right: clamp(12px, 2vw, 28px);
   bottom: clamp(12px, 2vw, 28px);
   width: min(290px, calc(100vw - 24px));
   max-width: none;
}

#prisregner-btn-box button-outer {
   display: block;
   width: 100% !important;
   border-radius: 6px;
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

@media (max-width: 640px) {
   prisregner-container {
      padding: 0;
   }

   prisregner-container .prisregner-panel {
      width: 100%;
      max-width: none;
      min-height: 100%;
      max-height: 100vh;
      padding-top: 64px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
   }

   grid-line {
      grid-template-columns: minmax(96px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
   }

   grid-line > grid-item {
      padding: 10px 8px;
   }

   grid-line > grid-item:first-child {
      max-width: none;
   }

   #model-select-line {
      grid-template-columns: minmax(96px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
   }

   #model-select-grid-item {
      border-right: 1px solid #333;
   }

   #column-titles-line {
      display: grid;
      grid-template-columns: minmax(96px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
   }

   #column-titles-line .grid-item-our-value,
   #column-titles-line .grid-item-their-value {
      font-size: 0.68rem;
      line-height: 1.15;
      text-align: center;
   }

   .grid-item-their-value input {
      min-width: 0;
      padding: 6px;
   }

   #our-total-value,
   #their-total-value {
      font-size: 1rem;
   }

   grid-line:last-child > grid-item {
      min-height: 64px;
   }

   grid-line:last-child grid-item-title {
      font-size: 1.08rem;
   }
}

@media (prefers-reduced-motion: reduce) {
   prisregner-container,
   prisregner-container .prisregner-panel {
      transition: none;
   }
}

@media (max-width: 390px) {
   prisregner-container .prisregner-panel {
      padding: 64px 16px 20px;
   }

   grid-line {
      grid-template-columns: minmax(92px, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) !important;
   }

   #model-select-line {
      grid-template-columns: minmax(92px, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) !important;
   }

   #column-titles-line {
      grid-template-columns: minmax(92px, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) !important;
   }

   grid-item-title {
      font-size: 0.9rem;
   }

   grid-item-subtitle {
      font-size: 0.73rem;
   }
}