/* ============================================================
   Upgrade — Theme color overrides
   Loaded after /elato/css/style.css.
   Replaces Elate teal (#1e8190 / #53cbca) with purple
   palette matching the hero robot block.
   ============================================================ */

:root {
  --site-primary:        #7b5ea7;
  --site-primary-dark:   #5d3f8f;
  --site-primary-light:  #9b7ec8;
  --site-primary-xlight: #eae0f8;
}

/* Prevent horizontal white strip on mobile caused by wide
   transformed/pseudo elements from legacy theme blocks. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================================
   BASE LINK COLOR — override Elate teal default
   ============================================================ */
a {
  color: var(--site-primary);
}
a:focus {
  color: var(--site-primary-dark);
  outline-color: var(--site-primary);
}

/* Counters section — the teal bg is covered by dark overlay anyway,
   but override for correctness. */
#fh5co-counters {
  background-color: var(--site-primary) !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Brand (logo text) */
#fh5co-header .navbar-brand,
#fh5co-header .navbar-brand:hover,
#fh5co-header .navbar-brand:focus { color: var(--site-primary) !important; }

/* Nav links — hover & active */
#fh5co-header #navbar li a:hover { color: var(--site-primary) !important; }
#fh5co-header #navbar li.active a { color: var(--site-primary) !important; }

/* Underline bar on nav items */
#fh5co-header #navbar li a:hover span:before,
#fh5co-header #navbar li.active a span:before { background-color: var(--site-primary); }

/* Fixed-top scroll state */
#fh5co-header.navbar-fixed-top .navbar-brand { color: var(--site-primary); }
#fh5co-header.navbar-fixed-top #navbar li a:hover { color: var(--site-primary); }
#fh5co-header.navbar-fixed-top #navbar li.active a { color: var(--site-primary); }
#fh5co-header.navbar-fixed-top #navbar li.active a span:before { background-color: var(--site-primary); }

/* Brand slogan */
#fh5co-header .navbar-default .brand-slogan em { color: var(--site-primary); }

/* Language switcher */
#fh5co-header .lang-switcher a:hover,
#fh5co-header .lang-switcher a.active,
#fh5co-header.navbar-fixed-top .lang-switcher a:hover,
#fh5co-header.navbar-fixed-top .lang-switcher a.active { color: var(--site-primary) !important; }

@media screen and (max-width: 768px) {
  #fh5co-header .lang-switcher a:hover,
  #fh5co-header .lang-switcher a.active { color: var(--site-primary) !important; }
}

/* Logout button (rendered as form submit) */
#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:hover,
#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:focus {
  color: var(--site-primary);
}
#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:hover span:before,
#fh5co-header #navbar li.nav-logout-wrap .nav-logout-btn:focus span:before {
  background-color: var(--site-primary);
}
#fh5co-header.navbar-fixed-top #navbar li.nav-logout-wrap .nav-logout-btn:hover,
#fh5co-header.navbar-fixed-top #navbar li.nav-logout-wrap .nav-logout-btn:focus {
  color: var(--site-primary);
}
#fh5co-header.navbar-fixed-top #navbar li.nav-logout-wrap .nav-logout-btn:hover span:before,
#fh5co-header.navbar-fixed-top #navbar li.nav-logout-wrap .nav-logout-btn:focus span:before {
  background-color: var(--site-primary);
}

/* Dropdown menu links */
#fh5co-header .dropdown-menu > li > a:hover,
#fh5co-header .dropdown-menu > li > a:focus {
  color: var(--site-primary) !important;
  background-color: var(--site-primary-xlight) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary button — background */
.btn.btn-primary {
  background: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
}

/* Override the generic .btn:hover { background:#393e46 !important } */
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
  background: var(--site-primary-dark) !important;
  border-color: var(--site-primary-dark) !important;
  box-shadow: 0 6px 18px rgba(123,94,167,.35) !important;
}

/* Intro block: button on hover state of parent card */
#fh5co-intro .fh5co-block:hover .btn:hover,
#fh5co-intro .fh5co-block:focus .btn:hover {
  background: var(--site-primary) !important;
  border: 2px solid var(--site-primary) !important;
}

/* Mobile: Elate uses padding-bottom: 3em on #fh5co-intro — too much air below
   the «Знайти салон» / «Для салонів та майстрів» row before the next section. */
@media screen and (max-width: 768px) {
  #fh5co-intro {
    padding-bottom: 1.25em;
  }
}

/* «Як це працює?» (#how-it-works): stack container rows vertically; equal card
   heights on desktop; CTAs aligned along the bottom of each card. */
#fh5co-intro > .container {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
@media screen and (min-width: 769px) {
  #fh5co-intro .row.row-bottom-padded-lg {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  #fh5co-intro .row.row-bottom-padded-lg > .fh5co-block {
    float: none;
    width: 33.33%;
    flex: 1 1 33.33%;
    max-width: 33.33%;
    display: flex;
    flex-direction: column;
  }
  #fh5co-intro .row.row-bottom-padded-lg .fh5co-block > .fh5co-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #fh5co-intro .row.row-bottom-padded-lg .fh5co-block > .fh5co-text > p:last-child {
    margin-top: auto;
  }
}

/* ============================================================
   SECTION BACKGROUNDS  (portfolio band + services band)
   ============================================================ */

/* #fh5co-services — teal gradient → purple gradient */
#fh5co-services {
  background-color: var(--site-primary);
  background-image:
    -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #9b7ec8), color-stop(1, #7b5ea7));
  background-image:
    -webkit-repeating-linear-gradient(top left, #9b7ec8 0%, #7b5ea7 100%);
  background-image:
    repeating-linear-gradient(to bottom right, #9b7ec8 0%, #7b5ea7 100%);
  background-image:
    -ms-repeating-linear-gradient(top left, #9b7ec8 0%, #7b5ea7 100%);
}

/* #fh5co-work — portfolio band */
#fh5co-work {
  background-color: var(--site-primary);
  background-image:
    -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #9b7ec8), color-stop(1, #7b5ea7));
  background-image:
    -webkit-repeating-linear-gradient(top left, #9b7ec8 0%, #7b5ea7 100%);
  background-image:
    repeating-linear-gradient(to bottom right, #9b7ec8 0%, #7b5ea7 100%);
  background-image:
    -ms-repeating-linear-gradient(top left, #9b7ec8 0%, #7b5ea7 100%);
}

/* Portfolio grid: each card is <a class="fh5co-project-item">. Base theme sets
   #fh5co-work a { color: rgba(255,255,255,.5) } and a:hover { color: #fff } for
   the section intro links — that makes titles invisible on white card panels. */
#fh5co-work a.fh5co-project-item {
  color: #444;
  text-decoration: none;
}
#fh5co-work a.fh5co-project-item:hover,
#fh5co-work a.fh5co-project-item:focus {
  color: var(--site-primary-dark);
  text-decoration: none;
}

/* ============================================================
   ICONS & ACCENTS
   ============================================================ */

/* Intro section icons (scissors, female, male) */
#fh5co-intro .fh5co-block > .fh5co-text .fh5co-intro-icon { color: var(--site-primary); }

/* Counter icons */
#fh5co-counters .fh5co-counter .fh5co-counter-icon { color: var(--site-primary); }

/* Section heading underline bars */
.section-heading h2:after,
.section-heading h2.left-border:after { background: var(--site-primary); }

/* Form focus border */
.form-control:active,
.form-control:focus { border-color: var(--site-primary); }

/* Watch-video circle button */
.watch-video .btn-video { border-color: var(--site-primary); }
.watch-video .btn-video .icon-play2 { color: var(--site-primary); }

/* ============================================================
   TESTIMONIALS / CTA SECTION
   ============================================================ */

#fh5co-testimonials .box-testimony blockquote {
  background: var(--site-primary);
}
#fh5co-testimonials .box-testimony blockquote:after {
  border-top-color: var(--site-primary);
}
#fh5co-testimonials .box-testimony .author a { color: var(--site-primary); }

/* Main CTA: «Зареєструватися як салон або майстер» — Bootstrap .btn is nowrap;
   body has overflow-x:hidden, so long labels were clipped. */
#fh5co-testimonials .subtext .btn.btn-primary.btn-lg {
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.35;
}
@media (max-width: 576px) {
  #fh5co-testimonials .subtext .btn.btn-primary.btn-lg {
    letter-spacing: 0.06em;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ============================================================
   SOCIAL ICONS
   ============================================================ */

.social li a.social-box,
.social li a.social-circle,
.social.social-box a,
.social.social-circle a {
  background: var(--site-primary);
}

/* ============================================================
   MISC LINKS & ACCENTS
   ============================================================ */

a:hover { color: var(--site-primary); }

/* ============================================================
   Elate demo: floating messenger (#messager) + toggle tab
   Entire #colour-variations fixed corner — hidden site-wide
   ============================================================ */
#colour-variations {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure content is visible even if legacy waypoint animations
   fail to initialize (prevents hidden sections/video on home). */
.js .to-animate,
.js .to-animate-2 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   PORTFOLIO GALLERY — reserve space for lazy-loaded images
   Prevents cards from collapsing to ~70px while images load.
   ============================================================ */
#fh5co-work .fh5co-project-item img.img-responsive {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   FOOTER SOCIAL ICONS — replace inline left-offset style
   ============================================================ */
.footer-social li a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social li a i {
  position: static !important;
  left: auto !important;
}

/* ============================================================
   SIGNUP & URGENT BOOKING — card treatment
   Wraps the form in a soft lavender card similar to hero.
   ============================================================ */
.page-signup .main-content-wrap,
.page-urgent-booking .main-content-wrap,
.page-login .main-content-wrap,
.page-register .main-content-wrap {
  background: var(--site-primary-xlight);
  min-height: 100vh;
}

.page-signup .urgent-booking-wrap,
.page-urgent-booking .urgent-booking-wrap {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 28px rgba(123, 94, 167, 0.15);
  padding: 40px 36px 48px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 576px) {
  .page-signup .urgent-booking-wrap,
  .page-urgent-booking .urgent-booking-wrap {
    border-radius: 0;
    box-shadow: none;
    padding: 24px 16px 36px;
  }
}

/* Change-role and Terms/Privacy links to purple */
.page-signup a,
.page-urgent-booking a {
  color: var(--site-primary);
}
.page-signup a:hover,
.page-urgent-booking a:hover {
  color: var(--site-primary-dark);
}

/* Consistent button radius on these pages */
.page-signup .btn,
.page-urgent-booking .btn {
  border-radius: 8px;
}

/* ============================================================
   HOMEPAGE — text contrast improvements in purple sections
   ============================================================ */
#fh5co-work .section-heading h2,
#fh5co-work .section-heading h3,
#fh5co-work .subtext h3,
#fh5co-services .section-heading h2,
#fh5co-services h3,
#fh5co-services p {
  color: #fff;
}

#fh5co-work a {
  color: rgba(255,255,255,.9);
}

/* Diagnostics CTA — give it a subtle purple tint */
#fh5co-diagnostics-cta {
  background: var(--site-primary-xlight) !important;
}

/* ============================================================
   MOBILE HAMBURGER BARS — replace teal with purple
   ============================================================ */
.fh5co-nav-toggle i,
.fh5co-nav-toggle i::before,
.fh5co-nav-toggle i::after {
  background: var(--site-primary);
  color: var(--site-primary);
}
.fh5co-nav-toggle.active i::before,
.fh5co-nav-toggle.active i::after {
  background: var(--site-primary);
}

/* ============================================================
   HOMEPAGE PRIMARY CTAs — remove uppercase/letter-spacing
   Scoped to the homepage sections so forms elsewhere are unaffected.
   ============================================================ */
#fh5co-intro .btn.btn-primary,
#fh5co-diagnostics-cta .btn.btn-primary,
#fh5co-testimonials .btn.btn-primary,
#fh5co-services .btn.btn-primary {
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 8px;
}

/* ============================================================
   LISTING PAGES (salons / catalog) — card polish
   ============================================================ */
.salons-page .fh5co-block,
.catalog-page .fh5co-block.catalog-card {
  border-radius: 10px !important;
  border: 1px solid #e8e0f5;
  box-shadow: 0 2px 10px rgba(123, 94, 167, 0.07);
  transition: box-shadow .2s;
}
.salons-page .fh5co-block:hover,
.catalog-page .fh5co-block.catalog-card:hover {
  box-shadow: 0 4px 18px rgba(123, 94, 167, 0.18);
}

/* Pagination hover for non-active pages */
.salons-page .pagination-salons > li > a:hover,
.catalog-page .pagination-catalog > li > a:hover {
  background-color: var(--site-primary-xlight);
  border-color: var(--site-primary-light);
  color: var(--site-primary-dark);
}