:root {
         --card-bg: #fff;
         --muted: #666
     }

     body {
         font-family: Inter, Arial, sans-serif;
         margin: 0;
         background: #f4f5f7;
         color: #111
     }

     header {
         background: #222;
         color: #fff;
         padding: 18px 12px;
         text-align: center
     }

     section {
         background: var(--card-bg);
         padding: 14px;
         border-radius: 10px;
         box-shadow: 0 6px 18px rgba(0, 0, 0, .06)
     }

     h2 {
         margin: 0 0 10px;
         font-size: 18px;
         color: #222
     }

     label {
         display: block;
         margin: 8px 0;
         font-size: 14px
     }

     input[type="number"],
     input[type="text"],
     input[type="color"] {
         padding: 8px;
         border-radius: 8px;
         border: 1px solid #d1d5db;
         width: 140px
     }

     button {
         background: #0b74ff;
         color: #fff;
         padding: 8px 12px;
         border-radius: 8px;
         border: 0;
         cursor: pointer;
         transition: background-color 0.2s;
         white-space: nowrap;
     }

     button:hover {
         background-color: #0861cc;
     }

     input[type="checkbox"] {
         margin-right: 8px;
     }

     .full {
         grid-column: 1 / -1
     }

     #status {
         font-size: 13px;
         color: var(--muted);
         margin-top: 8px
     }

     #scene-container {
         width: 100%;
         height: 380px;
         background: #e9eef7;
         border-radius: 8px;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center
     }

     .small {
         font-size: 13px;
         color: var(--muted)
     }

     .cost-summary {
         font-size: 24px;
         font-weight: 700;
         margin-top: 10px
     }

     .cost-details {
         display: block
     }

     .cost-details span,
     .cost-details-item {
         font-weight: 700;
         margin-bottom: 4px;
         display: block;
     }

     .cut-list table {
         width: 100%;
         border-collapse: collapse;
         margin-top: 10px;
     }

     .cut-list th,
     .cut-list td {
         border: 1px solid #ddd;
         padding: 8px;
         text-align: left;
         font-size: 14px;
     }

     .cut-list th {
         background-color: #f2f2f2;
         font-weight: bold;
     }

     #acceptOfferBtn {
         background-color: #1a73e8;
         margin-top: 20px;
     }

     #acceptOfferBtn:hover {
         background-color: #155bb3;
     }

     @media (max-width:900px) {
         main {
             grid-template-columns: 1fr;
         }
     }

     .logo {
         border-radius: 50%;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         transition: transform 0.3s ease;
     }

     .logo:hover {
         transform: scale(1.05);
     }

     .site-nav {
         margin-top: 1rem;
         width: 100%;
     }

     .site-nav ul {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .site-nav ul li a {
         color: var(--text-color);
         text-decoration: none;
         padding: 10px 15px;
         display: block;
         border-radius: 5px;
         transition: background-color 0.3s ease, color 0.3s ease;
         text-transform: uppercase;
         font-weight: 700;
     }

     .site-nav ul li a:hover {
         background-color: var(--primary-color);
         color: #fff;
     }

     /* ----- Media queries dla responsywności ----- */
     @media (min-width: 768px) {
         header {
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
         }

         .site-nav {
             margin-top: 0;
             width: auto;
         }
     }

     .site-footer {
         background-color: #333;
         color: #fff;
         padding: 40px 20px;
         text-align: center;
     }

     .footer-container {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
         max-width: 1200px;
         margin: 0 auto;
         gap: 20px;
     }

     .footer-column {
         flex: 1;
         min-width: 250px;
         padding: 10px;
     }

     .footer-column h3 {
         border-bottom: 2px solid #555;
         padding-bottom: 10px;
         margin-bottom: 20px;
         font-size: 1.2em;
     }

     .footer-column ul {
         list-style: none;
         padding: 0;
     }

     .footer-column ul li {
         margin-bottom: 10px;
     }

     .footer-column a {
         color: #fff;
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .footer-column a:hover {
         color: #ccc;
     }

     .footer-bottom-text {
         margin-top: 40px;
         font-size: 0.9em;
         color: #aaa;
     }
    
     
    .container {
      max-width: 900px;
      margin: 40px auto;
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    h1, h2 {
      text-align: center;
      color: #2c3e50;
    }
    h2 {
      margin-top: 30px;
    }
    p, li {
      line-height: 1.6;
      color: #333;
      font-size: 15px;
    }
    .sciezka-nawigacji div  {
  padding-left: 20px; /* lub inna wartość, np. 2% */
  background-color: #f0f0f0; /* Dodano, byś widział różnicę */
}
    ol {
      margin-left: 20px;
    }
    .accept {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .accept input[type="checkbox"] {
      margin-right: 10px;
    }
    .accept button {
      margin-left: auto;
      padding: 10px 20px;
      background-color: #4CAF50;
      border: none;
      border-radius: 6px;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
    .accept button:hover {
      background-color: #45a049;
    }
         .compsoul-modal-container {
             background: #000000BF;
             bottom: 0;
             left: 0;
             opacity: 0;
             pointer-events: none;
             position: fixed;
             right: 0;
             top: 0;
             transition: opacity 0.4s;
             will-change: opacity;
             z-index: 6;
         }
    
         .compsoul-modal-container.modal-active {
             opacity: 1;
             pointer-events: auto;
         }
    
         .compsoul-modal-container.modal-close {
             pointer-events: auto;
         }
    
         .modal-unset,
         .modal-unset:before,
         .modal-unset:after,
         .compsoul-modal-container.modal-unset,
         .compsoul-modal-main.modal-unset {
             animation: unset !important;
             transition: none !important;
         }
    
         .compsoul-modal-container:before {
             animation: compsoul-modal-loading 1s infinite;
             border-bottom: 0.5em solid #ffffff00;
             border-left: 0.5em solid #ffffff;
             border-right: 0.5em solid #ffffff;
             border-top: 0.5em solid #ffffff00;
             border-radius: 100%;
             box-sizing: content-box;
             content: "";
             font-size: 4px;
             height: 6em;
             left: 50%;
             opacity: 1;
             position: absolute;
             top: 50%;
             transform: translate3d(-50%, -50%, 0);
             transition: opacity 0.4s;
             will-change: opacity;
             width: 6em;
         }
    
         .compsoul-modal-container.modal-ready:before,
         .compsoul-modal-container.modal-error:before {
             animation-play-state: paused;
             opacity: 0;
         }
    
         @keyframes compsoul-modal-loading {
             from {
                 transform: translate3d(-50%, -50%, 0) rotate(0deg);
             }
    
             to {
                 transform: translate3d(-50%, -50%, 0) rotate(360deg);
             }
         }
    
         .compsoul-modal-container:after {
             color: #ffffff;
             content: "\26A0";
             font-size: 42px;
             font-weight: 200;
             left: 50%;
             margin: -6px 0 0 0;
             opacity: 0;
             position: absolute;
             top: 50%;
             transform: translate3d(-50%, -50%, 0);
             transition: opacity 0.4s;
             will-change: opacity;
         }
    
         .compsoul-modal-container.modal-error:after {
             opacity: 1;
         }
    
         .compsoul-modal-main {
             left: 50%;
             max-height: calc(2 * 40vh);
             opacity: 0;
             position: absolute;
             top: 50%;
             transform: translate3d(-50%, calc(-50% - 100px), 0);
             transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
             width: 800px;
             z-index: 1;
             will-change: transform, opacity;
         }
    
         .modal-ready.modal-active .compsoul-modal-main {
             opacity: 1;
             transform: translate3d(-50%, -50%, 0);
         }
    
         .modal-change .compsoul-modal-main {
             transition: transform 0.4s, opacity 0.4s;
         }
    
         .compsoul-modal-main:before {
             background: #fff;
             border-radius: 8px;
             bottom: -32px;
             box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
             content: "";
             left: -32px;
             position: absolute;
             right: -32px;
             top: -32px;
             z-index: -1;
         }
    
         .compsoul-modal-content {
             background: #fff;
             line-height: 1.2;
             overflow-y: auto;
             max-height: calc(2 * 40vh);
             padding: 0 32px 0 0;
             position: relative;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
         }
    
         .compsoul-modal-content:after {
             content: "";
             display: table;
             clear: both;
         }
    
         .compsoul-modal-close {
             right: 8em;
             position: absolute;
             top: 8em;
             z-index: 2;
         }
    
         .compsoul-modal-next {
             right: 8em;
             position: absolute;
             top: 50%;
             transform: translate3d(0, -50%, 0);
             z-index: 2;
         }
    
         .compsoul-modal-prev {
             left: 8em;
             position: absolute;
             top: 50%;
             transform: translate3d(0, -50%, 0);
             z-index: 2;
         }
    
         .compsoul-modal-close,
         .compsoul-modal-next,
         .compsoul-modal-prev {
             background: #000000;
             border: none;
             cursor: default;
             font-size: 2.6px;
             height: 16em;
             opacity: 0;
             outline: 1px solid #e7a14f00;
             padding: 0;
             text-align: center;
             transition: opacity 0.4s, outline 0.4s;
             width: 16em;
         }
    
         .compsoul-modal-close:focus,
         .compsoul-modal-close:focus-within,
         .compsoul-modal-next:focus,
         .compsoul-modal-next:focus-within,
         .compsoul-modal-prev:focus,
         .compsoul-modal-prev:focus-within {
             outline: 1px solid #e7a14fff;
         }
    
         .compsoul-modal-close,
         .compsoul-modal-next.modal-active,
         .compsoul-modal-prev.modal-active {
             cursor: pointer;
             opacity: 1;
         }
    
         .compsoul-modal-close:before,
         .compsoul-modal-close:after,
         .compsoul-modal-next:before,
         .compsoul-modal-prev:before {
             border-top: 1em solid #ffffff;
             border-right: 1em solid #ffffff;
             box-sizing: content-box;
             content: "";
             cursor: pointer;
             display: inline-block;
             height: 4em;
             padding: 0 0 1em 1em;
             transform: rotate(45deg) translate3d(-25%, 25%, 0);
             transition: opacity 0.4s, border 0.4s;
             width: 4em;
         }
    
         .compsoul-modal-close:before,
         .compsoul-modal-close:after {
             height: 3em;
             width: 3em;
         }
    
         .compsoul-modal-close:hover:before,
         .compsoul-modal-close:hover:after,
         .compsoul-modal-next:hover:before,
         .compsoul-modal-prev:hover:before {
             border-top: 1em solid #e7a14f;
             border-right: 1em solid #e7a14f;
         }
    
         .compsoul-modal-close:after,
         .compsoul-modal-prev:before {
             transform: rotate(-135deg) translate3d(-25%, 25%, 0);
         }
    
         .compsoul-modal-close:before {
             transform: rotate(45deg) translate3d(-7%, 7%, 0);
         }
    
         .compsoul-modal-close:after {
             transform: rotate(-135deg) translate3d(-7%, 7%, 0);
         }
    
         .compsoul-modal-timer {
             height: 3px;
             left: 0;
             position: absolute;
             top: 0;
             z-index: 5;
             width: 100%;
         }
    
         .compsoul-modal-timer:before {
             animation: compsoul-slide-timeline 8s linear forwards;
             animation-play-state: paused;
             background: #e7a14f;
             content: "";
             display: block;
             height: 100%;
             transform: translate3d(-100%, 0, 0);
             width: 100%;
         }
    
         .modal-ready .compsoul-modal-timer:before {
             animation-play-state: running;
         }
    
         .compsoul-modal-container:hover .compsoul-modal-timer:before {
             animation-play-state: paused;
         }
    
         @keyframes compsoul-slide-timeline {
             from {
                 transform: translate3d(-100%, 0, 0);
             }
    
             to {
                 transform: translate3d(0, 0, 0);
             }
         }
    
         @media only screen and (max-width: 1060px) {
             .compsoul-modal-main {
                 width: calc(100% - 94px);
             }
    
             .compsoul-modal-main:before {
                 bottom: -12px;
                 left: -12px;
                 right: -12px;
                 top: -12px;
             }
    
             .compsoul-modal-close,
             .compsoul-modal-next,
             .compsoul-modal-prev {
                 font-size: 2px;
             }
    
             .compsoul-modal-close {
                 right: 0;
                 top: 0;
             }
    
             .compsoul-modal-next {
                 right: 0;
             }
    
             .compsoul-modal-prev {
                 left: 0;
             }
         }
    
         .modal-box {
             background: #fff;
             border-radius: 5px;
             box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
             box-sizing: border-box;
             display: block;
             font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
             height: 0;
             margin: 32px auto;
             overflow: hidden;
             transition: height 0.4s;
             width: 264px;
         }
    
         .modal-box.modal-active {
             height: 180px;
         }
    
         .modal-box-content {
             padding: 24px 32px;
         }
    
         .modal-box-open {
             margin: 21px auto;
         }