/*!
Theme Name: Solo
Theme URI: https://clickk.pl
Author: Clickk.pl
Author URI: https://clickk.pl
Description: Solo
Version: 3.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oneview
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);
}


header {
    background: #000;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 99;
}

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

h1 {
    font-size: 1.2rem;
    font-family: "Trebuchet MS", system-ui;
    margin: 1rem;
    color: #fff;
}

body > footer {
    text-align: center;
    width: 100%;
}

.custom-logo,
.custom-logo-link {
    width: 40px;
    height: auto;
    line-height: 1;
    margin: auto;
}

main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
    scroll-padding-top: 0;
    scroll-padding-bottom: 0;
    overscroll-behavior: contain;
    -ms-overflow-style: none; /* Ukrycie paska przewijania w IE i Edge */
    scrollbar-width: none; /* Ukrycie paska przewijania w Firefox */
}

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

article {
    flex: none;
    height: 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 650px;
    margin: auto;
    padding: 10px;
    overflow: hidden;
    background: #000;
    position: relative;
	padding-bottom: 48px;
}

article > img {
    max-height: 70%;
    width: auto;
    max-width: 100%;
    display: block;
    border-radius: 0.6rem;
    /* Usunięto 'overflow: hidden' - niepotrzebne na img */
    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;
}