/* СИСТЕМНІ СТИЛІ Ardilla-CMS */
div, section, main, article, heder, aside, footer, header, nav, main, span, input, button, select, optgroup, textarea {box-sizing: border-box!important;}
/* Хлібні крихти */
.kruhtu {margin:0; padding:0;}
.kruhtu li {display:inline-block; margin:2px 8px;}
/* Додаткові поля - оформлення */
.ardilla-video-youtub {overflow-x:hidden; position:relative;width:auto;max-width:100%; margin:10px 0;}
s{text-decoration: none;}

/* ========================================
   📌ЗІРКОВИЙ РЕЙТИНГ
   ======================================== */
.rating-container {width:40px;}
#ard_rating {display: none;}
.rating-pyramid {display: flex; flex-direction: column-reverse; gap: 3px;}
.rating-box {box-sizing: border-box;border:1px solid rgba(59, 73, 100, 0.8); transition: all 0.3s ease-in-out; cursor:pointer;position: relative}
.rating-box[data-value="1"] { width: 9px; height: 14px; font-size: 10px;}
.rating-box[data-value="2"] { width: 12px; height: 16px;  font-size: 11px;}
.rating-box[data-value="3"] { width: 14px; height: 18px;  font-size: 12px;}
.rating-box[data-value="4"] { width: 16px; height: 19px;  font-size: 13px;}
.rating-box[data-value="5"] { width: 18px; height: 20px;  font-size: 14px;}
.rating-box:hover { background: rgba(98, 71, 110, 0.8);}
.rating-box s {display:none; font-size: inherit; position:absolute; left:-16px; top:2px; color: rgba(170, 135, 39, 0.8); text-align:center;}
.rating-box:hover s, .rating-box.active s {display:block;}
.rating-box.active{ background: rgba(91, 141, 172, 0.8);}
.rating-summary s{font-size:20px; color: rgba(195, 153, 38, 0.9); }
.rating-summary > span {letter-spacing:0; word-spacing: -5px;}
.rating-summary > span:last-child{width:100%; font-size:13px;  font-style: normal; margin:3px 0 0 0; display: block;}

/* ========================================
   📌MODAL Інформаційне вікно з білкою
   ======================================== */
#ard-modalinfo{display:block;position: fixed;height:450px; min-width:320px; left:0; bottom:0;z-index: 500;}
#ard-modalinfo::after{display:block; content:''; width:180px; height:220px; background: url('../img/css_sprites2.png') -372px -617px;position:absolute; left:-40px; bottom:30px;z-index: 502;}
#ard-modalinfo::before{display:block; content:''; width:186px; height:186px; background: url('../img/css_sprites2.png') -352px -432px;position:absolute; left:60px; bottom:-150px;z-index: 501;transform: translate(-50%, -50%) rotateX(60deg);transform-origin: center;animation: ard-modal-spin 7s linear infinite;}
.ard-mdli-main{position:absolute; left:90px; bottom:100px;width:334px;transform: perspective(180px) rotateY(-6deg) skewX(0.0deg) scale(1.0, 0.9);}
.ard-mdli-main:hover{transform: none;}
.ard-mdli-main::after{display:block; content:''; width:334px; height:33px; background: url('../img/css_sprites2.png') -572px -38px;position:absolute; left:0px; top:-32px;z-index: 512;}
.ard-mdli-main::before{display:block; content:''; width:334px; height:62px; background: url('../img/css_sprites2.png') -572px -109px;position:absolute; left:0px; bottom:-62px;z-index: 512;}
.ard-mdli-main > s {color:red; font-size: 26px; position: absolute; top: -17px; right: 32px; z-index:526; cursor:pointer;transform: rotate(45deg);}
.ard-mdli-main > s:hover { font-size: 28px;}
.ard-mdli-main > h5 {display:block; text-align: center; width:240px;font-size:18px; letter-spacing: 2px; color:orange; position: absolute; top: -32px; left: 22px; z-index:525;padding: 0; margin: 0; animation: ard-color-blink 5s infinite ease-in-out;}
.ard-mdli-txt{width: 100%; min-height:100px; font-size: 15px; line-height: 1.6; padding:16px 16px 16px 44px; background: url('../img/css_sprites2.png') -572px -179px;}
.ard-mdli-txt::before{display:block; content:''; width:6px; height:90%; background: url('../img/css_sprites2.png') -550px -13px;position:absolute; right:0px; bottom:2px;z-index: 514; animation: ard-modal-linia 7s linear infinite alternate;}
@keyframes ard-modal-spin {
   from {transform: translate(-50%, -50%) rotateX(60deg) rotate(0deg); opacity: .4;}
   to {transform: translate(-50%, -50%) rotateX(60deg) rotate(360deg); opacity: .9;}
}
@keyframes ard-modal-linia {
   from {height:20%}
   to {height:98%}
}
@keyframes ard-color-blink {
   0% {font-size: 18px; letter-spacing: 2px; color:var(--orange);}
   40% {font-size: 24px letter-spacing: 4px; color:var(--red);}
   100% {font-size: 18px; letter-spacing: 2px; color:var(--orange);}
}

/*- СИСТЕМНІ |mesegSiteReport| ПОВІДОМЛЕННЯ --*/
#mesrep{position: fixed; width:350px; height:360px; z-index:9992; bottom:140px; right:220px;}
#mesrep::after{content: ''; position:absolute; z-index:9997; right:-270px; bottom:-144px; width:373px; height:473px; background:url(../img/ard_report_v2.png) bottom right no-repeat; }
.mesrptxt{position:relative; z-index:9995; opacity: .7; height:97%; background:#114c5d; padding:20px; border: 1px solid #58d7f7; border-radius:6px; transform: perspective(120px) rotateY(4deg) skewX(0.0deg) scale(1.0, 0.9)}
.mesrptxt s {display: block; height:50px; border-radius:4px; background:#23bce3;}
.mesrptxt s::after{content: 'Системне повідомлення:'; margin:14px 20px 0 0; font-size:20px; color:#073d46; display:inline-block; float:right;}
#mrp_close{float:left;background:#073d46; color:#58d7f7; text-decoration:none; margin:9px 0 0 -18px; font-size:23px; padding:1px 10px;border-radius:6px;  position:relative; z-index:9999; cursor:pointer;}
#mrp_close:hover{background:red;}
.mesrptxt i {font-size:26px; padding: 30px 45px 0 0; color:7adff1; line-height:1.4; display:block; white-space: wrap;} 
 /*- КОМЕНТАРІ --*/
 #ard-mail {display:none;}