/*!
Theme Name: Flicky
Theme URI: https://clickk.pl
Author: Clickk.pl
Author URI: https://clickk.pl
Description: Flicky
Version: 3.0.9
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: flicky
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/


:root{
--background-color: #1A1A1A;
--primary-background: #21303b;
--secondary-background: #17232b;
--heading-color: #ced8e3;
--text-color: #c5d0dd;
--form-text-color: #21303b;
--h4-color: #52a2ff;
--text-button: hsl(205deg, 16%, 90%);
--text-gradient: linear-gradient(96.44deg, #00f3ff 15%,#f500ff 80%);
--contrast-color: hsl(204deg 29% 20% / 30%);
--box-border: solid 1px #0000000d;
--box-gradient: linear-gradient(120deg,#2fa2df,#9600b4,#212830);
--royal-gradient: linear-gradient(236deg,#12479b,#4088d8);
--form-background: hsl(205deg, 20%, 94%);
--text-shadow: 0 0 20px #00000030;
--button-shadow: 0px 2px 4px 0px rgb(0 0 0 / 2%), 0px 3px 6px 0px rgb(0 0 0 / 4%), 0px 20px 12px 0px rgb(0 0 0 / 4%);
--box-shadow: -webkit-box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 2%), 0px 3px 6px 0px rgb(0 0 0 / 4%), 0px 20px 12px 0px rgb(0 0 0 / 4%);
--box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 2%), 0px 3px 6px 0px rgb(0 0 0 / 4%), 0px 20px 12px 0px rgb(0 0 0 / 4%);/*For Firefox*/

--block-spacing-vertical: calc(var(--spacing-base) * 1);
--button-padding: 1rem 1.25rem;
--spacing-base: 1rem;
--spacing-block-vertical: calc(var(--spacing-base) * 1);
--spacing-block-horizontal: var(--spacing-base);
--max-width: 980px;
--radius: 1rem;
--big-radius: 2rem;
--small-radius: .5rem;
}

*{
box-sizing: border-box;
}

html, body {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;

  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent;

  font-family: "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", "Arial", "Verdana", sans-serif;
  font-size: calc(0.35842vw + 0.95296em);
  font-kerning: normal;
  hyphens: auto;

  -moz-font-feature-settings: "salt", "tnum";
  -webkit-font-feature-settings: "salt", "tnum";
  font-feature-settings: "salt", "tnum";

  line-height: calc(1.5em + 0.2vw);
  text-rendering: optimizeLegibility;

  background-color: var(--background-color);
  color: var(--text-color);
  
  width: 100%;
  margin: 0;
  padding: 0;

  -ms-overflow-style: none; /* Ukrycie paska przewijania w IE i Edge */
  scrollbar-width: none; /* Ukrycie paska przewijania w Firefox */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: 
    radial-gradient(ellipse at center, rgba(255, 230, 200, 0.1), rgba(0, 0, 0, 0.25)),
    linear-gradient(to bottom, rgba(255, 230, 200, 0.05), rgba(0, 0, 0, 0.15));
  mix-blend-mode: soft-light;
  filter: brightness(0.97) contrast(1.08);
}


body > header {
    background: #000;
    position: fixed;
    width: 100%;
    /* ZMIANA: Zmieniłem bottom na top, bo inaczej header i footer na siebie nachodzą! */
    top: 0; 
    left: 0;
    text-align: center;
    z-index: 99;
}

nav {
    height: 48px;
    display: grid;
    align-items: center;
}

body > footer {
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0; /* Dodano left:0 dla spójności i bezpieczeństwa */
    background-color: black;
    padding: 5px;
    z-index: 99; /* Warto dodać z-index, żeby footer był nad treścią */
}

main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    
    /* ROZWIĄZANIE PROBLEMU Z PASKAMI PRZEGLĄDARKI: */
    height: 100vh; /* Fallback dla starszych przeglądarek */
    height: 100dvh; /* Dynamiczna wysokość (uwzględnia paski nawigacji!) */
    
    scroll-padding-top: 0;
    scroll-padding-bottom: 0;
    overscroll-behavior: contain;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}

main::-webkit-scrollbar {
    display: none; /* WebKit */
}

article {
    box-sizing: border-box; /* BARDZO WAŻNE: padding nie powiększy wysokości powyżej 100% */
    flex: none;
    height: 100vh; 
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 650px;
    margin: auto;
    padding: 10px;
    padding-bottom: 48px; /* Uwzględnia np. miejsce na nawigację na dole */
    overflow: hidden;
    background: #000;
    position: relative;
}

article > img {
    max-height: 70%;
    width: auto;
    max-width: 100%;
    display: block;
    border-radius: 0.6rem;
    filter: brightness(90%);
}
svg {
    width: 32px;
    height: 32px;
    color: white;
    transition: transform 0.2s ease;
    fill: white;
}

svg:hover {
    transform: scale(1.1);
    color: #ff0050; /* TikTok pink */
}

article > footer {
    position: absolute;
    right: 14px;
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: 100%;
    justify-content: flex-end;
    padding-bottom: 80px;
}

article > footer > span {
    font-size: 10px;
    color: #fff;
    line-height: 0;
}

button[name="action"] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 30px 0px #00000017;
}

button[name="action"]:hover {
background-color: rgba(255, 255, 255, 0.4);
}

button[data-saved="true"], button[data-saved="true"]:hover {
background-color: #f9e506;
}

button[id="share"]:active {
	background: royalblue;
}

.loader{
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' width='50px' height='50px' viewBox='0 0 128 128' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M78.75 16.18V1.56a64.1 64.1 0 0 1 47.7 47.7H111.8a49.98 49.98 0 0 0-33.07-33.08zM16.43 49.25H1.8a64.1 64.1 0 0 1 47.7-47.7V16.2a49.98 49.98 0 0 0-33.07 33.07zm33.07 62.32v14.62A64.1 64.1 0 0 1 1.8 78.5h14.63a49.98 49.98 0 0 0 33.07 33.07zm62.32-33.07h14.62a64.1 64.1 0 0 1-47.7 47.7v-14.63a49.98 49.98 0 0 0 33.08-33.07z' fill='%23ffffff' fill-opacity='1'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='90 64 64' dur='200ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
	justify-content: center;
	background-color: black;
}

   [id="popout"] {
      display: none;
      position: fixed;
      inset: 0;
      background: black;
      color: white;
      z-index: 1000;
      padding: 2rem;
      box-sizing: border-box;
    }

    [id="popout"].show {
      display: flex;
      align-items: center;
      justify-content: center;
    flex-direction: column;
    }

[id="popout"] > header > button {
    font-size: 2rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

footer > h1{
    font-size: 1rem;
    letter-spacing: -2px;
    padding: 0;
    margin: 0;
	color: white;
	cursor: pointer;
}

section#popout > header > h2 {
	letter-spacing: -2.5px;
}

section#popout > header{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

section#popout > span{
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      font-size: 1rem;
}

section#popout > p > a {
    margin: 0.5rem;
    display: inline-block;
    color: #ffffff;
    padding: 5px 8px;
    background: #128490;
    font-size: 14px;
    border-radius: .5rem;
    text-decoration: none;
    line-height: normal;
}