/* ================================
RESET
================================ */
*{
box-sizing:border-box;
margin:0;
padding:0;
}

html,body{
width:100%;
height:100%;
font-family:"Montserrat",sans-serif;
overflow-x:hidden;
}

/* ================================
POZADÍ
================================ */

body{
background:url("pozadi1.png") center/cover no-repeat;
}

/* ================================
GLASS PROMĚNNÉ
================================ */

:root{
--glass-bg:rgba(255,255,255,0.15);
--glass-blur:blur(12px);
--glass-border:rgba(255,255,255,0.4);
}

/* ================================
GLASS ZÁKLAD
================================ */

.glass{
background:var(--glass-bg);
backdrop-filter:var(--glass-blur);
-webkit-backdrop-filter:var(--glass-blur);
border:0px solid var(--glass-border);
}

/* ================================
SPODNÍ PANEL
================================ */

.vertical-glass{

position:fixed;
bottom:0;
left:0;

width:100%;
height:35vh;

background:rgba(255,140,40,0.18);
backdrop-filter:blur(12px);

z-index:3;

}

/* ================================
HERO TEXT BLOK
================================ */

.flower-text{

position:absolute;

top:-170%;
right:3%;

text-align:right;

max-width:none;

z-index:10;

}

/* ================================
HERO NADPIS
================================ */

.hero-title{

font-size:100px;
font-weight:900;
line-height:1.05;
letter-spacing:0.06em;
text-transform:uppercase;

background:linear-gradient(
90deg,
#ffffff,
#ffc78a,
#ffffff,
#ffa95c,
#ffffff
);

background-size:250%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:heroFlow 18s linear infinite;

}

.hero-title p{
margin:0;
}

.line1{
white-space:nowrap;
}

/* ================================
ANIMACE NADPISU
================================ */

@keyframes heroFlow{

0%{background-position:300%;}
100%{background-position:0%;}

}

/* ================================
PODNADPIS
================================ */

.flower-text p:not(.line1){
font-size:inherit;
color:rgba(255,255,255,0.9);
font-weight:300;
letter-spacing:0.12em;
text-shadow:0 4px 18px rgba(0,0,0,0.4);
margin-top:10px;
}

/* ================================
ODDĚLOVACÍ LINKA
================================ */

.hero-line{

position:absolute;

top:400px;
left:84%;

transform:translateX(-50%);

width:500px;
height:2px;

background:linear-gradient(
to right,
rgba(255,255,255,0),
rgba(255,255,255,0.9),
rgba(255,255,255,0)
);

}
/* ================================
SEKČNÍ TLAČÍTKA
================================ */

.flower-buttons{

display:flex;
flex-direction:row; 
gap:28px;

position:absolute;

top:70%;
right:5%;

transform:translateY(-50%);

z-index:20;

}

/* tlačítko */

.flower-circle{

width:130px;
height:80px;

border-radius:10px;

position:relative;
overflow:hidden;

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

text-decoration:none;
color:white;

border:3px solid rgba(255,255,255,0.25);

transition:0.3s;

}

.flower-circle:hover{

transform:translateY(-5px);

box-shadow:
0 0 18px rgba(255,255,255,0.4);

}
.flower-circle.clicked{

transform:scale(1.08);

box-shadow:
0 0 30px rgba(255,255,255,0.6);

transition:0.35s;

}
.flower-icon img{

width:42px;

}

.flower-circle span{

position:relative;
z-index:2;

font-size:15px;
font-weight:700;

text-shadow:0 2px 6px rgba(0,0,0,0.6);

}

/* ================================
CHAT BUBLINA
================================ */

.chat-bot{

position:fixed;

left:135px;
bottom:35px;

width:110px;
height:110px;

border-radius:50%;

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

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

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

color:white;

cursor:pointer;

z-index:999;

}

/* ================================
CHAT OKNO
================================ */
.chat-window{
color:#5a2f12;
}

.chat-window{

position:fixed;

left:150px;      /* ← místo right */
bottom:60px;

width:550px;    /* větší chat */
height:420px;

background:rgba(255,255,255,0.12);
backdrop-filter:blur(18px);

box-shadow:
0 10px 30px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.35);

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

display:flex;
flex-direction:column;

overflow:hidden;

z-index:1000;

}

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

.chat-header{

padding:16px 18px;

font-size:17px;

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

background:linear-gradient(
to right,
rgba(0,0,0,0.35),
rgba(0,0,0,0.15)
);

color:white;

letter-spacing:0.4px;

}

.chat-messages{

flex:1;
padding:14px;
overflow-y:auto;

color:#ffffff;

}

.chat-input{

display:flex;

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

}

.chat-input input{

flex:1;
padding:10px;

background:transparent;
border:none;
color:white;

}

.chat-input button{

border:none;
background:none;
color:white;
padding:10px;
cursor:pointer;

}

.chat-menu{

position:sticky;
top:0;

display:flex;
justify-content:center;   /* centrování tlačítek */
align-items:center;

gap:12px;

padding:10px 12px;

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

backdrop-filter:blur(10px);

z-index:10;

}
.chat-menu button.active{

background:#ffc78a;

color:#3b2314;

box-shadow:0 2px 8px rgba(0,0,0,0.25);

}
.chat-menu button{

background:rgba(255,255,255,0.25);
border:none;

padding:6px 14px;

border-radius:6px;

font-size:14px;
cursor:pointer;

color:#5a2f12;
font-weight:600;

transition:0.25s;

}

.chat-menu button:hover{

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

}

.chat-body{

flex:1;
overflow-y:auto;

padding:20px;

display:flex;
flex-direction:column;

align-items:center;
justify-content:flex-start;

position:relative;

color:#5a2f12;

/* skrytí scrollu */

scrollbar-width:none;       /* Firefox */
-ms-overflow-style:none;    /* IE / starý Edge */

}

/* Chrome / Safari / nový Edge */

.chat-body::-webkit-scrollbar{
width:0px;
height:0px;
background:transparent;
}

.request-text{

width:100%;

min-height:120px;

padding:12px;

border-radius:6px;

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

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

margin-bottom:10px;

font-size:14px;

font-family:inherit;

resize:none;

outline:none;

overflow:hidden;

}

.request-text::-webkit-scrollbar{
display:none;
}

/* Chrome / Safari */

.chat-body::-webkit-scrollbar{
display:none;
}

.chat-body{
scroll-behavior:smooth;
}
#bookingSection{

width:100%;

text-align:center;

color:#5a2f12;

}
.chat-body::before{

top:0;

background:linear-gradient(
to bottom,
rgba(120,70,30,0.55),
rgba(120,70,30,0)
);

}
.chat-body::after{

bottom:0;

background:linear-gradient(
to top,
rgba(120,70,30,0.55),
rgba(120,70,30,0)
);

}
.chat-body::before,
.chat-body::after{

content:"";

position:absolute;

left:0;
width:100%;

height:40px;

pointer-events:none;

z-index:5;

}
#reservationSlots{

display:grid;

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

gap:18px;

margin-top:20px;

}

.slot,
.time-slot{

background:white;

border:none;

padding:8px 0;

border-radius:6px;

font-weight:600;

font-size:13px;

cursor:pointer;

transition:0.2s;

box-shadow:0 2px 6px rgba(0,0,0,0.15);

}

.slot:hover,
.time-slot:hover{

background:#ffc78a;

transform:translateY(-2px);

box-shadow:0 6px 14px rgba(0,0,0,0.25);

}

.slot.selected{

background:#ffb46b;

color:#2d1b10;

}
.quick-actions{

display:grid;

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

gap:8px;

margin-top:10px;

}

.quick-actions button{

padding:12px;

border:none;
outline:none;
box-shadow:none;

border-radius:10px;

background:#e3c29b;

color:#5a2f12;

font-weight:600;

cursor:pointer;

transition:0.25s;

}

.quick-actions button:hover{

background:#d8a972;

transform:translateY(-1px);

box-shadow:0 6px 16px rgba(0,0,0,0.25);

}

.quick-actions button:last-child{
grid-column:1 / -1;
}

.chat-body input{

width:100%;

padding:10px 12px;

border-radius:6px;

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

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

margin-bottom:10px;

font-size:14px;

}

.chat-body label{

font-size:13px;
font-weight:600;

margin-top:8px;

color:#2d1b10;

}

.day-block{

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

padding:14px;

border-radius:10px;

backdrop-filter:blur(8px);

box-shadow:0 4px 12px rgba(0,0,0,0.2);

}
.time-slots{

display:grid;

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

gap:8px;

}

.chat-back{

margin-top:20px;

padding:10px 18px;

border-radius:8px;

border:none;

background:linear-gradient(
to bottom,
#f0d1a8,
#d8a972
);

color:#3b2314;

font-weight:600;

cursor:pointer;

transition:0.25s;

box-shadow:0 3px 10px rgba(0,0,0,0.2);

}

.chat-back:hover{

transform:translateY(-2px);

box-shadow:0 6px 16px rgba(0,0,0,0.3);

background:linear-gradient(
to bottom,
#ffc78a,
#d8a972
);

}

.chat-body h3{
color:#5a2f12;
}

.chat-messages{
color:#5a2f12;
}

.chat-body input,
.chat-body textarea{
color:#3b2314;
}

.chat-body label{
color:#3b2314;
}

.booking-form{
color:#3b2314;
}


/* ================================
FOOTER
================================ */

.pk-signature{

position:fixed;

bottom:12px;
left:50%;

transform:translateX(-50%);

font-size:13px;

color:white;
opacity:0.7;

}

.pk-signature a{
color:white;
text-decoration:none;
}

/* ================================
ROZBALOVACÍ PANEL
================================ */
.garden-overlay{

position:fixed;
top:50%;
left:50%;

width:85%;
height:85%;

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

opacity:0;
pointer-events:none;

/* glass plocha */
background: rgba(255,255,255,0.38);

backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);

border-radius:30px;   /* ← toto přidej */

z-index:9999;

transition:
transform 0.95s cubic-bezier(.22,1,.36,1),
opacity 0.35s ease;

}

.garden-overlay.active{
opacity:1;
pointer-events:auto;
}

/* samostatný rámeček */

.garden-overlay::before{

content:"";

position:absolute;

inset:-35px;   /* rám jde ven */

border:35px solid rgba(255,255,255,0.20);

border-radius:65px;   /* ← toto přidej */
pointer-events:none;

}

/* =================================================
   GLASS PANEL - OBRÁZEK-TEXT-GALERIE
================================================= */

.garden-overlay-content{

width:70%;
max-width:1000px;

margin:50px auto 0 auto;

display:flex;
gap:120px;   /* zmenšeno z 220 */
align-items:flex-start;

}

.panel-gallery{

flex:0 0 520px;
position:relative;

height:420px;

overflow:hidden;
border-radius:12px;

margin-top:10px;

/* centrování */
display:flex;
align-items:center;
justify-content:center;

}

/* =================================================
   FILMOVÝ PÁS GALERIE
================================================= */

.gallery-track{
display:flex;
gap:20px;
height:100%;
align-items:center;

width:max-content;   /* důležité */

animation:filmMove 50s linear infinite;
}

.gallery-track{
will-change:transform;
}

.gallery-track img{

width:380px;        /* pevná šířka */
height:280px;       /* menší výška = široký obdélník */

object-fit:cover;   /* obrázek vyplní box */

border-radius:10px;
border:3px solid #e3c29b;

flex-shrink:0;      /* důležité pro filmový pás */

}

/* BONUS – zastaví pás při hover */

.panel-gallery:hover .gallery-track{
animation-play-state:paused;
}

/* pohyb pásu */

@keyframes filmMove{

0%{
transform:translateX(0);
}

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

}
/* =================================================
   PANEL HEADER IMAGE
================================================= */
/* nadpis sekce */

.garden-overlay-content h2{

font-size:34px;
margin-bottom:18px;
margin-top:0;
color:#3b2314;

text-shadow:
0 0 2px rgba(255,255,255,0.12),
0 2px 6px rgba(0,0,0,0.35);

}

/* text panelu */

.garden-overlay-content p{

margin-bottom:17px;
line-height:1.7;

font-size:18px;      /* větší text */
font-weight:600;     /* větší váha */

color:#3b2314;;/* tmavší dřevěná */

text-shadow:
0 0 2px rgba(255,255,255,0.12),
0 2px 6px rgba(0,0,0,0.35);

}

.garden-overlay-content li{

font-size:18px;
font-weight:500;

color:#3b2314;

line-height:1.7;

text-shadow:
0 0 2px rgba(255,255,255,0.12),
0 2px 6px rgba(0,0,0,0.35);
}
.garden-overlay-content ul{
margin-top:10px;
padding-left:20px;
}

.flower-icon{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

.flower-icon img{

width:100%;
height:100%;

object-fit:cover;

}

.flower-icon::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
}

.panel-hero{

width:100%;
max-width:none;

height:220px;

margin:0;

background-size:cover;
background-position:center;

border-radius:30px 30px 0 0;

}
/* ================================
PANEL CLOSE BUTTON
================================ */

.panel-close{

position:absolute;

top:18px;
right:18px;

width:40px;
height:40px;

background:rgba(255,255,255,0.35);
backdrop-filter:blur(8px);

border-radius:50%;
border:1px solid rgba(255,255,255,0.5);

cursor:pointer;

transition:all .25s ease;

z-index:20000;

}

/* čáry křížku */

.panel-close::before,
.panel-close::after{

content:"";

position:absolute;

top:50%;
left:50%;

width:18px;
height:2px;

background:#3b2314;

transform-origin:center;

}

.panel-close::before{
transform:translate(-50%,-50%) rotate(45deg);
}

.panel-close::after{
transform:translate(-50%,-50%) rotate(-45deg);
}

.panel-close:hover{

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

box-shadow:0 0 10px rgba(255,255,255,0.6);

transform:rotate(90deg);

}
/* ================================
RESPONSIVE PANEL
================================ */


.panel-gallery{

width:100%;
max-width:520px;
height:300px;

position:relative;
overflow:hidden;

border-radius:12px;

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

}
.panel-gallery::after{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

background:linear-gradient(
to right,
rgba(0,0,0,0.45),
rgba(0,0,0,0.15) 20%,
rgba(0,0,0,0) 40%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,0.15) 80%,
rgba(0,0,0,0.45)
);

}

#pageDim{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

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

opacity:0;
pointer-events:none;

transition:opacity .4s ease;

z-index:9998;

}

#pageDim.active{
opacity:1;
pointer-events:auto;
}

.chat-body::-webkit-scrollbar{
width:0px !important;
height:0px !important;
background:transparent;
}

.chat-body::-webkit-scrollbar-thumb{
background:transparent;
}

.chat-body{
scrollbar-width:none !important;
}
.chat-messages{

flex:1;
padding:14px;

overflow-y:auto;

color:#5a2f12;

scrollbar-width:none;
-ms-overflow-style:none;

}

.chat-messages::-webkit-scrollbar{
display:none;
width:0;
height:0;
}

.quick-btn{
padding:12px;
border:none;
border-radius:10px;
background:#e3c29b;
color:#5a2f12;
font-weight:600;
cursor:pointer;
transition:.25s;
}

.quick-btn:hover{
background:#d8a972;
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(0,0,0,0.25);
}

.booking-form{
margin-top:30px;
padding-top:10px;
}

/* text asistenta */

.chat-ai{
color:white;
}

/* formuláře */

.chat-body{
color:#5a2f12;
}

.chat-body label{
color:#3b2314;
}

.chat-body input,
.chat-body textarea{
color:#3b2314;
}