/*
Theme Name: Kiosko
Theme URI: https://wordpress.com/theme/kiosko/
Author: Automattic
Author URI: https://automattic.com/
Description: Kiosko is a store theme for WooCommerce.
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: 
Text Domain: kiosko
Tags: e-commerce, four-columns, wide-blocks, block-patterns, block-styles, featured-images, full-site-editing, rtl-language-support, sticky-post, template-editing, threaded-comments, translation-ready
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 0.5px !important;
	text-underline-offset: 0.05em;
}

/* Reset browser default margins for blockquote element */
.wp-block-pullquote blockquote {
	margin: 0;
}

/* Search button inside style */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	padding: 4px;
}

/* Adjust font size for comment reply title */
.wp-block-post-comments-form .comment-reply-title {
	font-size: var(--wp--preset--font-size--large);
}

/* Remove the bottom margin from the button */
.wp-block-post-comments-form .form-submit {
	margin-bottom: 0;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

/* Adjust the top padding for the submenu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	padding-top: var(--wp--preset--spacing--30);
}

/* Override the Gutenberg style to theme style */
.wp-block-post-author__byline,
.wp-block-post-author__bio {
	font-size: inherit;
}

/* Round the avatar and reset the vertical alignment */
.wp-block-post-author__avatar img {
	border-radius: 999px;
	line-height: 0;
}

/* Style tag cloud outline style  */
.wp-block-tag-cloud.is-style-outline a {
	border-color: var(--wp--preset--color--tertiary);
	border-radius: 999px;
	padding: 0 0.5rem;
}

.wp-block-tag-cloud.is-style-outline a:hover {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
}

/* Remove the default margin from author bio */
.wp-block-post-author__bio {
	margin: 0;
}

/* Remove the default margin from term description. */
.wp-block-term-description p:first-child {
	margin-top: 0;
}

.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Normalise font sizes for the latest comments and latest posts widgets */
.wp-block-latest-comments__comment-excerpt p,
.wp-block-latest-comments__comment-date,
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date {
	font-size: inherit;
}

/* Adjust font colour in the Calendar widget */
.wp-block-calendar table:where(:not(.has-text-color)) {
	color: var(--wp--preset--color--foreground);
}

/* Fix border radius setting for the avatar block */
.wp-block-avatar a,
.wp-block-avatar img {
	border-radius: inherit;
	vertical-align: middle;
}

/* Fix line height for various fields */
.wp-block-search__input,
.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments-form .comment-form textarea {
	line-height: inherit;
}

/* Style  border colour for search and Jetpack subscription blocks */
.wp-block-search__input,
.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form input[type="email"] {
	border-color: var(--wp--preset--color--tertiary);
}

/* Needed to style input field for various Jetpack blocks */
.wp-block-jetpack-contact-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea,
.wp-block-jetpack-mailchimp input:not([type="submit"]):not([type="checkbox"]),
.wp-block-jetpack-revue input:not([type="submit"]):not([type="checkbox"]) {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--tertiary);
	font-size: inherit;
	line-height: inherit;
	padding: 0.5rem;
}

.wp-block-jetpack-contact-form.contact-form label {
	font-weight: 400;
}

.wp-block-jetpack-contact-form.contact-form label span {
	opacity: 0.7;
}

.wp-block-jetpack-contact-form.contact-form select {
	padding: 0.5rem;
}

.wp-block-jetpack-contact-form.contact-form textarea {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Style the feedback you get after submitting the contact form */
div[id^="contact-form-"] h4 {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: inherit;
	line-height: 1.555555556;
}

div[id^="contact-form-"] .contact-form-submission {
	margin: 0;
	padding: 0;
}

/* Adjust vertical margins in the mailchimp block */
.wp-block-jetpack-mailchimp .wp-block-jetpack-button,
.wp-block-jetpack-mailchimp p {
	margin: var(--wp--preset--spacing--40) 0;
}

/* Adjust the size of the consent text in mailchimp block */
#wp-block-jetpack-mailchimp_consent-text {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0;
}

/* Remove underline from the price after discounted */
ins {
	text-decoration: none;
}

/* Fix the hardcoded wide width value in the stylesheet for TT3 */
.woocommerce.woocommerce-page main {
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 0.99;
    text-shadow: rgb(79, 234, 169) 0px 0px 2px, 
                 rgb(79, 234, 169) 0px 0px 10px, 
                 rgb(79, 234, 169) 0px 0px 20px, 
                 rgb(79, 234, 169) 0px 0px 40px, 
                 rgb(79, 234, 169) 0px 0px 80px, 
                 rgb(79, 234, 169) 0px 0px 90px, 
                 rgb(79, 234, 169) 0px 0px 100px, 
                 rgb(79, 234, 169) 0px 0px 150px;
  }
  20%, 24%, 55% {
    opacity: 0.4;
    text-shadow: none;
  }
}

.flicker-text {
  font-family: 'Comic Neue', cursive;
  animation: flicker 1.5s infinite;
  color: #4feaa9;
}

.flicker-text a {
	text-decoration: none;
    color: #4feaa9;
}

#konami-image {
  position: fixed;
  bottom: -300px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: bottom 1s ease, opacity 2s ease;
  z-index: 9999;
}

#konami-image.active {
  bottom: 20px;
  opacity: 0.15;
}

/* Aktualizacja alertu sukcesu np dodanie produktu do koszyka */
.wc-block-components-notice-banner.is-success {
	background-color: #222;
    border-color: #4feaa9;
}

.wc-block-components-notice-banner__content {
	color: #fff
}

.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward {
	color: #4feaa9 !important;
}

.woocommerce div.product form.cart table.variations .value {
	vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #4feaa9 !important;
}

.custom-cart_border {
	border: 1px solid rgba(64, 224, 208, 0.2) !important;
    border-radius: 20px;
    padding: 2rem !important;
    backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.05) !important;
}

table.wc-block-cart-items.custom-cart_border {
	background: rgba(255, 255, 255, 0.05) !important;
}

.custom-product-flex-width {
	    flex-basis: 100% !important;
}

.custom-margin-bottom {
	    margin-bottom: -50px !important;
}

#easypack_selected_point_data {
	background: transparent !important;
}

/* esteregg */
       @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

        /* Kontener dla całej animacji */
        .floating-character-container {
            position: fixed; /* Pozycja stała względem okna przeglądarki */
            bottom: 20px; /* Odstęp od dołu */
            right: 20px; /* Odstęp od prawej */
            z-index: 1000; /* Upewnij się, że jest na wierzchu innych elementów */
            display: none; /* Domyślnie ukryty */
            flex-direction: column;
            align-items: center;
            /* Definicja animacji */
            animation: floatAnimation 3s ease-in-out infinite;
        }

        /* Dymek z wiadomością */
        .speech-bubble {
            position: relative;
            background: #ffffff;
            border: 4px solid #000000; /* Gruba, czarna ramka dla stylu pixel art */
            border-radius: 10px; /* Lekko zaokrąglone rogi */
            padding: 15px;
            margin-bottom: 15px; /* Odstęp między dymkiem a postacią */
            max-width: 220px; /* Maksymalna szerokość dymka */
            text-align: center;
            /* Użycie zaimportowanej czcionki */
            font-size: 12px; /* Rozmiar czcionki */
            line-height: 1.5;
            color: #000000;
        }

        /* "Ogonek" dymka - stworzony za pomocą pseudoelementu */
        .speech-bubble::after {
            content: '';
            position: absolute;
            bottom: -20px; /* Pozycjonowanie ogonka pod dymkiem */
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            /* Sztuczka tworząca trójkąt z ramek */
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 20px solid #000000; /* Kolor ogonka taki sam jak ramki */
        }
        
        /* Obrazek postaci */
        .character-image {
            max-height: 200px; /* Maksymalna wysokość zgodna z prośbą */
            width: auto; /* Szerokość dostosuje się automatycznie */
            /* Poprawia renderowanie obrazków pixel art w niektórych przeglądarkach */
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
            transform: scaleX(-1);
        }

        /* Definicja klatek kluczowych dla animacji pływania */
        @keyframes floatAnimation {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px); /* Jak wysoko ma się unosić */
            }
            100% {
                transform: translateY(0);
            }
        }

#timer {
	margin: 0 5px;
}

        /*
         * SERCE - KONSTRUKCJA I ANIMACJA
         * Serce jest zbudowane z jednego obróconego kwadratu i dwóch
         * pseudo-elementów (::before, ::after) tworzących górne łuki.
         */
        .heart {
            position: relative;
            width: 100px;
            height: 100px;
            /* Kolor turkusowy, inspirowany napisem "PREORDER" */
            background-color: #64ffda;
            transform: rotate(-45deg);
            /* Podpięcie animacji bicia serca */
            animation: beat 1.2s ease-in-out infinite;
        }

        /* Dwa "łuki" serca stworzone z pseudo-elementów */
        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #64ffda;
            border-radius: 50%; /* Tworzy koła */
        }

        .heart::before {
            top: -50px;
            left: 0;
        }

        .heart::after {
            top: 0;
            left: 50px;
        }

        /*
         * LINIA PRZEKREŚLAJĄCA
         * Używamy elementu <span> wewnątrz serca,
         * aby stworzyć animowaną linię.
         */
        .heart span {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 8px; /* Grubość linii */
            width: 0; /* Zaczyna od zerowej szerokości */
            background-color: #64ffda;
            transform: translate(-50%, -50%); /* Centruje linię */
            opacity: 0;
            /* Podpięcie animacji przekreślenia */
            animation: strikethrough 1.2s ease-in-out infinite;
        }

        /*
         * DEFINICJE ANIMACJI (KEYFRAMES)
         */

        /* Animacja bicia serca (pulsowania) */
        @keyframes beat {
            0% { transform: rotate(-45deg) scale(1); }
            30% { transform: rotate(-45deg) scale(1.3); }
            50% { transform: rotate(-45deg) scale(1.1); }
            100% { transform: rotate(-45deg) scale(1); }
        }

        /* Animacja linii przekreślającej, zsynchronizowana z biciem */
        @keyframes strikethrough {
            0% { width: 0; opacity: 0; }
            25% { width: 0; opacity: 1; }
            30% { width: 140%; opacity: 1; } /* W szczycie bicia linia ma pełną szerokość */
            35% { width: 0; opacity: 1; } /* Szybkie zniknięcie linii */
            100% { width: 0; opacity: 0; }
        }