/* Web by Mateen — V9.39.55: targeted approved visual refinements only.
   WordPress FAQ badge uses the same orange-gradient/white brand identity as
   the approved WordPress service card. No change to FAQ card layout.
   Portfolio filters adopt the existing Testimonials filter appearance. */

/* V9.39.55.1 — fix: ALL FAQ brand icons begin in the same calm outline state.
   Orange fill + white mark is strictly an interactive state, never the default. */
.faq-question-icon.wbm55-wordpress,
.services-faq-v3 .faq-item summary .faq-question-icon.wbm55-wordpress {
  color:#f24815 !important;
  background:linear-gradient(145deg,#fff4ee,#fffaf7) !important;
  border:1px solid rgba(242,72,21,.18) !important;
  box-shadow:0 12px 28px rgba(242,72,21,.08) !important;
}
.wbm50-faq-icon.wbm55-wordpress {
  color:#f24815 !important;
  background:#fff3ed !important;
  border:1px solid #ffd2c1 !important;
  box-shadow:none !important;
}
.faq-question-icon.wbm55-wordpress svg,
.wbm50-faq-icon.wbm55-wordpress svg {
  width:19px !important;
  height:19px !important;
  color:inherit !important;
  stroke:none !important;
  fill:currentColor !important;
  display:block;
}
/* Match the approved hover elevation: fill icons only when their FAQ is
   hovered, keyboard-focused or expanded. Non-WordPress icons also turn white. */
.services-faq-v3 .faq-item:is(:hover,:focus-within,[open]) summary .faq-question-icon,
.wbm50-faq-item:is(:hover,:focus-within,[open]) .wbm50-faq-icon {
  color:#fff !important;
  background:linear-gradient(145deg,#ff8a00,#f24815) !important;
  border-color:rgba(242,72,21,.34) !important;
  box-shadow:0 9px 22px rgba(242,72,21,.14) !important;
  transition:background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
/* The other three FAQ line icons must also switch to white on the same hover/focus/open state. */
.wbm50-faq-item:is(:hover,:focus-within,[open]) .wbm50-faq-icon svg,
.services-faq-v3 .faq-item:is(:hover,:focus-within,[open]) summary .faq-question-icon svg {
  stroke:currentColor !important;
}
.services-faq-v3 .faq-item:is(:hover,:focus-within,[open]) summary .faq-question-icon.wbm55-wordpress svg,
.wbm50-faq-item:is(:hover,:focus-within,[open]) .wbm50-faq-icon.wbm55-wordpress svg {
  color:#fff !important;
  stroke:none !important;
  fill:currentColor !important;
}
/* Keep a refined hover lift without changing grid dimensions or positions. */
.wbm50-faq-item {
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.wbm50-faq-item:hover {
  transform:translateY(-3px);
  box-shadow:0 17px 38px rgba(48,38,24,.09);
}
@media(prefers-reduced-motion:reduce) {
  .wbm50-faq-item:hover{transform:none}
  .services-faq-v3 .faq-item summary .faq-question-icon,
  .wbm50-faq-icon {transition:none!important}
}

/* Match the approved Reviews filter tabs without touching portfolio content or JS. */
.portfolio-page-body .portfolio-service-tabs {
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px;
  background:rgba(250,247,241,.88);
  border:1px solid rgba(214,203,189,.72);
  box-shadow:0 12px 32px rgba(36,26,16,.08);
  backdrop-filter:blur(14px);
  border-radius:999px;
  width:max-content;
  max-width:100%;
}
.portfolio-page-body .portfolio-service-tabs button {
  border:1px solid #ddd5ca;
  background:#fff;
  color:#323238;
  border-radius:999px;
  padding:10px 14px;
  font:700 .75rem/1 Montserrat,sans-serif;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.portfolio-page-body .portfolio-service-tabs button:hover,
.portfolio-page-body .portfolio-service-tabs button.is-active {
  background:#101114;
  color:#fff;
  border-color:#101114;
  transform:translateY(-1px);
  box-shadow:none;
}
.portfolio-page-body .portfolio-service-tabs button:focus-visible {
  outline:2px solid #f24815;
  outline-offset:3px;
}
@media(max-width:900px) {
  .portfolio-page-body .portfolio-service-tabs {
    width:100%;
    max-width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    border-radius:18px;
  }
  .portfolio-page-body .portfolio-service-tabs::-webkit-scrollbar {display:none}
  .portfolio-page-body .portfolio-service-tabs button {flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-page-body .portfolio-service-tabs button {transition:none;transform:none!important}
}