body { margin: 0; padding: 0; font-size: 1em; font-family:  Arial, Arial CE, Verdana, Tahoma;}
h1 {    font-size: 0.7em; margin:0;}
h2 {    font-size: 25px;}
sub {font-size:xx-small;}
.adaptable{	display:inline-block; width:50%; vertical-align:top; padding: 6px 0px;}
.hidden {  display:none;}
.gbutton, .gbutton-s {background-color:var(--m-ce-bg)!important;	color:var(--m-ce-tx)!important;	font-size:1em;	line-height:24px;	border-radius:5px;	-webkit-border-radius:5px;	-moz-border-radius:5px;	border:0;	padding: 4px 10px; margin: 10px 4px;	text-decoration: none; white-space: nowrap;  display: inline-block;}	
.gbutton{ box-shadow: 0 4px #999; transition: all 0.3s ease; cursor: pointer;  }
.gbutton:hover {  background: var(--m-ce-bg-h)!important;}
.gbutton:disabled {      background-color: var(--m-ce-bg-s)!important;      cursor: not-allowed; transform: none !important;  box-shadow: none !important; 
    }
button.gbutton {      position: relative;      overflow: hidden;   min-width:150px; box-shadow: 2px 4px var(--m-ce-bg-s); }
button.gbutton:active {transform: translateY(4px);  box-shadow: 2px 2px var(--m-ce-bg-s);}
button.gbutton:hover {transform: translateY(-2px); box-shadow: 2px 6px var(--m-ce-bg-s);}
.gbutton:disabled:hover,button.gbutton:disabled:hover {   background-color: var(--m-ce-bg-s) !important;}
button.gbutton:focus {transform: translateY(4px); box-shadow: 0 0 10px var(--m-ce-bg-h)!important;}
button.wait5button {cursor: not-allowed; pointer-events: none; }
button.wait5button::after {       content: "";       position: absolute;       top: 0;       left: 0;       height: 100%;       width: 0%; background-color:var(--m-ce-bg);       opacity:0.3;       animation: fillHorizontal 3s linear forwards;}
@keyframes fillHorizontal {       99% {         width: 100%;   }       100% {         width: 0%;      }     }
button.wait5button::before {       content: "🧍‍♂️🆚🤖...⏳...✅";       position: absolute;       inset: 0;       display: flex;       align-items: center;       justify-content: center;      background-color:var(--m-ce-bg-s);      animation: hideOverlay 0.5s forwards;       animation-delay: 3s;  opacity: 1;       transition: opacity 0.5s ease;     }
button.wait5button {       opacity: 1;             animation: enableBtn 0s forwards;       animation-delay: 3s;     }
@keyframes enableBtn {       to {        pointer-events: auto;         cursor: pointer;       }     }
@keyframes hideOverlay {       0% {         opacity: 1;       }       100% {         opacity: 0;         visibility: hidden;       }     }
.text_input,.select_input {  padding: 8px 10px;     width: 100%;      max-width: 400px;      border: 1px solid  var(--m-ce-bc);      border-radius: 5px;      margin:10px 0;      box-sizing: border-box; background-color: var(--m-bg);color: var(--m-tx);	  box-shadow: inset 0 0 3px var(--m-ce-bg-s);
    }
.select_input{font-size: 1.1em;}
.select_input optgroup { /* iOS optgroup fix - optional: improves contrast */  font-weight: bold;  background-color: var(--m-ce-bg-s); color: var(--m-tx); }
.select_input option {      padding: 0.3em;    }
.text_input::placeholder {color: var(--m-tx);	}


.redbg{background-color: #FEE !important;}
.greenbg{background-color: #EFE !important;}
.sgreenbg{background-color: #BFB !important;}
.orangebg{background-color: #FED !important;}
.sivebg{background-color: #DDD !important;} 

.cookie-banner {	display:none;    position: fixed;    bottom: 10px;    left: 50%;    transform: translateX(-50%);    background: var(--m-bg);    padding: 15px;    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);    gap: 10px;	z-index:2000;  }
.blinking {  animation: blinker 1s linear infinite;}@keyframes blinker { 50% { opacity: 0.2; }}

.text3d { font-family: helvetica; text-align: center;   text-shadow: #e7e7e7 3px 5px 0,#36b0b6 4px 6px 3px, #ccc 8px 11px 10px;}

.canadd{	width:100%;	float: left;}
.postform { border: 5px inset #aaa; padding: 10px; margin-bottom:10px;}
.mainbody { margin: 0 auto; padding:0 5px;  background: var(--m-bg); -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -ms-border-radius: 5px;  -o-border-radius: 5px;  border-radius: 5px; display: block;  position: relative;}
/*.maintable a { text-decoration: underline !important;}*/
.maintable table{ border-collapse: collapse; width: 100%;table-layout: fixed;}
.maintable table, .maintable td, .maintable th {line-height:16px;   border: none; vertical-align: text-top;}
.maintable tr {border-bottom: 1px solid #aaa;}
.maintable_tr {border-bottom: 1px solid #aaa;}
.maintable tr:hover {background-image: linear-gradient(rgba(200, 255, 200, 0.15) 100%, rgba(0, 0, 0, 0.01) 100%);}
.maintable tr:hover a {text-decoration:underline;}
.hlavicka { top:0px; width:100%; margin: 0 auto; padding: 0; font-family:"Comic Sans MS"; font-size: 1em;}
.hlavnemenu {  margin: 0; padding: 1px;  background: var(--mm-bg);}
.progressbar { height:50px; width:250px;
background-image: url("progress_bar.gif");
background-size:100%;
background-repeat: no-repeat;display: inline-block;	}
#creditspace { float:right;}
#creditspace a{ display: block;
  text-decoration: none;
  color: #1e6468;}
.rm{float:right !important;}
.breadcrumb{position: relative;height: 50px; display: table;margin-bottom: 5px;width: 100%;background: #fff;vertical-align: middle;text-align: center;}
.breadcrumb ul{position:relative; margin:0px; padding:0; }
.breadcrumb ul li{padding:0; margin:0px 0px 0.5em 0px; list-style:none; float:left; display:inline;}
.breadcrumb ul li a{font:0.7em Arial, Helvetica, sans-serif; color:#000; text-decoration:none; line-height:25px; display:block; padding:0 5px 0 5px; }
.breadcrumb ul li a:hover {text-decoration:underline; background:#eee}
.active a{ background:#ddd !important; font-weight:bold !important;font-size:1em !important; -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -ms-border-radius: 5px;  -o-border-radius: 5px;  border-radius: 5px;}
.active a:hover {text-decoration:none; }

#chat {background: #FFF;position:fixed;bottom: 0;  right: 0; width:130px;margin:0 auto;padding: 3px; font:11px Arial, Helvetica, sans-serif;
/*	white-space: pre-wrap;      /* CSS3 */   
 /*  white-space: -moz-pre-wrap; /* Firefox */   
 /*  white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;
}

.parne { background-color: #F6F6F6;}
.neparne {background-color: #E6E6E6;}
#messages, #admin_messages{   overflow-y: auto;  height: 150px;}
.infogafai div.autori{display: none;padding:5px;width:330px;}
.infogafai:hover div.autori {display: block;position: absolute;border: thin solid black;background-color: #D2F1F2;z-index : 50;}
.logo{width:150px; height:142px; background: url(./images/logo25_v2.0g-min.png) no-repeat; top: 5px;opacity:0.3;   right: 5px;  position: absolute;pointer-events: none;}
.main-obsah{width:100%; background: #fff;}
.main-obsah a { text-decoration:none;  color:#000; word-wrap: break-word;}
.main-obsah span {display: block;margin:0px 0px 0.5em 0px;  word-wrap: break-word; }
.main-obsah a:hover { text-decoration:none; background:#C7FCE4;}
.obsah { width:100%; margin: 0 auto; padding: 0px 0px 0px 0px; background: #eee;}
	.lavypanel { width: 150px; padding: 5px; background: #f0f; float:left; }
	.strednypanel { width: 93%; min-height: 400px; margin: 0 10px; padding: 5px; background: #fff; float:left; }
	.pravvypanel { width: 150px; padding: 5px; background: #00f; float:right;  }
.infomessage { margin: 5px auto;padding: 6px;font-weight: bold;background: #D7FADE;font-family: "Comic Sans MS";}
.errormessage { margin: 5px auto;padding: 6px;font-weight: bold;background: #FAD7DE;font-family: "Comic Sans MS";}
.dolnemenu { width:95%; margin: 0 auto; padding: 5px; background: #0ff;  }
.pata { width:95%; margin: 0 auto; padding: 5px; background: #eee; overflow: hidden; font:0.7em Arial, Helvetica, sans-serif;}
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
#cssmenu ul,
#cssmenu li,
#cssmenu a, #cssmenu p {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: "Lato", sans-serif;
}
#cssmenu {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
  clear:both;
}
#cssmenu ul {
  zoom: 1;
  padding: 1px 0px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#cssmenu ul:before {
  content: "";
  display: block;
}
#cssmenu ul:after {
  content: "";
  display: table;
  clear: both;
}
#cssmenu li {
  float: left;
  border: 1px solid transparent;
}
#cssmenu li a, #cssmenu li p {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 8px 9px 8px;
  display: block;
  text-decoration: none;
  color: #1e6468;
  border: 1px solid transparent;
  font-size: 1em;
  font-weight:bold;
}
#cssmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#cssmenu li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000;
  background: #36b0b6;
  color:white;
}
#cssmenu li:hover a {
  color: #fff;
}
/*-------------impromptu---------- */
			.jqifade{ position: fixed; background-color: #aaaaaa; }
			div.jqi{	width:300px;min-height:100px;position: fixed;border: 6px solid #CCC;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: 0 0 20px #222;-moz-box-shadow: 0 0 20px #222;box-shadow: 0 0 20px #222;overflow: visible;background: #fff;}
			div.jqi .jqicontainer{font-weight: bold;}
			div.jqi .jqiclose{ display: block;background: url(./overlay-close.png) no-repeat 0 0;position: absolute;right: -24px;top: -24px;cursor:pointer;width: 42px;height: 42px;text-indent: -999em;z-index: 999; }
div.jqi .jqiclose:hover{background-position:0px -42px;}
			div.jqi .jqimessage{ padding: 10px 10px 80px 10px; line-height: 20px; color: #444444; max-height: 200px;overflow-y: auto;}
			div.jqi .jqibuttons{ text-align: right; padding: 2px 5px 2px 5px; border: solid 1px #EEE;position: absolute;bottom: 1px;right: 5px;}
			div.jqi button{ padding: 3px 10px; margin: 0px 5px 10px 5px; background-color: #2F6073; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }
			div.jqi button.jqidefaultbutton{ background-color: #BF5E26; }
			div.jqi button:hover{ background-color: #A2AA8C; }
			.jqiwarning .jqi .jqibuttons{ background-color: #BF5E26; }
			.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 25px transparent;}
			.jqi .jqiarrowtl{ left: 10px; top: -50px; border-bottom-color: #ffffff; }
			.jqi .jqiarrowtc{ left: 50%; top: -50px; border-bottom-color: #ffffff; margin-left: -10px; }
			.jqi .jqiarrowtr{ right: 10px; top: -50px; border-bottom-color: #ffffff; }
			.jqi .jqiarrowbl{ left: 10px; bottom: -50px; border-top-color: #ffffff; }
			.jqi .jqiarrowbc{ left: 50%; bottom: -50px; border-top-color: #ffffff; margin-left: -10px; }
			.jqi .jqiarrowbr{ right: 10px; bottom: -50px; border-top-color: #ffffff; }
			.jqi .jqiarrowlt{ left: -50px; top: 10px; border-right-color: #ffffff; }
			.jqi .jqiarrowlm{ left: -50px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
			.jqi .jqiarrowlb{ left: -50px; bottom: 10px; border-right-color: #ffffff; }
			.jqi .jqiarrowrt{ right: -50px; top: 10px; border-left-color: #ffffff; }
			.jqi .jqiarrowrm{ right: -50px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
			.jqi .jqiarrowrb{ right: -50px; bottom: 10px; border-left-color: #ffffff; }
			
 .modalmain{background: rgba(44, 41, 41, 0.74) none  0 0 repeat-y; width: 100%;height: 2586px;z-index: 800; position: fixed;top: 0;left: 0; }
 
 .modalin{position: fixed;width: 620px; margin:auto; height:500px;  background: #e8e8e8;-moz-border-radius: 8px;-webkit-border-radius: 8px;left: 50%;margin-left: -300px; overflow-y: auto;  padding: 10px;}
 
.modalin .nadpis {margin-left:15px;}
.closex{ display: block;background: url(./overlay-close.png) no-repeat 0 0;position: fixed;top: 0px;cursor:pointer;width: 42px;height: 42px;text-indent: -999em;z-index: 999;left:50%; margin-left:284px; }
.closex:hover{background-position:0px -42px;}
.bold{font-weight:bold !important;}
.sive{color:#aaa !important;}
.red{color:#f88 !important;}
.magic{background: url("./cary.gif") no-repeat center;} 
.help{background: url("./images/help.gif") no-repeat center;} 
.inline {display: inline !important;}
.tabletrup {border-bottom: 5px solid #aaa !important;}
.nedostupne :hover {text-decoration:underline;} 
.nedostupne {cursor:pointer; color:#555 !important;} 
img.control{cursor:zoom-in;}

@media only screen 
  and (min-width: 0px) 
  and (max-width: 700px) {
	.adaptable{	display:inline-block; width:100%; vertical-align: top;}
	.infogafai:hover div.autori{display:none;}
	.modalin{ width: 320px; height:100%; top:20px; padding: 5px; margin:0; left:0px;}
	.closex{left:0px;}
	img.control{height:35px;}
	.mainbody{padding:0; margin:0;}
	.hlavicka{font-size:1em;}
	.strednypanel{width:100%;margin:0;padding:0;float:none;}
	#chat{display:none;} 
	#creditspace{font-size:0.8em;}
	.rm{font-size:0.8em;}
	
}
@media print {
  /* print style sheets go here */
}
    .upload-form {
      transition: filter 0.3s ease, opacity 0.3s ease;
    }

    .blurred {
      filter: blur(3px);
      pointer-events: none;
      user-select: none;
      opacity: 0.4;
    }

    .upload-btn-wrapper {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }

    .upload-btn-wrapper input[type="file"] {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      font-size: 100px;
      cursor: pointer;
    }



    .input-error {
      border-color: red!important;
      outline: none;
    }

    .error_note {
		color: red; font-size: 0.9em; display: none; margin-top: 5px;
    }

 

    #upload_overlay {
      display: none;
      position: fixed;
      inset: 0;
      background-color: rgba(255, 255, 255, 0.25);
      z-index: 1000;

      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 1.2em;
      color: #333;
    }

    #progress_container {
      width: 300px;
      height: 20px;
      background-color: #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
    }

    #progress_bar {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    #progress_completed {
      height: 100%;
      width: 1%;
      background-color: #4caf50;
      position: absolute;
	  text-align: center;
    }


	   label {
     /* display: block;*/
      margin: 0.5em;
      font-weight: bold;
    }



.faq_wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.faq_item {
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 0;
}

.faq_question {
  font-weight: 600;
  cursor: pointer;
  font-size: 1.125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
}

.faq_question::after {
  content: "+";
  font-weight: bold;
  margin-left: auto;
  transition: transform 0.3s ease;
}

details[open] .faq_question::after {
  content: "−";
}

.faq_answer {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #4b5563;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}
					
					#sidtree-container {
					  max-width: 500px;
					  margin: 20px auto;
					  font-family: sans-serif;
					  background-color: var(--m-bg);
					  padding: 15px;
					  border-radius: 8px;
					  color: var(--m-tx);
					  box-shadow: 0 0 10px var(--m-ce-bg-s);
					}



					.suggestion-list {
					  max-height: 200px;
					  overflow-y: auto;
					  border: 1px solid var(--m-ce-bg);
					  border-radius: 4px;
					  background: var(--m-bg);
					  color: var(--m-tx);
					  box-shadow: inset 0 0 5px var(--m-ce-bg-s);
					}

					.suggestion-item {
					  padding: 6px 10px;
					  cursor: pointer;
					  transition: background-color 0.2s;
					}

					.suggestion-item:hover {
					  background-color: var(--m-ce-bg);
					  color: #fff;
					}

					.suggestion-item.active {
					  background-color: var(--m-ce-bg-h);
					  color: #fff;
					}

					.suggestion-item.new {
					  font-style: italic;
					  color: #9f9;
					}
					.suggestion-item.disabled {
					  font-style: italic;
					  color: #888;
					  pointer-events: none;
					}

					.suggestion-item.alt {
					  opacity: 0.85;
					}

					.breadcrumb {
					  display: inline-block;
					  margin-right: 5px;
					  cursor: pointer;
					  color: var(--m-ce-bg-h);
					  text-decoration: underline dotted;
					  font-weight: bold;
					}

					.breadcrumb:hover {
					  color: var(--m-ce-bg);
					}

					.upload-step {
					  margin-top: 20px;
					}

					.form-group {
					  margin-bottom: 15px;
					}
					.step-title {
					  font-weight: bold;
					  font-size: 1.1em;
					  margin: 20px 0 10px;
					  color: var(--m-tx);
					}




.setting-grid {
  column-count: 3;
  column-gap: 1.5rem;
}

.setting-card {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 1em;
  border-radius: 8px;
  box-sizing: border-box;
}
@media (max-width: 1000px) {
  .setting-grid { column-count: 2; }
}
@media (max-width: 600px) {
  .setting-grid { column-count: 1; }
}



.setting-card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.setting-card h3 {
  margin-top: 0;
  color: #c0392b;
}

.setting-card .note {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.5em;
}

.toggle-btn {
  display: inline-block;
  margin-top: 1em;
  padding: 0.5em 1em;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.toggle-btn:hover {
  background-color: #2c80b4;
}

.status {
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: bold;
}

.status-ads, .status-analytics, .status-socials, .status-chat {
  color: white;
}

.status-ads.on,
.status-analytics.on,
.status-socials.on,
.status-chat.on {
  background-color: #27ae60;
}

.status-ads.off,
.status-analytics.off,
.status-socials.off,
.status-chat.off {
  background-color: #e74c3c;
}

.ad-warning-box {
  border: 1px solid #f5c518;
  background-color: #fff9dc;
  padding: 1em 1.2em;
  border-radius: 8px;
  margin: 1em 0;
  font-size: 0.95em;
  color: #333;
}
.ad-warning-box h4 {
  margin-top: 0;
  color: #c0392b;
  font-size: 1.1em;
}
.ad-warning-box p {
  margin: 0.4em 0;
}
			table.hodnotenie {
			  border-collapse: collapse;
			  width: 100%;
			  font-size: 0.95em;
			}

			table.hodnotenie th, table.hodnotenie td {
			  border: 1px solid #ccc;
			  padding: 0.5em;
			  text-align: center;
			}

			table.hodnotenie td:first-child {
			  text-align: left;
			}
			table.hodnotenie td {
			  border-radius: 20px;
			  padding: 2px;
			}
			.hodnotenie td {
			  transition: background-color 0.2s ease;
			}
			.hodnotenie #ho6 { background: #d5f7dc; }  /* 1* - svetlá zelená mint */
			.hodnotenie #ho5 { background: #e2f5ce; }  /* 1 - zelenkavá */
			.hodnotenie #ho4 { background: #f0f5ce; }  /* 2 - svetlo žltá */
			.hodnotenie #ho3 { background: #f9f3cf; }  /* 3 - béžová */
			.hodnotenie #ho2 { background: #fde2c9; }  /* 4 - svetlá oranžová */
			.hodnotenie #ho1 { background: #f9cccc; }  /* 5 - svetlá červená */
			.hodnotenie #ho0 { background: #f3c6c6; }  /* 5- - ružovočervená */
			.hodnotenie #ho6:hover { background: #a8e6b1; }  /* výraznejšia mintová */
			.hodnotenie #ho5:hover { background: #c3e673; }  /* zelená */
			.hodnotenie #ho4:hover { background: #e9e673; }  /* sýta žltá */
			.hodnotenie #ho3:hover { background: #f0d98c; }  /* žltobéžová */
			.hodnotenie #ho2:hover { background: #fcb87f; }  /* oranžová */
			.hodnotenie #ho1:hover { background: #f28d8d; }  /* červená */
			.hodnotenie #ho0:hover { background: #e87575; }  /* tmavšia ružovočervená */
/* ========== DEVIL BASE ========== */
.devil {
  position: absolute;
  bottom: 100%;
  right: 23px;
  width: 40px;
  height: 40px;
  background-color: #900;
  border-radius: 50%;
  transform: translate(50%, 50%);
  z-index: 2;
  transition: transform 0.3s ease, background-color 0.3s ease;
  animation: miznutie 15s forwards !important;
}

/* ========== HORNS ========== */
.horn {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #600;
  top: -8px;
}
.horn.left { left: 5px; transform: rotate(-20deg); }
.horn.right { right: 5px; transform: rotate(20deg); }

/* ========== TAIL ========== */
.tail {
  position: absolute;
  width: 60px;
  height: 30px;
  bottom: -30px;
  left: -45px;
  background: transparent;
  border: 3px solid transparent;
  border-right-color: #900;
  border-radius: 50% 0 0 50%;
  transform-origin: right top;
  animation: wag 2.5s 3 forwards ease-in-out;
  z-index: 1;
}
.tail::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 25px;
  transform: rotate(-30deg);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #900;
}

/* ========== ARM ========== */
.arm {
  position: absolute;
  width: 6px;
  height: 20px;
  background: #600;
  top: 10px;
  left: 0;
  border-radius: 3px;
  transform-origin: bottom center;
  transform: rotate(-10deg);
  opacity: 0;
  transition: transform 0.2s ease;
}
.devil:hover .arm {
  opacity: 1;
  animation: wave-arm 1s infinite ease-in-out;
}

/* ========== EYES & BLINK ========== */
.devil::before,
.devil::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  top: 12px;
}
.devil::before { left: 10px; animation: blink 10s 1 forwards; }
.devil::after { right: 10px;  animation: blink 5s 1 forwards; }

/* ========== BUBBLE ========== */
.bubble {
  position: absolute;
  bottom: 100%;
  left: -170px;
  background: white;
  color: #900;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: .8em;
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
  opacity: 0;
  /*transform: translateY(-5px);*/
  transition: all 0.3s ease;
  pointer-events: none;
  width: 200px;         /* obmedzí šírku */
  white-space: normal;      /* umožní zalamovanie */
  z-index: 10;
}

.bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 165px;
  border: 6px solid transparent;
  border-top-color: white;
}

.devil:hover .bubble, .devil.hover .bubble {
  opacity: 1;
  transform: translateY(-10px);
}

/* ========== SMILE ========== */
.devil .smile {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 20px;
  height: 15px;
  border-bottom: 5px solid yellow;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  animation: smileOccasionally 10s 1 forwards ease-in;
  pointer-events: none;
}

/* ========== APPEAR / ANIMATIONS ========== */
.appear {
  opacity: 0;
  transform: translate(50%, 50%) scale(0.8);
  animation: fadeInScale 1.6s 1 forwards ease;
}
.jump {
  animation: jump 0.8s ease;
}
.fly-away {
  animation: flyaway 1s forwards ease-in !important;
}

/* ========== EFFECTS ========== */
.effect {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}
.effect.smoke {
  width: 100px;
  height: 50px;
  background: radial-gradient(circle, #000 30%, transparent 90%);
  border-radius: 50%;
  opacity: 0;
  animation: puff 1s ease-out forwards;
}
.effect.fire {
  width: 80px;
  height: 20px;
  background: radial-gradient(ellipse at center, #f90 30%, transparent 70%);
  animation: firePulse 1s ease-out forwards;
}
.effect.sparks::before,
.effect.sparks::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: yellow;
  border-radius: 50%;
  opacity: 0;
  animation: sparkFly 1s ease-out forwards;
}
.effect.sparks::after { left: 8px; animation-delay: 0.1s; }
.effect.portal {
  width: 80px;
  height: 80px;
  border: 3px solid #0ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #0ff;
  animation: portalSpin 1s linear forwards;
}


.devil_place {
  position: relative;

}


/* ========== KEYFRAMES ========== */
@keyframes wag {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-20deg); }
  75% { transform: rotate(20deg); }
  100% { transform: rotate(0deg); }
}
@keyframes wave-arm {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-25deg); }
  60% { transform: rotate(-15deg); }
}
@keyframes blink {
  0%, 97%, 100% { height: 6px; }
  98%, 99% { height: 1px; }
}
@keyframes miznutie {
  0%, 90% { opacity: 1; }
  91% { opacity: 0.5; }
  93% { opacity: 1; }
  95% { opacity: 0.5; }
  97% { opacity: 1; }
  98% { opacity: 0.3; }
  99% { opacity: 0.8; }
  100% { opacity: 0; }
}
@keyframes jump {
  0% { transform: translate(50%, 50%) translateY(0); }
  50% { transform: translate(50%, 50%) translateY(-30px); }
  100% { transform: translate(50%, 50%) translateY(0); }
}
@keyframes flyaway {
  from { opacity: 1; transform: translate(50%, 50%) rotate(0deg); }
  to { opacity: 0; transform: translate(300%, -200%) rotate(720deg); }
}
@keyframes fadeInScale {
  to { opacity: 1; transform: translate(50%, 50%) scale(1); }
}
@keyframes puff {
  0% { opacity: 0.6; transform: translateX(-50%) scale(0.5) translateY(0); }
  70% { opacity: 0.3; transform: translateX(-50%) scale(1.2) translateY(-10px); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.5) translateY(-20px); }
}
@keyframes firePulse {
  0% { opacity: 0.8; transform: translateX(-50%) scale(0.6); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.5) translateY(-20px); }
}
@keyframes sparkFly {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px) scale(1.5); }
}
@keyframes portalSpin {
  0% { opacity: 1; transform: translateX(-50%) rotate(0deg) scale(0.3); }
  100% { opacity: 0; transform: translateX(-50%) rotate(360deg) scale(1.5); }
}
@keyframes smileOccasionally {
  0%, 95% { opacity: 0; }
  95%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
}			


.flame-div {
  position: relative;
  overflow: visible;
}

/* pseudo-element, ktorý bude plamienky */
.flame-div::before {
  content: "";
  position: absolute;
  top: -30px;  /* nad horným okrajom divu */
  left: 5%;
  width: 90%;
  height: 30px;
  background: linear-gradient(90deg, orange 20%, yellow 40%, orange 60%);
  background-size: 200% 100%;
  transition: clip-path 0.3s linear;
  animation: flame-move 3s linear infinite;
  clip-path: var(--flame-clip, polygon(0% 100%, 10% 20%, 20% 100%, 30% 30%, 40% 100%, 50% 25%, 60% 100%, 70% 35%, 80% 100%, 90% 25%, 100% 100%));
  filter: drop-shadow(0 0 5px orange);
}

@keyframes flame-move {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}
.tabulka {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.moznosti {
  display: table-row!important;
}
.moznosti:hover {
  background: var(--tb-te)!important;;
}

.moznosti > * {
  display: table-cell;
  vertical-align: middle;
   border-bottom: 10px solid transparent;
}
		  .input-wrapper {
			position: relative;
			display: inline-block;
			max-width: 400px; /* rovnaké ako input */
			width: 100%; 
		  }
		  .input-wrapper input {
			  width: 100%; /* input zaberie celú šírku wrappera */
			  padding-right: 60px; /* miesto pre counter */
			  box-sizing: border-box;
			}
		  .input-wrapper .char-counter {
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 0.85em;
			color: var(--m-ce-bg-s);
			pointer-events: none; /* aby sa nezasahovalo do inputu */
			user-select: none;
		  }