/* ============================================================================
 * CARI FINANCE COMPLETE COLOR SYSTEM
 * 
 * Deep Navy #102C43 — 45–55% (Primary: logos, headlines, buttons, important UI)
 * Muted Blue #5D7180 — 10–15% (Secondary: typography, lines, icons, graphics)
 * Warm Greige #9D9588 — 5–10% (Subtle accents, infoboxes)
 * Sand Beige #C9BBA5 — 10–15% (Large background areas, graphics)
 * Warm Ivory #FBFAF7 — 20–30% (Website backgrounds, large areas)
 * ============================================================================ */

/* GLOBAL COLOR PALETTE */
:root {
  /* Primary Colors */
  --color-primary: #102C43 !important;
  --color-secondary: #5D7180 !important;
  
  /* Accent Colors */
  --color-accent: #9D9588 !important;
  --color-accent-light: #C9BBA5 !important;
  
  /* Background Colors */
  --color-bg-light: #FBFAF7 !important;
  --color-bg-secondary: #C9BBA5 !important;
  
  /* Text Colors */
  --color-text: #102C43 !important;
  --color-text-secondary: #5D7180 !important;
  
  /* Bootstrap */
  --bs-primary: #102C43 !important;
  --bs-secondary: #5D7180 !important;
}

html, body {
  --color-primary: #102C43 !important;
  --color-secondary: #5D7180 !important;
  --color-accent: #9D9588 !important;
  --color-text: #102C43 !important;
  --bs-primary: #102C43 !important;
}

/* BOOTSTRAP COLOR OVERRIDE - Primary Actions (Navy) */
.btn-primary {
  background-color: #102C43 !important;
  border-color: #102C43 !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #0a1f2f !important;
  border-color: #0a1f2f !important;
}

.btn {
  background-color: #102C43 !important;
  border-color: #102C43 !important;
  color: #ffffff !important;
}

.btn:hover {
  background-color: #0a1f2f !important;
  border-color: #0a1f2f !important;
}

/* Secondary Button Variant (Muted Blue) */
.btn-secondary {
  background-color: #5D7180 !important;
  border-color: #5D7180 !important;
  color: #ffffff !important;
}

.btn-secondary:hover {
  background-color: #4a5968 !important;
  border-color: #4a5968 !important;
}

/* Ghost Button Variant (Light background with navy text) */
.btn-ghost,
.btn-outline {
  background-color: #FBFAF7 !important;
  border-color: #FBFAF7 !important;
  color: #102C43 !important;
}

.btn-ghost:hover,
.btn-outline:hover {
  background-color: #C9BBA5 !important;
  border-color: #C9BBA5 !important;
  color: #102C43 !important;
}

/* BUTTONS - All Variants */
.elementor-button,
button,
.button,
.wp-element-button,
.elementor-button.elementor-button-primary,
.elementor-button.elementor-size-md,
input[type="submit"],
input[type="button"],
a.btn,
.btn-ghost,
.btn-outline {
  background-color: #102C43 !important;
  border-color: #102C43 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.elementor-button:hover,
button:hover,
.button:hover,
.wp-element-button:hover,
.elementor-button.elementor-button-primary:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #0a1f2f !important;
  border-color: #0a1f2f !important;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6,
.elementor-heading,
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title {
  color: #102C43 !important;
}

/* LINKS & ACCENTS */
a {
  color: #102C43 !important;
  text-decoration: none;
}

a:hover,
a:visited:hover {
  color: #5D7180 !important;
  text-decoration: underline;
}

a:visited {
  color: #102C43 !important;
}

/* PRIMARY TEXT - Navy (#102C43) */
p, span, li, .elementor-text-editor {
  color: #102C43 !important;
}

strong, b, .elementor-text-editor strong {
  color: #102C43 !important;
}

/* SECONDARY TEXT - Muted Blue (#5D7180) */
.secondary-text,
.text-secondary,
.elementor-text-secondary,
.subtitle,
.subheading,
small {
  color: #5D7180 !important;
}

/* SUBTLE ACCENTS - Warm Greige (#9D9588) */
.accent,
.highlight,
.badge,
.tag,
.label {
  color: #9D9588 !important;
}

/* Override any teal/turquoise colors */
*[style*="0B7D77"],
*[style*="0b7d77"],
[style*="rgb(11, 125, 119)"] {
  color: #102C43 !important;
}

/* DIVIDERS & BORDERS */
.elementor-divider-separator,
.elementor-divider,
hr,
.divider {
  border-color: #5D7180 !important;
  border-top-color: #5D7180 !important;
}

/* BACKGROUND AREAS */
html,
body {
  background-color: #FBFAF7 !important;
  background-image: none !important;
}

main,
.elementor-section,
.elementor-section.has-bg-color,
.section-background,
.alternative-bg,
footer,
.site-footer,
.footer,
.ast-footer,
.elementor-widget,
.elementor-column,
.elementor-container,
.wp-block-group,
.content,
.post,
.page,
.card,
.widget {
  background-color: #FBFAF7 !important;
  background-image: none !important;
}

/* Override any inline white backgrounds and specific content elements */
*[style*="background-color: white"],
*[style*="background-color: #ffffff"],
*[style*="background-color: #fff"],
*[style*="background-color:#ffffff"],
*[style*="background-color:#fff"],
*[style*="background: white"],
*[style*="background: #ffffff"],
*[style*="background: #fff"],
*[style*="background:#ffffff"],
*[style*="background:#fff"],
*[style*="rgb(255"],
*[style*="rgb(255, 255, 255)"],
*[style*="rgba(255"],
.elementor-text-editor,
.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-widget-html,
.elementor-widget-container,
.elementor-inner-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-column > div,
.has-background {
  background-color: #FBFAF7 !important;
  background-image: none !important;
}

/* Force all columns to use uniform background */
.elementor-column,
.elementor-column-inner,
.elementor-column-wrap,
.elementor-inner-column,
div[data-elementor-type],
[data-elementor-type="column"] {
  background-color: #FBFAF7 !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override all divs and sections that might have background colors */
section,
.section,
article,
.elementor-section,
.elementor-widget {
  background-color: #FBFAF7 !important;
  background-image: none !important;
}

/* Last resort - override any element with white bg using filter */
*[style*="white"],
*[style*="#fff"],
*[style*="#ffffff"],
*[style*="rgb(255"] {
  background-color: #FBFAF7 !important !important;
  border: none !important;
  box-shadow: none !important;
}

/* Light background areas - Warm Ivory */
.light-background,
.content-area,
.card,
.box,
.site-content,
.ast-container,
.elementor-container,
.wp-block-group {
  background-color: #FBFAF7 !important;
  background-image: none !important;
}

/* Infobox / Accent boxes - Warm Greige background with Navy text */
.infobox,
.callout,
.alert,
.notice {
  background-color: #9D9588 !important;
  color: #ffffff !important;
}

/* ACCENT LINES & DECORATIONS */
.elementor-divider::before,
.elementor-divider::after {
  background-color: #102C43 !important;
}

/* TABS */
.elementor-tabs .elementor-tabs-heading {
  color: #102C43 !important;
}

.elementor-tabs .elementor-tabs-heading.elementor-active {
  color: #102C43 !important;
  border-bottom-color: #102C43 !important;
  background-color: transparent !important;
}

/* FORMS */
input:focus,
textarea:focus,
select:focus,
.elementor-field:focus {
  border-color: #102C43 !important;
  outline-color: #102C43 !important;
  box-shadow: 0 0 0 1px #102C43 !important;
}

input::placeholder,
textarea::placeholder {
  color: #5D7180 !important;
  opacity: 0.6;
}

/* LABELS */
label,
.elementor-form-label {
  color: #102C43 !important;
}

/* ICONS */
.elementor-icon,
.elementor-icon svg,
i.fas, i.far, i.fal {
  color: #102C43 !important;
}

/* SOCIAL ICONS */
.elementor-social-icon a {
  color: #102C43 !important;
}

.elementor-social-icon a:hover {
  color: #5D7180 !important;
}

/* PROGRESS BAR */
.elementor-progress-bar {
  background-color: #102C43 !important;
}

.elementor-progress-bar .elementor-progress-percentage {
  background-color: #102C43 !important;
}

/* ALERT BOX */
.elementor-alert {
  border-left-color: #102C43 !important;
}

.elementor-alert-title {
  color: #102C43 !important;
}

/* PRICING TABLE */
.elementor-pricing-table .elementor-price-currency {
  color: #102C43 !important;
}

.elementor-pricing-table .elementor-price {
  color: #102C43 !important;
}

.elementor-pricing-table .elementor-price-period {
  color: #5D7180 !important;
}

/* TESTIMONIALS & RATINGS */
.elementor-star-rating [data-icon]::before,
.elementor-star-rating .elementor-star {
  color: #102C43 !important;
}

/* CALL-TO-ACTION */
.elementor-cta__content-title {
  color: #102C43 !important;
}

/* COUNTER */
.elementor-counter-number-wrapper,
.elementor-counter-number {
  color: #102C43 !important;
}

/* FLIP BOX */
.elementor-flip-box__front-content h2,
.elementor-flip-box__back-content h2 {
  color: #102C43 !important;
}

/* BLOG */
.elementor-post-title,
.elementor-post-title a {
  color: #102C43 !important;
}

.elementor-post-title a:hover {
  color: #5D7180 !important;
}

/* IMAGE BOX */
.elementor-image-box-content .elementor-image-box-title {
  color: #102C43 !important;
}

/* FEATURE BOXES */
.elementor-feature-list-item-title {
  color: #102C43 !important;
}

/* ANIMATED HEADLINE */
.elementor-animated-headline .elementor-headline {
  color: #102C43 !important;
}

/* Ensure specificity for Elementor inline styles */
[style*="--e-global-color-primary"],
[style*="--e-accent"] {
  --e-global-color-primary: #102C43 !important;
  --e-accent: #102C43 !important;
}

/* Ensure all primary color references are navy */
.elementor-button.elementor-button-primary,
.elementor-button[data-color="primary"] {
  background-color: #102C43 !important;
}

.has-primary-color {
  color: #102C43 !important;
}

.has-primary-background-color {
  background-color: #102C43 !important;
}

/* ============================================================================
 * LANGUAGE BUTTON STYLING FIX - ALLOW JAVASCRIPT CONTROL
 * Ensure language buttons show proper active/inactive states
 * Base style with border to indicate button group
 * ============================================================================ */
.cari .cari-lang-btn,
button.cari-lang-btn,
button[class*="cari-lang"] {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  cursor: pointer;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.4;
  text-decoration: none;
  transition: all 150ms ease;
}

/* ============================================================================
 * GHOST/SECONDARY BUTTONS - HIGHEST PRIORITY OVERRIDE
 * Ensure .btn-ghost displays with light background and navy text
 * ============================================================================ */
.btn.btn-ghost {
  background-color: #FBFAF7 !important;
  border-color: #FBFAF7 !important;
  color: #102C43 !important;
}

.btn.btn-ghost:hover {
  background-color: #C9BBA5 !important;
  border-color: #C9BBA5 !important;
  color: #102C43 !important;
}

a.btn.btn-ghost,
a.btn-ghost {
  background-color: #FBFAF7 !important;
  border-color: #FBFAF7 !important;
  color: #102C43 !important;
}

a.btn.btn-ghost:hover,
a.btn-ghost:hover {
  background-color: #C9BBA5 !important;
  border-color: #C9BBA5 !important;
  color: #102C43 !important;
}

/* ============================================================================
 * FREE CONSULTATION BUTTON - VISIBILITY FIX
 * Ensure "Free consultation" button text is always visible
 * ============================================================================ */
a.btn.btn-primary,
a.btn-primary,
.btn.btn-primary {
  background-color: #102C43 !important;
  border-color: #102C43 !important;
  color: #ffffff !important;
  display: inline-block !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  line-height: 1.5 !important;
  min-height: auto !important;
  min-width: auto !important;
}

/* ============================================================================
 * BACKGROUND CONSISTENCY FIX
 * Ensure header/nav background is consistent across sections
 * ============================================================================ */
div[style*="color-surface"] {
  background-color: var(--color-bg) !important;
}

/* Header background - Warm Ivory to match design system */
.site-header,
.site-header-wrapper,
.site-header-inner,
.ast-site-header,
.ast-site-header-wrap,
.ast-main-header-wrap,
.header-main,
.site-branding,
header,
.top-header,
.top-header-inner,
.site-top-bar,
nav,
.elementor-location-header,
.site-header > * {
  background-color: #FBFAF7 !important;
  background-image: none !important;
}

/* Force all header elements */
.header-top,
.header-content,
.ast-header-elementor-wrapper,
div[role="banner"] {
  background-color: #FBFAF7 !important;
  background-image: none !important;
}

.cari .nav-item {
  background-color: transparent !important;
}

/* ============================================================================
 * COLOR SYSTEM SUMMARY
 * ============================================================================
 * Deep Navy #102C43 (45-55%):
 *   - Logo, Headlines, Buttons, Primary UI Elements, Dark Areas
 * 
 * Muted Blue #5D7180 (10-15%):
 *   - Secondary Typography, Lines, Icons, Dividers, Hover States
 * 
 * Warm Greige #9D9588 (5-10%):
 *   - Subtle Accents, Info Boxes, Callouts
 * 
 * Sand Beige #C9BBA5 (10-15%):
 *   - Large Background Areas, Graphics, Sections
 * 
 * Warm Ivory #FBFAF7 (20-30%):
 *   - Website Backgrounds, Large Areas, Main Content Areas
 * ============================================================================
 */