/* =============================================
   MCAKEY — GLOBAL BASE STYLES
   ============================================= */
   
/* Critical Font Awesome icons — inlined to prevent flash on async CSS load
   fas fa-hands-helping and other above-fold FA icons */
.fa, .fas, .far, .fab, .fal {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.fas { font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.far { font-family: 'Font Awesome 6 Free'; font-weight: 400; }
.fab { font-family: 'Font Awesome 6 Brands'; font-weight: 400; }

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2') format('woff2');
}

@font-face {
    font-family: 'xstore-icons-light';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/themes/xstore/fonts/xstore-icons-light.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2') format('woff2');
}

::selection {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-accent);
}

::-moz-selection {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-accent);
}

.quick-view-popup {
    border-radius: 16px !important;
}

.et-notify {
    border-radius: 12px !important;
}

/* ── GENERAL BUTTONS ── */
.btn, .button, form #qna-ask-input button, form button, input[type=button], input[type=submit] {
  border-radius: 10px !important;
  background-color: var(--e-global-color-primary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.btn:hover, .button:hover, form button:hover, input[type=button]:hover, input[type=submit]:hover {
  background-color: color-mix(in srgb, var(--e-global-color-primary) 80%, black) !important;
  color: #fff !important;
}

/* ── QUANTITY BUTTONS FIX ── */
.quantity .minus,
.quantity .plus {
  background-color: transparent !important;
  color: var(--e-global-color-text) !important;
  -webkit-text-fill-color: var(--e-global-color-text) !important;
}

.quantity .minus:hover,
.quantity .plus:hover {
  background-color: transparent !important;
}

.woocommerce-mini-cart-item.mini_cart_item {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.cart-popup-footer{
    font-weight: 800;
}

/* ── MINI CART PRODUCT IMAGE ── */
.woocommerce-mini-cart-item .product-mini-image img {
  border-radius: 10px !important;
}

/* ── MINI CART TITLE ── */
.etheme-elementor-off-canvas_content-head-label {
  font-weight: 800 !important;
}

/* ── MINI CART BUTTONS ── */
.mini-cart-buttons .button {
  background-color: var(--e-global-color-primary) !important;
  color: #fff !important;
}

.mini-cart-buttons .button:hover {
  background-color: color-mix(in srgb, var(--e-global-color-primary) 80%, black) !important;
}

.mini-cart-buttons .btn-checkout {
  background-color: var(--e-global-color-secondary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.mini-cart-buttons .btn-checkout:hover {
  background-color: var(--e-global-color-accent) !important;
}


/* ── PAGE HERO ── */
.mca-page-hero{text-align:center;padding:60px 20px 48px}
.mca-page-hero h1{font-size:36px;font-weight:800;color:var(--e-global-color-secondary);margin-bottom:14px;line-height:1.2}
.mca-page-hero p{font-size:17px;color:rgba(26,26,26,0.65);max-width:640px;margin:0 auto;line-height:1.75}
 
/* ── PAGE SECTIONS ── */
.mca-page-section{max-width:1060px;margin:0 auto 56px;padding:0 20px}
.mca-page-section h2{font-size:24px;font-weight:800;color:var(--e-global-color-secondary);margin-bottom:16px}
.mca-page-section p{font-size:15px;color:rgba(26,26,26,0.7);line-height:1.85;margin-bottom:14px}
.mca-page-section a{color:var(--e-global-color-primary);text-decoration:none}
 
/* ── SHARED BUTTONS ── */
.mca-btn-lime{background:var(--e-global-color-accent);color:var(--e-global-color-secondary) !important;-webkit-text-fill-color:var(--e-global-color-secondary) !important;padding:13px 28px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;display:inline-block;transition:background .2s ease}
.mca-btn-lime:hover{background:#6bc418;color:var(--e-global-color-secondary) !important;-webkit-text-fill-color:var(--e-global-color-secondary) !important}
.mca-btn-ghost{background:transparent;color:#fff !important;-webkit-text-fill-color:#fff !important;padding:13px 28px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;display:inline-block;border:1.5px solid rgba(255,255,255,0.35);transition:all .2s ease}
.mca-btn-ghost:hover{background:rgba(255,255,255,0.1);color:#fff !important;-webkit-text-fill-color:#fff !important}
.mca-btn-dark{background:var(--e-global-color-secondary);color:#fff !important;-webkit-text-fill-color:#fff !important;padding:13px 28px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;display:inline-block;transition:background .2s ease}
.mca-btn-dark:hover{background:var(--e-global-color-accent);color:#fff !important;-webkit-text-fill-color:#fff !important}
.mca-btn-outline{background:transparent;color:var(--e-global-color-secondary) !important;-webkit-text-fill-color:var(--e-global-color-secondary) !important;padding:13px 28px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;display:inline-block;border:1.5px solid var(--e-global-color-secondary);transition:all .2s ease}
.mca-btn-outline:hover{background:var(--e-global-color-secondary);color:#fff !important;-webkit-text-fill-color:#fff !important}
 
/* ── PAGE CTA BLOCK ── */
.mca-page-cta{background:var(--e-global-color-secondary);border-radius:16px;padding:48px 40px;text-align:center;max-width:1060px;margin:0 auto 64px}
.mca-page-cta h2{color:#fff;font-size:26px;font-weight:800;margin:0 0 12px}
.mca-page-cta p{color:rgba(255,255,255,0.72);font-size:15px;margin:0 0 28px}
.mca-page-cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
 
/* ── SERVICE / FEATURE CARDS ── */
.mca-card-grid{display:flex;flex-wrap:wrap;gap:20px}
.mca-service-card{background:#fff;border:1px solid #EEEEEE;border-radius:12px;padding:24px;flex:1;min-width:260px;transition:all .2s ease}
.mca-service-card:hover{border-color:var(--e-global-color-primary);box-shadow:0 8px 24px rgba(30,144,255,0.08);transform:translateY(-2px)}
.mca-service-icon{width:40px;height:40px;background:rgba(127,216,32,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mca-service-icon svg{width:20px;height:20px;stroke:var(--e-global-color-accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mca-service-card h3{font-size:15px;font-weight:700;color:var(--e-global-color-secondary);margin-bottom:8px}
.mca-service-card p{font-size:13px;color:rgba(26,26,26,0.65);line-height:1.7;margin:0}
 
/* ── STEPS ── */
.mca-steps{display:flex;flex-wrap:wrap;gap:20px}
.mca-step{background:#F8F9FA;border-radius:12px;padding:28px;flex:1;min-width:220px;position:relative}
/* Was content:counter(steps) — each of the 4 steps is a separate,
   independently-rendered Elementor HTML widget (no shared .mca-steps
   ancestor exists in the DOM at all), and the counter wasn't sharing
   state across them the way page-order counters normally do — all 4
   rendered "1" instead of 1-2-3-4 (confirmed live via screenshot; ruled
   out CSS containment and a conflicting counter name as the cause).
   attr(data-step) sidesteps the whole question — each widget already has
   its own correct digit as literal text in .mca-step-number, now also
   set as a data-step attribute on the same element. */
.mca-step::before{content:attr(data-step);position:absolute;top:16px;right:20px;font-size:48px;font-weight:900;color:rgba(127,216,32,0.2);line-height:1}
.mca-step h3{font-size:16px;font-weight:800;color:var(--e-global-color-secondary);margin-bottom:10px}
.mca-step p{font-size:14px;color:rgba(26,26,26,0.68);line-height:1.75;margin:0}
 
/* ── STAT PILLS ── */
.mca-stat-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.mca-stat-pill{background:rgba(127,216,32,0.08);border:1.5px solid var(--e-global-color-accent);border-radius:10px;padding:14px 20px;text-align:center;flex:1;min-width:120px}
.mca-stat-pill strong{display:block;font-size:22px;font-weight:800;color:var(--e-global-color-secondary)}
.mca-stat-pill span{font-size:12px;color:rgba(26,26,26,0.55);font-weight:600}
 
/* ── HIGHLIGHT / CALLOUT ── */
.mca-highlight{background:rgba(127,216,32,0.07);border-left:3px solid var(--e-global-color-accent);border-radius:0 8px 8px 0;padding:16px 20px;margin:20px 0}
.mca-highlight p{margin:0;font-size:14px;color:rgba(26,26,26,0.75);line-height:1.8}
 
/* ── LEGAL PAGE ── */
.mca-legal-page{max-width:780px;margin:0 auto;padding:48px 20px 80px}
.mca-legal-page h1{font-size:32px;font-weight:800;color:var(--e-global-color-secondary);margin-bottom:6px}
.mca-legal-meta{font-size:13px;color:rgba(26,26,26,0.4);margin-bottom:40px;display:block}
.mca-legal-page h2{font-size:18px;font-weight:800;color:var(--e-global-color-secondary);margin:36px 0 12px;padding-top:8px;border-top:1px solid #EEEEEE}
.mca-legal-page h3{font-size:15px;font-weight:700;color:var(--e-global-color-text);margin:20px 0 8px}
.mca-legal-page p{font-size:14px;color:rgba(26,26,26,0.72);line-height:1.9;margin-bottom:12px}
.mca-legal-page ul,.mca-legal-page ol{padding-left:22px;margin-bottom:14px}
.mca-legal-page li{font-size:14px;color:rgba(26,26,26,0.72);line-height:1.85;margin-bottom:4px}
.mca-legal-page a{color:var(--e-global-color-primary);text-decoration:none}

/* ── DEPARTMENTS MENU SIDEBAR ── */
/* Scoped to this one widget instance (.elementor-element-0a81739 is the
   Departments Menu widget's own Elementor wrapper class) so this never
   touches any other .nav-sublist-dropdown usage elsewhere on the site
   (e.g. the Blog mega menu). The theme's own CSS never sets a radius here
   at all — this was inheriting an Elementor kit default that rounded all
   four corners uniformly, which looked wrong sitting flush against the
   category list above/below it. Round only the free left corners (this
   panel's own outer edge); the right edge stays flat since that's the
   seam against the mega-menu content panel next to it. */
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega){border-radius:16px 0 0 16px}

/* border-radius alone only shapes THIS box's own border/background — it
   doesn't clip children, and doesn't stop a CHILD's own opaque background
   from painting a square corner on top of it. This wrapper's rounding was
   being completely hidden by three separate opaque layers stacked inside
   it, each needing the same corner radius individually (confirmed live,
   one at a time, via a red-background swap test):
     1. the <ul>'s own white background (the actual visible "card" fill —
        the wrapper DIV above is otherwise just an invisible positioning
        box)
     2. .elementor-item's own active/hover/focus background
        (.elementor-item-active, .highlighted, :hover, :focus all paint an
        opaque bg via theme CSS)
     3. the theme's hover-indicator bar (.e--pointer-overline-left
        .elementor-item:before, full-height 2px, border-radius:0)
   overflow:hidden on the wrapper would clip all three in one shot, but
   that wrapper also contains the mega-menu CONTENT panel as a DOM
   descendant (position:absolute, deliberately rendered outside the
   sidebar's own narrow box) — clipping it hides that panel entirely
   (confirmed live: broke the whole flyout). So each layer gets its own
   matching radius instead, only on the first/last item where the curve
   actually is. */
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) > ul{border-top-left-radius:16px;border-bottom-left-radius:16px}
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) > ul > li:first-child .elementor-item{border-top-left-radius:16px}
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) > ul > li:last-child .elementor-item{border-bottom-left-radius:16px}

/* Layer 3 (the indicator bar) tried the same match-the-radius approach
   at first, but a matching radius on a box this thin (2px wide) doesn't
   nest reliably against the outer 16px curve at every zoom/DPI — it can
   still poke a sliver past the corner (caught live via screenshot).
   Inset the bar from the top/bottom instead so it's structurally
   impossible for it to ever reach the curved zone, on any item, radius-
   matching precision aside. !important is needed: this selector ties the
   theme's own unscoped rule on specificity (4 classes each), so without
   it whichever loads later in the cascade wins — confirmed live, "top"
   applied but "bottom"/"height" silently didn't. */
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) .elementor-item:before{top:6px !important;bottom:6px !important;height:auto !important}

/* The content panel that opens next to the sidebar above is a THEME-
   GENERATED wrapper div (.nav-sublist-dropdown.etheme-elementor-nav-menu--
   dropdown-mega) that sits OUTSIDE the Elementor container/widget this
   plugin's own HTML content renders inside — setting border_radius on that
   container's own Elementor settings never touched this outer div at all,
   confirmed live via getComputedStyle(). The uniform 16px it was showing
   instead leaks in from a DIFFERENT mega-menu post entirely (Blog Mega
   Menu, post 2630) — Elementor generates that post's own CSS using the
   generic selector `.item-design-mega-menu .nav-sublist-dropdown`, which
   isn't scoped to just that post and so matches this element too. Beat it
   here with a selector 3 classes deep (vs. their 2) scoped to just this
   widget instance: flat top-left/bottom-left (the seam against the
   sidebar), rounded only on the free right corners. */
.elementor-element-0a81739 .nav-sublist-dropdown.etheme-elementor-nav-menu--dropdown-mega{border-radius:0 16px 16px 0}

/* Category icons — the widget has no native per-item icon field, so
   department-icons.js injects these as inline SVG matched by each item's
   fixed repeater id. Muted by default (--e-global-color-text at reduced
   opacity, since there's no separate "muted" global color token), full
   primary on hover/active — matches the originally approved mockup. */
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) .mca-dept-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:10px;color:var(--e-global-color-text);opacity:.45;flex:none}
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) .elementor-item:hover .mca-dept-ic,
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) li.active .mca-dept-ic{color:var(--e-global-color-primary);opacity:1}
.elementor-element-0a81739 .nav-sublist-dropdown:not(.etheme-elementor-nav-menu--dropdown-mega) .mca-dept-ic svg{display:block}

/* Header row next to Departments Menu: "Blog" and "All categories" bumped
   to match the weight of the Help Center/Consulting/FAQ links added
   alongside them (department-icons.js's html widget, weight 600) — was
   400, read visibly lighter than its new neighbors. */
.elementor-element-9c5490e .elementor-item,
.elementor-element-0a81739 .etheme-elementor-nav-menu-item-parent{font-weight:600}

/* Icons for Blog (injected by department-icons.js) and Help Center/
   Consulting/FAQ (baked into their own html widget's markup) — same
   14px size and muted color as "All categories"' native et-icon glyph. */
.mca-header-ic,
.mca-header-utility-links a svg{display:inline-flex;margin-right:6px;color:rgb(34,34,34);vertical-align:-2px;flex:none}

/* ── RESPONSIVE ── */
@media(max-width:767px){
  .mca-page-hero h1{font-size:26px}
  .mca-page-hero p{font-size:15px}
  .mca-page-cta{padding:32px 20px}
  .mca-page-cta h2{font-size:20px}
  .mca-service-card{min-width:100%}
  .mca-step{min-width:100%}
  .mca-legal-page{padding:32px 16px 60px}
}