@charset "utf-8";
/* ==========================================================================
   perkisau.lt: PRANEŠIMŲ JUOSTA puslapio viršuje.

   Turinį rašo savininkas skydelyje (Akcijos tekstas viršuje), o į puslapį jį
   atiduoda top_info_text() function/function_site.php faile. Funkcija piešia
   <div class="top-info-text"> prieš #container, ir tik tada, kai info_text
   lentelėje status = 1. Kai varnelė nuimta, juostos HTML'e nėra visai, tad
   šios taisyklės niekam nekliūva.

   Kodėl atsirado (2026-08-02). Juosta veikė, bet atrodė kaip iš 2015-ųjų:
   ryškus žalias gradientas, sistemos šriftas, jokios hierarchijos. Savininko
   formuluotė: „reikia kad ji iškart atkreiptų lankytojo dėmesį". Iš trijų
   variantų (smaragdinė, vyšninė, gintarinė) pasirinkta gintarinė.

   Kodėl būtent gintarinė. Parduotuvės viršus yra kreminis (#ECE4E1) su tamsia
   juosta (#221B1E) po pranešimu. Tamsus pranešimas su ta juosta susilietų į
   vieną bloką, o šviesus gintaras lieka vienintelis šviesus akcentas ir tamsi
   juosta jį dar pabrėžia. Tamsus tekstas ant šviesaus fono ir skaitosi
   geriausiai: kontrastas su #2E1C0B yra 8,7:1, tai virš WCAG AAA.

   Kodėl atskiras failas, o ne reskin-apvalkalas.css. Tas failas jau 412
   eilučių, o projekto riba yra 400 (file-size-guard).

   Įkėlimo eilė svarbi: failas kraunamas PO style.min.css, kur guli senosios
   .top-info-text taisyklės (0,1,0). Čia visur prefiksas body.reskin, tai yra
   (0,2,1), tad senosios pralaimi ir specifiškumu, ir eile. Žymę reskin deda
   visi trys šablonai be sąlygos, tad juosta vienoda visoje parduotuvėje.
   ========================================================================== */

/* Flex, o ne block, dėl taškelio kairėje: :before yra flex elementas ir stovi
   toje pačioje eilutėje kaip tekstas. CKEditor turinį apvynioja į <p>, tad be
   flex taškelis nukristų į atskirą eilutę.

   nowrap yra tyčinis ir svarbus. Su wrap telefone ilgas pranešimas nustumdavo
   <p> žemyn, o taškelis likdavo vienas pirmoje eilutėje ir kabodavo virš teksto
   kaip atsitiktinė dėmė (matuota per 390 taškų). Dabar vyniojasi tik tekstas
   <p> viduje, o taškelis lieka eilutės kairėje ir vertikaliai centre.
   min-width:0 leidžia <p> susitraukti: be jo flex elementas nesiaurėtų žemiau
   savo turinio pločio ir tekstas išsiveržtų už juostos.

   overflow:hidden laiko blyksnį juostos ribose. */
body.reskin .top-info-text {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 11px;
	padding: 13px 26px;
	background: #E9B44C;
	color: #2E1C0B;
	font-family: 'Outfit', sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.005em;
	text-align: center;
}
body.reskin .top-info-text p { margin: 0; min-width: 0; }

/* Nuoroda pranešime. Savininkas ją gali įdėti per skydelio redaktorių, o be
   šitų eilučių ji paveldėtų mėlyną naršyklės spalvą ant gintarinio fono. */
body.reskin .top-info-text a {
	color: #2E1C0B;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.reskin .top-info-text a:hover { color: #8A3355; }

/* Pulsuojantis taškelis. Vyšninis, nes ta pati spalva laiko meniu ir mygtukų
   akcentus, tad juosta lieka parduotuvės dalimi, o ne svetimu skydeliu. */
body.reskin .top-info-text:before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8A3355;
	animation: pranesimo-taskas 2.4s ease-out infinite;
}
@keyframes pranesimo-taskas {
	0%   { box-shadow: 0 0 0 0 rgba(138, 51, 85, 0.6); }
	70%  { box-shadow: 0 0 0 9px rgba(138, 51, 85, 0); }
	100% { box-shadow: 0 0 0 0 rgba(138, 51, 85, 0); }
}

/* Šviesos banga. Praeina kas 6,5 sekundės ir pagauna periferinį regėjimą, bet
   skaityti netrukdo: baltumas 0,38, o didžiąją ciklo dalį ji stovi už dešinio
   krašto. pointer-events:none būtinas, kitaip ji uždengtų nuorodą pranešime. */
body.reskin .top-info-text:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.38) 48%, rgba(255, 255, 255, 0) 66%);
	transform: translateX(-100%);
	animation: pranesimo-blyksnis 6.5s ease-in-out infinite;
}
@keyframes pranesimo-blyksnis {
	0%        { transform: translateX(-100%); }
	55%, 100% { transform: translateX(100%); }
}

/* Telefonas. Tekstas krenta į dvi eilutes, tad tarpai mažinami, o taškelis
   lieka to paties dydžio: sumažintas jis nustotų būti signalu. */
@media only screen and (max-width: 767px) {
	body.reskin .top-info-text {
		gap: 9px;
		padding: 11px 16px;
		font-size: 13.5px;
	}
}

/* Kam sistemoje įjungta „mažinti judesį", juosta lieka rami. Blyksnis tada
   ne stabdomas, o pašalinamas: sustabdyta banga liktų stovėti ekrane. */
@media (prefers-reduced-motion: reduce) {
	body.reskin .top-info-text:before { animation: none; }
	body.reskin .top-info-text:after { display: none; }
}