/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * ====================================================================
 *  INBOXKART – DYNAMIC COLOR SYSTEM
 *  Architecture:
 *
 *  LAYER 1  (:root)               – Hardcoded InboxKart hex fallbacks.
 *                                   Used when Elementor CSS is absent.
 *
 *  LAYER 2  (body, .elementor-kit-31) – Bridges every --ik-* token to
 *                                   var(--e-global-color-*), with the
 *                                   Layer 1 value as the CSS fallback.
 *                                   Changing ANY color in Elementor
 *                                   Site Settings → Global Colors now
 *                                   cascades through every rule below.
 *
 *  RULES    (section 3+)          – Use only var(--ik-*). Zero hardcoded
 *                                   hex values. Fully dynamic.
 *
 *  Elementor Global Color ↔ --ik-* mapping:
 *    --e-global-color-primary       → --ik-navy       (#0C1F40)
 *    --e-global-color-secondary     → --ik-muted-text (#64748B)
 *    --e-global-color-text          → --ik-body-text  (#334155)
 *    --e-global-color-accent        → --ik-blue       (#0A63F4)
 *    --e-global-color-ik_bright_blue → --ik-bright-blue (#2F80FF)
 *    --e-global-color-ik_light_blue  → --ik-light-blue  (#EAF3FF)
 *    --e-global-color-ik_ultra_light → --ik-ultra-light (#F5F9FF)
 *    --e-global-color-ik_border      → --ik-border      (#DCE6F2)
 *    --e-global-color-ik_white       → --ik-white        (#FFFFFF)
 *    --e-global-color-ik_gradient_dark → gradient start (#071A3A)
 *    --e-global-color-ik_gradient_mid  → gradient mid   (#00C9F9)
 *    --e-global-color-ik_gradient_end  → gradient end   (#1268E8)
 * ====================================================================
 */


/* ====================================================================
   LAYER 1: Static fallback tokens on :root
   (Resolved for any element – even before Elementor's kit class loads)
   ==================================================================== */
:root {
  /* Core palette – hardcoded InboxKart values as fallbacks */
  --ik-blue:          #0A63F4;
  --ik-navy:          #0C1F40;
  --ik-bright-blue:   #2F80FF;
  --ik-light-blue:    #EAF3FF;
  --ik-ultra-light:   #F5F9FF;
  --ik-body-text:     #334155;
  --ik-muted-text:    #64748B;
  --ik-border:        #DCE6F2;
  --ik-white:         #FFFFFF;
  --ik-primary-dark:  #0852CE; /* darkened accent for pressed state */

  /* Static gradient fallbacks */
  --ik-gradient-btn:  linear-gradient(90deg, #0A63F4 0%, #2F80FF 100%);
  --ik-gradient-hero: linear-gradient(135deg, #0C1F40 0%, #1268E8 100%);
  --ik-gradient-logo: linear-gradient(135deg, #0A63F4 0%, #00C9F9 50%, #057EF5 100%);
  --ik-gradient-2:    linear-gradient(135deg, #071A3A 0%, #1268E8 100%);

  /* Shadows – use rgba derived from accent; kept static for broad support */
  --ik-shadow-sm:    0 1px 3px rgba(10, 99, 244, 0.08),
                     0 1px 2px rgba(10, 99, 244, 0.04);
  --ik-shadow-md:    0 4px 16px rgba(10, 99, 244, 0.12),
                     0 2px 6px  rgba(10, 99, 244, 0.06);
  --ik-shadow-lg:    0 8px 32px rgba(10, 99, 244, 0.16),
                     0 4px 12px rgba(10, 99, 244, 0.08);
  --ik-shadow-btn:   0 4px 14px rgba(10, 99, 244, 0.30);
  --ik-shadow-card:  0 2px 12px rgba(12, 31, 64, 0.08);
  --ik-shadow-focus: 0 0 0 3px rgba(10, 99, 244, 0.25);

  /* Border-radius tokens */
  --ik-radius-sm:    4px;
  --ik-radius-md:    8px;
  --ik-radius-lg:    12px;
  --ik-radius-xl:    16px;
  --ik-radius-pill:  999px;

  /* Transition */
  --ik-transition:   all 0.25s ease;
}


/* ====================================================================
   LAYER 2: Dynamic bridge – every --ik-* token resolves to the live
   Elementor Global Color variable, with the Layer 1 value as fallback.
   Scope: body / .elementor-kit-31 (where Elementor sets its own vars).
   Any change in Elementor → Site Settings → Global Colors cascades
   through every CSS rule in this file automatically.
   ==================================================================== */
body,
.elementor-kit-31 {

  /* ── Core color tokens – all dynamic ──────────────────────────────── */
  --ik-blue:         var(--e-global-color-accent,            #0A63F4);
  --ik-navy:         var(--e-global-color-primary,           #0C1F40);
  --ik-bright-blue:  var(--e-global-color-ik_bright_blue,    #2F80FF);
  --ik-light-blue:   var(--e-global-color-ik_light_blue,     #EAF3FF);
  --ik-ultra-light:  var(--e-global-color-ik_ultra_light,    #F5F9FF);
  --ik-body-text:    var(--e-global-color-text,              #334155);
  --ik-muted-text:   var(--e-global-color-secondary,         #64748B);
  --ik-border:       var(--e-global-color-ik_border,         #DCE6F2);
  --ik-white:        var(--e-global-color-ik_white,          #FFFFFF);

  /* ── Gradient tokens – composed from dynamic color vars ───────────── */
  --ik-gradient-btn: linear-gradient(
                       90deg,
                       var(--e-global-color-accent,            #0A63F4) 0%,
                       var(--e-global-color-ik_bright_blue,    #2F80FF) 100%
                     );

  --ik-gradient-hero: linear-gradient(
                        135deg,
                        var(--e-global-color-primary,          #0C1F40) 0%,
                        var(--e-global-color-ik_gradient_end,  #1268E8) 100%
                      );

  --ik-gradient-logo: linear-gradient(
                        135deg,
                        var(--e-global-color-accent,           #0A63F4) 0%,
                        var(--e-global-color-ik_gradient_mid,  #00C9F9) 50%,
                        var(--e-global-color-ik_gradient_end,  #1268E8) 100%
                      );

  --ik-gradient-2: linear-gradient(
                     135deg,
                     var(--e-global-color-ik_gradient_dark, #071A3A) 0%,
                     var(--e-global-color-ik_gradient_end,  #1268E8) 100%
                   );
}


/* ====================================================================
   3. BASE BODY AND TYPOGRAPHY
   All rules use var(--ik-*) – zero hardcoded colors.
   ==================================================================== */
body {
  background-color: var(--ik-white);
  color: var(--ik-body-text);
}

a {
  color: var(--ik-blue);
  text-decoration: none;
  transition: var(--ik-transition);
}
a:hover,
a:focus {
  color: var(--ik-bright-blue);
}
a:active {
  color: var(--ik-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ik-navy);
}

p {
  color: var(--ik-body-text);
}

hr {
  border-color: var(--ik-border);
}

blockquote {
  border-left: 3px solid var(--ik-blue);
  color: var(--ik-muted-text);
}

::selection {
  background-color: var(--ik-light-blue);
  color: var(--ik-navy);
}

figcaption {
  color: var(--ik-muted-text);
}

pre,
code,
kbd,
samp {
  background-color: var(--ik-ultra-light);
  border: 1px solid var(--ik-border);
  border-radius: var(--ik-radius-sm);
  color: var(--ik-navy);
}


/* ====================================================================
   4. SITE HEADER
   ==================================================================== */
.site-header {
  background-color: var(--ik-white);
  border-bottom: 1px solid var(--ik-border);
}

/* Sticky / glass header */
.site-header.sticky-applied,
.site-header.sticky-active,
.site-header--sticky {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--ik-shadow-sm);
}

/* Inverted / dark header */
.site-header.header-dark {
  background-color: var(--ik-navy);
  border-bottom-color: var(--ik-border);
}

.site-header .site-title,
.site-header .site-title a {
  color: var(--ik-navy);
}

.site-header .site-description {
  color: var(--ik-muted-text);
}


/* ====================================================================
   5. NAVIGATION
   ==================================================================== */

/* Top-level links */
.site-navigation ul.menu li a {
  color: var(--ik-body-text);
  transition: var(--ik-transition);
}
.site-navigation ul.menu li a:hover,
.site-navigation ul.menu li a:focus,
.site-navigation ul.menu li.current-menu-item > a,
.site-navigation ul.menu li.current-menu-ancestor > a,
.site-navigation ul.menu li.current-page-item > a {
  color: var(--ik-blue);
}

/* Dropdown container */
.site-navigation ul.menu li ul {
  background-color: var(--ik-white);
  border: 1px solid var(--ik-border);
  box-shadow: var(--ik-shadow-md);
  border-radius: var(--ik-radius-md);
}
.site-navigation ul.menu li ul li {
  border-bottom-color: var(--ik-border);
}
.site-navigation ul.menu li ul a {
  color: var(--ik-body-text);
}
.site-navigation ul.menu li ul a:hover,
.site-navigation ul.menu li ul a:focus {
  color: var(--ik-blue);
  background-color: var(--ik-ultra-light);
}

/* Chevron arrow */
.site-navigation ul.menu li.menu-item-has-children::after {
  color: var(--ik-muted-text);
}

/* Hamburger toggle */
.site-navigation-toggle-holder .site-navigation-toggle {
  background-color: var(--ik-ultra-light);
  color: var(--ik-navy);
  border-color: var(--ik-border);
}
.site-navigation-toggle-holder .site-navigation-toggle:hover {
  background-color: var(--ik-light-blue);
  color: var(--ik-blue);
}

/* Mobile dropdown */
.site-navigation-dropdown ul.menu {
  background-color: var(--ik-white);
  border: 1px solid var(--ik-border);
}
.site-navigation-dropdown ul.menu li a {
  background-color: var(--ik-white);
  color: var(--ik-body-text);
  box-shadow: inset 0 -1px 0 var(--ik-border);
}
.site-navigation-dropdown ul.menu li a:hover,
.site-navigation-dropdown ul.menu li a:focus {
  background-color: var(--ik-ultra-light);
  color: var(--ik-blue);
}
.site-navigation-dropdown ul.menu li.current-menu-item a {
  background-color: var(--ik-blue);
  color: var(--ik-white);
}

/* Footer nav dropdown */
footer .site-navigation ul.menu li ul {
  background-color: var(--ik-navy);
}


/* ====================================================================
   6. SITE FOOTER
   ==================================================================== */
.site-footer {
  background-color: var(--ik-navy);
  color: var(--ik-muted-text);
  border-top: 1px solid var(--ik-border);
}

.site-footer .site-title,
.site-footer .site-title a {
  color: var(--ik-white);
}
.site-footer .site-description {
  color: var(--ik-muted-text);
}
.site-footer a {
  color: var(--ik-border);
}
.site-footer a:hover,
.site-footer a:focus {
  color: var(--ik-bright-blue);
}
.site-footer .footer-inner .copyright p {
  color: var(--ik-muted-text);
}
.site-footer .site-navigation ul.menu li a {
  color: var(--ik-border);
}
.site-footer .site-navigation ul.menu li a:hover {
  color: var(--ik-bright-blue);
}


/* ====================================================================
   7. BUTTONS AND CTAs
   ==================================================================== */

/* Primary / filled button */
button,
input[type="button"],
input[type="submit"],
.button,
.btn,
.wp-block-button__link,
.elementor-button,
.e-button-base {
  background-color: var(--ik-blue);
  background-image: var(--ik-gradient-btn);
  color: var(--ik-white) !important;
  border: none;
  border-radius: var(--ik-radius-pill);
  box-shadow: var(--ik-shadow-btn);
  transition: var(--ik-transition);
  cursor: pointer;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.elementor-button:focus,
.e-button-base:hover {
  background-color: var(--ik-bright-blue);
  background-image: none;
  box-shadow: var(--ik-shadow-lg);
  transform: translateY(-1px);
  color: var(--ik-white) !important;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
.button:active,
.btn:active,
.elementor-button:active {
  background-color: var(--ik-primary-dark);
  background-image: none;
  transform: translateY(0);
  box-shadow: var(--ik-shadow-sm);
}

/* Outline / secondary button */
.button-secondary,
.btn-outline,
.elementor-button.elementor-button-outline {
  background-color: transparent;
  background-image: none;
  color: var(--ik-blue) !important;
  border: 2px solid var(--ik-blue);
  box-shadow: none;
}
.button-secondary:hover,
.btn-outline:hover,
.elementor-button.elementor-button-outline:hover {
  background-color: var(--ik-blue);
  color: var(--ik-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--ik-shadow-btn);
}

/* Ghost / white button (on dark backgrounds) */
.button-ghost,
.btn-ghost {
  background-color: transparent;
  background-image: none;
  color: var(--ik-white) !important;
  border: 1.5px solid var(--ik-border);
  box-shadow: none;
}
.button-ghost:hover,
.btn-ghost:hover {
  background-color: var(--ik-light-blue);
  border-color: var(--ik-bright-blue);
  color: var(--ik-navy) !important;
  transform: translateY(-1px);
}

/* Accessibility focus ring */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--ik-blue);
  outline-offset: 3px;
  box-shadow: var(--ik-shadow-focus);
}


/* ====================================================================
   8. FORMS AND INPUTS
   ==================================================================== */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
select,
textarea {
  border: 1.5px solid var(--ik-border);
  border-radius: var(--ik-radius-md);
  color: var(--ik-body-text);
  background-color: var(--ik-white);
  transition: var(--ik-transition);
}

input[type="date"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
  border-color: var(--ik-bright-blue);
}

input[type="date"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: var(--ik-blue);
  outline: none;
  box-shadow: var(--ik-shadow-focus);
  background-color: var(--ik-ultra-light);
}

input::placeholder,
textarea::placeholder {
  color: var(--ik-muted-text);
  opacity: 0.7;
}

label {
  color: var(--ik-navy);
}


/* ====================================================================
   9. GLOBAL ACCESSIBILITY – FOCUS RINGS
   ==================================================================== */
[tabindex]:not([tabindex="-1"]):focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ik-blue);
  outline-offset: 2px;
  box-shadow: var(--ik-shadow-focus);
}

.screen-reader-text:focus {
  background-color: var(--ik-ultra-light);
  color: var(--ik-navy);
  box-shadow: var(--ik-shadow-md);
}


/* ====================================================================
   10. TABLES
   ==================================================================== */
table td,
table th {
  border-color: var(--ik-border);
}
table th {
  color: var(--ik-navy);
  background-color: var(--ik-light-blue);
}
table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
  background-color: var(--ik-ultra-light);
}
table tbody tr:hover > td,
table tbody tr:hover > th {
  background-color: var(--ik-light-blue);
}
table tbody + tbody {
  border-top-color: var(--ik-border);
}


/* ====================================================================
   11. COMMENTS
   ==================================================================== */
#comments .comment .comment-body,
#comments .pingback .comment-body {
  border-bottom-color: var(--ik-border);
}
#comments ol.comment-list .children::before {
  color: var(--ik-muted-text);
}
.comments-area a {
  color: var(--ik-blue);
}
.comments-area a:hover {
  color: var(--ik-bright-blue);
}


/* ====================================================================
   12. PAGINATION
   ==================================================================== */
.pagination a,
.page-numbers a,
.nav-links a {
  color: var(--ik-blue);
  border: 1.5px solid var(--ik-border);
  border-radius: var(--ik-radius-sm);
  background-color: var(--ik-white);
  transition: var(--ik-transition);
}
.pagination a:hover,
.page-numbers a:hover,
.nav-links a:hover {
  background-color: var(--ik-blue);
  border-color: var(--ik-blue);
  color: var(--ik-white);
}
.pagination .current,
.page-numbers .current,
.nav-links .page-numbers.current {
  background-color: var(--ik-blue);
  color: var(--ik-white);
  border-color: var(--ik-blue);
}


/* ====================================================================
   13. ELEMENTOR WIDGET OVERRIDES
   All colors reference --ik-* which in turn pull from Elementor globals.
   ==================================================================== */

/* ── Button Widget ─────────────────────────────────────────────────── */
.elementor-widget-button .elementor-button {
  background-color: var(--ik-blue);
  background-image: var(--ik-gradient-btn);
  color: var(--ik-white);
  box-shadow: var(--ik-shadow-btn);
  border-radius: var(--ik-radius-pill);
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus {
  background-color: var(--ik-bright-blue);
  background-image: none;
  color: var(--ik-white);
  box-shadow: var(--ik-shadow-lg);
  transform: translateY(-1px);
}

/* ── Text Editor ───────────────────────────────────────────────────── */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-text-editor {
  color: var(--ik-body-text);
}

/* ── Icon List ─────────────────────────────────────────────────────── */
.elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--ik-body-text);
}
.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: var(--ik-blue);
}
.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg {
  color: var(--ik-blue);
  fill: var(--ik-blue);
}

/* ── Image Box ─────────────────────────────────────────────────────── */
.elementor-widget-image-box .elementor-image-box-title {
  color: var(--ik-navy);
}
.elementor-widget-image-box .elementor-image-box-description {
  color: var(--ik-body-text);
}

/* ── Icon Box ──────────────────────────────────────────────────────── */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
  color: var(--ik-navy);
}
.elementor-widget-icon-box .elementor-icon-box-description {
  color: var(--ik-body-text);
}
.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon-box .elementor-icon svg {
  color: var(--ik-blue);
  fill: var(--ik-blue);
}

/* ── Icon Widget ───────────────────────────────────────────────────── */
.elementor-widget-icon .elementor-icon i,
.elementor-widget-icon .elementor-icon svg {
  color: var(--ik-blue);
  fill: var(--ik-blue);
}
.elementor-widget-icon .elementor-icon:hover i,
.elementor-widget-icon .elementor-icon:hover svg {
  color: var(--ik-bright-blue);
  fill: var(--ik-bright-blue);
}

/* ── Social Icons ──────────────────────────────────────────────────── */
.elementor-widget-social-icons .elementor-social-icon {
  background-color: var(--ik-blue);
  transition: var(--ik-transition);
}
.elementor-widget-social-icons .elementor-social-icon:hover {
  background-color: var(--ik-bright-blue);
  transform: translateY(-2px);
  box-shadow: var(--ik-shadow-btn);
}
.elementor-widget-social-icons .elementor-social-icon i,
.elementor-widget-social-icons .elementor-social-icon svg {
  color: var(--ik-white);
  fill: var(--ik-white);
}

/* ── Divider ───────────────────────────────────────────────────────── */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--ik-border);
}
.e-divider-base {
  background-color: var(--ik-border) !important;
}

/* ── Progress Bar ──────────────────────────────────────────────────── */
.elementor-widget-progress .elementor-progress-wrapper {
  background-color: var(--ik-light-blue);
}
.elementor-widget-progress .elementor-progress-wrapper .elementor-progress-bar {
  background-color: var(--ik-blue);
}

/* ── Counter ───────────────────────────────────────────────────────── */
.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-counter .elementor-counter-number {
  color: var(--ik-navy);
}

/* ── Accordion / Toggle ────────────────────────────────────────────── */
.elementor-widget-accordion .elementor-accordion-item,
.elementor-widget-toggle .elementor-toggle-item {
  border-color: var(--ik-border);
}
.elementor-widget-accordion .elementor-tab-title,
.elementor-widget-toggle .elementor-tab-title {
  color: var(--ik-navy);
  background-color: var(--ik-white);
}
.elementor-widget-accordion .elementor-tab-title.elementor-active,
.elementor-widget-toggle .elementor-tab-title.elementor-active,
.elementor-widget-accordion .elementor-tab-title:hover,
.elementor-widget-toggle .elementor-tab-title:hover {
  color: var(--ik-blue);
  background-color: var(--ik-ultra-light);
}
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-toggle .elementor-tab-content {
  color: var(--ik-body-text);
  border-top-color: var(--ik-border);
}

/* ── Tabs Widget ───────────────────────────────────────────────────── */
.elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title {
  color: var(--ik-muted-text);
  border-color: var(--ik-border);
  background-color: var(--ik-ultra-light);
}
.elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title.elementor-active,
.elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title:hover {
  color: var(--ik-blue);
  border-color: var(--ik-blue);
  background-color: var(--ik-light-blue);
}
.elementor-widget-tabs .elementor-tabs-content-wrapper {
  border-color: var(--ik-border);
  background-color: var(--ik-white);
}

/* ── New Elementor Tab Base (v3.x+) ───────────────────────────────── */
.elementor .e-tab-base {
  color: var(--ik-body-text);
  border-color: var(--ik-border);
  background-color: var(--ik-white);
}
.elementor .e-tab-base.e--selected,
.elementor .e-tab-base:focus {
  border-color: var(--ik-blue);
  color: var(--ik-blue);
  background-color: var(--ik-light-blue);
}
.elementor .e-tab-base:hover,
.elementor .e-tab-base:focus-visible {
  background-color: var(--ik-ultra-light);
  border-color: var(--ik-blue);
}

/* ── Testimonials ──────────────────────────────────────────────────── */
.elementor-widget-testimonial .elementor-testimonial-content {
  color: var(--ik-body-text);
}
.elementor-widget-testimonial .elementor-testimonial-name {
  color: var(--ik-navy);
}
.elementor-widget-testimonial .elementor-testimonial-job {
  color: var(--ik-muted-text);
}

/* ── Star Ratings / Reviews ────────────────────────────────────────── */
.elementor-widget-reviews .elementor-review-stars i,
.elementor-star-rating .elementor-star-full i {
  color: var(--ik-blue);
}

/* ── Alert Widget ──────────────────────────────────────────────────── */
.elementor-widget-alert .elementor-alert {
  border-color: var(--ik-blue);
  background-color: var(--ik-light-blue);
  color: var(--ik-navy);
}

/* ── Post / Shortcode links ────────────────────────────────────────── */
.elementor-widget-shortcode a,
.elementor-widget-wp-widget-recent-posts a,
.elementor-post__card a {
  color: var(--ik-blue);
}
.elementor-widget-shortcode a:hover,
.elementor-widget-wp-widget-recent-posts a:hover {
  color: var(--ik-bright-blue);
}

/* ── e-button-base (base-desktop.css layer) ────────────────────────── */
.elementor .e-button-base {
  background-color: var(--ik-blue);
  background-image: var(--ik-gradient-btn);
  color: var(--ik-white);
  border-radius: var(--ik-radius-pill);
  box-shadow: var(--ik-shadow-btn);
  border-width: 0;
}
.elementor .e-button-base:hover {
  background-image: none;
  background-color: var(--ik-bright-blue);
  box-shadow: var(--ik-shadow-lg);
}


/* ====================================================================
   14. ELEMENTOR FORM WIDGET
   ==================================================================== */
.elementor-widget-form .elementor-field-group input,
.elementor-widget-form .elementor-field-group select,
.elementor-widget-form .elementor-field-group textarea {
  border: 1.5px solid var(--ik-border);
  border-radius: var(--ik-radius-md);
  color: var(--ik-body-text);
  background-color: var(--ik-white);
}
.elementor-widget-form .elementor-field-group input:focus,
.elementor-widget-form .elementor-field-group select:focus,
.elementor-widget-form .elementor-field-group textarea:focus {
  border-color: var(--ik-blue);
  box-shadow: var(--ik-shadow-focus);
  background-color: var(--ik-ultra-light);
}
.elementor-widget-form .elementor-field-label {
  color: var(--ik-navy);
}
.elementor-widget-form .elementor-button[type="submit"] {
  background-color: var(--ik-blue) !important;
  background-image: var(--ik-gradient-btn) !important;
  color: var(--ik-white) !important;
  box-shadow: var(--ik-shadow-btn) !important;
}
.elementor-widget-form .elementor-button[type="submit"]:hover {
  background-color: var(--ik-bright-blue) !important;
  background-image: none !important;
  box-shadow: var(--ik-shadow-lg) !important;
}
.elementor-widget-form .elementor-message.elementor-message-success {
  color: #0D7A4E;
  background-color: #ECFDF5;
  border-color: #6EE7B7;
}
.elementor-widget-form .elementor-message.elementor-message-danger {
  color: #B91C1C;
  background-color: #FEF2F2;
  border-color: #FCA5A5;
}


/* ====================================================================
   15. ELEMENTOR POPUP / OVERLAY
   ==================================================================== */
.elementor-popup-modal .dialog-widget-content {
  background-color: var(--ik-white);
  box-shadow: var(--ik-shadow-lg);
  border-radius: var(--ik-radius-xl);
}
.elementor-popup-modal .dialog-close-button {
  color: var(--ik-muted-text);
}
.elementor-popup-modal .dialog-close-button:hover {
  color: var(--ik-navy);
}
.elementor-popup-modal-blackout {
  background-color: var(--ik-navy) !important;
  opacity: 0.6 !important;
}


/* ====================================================================
   16. KIT-SPECIFIC INLINE STYLE OVERRIDES
   Catches any elements that still carry old palette values as
   inline styles injected by Elementor per-element settings.
   ==================================================================== */

/* Old dark purple (#1E112E) backgrounds → navy */
[style*="background-color:#1E112E"],
[style*="background-color: #1E112E"] {
  background-color: var(--ik-navy) !important;
}
[style*="color:#1E112E"],
[style*="color: #1E112E"] {
  color: var(--ik-navy) !important;
}

/* Old orange (#FFA96C) → primary blue */
[style*="background-color:#FFA96C"],
[style*="background-color: #FFA96C"] {
  background-color: var(--ik-blue) !important;
}
[style*="color:#FFA96C"],
[style*="color: #FFA96C"] {
  color: var(--ik-blue) !important;
}

/* Old purple accent (#BE8CFF) → primary blue */
[style*="color:#BE8CFF"],
[style*="color: #BE8CFF"] {
  color: var(--ik-blue) !important;
}
[style*="background-color:#BE8CFF"],
[style*="background-color: #BE8CFF"] {
  background-color: var(--ik-blue) !important;
}

/* Old light purple (#E5D3FD) → light blue */
[style*="background-color:#E5D3FD"],
[style*="background-color: #E5D3FD"] {
  background-color: var(--ik-light-blue) !important;
}

/* Old near-black (#121212) → navy */
[style*="background-color:#121212"],
[style*="background-color: #121212"] {
  background-color: var(--ik-navy) !important;
}

/* Old off-white (#F9F9F9) → ultra-light blue */
.elementor-element[style*="background-color:#F9F9F9"],
.elementor-element[style*="background-color: #F9F9F9"],
[style*="background-color:#F9F9F9"],
[style*="background-color: #F9F9F9"] {
  background-color: var(--ik-ultra-light) !important;
}


/* ====================================================================
   17. WOOCOMMERCE
   ==================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--ik-blue) !important;
  color: var(--ik-white) !important;
  border-radius: var(--ik-radius-pill) !important;
  border: none !important;
  box-shadow: var(--ik-shadow-btn) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--ik-bright-blue) !important;
  color: var(--ik-white) !important;
}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  border-top-color: var(--ik-blue);
  background-color: var(--ik-light-blue);
  color: var(--ik-navy);
}
.woocommerce-error {
  background-color: var(--ik-light-blue);
  color: var(--ik-navy);
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--ik-blue);
  color: var(--ik-white);
}
.woocommerce .star-rating span::before {
  color: var(--ik-blue);
}
.woocommerce .price,
.woocommerce .amount {
  color: var(--ik-navy);
}
.woocommerce .onsale {
  background-color: var(--ik-blue);
  color: var(--ik-white);
}


/* ====================================================================
   18. POST / BLOG ARCHIVE
   ==================================================================== */
.page-content a,
.entry-content a,
.entry-summary a {
  color: var(--ik-blue);
}
.page-content a:hover,
.entry-content a:hover,
.entry-summary a:hover {
  color: var(--ik-bright-blue);
}
.post .entry-title,
.post .entry-title a {
  color: var(--ik-navy);
}
.post .entry-meta,
.post .entry-footer {
  color: var(--ik-muted-text);
}
.post .entry-meta a,
.post .entry-footer a {
  color: var(--ik-blue);
}
.sticky {
  border-left: 3px solid var(--ik-blue);
  padding-left: 1rem;
  background-color: var(--ik-ultra-light);
}
.page-header {
  background-color: var(--ik-ultra-light);
  border-bottom: 1px solid var(--ik-border);
}
.page-header .entry-title {
  color: var(--ik-navy);
}

/* Password-protected post */
.post-password-form [type="submit"] {
  background-color: var(--ik-blue);
  background-image: var(--ik-gradient-btn);
  color: var(--ik-white);
  border-color: var(--ik-blue);
  border-radius: var(--ik-radius-pill);
}
.post-password-form [type="submit"]:hover {
  background-color: var(--ik-bright-blue);
  background-image: none;
  border-color: var(--ik-bright-blue);
}


/* ====================================================================
   19. DECORATIVE GRADIENT UTILITIES
   ==================================================================== */
.hero-gradient,
.section-gradient,
.bg-gradient-brand {
  background: var(--ik-gradient-hero);
  color: var(--ik-white);
}
.hero-gradient *,
.section-gradient *,
.bg-gradient-brand * {
  color: inherit;
}

/* Gradient text utility */
.text-gradient {
  background: var(--ik-gradient-logo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ====================================================================
   20. SCROLLBAR
   ==================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--ik-ultra-light);
}
::-webkit-scrollbar-thumb {
  background: var(--ik-border);
  border-radius: var(--ik-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ik-muted-text);
}


/* ====================================================================
   21. RESPONSIVE OVERRIDES
   ==================================================================== */
@media (max-width: 767px) {
  .site-navigation-dropdown ul.menu li a {
    color: var(--ik-body-text);
    background-color: var(--ik-white);
  }
  .site-navigation-dropdown ul.menu li.current-menu-item a {
    background-color: var(--ik-blue);
    color: var(--ik-white);
  }
  .elementor-widget-button .elementor-button {
    min-width: 220px;
  }
}

@media (max-width: 576px) {
  .site-footer .footer-inner .copyright {
    color: var(--ik-muted-text);
  }
}