/* ==================================================
   RESET
================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
}
/* ==================================================
   GLASS – SPOLEČNÉ HODNOTY (DESIGN DNA)
================================================== */
:root {
  --top-bar-height: 0px;
  --glass-bg: rgba(255,255,255,0.22);
  --glass-blur: blur(14px);
  --glass-border: rgba(255,255,255,0.55);
}
/* ==================================================
   POZADÍ STRÁNKY
================================================== */
body {
  background-image: url("pozadi1.png"); /* PNG ve stejné složce */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  font-family: Arial, sans-serif;
  overflow-x: hidden;
}
/* ==================================================
   ZÁKLAD GLASS PANELU
================================================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0px solid var(--glass-border);
}
/* ==================================================
   PRAVÝ VERTIKÁLNÍ GLASS PANEL (PŮLKA STRÁNKY)
================================================== */
.vertical-glass {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  width: 45vw;
  height: calc(100vh - var(--top-bar-height));
  z-index: 3;
  pointer-events: auto;
}
.vertical-glass {
  --glass-bg: rgba(10,10,10,0.15);
  --glass-blur: blur(10px);
}
/* ==================================================
   MOBILNÍ OPTIMALIZACE
================================================== */
@media (max-width: 768px) {
  :root {
    --glass-bg: rgba(255,255,255,0.22);
    --glass-blur: blur(4px);
  }
  .top-glass {
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .enter-button {
    bottom: 0;
    font-size: 16px;
    padding: 12px 0;
  }
}
/* ==================================================
   OBSAH GLASS PANELU – FITNESS
================================================== */
.flower-content{
  position:absolute;
  top:50%;
  right:8%;
  transform:translateY(-50%);
  max-width:400px;
  text-align:left;
  pointer-events:auto;
}
/* NADPIS */
.flower-content h1{
  font-size:64px;
  color:white;
  font-weight:300;
  letter-spacing:0.05em;
  margin-bottom:16px;
  text-shadow:
    0 4px 20px rgba(0,0,0,0.25);
}
/* PODTEXT */
.flower-content p{
  font-size:20px;
  color:white;
  line-height:1.5;
  font-weight:300;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.25);
}

.flower-content h1{
  font-size:64px;
  color:white;
  font-weight:300;
  letter-spacing:0.05em;
  backdrop-filter: blur(2px);
}
/* ==================================================
   TEXT NA GLASS PANELU – FITNESS
================================================== */
.flower-text{
  position:absolute;
  top:15%;
  right:15%;
  transform:translateY(-50%);
  text-align:right;
  max-width:900px;
  z-index:1000; /* text je nad vším */
}
/* ==================================================
   TEXT NA GLASS PANELU – PODNADIS A JEHO POSUN
================================================== */
.flower-text p{
font-size:26px;
color:rgba(255,255,255,0.85);
font-weight:300;
letter-spacing:0.12em;
margin-top:20px;
margin-right:65px;
text-shadow:
    0 4px 18px rgba(0,0,0,0.25);
}
/* ==================================================
   NADPIS – DUHOVÁ ANIMACE + LUXUSNÍ GLOW
================================================== */

.flower-text h1{
  display:inline-block;
  position:relative;
  font-family:"Oswald", sans-serif;
  font-size:150px;
  font-weight:700;
  line-height:0.9;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#ffffff;
  transform:translateX(110px); /* POSUN DOPRAVA */
  text-shadow:
  0 5px 25px rgba(0,0,0,0.6),
  0 0 20px rgba(255,255,255,0.05);

}
/* ==================================================
   SVĚTELNÝ EFEKT POD TEXTEM
================================================== */
.flower-text h1::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-35px;
  width:120%;
  height:160px;
   background:radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.28) 30%,
    rgba(255,255,255,0.12) 55%,
    rgba(255,255,255,0) 85%
   );
  filter:blur(35px);
  z-index:-1;
}
/* ==================================================
   LINKA
================================================== */
.hero-line{
width:200%;
height:2px;
margin-top:4px;
margin-bottom:40px;
margin-left:-90%;
background:linear-gradient(
to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.3) 20%,
rgba(255,255,255,0.9) 50%,
rgba(255,255,255,0.3) 80%,
rgba(255,255,255,0) 100%
);
}
/* ==================================================
   ANIMACE DUHY
================================================== */
@keyframes rainbowSweep{
  0%{
    background-position:200% 0;
  }
  100%{
    background-position:-200% 0;
  }
}
/* ==================================================
   PODTEXT
================================================== */
.flower-text p{
  font-size:32px;
  color:rgba(255,255,255,0.85);
  font-weight:300;
  letter-spacing:0.12em;
  margin-top:12px;
  text-shadow:
      0 4px 18px rgba(0,0,0,0.25);
}
/* =================================================
   SEKCÍ TLAČÍTKA
================================================= */
.flower-buttons{
display:flex;
flex-direction:column;   /* tlačítka pod sebe */
gap:30px;
position:absolute;
top:63%;
left:4%;                 /* přesun z prava doleva */
transform:translateY(-50%);
z-index:1000;
/* důležité – umožní hover uvnitř glass panelu */
pointer-events:auto;
}
/* =================================================
   GLASS ČTVEREC TLAČÍTKO 
================================================= */
.flower-circle{
width:120px;
height:120px;
border-radius:12%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-decoration:none;
color:white;
/* jemnější glass */
background:rgba(255,255,255,0.12);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.20);
/* BÍLÝ GLASS STÍN */
.flower-circle{
box-shadow:
0 6px 18px rgba(0,0,0,0.30),
0 0 14px rgba(255,255,255,0.10),
0 0 30px rgba(255,255,255,0.05);
}
transition:all 0.35s ease;
position:relative;
/* důležité pro hover */
pointer-events:auto;
}
/* =================================================
   KVĚTINA
================================================= */
.flower-icon img{
width:62px;
height:auto;
filter:drop-shadow(0 0 6px rgba(255,255,255,0.6));
}
.flower-circle:hover .flower-icon img{
transform:scale(1.2);
}
/* =================================================
   TEXT - TLAČÍTKA 
================================================= */
.flower-circle span{
font-size:14px;
font-weight:600;
letter-spacing:0.05em;
opacity:1;
/* světlý glow místo tmavého stínu */
text-shadow:
0 0 6px rgba(255,255,255,0.6),
0 0 12px rgba(255,255,255,0.4);
}
/* =================================================
   HOVER EFEKT
================================================= */
.flower-circle:hover{
animation:flowerShake 0.6s ease;
/* jemný glass glow bez tmavého stínu */
box-shadow:
0 0 18px rgba(255,255,255,0.35),
inset 0 0 20px rgba(255,255,255,0.35);
}
/* květina lehce poskočí */
.flower-circle:hover .flower-icon{
transform:translateY(-6px) scale(1.15);
}
/* =================================================
   ZATŘESENÍ
================================================= */
@keyframes flowerShake{
0%{ transform:scale(1) rotate(0deg); }
25%{ transform:scale(1.04) rotate(1deg); }
50%{ transform:scale(1.04) rotate(-1deg); }
75%{ transform:scale(1.03) rotate(1deg); }
100%{ transform:scale(1.05) rotate(0deg); }
}
/* =================================================
   SPODNÍ FOTO PÁS
================================================= */
.flower-strip{
position:fixed;
bottom:0;
left:0;
width:100%;
height:120px;
display:flex;
align-items:center;
overflow:hidden;
z-index:500;
background:none;
border-top:1px solid rgba(255,255,255,0.10);
box-shadow:
0 -15px 40px rgba(0,0,0,0.25) inset;
}
/* =================================================
   FADE OKRAJE GALERIE
================================================= */
.flower-strip::before,
.flower-strip::after{
content:"";
position:absolute;
top:0;
height:100%;
width:520px;   /* ještě delší fade */
z-index:10;
pointer-events:none;
}
.flower-strip::before{
left:0;
background:linear-gradient(
to right,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.45) 20%,
rgba(255,255,255,0.35) 35%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0.15) 65%,
rgba(255,255,255,0.07) 80%,
rgba(255,255,255,0.0) 100%
);
}
.flower-strip::after{
right:0;
background:linear-gradient(
to left,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.45) 20%,
rgba(255,255,255,0.35) 35%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0.15) 65%,
rgba(255,255,255,0.07) 80%,
rgba(255,255,255,0.0) 100%
);
}
/* =================================================
   TRACK
================================================= */
.flower-track{
display:flex;
gap:20px;
width:max-content;
padding:15px;
animation:flowerScroll 30s linear infinite;
}
/* =================================================
   OBRÁZKY
================================================= */
.flower-track img{
height:110px;
width:260px;   /* důležité */
border-radius:16px;
object-fit:cover;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}
/* =================================================
   NEKONEČNÝ POHYB
================================================= */
@keyframes flowerScroll{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}
/* ==================================================
   GLASS PANEL NA ZAHRADU - KYTICE
================================================== */
.garden-overlay{
position:fixed;
overflow:hidden;
top:140px;
left:660px;
width:45vw;
height:70vh;
background:linear-gradient(
180deg,
rgba(255,255,255,0.45) 0%,
rgba(255,255,255,0.28) 100%
);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-radius:12px;
border:2px solid rgba(255,255,255,0.45);
box-shadow:
0 30px 80px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,255,255,0.35) inset;
padding:50px;
color:white;
opacity:0;
visibility:hidden;
pointer-events:none;
transform-origin:top left;
transform:none;
transition:
transform 0.5s cubic-bezier(.22,.9,.3,1),
opacity 0.25s ease;
z-index:6;
}
.garden-overlay.active{
visibility:visible;
pointer-events:auto;
opacity:1;
}
.garden-overlay::after{
content:"";
position:absolute;
top:-120%;
left:-40%;
width:80%;
height:300%;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.25) 45%,
rgba(255,255,255,0.55) 50%,
rgba(255,255,255,0.25) 55%,
rgba(255,255,255,0) 100%
);
transform:rotate(25deg);
opacity:0;
pointer-events:none;
}
.garden-overlay.active::after{
animation:glassLight 1.2s ease;
}
@keyframes glassLight{
0%{ left:-60%; opacity:0; }
30%{ opacity:1; }
100%{ left:120%; opacity:0; }
}
.garden-overlay-content img{
width:100%;
max-height:260px;
border-radius:14px;
margin:20px 0;
object-fit:cover;
box-shadow:none;
}
.garden-overlay-content ul{
margin-top:15px;
line-height:1.7;
}
/* =================================================
   KLIK EFEKT KVĚTINY
================================================= */
.flower-circle:active{
transform:scale(0.9);
}
/* jemné pulzování při hover */
.flower-circle:hover .flower-icon{
animation:flowerGrow 0.6s ease;
}
@keyframes flowerGrow{
0%{
transform:scale(1);
}
50%{
transform:scale(1.25);
}
100%{
transform:scale(1.15);
}
}
/* =================================================
   ZTMAVENÍ PŘI OTEVŘENÍ PANLU 
================================================= */
#pageDim{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
backdrop-filter:blur(3px);
z-index:5;
display:none;
cursor:pointer; 
}
/* =================================================
   TLAČÍTKO VSTUP DO SHOPU
================================================= */
.shop-enter{
display:inline-block;
margin-top:20px;
margin-bottom:25px;   /* odsazení od textu */
padding:14px 28px;
border-radius:14px;
background:linear-gradient(
180deg,
rgba(255,248,235,0.75) 0%,
rgba(255,235,205,0.45) 100%
);
color:white;
text-decoration:none;
font-weight:600;
border:1px solid rgba(255,255,255,0.45);
backdrop-filter:blur(8px);
transition:0.3s;
}
.shop-enter:hover{
transform:translateY(-3px);
box-shadow:
0 0 20px rgba(255,255,255,0.45),
inset 0 0 20px rgba(255,255,255,0.35);
}
.shop-cta{
margin-top:18px;
margin-bottom:12px;
font-size:15px;
color:rgba(255,255,255,0.9);
}



/* =================================================
   SCROLL UVNITŘ PANELU
================================================= */
.garden-overlay-content{
height:calc(70vh - 100px);
overflow-y:auto;
overflow-x:hidden;
padding-right:10px;
padding-bottom:30px;
scrollbar-width:none;
scroll-behavior:smooth;
}
.garden-overlay-content::-webkit-scrollbar{
display:none;
}
.garden-overlay-content{
scroll-behavior:smooth;
}
@media (max-width:768px){
.garden-overlay-content{
height:calc(70vh - 60px);
}
}
/* =================================================
   SCHOVANÝ FILMOVÝ PÁS
================================================= */
.flower-strip{
display:none;
}
/* =================================================
   CHAT BOT – FITNESS OBJEDNÁVKY
================================================= */

.chat-bot{

position:fixed;

right:40px;
bottom:40px;

width:90px;
height:90px;

border-radius:50%;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

gap:4px;

cursor:pointer;

background:rgba(0,0,0,0.35);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,0.35);

box-shadow:
0 10px 35px rgba(0,0,0,0.35),
inset 0 0 20px rgba(255,255,255,0.25);

z-index:9999;

transition:all .3s ease;

}

.chat-bot:hover{

transform:scale(1.1);

box-shadow:
0 0 25px rgba(255,255,255,0.45),
inset 0 0 25px rgba(255,255,255,0.35);

}

.chat-bot img{

width:38px;
height:auto;

filter:drop-shadow(0 0 8px rgba(255,255,255,0.6));

}

.chat-bot span{

font-size:13px;
color:white;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;

text-shadow:
0 0 6px rgba(255,255,255,0.6),
0 0 12px rgba(255,255,255,0.3);

}
/* =================================================
   CHAT PANEL
================================================= */

.chat-window{

position:fixed;

right:40px;
bottom:150px;

width:370px;
height:560px;

background:rgba(255,255,255,0.15);
backdrop-filter:blur(14px);

border-radius:16px;

border:1px solid rgba(255,255,255,0.35);

box-shadow:
0 30px 80px rgba(0,0,0,0.45);

display:none;

flex-direction:column;

overflow:hidden;

z-index:9999;

}

.chat-window.active{
display:flex;
}

/* header */

.chat-header{

padding:16px;

font-weight:600;

background:rgba(0,0,0,0.25);

color:white;

}

/* messages */
.chat-messages{

flex:1;

padding:16px;

overflow-y:auto;

color:white;

/* skrytý scrollbar */

scrollbar-width:none;

}

.chat-messages::-webkit-scrollbar{

display:none;

}


/* input */

.chat-input{

display:flex;

border-top:1px solid rgba(255,255,255,0.25);

}

.chat-input input{

flex:1;

border:none;

padding:12px;

background:transparent;

color:white;

}

.chat-input button{

background:none;

border:none;

color:white;

padding:12px;

cursor:pointer;

}
/* =================================================
   MENU CHAT / REZERVACE
================================================= */

.chat-menu{

display:flex;

border-bottom:1px solid rgba(255,255,255,0.25);

}

.chat-menu button{

flex:1;

padding:10px;

background:transparent;

border:none;

color:white;

cursor:pointer;

font-weight:600;

transition:0.2s;

}

.chat-menu button:hover{

background:rgba(255,255,255,0.15);

}

/* =================================================
   REZERVACE
================================================= */

.booking{

display:flex;

flex-direction:column;

gap:10px;

padding:15px;

color:white;

}

.booking input,
.booking select{

padding:8px;

border-radius:6px;

border:none;

}

.booking button{

padding:10px;

border:none;

border-radius:8px;

background:#ff7a00;

color:white;

cursor:pointer;

font-weight:600;

}

.booking button:hover{

background:#ff9b30;

}
/* =================================================
   REZERVAČNÍ SLOTY
================================================= */

#bookingSection{

padding:16px;

color:white;

}

#bookingSection h3{

margin-bottom:14px;
font-weight:600;
font-size:16px;

}

/* blok dne */

.day-block{

margin-bottom:16px;

}

/* název dne */

.day-block h4{

font-size:14px;
margin-bottom:6px;
opacity:0.9;

}

/* container časů */

.time-slots{

display:flex;
flex-wrap:wrap;
gap:8px;

}

/* tlačítko času */

.slot{

background:rgba(255,255,255,0.18);

border:1px solid rgba(255,255,255,0.35);

border-radius:10px;

padding:6px 12px;

color:white;

cursor:pointer;

font-size:13px;

backdrop-filter:blur(8px);

transition:all .2s ease;

}

/* hover */

.slot:hover{

background:#ff7a00;

border-color:#ff7a00;

transform:scale(1.05);

}
/* =================================================
   SCROLL PRO CHAT A REZERVACE
================================================= */

.chat-body{

flex:1;

overflow-y:auto;

scrollbar-width:none;

scroll-behavior:smooth;

}

.chat-body::-webkit-scrollbar{

display:none;

}
/* =================================================
   SCROLL PRO REZERVACE
================================================= */

#bookingSection{

overflow-y:auto;

scrollbar-width:none;

}

#bookingSection::-webkit-scrollbar{

display:none;

}

.chat-header{

padding:16px;

font-weight:600;

background:rgba(0,0,0,0.25);

color:white;

display:flex;
align-items:center;
gap:10px;

}

.chat-icon{

width:20px;
height:auto;

filter:drop-shadow(0 0 6px rgba(255,255,255,0.6));

}

button,
a,
span,
div{

caret-color:transparent;

}
.chat-bot{

user-select:none;

-webkit-user-select:none;
-moz-user-select:none;

}
.booking label{

margin-top:10px;
font-size:13px;

}

.booking input{

margin-top:5px;
padding:8px;

background:rgba(255,255,255,0.2);

border:1px solid rgba(255,255,255,0.35);

color:white;

}

.booking-form{

margin-top:10px;

padding:10px;

background:rgba(255,255,255,0.15);

border-radius:8px;

backdrop-filter:blur(8px);

display:flex;
flex-direction:column;
gap:6px;

}

.booking-form input{

padding:6px;

border-radius:6px;

border:none;

}

.booking-form button{

margin-top:5px;

background:#ff7a00;

border:none;

color:white;

padding:6px;

border-radius:6px;

cursor:pointer;

}

/* =================================================
   FITNESS CHAT PHONE
================================================= */

.fitness-chat-phone{

width:270px;
height:470px;

margin:370px auto 0 auto;

border-radius:26px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,0.2);

overflow:hidden;

box-shadow:

0 12px 30px rgba(0,0,0,0.35),
0 0 20px rgba(255,255,255,0.15),
0 0 45px rgba(255,255,255,0.08);

}

/* header telefonu */

.phone-header{

font-size:12px;
font-weight:300;

letter-spacing:0.05em;

color:rgba(255,255,255,0.95);

text-align:center;

text-shadow:0 1px 2px rgba(0,0,0,0.4);

padding:12px 0; 
}

/* displej */

.phone-screen{

height:310px;

overflow:hidden;

position:relative;

}

/* feed zpráv */

.phone-feed{
position:absolute;
top:0;
width:100%;
animation:phoneScroll 25s linear infinite;
}

/* zpráva */

.phone-msg{

font-size:12px;

padding:8px 10px;

margin:6px;

border-radius:10px;

}

/* zpráva klient */

.phone-msg.user{

background:rgba(255,255,255,0.15);

}

/* zpráva trenér */

.phone-msg.trainer{

background:rgba(0,255,150,0.2);

}

/* animace scroll */

@keyframes phoneScroll{

0%{
transform:translateY(0);
}

100%{
transform:translateY(-50%);
}

}

.phone-screen::before,
.phone-screen::after{
content:"";
position:absolute;
left:0;
width:100%;
height:40px;
pointer-events:none;
z-index:2;
}

.phone-screen::before{
top:0;
background:linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
}

.phone-screen::after{
bottom:0;
background:linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}

/* =================================================
   MOBILE LAYOUT – FITNESS
================================================= */

@media (max-width:768px){

/* ===== GLASS PANEL 75% ===== */

.vertical-glass{
width:75%;
height:100%;
right:0;
top:0;
}

/* ===== NADPIS (NECHÁVÁME BEZ ZMĚNY) ===== */

.flower-text{

top:40px;
left:-62px;

transform:none;

text-align:left;

width:80%;

}

/* FITNESS */

.flower-text h1{

font-size:46px;
line-height:1.05;

}

/* ===== LINKA – vycentrovat POD NADPIS ===== */

.hero-line{

width:160px;

margin:20px auto 12px auto;

display:block;

transform:translateX(100px);

}

/* ===== PODNADPIS – vycentrovat pod linku ===== */

.flower-text p{

font-size:17px;

margin-top:6px;

text-align:center;

max-width:220px;

margin-left:auto;
margin-right:auto;

transform:translateX(100px);

}

/* ===== TELEFON – ZŮSTÁVÁ ===== */

.fitness-chat-phone{

width:190px;
height:340px;

margin:-25px auto 0 auto;

display:block;

transform:translateX(10px);
}

/* ===== TLAČÍTKA – POSUNOUT NÍŽ ===== */
.flower-buttons{

position:relative;

margin:90px auto 0 auto;

transform:translateX(6px);

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

justify-content:center;

width:150px;

}


/* menší tlačítka */

.flower-circle{

width:60px;
height:60px;

border-radius:16px;

}

/* ikony */

.flower-icon img{

width:28px;

}

/* text */

.flower-circle span{

font-size:10px;

}

}


/* =================================================
   MOBILE - CENTER MODAL PANEL
================================================= */

@media (max-width:768px){

.garden-overlay{

position:fixed !important;

top:50% !important;
left:50% !important;

right:auto !important;
bottom:auto !important;

transform:translate(-50%, -50%) !important;

width:92vw !important;
max-width:420px;

height:auto !important;
max-height:80vh;

margin:0 !important;

overflow-y:auto;

}

}
/* =================================================
   MOBILE – CHAT PANEL CENTRUM BUBLINA
================================================= */

@media (max-width:768px){

.chat-window{

position:fixed !important;

top:44% !important;
left:50% !important;

right:auto !important;
bottom:auto !important;

transform:translate(-50%, -50%) !important;

width:92vw;
max-width:420px;

height:80vh;

}

}

@media (max-width:768px){

.chat-bot{

right:18px;
bottom:18px;

width:65px;
height:65px;

}

.chat-bot img{
width:28px;
}

.chat-bot span{
font-size:10px;
}

}