/* ==================================================================
   СКИН ЗА ТЕМА CLARITY: Индиго и злато

   Направен по стария хедър на Happy Elephant: тъмно индиго под
   златното лого и златна лента. В Clarity логото и менюто са на един
   ред, затова цветовете са разменени по редове:

     - служебният ред горе (контакти, валута, езици) е златната лента
       с тъмен текст - като менюто на стария сайт;
     - основният ред с логото и менюто е индиго - златното лого е
       прозрачен PNG и стои на тъмно точно както преди.

   Индигото е и главният цвят (бутони, линкове), златото - вторият
   бутон. Тъмен текст върху злато: бял не се чете.

   Веригата е като при другите скинове:
   скин -> --skin-accent -> custom.css -> --brand-accent -> --accent.
================================================================== */
:root {
  --skin-accent:       #2e2a78;
  --skin-accent-dark:  #221f5c;
  --skin-accent-soft:  #a9a6d6;
  --skin-accent-rgb:   46, 42, 120;

  --brand-accent:      #2e2a78;

  /* златото - втори бутон */
  --accent-2:          #f0c64f;
  --accent-2-dark:     #e2b23a;
  --accent-2-ink:      #1c1a3a;

  --paper-2:           #f6f5fb;
  --line:              #e3e1f0;

  --hx-indigo:         #2e2a78;
  --hx-indigo-deep:    #24215f;
  --hx-gold-top:       #f8de82;
  --hx-gold-bottom:    #eec04a;
  --hx-gold-text:      #f3d27a;
  --hx-ink:            #1c1a3a;
}

.ct-topbar .ct-cta .ct-btn-accent2,
.ct-btn-accent2 {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--accent-2-ink);
}
.ct-topbar .ct-cta .ct-btn-accent2:hover,
.ct-topbar .ct-cta .ct-btn-accent2:focus,
.ct-btn-accent2:hover,
.ct-btn-accent2:focus {
  background: var(--accent-2-dark);
  border-color: var(--accent-2-dark);
  color: var(--accent-2-ink);
  text-decoration: none;
}

/* --- служебен ред: златна лента, тъмен текст --- */
.ct-topbar {
  background: linear-gradient(180deg, var(--hx-gold-top), var(--hx-gold-bottom));
  border-bottom-color: rgba(0, 0, 0, .12);
}
.ct-topbar,
.ct-topbar a,
.ct-topbar .material-icons,
.ct-topbar .material-icons-outlined { color: var(--hx-ink); }
.ct-topbar a:hover { color: #000; }
/* иконката в индиговия бутон „Добави имот“ е бяла като надписа, не тъмна като горния ред */
.ct-topbar .ct-cta .btn .material-icons,
.ct-topbar .ct-cta .btn .material-icons-outlined { color: #fff; }
.ct-topbar .ct-msg a { background: rgba(255, 255, 255, .35); border-color: rgba(28, 26, 58, .2); }
.ct-topbar .ct-cur .btn { background: rgba(255, 255, 255, .35); border-color: rgba(28, 26, 58, .2); color: var(--hx-ink); }
.ct-langs a { color: rgba(28, 26, 58, .7); }
.ct-langs a:hover { background: rgba(255, 255, 255, .4); color: var(--hx-ink); }
.ct-langs a.is-active { background: var(--hx-indigo); color: #fff; }
/* малкото лого горе (служебна снимка) обикновено е златно и се губи върху златото */
.ct-topbar .ct-toplogo { background: var(--hx-indigo); border-radius: 6px; padding: 3px 8px; }
/* златният втори бутон изчезва върху златото - тук е индиго */
.ct-topbar .ct-cta .ct-btn-accent2 { background: var(--hx-indigo); border-color: var(--hx-indigo); color: #fff; }
.ct-topbar .ct-cta .ct-btn-accent2:hover { background: var(--hx-indigo-deep); border-color: var(--hx-indigo-deep); color: #fff; }

/* --- основният ред с логото и менюто: индиго --- */
.ct-header {
  background: var(--hx-indigo);
  border-bottom: 3px solid var(--hx-gold-bottom);
}
.ct-nav > li > a { color: #fff; font-weight: 600; }
.ct-nav > li > a:hover { background: rgba(255, 255, 255, .1); color: var(--hx-gold-text); }
.ct-nav > li > a.is-active { background: rgba(240, 198, 79, .16); color: var(--hx-gold-text); }
.ct-nav > li > a .material-icons { color: var(--hx-gold-text); }
.ct-nav .dropdown-menu { border-top: 3px solid var(--hx-gold-bottom); }
.ct-nav .dropdown-item { color: var(--ink-2); }   /* падащото меню остава бяло */
.ct-nav .dropdown-item:hover { background: #fbf3d9; color: var(--hx-ink); }
.ct-header .ct-burger,
.ct-header .ct-phone-mobile { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.ct-mainbar-inner .ct-btn-accent,
.ct-mainbar-inner .btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: var(--hx-ink); }
.ct-mainbar-inner .ct-btn-accent:hover,
.ct-mainbar-inner .btn-primary:hover { background: var(--accent-2-dark); border-color: var(--accent-2-dark); color: var(--hx-ink); }