/* Unique Theme Toggle — base styles. Colours come from CSS variables set in Settings → Unique Theme. */

/* smooth colour change, only while the toggle is clicked */
html.utt-anim *,html.utt-anim *::before,html.utt-anim *::after{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,fill .25s ease!important;
}
@media (prefers-reduced-motion:reduce){
  html.utt-anim *,html.utt-anim *::before,html.utt-anim *::after{transition:none!important}
}

/* ---------- toggle button ---------- */
.utt-toggle{cursor:pointer}
button.utt-toggle{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;
  border:1px solid var(--utt-line);border-radius:999px;background:transparent;
  color:var(--utt-text);font:600 11px/1 inherit;font-family:inherit;white-space:nowrap;
}
.utt-toggle .elementor-button-icon{display:none!important}
.utt-toggle .elementor-button{
  background:transparent!important;color:var(--utt-text)!important;
  border:1px solid var(--utt-line)!important;border-radius:999px!important;
}
.utt-toggle .elementor-button-text{white-space:nowrap}
/* icon shows the mode you will switch to */
html[data-theme="dark"] .utt-toggle .utt-ico::before,
html[data-theme="dark"] .utt-toggle .elementor-button-text::before{content:"\2600\FE0E\00a0\00a0"}
html[data-theme="light"] .utt-toggle .utt-ico::before,
html[data-theme="light"] .utt-toggle .elementor-button-text::before{content:"\263E\FE0E\00a0\00a0"}
.utt-toggle .utt-ico::before{content:"\2600\FE0E"}

/* ---------- header (container class: udl-header) ---------- */
.udl-header{background-color:var(--utt-header-bg)!important}
html[data-theme="light"] .udl-header{border-bottom:1px solid var(--utt-line)}
.udl-header .elementor-heading-title,
.udl-header .elementor-heading-title a{color:var(--utt-header-text)!important}
.udl-header .udl-sub .elementor-heading-title{color:var(--utt-muted)!important}
.udl-header .elementor-icon{color:var(--utt-header-text)!important}
.udl-header .elementor-icon svg{fill:var(--utt-header-text)!important}
.udl-header .elementor-nav-menu--main .elementor-item,
.udl-header .elementor-nav-menu a.elementor-item{color:var(--utt-header-text)!important}
.udl-header .elementor-nav-menu--dropdown{background-color:var(--utt-header-bg)!important;border-color:var(--utt-line)!important}
.udl-header .elementor-nav-menu--dropdown a{color:var(--utt-header-text)!important;border-color:var(--utt-line)!important}
.udl-header .elementor-menu-toggle{color:var(--utt-header-text)!important;border-color:var(--utt-line)!important;background:transparent!important}
.udl-header .elementor-menu-toggle svg{fill:var(--utt-header-text)!important}
.udl-header .utt-toggle .elementor-button{color:var(--utt-header-text)!important;border-color:var(--utt-line)!important}
.udl-header .udl-cta .elementor-button{background-color:var(--utt-btn-bg)!important;color:var(--utt-btn-text)!important}

/* ---------- helper classes (Advanced → CSS Classes) ---------- */
.utt-bg{background-color:var(--utt-bg)!important}
.utt-surface{background-color:var(--utt-surface)!important}
.utt-text,.utt-text .elementor-heading-title,.utt-text p{color:var(--utt-text)!important}
.utt-muted,.utt-muted .elementor-heading-title,.utt-muted p{color:var(--utt-muted)!important}
.utt-line{border-color:var(--utt-line)!important}
.utt-btn .elementor-button,a.utt-btn,button.utt-btn{
  background-color:var(--utt-btn-bg)!important;color:var(--utt-btn-text)!important;
}
.utt-form .elementor-field,.utt-form .elementor-field-textual,.utt-form input,.utt-form select,.utt-form textarea{
  background-color:var(--utt-surface)!important;color:var(--utt-text)!important;border-color:var(--utt-line)!important;
}
.utt-form label,.utt-form .elementor-field-label{color:var(--utt-text)!important}
.utt-form ::placeholder{color:var(--utt-muted)!important;opacity:1}