@charset "UTF-8";
/* =========================================================
   103.kyivcity.gov.ua — Modern UI Refresh
   Joomla 5 + Helix Ultimate + Quix
   ========================================================= */

/* ---------- 0. RESET GLOBAL TEMPLATE.CSS SETTINGS ---------- */
#sp-main-body {
    padding: 0!important; 
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    box-shadow: none!important;
    padding: 0!important;
}

.qx-btn:not(:disabled):not(.qx-disabled) {
    cursor: pointer;
    position: relative;
}

.sp-contact-info li {
    margin: 5px 10px 0px 0px;
    font-size: 16px;
}

select.form-control:not([multiple]), 
select.inputbox:not([multiple]), 
select:not([multiple]) {
    height: calc(2.25rem + 14px);
}

/* ---------- 1. ДИЗАЙН-ТОКЕНИ ---------- */
:root{
  --kc-red:        #e10a17;          /* основний бренд (103) */
  --kc-red-deep:   #d30000;/*#ff1617*/
  --kc-red-soft:   #fff1f2;
  --kc-ink:        #0f172a;          /* основний текст */
  --kc-ink-2:      #334155;
  --kc-muted:      #64748b;
  --kc-line:       #e6e8ec;
  --kc-bg:         #ffffff;
  --kc-bg-soft:    #f7f8fa;
  --kc-yellow:     #ffd400;          /* акцент (укр. прапор) */
  --kc-blue:       #005bbb;

  --kc-radius:     14px;
  --kc-radius-lg:  22px;
  --kc-shadow-sm:  0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --kc-shadow:     0 6px 20px -8px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
  --kc-shadow-lg:  0 24px 60px -20px rgba(225,10,23,.25), 0 8px 24px -12px rgba(15,23,42,.15);
  --kc-ease:       cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. БАЗОВА ТИПОГРАФІКА ---------- */
html{ scroll-behavior:smooth;scroll-padding-top: 101px!important;
 }
body.site{
  font-family: "Inter", "Open Sans", "Roboto", "Lato", system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--kc-ink);
  background: var(--kc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.qx-heading, .quix-heading, .qx-title{
  font-family: "Roboto Condensed", "Roboto", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--kc-ink);
  line-height: 1.15;
}
h1, .qx-h1{ font-size: clamp(2rem, 3.4vw, 3.25rem); }
h2, .qx-h2{ font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
h3, .qx-h3{ font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
p, li{ color: var(--kc-ink-2); line-height: 1.65; }
a{ color: var(--kc-red); transition: color .2s var(--kc-ease); }
a:hover{ color: var(--kc-red-deep); text-decoration: none; }

/* Тонкий акцент під заголовками секцій */
.qx-section h2:not(.no-bar)::after,
section h2.section-title::after{
  content:"";
  display:block;
  width: 56px; height: 4px;
  margin-top: 14px;
  background: var(--kc-red);
  border-radius: 999px;
  margin:0 auto;
}

/* ---------- 3. Header: glass + sticky ---------- */
body.site #sp-header{
  /*border: 0 !important;*/
  /*box-shadow: none !important;*/
  /*background: linear-gradient(30deg, #fff 0%, #dddddd2b 90%);*/
  background: linear-gradient(30deg, #fff 0%, #fbfbfba8 90%);
}

#sp-top-bar{
  background-color: #eaeaea !important;
  color: var(--kc-ink-2) !important;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--kc-line) !important;
}
#sp-top-bar a{ color: var(--kc-ink-2); }
#sp-top-bar a:hover{ color: var(--kc-red); }
#sp-top-bar .sp-contact-info > li,
#sp-top-bar .sp-module{
  display:inline-flex; align-items:center; gap:8px;
}
#sp-top-bar .fa, #sp-top-bar i{ color: var(--kc-red); }

#sp-header{
  /*background: rgba(255,255,255,.78) !important;*/
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  transition: all .3s var(--kc-ease);
  height: 101px;
}
body.sticky-header.header-sticky #sp-header,
#sp-header.header-sticky{
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 8px 24px -16px rgba(15,23,42,.18) !important;
  /*height: 106px;*/
  /*height: fit-content;*/
}
#sp-header .logo{ height:100%; display:flex; align-items:center; }
#sp-header .logo img{ max-height: 100px;  transition: max-height .3s var(--kc-ease); }
.header-sticky #sp-header .logo img{ /*max-height: 44px;*/ }

/* ===================================================================
   HEADER STYLES - Top Bar Header
   =================================================================== */
#sp-top-bar {
  position: relative;
  z-index: 2;
}

.body-innerwrapper {
  overflow-x: clip !important;
}

.body-wrapper {
    margin-bottom: 40px;
}

#itemid-195 #sp-top-bar {
  background: #f5faff !important;
}

#sp-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  /*height: inherit; -- DISABLED: caused scroll jitter with sticky header*/
  margin: 0 auto;
  box-shadow: none;
  animation: none !important;
}


#sp-header .logo {
  /*height: 90px;*/
  transition: transform 0.3s ease-in-out;
}

#sp-header.header-sticky,
body:not(.home) #sp-header.header-sticky {
  position: sticky;
  top: 0;
  max-width: 100%;
  padding: 0 10px 0 0;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
  z-index: 1000;
  /*height: fit-content;*/
}

#sp-header.header-sticky {
    position: fixed!important;
    animation: none!important;
}

#sp-header.header-sticky .logo {
  /*height: 80px;*/
  transition: width 0.3s ease;
}

#sp-header .logo-image,
.sp-megamenu-parent > li > a {
  transition: width 0.3s ease;
}

.logo-image
{
    height: 100px;
    /* margin-top: 30px; */
}

#sp-header.is-sticky .logo img {
    max-height: 100px;
    transition: max-height .3s var(--kc-ease);
}

/* ---------- 4. МЕНЮ ---------- */
#sp-menu .sp-megamenu-parent{ gap: 6px; }
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span{
  color: var(--kc-ink) !important;
  font-weight: 600;
  /*font-size: 14.5px;*/
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 10px 14px !important;
  border-radius: 10px;
  transition: all .2s var(--kc-ease);
}
#sp-menu .sp-megamenu-parent > li > a:hover,
#sp-menu .sp-megamenu-parent > li.active > a,
#sp-menu .sp-megamenu-parent > li:hover > a{
  color: var(--kc-red-deep) !important;
}
#sp-menu .sp-megamenu-parent .sp-dropdown{
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  box-shadow: var(--kc-shadow-lg) !important;
  padding: 10px !important;
  background: #fff !important;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li > a{
  border-radius: 8px;
  padding: 10px 12px !important;
  font-weight: 500;
  color: var(--kc-ink-2) !important;
  transition: all .15s var(--kc-ease);
}
#sp-menu .sp-megamenu-parent .sp-dropdown li > a:hover{
  background: var(--kc-bg-soft) !important;
  color: var(--kc-red) !important;
  transform: translateX(2px);
}

/* ------- Mobile Menu Elements - Button ------- */

.btn-call103{
background: red;
border-radius: 4px;
padding: 4px;
text-align: center;

	display: inline-flex;
    align-items: center; /* Центрування по вертикалі */
    gap: 8px; /* Відстань між картинкою та текстом */
    cursor:pointer;
    box-shadow: 0 0 0 .2rem #ffeaea;
    background: linear-gradient(135deg, #e10a17 0%, #ff1617 100%) !important;
    color: #fff !important;
    align-items: center;
    padding: 10px !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    border-radius: 999px !important;
    border: 1px solid transparent;
    transition: border 0.3s ease-in, box-shadow 0.3s ease-in, background 0.3s, opacity 0.3s ease-in;
}

.btn-call103 img{
padding: 4px;
}

.btn-call103 .image-title {
  color: white!important;
}

.inline{
display: inline;
}

/* Соц-іконки в шапці */
#sp-top-bar .social-icons a, .social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background: var(--kc-bg-soft);
  color: var(--kc-ink-2) !important;
  margin-right:6px;
  transition: all .2s var(--kc-ease);
}
.social-icons a:hover{
  background: var(--kc-red); color:#fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(225,10,23,.5);
}

/* ---------- 5. КНОПКИ (Quix / Joomla) ---------- */
.qx-btn, .btn, button.btn, a.button, .quix-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  border-radius: 999px !important;
  border: 1px solid transparent;
  transition: all .25s var(--kc-ease) !important;
  box-shadow: var(--kc-shadow-sm);
}
.qx-btn-primary, .btn-primary, .btn.btn-primary{
  background: linear-gradient(135deg, var(--kc-red) 0%, var(--kc-red-deep) 100%) !important;
  color:#fff !important;
  border:0 !important;
}
.qx-btn-primary:hover, .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(225,10,23,.55);
}
.qx-btn-default, .btn-default, .btn-secondary{
  background:#fff !important;
  color: var(--kc-ink) !important;
  border:1px solid var(--kc-line) !important;
}
.qx-btn-default:hover{
  border-color: var(--kc-red) !important;
  color: var(--kc-red) !important;
  transform: translateY(-2px);
}

.qx-btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.qx-btn-outline-secondary:hover {
    color: #fff;
    background-color: #D30000;
    border-color: #c90e0e;
}

.qx-btn-outline-secondary:not(:disabled):not(.qx-disabled).qx-active, 
.qx-btn-outline-secondary:not(:disabled):not(.qx-disabled):active, 
.qx-show>.qx-btn-outline-secondary.qx-dropdown-toggle {
    color: #fff;
    background-color: #D30000;
    border-color: #ff6666;
}

button.qx-btn.qx-btn-primary.qx-btn-md.qx-btn-block {
    justify-content: center;
}

.qx-btn-outline-secondary.qx-focus, .qx-btn-outline-secondary:focus,
.qx-btn-outline-secondary:not(:disabled):not(.qx-disabled).qx-active:focus, .qx-btn-outline-secondary:not(:disabled):not(.qx-disabled):active:focus, .qx-show>.qx-btn-outline-secondary.qx-dropdown-toggle:focus {
    box-shadow: 0 0 0 .1rem rgba(108, 117, 125, .5);
}

/* ---------- 6. СЕКЦІЇ / БЛОКИ Quix ---------- */
.qx-section, .quix-section{ padding: 72px 0; }
@media (max-width: 768px){ .qx-section{ padding: 48px 0; } }

/* М'яка заливка для read-friendly ритму */
.qx-section:nth-of-type(even){ background: var(--kc-bg-soft); }

/* Hero — додає тонке віньєтування поверх існуючого фону */
.qx-section.hero, .sp-page-title, .qx-row.hero{
  position: relative;
  overflow: hidden;
}
.qx-section.hero::before, .sp-page-title::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.6) 100%);
  pointer-events:none;
}
.qx-section.hero > *, .sp-page-title > *{ position:relative; z-index:1; }

.qx-open .qx-accordion-title {
    background-color: #fff1f2!important;
}

/* ---------- 7. КАРТКИ / FEATURE BOX / IMAGE BOX ---------- */
.qx-image-box, .qx-info-box, .qx-icon-box,
.qx-feature-box, .qx-card, .quix-card,
.sppb-addon-feature, .sppb-addon-image-content{
  background:#fff;
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  padding: 28px;
  box-shadow: var(--kc-shadow-sm);
  transition: transform .35s var(--kc-ease), box-shadow .35s var(--kc-ease), border-color .35s var(--kc-ease);
  height: 100%;
}
.qx-image-box:hover, .qx-info-box:hover, .qx-icon-box:hover,
.qx-feature-box:hover, .qx-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--kc-shadow-lg);
  border-color: rgba(225,10,23,.25);
}
.qx-icon-box .qx-icon, .qx-info-box .qx-icon{
  width: 56px; height: 56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--kc-red-soft), #fff);
  color: var(--kc-red);
  font-size: 24px;
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(225,10,23,.15);
}

/* Зображення всередині карток */
.qx-image-box img, .qx-card img, .quix-card img{
  border-radius: 12px;
  display:block; width:100%; height:auto;
  transition: transform .6s var(--kc-ease);
}
.qx-image-box:hover img{ transform: scale(1.04); }

/* ---------- 8. ФОРМИ ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], textarea, select,
.uk-input, .uk-textarea, .uk-select, .form-control{
  border: 1.5px solid var(--kc-line) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  color: var(--kc-ink) !important;
  box-shadow: none !important;
  transition: border-color .2s var(--kc-ease), box-shadow .2s var(--kc-ease) !important;
  font-size: 15px;
}
input:focus, textarea:focus, select:focus, .form-control:focus{
  border-color: var(--kc-red) !important;
  box-shadow: 0 0 0 4px rgba(225,10,23,.12) !important;
  outline: none !important;
}
label{ font-weight:600; color: var(--kc-ink); }

/* ---------- 9. ТАБЛИЦІ ---------- */
table, .uk-table, .table{
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  border-radius: var(--kc-radius);
  overflow: hidden;
  box-shadow: var(--kc-shadow-sm);
  border: 1px solid var(--kc-line);
}
table th{
  background: var(--kc-bg-soft) !important;
  color: var(--kc-ink) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--kc-line) !important;
}
table td{
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--kc-line) !important;
  color: var(--kc-ink-2);
}
table tr:last-child td{ border-bottom: 0 !important; }
table tbody tr:hover{ background: var(--kc-red-soft); }

/* ---------- 10. НОВИНИ / СТАТТІ ---------- */
.article-list .article, .blog .item, .items-leading > [itemprop="blogPost"]{
  background:#fff;
  border:1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--kc-shadow-sm);
  transition: all .3s var(--kc-ease);
}
.article-list .article:hover{
  box-shadow: var(--kc-shadow);
  transform: translateY(-3px);
  border-color: rgba(225,10,23,.18);
}
.article-header h2, .article h2, .item-title{
  margin-bottom: 8px;
}
.article-info, .published, .createdby{
  font-size: 13px;
  color: var(--kc-muted);
}
.article-intro-image img, .item-image img{
  border-radius: 12px;
  margin-bottom: 16px;
}

/* ---------- 11. ГАЛЕРЕЯ ---------- */
.qx-gallery img, .quix-gallery img,
.sppb-addon-image-grid img{
  border-radius: 12px;
  transition: transform .5s var(--kc-ease), box-shadow .3s var(--kc-ease);
  display:block;
}
.qx-gallery a:hover img, .sppb-addon-image-grid a:hover img{
  transform: scale(1.03);
  box-shadow: var(--kc-shadow);
}

.playIcon path {
    fill: var(--kc-red-deep)!important;
}

#qx-call-to-action-h0xqt .qx-element-call-to-action_title *,
#qx-call-to-action-x0bou .qx-element-call-to-action_title *,
#qx-call-to-action-faa0k .qx-element-call-to-action_title * {
    color: var(--kc-red-deep)!important;
}

/* ---------- 12. ФУТЕР ---------- */
#sp-footer, #sp-bottom{
  background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%) !important;
  color: #cbd5e1 !important;
  border-top: 4px solid var(--kc-red);
}
#sp-bottom{ padding: 56px 0 24px; }
#sp-footer{ padding: 18px 0; font-size: 14px; }
#sp-bottom h1, #sp-bottom h2, #sp-bottom h3,
#sp-bottom h4, #sp-bottom .sp-module-title{
  color:#fff !important;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
#sp-bottom .sp-module-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:36px; height:3px; background: var(--kc-red); border-radius: 2px;
}
#sp-bottom a, #sp-footer a{ color:#cbd5e1 !important; transition: color .2s var(--kc-ease); }
#sp-bottom a:hover, #sp-footer a:hover{ color:#fff !important; }
#sp-bottom ul{ list-style:none; padding:0; margin:0; }
#sp-bottom ul li{ padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ---------- 13. SCROLL TOP / ХЛІБНІ КРИХТИ ---------- */
#sp-bottom .scrollup, .scrollup{
  background: linear-gradient(135deg, var(--kc-red), var(--kc-red-deep)) !important;
  border:0 !important;
  border-radius: 50% !important;
  width:48px; height:48px;
  box-shadow: 0 12px 24px -8px rgba(225,10,23,.55) !important;
}
.breadcrumb, .sp-page-title .breadcrumb{
  background: transparent !important;
  padding: 0 !important;
  font-size: 14px;
}
.breadcrumb a{ color: var(--kc-muted); }
.breadcrumb .active{ color: var(--kc-ink); font-weight: 600; }

/* ---------- 14. ВИДІЛЕННЯ / СКРОЛБАР / ДРІБНИЦІ ---------- */
::selection{ background: var(--kc-red); color:#fff; }
img{ max-width:100%; height:auto; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--kc-red), var(--kc-red-deep));
  border-radius: 10px;
}
::-webkit-scrollbar-track{ background: var(--kc-bg-soft); }

/* Плавна поява блоків Quix при скролі (легка) */
.qx-section, .sppb-section{
  animation: kcFadeUp .7s var(--kc-ease) both;
}
@keyframes kcFadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to  { opacity:1; transform: translateY(0); }
}

/* ---------- 15. Стилізація Публікацій / Article Styles ---------- */

article.item {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.article-info > span a {
  color: #252525;
  font-size: 16px;
  text-transform: uppercase;
}

.article-info > span a:before {
  content: "\f07c";
  font-family: "Font Awesome 6 Free";
}

.view-article .container .article-details table {
  margin: 0 auto;
}

.view-article .container .article-details img {
  padding: 10px;
}

div[itemprop="articleBody"] td {
  padding: 1px 15px;
  width: 300px;
}

.article-details div[itemprop="articleBody"] li > a {
  vertical-align: text-top;
}

.article-details #sheet0 tbody, 
.article-details #sheet0 td, 
.article-details #sheet0 tfoot, 
.article-details #sheet0 th, 
.article-details #sheet0 thead, 
.article-details #sheet0 tr {
  border: 1px solid #808080;
}

/*
.article-details table, .article-details .uk-table, .article-details .table{
  border-collapse: collapse !important;
}*/

/* ------- Articles Plus ------- */
#article-feature-gallery-1791 {
  width: 350px !important;
}

.article-details .article-feature-gallery {
  height: 440px;
}

.view-article .container .article-details .article-feature-gallery img {
  max-height: 450px;
}

.qx-card-body .qx-card-title.qx-media-heading a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qx-card-body .qx-card-text.qx-element-jarticle-introtext::after {
  content: "";
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  height: 7rem;
  background: linear-gradient(180deg, rgba(254, 254, 254, 0) 0%, #FFFFFF 100%);
}

.procurement-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.procurement-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  background: none;
}

.category-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
}
.category-badge.medical { background: #ececec; color: #fd3837; } 
.category-badge.service { background: #e8f5e9; color: #2e7d32; }
.category-badge.goods { background: #fff3e0; color: #ef6c00; }

.procurement-title { font-size: 15px; margin: 10px 0; }
.procurement-meta { font-size: 13px; color: #555; margin-bottom: 10px; }
.card-footer { display: flex; justify-content: space-between; background: none; }

.btn-details {
  background: #fd3837;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
}

.liky-wrapper { text-align: center; }
.liky-wrapper iframe { width: 75%; }

/* ---------- 16. Footer Section ---------- */

#qx-section-footer-new ul li a {
  padding: 2px 4px 8px 0 !important;
  line-height: 17px;
}

.mod-whosonline{
 text-align: left;
}

.mod-whosonline p{ 
  color: #fcfcfc !important; 
}

#qx-column-f4o43 .qx-element-wrap + .qx-element-wrap { 
  margin-top: 10px !important; 
}

#qx-text-cp5w5 p, #qx-text-qymmb p {
    font-size: 14px;
    text-align: left;
    color: #ffffff;
}

#qx-section-footer-new h2:not(.no-bar)::after, 
#qx-section-footer-new h2.section-title::after {
    margin: inherit;
}

/* ---------- Footer Section - Bottom ---------- */
#qx-section-footer-new, #qx-section-9g24n {
    animation: none;
}

/* ---------- 17. ДОСТУПНІСТЬ (focus visible) ---------- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(225,10,23,.45) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ================= EXTENSIONS ================= */

/* DJ-Accessibility */
ul.djacc__list li:nth-of-type(n+3):nth-of-type(-n+8),
ul.djacc__list li:nth-of-type(11),
ul.djacc__list li:nth-of-type(13),
ul.djacc__list li:nth-of-type(14) {
  display: none;
}

.djacc-popup .djacc__title, .djacc_btn-label, .djacc__label, .djacc__size{
color:white!important;
}

.djacc-popup .djacc__panel { width: 300px !important; }
.djacc-popup .djacc__btn svg { margin-right: 4px !important; }
.djacc-popup .djacc__btn { padding: 4px !important; font-size: 13px !important; }
.djacc_btn-label { max-width: 95px; word-break: break-word; }
.djacc-popup .djacc__label, .djacc-popup .djacc__size { padding: 10px !important; }
.djacc-popup .djacc__dec, .djacc-popup .djacc__inc { width: 70px !important; }
.djacc-popup .djacc__footer { display: none !important; }
.djacc-popup .djacc__bar { display: none !important; }

/* JoomGallery */
a.jg-link:not(.btn) {
  font-size: 18px !important;
  text-decoration: none !important;
}

.jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > a > img,
.jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > .jg-image-caption-hover > a > img {
  height: 260px !important;
}

.jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > a,
.jg-images[class*=" columns-"] > .jg-image > .jg-image-thumbnail > .jg-image-caption-hover > a {
  padding-bottom: 70%;
}

/* ---------- 18. Додатково ---------- */