/* CSS Document */

html, body{

background:#F7FAFF;

padding:0;

margin:0px;

height: 100%;

line-height:160%;

}

html,
body,
button,
input,
textarea,
select {
  font-family: "Quicksand", "Segoe UI", Arial, sans-serif !important;
}

#header,
#header *,
#header a,
#headerMenu,
#headerMenu *,
#headerMenu a,
.aiHeroLinks,
.aiHeroLinks *,
.aiHeroLink,
.aiToolLink,
.supportCard,
.supportCard *,
.contactForm,
.contactForm *,
.donorsModal,
.donorsModal * {
  font-family: "Quicksand", "Segoe UI", Arial, sans-serif !important;
}

#headerMenu a {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.clear{

clear:both;

}

.hide{

display:none;

}

.margin1{

margin:10px;

}

.minifont{

font-size:70%;

}

.textCenter{

text-align:center;

}

.msgOK{

text-align:center;

font-size:120%;

font-weight:bold;

color:#008000;

width:50%;

margin:0 auto;

background:#CFFF93 url("../img/ok.png") no-repeat 10px center;

border:solid #AED57C 1px;

border-radius:5px;

padding:10px 0 10px 0;

}

.timeButton{
display:inline-block;
width:10%;
height:60px;
background:#F27BDE;
border:solid black 1px;
border-radius:8px;
color:#FFFFFF;
text-align:center;
font-size:120%;
font-weight:bold;
line-height:60px;
vertical-align:middle;
margin:5px;
padding:5px;
cursor:pointer;
}

.timeButton:hover{
background:#F11AB7;
}

.timeButtonRes{
display:inline-block;
width:10%;
height:60px;
background:#FAD1F3;
border:solid black 1px;
border-radius:8px;
color:#FFFFFF;
text-align:center;
font-size:120%;
font-weight:bold;
line-height:60px;
vertical-align:middle;
margin:5px;
padding:5px;
cursor:help;
}

.timeButtons{
  display: flex;
  justify-content: center;
}

.titledate{
display:block;
color:#444444;
text-align:center;
margin:20px;
font-size:120%;
font-weight:bold;

}

#reservation label{
  display: flex;
  justify-content: center;
margin:5px;
font-size:110%;
font-weight:normal;  
color:#444444;  

}

#reservation{
  width:100%;
  display: flex;
  justify-content: center;
  border-top:solid #F11AB7 1px;
  margin:50px;
}

#reservation form input{
margin:5px;
font-size:100%;
font-weight:normal;  
color:#444444;
border:solid #F11AB7 1px;  
border-radius:5px;
width:400px;
padding:15px;

}

#reservation form textarea{
margin:5px;
font-size:100%;
font-weight:normal;  
color:#444444;
border:solid #F11AB7 1px;  
border-radius:5px;
width:400px;
padding:15px;

}

.submitRes{
  width:80%;
  height:50px;
  line-height:50px;
  
  display: block;
  border:solid #444444 1px;
  border-radius:5px;
  margin:0 auto;
  background:#F27BDE;
  color:#FFFFFF;
  font-size:120%;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
  vertical-align:middle;
}

.resOK{
  display: block;
  border:solid #444444 1px;
  border-radius:5px;
  width:50%;
  padding:50px;
  margin:50px auto;
  background:#F11AB7;
  color:#FFFFFF;
  font-size:120%;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
  vertical-align:middle;
 

}

.resOK a{
color:#ffffff;
font-size:120%;
text-decoration:none;
}

#fadeModal #modalHeader{
color:#8F0577;
font-size:100%;
text-decoration:none;
}

#fadeModal #modalFooter{
color:#D508B1;
font-size:80%;
text-decoration:none;
font-style: italic;
}

#fadeModal input{
width:98%;
margin:5px auto;
border-radius:5px;
}

#fadeModal textarea{
width:98%;
margin:5px auto;
border-radius:5px;
}

#fadeModal label{
width:96%;
color:#8F0577;
font-size:90%;
text-decoration:none;
font-style: italic;
}

#fadeModal #dateModal{
width:48%;
float:left;
}

#fadeModal #timeModal{
width:48%;
float:right;
}

#saveButton{
display:block;
float:right;
width:40%;
height:60px;
line-height:60px;
vertical-align:middle;
text-align:center;
border:solid #8F0577 1px;
border-radius:5px;
background:#D508B1;
color:white;
font-size:150%;
text-decoration:none;
font-style: bold;
margin-top:-60px;
cursor:pointer;
}

#saveButton:hover{
background:#F70FCE;
}

#calendarFooter{
height:40px;
padding-top:8px;
padding-left:50px;
background:#FFFFFF;
border-top:solid #FC09D0 2px;
}

#header{
width:80%;
margin:0 auto;

}

#header a{
display:block;
height:25px;
line-height:25px;

font-size:12pt;
//font-weight:bold;
text-transform: uppercase;
font-stretch: condensed;
font-variant: small-caps;
font-family: Arial, sans-serif;

text-align:right;
float:right;
vertical-align:middle;
padding:5px 10px 5px 10px;
margin: 30px 0px;
color:#00A3C4;
text-decoration:none;
border:solid #00A3C4 1px;
border-radius:6px;
background:#F8FAFC;
}

#header a:hover{
background:#D4E9FF;
}

#headerMenu{
background:#D4E2FE;
width:100%;
height:60px;
text-align:center;
vertical-align:middle;


}

#headerMenu a{


display:inline-block;
height:60px;
line-height:60px;

font-size:14pt;
//font-weight:bold;
text-transform: uppercase;
font-stretch: condensed;
font-variant: small-caps;
font-family: Arial, sans-serif;

text-align:center;
vertical-align:middle;
padding:0 20px 0 20px;
color:#005286;
text-decoration:none;
}

#headerMenu a:hover{
color:#0097CE;
text-decoration:none;
}

#content1{

width:80%;
margin:10px auto;

}

#content2{
//overflow:hidden;
left:-14%;
position:relative;
width:100vw;
min-height:140px;
margin:50px auto;
background:#165F9C;
color:#FFFFFF;
}

#content2A{
width:50%;
margin:0px;
padding:30px 0px 30px 0px;
color:#FFFFFF;
float:left;
}

#content2B{
width:38%;
min-height:160px;
margin:-28px 0 0 0;
background:#343434;
padding:33px;
color:#FFFFFF;
float:right;
}

#content3{
background:#D4E2FE;
width:100%;
margin:0 auto;
}

#content4{
width:95%;
margin:0 auto;
}

img{
border-color:transparent;
}

#chatText{
background:#fff;
width:80%;
line-height:130%;
margin:0 auto;
padding:40px;
border:solid #D4E2FE 1px;
}

#chatText .datumchat{
color:#4A78D5; border-bottom:solid #4A78D5 1px; margin:50px 0 20px 0;
}

#vstupChat{
display:block;
width: 100%;
height:64px;
border:solid #4A78D5 1px;
border-radius:5px;
margin:0 auto;
padding:0 70px 0 10px;
font-size:18pt;
}


select {
  -webkit-appearance: button;
  -moz-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-padding-end: 20px;
  -moz-padding-end: 20px;
  -webkit-padding-start: 2px;
  -moz-padding-start: 2px;
  background-color: #FFFFFF; /* Fallback color if gradients are not supported */

  border: 1px solid #4A78D5;
  border-radius: 2px;
  border-right:0 none;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  color: #555;
  font-size: 20pt;
  
  height:66px;
  width:64px;
  
  
  margin: 0;
  overflow: hidden;
  padding-top: 16px;
  padding-bottom: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#loading{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
}

.flex {
  width: 100%;
  height: 100vh;
  background-color: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal{
  position: fixed; /* line I changed */
  overflow:auto; /* line I added */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  z-index:999999;
}

.modalMini{
  position: fixed; /* line I changed */
  overflow:auto; /* line I added */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  z-index:999998;
}

.modal.hidden{
  display: none;
}

.hidden2  {
  display: none;
}

.modalMini_content {
  margin: 0 auto;
  width: 65px;
  height: 65px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 0 none;
  padding:20px;
  border-radius:35px;
  box-shadow: 0px 0px 40px  rgba(255, 255, 255, 0.7);
  position:relative;
top:48%;
}

.modal_content {
  margin: 0 auto;
  width: 300px;
  height: 130px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 0 none;
  padding:20px;
  border-radius:20px;
  box-shadow: 0px 0px 40px  rgba(255, 255, 255, 0.7);
    position:relative;
top:38%;
}

.modal_content img{
display:block;
margin:0 auto;
}

.modalMini_content img{
display:block;
margin:0 auto;
}

#chatText div.onechat:last-of-type{
display:none;
}

.subtextvystup{
font-size:60%;
}

.rvpitemttitle img{
width:32px;
height:32px;
line-height:40px;
vertical-align:middle;
float:left;
cursor:pointer;
}

.rvpitemttitle p{
line-height:40px;
vertical-align:middle;
cursor:pointer;
font-weight:bold;
font-size:12pt;
}

.rvpitemttitle p span{
line-height:40px;
vertical-align:middle;
cursor:pointer;
font-weight:normal;
}

.rvpitemtext{
display:none;
}

.rvpitemtext{
display:none;
padding:0 50px 0 100px;
border-bottom:solid #1191D9 1px;
}

/* ===== Hero photo slider with generated JPG slides ===== */

/* Hero styles are primarily embedded in index.tpl for this variant. */

/* ===== Animated full-page gradient safety override ===== */

html{min-height:100%;background:#edf5ff;}

body{min-height:100vh;background-color:transparent;}

#content1,#content2,#content3,#content4,.aiPageShell{background-color:transparent!important;}

/* ===== Feature cards with PNG background icons ===== */

.aiMiniCard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 164px;
  padding: 24px 148px 24px 24px !important;
}

.aiMiniCard::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -26px;
  top: 50%;
  width: 170px;
  height: 170px;
  transform: translateY(-50%) rotate(-5deg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .30;
  filter: saturate(.95) drop-shadow(0 14px 28px rgba(78, 128, 199, .14));
  transition: transform .45s ease, opacity .45s ease, filter .45s ease;
  pointer-events: none;
}

.aiMiniCard:nth-child(1)::before {
  background-image: url("img/features/feature-fast.png");
}

.aiMiniCard:nth-child(2)::before {
  background-image: url("img/features/feature-teachers.png");
  width: 180px;
  height: 180px;
  right: -28px;
  opacity: .27;
}

.aiMiniCard:nth-child(3)::before {
  background-image: url("img/features/feature-safe.png");
  width: 168px;
  height: 168px;
  right: -20px;
  opacity: .28;
}

.aiMiniCard::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: -70px;
  top: -75px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 215, 255, .30), rgba(183, 215, 255, 0) 70%);
  pointer-events: none;
}

.aiMiniCard:hover::before {
  opacity: .38;
  transform: translateY(-50%) rotate(-2deg) scale(1.045);
  filter: saturate(1.08) drop-shadow(0 18px 34px rgba(78, 128, 199, .18));
}

.aiMiniCard h3,
.aiMiniCard p {
  position: relative;
  z-index: 1;
}

.aiMiniIcon {
  display: none !important;
}

@media (max-width: 1100px) {
  .aiMiniCard {
    padding-right: 128px !important;
  }
  .aiMiniCard::before {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 700px) {
  .aiMiniCard {
    min-height: 156px;
    padding: 22px 106px 22px 22px !important;
  }
  .aiMiniCard::before,
  .aiMiniCard:nth-child(2)::before,
  .aiMiniCard:nth-child(3)::before {
    width: 122px;
    height: 122px;
    right: -28px;
    opacity: .24;
  }
}

/* ===== Compact feature cards refinement ===== */

.aiFeatureStrip {
  gap: 18px;
}

.aiMiniCard h3 {
  margin: 0 0 10px !important;
  font-size: 22px;
  line-height: 1.2;
}

.aiMiniCard p {
  max-width: 34ch;
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.58;
}

/* ===== Přesunuto z index.tpl — blok 1 ===== */

:root {
      --qr: 256px;
      --accent: #0A76D5;
      --accent-2: #0B5FB3;
      --ink: #0D1B2A;
      --card: #FFFFFF;
      --line: rgba(11, 95, 179, 0.18);
      --shadow: 0 10px 28px rgba(13, 27, 42, 0.12);
      --shadow-soft: 0 6px 18px rgba(13, 27, 42, 0.10);
    }

.h2mnk { margin: 8px 0 12px; font-weight: 800; letter-spacing: .2px; }

.wrap { width: min(900px,100%); display:flex; flex-direction:column; align-items:center; gap:12px; margin:0 auto; }

.panel { width:min(520px,100%); padding:14px 14px 16px; box-sizing:border-box; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-soft); }

.inputs { width:min(var(--qr),100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 84px; gap:10px; align-items:center; }

.inputMK { width:100%; height:30px; padding:4px 10px; box-sizing:border-box; color:var(--ink); background:#fff; border:1px solid rgba(13,27,42,.20); border-radius:8px; outline:none; text-align:center; font-size:12px; }

.inputMK:focus { border-color:rgba(10,118,213,.75); box-shadow:0 0 0 3px rgba(10,118,213,.18); }

.amountWrap { position:relative; width:100%; }

.amountWrap input { padding-right:30px; }

.amountWrap .suffix { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.7; pointer-events:none; color:var(--ink); }

.optRow { width:min(var(--qr),100%); margin:10px auto 0; display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; }

.optRow input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

.qrBox { position:relative; width:min(var(--qr),100%); aspect-ratio:1/1; margin:12px auto 0; padding:10px; box-sizing:border-box; overflow:hidden; display:flex; justify-content:center; align-items:center; background:radial-gradient(120px 120px at 30% 20%,rgba(10,118,213,.10),transparent 60%),#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }

.qrBox::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

#qrcode { width:calc(var(--qr) - 20px); height:calc(var(--qr) - 20px); display:flex; justify-content:center; align-items:center; }

#qrcode canvas,#qrcode svg { max-width:100%; height:auto!important; }

#openDonorsModal { display:block; float:right; height:80px; max-width:52%; margin:10px 0 0; object-fit:contain; cursor:pointer; user-select:none; transition:transform .16s ease,filter .16s ease; }

#openDonorsModal:hover { transform:scale(1.025); filter:brightness(1.04); }

.donorsModal { position:fixed; z-index:100000; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(13,27,42,.72); backdrop-filter:blur(4px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,visibility .2s ease; }

.donorsModal.isOpen { opacity:1; visibility:visible; pointer-events:auto; }

.donorsModalWindow { position:relative; width:620px; max-height:calc(100vh - 40px); padding:26px; box-sizing:border-box; overflow:hidden; background:radial-gradient(circle at 4% 0%,rgba(255,193,7,.10),transparent 26%),radial-gradient(circle at 100% 0%,rgba(10,118,213,.10),transparent 30%),#fff; border:1px solid rgba(10,118,213,.18); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.32); transform:translateY(16px) scale(.97); transition:transform .2s ease; }

.donorsModal.isOpen .donorsModalWindow { transform:translateY(0) scale(1); }

.donorsModalClose { position:absolute; z-index:4; top:12px; right:12px; width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#ff4b70,#dc1646); border:0; border-radius:50%; cursor:pointer; font-size:27px; }

.donorsModalWindow h2 { margin:0 52px 8px 0; color:#0b5fb3; font-size:clamp(26px,4vw,34px); line-height:1.15; font-weight:900; }

.donorsModalText { margin:0 52px 18px 0; color:#617180; line-height:1.55; font-size:14px; }

.donorsScrollBox { max-height:min(360px,48vh); margin:16px 0 0; padding-right:7px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#0a76d5 #e8f1f8; }

.donorsScrollBox::-webkit-scrollbar { width:8px; }

.donorsScrollBox::-webkit-scrollbar-track { background:#e8f1f8; border-radius:10px; }

.donorsScrollBox::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#27a5ef,#0a76d5); border-radius:10px; }

.donorsListHeader,.donorsSimpleList li { display:grid; grid-template-columns: 112px minmax(160px, 220px) 104px; gap:10px; align-items:center; }

.donorsListHeader { position:sticky; top:0; z-index:3; margin-bottom:8px; padding:11px 14px; color:#fff; background:linear-gradient(90deg,#0a76d5,#0b5fb3); border-radius:10px; font-size:13px; font-weight:800; }

.donorsListHeader span:last-child { text-align:right; }

.donorsSimpleList { margin:0; padding:0; list-style:none; }

.donorsSimpleList li { margin-bottom:8px; padding:11px 14px; box-sizing:border-box; color:#263746; background:#f5f8fb; border:1px solid rgba(13,27,42,.10); border-radius:10px; box-shadow:0 3px 10px rgba(13,27,42,.05); font-size:14px; }

.donorsSimpleList li:last-child { margin-bottom:0; }

.donorsSimpleList li::before { content:none!important; }

.donorDate { color:#71808c; white-space:nowrap; font-size:12px; }

.donorName { min-width:0; display:flex; align-items:center; gap:7px; overflow:visible; color:#263746; white-space:normal; overflow-wrap:anywhere; font-weight:700; line-height:1.3; }

.donorName::before { content:attr(data-icon); flex:0 0 auto; font-size:13px; line-height:1; }

.donorAmount { color:#15814c; text-align:right; white-space:nowrap; font-weight:800; }

.donorsModalThanks { margin:18px 0 0; padding-top:15px; color:#4d6070; border-top:1px solid rgba(13,27,42,.10); text-align:center; font-size:13px; font-weight:600; line-height:1.55; }

body.donorsModalOpened { overflow:hidden; }

@media (max-width:700px) {
      .donorsModal { padding:10px; }
      .donorsModalWindow { width:100%; max-height:calc(100vh - 20px); padding:21px 14px 18px; border-radius:16px; }
      .donorsScrollBox { max-height:52vh; }
      .donorsListHeader,.donorsSimpleList li { grid-template-columns:84px minmax(150px,1fr) 72px; gap:8px; }
      .donorsListHeader { padding:9px 10px; font-size:11px; }
      .donorsSimpleList li { padding:10px; font-size:12px; }
      .donorDate { font-size:10px; }
      .donorName::before { font-size:12px; }
      .donorAmount { font-size:11px; }
      #openDonorsModal { height:64px; max-width:48%; }
    }

@media (max-width:460px) {
      .inputs { grid-template-columns:1fr; }
      .donorsListHeader,.donorsSimpleList li { grid-template-columns:68px minmax(120px,1fr) 60px; gap:6px; }
      .donorsListHeader { padding:8px; font-size:10px; }
      .donorsSimpleList li { padding:9px 8px; }
      .donorDate { white-space:normal; line-height:1.2; }
      .donorName { gap:4px; font-size:11px; }
      .donorName::before { font-size:11px; }
      .donorAmount { font-size:10px; }
    }

/* =====================================================
   QR PLATBA + KONTAKTNÍ FORMULÁŘ
   ===================================================== */

.supportContactSection{width:min(1180px,calc(100% - 30px));margin:35px auto;display:grid;grid-template-columns:minmax(360px,.85fr) minmax(440px,1.15fr);gap:24px;align-items:stretch}

.supportCard{min-width:0;padding:24px;box-sizing:border-box;background:radial-gradient(circle at 100% 0,rgba(10,118,213,.07),transparent 32%),#fff;border:1px solid rgba(11,95,179,.17);border-radius:20px;box-shadow:0 10px 28px rgba(13,27,42,.10),0 2px 7px rgba(13,27,42,.05)}

.supportCardHeader{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:17px;border-bottom:1px solid rgba(13,27,42,.09)}

.supportCardIcon{display:flex;flex:0 0 48px;align-items:center;justify-content:center;width:48px;height:48px;color:#fff;background:linear-gradient(145deg,#ff4b70,#dc1646);border-radius:50%;box-shadow:0 5px 14px rgba(220,22,70,.23);font-size:22px;line-height:1}

.supportCardIcon.contactIcon{background:linear-gradient(145deg,#28a5ef,#0b5fb3);box-shadow:0 5px 14px rgba(11,95,179,.22)}

.supportCardHeader h2{margin:0 0 4px;color:#173247;font-size:25px;line-height:1.15;font-weight:900}

.supportCardHeader p{margin:0;color:#6b7c89;font-size:13px;line-height:1.45}

.qrPaymentCard{display:flex;flex-direction:column}

.qrPaymentCard .inputs{width:min(320px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px}

.qrPaymentCard .inputMK{height:40px;font-size:13px}

.supportHint{max-width:330px;margin:15px auto 0;color:#7b8994;text-align:center;font-size:11px;line-height:1.45}

.contactResponse{margin:0 0 18px;padding:12px 15px;border-radius:9px;font-size:13px;font-weight:700;line-height:1.5}

.contactResponseSuccess{color:#14683e;background:rgba(37,179,105,.11);border:1px solid rgba(37,179,105,.28)}

.contactResponseError{color:#a3233c;background:rgba(220,22,70,.09);border:1px solid rgba(220,22,70,.23)}

.contactForm{display:flex;flex-direction:column;gap:15px}

.contactFormRow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.contactField{position:relative;display:flex;flex-direction:column;gap:6px}

.contactField label{color:#324b5e;font-size:12px;font-weight:800}

.contactField input,.contactField textarea{width:100%;box-sizing:border-box;color:#172d3e;background:#fff;border:1px solid rgba(13,27,42,.18);border-radius:10px;outline:none;font-family:inherit;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease}

.contactField input{height:42px;padding:7px 11px}

.contactField textarea{min-height:150px;padding:11px 12px 28px;resize:vertical;line-height:1.5}

.contactField input:focus,.contactField textarea:focus{border-color:rgba(10,118,213,.78);box-shadow:0 0 0 3px rgba(10,118,213,.14)}

.contactCounter{position:absolute;right:9px;bottom:7px;padding:2px 5px;color:#82909a;background:rgba(255,255,255,.90);border-radius:5px;pointer-events:none;font-size:10px}

.contactConsent{display:flex;align-items:flex-start;gap:9px;color:#657683;cursor:pointer;font-size:11px;line-height:1.45}

.contactConsent input{flex:0 0 auto;width:16px;height:16px;margin-top:1px;accent-color:#0a76d5}

.contactSubmit{min-height:44px;padding:10px 22px;color:#fff;background:linear-gradient(135deg,#0a76d5,#0b5fb3);border:0;border-radius:10px;box-shadow:0 6px 16px rgba(11,95,179,.22);cursor:pointer;font-family:inherit;font-size:14px;font-weight:900}

.contactWebsiteField{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

@media(max-width:940px){.supportContactSection{width:min(680px,calc(100% - 24px));grid-template-columns:1fr}}

@media(max-width:560px){.supportContactSection{width:calc(100% - 16px);margin:22px auto;gap:15px}.supportCard{padding:18px 14px;border-radius:16px}.contactFormRow{grid-template-columns:1fr}.qrPaymentCard .inputs{grid-template-columns:1fr 90px}}

@media(max-width:360px){.qrPaymentCard .inputs{grid-template-columns:1fr}}

#header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 110px;
    padding: 5px 0;
    box-sizing: border-box;
}

.headerLogoLeft {
    height: 100px;
    width: auto;
    flex: 0 0 auto;
}


.headerDonors {
    height: 80px;
    max-width: 25%;
    width: auto;

    object-fit: contain;
    cursor: pointer;

    flex: 0 0 auto;
}

@media (max-width: 700px) {
    #header {
        min-height: 90px;
    }

    .headerLogoLeft {
        height: 70px;
    }

    .headerLogoCenter {
        height: 65px;
        max-width: 46%;
    }

    .headerDonors {
        height: 55px;
        max-width: 24%;
    }
}

/* ===== Přesunuto z index.tpl — blok 2 ===== */

/* ===== Light AI redesign overrides ===== */

html, body {
  background:
    radial-gradient(circle at 0% 0%, rgba(194, 221, 255, 0.75), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(216, 233, 255, 0.85), transparent 22%),
    linear-gradient(180deg, #f5f9ff 0%, #eef5ff 48%, #e9f2ff 100%);
  color: #183253;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body {
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

body::before { top: 70px; left: -120px; background: rgba(146, 192, 255, 0.95); }

body::after { right: -100px; top: 220px; background: rgba(201, 224, 255, 0.95); }

#header,
#headerMenu,
#content1,
#content4,
#content3 > * {
  position: relative;
  z-index: 1;
}

#header {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 10px;
  min-height: 88px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
}

.headerLogoLeft { height: 62px !important; }

.headerLogoCenter {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  height: 184px !important;
  max-width: 100% !important;
  justify-self: center;
  margin:-45px auto;
}

.headerDonors,
#openDonorsModal {
  height: 60px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 14px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(115, 158, 228, 0.20);
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 0 12px 28px rgba(93, 132, 190, 0.12);
}

#headerMenu {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 28px;
  padding: 6px;
  height: auto;
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(115, 158, 228, 0.16);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(104, 142, 201, 0.10);
  backdrop-filter: blur(14px);
}

#headerMenu a {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  line-height: 1.1;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  color: #2f558d;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: none;
  font-variant: normal;
  font-stretch: normal;
}

#headerMenu a:hover {
  color: #1e4172;
  background: rgba(147, 187, 247, 0.18);
}

#content1,
#content4,
.supportContactSection,
#content3 > p,
#content3 > div,
#content3 > section {
  width: min(1180px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#content1 { margin-top: 12px !important; }

#content1 > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#content3,
#content4 {
  width: 100%;
  margin-top: 0;
  background: transparent;
}

.aiPageShell {
  background: transparent !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 none !important;
  line-height: 1.55;
}

.aiHeroPanel {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 26px;
  position: relative;
}

.aiHeroCopy h1 {
  margin: 0 0 18px;
  color: #f5f9ff;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
}

.aiHeroCopy p {
  max-width: 660px;
  margin: 0;
  color: #d1def4;
  font-size: 22px;
  line-height: 1.62;
}

.aiHeroBadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px 16px;
  color: #dceaff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(189, 212, 247, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(5, 22, 54, 0.12);
}

.aiHeroBadge::before { content: "✦"; color: #5e8ed7; }

.aiHeroVisual {
  position: relative;
  min-height: 300px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 20%, rgba(146, 182, 239, 0.30), transparent 18%),
    radial-gradient(circle at 20% 24%, rgba(126, 170, 236, 0.18), transparent 18%),
    linear-gradient(180deg, rgba(17,45,84,0.88) 0%, rgba(24,58,106,0.88) 100%);
  border: 1px solid rgba(170, 200, 242, 0.16);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(12, 27, 56, 0.18);
}

.aiMockWindow {
  position: absolute;
  left: 70px;
  top: 56px;
  width: min(100% - 160px, 450px);
  padding: 38px 34px 34px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(245,250,255,0.98), rgba(232,242,255,0.98));
  border: 1px solid rgba(128, 171, 235, 0.24);
  box-shadow: 0 16px 40px rgba(121, 160, 218, 0.10);
}

.aiMockTag {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  color: #4b74ad;
  background: linear-gradient(180deg, rgba(217, 232, 255, 0.9), rgba(201, 223, 255, 0.92));
  border: 1px solid rgba(128, 171, 235, 0.24);
  border-radius: 18px;
  font-size: 28px;
  font-weight: 800;
}

.aiMockLine {
  height: 10px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(100, 144, 215, 0.92), rgba(164, 195, 244, 0.72));
}

.w90 { width: 90%; }

.w78 { width: 78%; }

.w88 { width: 88%; }

.w65 { width: 65%; }

.w52 { width: 52%; margin-bottom: 0; }

.aiVisualPlant,
.aiVisualBooks {
  position: absolute;
  bottom: 36px;
}

.aiVisualPlant {
  left: 34px;
  width: 64px;
  height: 82px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(173, 202, 245, 0.9), rgba(125, 168, 229, 0.86));
}

.aiVisualPlant::before,
.aiVisualPlant::after {
  content: "";
  position: absolute;
  bottom: 60px;
  width: 26px;
  height: 56px;
  border-radius: 60% 40% 60% 40%;
  background: linear-gradient(180deg, rgba(174, 205, 248, 0.95), rgba(133, 173, 233, 0.82));
}

.aiVisualPlant::before { left: 6px; transform: rotate(-24deg); }

.aiVisualPlant::after { right: 4px; transform: rotate(22deg); }

.aiVisualBooks {
  right: 40px;
  width: 132px;
  height: 78px;
}

.aiVisualBooks::before,
.aiVisualBooks::after {
  content: "";
  position: absolute;
  right: 0;
  width: 132px;
  height: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(226, 236, 253, 1), rgba(168, 194, 236, 0.92));
  box-shadow: 0 6px 14px rgba(104, 142, 201, 0.10);
}

.aiVisualBooks::before { bottom: 0; }

.aiVisualBooks::after { bottom: 24px; width: 112px; }

.aiResultPanel,
.aiGeneratorRow { margin-top: 0; }

.aiCard {
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(246,250,255,0.96) 100%);
  border: 1px solid rgba(126, 170, 236, 0.20);
  box-shadow: 0 24px 55px rgba(104, 142, 201, 0.10);
}

.aiOutputCardTop { margin-bottom: 22px; }

.aiCardHead h2,
.aiOutputHead h2 {
  margin: 0 0 8px;
  color: #18355f;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.aiCardHead p,
.aiOutputHead p {
  margin: 0;
  color: #6a84aa;
  font-size: 15px;
}

.aiOutputHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.aiOutputHint {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  color: #3e679f;
  background: rgba(224, 236, 255, 0.9);
  border: 1px solid rgba(128, 171, 235, 0.22);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.aiOutputBody {
  min-height: 111px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(250,253,255,0.96) 0%, rgba(241,247,255,0.96) 100%);
  border: 1px solid rgba(128, 171, 235, 0.18);
}

.aiOutputBody:empty::before {
  content: "Váš vygenerovaný text se zobrazí zde.";
  color: #7d93b6;
}

#chatText div.onechat:last-of-type { display: none; }

.onechat {
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(128, 171, 235, 0.18);
  color: #234063;
}

.onechat:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0 none; }

#chatText .datumchat {
  margin: 0 0 14px !important;
  padding-bottom: 10px;
  color: #5677a5 !important;
  border-bottom: 1px solid rgba(128, 171, 235, 0.18) !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.onechat p,
.onechat li,
.onechat div,
.onechat span,
.rvpvystup,
.rvpitemtext,
.rvpitemttitle p { color: #26456c; }

.onechat ul,
.onechat ol,
.rvpitemtext ul,
.rvpitemtext ol { padding-left: 18px; }

.onechat a,
.rvpitemtext a { color: #3f6fae; }

.rvpvystup { margin-top: 16px; }

.rvpitem {
  margin-top: 14px;
  border: 1px solid rgba(128, 171, 235, 0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  overflow: hidden;
}

.rvpitemttitle { padding: 14px 18px; cursor: pointer; }

.rvpitemttitle img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  opacity: .95;
}

.rvpitemttitle p,
.rvpitemttitle p span { margin: 0; line-height: 1.45; }

.rvpitemtext {
  padding: 0 18px 18px 54px !important;
  border-bottom: 0 none !important;
}

.aiOutputNote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  color: #6e86aa;
  font-size: 14px;
}

.aiShieldIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: #3d679f;
  background: rgba(221, 235, 255, 0.96);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
}

.aiGeneratorHead { margin-bottom: 18px; }

.aiInlineForm { margin-top: 0; }

.aiInlineControls {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 58px;
  gap: 16px;
  align-items: end;
  width: 100%;
}

.aiField {
  min-width: 0;
}

.aiField label {
  display: block;
  margin: 0 0 8px;
  color: #31598f;
  font-size: 14px;
  font-weight: 700;
}

.aiField select,
.aiField input {
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  border: 1px solid #cbdcf2;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: #183253;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.aiField select {
  padding: 0 42px 0 18px;
  cursor: pointer;
}

.aiField input {
  padding: 0 20px;
}

.aiField input::placeholder {
  color: #879bb7;
}

.aiField select:hover,
.aiField input:hover {
  border-color: #9fbee8;
  background: #ffffff;
}

.aiField select:focus,
.aiField input:focus {
  border-color: #6f9fe2;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(92, 145, 218, 0.12),
    0 10px 24px rgba(63, 112, 179, 0.08);
}

.aiInlineButtonWrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}


.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 850px) {
  .aiInlineControls {
    grid-template-columns: 150px minmax(0, 1fr) 58px;
    gap: 12px;
  }
}

@media (max-width: 650px) {
  .aiInlineControls {
    grid-template-columns: 1fr;
  }

  .aiInlineButtonWrap {
    justify-content: flex-start;
  }
}











.aiGeneratorMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  margin-top:40px;
}

.aiToolsRow {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  margin-right: auto !important;
    margin-left:-30px;
}

.aiLimitRow {
  margin-left: auto !important;
}



.aiToolLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #39649d;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(128, 171, 235, 0.18);
  border-radius: 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.aiToolLink img { width: 22px; height: 22px; }

.aiToolLink:hover { background: rgba(234, 243, 255, 1); }

.aiLimitRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 230px;
  padding: 14px 16px;
  color: #6d84a8;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(128, 171, 235, 0.18);
  border-radius: 14px;
  font-size: 14px;
}

.aiLimitRow strong { color: #27456c; font-size: 16px; }

.aiFeatureStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
@media (max-width: 700px) {
  .aiGeneratorMeta {
    align-items: stretch !important;
  }

  .aiToolsRow {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .aiLimitRow {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
.aiMiniCard {
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(246,250,255,0.96) 100%);
  border: 1px solid rgba(126, 170, 236, 0.18);
  box-shadow: 0 20px 45px rgba(104, 142, 201, 0.08);
}

.aiMiniIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  color: #4470a8;
  background: rgba(228, 238, 255, 0.96);
  border: 1px solid rgba(126, 170, 236, 0.16);
  border-radius: 18px;
  font-size: 24px;
}

.aiMiniCard h3 {
  margin: 0 0 10px;
  color: #18355f;
  font-size: 24px;
}

.aiMiniCard p { margin: 0; color: #6880a5; }

.aiExpiredAlert {
  padding: 18px;
  margin: 18px 0 0;
  color: #27456c;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(128, 171, 235, 0.18);
  border-radius: 16px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
}

.cursorNE { cursor: not-allowed !important; }

#content3 { padding-top: 26px; }

.supportContactSection {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr);
  gap: 22px;
  margin-top: 22px !important;
  margin-bottom: 16px !important;
}

.supportCard {
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(246,250,255,0.96) 100%) !important;
  border: 1px solid rgba(126, 170, 236, 0.18) !important;
  box-shadow: 0 22px 48px rgba(104, 142, 201, 0.08) !important;
}

.supportCardHeader { border-bottom-color: rgba(128, 171, 235, 0.14) !important; }

.supportCardHeader h2,
.supportCardHeader p,
.supportHint,
.contactField label,
.contactConsent span,
.supportCard,
.supportCard * { color: inherit; }

.supportCardHeader h2,
.supportCardHeader div h2,
.supportCard h2 { color: #18355f !important; }

.supportCardHeader p,
.supportHint,
.contactConsent span,
.contactCounter,
.contactField label,
.donorsModalText,
.donorsModalThanks { color: #6d84a8 !important; }

.supportCardIcon,
.contactIcon {
  background: rgba(228, 238, 255, 0.96) !important;
  color: #4470a8 !important;
  box-shadow: none !important;
}

.inputMK,
.contactField input,
.contactField textarea,
.contactField select,
.contactSubmit,
#amount,
#msg,
#contactForm input,
#contactForm textarea {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(128, 171, 235, 0.18) !important;
  color: #214062 !important;
}

.inputMK::placeholder,
.contactField input::placeholder,
.contactField textarea::placeholder { color: #8094b4 !important; }

.optRow label,
.amountWrap .suffix { color: #5f7ea7 !important; }

.qrBox {
  background: linear-gradient(180deg, rgba(250,253,255,0.96), rgba(241,247,255,0.96)) !important;
  border: 1px solid rgba(128, 171, 235, 0.18) !important;
  box-shadow: 0 16px 34px rgba(104, 142, 201, 0.08) !important;
}

.qrBox::before { background: linear-gradient(90deg, #8cb4ee, #5f8fd9) !important; }

.contactSubmit,
.supportCard .contactSubmit {
  min-height: 52px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #6ea4ef 0%, #4f86d7 100%) !important;
  border: 0 none !important;
  box-shadow: 0 16px 30px rgba(94, 142, 210, 0.16) !important;
}

#content3 p,
#content4 p,
#content4 li,
#content3 li,
#content4 a,
#content3 a { color: #6d84a8; }

#content4 a,
#content3 a { color: #3f6fae; }

#content4 h2,
#content4 h3,
#content3 h2,
#content3 h3 { color: #18355f; }

#content3 > p { text-align: center; }

.donorsModal { background: rgba(56, 82, 122, 0.38) !important; }

.donorsModalWindow {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,250,255,0.98) 100%) !important;
  border: 1px solid rgba(126, 170, 236, 0.18) !important;
}

.donorsModalWindow h2,
.donorsListHeader,
.donorAmount { color: #18355f !important; }

.donorsListHeader {
  background: linear-gradient(90deg, rgba(205, 225, 255, 0.92), rgba(186, 211, 247, 0.92)) !important;
}

.donorsSimpleList li {
  color: #26456c !important;
  background: rgba(248, 251, 255, 0.96) !important;
  border-color: rgba(126, 170, 236, 0.14) !important;
}

.donorDate,
.donorName { color: #26456c !important; }

.donorsScrollBox::-webkit-scrollbar-track { background: rgba(210, 226, 250, 0.54) !important; }

.donorsScrollBox::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8cb4ee, #5f8fd9) !important; }

.donorsModalClose {
  background: rgba(255,255,255,0.88) !important;
  color: #436da7 !important;
  border: 1px solid rgba(126, 170, 236, 0.14) !important;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.aiHeroPanelBox {
  padding: 34px;
  margin-bottom:30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 8%, rgba(103, 151, 223, 0.22), transparent 24%),
    radial-gradient(circle at 88% 24%, rgba(133, 175, 239, 0.16), transparent 20%),
    linear-gradient(135deg, rgba(33, 72, 128, 0.94) 0%, rgba(25, 57, 103, 0.94) 100%);
  border: 1px solid rgba(178, 206, 245, 0.14);
  box-shadow: 0 24px 60px rgba(33, 65, 113, 0.16);
  overflow: hidden;
}

.aiHeroPanelBox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), transparent 42%);
  pointer-events: none;
}

.aiHeroMiniStats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.aiHeroMiniStats span {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  color: #edf4ff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(198, 219, 250, 0.14);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.aiHeroVisualAnimated {
  isolation: isolate;
}

.aiHeroScene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  animation: heroSceneRotate 15s infinite;
}

.aiHeroScene1 { opacity: 1; animation-delay: 0s; }

.aiHeroScene2 { animation-delay: 5s; }

.aiHeroScene3 { animation-delay: 10s; }

@keyframes heroSceneRotate {
  0% { opacity: 0; transform: translateY(12px) scale(.985); }
  4%, 29% { opacity: 1; transform: translateY(0) scale(1); }
  33%, 100% { opacity: 0; transform: translateY(-10px) scale(1.01); }
}

.aiSceneCard,
.aiSceneSplit {
  position: absolute;
  inset: 48px 44px 44px 44px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(245,250,255,0.98), rgba(232,242,255,0.98));
  border: 1px solid rgba(175, 205, 245, 0.30);
  box-shadow: 0 18px 38px rgba(16, 42, 84, 0.16);
}

.aiSceneCardWide {
  padding: 22px 24px;
}

.aiSceneCardHeader {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.aiSceneCardHeader .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #92b6eb;
}

.aiSceneTitle,
.aiSceneColumnTitle {
  margin-bottom: 16px;
  color: #2e588c;
  font-size: 18px;
  font-weight: 800;
}

.aiScenePillRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.aiScenePillRow span,
.aiFloatChip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  color: #315989;
  background: rgba(225, 237, 255, 0.98);
  border: 1px solid rgba(161, 194, 239, 0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.aiFloatChip {
  position: absolute;
  box-shadow: 0 12px 20px rgba(24, 58, 106, 0.12);
  animation: floatChip 3.4s ease-in-out infinite;
}

.aiFloatChip.chipA { right: 40px; top: 54px; }

.aiFloatChip.chipB { left: 52px; bottom: 48px; animation-delay: 1.2s; }

@keyframes floatChip {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.aiSceneSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 22px;
}

.aiSceneColumn {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(175, 205, 245, 0.28);
}

.aiSceneButton {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(135deg, #6ea4ef 0%, #4f86d7 100%);
  border-radius: 14px;
  font-weight: 800;
  box-shadow: 0 12px 20px rgba(94, 142, 210, 0.18);
}

@media (max-width: 980px) {
  #header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .headerLogoLeft,
  .headerLogoCenter,
  .headerDonors,
  #openDonorsModal { justify-self: center; }
  .aiHeroPanel,
  .supportContactSection,
  .aiFeatureStrip { grid-template-columns: 1fr; }
  .aiHeroPanelBox { padding: 22px; }
  .aiSceneCard, .aiSceneSplit { inset: 28px 22px 22px 22px; }
  .aiSceneSplit { grid-template-columns: 1fr; }
  .aiHeroVisual { min-height: 280px; }
  .aiMockWindow { left: 40px; right: 40px; width: auto; }
  .aiInlineControls { grid-template-columns: 1fr; }
  .aiGeneratorMeta { align-items: stretch; }
  .aiLimitRow { min-width: 0; }
}

@media (max-width: 700px) {
  #header,
  #headerMenu,
  #content1,
  #content4,
  .supportContactSection,
  #content3 > p,
  #content3 > div,
  #content3 > section {
    width: calc(100% - 18px) !important;
  }
  #headerMenu a { padding: 12px 10px; font-size: 13px; }
  .aiHeroCopy h1 { font-size: 38px; }
  .aiHeroMiniStats span { width: 100%; justify-content: center; }
  .aiHeroCopy p { font-size: 18px; }
  .aiCard,
  .aiMiniCard,
  .supportCard { padding: 18px !important; border-radius: 18px !important; }
  .aiMockWindow { left: 18px; right: 18px; top: 28px; }
  .aiVisualBooks { right: 20px; }
  .aiVisualPlant { left: 16px; }
  .aiOutputHead { align-items: flex-start; flex-direction: column; }
}

/* ===== Přesunuto z index.tpl — blok 3 ===== */

/* ===== Hero photo slider with generated JPG slides ===== */

.aiHeroSlider{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);align-items:center;gap:28px;height:420px;min-height:420px;max-height:420px;padding:28px;box-sizing:border-box;border-radius:30px;overflow:hidden;background:radial-gradient(circle at 14% 14%,rgba(124,171,233,.18),transparent 26%),radial-gradient(circle at 86% 18%,rgba(151,190,244,.14),transparent 24%),linear-gradient(135deg,#2a5a9e 0%,#234b89 52%,#1f437b 100%);border:1px solid rgba(184,211,247,.14);box-shadow:0 24px 60px rgba(25,50,94,.16)}

.aiHeroSlider::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 42%);pointer-events:none}

.aiHeroTextCol{position:relative;z-index:2;align-self:center}

.aiHeroSlider .aiHeroBadge{display:inline-flex;align-items:center;min-height:32px;margin-bottom:16px;padding:0 14px;color:#e8f1ff!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(202,222,249,.16)!important;border-radius:999px;box-shadow:0 8px 20px rgba(8,24,55,.1)!important;font-size:12px;font-weight:700;letter-spacing:.02em}

.aiHeroSlider h1{margin:0 0 14px;color:#f6f9ff;font-size:clamp(34px,3.3vw,52px);line-height:1.04;letter-spacing:-.03em}

.aiHeroSlider p{max-width:610px;margin:0;color:#d8e5f7;font-size:17px;line-height:1.56}

.aiHeroLinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

.aiHeroLink{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;color:#f1f6ff;background:rgba(255,255,255,.1);border:1px solid rgba(202,222,249,.18);border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}

.aiHeroLink:hover,.aiHeroLink:focus-visible{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(225,237,255,.32);transform:translateY(-1px);outline:none}

.aiHeroLinkPrimary{color:#183f78;background:#eef5ff;border-color:#eef5ff}

.aiHeroLinkPrimary:hover,.aiHeroLinkPrimary:focus-visible{color:#183f78;background:#fff;border-color:#fff}

.aiHeroVisualCol{position:relative;height:100%;display:flex;align-items:center;justify-content:center;min-width:0}

.heroPhotoVisual{position:relative;width:100%;height:100%;max-height:360px;padding:12px;box-sizing:border-box;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.07));border:1px solid rgba(202,222,249,.16);box-shadow:0 18px 42px rgba(13,31,63,.16),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden;transition:opacity .76s ease,transform .76s ease}

.heroPhotoViewport{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 18px 34px rgba(23,52,94,.16)}

.heroPhotoSlide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .95s ease,transform 6.2s ease;filter:saturate(1.02)}

.heroPhotoSlide.is-active{opacity:1;transform:scale(1)}

.heroPhotoVisual.is-transitioning .heroPhotoSlide.is-active{transform:scale(1.012)}

.heroPhotoOverlay{position:absolute;left:26px;right:26px;bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none;z-index:2}

.heroPhotoOverlay::before{content:"";position:absolute;left:-10px;right:-10px;bottom:-10px;top:-18px;background:linear-gradient(180deg,rgba(20,39,78,0),rgba(20,39,78,.38));border-radius:22px;z-index:-1}

.heroPhotoTag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:rgba(244,248,255,.92);color:#4e74a7;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 8px 18px rgba(12,30,59,.12)}

.heroPhotoMeta{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

.heroPhotoMeta span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(244,248,255,.92);color:#4c74a7;font-size:10px;font-weight:800;letter-spacing:.01em;box-shadow:0 8px 18px rgba(12,30,59,.12)}

.heroPhotoDots{position:absolute;left:26px;top:24px;display:flex;gap:7px;z-index:3}

.heroDot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(255,255,255,.18);cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}

.heroDot:hover,.heroDot:focus-visible{outline:none;transform:scale(1.1);background:rgba(255,255,255,.8)}

.heroDot.is-active{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}

.heroSwap,#heroMeta1,#heroMeta2,#heroMeta3{transition:opacity .76s ease}

.is-fading{opacity:.2!important}

@media (prefers-reduced-motion:reduce){.heroPhotoSlide,.heroPhotoVisual,.heroSwap,#heroMeta1,#heroMeta2,#heroMeta3{transition:none!important}}

@media(max-width:1100px){.aiHeroSlider{grid-template-columns:1fr;height:720px;min-height:720px;max-height:720px;gap:18px}.heroPhotoVisual{height:340px;max-height:340px}}

@media(max-width:700px){.aiHeroSlider{height:770px;min-height:770px;max-height:770px;padding:18px}.aiHeroSlider h1{font-size:30px}.aiHeroSlider p{font-size:15px}.aiHeroLinks{gap:8px}.aiHeroLink{font-size:12px;min-height:36px;padding:0 13px}.heroPhotoVisual{height:300px;max-height:300px;padding:10px}.heroPhotoOverlay{left:18px;right:18px;bottom:18px;flex-direction:column;align-items:flex-start}.heroPhotoMeta{justify-content:flex-start}.heroPhotoDots{left:18px;top:18px}}

/* ===== Přesunuto z index.tpl — blok 4 ===== */

/* ===== Final full-page background + full-width animated menu ===== */

html {
  min-height: 100%;
  margin: 0;
  background: #edf5ff;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  isolation: isolate;
  background:
    radial-gradient(78rem 56rem at -8% -6%, rgba(148, 198, 255, .76), transparent 58%),
    radial-gradient(72rem 54rem at 108% 10%, rgba(214, 232, 255, .92), transparent 57%),
    radial-gradient(64rem 48rem at 24% 60%, rgba(190, 222, 255, .72), transparent 59%),
    radial-gradient(72rem 54rem at 86% 88%, rgba(166, 211, 255, .62), transparent 60%),
    linear-gradient(180deg, #f9fbff 0%, #eef6ff 32%, #e8f2ff 68%, #f4f9ff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 142% 142%, 138% 138%, 136% 136%, 140% 140%, 100% 100% !important;
  background-position: 0% 0%, 100% 0%, 0% 60%, 100% 100%, 0 0 !important;
  animation: pageGradientDrift 12s ease-in-out infinite alternate;
}

@keyframes pageGradientDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 0% 60%, 100% 100%, 0 0;
    background-size: 142% 142%, 138% 138%, 136% 136%, 140% 140%, 100% 100%;
  }
  50% {
    background-position: 8% 4%, 93% 7%, 6% 69%, 93% 94%, 0 0;
    background-size: 148% 148%, 142% 142%, 140% 140%, 146% 146%, 100% 100%;
  }
  100% {
    background-position: 14% 8%, 88% 3%, 1% 74%, 88% 86%, 0 0;
    background-size: 152% 152%, 146% 146%, 144% 144%, 150% 150%, 100% 100%;
  }
}

/* Vlnící se prostorové křivky nad pozadím, ale pod obsahem. */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -6%;
  pointer-events: none;
  z-index: 0;
  opacity: .95;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center center;
  will-change: transform, opacity;
}

body::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><defs><linearGradient id='g1' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%2399c9ff' stop-opacity='0.56'/><stop offset='100%25' stop-color='%236faeff' stop-opacity='0.10'/></linearGradient></defs><path d='M-120 235 C 70 55, 250 360, 450 210 S 780 70, 1015 220 S 1390 355, 1710 170' fill='none' stroke='url(%23g1)' stroke-width='6' stroke-linecap='round'/><path d='M-80 335 C 120 210, 310 455, 530 305 S 860 160, 1105 315 S 1390 430, 1670 290' fill='none' stroke='%23b7d8ff' stroke-opacity='0.38' stroke-width='3.2' stroke-linecap='round'/><path d='M1040 86 C 1160 32, 1285 38, 1410 108' fill='none' stroke='%2392c0ff' stroke-opacity='0.36' stroke-width='4' stroke-linecap='round'/></svg>");
  animation: waveRibbonOne 9s ease-in-out infinite alternate;
}

body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><defs><linearGradient id='g2' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23cbe2ff' stop-opacity='0.44'/><stop offset='100%25' stop-color='%2384b8ff' stop-opacity='0.16'/></linearGradient></defs><path d='M-160 620 C 60 480, 260 760, 520 590 S 980 430, 1230 585 S 1500 720, 1760 560' fill='none' stroke='url(%23g2)' stroke-width='6' stroke-linecap='round'/><path d='M-100 700 C 110 580, 290 820, 520 690 S 900 560, 1160 690 S 1460 800, 1720 670' fill='none' stroke='%239ac5ff' stroke-opacity='0.34' stroke-width='3.2' stroke-linecap='round'/><path d='M180 165 C 280 105, 410 105, 515 160' fill='none' stroke='%23d4e8ff' stroke-opacity='0.34' stroke-width='4' stroke-linecap='round'/></svg>");
  animation: waveRibbonTwo 7.2s ease-in-out infinite alternate;
}

@keyframes waveRibbonOne {
  0% { transform: translate3d(-1.5vw, -1.2vh, 0) rotate(-1.1deg) scale(1.00); opacity: .82; }
  50% { transform: translate3d(2vw, 1.1vh, 0) rotate(.6deg) scale(1.035); opacity: 1; }
  100% { transform: translate3d(4vw, 2.4vh, 0) rotate(1.3deg) scale(1.06); opacity: .92; }
}

@keyframes waveRibbonTwo {
  0% { transform: translate3d(2vw, 1vh, 0) rotate(1deg) scale(1.01); opacity: .78; }
  50% { transform: translate3d(-1.5vw, -1vh, 0) rotate(-.55deg) scale(1.04); opacity: .96; }
  100% { transform: translate3d(-4vw, -2.3vh, 0) rotate(-1.2deg) scale(1.08); opacity: .88; }
}

/* Obsah držíme nad animovanými křivkami. */

#header,
#headerMenu,
#content1,
#content2,
#content3,
#content4,
.aiPageShell,
.supportContactSection,
footer {
  position: relative;
  z-index: 1;
}

#content1,
#content2,
#content3,
#content4,
.aiPageShell,
.supportContactSection {
  background-color: transparent !important;
}

#content3,
#content4,
.aiPageShell {
  background-image: none !important;
}

.aiCard,
.aiOutputCard,
.aiGeneratorBar,
.aiMiniCard,
.supportCard {
  backdrop-filter: blur(12px) saturate(115%);
}

#headerMenu {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 30px calc(50% - 50vw) !important;
  padding: 8px max(18px, calc((100vw - 1180px) / 2)) !important;
  box-sizing: border-box;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: rgba(248, 252, 255, .78) !important;
  border-top: 1px solid rgba(124, 166, 226, .18) !important;
  border-bottom: 1px solid rgba(124, 166, 226, .20) !important;
  box-shadow: 0 14px 34px rgba(71, 111, 168, .10) !important;
  backdrop-filter: blur(18px) saturate(125%);
  text-align: center;
  overflow: visible;
}

#headerMenu ul,
#headerMenu ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#headerMenu li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

#headerMenu a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px 18px !important;
  color: #31598f !important;
  background: transparent !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transform: translateY(0);
  transition: color .28s ease, transform .28s ease, box-shadow .28s ease !important;
}

#headerMenu a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(153, 195, 251, .22), rgba(214, 232, 255, .30));
  opacity: 0;
  transform: scale(.88);
  transition: opacity .28s ease, transform .28s ease;
}

#headerMenu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ea4ef, #3f78c8);
  transform: translateX(-50%);
  transition: width .32s ease;
  box-shadow: 0 0 12px rgba(78, 133, 211, .42);
}

#headerMenu a:hover,
#headerMenu a:focus-visible {
  color: #183f75 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(73, 117, 177, .12);
  outline: none;
}

#headerMenu a:hover::before,
#headerMenu a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

#headerMenu a:hover::after,
#headerMenu a:focus-visible::after {
  width: calc(100% - 28px);
}

.heroPhotoOverlay,
.heroPhotoMeta,
.heroPhotoTag {
  display: none !important;
}

.heroPhotoViewport {
  height: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  body,
  body::before,
  body::after {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  #headerMenu {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 7px 10px !important;
  }
  #headerMenu ul,
  #headerMenu ol { gap: 2px; }
  #headerMenu a { padding: 11px 10px !important; }
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
}

body { top:0!important; }

body > :first-child:not(.pageAmbientLines) { margin-top:0!important; }

/* ===== Visible animated ambient curves layer — viewport locked ===== */

.pageAmbientLines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(0);
  contain: strict;
  transform: translateZ(0);
  opacity: .92;
}

.ambientSvg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52%;
  overflow: hidden;
  filter: drop-shadow(0 0 10px rgba(88,151,235,.34));
  transform-origin: center center;
  will-change: transform;
}

.ambientSvgTop { top: 0; animation: ambientFloatTop 8s ease-in-out infinite alternate; }

.ambientSvgBottom { bottom: 0; animation: ambientFloatBottom 10s ease-in-out infinite alternate; }

.ambientPath { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:18 12; animation:ambientDash 7s linear infinite; }

.pathTopA { stroke:url(#ambientGradientTop); stroke-width:5.5; }

.pathTopB { stroke:rgba(112,169,241,.60); stroke-width:3.5; animation-duration:9s; }

.pathBottomA { stroke:url(#ambientGradientBottom); stroke-width:5.2; animation-duration:8s; }

.pathBottomB { stroke:rgba(118,173,243,.56); stroke-width:3.2; animation-duration:10s; }

@keyframes ambientDash { to { stroke-dashoffset:-120; } }

@keyframes ambientFloatTop { from { transform:translate3d(-1.5%,-1%,0) scale(1.01); } to { transform:translate3d(1.5%,2%,0) scale(1.035); } }

@keyframes ambientFloatBottom { from { transform:translate3d(1.5%,1.5%,0) scale(1.025); } to { transform:translate3d(-1.5%,-2%,0) scale(1.01); } }

#header,#headerMenu,#content1,#content2,#content3,#content4,.aiPageShell,.supportContactSection,footer { position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce) { .ambientSvg,.ambientPath { animation:none!important; } }

/* ===== Hlavní obsah rozdělený do samostatných karet ===== */

#content1 .mainContentBox {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

#content1 .mainContentTitle {
  margin: 0;
  padding: 0 4px;
  color: #183b6a;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  font-weight: 800;
}

#content1 .contentSectionBox {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 26px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(113, 166, 236, .09), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(247, 251, 255, .80));
  border: 1px solid rgba(108, 153, 218, .19);
  border-radius: 24px;
  box-shadow:
    0 20px 46px rgba(71, 111, 168, .11),
    0 4px 12px rgba(71, 111, 168, .05),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px) saturate(120%);
}

#content1 .contentSectionBox::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(101, 157, 232, .48), transparent);
}

#content1 .contentSectionAI {
  background:
    radial-gradient(circle at 92% 0, rgba(118, 174, 239, .13), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .91), rgba(242, 248, 255, .84));
}

#content1 .contentSectionHTML {
  background:
    radial-gradient(circle at 8% 100%, rgba(147, 192, 245, .10), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .87), rgba(248, 251, 255, .82));
}

#content1 .contentSectionGallery {
  padding: 22px;
}

/* Hero / AI obsah zůstává bez vnějšího rámečku. */

#content1 .contentHeroSection {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Samostatný box pouze pro obsah $htmlBox3. */













/* Původní skrytí nadpisu se vztahovalo přímo na h2 v content1. */

#content1 > h2 {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
}

@media (max-width: 700px) {
  #content1 .mainContentBox {
    gap: 16px;
  }

  #content1 .contentSectionBox {
    padding: 18px 14px;
    border-radius: 18px;
  }

  #content1 .contentSectionBox::before {
    left: 14px;
    right: 14px;
  }
}

/* ===== Přesunuto z index.tpl — blok 5 ===== */

/* ===== Feature cards with PNG background icons ===== */

/* ===== Přesunuto z index.tpl — blok 6 ===== */

/* ===== Compact feature cards refinement ===== */

.aiFeatureStrip{gap:18px}

.aiMiniCard h3{margin:0 0 10px!important;font-size:22px;line-height:1.2}

.aiMiniCard p{max-width:34ch;margin:0!important;font-size:14px;line-height:1.58}


/* ===== AI rainbow sending outline ===== */
.aiPromptInputWrap {
  position: relative;
  width: 100%;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 18px;
  background: transparent;
  isolation: isolate;
}

.aiPromptInputWrap #vstupChat {
  position: relative;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.aiPromptInputWrap.isSending {
  background: conic-gradient(
    from 0deg,
    #5f8ff2,
    #59c6f2,
    #65d9bd,
    #f1d66b,
    #f39c72,
    #d67ee8,
    #7b83f5,
    #5f8ff2
  );
  animation: aiRainbowBorder 1.45s linear infinite;
  box-shadow:
    0 0 10px rgba(95,143,242,.36),
    0 0 22px rgba(89,198,242,.24),
    0 0 32px rgba(214,126,232,.16);
}

.aiPromptInputWrap.isSending::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -5px;
  border-radius: 22px;
  background: conic-gradient(
    from 0deg,
    rgba(95,143,242,.62),
    rgba(89,198,242,.55),
    rgba(101,217,189,.48),
    rgba(241,214,107,.48),
    rgba(243,156,114,.48),
    rgba(214,126,232,.55),
    rgba(123,131,245,.62),
    rgba(95,143,242,.62)
  );
  filter: blur(10px);
  opacity: .58;
  animation: aiRainbowBorder 1.45s linear infinite;
  pointer-events: none;
}

.aiPromptInputWrap.isSending #vstupChat {
  border-color: transparent !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: none !important;
}

@keyframes aiRainbowBorder {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aiPromptInputWrap.isSending,
  .aiPromptInputWrap.isSending::before {
    animation: none !important;
  }
}

/* ===== Přesunuto z index.tpl — blok 7 ===== */

/* ===== Final AI prompt form layout ===== */

.aiInlineControls {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) 58px !important;
  gap: 16px !important;
  align-items: end !important;
  width: 100% !important;
}

.aiField select,
.aiField input {
  width: 100% !important;
  height: 58px !important;
  box-sizing: border-box;
  margin: 0 !important;
  border: 1px solid #cbdcf2 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  color: #183253 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  outline: none;
  box-shadow: 0 8px 18px rgba(73,117,177,.06);
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.aiField select {
  padding: 0 42px 0 16px !important;
  cursor: pointer;
}

.aiField input {
  padding: 0 20px !important;
}

.aiField select:hover,
.aiField input:hover {
  border-color: #9fbee8 !important;
  background: #fff !important;
}

.aiField select:focus,
.aiField input:focus {
  border-color: #6f9fe2 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(92,145,218,.12), 0 10px 24px rgba(63,112,179,.08) !important;
}

.aiInlineButtonWrap {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}


#vstupOdeslat.aiSendButton {
  position: relative !important;
  inset: auto !important;
  overflow: hidden;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;
  float: none !important;

  color: #39649d !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(128,171,235,.18) !important;
  border-radius: 14px !important;

  cursor: pointer;
  box-shadow: none !important;

  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

#vstupOdeslat.aiSendButton::before {
  content: none !important;
}

#vstupOdeslat.aiSendButton svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s ease;
}

#vstupOdeslat.aiSendButton:hover,
#vstupOdeslat.aiSendButton:focus-visible {
  color: #315f9b !important;
  background: rgba(234,243,255,1) !important;
  border-color: rgba(128,171,235,.30) !important;
  box-shadow: 0 8px 18px rgba(73,117,177,.08) !important;
  outline: none;
}

#vstupOdeslat.aiSendButton:hover svg,
#vstupOdeslat.aiSendButton:focus-visible svg {
  transform: translate(2px,-2px);
}

#vstupOdeslat.aiSendButton:active {
  background: rgba(224,237,255,1) !important;
}

#vstupOdeslat.aiSendButton:active svg {
  transform: translate(1px,-1px) scale(.94);
}

@media (max-width: 850px) {
  .aiInlineControls { grid-template-columns: 145px minmax(0,1fr) 58px !important; gap: 12px !important; }
}

@media (max-width: 650px) {
  .aiInlineControls { grid-template-columns: 1fr !important; }
  .aiInlineButtonWrap { justify-content: flex-start !important; }
}


/* ===== Definitive vertical scrolling fix ===== */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: auto;
}

body {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

/* Dekorativní vrstvy nesmí zachytávat kolečko ani dotyk. */
.pageAmbientLines,
.pageAmbientLines *,
body::before,
body::after {
  pointer-events: none !important;
  touch-action: none !important;
}

/* Scroll se uzamkne pouze při skutečně otevřeném modálním okně. */
body:not(.donorsModalOpened) {
  overflow-y: visible !important;
}

/* =====================================================
   FINÁLNÍ FORMULÁŘ AI — ODESLAT, VALIDACE A DUHOVÝ OBrys
   ===================================================== */

.aiInlineControls {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) 58px !important;
  gap: 16px !important;
  align-items: end !important;
  width: 100% !important;
}

.aiPromptInputWrap {
  position: relative;
  width: 100%;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 18px;
  background: transparent;
}

.aiPromptInputWrap #vstupChat {
  position: relative;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.aiPromptInputWrap.isSending {
  background: conic-gradient(
    from 0deg,
    #5f8ff2,
    #59c6f2,
    #65d9bd,
    #f1d66b,
    #f39c72,
    #d67ee8,
    #7b83f5,
    #5f8ff2
  );
  animation: aiRainbowBorder 1.8s linear infinite;
  box-shadow:
    0 0 8px rgba(95,143,242,.32),
    0 0 18px rgba(89,198,242,.22),
    0 0 28px rgba(214,126,232,.14);
}

.aiPromptInputWrap.isSending::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -5px;
  border-radius: 22px;
  background: conic-gradient(
    from 0deg,
    rgba(95,143,242,.62),
    rgba(89,198,242,.55),
    rgba(101,217,189,.48),
    rgba(241,214,107,.48),
    rgba(243,156,114,.48),
    rgba(214,126,232,.55),
    rgba(123,131,245,.62),
    rgba(95,143,242,.62)
  );
  filter: blur(10px);
  opacity: .55;
  animation: aiRainbowBorder 1.8s linear infinite;
  pointer-events: none;
}

.aiPromptInputWrap.isSending #vstupChat {
  border-color: transparent !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: none !important;
}

.aiPromptInputWrap.hasError {
  box-shadow:
    0 0 0 2px rgba(220,72,93,.72),
    0 0 0 6px rgba(220,72,93,.10),
    0 10px 24px rgba(180,46,69,.12);
}

.aiPromptInputWrap.hasError #vstupChat {
  border-color: #dc485d !important;
}

@keyframes aiRainbowBorder {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

#vstupOdeslat.aiSendButton {
  position: relative !important;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  color: #3978c5 !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(128,171,235,.18) !important;
  border-radius: 14px !important;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

#vstupOdeslat.aiSendButton::before {
  content: none !important;
}

#vstupOdeslat.aiSendButton svg {
  position: relative;
  z-index: 1;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s ease;
}

#vstupOdeslat.aiSendButton:hover,
#vstupOdeslat.aiSendButton:focus-visible {
  color: #315f99 !important;
  background: rgba(234,243,255,1) !important;
  border-color: rgba(111,156,219,.34) !important;
  box-shadow: 0 8px 18px rgba(73,117,177,.10) !important;
  outline: none;
}

#vstupOdeslat.aiSendButton:hover svg,
#vstupOdeslat.aiSendButton:focus-visible svg {
  transform: translate(2px,-2px);
}

#vstupOdeslat.aiSendButton:active svg {
  transform: translate(1px,-1px) scale(.94);
}

#vstupOdeslat.aiSendButton[disabled] {
  cursor: wait;
  opacity: .72;
}

@media (max-width: 850px) {
  .aiInlineControls {
    grid-template-columns: 145px minmax(0, 1fr) 58px !important;
    gap: 12px !important;
  }
}

@media (max-width: 650px) {
  .aiInlineControls {
    grid-template-columns: 1fr !important;
  }
  .aiInlineButtonWrap {
    justify-content: flex-start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiPromptInputWrap.isSending,
  .aiPromptInputWrap.isSending::before {
    animation: none !important;
  }
}

/* =====================================================
   FINÁLNÍ DOLADĚNÍ: MENU, FEATURE KARTY, QR ČÁSTKY, SEO A FOOTER
   ===================================================== */

/* Horní menu: při hoveru se animuje pouze spodní linka. */
#headerMenu a,
#headerMenu a:hover,
#headerMenu a:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#headerMenu a::before {
  content: none !important;
  display: none !important;
}

#headerMenu a:hover,
#headerMenu a:focus-visible {
  color: #183f75 !important;
  outline: none;
}

#headerMenu a::after {
  bottom: 7px !important;
  height: 2px !important;
  opacity: .9;
}

#headerMenu a:hover::after,
#headerMenu a:focus-visible::after {
  width: calc(100% - 28px) !important;
}

/* Tři informační karty s jemně animovanými PNG motivy. */
.aiFeatureStrip {
  gap: 18px !important;
}

.aiMiniCard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 150px;
  padding: 24px 136px 24px 24px !important;
}

.aiMiniCard::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -22px;
  width: 154px;
  height: 154px;
  transform: translateY(-50%) rotate(-4deg) scale(1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .25;
  filter: saturate(.9) drop-shadow(0 12px 24px rgba(74, 124, 194, .14));
  pointer-events: none;
  animation: featureIconFloat 7s ease-in-out infinite alternate;
  transition: opacity .35s ease, filter .35s ease;
}

.aiMiniCard::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: -65px;
  right: -72px;
  width: 215px;
  height: 215px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 214, 255, .30), rgba(178, 214, 255, 0) 70%);
  pointer-events: none;
}

.aiMiniCardFast::before {
  background-image: url("../img/features/feature-fast.png");
}

.aiMiniCardTeachers::before {
  width: 164px;
  height: 164px;
  right: -30px;
  background-image: url("../img/features/feature-teachers.png");
  animation-delay: -2.2s;
}

.aiMiniCardSafe::before {
  width: 152px;
  height: 152px;
  right: -20px;
  background-image: url("../img/features/feature-safe.png");
  animation-delay: -4.1s;
}

.aiMiniCard:hover::before {
  opacity: .34;
  filter: saturate(1.05) drop-shadow(0 16px 30px rgba(74, 124, 194, .18));
}

.aiMiniCard h3,
.aiMiniCard p {
  position: relative;
  z-index: 1;
}

.aiMiniCard h3 {
  margin: 0 0 10px !important;
  font-size: 21px !important;
  line-height: 1.2;
}

.aiMiniCard p {
  max-width: 36ch;
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.58;
}

@keyframes featureIconFloat {
  0% {
    transform: translateY(-50%) translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }
  100% {
    transform: translateY(-50%) translate3d(-7px, -5px, 0) rotate(-1deg) scale(1.045);
  }
}

/* Přednastavené částky QR platby. */
.amountPresetRow {
  width: min(390px, 100%);
  margin: 14px auto 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.amountPresetButton {
  min-height: 36px;
  padding: 7px 12px;
  color: #416997;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(113, 158, 218, .24);
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(70, 112, 171, .07);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.amountPresetButton:hover,
.amountPresetButton:focus-visible,
.amountPresetButton.isActive {
  color: #25558f;
  background: #edf5ff;
  border-color: rgba(89, 139, 207, .45);
  box-shadow: 0 8px 17px rgba(70, 112, 171, .12);
  outline: none;
}

.amountPresetVip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8a6510;
  background: linear-gradient(180deg, #fffdf2, #fff6cf);
  border-color: rgba(217, 174, 48, .42);
}

.amountPresetVip:hover,
.amountPresetVip:focus-visible,
.amountPresetVip.isActive {
  color: #725006;
  background: linear-gradient(180deg, #fff9d9, #ffefaa);
  border-color: rgba(205, 154, 17, .62);
}

.vipStar {
  color: #f4bf19;
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(176, 126, 0, .18));
}

/* SEO text: nenápadný doplňkový obsah pro vyhledávače. */
.seoInfoBlock {
  position: relative !important;
  z-index: 20 !important;
  isolation: isolate;
  overflow: hidden;
  width: min(1040px, calc(100% - 32px));
  margin: 16px auto 8px;
  padding: 16px 20px;
  box-sizing: border-box;
  color: rgba(100, 122, 153, .82);
  background-color: rgba(248, 252, 255, .78);
  background-image:
    linear-gradient(145deg, rgba(248, 252, 255, .88), rgba(243, 249, 255, .78)),
    url("../img/bg-seo-parent.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 0 bottom 0;
  background-size: auto, 340px auto;
  border: 1px solid rgba(126, 170, 226, .11);
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(88, 125, 179, .05);
}

.seoInfoBlock h2,
.seoInfoBlock p {
  position: relative;
  z-index: 1;
}

.seoInfoBlock h2 {
  margin: 0 0 6px;
  color: rgba(70, 103, 142, .84);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.seoInfoBlock p {
  max-width: none;
  margin: 0;
  font-size: 10.8px;
  line-height: 1.62;
}

.seoInfoBlock p + p {
  margin-top: 6px;
}

@media (max-width: 700px) {
  .seoInfoBlock {
    width: calc(100% - 18px);
    margin-top: 12px;
    padding: 14px 14px 120px;
    background-position: 0 0, center bottom;
    background-size: auto, min(88%, 340px) auto;
  }

  .seoInfoBlock h2 {
    font-size: 11.5px;
  }

  .seoInfoBlock p {
    font-size: 10.5px;
  }
}

/* Méně nápadná a kompaktní patička. */
.siteFooterCompact {
  width: 100%;
  margin-top: 10px;
  padding: 12px 0 16px;
  color: #8294ab;
  background: rgba(232, 241, 252, .44);
  border-top: 1px solid rgba(120, 159, 211, .11);
  box-shadow: none;
}

.siteFooterInner {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.siteFooterCopyright {
  margin: 0;
  color: #8a9bb0;
  font-size: 11px;
  line-height: 1.4;
}

.siteFooterToplist {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 7px;
  opacity: .52;
  filter: grayscale(.5) saturate(.55);
  border-radius: 8px;
  transition: opacity .2s ease, filter .2s ease;
}

.siteFooterToplist:hover {
  opacity: .78;
  filter: grayscale(.15) saturate(.8);
}

.siteFooterToplist img {
  display: block;
  width: auto !important;
  height: 32px !important;
}

@media (prefers-reduced-motion: reduce) {
  .aiMiniCard::before {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .aiMiniCard {
    min-height: 146px;
    padding: 22px 104px 22px 20px !important;
  }

  .aiMiniCard::before,
  .aiMiniCardTeachers::before,
  .aiMiniCardSafe::before {
    width: 118px;
    height: 118px;
    right: -28px;
    opacity: .22;
  }

  .amountPresetRow {
    gap: 6px;
  }

  .amountPresetButton {
    flex: 1 1 calc(33.333% - 6px);
    padding-inline: 8px;
  }

  .siteFooterInner {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
}


/* ===== Výraznější PNG motivy ve třech informačních boxech ===== */
.aiFeatureStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px !important;
}

.aiMiniCard {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  min-height: 178px;
  padding: 26px 140px 26px 28px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(247,251,255,.96) 100%) !important;
  border: 1px solid rgba(134, 177, 235, 0.18) !important;
  box-shadow: 0 18px 38px rgba(101, 138, 192, 0.08) !important;
}

.aiMiniCard::before {
  content: "";
  position: absolute;
  z-index: 0 !important;
  top: 50%;
  right: 16px;
  width: 146px;
  height: 146px;
  transform: translateY(-50%) rotate(-4deg) scale(1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .24;
  filter: drop-shadow(0 14px 28px rgba(79, 125, 193, .18)) saturate(.98);
  pointer-events: none;
  animation: featureIconFloat 7s ease-in-out infinite alternate;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}

.aiMiniCard::after {
  content: "";
  position: absolute;
  z-index: 0 !important;
  top: -38px;
  right: -26px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(186, 216, 255, .38), rgba(186, 216, 255, 0) 72%);
  pointer-events: none;
}

.aiMiniCardFast::before {
  background-image: url("img/features/feature-fast.png");
}

.aiMiniCardTeachers::before {
  width: 154px;
  height: 154px;
  background-image: url("img/features/feature-teachers.png");
  animation-delay: -2s;
}

.aiMiniCardSafe::before {
  width: 148px;
  height: 148px;
  background-image: url("img/features/feature-safe.png");
  animation-delay: -3.8s;
}

.aiMiniCard:hover::before {
  opacity: .34;
  transform: translateY(-50%) translate3d(-4px, -4px, 0) rotate(-1deg) scale(1.04);
  filter: drop-shadow(0 18px 32px rgba(79, 125, 193, .22)) saturate(1.03);
}

.aiMiniCard h3,
.aiMiniCard p {
  position: relative;
  z-index: 1 !important;
}

.aiMiniCard h3 {
  margin: 0 0 10px !important;
  color: #163a6b;
  font-size: 25px !important;
  line-height: 1.14;
}

.aiMiniCard p {
  max-width: 33ch;
  margin: 0 !important;
  color: #5f7da8;
  font-size: 14px;
  line-height: 1.62;
}

@keyframes featureIconFloat {
  0% {
    transform: translateY(-50%) translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }
  50% {
    transform: translateY(-50%) translate3d(-3px, -2px, 0) rotate(-2deg) scale(1.025);
  }
  100% {
    transform: translateY(-50%) translate3d(-8px, -6px, 0) rotate(1deg) scale(1.055);
  }
}

@media (max-width: 1000px) {
  .aiFeatureStrip {
    grid-template-columns: 1fr;
  }

  .aiMiniCard {
    min-height: 164px;
    padding: 24px 118px 22px 22px !important;
  }

  .aiMiniCard::before,
  .aiMiniCardTeachers::before,
  .aiMiniCardSafe::before {
    width: 118px;
    height: 118px;
    right: 10px;
  }
}

/* ===== Oprava viditelnosti PNG motivů v informačních boxech ===== */
.aiMiniCard::before {
  z-index: 1 !important;
  right: 8px !important;
  width: 168px !important;
  height: 168px !important;
  opacity: .48 !important;
  background-size: 94% auto !important;
  filter: drop-shadow(0 14px 26px rgba(67, 112, 178, .18)) saturate(1.08) !important;
  mix-blend-mode: multiply;
}
.aiMiniCard::after { z-index: 0 !important; }
.aiMiniCard h3,
.aiMiniCard p { z-index: 2 !important; }
.aiMiniCard:hover::before {
  opacity: .62 !important;
  filter: drop-shadow(0 18px 30px rgba(67, 112, 178, .24)) saturate(1.15) !important;
}
@media (max-width: 1000px) {
  .aiMiniCard::before,
  .aiMiniCardTeachers::before,
  .aiMiniCardSafe::before {
    width: 132px !important;
    height: 132px !important;
    right: 8px !important;
    opacity: .42 !important;
  }
}


/* ===== Skutečné PNG ikony uvnitř feature boxů ===== */
.aiMiniCard::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

.aiMiniCard {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  padding-right: 150px !important;
}

.aiMiniBgIcon {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 12px;
  width: 142px;
  height: 142px;
  object-fit: contain;
  transform: translateY(-50%) rotate(-4deg);
  opacity: .42;
  filter: saturate(1.05) drop-shadow(0 14px 24px rgba(72, 121, 190, .18));
  pointer-events: none;
  user-select: none;
  animation: aiMiniPngFloat 6.5s ease-in-out infinite alternate;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}

.aiMiniCardTeachers .aiMiniBgIcon {
  width: 150px;
  height: 150px;
  right: 8px;
  animation-delay: -2s;
}

.aiMiniCardSafe .aiMiniBgIcon {
  width: 140px;
  height: 140px;
  right: 14px;
  animation-delay: -4s;
}

.aiMiniCard:hover .aiMiniBgIcon {
  opacity: .56;
  transform: translateY(-50%) translate3d(-5px, -4px, 0) rotate(-1deg) scale(1.045);
  filter: saturate(1.12) drop-shadow(0 18px 30px rgba(72, 121, 190, .22));
}

.aiMiniCard h3,
.aiMiniCard p {
  position: relative;
  z-index: 2 !important;
}

@keyframes aiMiniPngFloat {
  0% {
    transform: translateY(-50%) translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }
  100% {
    transform: translateY(-50%) translate3d(-8px, -6px, 0) rotate(1deg) scale(1.055);
  }
}

@media (max-width: 1000px) {
  .aiMiniCard {
    padding-right: 118px !important;
  }

  .aiMiniBgIcon,
  .aiMiniCardTeachers .aiMiniBgIcon,
  .aiMiniCardSafe .aiMiniBgIcon {
    width: 112px;
    height: 112px;
    right: 8px;
    opacity: .36;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiMiniBgIcon {
    animation: none !important;
  }
}

/* ===== Nadpisy informačních boxů vždy na jednom řádku ===== */
.aiFeatureStrip .aiMiniCard h3 {
  white-space: nowrap;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  letter-spacing: -0.015em;
}

@media (max-width: 1000px) {
  .aiFeatureStrip .aiMiniCard h3 {
    white-space: normal;
    font-size: 21px !important;
  }
}


/* ===== VIP 1000 Kč: krátký déšť hvězdiček a srdíček ===== */
.vipCelebrationLayer {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .55s ease;
}

.vipCelebrationLayer.isFading {
  opacity: 0;
}

.vipCelebrationParticle {
  position: absolute;
  top: -8vh;
  display: block;
  line-height: 1;
  opacity: 0;
  transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.75);
  animation-name: vipParticleFall;
  animation-timing-function: cubic-bezier(.18, .58, .34, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
  user-select: none;
  text-shadow: 0 4px 12px rgba(55, 83, 135, .18);
}

.vipCelebrationParticle.isStar {
  color: #f6c62d;
  filter: drop-shadow(0 3px 5px rgba(173, 124, 0, .26));
}

.vipCelebrationParticle.isHeart {
  color: #f06d9c;
  filter: drop-shadow(0 3px 5px rgba(175, 55, 103, .22));
}

@keyframes vipParticleFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.72);
  }
  12% {
    opacity: var(--vip-opacity, .9);
  }
  72% {
    opacity: var(--vip-opacity, .9);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--vip-drift, 0px), 112vh, 0) rotate(var(--vip-rotate, 320deg)) scale(1.08);
  }
}

.amountPresetVip.isActive .vipStar,
.amountPresetVip:active .vipStar {
  animation: vipStarPulse .55s ease;
}

@keyframes vipStarPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.28) rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vipCelebrationParticle {
    animation-duration: .01ms !important;
  }

  .vipCelebrationLayer {
    display: none !important;
  }
}


/* ===== Dekorativní PNG pozadí pro obsahové boxy ===== */
#content1 .contentHeroSection,
#content1 .contentSectionHTML {
  position: relative;
  z-index: 10;
  isolation: isolate;
}

#content1 .contentHeroSection {
  border-radius: 28px;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 88% 50%, rgba(136, 184, 243, .10), transparent 32%);
  background-repeat: no-repeat, no-repeat;
  background-position: right center, right 18px bottom 6px;
  background-size: auto, 44% auto;
}

#content1 .contentSectionHTML {
  background-image:
    radial-gradient(circle at 88% 72%, rgba(136, 184, 243, .08), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, .87), rgba(248, 251, 255, .82)),
    url("../img/bg-docs-rvp-svp.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right bottom, 0 0, right 18px bottom 10px;
  background-size: auto, auto, 42% auto;
}

#content1 .contentHeroSection > *,
#content1 .contentSectionHTML > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  #content1 .contentHeroSection {
    background-size: auto, 48% auto;
  }
  #content1 .contentSectionHTML {
    background-size: auto, auto, 46% auto;
  }
}

@media (max-width: 860px) {
  #content1 .contentHeroSection {
    padding-bottom: 220px;
    background-position: right center, center bottom 8px;
    background-size: auto, min(84%, 420px) auto;
  }

  #content1 .contentSectionHTML {
    padding-bottom: 220px;
    background-position: right bottom, 0 0, center bottom 12px;
    background-size: auto, auto, min(84%, 430px) auto;
  }
}

@media (max-width: 560px) {
  #content1 .contentHeroSection {
    padding-bottom: 190px;
    background-size: auto, min(90%, 360px) auto;
  }

  #content1 .contentSectionHTML {
    padding-bottom: 190px;
    background-size: auto, auto, min(90%, 360px) auto;
  }
}

/* ===== SEO box: zarovnání na šířku webu + transparentní PNG dekorace ===== */
.seoInfoBlock {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate;
  overflow: hidden;

  width: min(1180px, calc(100% - 32px)) !important;
  margin: 18px auto 10px !important;
  min-height: 150px;

  /* text po celé šířce */
  padding: 18px 22px !important;

  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(247,251,255,.90)) !important;
  border: 1px solid rgba(126, 170, 226, .12);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(88, 125, 179, .055);
}

.seoInfoBlock::before {
  content: "";
  position: absolute;
  z-index: 0;

  right: 14px;
  top: 10px;
  bottom: 10px;

  width: clamp(260px, 34vw, 470px);
  max-width: calc(100% - 28px);

  background: url("../img/seo-rvp-parent.png") no-repeat center center / contain;
  opacity: .32; /* nižší, aby text přes obrázek šel číst */
  pointer-events: none;
}

.seoInfoBlock::after {
  content: "";
  position: absolute;
  z-index: 0;

  right: 26px;
  top: 50%;
  width: clamp(240px, 30vw, 390px);
  height: clamp(140px, 18vw, 250px);

  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(170, 207, 255, .10), rgba(170, 207, 255, 0) 72%);
  pointer-events: none;
}

/* text musí být nad PNG */
.seoInfoBlock h2,
.seoInfoBlock p {
  position: relative;
  z-index: 2;
  max-width: none !important;
}

/* mobil */
@media (max-width: 820px) {
  .seoInfoBlock {
    width: calc(100% - 18px) !important;
    min-height: 0;
    padding: 16px !important;
  }

  .seoInfoBlock::before {
    right: -30px;
    top: auto;
    bottom: -10px;
    width: min(390px, 92%);
    height: 160px;
    opacity: .20;
    background-position: right bottom;
  }

  .seoInfoBlock::after {
    right: -40px;
    top: auto;
    bottom: -20px;
    width: min(390px, 92%);
    height: 150px;
    transform: none;
  }
}



/* ===== Box pro obsah htmlBox3 ===== */

/* =====================================================
   CONTENT3 / htmlBox3 — grafický box
   Zapracováno jako finální override na konci CSS.
   ===================================================== */

#content3 {
  position: relative !important;
  z-index: 20 !important;
  isolation: isolate !important;
  background: transparent !important;
}

/* Přímý box pro:
   <section class="content3SectionBox">
      <?php echo $htmlBox3; ?>
   </section>
*/
.content3SectionBox,
#content3 .content3SectionBox {
  display: block !important;
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;

  margin: 24px auto 18px auto !important;
  padding: 26px 28px !important;
  box-sizing: border-box !important;

  background:
    radial-gradient(circle at 92% 18%, rgba(170, 207, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,251,255,.91)) !important;

  border: 1px solid rgba(126, 170, 226, .16) !important;
  border-radius: 22px !important;

  box-shadow:
    0 18px 42px rgba(88, 125, 179, .08),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  backdrop-filter: blur(10px);
}

/* Jemná horní linka */
.content3SectionBox::before,
#content3 .content3SectionBox::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  left: 28px !important;
  right: 28px !important;
  top: 0 !important;

  height: 2px !important;
  border-radius: 0 0 999px 999px !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(101, 157, 232, .42),
    transparent
  ) !important;

  pointer-events: none !important;
}

/* Jemná dekorativní záře vpravo dole */
.content3SectionBox::after,
#content3 .content3SectionBox::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  right: -100px !important;
  bottom: -120px !important;

  width: 380px !important;
  height: 280px !important;

  border-radius: 999px !important;
  background: radial-gradient(
    circle,
    rgba(170, 207, 255, .16),
    rgba(170, 207, 255, 0) 72%
  ) !important;

  pointer-events: none !important;
}

/* Obsah musí být nad dekoracemi */
.content3SectionBox > *,
#content3 .content3SectionBox > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Texty uvnitř boxu */
.content3SectionBox p,
.content3SectionBox li,
#content3 .content3SectionBox p,
#content3 .content3SectionBox li {
  color: #607a9d !important;
}

.content3SectionBox h1,
.content3SectionBox h2,
.content3SectionBox h3,
#content3 .content3SectionBox h1,
#content3 .content3SectionBox h2,
#content3 .content3SectionBox h3 {
  color: #18355f !important;
}

.content3SectionBox a,
#content3 .content3SectionBox a {
  color: #3f6fae !important;
}

/* Aby clear nerozbíjel výšku */
.content3SectionBox .clear,
#content3 .content3SectionBox .clear {
  clear: both !important;
  display: block !important;
}

/* Mobil */
@media (max-width: 700px) {
  .content3SectionBox,
  #content3 .content3SectionBox {
    width: calc(100% - 18px) !important;
    margin: 18px auto 14px auto !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .content3SectionBox::before,
  #content3 .content3SectionBox::before {
    left: 18px !important;
    right: 18px !important;
  }

  .content3SectionBox::after,
  #content3 .content3SectionBox::after {
    right: -130px !important;
    bottom: -120px !important;
    width: 320px !important;
    height: 220px !important;
  }
}

/* =====================================================
   CONTENT4 / htmlBox2 — box pouze kolem <?php echo $htmlBox2; ?>
   #content4 zůstává jen vnější obal bez boxového pozadí.
   ===================================================== */

#content4 {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  background: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Vlastní grafický box je až uvnitř kolem htmlBox2 */
.content4SectionBox,
#content4 .content4SectionBox {
  display: block !important;
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;

  margin: 24px auto 18px auto !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;

  background:
    radial-gradient(circle at 90% 20%, rgba(170, 207, 255, .14), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(147, 192, 245, .10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.93), rgba(247,251,255,.90)) !important;

  border: 1px solid rgba(126, 170, 226, .15) !important;
  border-radius: 22px !important;

  box-shadow:
    0 18px 42px rgba(88, 125, 179, .075),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  backdrop-filter: blur(10px);
}

/* jemná horní linka */
.content4SectionBox::before,
#content4 .content4SectionBox::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  left: 28px !important;
  right: 28px !important;
  top: 0 !important;

  height: 2px !important;
  border-radius: 0 0 999px 999px !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(101, 157, 232, .38),
    transparent
  ) !important;

  pointer-events: none !important;
}

/* jemná záře vpravo dole */
.content4SectionBox::after,
#content4 .content4SectionBox::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  right: -110px !important;
  bottom: -125px !important;

  width: 390px !important;
  height: 285px !important;

  border-radius: 999px !important;
  background: radial-gradient(
    circle,
    rgba(170, 207, 255, .15),
    rgba(170, 207, 255, 0) 72%
  ) !important;

  pointer-events: none !important;
}

/* obsah nad dekorací */
.content4SectionBox > *,
#content4 .content4SectionBox > * {
  position: relative !important;
  z-index: 2 !important;
}

/* texty uvnitř */
.content4SectionBox p,
.content4SectionBox li,
#content4 .content4SectionBox p,
#content4 .content4SectionBox li {
  color: #607a9d !important;
}

.content4SectionBox h1,
.content4SectionBox h2,
.content4SectionBox h3,
#content4 .content4SectionBox h1,
#content4 .content4SectionBox h2,
#content4 .content4SectionBox h3 {
  color: #18355f !important;
}

.content4SectionBox a,
#content4 .content4SectionBox a {
  color: #3f6fae !important;
}

/* clear uvnitř */
.content4SectionBox .clear,
#content4 .content4SectionBox .clear {
  clear: both !important;
  display: block !important;
}

/* mobil */
@media (max-width: 700px) {
  .content4SectionBox,
  #content4 .content4SectionBox {
    width: calc(100% - 18px) !important;
    margin: 18px auto 14px auto !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .content4SectionBox::before,
  #content4 .content4SectionBox::before {
    left: 18px !important;
    right: 18px !important;
  }

  .content4SectionBox::after,
  #content4 .content4SectionBox::after {
    right: -135px !important;
    bottom: -120px !important;
    width: 320px !important;
    height: 220px !important;
  }
}





.footer-modern-text {
  max-width: 980px;
  margin: 34px auto 20px;
  padding: 26px 28px;
  text-align: center;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(70, 88, 115, 0.86);

  background:
    radial-gradient(circle at 15% 0%, rgba(120, 170, 240, 0.10), transparent 34%),
    radial-gradient(circle at 85% 100%, rgba(150, 200, 255, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.58);

  border: 1px solid rgba(120, 160, 215, 0.18);
  border-radius: 22px;

  box-shadow:
    0 16px 38px rgba(72, 105, 150, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);

  backdrop-filter: blur(10px);
}

.footer-modern-text p {
  margin: 0 0 14px;
}

.footer-modern-text p:last-child {
  margin-bottom: 0;
}

.footer-modern-text strong {
  color: #2c4f7c;
  font-weight: 800;
}

@media (max-width: 700px) {
  .footer-modern-text {
    width: calc(100% - 18px);
    padding: 20px 16px;
    font-size: 13px;
    line-height: 1.65;
    border-radius: 18px;
  }
}





.aiLimitMessage {

  margin: 24px auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;

  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,255,.96));
  border: 1px solid rgba(126, 170, 236, .22);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(104, 142, 201, .10);

  color: #29496f;
}

.aiLimitIcon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

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

  background: rgba(228, 238, 255, .96);
  border: 1px solid rgba(126, 170, 236, .18);
  border-radius: 50%;

  font-size: 26px;
}

.aiLimitText strong {
  display: block;
  margin-bottom: 4px;
  color: #18355f;
  font-size: 18px;
  font-weight: 800;
}

.aiLimitText p {
  margin: 0;
  color: #6d84a8;
  font-size: 14px;
  line-height: 1.55;
}

.aiLimitText span {
  color: #315f9d;
  font-weight: 800;
}

@media (max-width: 520px) {
  .aiLimitMessage {
    align-items: flex-start;
    padding: 16px;
  }

  .aiLimitIcon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 22px;
  }
}



.aiGeneratorHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}



.aiSettingsBtn {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

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

  border: 1px solid rgba(126, 170, 236, 0.22);
  border-radius: 20px;

  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.96), rgba(255,255,255,.58)),
    linear-gradient(135deg, rgba(247,251,255,.96), rgba(224,238,255,.96));

  cursor: pointer;

  box-shadow:
    0 12px 28px rgba(104, 142, 201, 0.10),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.aiSettingsBtn:hover {
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,1), rgba(255,255,255,.68)),
    linear-gradient(135deg, #f8fbff, #dcecff);



  box-shadow:
    0 16px 34px rgba(104, 142, 201, 0.15),
    inset 0 1px 0 rgba(255,255,255,1);
}

.aiSettingsIcon {
  width: 42px;
  height: 42px;

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

.aiSettingsIcon svg {
  width: 42px;
  height: 42px;
  display: block;

  filter:
    drop-shadow(0 3px 6px rgba(63, 111, 174, .18))
    drop-shadow(0 0 10px rgba(126, 170, 236, .20));

  transform-origin: center center;
}

.aiSettingsBtn:hover .aiSettingsIcon svg {
  animation: aiSettingsIconSpin 2.8s linear infinite;
}

@keyframes aiSettingsIconSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}



.aiSettingsModal {
  position: fixed;
  inset: 0;
  z-index: 999999;

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

  padding: 18px;
  box-sizing: border-box;

  background: rgba(42, 68, 108, .34);
  backdrop-filter: blur(8px);
}

.aiSettingsModal.isOpen {
  display: flex;
}

.aiSettingsModalBox {
  position: relative;
  width: min(520px, 100%);
  padding: 28px;
  box-sizing: border-box;

  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, rgba(126,170,236,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));

  border: 1px solid rgba(126,170,236,.20);
  box-shadow: 0 28px 70px rgba(70, 105, 160, .24);
}

.aiSettingsClose {
  position: absolute;
  right: 14px;
  top: 14px;

  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;

  background: rgba(228,238,255,.95);
  color: #3f6fae;
  font-size: 26px;
  cursor: pointer;
}

.aiSettingsModalBox h2 {
  margin: 0 44px 8px 0;
  color: #18355f;
  font-size: 26px;
}

.aiSettingsModalBox p {
  margin: 0 0 18px;
  color: #6d84a8;
}

.aiSettingsOptions {
  display: grid;
  gap: 12px;
}

.aiSettingsOption {
  display: flex;
  gap: 12px;
  align-items: flex-start;

  padding: 16px;
  border-radius: 18px;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(128,171,235,.20);

  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.aiSettingsOption:hover {
  background: #ffffff;
  border-color: rgba(95,143,217,.36);
  transform: translateY(-1px);
}

.aiSettingsOption input {
  margin-top: 4px;
  accent-color: #5f8fd9;
}

.aiSettingsOption strong {
  display: block;
  color: #27456c;
  font-size: 16px;
}

.aiSettingsOption small {
  display: block;
  margin-top: 4px;
  color: #6d84a8;
  line-height: 1.45;
}

.aiSettingsSave {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;

  border: 0;
  border-radius: 16px;

  color: #ffffff;
  background: linear-gradient(135deg, #6ea4ef, #5f8fd9);

  font-weight: 800;
  cursor: pointer;

  box-shadow: 0 14px 28px rgba(95,143,217,.20);
}


.aiSettingsModal {
  display: none;
}

.aiSettingsModal.isOpen {
  display: flex;
}

/* =====================================================
   RVP - finální tabulkový layout přes DIV
   zapracováno pro pages-ai RVPITEM:
   ikona | kód | popis | AI
   ===================================================== */

.rvpBlock {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 18px 0 0 !important;
}

.rvpBlockHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 14px !important;
}

.rvpBlockTitle {
  color: #18355f !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.rvpSearchBox {
  position: relative !important;
  width: min(340px, 100%) !important;
  flex: 0 1 340px !important;
  margin: 0 !important;
}

#rvpSearchInput {
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box !important;
  padding: 0 44px 0 14px !important;
  color: #2d4d70 !important;
  background: rgba(255, 255, 255, .76) !important;
  border: 1px solid rgba(128, 171, 235, .18) !important;
  border-radius: 12px !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

#rvpSearchInput::placeholder {
  color: #93a5bd !important;
}

#rvpSearchInput:hover {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(128, 171, 235, .26) !important;
}

#rvpSearchInput:focus {
  background: #fff !important;
  border-color: rgba(110, 164, 239, .42) !important;
  box-shadow: 0 0 0 4px rgba(110, 164, 239, .10) !important;
}

.rvpSearchSubmit {
  position: absolute !important;
  right: 4px !important;
  top: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  color: #6d84a8 !important;
  background: rgba(238, 246, 255, .72) !important;
  border: 1px solid rgba(128, 171, 235, .15) !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.rvpSearchSubmit:hover {
  color: #4f78ad !important;
  background: rgba(238, 246, 255, .96) !important;
  border-color: rgba(110, 164, 239, .28) !important;
  box-shadow: 0 4px 12px rgba(104, 142, 201, .10) !important;
}

.rvpvystup {
  width: 100% !important;
  margin-top: 14px !important;
  color: #26456c !important;
}

.rvpitem {
  width: 100% !important;
  margin: 0 0 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .76) !important;
  border: 1px solid rgba(128, 171, 235, .16) !important;
  border-radius: 14px !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.rvpitem:hover {
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(110, 164, 239, .28) !important;
  box-shadow: 0 10px 26px rgba(104, 142, 201, .10) !important;
}






.rvpToggleIcon,
.rvpAiIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  user-select: none !important;
}

.rvpToggleIcon {
  color: #7890ad !important;
  background: rgba(245, 249, 255, .72) !important;
  border: 1px solid rgba(128, 171, 235, .14) !important;
  font-size: 13px !important;
}

.rvpCode {

  max-width: 100% !important;
  padding: 2px 7px !important;
  box-sizing: border-box !important;
  color: #5c789d !important;

  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rvpDesc {

  color: #26456c !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.starAI {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  float:right;
display:inline-block;
}

.starAI > a.rvpAiIcon,
.rvpAiIcon {

  color: #d8a800 !important;
  background: rgba(255, 244, 190, .42) !important;
  border: 1px solid rgba(225, 185, 55, .22) !important;
  font-size: 14px !important;
  opacity: .84 !important;
  transition: opacity .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.starAI > a.rvpAiIcon:hover,
.rvpAiIcon:hover {
  opacity: 1 !important;
  color: #c49300 !important;
  background: rgba(255, 238, 150, .72) !important;
  border-color: rgba(225, 185, 55, .38) !important;
  box-shadow: 0 4px 12px rgba(216, 168, 0, .14) !important;
  transform: scale(1.04) !important;
  text-decoration: none !important;
}

.rvpitem:hover .rvpCode {
  color: #345f96 !important;
  background: rgba(110, 164, 239, .10) !important;
  border-color: rgba(110, 164, 239, .22) !important;
}

.rvpitem:hover .rvpDesc {
  color: #24486f !important;
}

.rvpitemtext {
  display: none;
  margin: 0 !important;
  padding: 8px 22px 18px 202px !important;
  box-sizing: border-box !important;
  color: #607695 !important;
  background: rgba(255, 255, 255, .46) !important;
  border-top: 1px solid rgba(128, 171, 235, .10) !important;
  border-bottom: 0 none !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.rvpitemtext p {
  margin-top: 0 !important;
}

@media (max-width: 700px) {
  .rvpBlockHeader {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .rvpSearchBox {
    width: 100% !important;
    flex-basis: auto !important;
  }

  .rvpitemttitle.rvpTableRow,
  .rvpTableRow {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    grid-template-areas:
      "toggle code ai"
      ". desc ." !important;
    row-gap: 6px !important;
    align-items: start !important;
  }

  .rvpTableCellToggle {
    grid-area: toggle !important;
  }

  .rvpTableCellCode {
    grid-area: code !important;
  }

  .rvpTableCellDesc {
    grid-area: desc !important;
  }

  .starAI {
    grid-area: ai !important;
  }

  .rvpitemtext {
    padding: 8px 16px 16px !important;
  }
}


/* =====================================================
   RVP hledání + zvýraznění
   Dej na konec style3.css, pokud používáš samostatně.
   ===================================================== */

.rvpSearchBox {
  position: relative;
}

.rvpSearchClear {
  position: absolute;
  right: 39px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7890ad;
  background: rgba(245, 249, 255, .86);
  border: 1px solid rgba(128, 171, 235, .18);
  border-radius: 50%;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.rvpSearchClear:hover {
  color: #345f96;
  background: #fff;
  text-decoration: none;
}

.rvpSearchHit {
  padding: 1px 1px;
  color: #2d4d70;
  background: rgba(255, 220, 95, .46);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}















/* =====================================================
   AUTO HINT - vždy nad všemi prvky
   ===================================================== */

.autoHintTarget {
  position: relative;
}

.autoHintBubble {
  position: fixed;
  z-index: 2147483647;

  width: 280px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  box-sizing: border-box;

  color: #26456c;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(128, 171, 235, 0.28);
  border-radius: 13px;
  box-shadow: 0 18px 42px rgba(44, 82, 138, 0.28);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-6px);
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease;
}

.autoHintBubble.isVisible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.autoHintBubble.isLeaving {
  opacity: 0;
  visibility: visible;
  transform: translateY(-4px);
}

.autoHintBubble::before {
  content: "";
  position: absolute;
  left: var(--hintArrowLeft, 50%);
  top: -7px;
  transform: translateX(-50%) rotate(45deg);

  width: 12px;
  height: 12px;

  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid rgba(128, 171, 235, 0.28);
  border-top: 1px solid rgba(128, 171, 235, 0.28);
}

.autoHintBubble.hintTop::before {
  top: auto;
  bottom: -7px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid rgba(128, 171, 235, 0.28);
  border-bottom: 1px solid rgba(128, 171, 235, 0.28);
}

.autoHintBubble strong {
  color: #31598f;
}