/* DO USUNIECIA FONT FACE'Y - musiałem dodać żeby mieć podgląd jak to z fontem wygląda  START */

 @font-face {
     font-family: "Satoshi";
     src: url("https://sopchy.com/fonts/Satoshi-Regular2.woff") format("woff2"),
         url("https://sopchy.com/fonts/Satoshi-Medium.woff2") format("woff"),
         url("https://sopchy.com/fonts/fonts/Satoshi-Regular.ttf") format("truetype");
     font-weight: 400;
     font-display: swap;
     font-style: normal;
 }

 @font-face {
     font-family: "Satoshi";
     src: url("https://sopchy.com/fonts/Satoshi-Medium.woff2") format("woff2"),
         url("https://sopchy.com/fonts/Satoshi-Medium.woff2") format("woff"),
         url("../fonts/Satoshi-Medium.ttf") format("truetype");
     font-weight: 500;
     font-display: swap;
     font-style: normal;
 }

 @font-face {
     font-family: "Satoshi";
     src: url("https://sopchy.com/fonts/Satoshi-Light.woff") format("woff"),
         url("../fonts/Satoshi-Light.ttf") format("truetype");
     font-weight: 300;
     font-display: swap;
     font-style: normal;
 }

 /* DO USUNIECIA FONT FACE'Y - musiałem dodać żeby mieć podgląd jak to z fontem wygląda END */



 .cookie-overlay {
     position: fixed;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.7);
     display: none;
     align-items: flex-start;
     /* Zmienione z center */
     justify-content: center;
     z-index: 9999;
     padding: 20px;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     overflow-y: auto;
     /* Przewijanie overlay */
 }

 .cookie-overlay.active {
     display: flex;
 }

 .cookie-banner {
     position: relative;
     background: rgb(24 24 24);
     color: #fff;
     padding: 40px 32px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     max-width: 600px;
     width: 100%;
     margin: auto;
     /* Wyśrodkuje pionowo gdy jest miejsce */
     min-height: fit-content;
     /* Dodane */
 }

 /* Logo Styling */
 .cookie-logo {
     position: absolute;
     top: 36px;
     right: 20px;
     height: 40px;
     width: auto;
     object-fit: contain;
 }

 .cookie-banner h2 {
     font-size: 30px;
     margin-bottom: 12px;
     color: #fff;
 }

 .cookie-info,
 .cookie-preferences>p {
     max-width: 400px;
     margin-bottom: 24px;
     color: rgb(237 240 245 / 0.9);
 }

 /* Buttons */
 #cookieBanner .cookie-buttons {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 #cookieBanner .cookie-buttons button {
     padding: 8px 12px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: opacity 0.2s ease;
 }

 #cookieBanner .cookie-buttons button:hover {
     opacity: 0.85;
 }

 #cookieBanner #acceptRequired,
 .preferences-buttons button[type="submit"] {
     background-color: #00f6ff;
     border-radius: 9999px;
     color: #000;
     padding: 19px 30px;
     text-transform: uppercase;
 }

 #cookieBanner #preferencesBtn,
 #cookieBanner .preferences-buttons button[type="button"] {
     background-color: transparent;
     color: #fff;
     text-transform: uppercase;
 }

 /* Cookie Preferences */
 #cookieBanner .cookie-preferences {
     color: #fff;
     border-radius: 8px;
 }

 .checkbox-column {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-bottom: 32px;
 }

 #cookieBanner .container {
     display: block;
     position: relative;
     padding-left: 40px;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 16px;
     line-height: 1.5;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     color: rgb(237 240 245 / 0.7);
 }

 #cookieBanner .container strong {
     color: rgb(237 240 245 / 0.9);
     display: block;
     margin-bottom: 4px;
 }


 #cookieBanner .container input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }


 #cookieBanner .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 22px;
     width: 22px;
     background-color: transparent;
     border: 1px solid #edf0f51a;
     transition: background-color 0.2s ease;
 }


 #cookieBanner .container input:checked~.checkmark {
     background-color: #00f6ff;
 }

 #cookieBanner .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 #cookieBanner .container input:checked~.checkmark:after {
     display: block;
 }

 #cookieBanner .container .checkmark:after {
     left: 8px;
     top: 3px;
     width: 6px;
     height: 13px;
     border: solid #000;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 #cookieBanner .container:has(input[required]) strong::after {
     content: " *";
     color: #00f6ff;
     font-weight: bold;
     font-size: 18px;
     position: absolute;
     transform: translateX(2px);
     top: 0;
 }

 #cookieBanner .preferences-buttons {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .preferences-buttons button {
     padding: 8px 12px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: opacity 0.2s ease;
 }

 #cookieBanner .preferences-buttons button:hover {
     opacity: 0.85;
 }

 #preferencesForm:has(input[required]:not(:checked)) .preferences-buttons button[type="submit"] {
     pointer-events: none;
     opacity: 0.5;
 }

 html:has(.cookie-preferences) #cookieBanner .cookie-buttons,
 html:has(.cookie-preferences) .cookie-banner>p {
     display: none;
 }

 @media (max-width: 540px) {
     .cookie-banner {
         padding: 30px 24px;
     }

     .cookie-logo {
         height: 32px;
         top: 15px;
         right: 15px;
     }
 }

 @media (max-width: 440px) {
     .cookie-banner h2 {
         font-size: 24px;
     }

     .cookie-buttons button,
     .preferences-buttons button {
         width: 100%;
     }

     .cookie-overlay {
         padding: 10px;
     }

     #cookieBanner {
         padding: 20px 16px;
     }

 }

 @media (max-height: 500px) {
     #preferencesForm .checkbox-column {
         max-height: 300px;
         overflow-y: auto;
     }
 }