/* =========================
   NEW COLOR MODE – GLOBAL (NEWCOLOR STYLE FIX)
   ========================= */

body.newcolor-mode {
    background:
        url('gfx/tso_background.jpg') no-repeat center center fixed;
    background-size: cover;

    color: #2b241c;

    max-width: 1870px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;

    /* desktop padding */
    padding: 0 120px;
}

/* 📱 MOBILE */
@media (max-width: 1024px) {
    body.newcolor-mode {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    body.newcolor-mode {
        padding: 0 16px;
    }
}

/* 📱 bardzo małe ekrany */
@media (max-width: 480px) {
    body.newcolor-mode {
        padding: 0 10px;
    }
}

/* ul li hr do p */

body.newcolor-mode ul li hr {
	position: relative;
	vertical-align: middle;

	margin: 8px 50px 8px 0;
	padding-bottom: 6px;

	border: 0;
	border-bottom: 1px dashed rgba(139, 111, 71, 0.6);
}

body.newcolor-mode ul li p {
	margin: 0;
}

body.newcolor-mode ul li img {
	border: 0px solid #fff;
	border-radius: 6px;
	margin: 0 2px 0 2px;
}

/* Karty */
body.newcolor-mode .card-section {
    background:
        linear-gradient(rgba(237, 225, 204, 0.74), rgba(232, 219, 197, 0.74)),
        url("gfx/middle-cardsection.png");

    background-position: center;
    background-repeat: repeat-y;
    background-size: auto;

    color: #2b241c;
    border: 1px solid #000;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);

    box-sizing: border-box;
}

/* Video cards */

body.newcolor-mode .video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

body.newcolor-mode .video-card {
    position: relative;
    /* 📄 papier notatki */
    background:
        linear-gradient(
            180deg,
            #fff8e7 0%,
            #f3ead6 100%
        );
    color: #2b241c;
    border: 1px solid #d2c1a3;
    border-left: 6px solid #F50A0A;
    border-radius: 6px;
    /* lekki papierowy cień */
    box-shadow:
        0 4px 10px rgba(0,0,0,0.18);
    padding: 14px 14px 14px 14px;
    overflow: visible;
    transform: rotate(-0.2deg);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* 📌 PIN (realistyczny przypięty element) */
body.newcolor-mode .video-card::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: url("gfx/pin-svgrepo-com.svg") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.35));
    transform: rotate(8deg);
}

/* tylko dla wybranych ikonka w karcie */
body.newcolor-mode .card-button.icon-bg-download {
    position: relative;
    padding-right: 60px; /* miejsce na ikonę */
}

body.newcolor-mode .card-button.icon-bg-download::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 10px;

    width: 34px;
    height: 34px;

    background: url("gfx/download-minimalistic.svg") no-repeat center;
	background-size: contain;

    pointer-events: none;
    opacity: 0.9;
}

/* 🎬 TITLE = nagłówek notatki */
body.newcolor-mode .video-title {
 font-size: 20px;
    font-weight: 700;
    color: #2b241c;
    margin: 0 0 8px 0;
    padding: 0;
    border-bottom: 1px dashed rgba(139, 111, 71, 0.6);
    padding-bottom: 6px;
    position: relative; /* potrzebne dla pseudo-elementu */
}

body.newcolor-mode .video-card::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 6px;
    width: 42px;
    height: 42px;
    background: url("gfx/reel.svg") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.35));
    transform: rotate(8deg);
}

/* 📄 TEKST = notatka */
body.newcolor-mode .video-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #3b2a1d;
    margin: 8px 0 0 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* 💥 HOVER = kartka „odkleja się” */
body.newcolor-mode .video-card:hover {
    transform: translateY(-3px) rotate(0deg);

    box-shadow:
        0 10px 18px rgba(0,0,0,0.22);
}

body.newcolor-mode .error-card {
    background-image: url('gfx/gallery-svgrepo-com.svg');
    position: relative;
    /* 📄 papier notatki */
    background:
        linear-gradient(
            180deg,
            #fff8e7 0%,
            #f3ead6 100%
        );
    color: #2b241c;
    border: 1px solid #d2c1a3;
    border-left: 6px solid #278BF5;
    border-radius: 6px;
    /* lekki papierowy cień */
    box-shadow:
        0 4px 10px rgba(0,0,0,0.18);
    padding: 14px 14px 14px 14px;
    overflow: visible;
    transform: rotate(-0.2deg);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.newcolor-mode .error-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff !important;
    margin: 0 0 8px 0;
    padding: 0;
    border-bottom: 1px dashed rgba(139, 111, 71, 0.6);
    padding-bottom: 6px;
}

/* 📌 PIN (realistyczny przypięty element) */
body.newcolor-mode .error-card::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 10px;
    width: 34px;
    height: 34px;
    background: url("gfx/gallery-svgrepo-com.svg") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.35));
    transform: rotate(8deg);
}

 body.newcolor-mode .full-width {
    width: 550px;
    height: auto;
    display: block;
  }

/* Nagłówki */
body.newcolor-mode h1,
body.newcolor-mode h2,
body.newcolor-mode h3 {
    color: #2b241c;
}

body.newcolor-mode .card-secondary-link {
    color: #5C4541 !important;
    font-weight: 800;
    margin-top: 8px;
    transition: color 0.3s ease, background 0.3s ease;

    writing-mode: vertical-rl;
    text-align: center;

    background: rgba(224, 196, 106, 0.15);
    border: 1px solid rgba(125, 85, 6, 0.35);
    border-radius: 10px;
    transform: rotate(180deg);

    width: 42px;   /* stała szerokość */
    height: 120px;  /* stała wysokość */

    display: flex;
    align-items: center;
    justify-content: center;
}

body.newcolor-mode .card-secondary-link:hover {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.25);
}


/* =========================================================
   NAVIGATION / HEADER (NEWCOLOR STYLE)
========================================================= */

body.newcolor-mode .site-header,
body.newcolor-mode .header-links {
    background:
        linear-gradient(rgba(237, 225, 204, 0.74), rgba(232, 219, 197, 0.74)),
        url("gfx/top-cardsection.png");

    background-position: center;
    background-repeat: repeat-y;
    background-size: auto;

    color: #2b241c;
    border: 1px solid #000;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);

    box-sizing: border-box;
}

body.newcolor-mode .header-links a {
    color: #2b241c;
}

body.newcolor-mode .header-links a:hover {
    color: #c82333;
}

/* IKONY */
body.newcolor-mode .site-header img,
body.newcolor-mode .header-links img {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* submenu */
body.newcolor-mode .scroll-submenu button {
	background: #e3cfad;
	border: 1px solid #8b6b3f;

	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px 48px;
}

body.newcolor-mode .scroll-submenu button[data-action="flash"] { background-image: url("gfx/laptop.svg"); }
body.newcolor-mode .scroll-submenu button[data-action="download"] { background-image: url("gfx/download-minimalistic.svg"); }
body.newcolor-mode .scroll-submenu button[data-action="scripts"] { background-image: url("https://img.icons8.com/?size=48&id=DtoJrMTvwScL&format=png"); }
body.newcolor-mode .scroll-submenu button[data-action="help"] { background-image: url("gfx/chat-round-dots.svg"); }

body.newcolor-mode .scroll-submenu button:hover {
	background-color: #c82333;
}

/* =========================================================
   FOOTER (NEWCOLOR STYLE)
========================================================= */

body.newcolor-mode .site-footer {
    background:
        linear-gradient(rgba(237, 225, 204, 0.74), rgba(232, 219, 197, 0.74)),
        url("gfx/bottom-cardsection.png");

    max-width: 1870px;
    width: 100%;

    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;

    color: #2b241c;
    border: 1px solid #000;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);

    box-sizing: border-box;
}

body.newcolor-mode .footer-links img {
    width: 48px;
    height: 48px;
}

body.newcolor-mode .site-footer a {
    color: #2b241c;
}

body.newcolor-mode .site-footer a:hover {
    color: #c82333;
}

/* Przyciski */
body.newcolor-mode .card-button {
    position: relative;
    display: inline-flex;
	margin: 0 5px 0 5px;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;
    border-radius: 12px;
	max-width: 450px;
	width: fit-content;

    color: #2b241c;
    font-weight: 600;
    letter-spacing: 0.3px;

    border: 1px solid rgba(199, 176, 138, 0.9);

    background:
        linear-gradient(
            to bottom,
            #e6d2b5 0%,
            #d8c3a5 45%,
            #cdb28d 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.15),
        0 6px 14px rgba(0,0,0,0.25);

    transition: all 0.2s ease;
    transform: translateY(0);
}

body.newcolor-mode .card-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            to bottom,
            #f0dfc3 0%,
            #d8c3a5 50%,
            #bfa37c 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 10px 20px rgba(0,0,0,0.35);
}

/* Modal */
body.newcolor-mode .premium-modal {
    background: #f3eadb;
    color: #2b241c;
}

body.newcolor-mode .premium-content {
    color: #2b241c;
}

/* Overlay */
body.newcolor-mode .premium-overlay {
    background: rgba(0,0,0,0.85);
}

/* Cookie bar */
body.newcolor-mode #cookie {
    background-color: rgba(20, 15, 10, 0.92);
    color: #f3e7d3;
}

/* Scroll button */
body.newcolor-mode #scrollTopBtn {
    background-color: #e3cfad;
}

body.newcolor-mode #scrollTopBtn:hover {
    background-color: #c82333;
}

/* przypiecie do segregatora */
body.newcolor-mode .card-button::before {	
content: "";
position: absolute;

top: -12px;
left: -12px;

width: 34px;
height: 34px;

background: url("gfx/przypiety.svg") no-repeat center;
background-size: contain;

z-index: 2;
pointer-events: none;
}

body.newcolor-mode .video-card::before {
content: "";
position: absolute;

top: -12px;
right: -12px;

width: 34px;
height: 34px;

background: url("gfx/pin-svgrepo-com.svg") no-repeat center;
background-size: contain;

z-index: 2;
pointer-events: none;
}

/* Modal video */
body.newcolor-mode .modal-content {
    background: #f3eadb;
    color: #2b241c;
}

/* Gradient mask */
body.newcolor-mode .card-section .collapsed-text::after {
    background: linear-gradient(to bottom, rgba(245,238,224,0) 0%, rgba(245,238,224,1) 100%);
}

/* Read more */
body.newcolor-mode .read-more-btn {
	display: block;
	width: 100%;
	text-align: right;
	padding: 10px 14px;
	background: linear-gradient(to right, transparent, rgba(139, 111, 71, 0.50));
	border: none;
	border-radius: 6px 6px 18px 18px;
	color: #52351D;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.25s ease;
	position: relative;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

body.newcolor-mode .read-more-btn:hover {
	background: linear-gradient(to right, transparent, rgba(139, 111, 71, 0.18));
	color: #fff;

	box-shadow: 0 3px 10px rgba(0,0,0,0.50);
	transform: translateY(-1px);
}

/* Badge */
body.newcolor-mode .badge {
    color: #2a1f16 !important;
    background: #d8c3a5;
    border: 1px solid #8b6f47;
    border-radius: 999px;
    padding: 2px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
	font-size: 16px;
	font-weight: 800;
}

body.newcolor-mode .badge2 {
	font-size: 16px;
	font-weight: 800;
	background: #e6d2b5;
	color: #2b241c;
	border: 1px solid #8b6f47;
	border-radius: 18px 18px 18px 6px;
	padding: 4px 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);

	display: flex;
	align-items: center;
	justify-content: center;
}

body.newcolor-mode .badge3 {
	position: absolute;
	top: -12px;
	right: -10px;
	font-size: 16px;
	font-weight: 800;
	background: #e6d2b5;
	color: #2b241c;
	border: 1px solid #8b6f47;
	border-radius: 18px 18px 18px 6px;
	padding: 4px 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);

	display: flex;
	align-items: center;
	justify-content: center;
}

body.newcolor-mode .card-button.green {
    background: linear-gradient(to bottom, #53CF86, #3fb873);
    color: #1e1a14;
}

body.newcolor-mode .card-button.green:hover {
    background: linear-gradient(to bottom, #8fbf6a, #6fae4f);
}

body.newcolor-mode .card-button.blue {
    background: linear-gradient(to bottom, #9E8D75, #7f6f5c);
    color: #fff;
}

body.newcolor-mode .card-button.blue:hover {
    background: linear-gradient(to bottom, #6f9fd1, #4d7fb8);
}

body.newcolor-mode .card-button.red {
    background: linear-gradient(to bottom, #FF7575, #d95a5a);
    color: #fff;
}

body.newcolor-mode .card-button.red:hover {
    background: linear-gradient(to bottom, #c06a4a, #a5523a);
}

body.newcolor-mode .card-button.gray {
    background: linear-gradient(to bottom, #B67E49, ##96673C);
	color: #000;
}

body.newcolor-mode .card-button.gray:hover {
    background: linear-gradient(to bottom, #EBDBCC, #EBDBCC);
	color: #000;
}

body.newcolor-mode .card-button.yellow {
    background: linear-gradient(to bottom, #e0c46a, #c9a94f);
    color: #1e1a14;
}

body.newcolor-mode .card-button.yellow:hover {
    background: linear-gradient(to bottom, #f0d98a, #d8b85c);
}

body.newcolor-mode .card-button.silver {
    background: linear-gradient(to bottom, #D9D9D9, #b3b8c0);
    color: #000;
}

body.newcolor-mode .card-button.silver:hover {
    background: linear-gradient(to bottom, #e5e5e5, #9ea6b3);
}


body.newcolor-mode .image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(138, 138, 138, 0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

/* zdjęcie */
body.newcolor-mode .overlay-image {
	max-width: calc(100vw - 220px);
	max-height: 90vh;
	object-fit: contain;
	border-radius: 12px;
	border: 10px solid rgba(255,255,255,0.92);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.15),
		0 0 40px rgba(0,0,0,0.45);
	z-index: 2;
	position: relative;
}

/* strefy tylko przy krawędziach */
body.newcolor-mode .nav-zone {
position: fixed;
top: 0;
width: 120px;
height: 100vh;
display: flex;
align-items: center;
z-index: 5;
cursor: pointer;
font-size: 48px;
color: #fff;

/* efekt */
transition: all 0.65s ease;
}

/* lewa */
body.newcolor-mode .left-zone {
    left: 0;
    justify-content: flex-start;
    padding-left: 50px;
	    background: linear-gradient(
        to right,
        rgba(15, 15, 15, 0.45) 0%,
        rgba(15, 15, 15, 0.32) 35%,
        rgba(15, 15, 15, 0.16) 65%,
        rgba(15, 15, 15, 0.00) 100%
    );
}

/* prawa */
body.newcolor-mode .right-zone {
    right: 0;
    justify-content: flex-end;
    padding-right: 50px;
	    background: linear-gradient(
        to left,
        rgba(15, 15, 15, 0.45) 0%,
        rgba(15, 15, 15, 0.32) 35%,
        rgba(15, 15, 15, 0.16) 65%,
        rgba(15, 15, 15, 0.00) 100%
    );
}

body.newcolor-mode .left-zone:hover {
	color: #000;
    background: linear-gradient(
        to right,
        rgba(138, 138, 138, 6.00) 0%,
        rgba(138, 138, 138, 0.00) 100%
    );
}

body.newcolor-mode .right-zone:hover {
	color: #000;
    background: linear-gradient(
        to left,
        rgba(138, 138, 138, 6.00) 0%,
        rgba(138, 138, 138, 0.00) 100%
    );
}

/* przyciski */
body.newcolor-mode .nav-btn {
	color: #fff;
    width: 70px;
    height: 70px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
    pointer-events: none;
}

body.newcolor-mode .nav-btn img {
    color: #fff;
	width: 34px;
    height: 34px;
    object-fit: contain;
}

body.newcolor-mode .nav-zone:hover .nav-btn {
    transform: scale(1.1);
    background: rgba(255,255,255,0.16);
}