/* Beautiqua customizer bridge — EP-102/105. Two sources bridged:
   (1) home.blade.php/about.blade.php's own bespoke <style> (already partially
       var()-driven, kept as-is — this file only adds what THOSE pages miss).
   (2) The vendor main.css (public/themes/beautiqua/assets/css/main.css) that
       drives every OTHER page (services/team/blog/contact/faq/pricing/gallery).
       Full audit of every #f56981 (brand pink) + #a0ce4e (accent lime) hardcoded
       occurrence across ~200 selectors, mapped to canonical tokens below. */

/* ---- Base font (vendor main.css: body=Poppins, headings=Vidaloka) ---- */
body { font-family: var(--font-body) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; }

/* ---- color: var(--color-primary) ---- */
.ds .sf-menu > li.active > a,
.ls .sf-menu > li.active > a,
.page_slider .intro_after_featured_word a:hover,
.page_slider .intro_featured_word,
.sf-menu > li.active > a,
.sf-menu ul li.active > a,
#search_modal a:hover,
#switcher a,
.become-model .subtitle,
.breadcrumb > li a:hover,
.color-main,
.comments-area .comment-list .comment-metadata a,
.comments-area .comment-list .comment-reply-link:hover,
.countdown-amount,
.cs.cs2 .color-main,
.cs.cs3 .color-main,
.custom-navigation .flex-prev:hover,
.custom-navigation .flex-prev:hover::before,
.dropdown-menu form .checkbox a,
.dropdown-shopping-cart:hover,
.ds .big-title,
.ds .breadcrumb > li.active,
.ds .color-main,
.ds .links-darkgrey a:hover,
.ds .links-maincolor a,
.ds .ls a:not(.btn):hover,
.ds .ls h6 a:hover,
.ds .widget_mailchimp .form-inline .btn,
.ds .widget_shopping_cart li a + a:hover,
.ds a:not(.btn).color-main,
.entry-meta i,
.entry-title:last-child a:hover,
.error-404 .page-header h3,
.feature-list li a,
.filters .active,
.flex-custom-nav .flex-custom-link:hover,
.format-chat .entry-content p:nth-of-type(2n) strong,
.format-link .item-content .entry-meta a:hover,
.format-link .item-content .entry-title a:hover,
.format-link .item-content a,
.has-error .help-block,
.item-gallery .item-content .model-data .title,
.links-darkgrey a:hover,
.links-grey a:hover,
.links-maincolor a,
.ls .btn-outline-maincolor:hover,
.ls .widget_pages li a:hover,
.ls .widget_pages li span,
.ls .widget_recent_entries a:hover,
.ls.ms .breadcrumb a:hover,
.media .media-body h5:hover,
.media a:hover,
.menu-click li.active > a,
.owl-carousel.buttons-type .owl-nav div.owl-next:hover,
.owl-carousel.buttons-type .owl-nav div.owl-next:hover::after,
.page-links > a:hover,
.page-links > span,
.page_header .top-includes a:hover,
.page_header_side .header-soc .toggle_menu_side:hover::after,
.page_header_side .header-soc a:hover,
.page_header_side .side_header_inner .menu-side-click .menu-click .active-submenu a,
.page_header_side .side_header_inner .menu-side-click .menu-click .active-submenu ul li a:hover,
.page_header_side .side_header_inner .menu-side-click .menu-click .active-submenu ul li.active-submenu > a,
.page_header_side .side_header_inner .menu-side-click .menu-click a:hover,
.page_header_side .side_header_inner .toggle_menu_side:hover::after,
.page_slider .flex-direction-nav .flex-next:hover,
.page_slider .flex-direction-nav .flex-prev:hover,
.page_slider .flex-direction-nav .flex-prev:hover::after,
.page_slider .soc-buttons .fa:hover,
.page_title h2,
.portfolio-section .owl-nav .owl-next:hover i:before,
.portfolio-section .owl-nav .owl-prev:hover i:before,
.post .entry-header a,
.post-adds .like_button,
.post-nav .nav-links .nav-subtitle,
.post-nav .nav-links a,
.post-section .owl-carousel .owl-nav .owl-next:hover i:before,
.post-section .owl-carousel .owl-nav .owl-prev:hover i:before,
.post.gallery .owl-carousel .owl-nav .owl-next:hover i:before,
.post.gallery .owl-carousel .owl-nav .owl-prev:hover i:before,
.section-team .owl-carousel .owl-nav .owl-next:hover:after,
.section-team .owl-carousel .owl-nav .owl-prev:hover:after,
.service .sevices-single h4:hover,
.service .sevices-single span,
.service .vertical-item .item-content a span,
.service .vertical-item .item-content h3:hover,
.special-heading span span,
.star-rating,
.stars.selected a:not(.active):before,
.stars:hover a:before,
.tab-pane .item-meta,
.team .feature-list li a,
.team .item-content .tile:hover a,
.vertical-item .item-media + .item-content .small-text a,
.video-section .owl-nav .owl-next:hover:after,
.video-section .owl-nav .owl-prev:hover:after,
.video-section .video-simple a:after,
.widget_posts_2cols ul h5 a:hover,
.widget_recent_posts ul .item-meta,
.widget_slider .item-meta,
.widget_slider h4 a:hover,
.widget_tag_cloud a:hover,
.widget_twitter .twitter-item .media .media-body a,
[role='tab'] h5 a,
[role='tab'] h5 a:hover,
a.border-icon:hover,
a:hover,
mark,
ol.list1 li::before,
section.card-section .entry-meta .author .fa,
section.card-section .entry-meta .author a:hover,
section.card-section .item-content .entry-title a:hover,
section.carousel-section-alt .owl-custom-nav .owl-next:hover,
section.carousel-section-alt .owl-custom-nav .owl-prev:hover,
section.faces-section .model-images .flex-direction-nav .flex-prev:hover::after,
section.faces-section .model-slider-thumbs .slides li a.name:hover,
section.team-section .team-profession,
section.team-section .team-slider-shortcode .team-slider-item.active .slide-title span,
section.team-section .team-slider-shortcode .team-slider-item:hover .slide-title span,
ul.list-styled li:before,
ul.list1 li::before {
  color: var(--color-primary) !important;
}

/* ---- background-color: var(--color-primary) ---- */
.nav-narrow .sf-menu > li.active > a:before,
.sf-menu ul li a:before,
#timetable tbody .current,
#toTop,
.bg-maincolor,
.bs .toggle_menu_side,
.btn-maincolor,
.cat-links a:nth-child(4n-3),
.checkbox-slider--b-flat input + span:after,
.cs,
.ds .btn-outline-maincolor:hover,
.ds .color-bg-icon:hover,
.ds .pagination > li > span:focus,
.ds .toggle_menu_side,
.ds .vertical-tabs .nav > li > a:hover,
.filters.filters-active-tob-border a.active:after,
.form-group .btn-submit,
.hello .owl-carousel .owl-dots .owl-dot.active span,
.ls .toggle_menu_side,
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active,
.page_header_side .header-soc .toggle_menu_side:hover span::after,
.page_header_side .side_header_inner .toggle_menu_side:hover span::after,
.page_slider .flex-control-nav li a.flex-active,
.portfolio-section .owl-dots .owl-dot.active span,
.post-adds .share_button,
.post-adds .views-count,
.post-section .owl-carousel .owl-dots .owl-dot.active span,
.quote-section .owl-carousel .owl-dots .owl-dot.active span,
.s-bordercolormain .container:after,
.s-overlay.cs:before,
.section-team .owl-carousel .owl-dots .owl-dot.active span,
.toggle_menu.mobile-active,
.video-section .owl-dots .owl-dot.active span,
.widget_calendar caption,
.widget_product_search form input[type="submit"],
::-moz-selection,
::selection,
[class*="-item"] .links-wrap a.link-anchor:hover,
[class*="-item"] .links-wrap a.link-zoom:hover,
[role="tablist"] .card-header a.collapsed:hover,
[role="tablist"] .card-header,
a.color-bg-icon:hover,
input[type="radio"]:checked + label:before {
  background-color: var(--color-primary) !important;
}

/* ---- border-color group ---- */
#timetable tbody .current,
.color-main,
.ds .pagination > li > span:focus,
.has-error .form-control,
.hello .owl-carousel .owl-dots .owl-dot.active span,
.ls .btn-outline-maincolor:hover,
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active,
.page-links > a:hover,
.page-links > span,
.page_slider .flex-control-nav li a.flex-active,
.portfolio-section .owl-dots .owl-dot.active span,
.post-section .owl-carousel .owl-dots .owl-dot.active span,
.quote-section .owl-carousel .owl-dots .owl-dot.active span,
.section-team .owl-carousel .owl-dots .owl-dot.active span,
.video-section .owl-dots .owl-dot.active span,
.widget_tag_cloud a:hover,
[class*="-item"] .links-wrap a.link-anchor:hover,
[class*="-item"] .links-wrap a.link-zoom:hover,
a.border-icon:hover,
/* the following were "border: 2px solid #f56981" — use border-color only so
   width/style from the vendor rule are left untouched (avoids reset bug) */
.btn-darkgrey,
.button.wc-forward,
.hello .owl-carousel .owl-dots .owl-dot:hover span,
.portfolio-section .owl-dots .owl-dot:hover span,
.post-section .owl-carousel .owl-dots .owl-dot:hover span,
.quote-section .owl-carousel .owl-dots .owl-dot:hover span,
.section-team .owl-carousel .owl-dots .owl-dot:hover span,
.video-section .owl-dots .owl-dot:hover span,
input[type="checkbox"] + label:before {
  border-color: var(--color-primary) !important;
}

.corner.cs.corner-inverse:after,
.corner.cs:after {
  border-bottom-color: var(--color-primary) !important;
}
.corner.cs:after {
  border-top-color: var(--color-primary) !important;
}

/* ---- Special-cased declarations (box-shadow / gradients / multi-value border) ---- */
.form-control.invalid {
  box-shadow: 0 0 0 2px var(--color-primary) !important;
}
.gradient-background:before {
  background: linear-gradient(to right, var(--color-primary) 0%, var(--color-accent) 100%) !important;
}
.gradientvertical-background:before {
  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-accent) 100%) !important;
}
.post > .fa:after {
  border-color: transparent transparent var(--color-primary) transparent !important;
}
.s-overlay-diagonal-double:after {
  background: linear-gradient(45deg, transparent 70%, var(--color-primary) 70%) !important;
}
.s-overlay-diagonal-double:before {
  background: linear-gradient(45deg, var(--color-primary) 30%, transparent 30%) !important;
}

/* ---- About page (bespoke about.blade.php <style>) — uses its own #e88da7
   shade, entirely separate from the vendor main.css above. Bridging both to
   the same canonical vars means home/about now match every other page when
   the tenant picks a color. ---- */
.bq-about-hero,
.bq-about-stats .row,
.bq-about-team,
.bq-at2-card,
.bq-about-cta {
  background-color: var(--color-surface) !important;
}
.bq-about-img,
.bq-about-hero .eyebrow {
  background-color: var(--color-surface2) !important;
}
.bq-about-cta {
  border-top-color: var(--color-border) !important;
}
.bq-about-hero h1,
.bq-about-body h2,
.bq-about-sec-head h2,
.bq-af-card h4,
.bq-at-card h4,
.bq-at2-meta .n,
.bq-about-cta h2 {
  color: var(--color-text) !important;
}
.bq-about-hero p,
.bq-about-body p,
.bq-af-card p,
.bq-at2-card p,
.bq-about-stats .stat .l,
.bq-at2-meta .o {
  color: var(--color-text-muted) !important;
}
.bq-about-hero .eyebrow,
.bq-about-hero h1 em,
.bq-about-body h2 em,
.bq-about-img .ph,
.bq-about-stats .stat .n,
.bq-about-sec-head .eyebrow,
.bq-af-card i,
.bq-at-card .r,
.bq-at2-card .stars {
  color: var(--color-primary) !important;
}
.bq-about-cta a {
  background-color: var(--color-primary) !important;
}
.bq-about-cta a:hover {
  background-color: var(--color-accent) !important;
}

/* ---- Active page variants (glowsalon/uid=271 has 5 variants live: services,
   team, blog, contact, gallery — these are bespoke pages like home/about,
   NOT the vendor main.css above. Same #e88da7 family, own <style> per file,
   own hardcoded body/heading font that fights the canonical one. ---- */
body { color: var(--color-text) !important; background-color: var(--color-bg) !important; }

.bqsp-col-title, .bqsp-row:hover, .bqsp-row .row-price, .bqsp-cta h2 em, .bqsp-cta a.outline,
.bqt-head .eyebrow, .bqt-head h1 em, .bqt-cwrap .ph, .bqt-card .rk, .bqt-social a, .bqt-empty h3,
.bqbg-head .eyebrow, .bqbg-head h1 em, .bqbg-card .imgwrap .ph, .bqbg-card .imgwrap .datepill .num, .bqbg-card .catlbl, .bqbg-card .more, .bqbg-empty h3,
.bqcm-head .eyebrow, .bqcm-head h1 em, .bqcm-info .item .icn, .bqcm-info .item .val a:hover, .bqcm-info .social a, .bqcm-form h2 em,
.bqgo-card .imgwrap .ph, .bqgo-card .imgwrap .videoIcn, .bqgo-card .cap .type, .bqgo-card:hover .cap h4, .bqgo-empty h3, .bqgo-cta h2 em {
  color: var(--color-primary) !important;
}
.bqsp-cta a.outline { border-color: var(--color-primary) !important; }
.bqt-social a { border-color: rgba(var(--color-primary-rgb), .4) !important; }
.bqcm-info .social a { border-color: rgba(var(--color-primary-rgb), .4) !important; }
.bqbg-card .more { border-color: var(--color-primary) !important; }

.bqsp-head, .bqsp-cta a, .bqt-cta, .bqt-social a:hover, .bqcm-info .social a:hover,
.bqcm-form button, .bqgo-head, .bqgo-cta a {
  background-color: var(--color-primary) !important;
}
.bqbg-card:hover .more {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.bqsp-cta a:hover, .bqgo-cta a:hover, .bqcm-form button:hover {
  background-color: var(--color-accent) !important;
}

.bqt-card h5, .bqbg-card .imgwrap .datepill, .bqbg-card h3,
.bqcm-info .item .val, .bqcm-info .item .val a,
.bqcm-form input, .bqcm-form textarea,
.bqgo-card .cap h4 {
  color: var(--color-text) !important;
}

.bqsp-lead, .bqsp-row .body p, .bqsp-cta .note,
.bqt-head p, .bqt-card .bio, .bqt-empty, .bqbg-empty, .bqgo-empty,
.bqbg-head p, .bqbg-card p.snip, .bqcm-head p, .bqcm-form p.note,
.bqsp-col-title small, .bqsp-row .row-price small,
.bqcm-info .item .lbl, .bqcm-form label {
  color: var(--color-text-muted) !important;
}

.bqt-head, .bqbg-head, .bqcm-head, .bqcm-form-sec, .bqgo-cta, .bqt-empty, .bqbg-empty,
.bqbg-card, .bqcm-form, .bqgo-card, .bqsp-menu, .bqsp-cta {
  background-color: var(--color-surface) !important;
}
.bqt-head .eyebrow, .bqbg-head .eyebrow, .bqcm-head .eyebrow,
.bqt-cwrap, .bqt-card .rk, .bqbg-card .imgwrap, .bqcm-info .item .icn, .bqcm-map, .bqgo-card .imgwrap {
  background-color: var(--color-surface2) !important;
}

.bqsp-row, .bqsp-col-title, .bqt-empty, .bqbg-empty {
  border-color: var(--color-border) !important;
}

.bqcm-form input:focus, .bqcm-form textarea:focus {
  border-color: var(--color-primary) !important;
}