/**
 * SalonClouds+ WCAG 2.2 / ADA accessibility layer
 * Brand color #94AEEB is preserved. Text/foreground colors are adjusted for contrast.
 * Targets: Level A, AA, and AAA where feasible without changing brand.
 */

:root {
 --scp-brand: #94aeeb;
 /* Text ON brand backgrounds — AAA (~7:1) vs #94AEEB */
 --scp-on-brand: #1b2436;
 /* Brand-like text ON light backgrounds — AAA (~7.9:1) vs white */
 --scp-brand-text: #3a5278;
 /* Muted text that still meets AAA (~8:1) on light gray #E7E8EC */
 --scp-muted: #3d4450;
 /* Error text AAA on white */
 --scp-error: #a11b12;
 --scp-focus: #1b2436;
 --scp-focus-ring: #94aeeb;
}

/* ---------- Skip link (2.4.1) ---------- */
.skip-link {
 position: absolute;
 left: 0.5rem;
 top: 0.5rem;
 z-index: 10000;
 padding: 0.75rem 1.25rem;
 background: #fff;
 color: var(--scp-on-brand);
 border: 2px solid var(--scp-brand);
 border-radius: 8px;
 font-size: 14px;
 font-weight: 600;
 text-decoration: underline !important;
 transform: translateY(-200%);
 transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
 transform: translateY(0);
 outline: 3px solid var(--scp-on-brand);
 outline-offset: 2px;
}

/* ---------- Visible focus (2.4.7 / 2.4.13) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible,
.nav-link:focus-visible,
.btn:focus-visible,
.navbar-toggle:focus-visible,
.form-control:focus-visible,
.slick-prev:focus-visible,
.slick-next:focus-visible,
.slick-dots li button:focus-visible,
.swiper-pagination-bullet:focus-visible {
 outline: 3px solid var(--scp-on-brand) !important;
 outline-offset: 2px !important;
 box-shadow:
  0 0 0 2px #fff,
  0 0 0 5px var(--scp-focus-ring) !important;
}

/* Restore focus where global CSS removed outlines */
a,
button,
.navbar-toggle,
.slick-prev,
.slick-next,
.slick-dots li button {
 outline-offset: 2px;
}

/* ---------- Contrast: keep brand bg, darken text on it ---------- */
.btn.blue-dark {
 background: var(--scp-brand) !important;
 color: var(--scp-on-brand) !important;
}
.btn.blue-dark:hover,
.btn.blue-dark:focus-visible {
 background: #e5ecfa !important;
 color: #282834 !important;
}
.btn.btn-white {
 background: #fff !important;
 color: var(--scp-brand-text) !important;
}
.btn.sin-in {
 color: var(--scp-brand-text) !important;
}
.btn.disabled,
.btn.blue-dark:disabled {
 background: #e5ecfa !important;
 color: var(--scp-brand-text) !important;
 opacity: 1 !important;
}

/* Free Demo green CTA: keep green, use dark text (white failed contrast) */
.button-section .btn.blue-dark {
 background: #91db9c !important;
 color: var(--scp-on-brand) !important;
}
.button-section .btn.blue-dark:hover,
.button-section .btn.blue-dark:focus-visible {
 background: #c8edcd !important;
 color: #282834 !important;
}
.button-section .btn.blue-dark:disabled {
 background: #c8edcd !important;
 color: var(--scp-brand-text) !important;
}

/* Brand-colored text on light bg → accessible brand-text (keep #94AEEB for fills/bgs) */
.meet-salonclouds h2,
.featured-products h2,
.get-started-wrapper h2,
.get-started-content h3,
.pricing-content h3,
.trusted-by-the-best h3,
.who-is-salonclouds h2,
.featured-gird > h3,
.featured-products .nav-link.active,
.featured-products .nav-link:hover,
.get-started-wrapper .nav-pills .nav-link.active,
.get-started-wrapper .steps-progress li.current .nav-link,
.navbar-default .navbar-nav > li.active > a,
.job-heading,
.modal-title,
.title-main,
.heading1,
.join-our-team h3,
.max-file-not-found h2,
.mix-and-match-parent h6,
.price-value .amount,
.price-value h4,
.pricingTable .price-value .amount,
.pricingTable .price-value h4,
.blog-item-para a,
.blog-main-inner .blog-item-para a,
.blog-main-inner .blog-item-para p a,
.faq-info-card a,
.btn-link,
.job-open-right-card .btn-link,
.job-open-right-card .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active,
.terms-right-col-card ul li.active a,
.pro-app-lplist ul li a.active,
.pro-app-lplist ul li.active a,
.protoolbox-slider-cont .swiper-slide.active .protool-title a,
.tb-link,
.tb-link:hover {
 color: var(--scp-brand-text) !important;
}
.featured-products .nav-link.active span svg path,
.featured-products .nav-link:hover svg path {
 fill: var(--scp-brand-text) !important;
}
/* Decorative brand accents may stay #94AEEB (non-text) */
.typed-cursor,
.get-started-wrapper .nav-pills .nav-link:before,
.growth-progress .progress-bar,
.loader-circle-new .ripple:nth-child(1) {
 background-color: var(--scp-brand) !important;
}

/* Active nav was #A7BDED (1.88:1) — use accessible brand text */
.navbar-default .navbar-nav > li.active > a {
 color: var(--scp-brand-text) !important;
}

/* Footer: brand bg stays; white text failed (~2.2:1) → dark text */
footer {
 background: var(--scp-brand) !important;
}
.footer-nav h5,
.footer-nav h5 a,
.footer-nav .footer-nav-title,
.footer-nav .footer-nav-title a,
.footer-nav ul li a,
.footer-order-two-left p,
.footer-order-two-left p a,
.footer-order-two-left a {
 color: var(--scp-on-brand) !important;
}
.footer-nav h5 a,
.footer-nav .footer-nav-title a {
 pointer-events: auto;
}
@media (min-width: 768px) {
 .footer-nav h5 a,
 .footer-nav .footer-nav-title a {
  pointer-events: none;
  text-decoration: none !important;
  cursor: default;
 }
}

/* Footer bottom muted text was #8F96A3 on #E7E8EC (~2.9:1) */
.footer-bottom p,
.footer-bottom ul li a {
 color: var(--scp-muted) !important;
}
.footer-bottom ul li a:hover,
.footer-bottom ul li a:focus-visible {
 color: var(--scp-on-brand) !important;
 text-decoration: underline !important;
}

/* Breadcrumbs / placeholders */
.breadcrumb-item a {
 color: var(--scp-muted) !important;
 text-decoration: underline !important;
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
 color: var(--scp-on-brand) !important;
}
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control::-ms-input-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder {
 color: var(--scp-muted) !important;
 opacity: 1 !important;
}

/* Error / danger text */
.danger-text,
.required-label:after,
span[id$='1'],
#g_captcha,
[style*='color:#E7928F'],
[style*='color: #E7928F'] {
 color: var(--scp-error) !important;
}

/* Selection: white on brand fails — use dark text */
::selection {
 background: var(--scp-brand) !important;
 color: var(--scp-on-brand) !important;
}
::-moz-selection {
 background: var(--scp-brand) !important;
 color: var(--scp-on-brand) !important;
}

/* Termly cookie banner contrast */
.termly-styles-button-dd5ebb {
 background: var(--scp-brand) !important;
 color: var(--scp-on-brand) !important;
}
.termly-styles-module-outline-d77917 {
 color: var(--scp-brand-text) !important;
}

/* ---------- Forms (1.3.1 / 3.3.x) ---------- */
.form-control:focus,
.form-control:focus-visible {
 border: 2px solid var(--scp-brand-text) !important;
 box-shadow: 0 0 0 3px rgba(148, 174, 235, 0.45) !important;
}
.form-label {
 display: inline-block;
 margin-bottom: 0.35rem;
 font-weight: 500;
}
.field-error,
.form-error-text {
 display: block;
 color: var(--scp-error) !important;
 font-size: 14px;
 margin-top: 4px;
}
[aria-invalid='true'],
.form-control.is-invalid {
 border-color: var(--scp-error) !important;
}

/* ---------- Links: distinguish without color alone (1.4.1) ---------- */
main a:not(.btn):not(.nav-link):not(.breadcrumb-item a) {
 text-decoration: underline !important;
 text-underline-offset: 2px;
}
.footer-nav ul li a:hover,
.footer-nav ul li a:focus-visible,
.footer-order-two-left p a {
 text-decoration: underline !important;
}

/* External-link indicator for SR */
.sr-only,
.visually-hidden {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
 position: static !important;
 width: auto !important;
 height: auto !important;
 margin: 0 !important;
 overflow: visible !important;
 clip: auto !important;
 white-space: normal !important;
}

/* ---------- Landmarks / main ---------- */
main:focus {
 outline: none;
}
main:focus-visible {
 outline: 3px solid var(--scp-brand);
 outline-offset: 4px;
}

/* Logo: not page heading on interior pages */
.logo .site-brand {
 margin: 0;
 font-size: inherit;
 font-weight: inherit;
}
/* Page titles: h1 keeps same look as former banner h2 */
/* Banner title on #A7BDED/#94AEEB: white fails (~1.88:1) — use dark text, keep brand bg */
.inner-banner-position .inner-banner-box {
 background: var(--scp-brand) !important;
}
.inner-banner-position .inner-banner-box h1,
.inner-banner-position .inner-banner-box h2 {
 font-size: 32px;
 line-height: 48px;
 letter-spacing: 4.8px;
 text-transform: uppercase;
 font-weight: 600;
 color: var(--scp-on-brand) !important;
 margin: 0;
 padding: 0;
}
.inner-banner-position .inner-banner-box h1 sup,
.inner-banner-position .inner-banner-box h2 sup {
 top: -8px;
}
/* Review date / demo card muted text on light cards (#8F96A3 fails on #FAFAFA) */
.featured-gird .featured-content p span,
.title-gray,
.text-muted,
.service-app .service-demo-content p {
 color: var(--scp-muted) !important;
}
/* Scrollable review region is keyboard-focusable via tabindex in markup */
.featured-gird .featured-content .review-desc:focus-visible {
 outline: 3px solid var(--scp-on-brand) !important;
 outline-offset: 2px;
}
.job-heading {
 color: var(--scp-brand-text) !important;
}
.service-demo-content h2 {
 font-size: 18px;
 line-height: 27px;
 font-weight: 500;
 color: #282834;
 margin: 0;
 padding: 0;
}
@media (max-width: 991px) {
 .inner-banner-position .inner-banner-box h1,
 .inner-banner-position .inner-banner-box h2 {
  font-size: 24px;
  line-height: 35px;
  letter-spacing: 3.5px;
 }
}
@media (max-width: 575px) {
 .inner-banner-position .inner-banner-box h1,
 .inner-banner-position .inner-banner-box h2 {
  font-size: 21px;
  letter-spacing: 3px;
 }
}
/* Featured products tablist wrapper (h2/link outside role=tablist) */
.featured-products-nav .nav.nav-pills {
 margin-bottom: 0;
}
.featured-products-nav > .btn.blue-dark {
 margin-top: 10px;
}
/* Get-started step tabs as <button class="nav-link"> */
.steps-progress .nav-link {
 border: 0;
 background: transparent;
 cursor: pointer;
}
.steps-progress .nav-link:focus-visible {
 outline: 3px solid var(--scp-on-brand) !important;
 outline-offset: 2px;
}
.logo .site-brand a:focus-visible img {
 outline: 3px solid var(--scp-on-brand);
 outline-offset: 3px;
}

/* Nav toggle accessible name */

.navbar-toggle .sr-only {
 /* Override decorative rotated MENU so SR still gets name via aria-label */
 display: none !important;
}

/* Social icons — ensure hit target */
.footer-order-two-right a,
.widget-fixed a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 44px;
 min-height: 44px;
}

/* Chat launcher keyboard */
.widget-fixed a {
 border-radius: 50%;
}
.widget-fixed a:focus-visible {
 outline: 3px solid var(--scp-on-brand) !important;
 outline-offset: 3px !important;
}

/* Reduced motion (2.3.3) */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
 }
 .typed-cursor {
  animation: none !important;
 }
}

/* High contrast support */
@media (forced-colors: active) {
 .btn.blue-dark,
 .btn.btn-white,
 .btn.sin-in {
  forced-color-adjust: none;
  border: 2px solid ButtonText;
 }
 a:focus-visible,
 button:focus-visible {
  outline: 3px solid Highlight !important;
 }
}

/* Images: prevent empty alt layout issues */
img:not([alt]) {
 outline: 2px dashed var(--scp-error);
}

/* Loader should not trap AT users once page is interactive */
.loader[aria-hidden='true'] {
 pointer-events: none;
}

/* ---------- Keyboard-open nav dropdowns (desktop) ---------- */
@media (min-width: 1080px) {
 .navbar-nav > li.has-submenu.is-open > ul,
 .navbar-nav > li.has-submenu:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2;
  transform: translateY(0%);
 }
 .navbar-nav > li.has-submenu.is-open > a i img,
 .navbar-nav > li.has-submenu:focus-within > a i img {
  transform: rotate(180deg);
 }
}

/* Page title elements using former h2 visual styles */
.blog-item-title {
 font-size: 24px;
 font-weight: 600;
 line-height: 35px;
 color: #282834;
 margin: 0;
 padding: 0;
}
.max-file-not-found h1 {
 font-size: 32px;
 color: var(--scp-brand-text);
 text-transform: uppercase;
 line-height: 48px;
 letter-spacing: 4.8px;
 text-align: center;
 margin-bottom: 16px;
}
@media (max-width: 575px) {
 .max-file-not-found h1 {
  font-size: 28px;
  letter-spacing: 3px;
 }
}
.heading1 {
 color: var(--scp-brand-text) !important;
}
.product-banner .product-inner-content {
 /* background: rgba(255, 255, 255, 0.88); */
 border-radius: 8px;
 padding: 16px 20px !important;
 box-sizing: border-box;
}
.product-banner .product-inner-content h1.product-banner-title,
.product-banner .product-inner-content h3 {
 font-size: 24px;
 font-weight: 600;
 line-height: 35px;
 color: var(--scp-on-brand) !important;
 letter-spacing: 3.6px;
 text-transform: uppercase;
 margin: 0;
 padding: 0;
}
.product-banner .product-inner-content p {
 color: var(--scp-on-brand) !important;
}

/* Hero banner typed text over imagery — dark text + shadow for AA contrast */
.banner-inner-gird .slide__text,
.banner-inner-gird .banner-slide-title,
.banner-inner-gird .banner-inner-content h2 {
 color: #0f1724 !important;
 text-shadow:
  0 0 8px rgba(255, 255, 255, 0.95),
  0 1px 2px rgba(255, 255, 255, 0.9),
  0 0 1px #fff;
}
/* .banner-inner-gird .banner-innner-position {
 background: linear-gradient(
  90deg,
  rgba(255, 255, 255, 0.72) 0%,
  rgba(255, 255, 255, 0.35) 55%,
  rgba(255, 255, 255, 0) 100%
 );
} */

/* Integration card hover: keep brand bg, dark text (not white) */
.integrate-img-card:hover h3,
.integrate-img-card:hover h4 {
 color: var(--scp-on-brand) !important;
}

/* WCAG 2.2 2.5.8 Target Size (Minimum) */
.modal .btn-close,
.alert .btn-close,
.header-top .btn-close {
 min-width: 44px !important;
 min-height: 44px !important;
 padding: 0.75rem !important;
 box-sizing: content-box;
 opacity: 1;
}
.pricing-info-btn,
button[data-bs-toggle='popover'],
.share-icon-btn,
.clipboard.share-icon-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 44px;
 min-height: 44px;
 padding: 0;
 margin: 0;
 border: 0;
 background: transparent;
 cursor: pointer;
 vertical-align: middle;
}
.portfolio-expand-btn { 
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    animation-name: slide-in;
    animation-duration: 1s;
    width: 100%;
    height: 100%;
}
.portfolio-arrow-position button[aria-expanded="true"] img{    transition: all 0.5s ease-in-out;
  transform: rotate(180deg);}
.breadcrumb-social .share-icon-btn:focus-visible,
.pricing-info-btn:focus-visible,
.portfolio-expand-btn:focus-visible {
 outline: 3px solid var(--scp-on-brand) !important;
 outline-offset: 2px !important;
}

/* Slick arrows over imagery */
.slick-prev,
.slick-next {
 min-width: 44px;
 min-height: 44px;
 color: var(--scp-on-brand) !important;
 background: rgba(255, 255, 255, 0.92) !important;
 border-radius: 4px;
}

/* Demo funnel step label (not a heading) */
.demo-step-label {
 margin: 0 0 0.35rem;
 font-size: 1.25rem;
 font-weight: 600;
 color: var(--scp-muted);
}
.demo-app-title .title-main {
 color: var(--scp-on-brand);
}
.demo-back-btn a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 44px;
 min-height: 44px;
}

/* Footer social list landmark */
.footer-order-two-right ul {
 list-style: none;
}

/* Integration logo cards as buttons */
button.integrate-card-btn,
.clickToGOSlide.integrate-card-btn {
 display: block;
 width: 100%;
 padding: 0;
 border: 0;
 background: transparent;
 text-align: left;
 cursor: pointer;
}
button.integrate-card-btn:focus-visible {
 outline: 3px solid var(--scp-on-brand) !important;
 outline-offset: 3px !important;
}

/* Pricing table header row inherits existing styles */
.product-table thead th {
 font-weight: 600;
}

/* Pricing cards: muted gray #8F96A3 fails AA on #FAFAFA (~2.85:1) */
.price-features ul li.disable,
li.disable,
.pricingTable h3 span,
.pricingTable h3 > span,
.pricingTable .pricing-content span,
.pricing-content h3 span,
.pricingTable span,
.three-layout-max-grid h3 span,
.pricingTable h3 small,
.mix-and-match-parent {
 color: var(--scp-muted) !important;
}
/* Catch inline/CMS muted text that still uses #8F96A3 */
.three-layout-max-grid span[style*='8F96A3'],
.three-layout-max-grid span[style*='8f96a3'] {
 color: var(--scp-muted) !important;
}

/* Broad mute-text override where style.css still uses #8F96A3 */
.blog-item-date,
.category-status,
.job-open-left-card h3,
.job-apply-top-card p,
.portfolio-bottom .portfolio-btm-right ul li a,
.custom-app-integrate-txt h3,
.terms-left-col-card h2,
.customapp-badge,
.appLP-top-card h3 strong,
.LP-features-key-list li,
.breadcrumb-left .breadcrumb li,
.breadcrumb-left .breadcrumb li a,
.breadcrumb-item,
.breadcrumb-item + .breadcrumb-item::before,
.published-by,
.pricingTable .pricingTable-header .title span,
.pricingTable .pricingTable-header h3 span,
.pricingTable .pricingTable-header h4 span,
.text-muted,
.title-gray {
 color: var(--scp-muted) !important;
}

select.select-option-color {
 color: var(--scp-muted) !important;
}

/* Pricing package price: #94AEEB on #FAFAFA fails AA */
.pricingTable .price-value .amount,
.pricingTable .price-value h4 {
 color: var(--scp-brand-text) !important;
}

/* Swiper pagination bullets */
.swiper-pagination {
  text-align: left !important;
  left: 17px !important;
}

.swiper-pagination-bullet,
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
span.swiper-pagination-bullet {
 min-width: 16px !important;
 min-height: 16px !important;
 width: 16px !important;
 height: 16px !important;
 margin: 0 6px !important;
 opacity: 0.55 !important; 
}
.protools-features-slider .swiper-pagination-bullet,
.protools-features-slider .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.protools-features-slider span.swiper-pagination-bullet {
 filter: brightness(0) saturate(100%) invert(0%) sepia(94%) saturate(22%) hue-rotate(347deg) brightness(98%) contrast(105%);
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active-main {
 opacity: 1 !important;
}

/* Nested th in pricing product column */
.product-table th[scope='row'] {
 font-weight: 400;
 text-align: left;
 vertical-align: middle;
}

/* Footer nav titles: use <p> (not h5) to avoid heading-order skips.
   Text must be dark on brand footer bg (#94AEEB) — white fails AA. */
.footer-nav .footer-nav-title,
.footer-nav h5 {
 font-size: 18px;
 font-weight: 500;
 line-height: 27px;
 color: var(--scp-on-brand) !important;
 padding-bottom: 19px;
 margin: 0;
}
.footer-nav .footer-nav-title a,
.footer-nav h5 a {
 color: var(--scp-on-brand) !important;
}
@media (max-width: 991px) {
 .footer-nav .footer-nav-title {
  font-size: 16px;
  padding-bottom: 10px;
 }
 .footer-nav .footer-nav-title a {
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
 }
 .footer-nav .footer-nav-title a span {
  display: block;
 }
}
@media (min-width: 1080px) {
  .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
   }
}

@media (min-width: 992px) {
 .footer-nav .footer-nav-title a {
  pointer-events: none;
 }
 .footer-nav .footer-nav-title a span {
  display: none;
 }
}