/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.logo-padding-20 {
	padding: 20px 0;
}

/* ----------------------------------------------------------------
	BandWix Brand System (Overrides Only)
-----------------------------------------------------------------*/

/* Typography: Inter Display (global) */
@import url('https://fonts.googleapis.com/css2?family=Inter+Display:wght@300;400;500;600;700;800;900&display=swap');

:root {
	/* BandWix palette */
	--bw-orange: #FFAA39; /* Signal Orange - Secondary accent only */
	--bw-blue: #1A79FF;   /* Core Blue - Primary brand color */
	--bw-gray: #18191C;   /* Framework Gray */
	--bw-black: #0B0C0E;  /* System Black */
	--bw-white: #FFFFFF;  /* Sync White */
	--bw-grid: #CECECE;   /* Grid Light */

	/* Map theme tokens - Core Blue is now primary (override demo CSS) */
	--cnvs-themecolor: var(--bw-blue) !important;
	--cnvs-themecolor-rgb: 26, 121, 255 !important;
	--bs-link-color: var(--bw-blue);
	--bs-link-color-rgb: 26, 121, 255;
}

html, body,
button, input, select, textarea {
	font-family: 'Inter Display', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Neutral system defaults */
body {
	color: var(--bw-black);
	background: var(--bw-white);
}

a {
	color: var(--bw-blue);
}
a:hover {
	color: color-mix(in srgb, var(--bw-blue) 85%, var(--bw-black));
}

/* ----------------------------------------------------------------
	Global Color Replacements (Do not edit original CSS)
	Old -> New:
	#ffe036 -> #FFAA39
	#212529 -> #0B0C0E
	#343a40 -> #CECECE
	#000000 -> #0B0C0E
-----------------------------------------------------------------*/

/* Core utility classes - Core Blue is primary */
.color,
.text-warning,
.text-primary,
.bg-color,
.border-color,
.h-bg-color:hover,
.h-text-color:hover {
	color: var(--bw-blue) !important;
	border-color: var(--bw-blue) !important;
}

.bg-color,
.button.bg-color,
.button.button-color,
.btn.bg-color,
.btn.btn-primary,
.btn.btn-action.bg-color {
	background-color: var(--bw-blue) !important;
	border-color: var(--bw-blue) !important;
}

/* Signal Orange for secondary emphasis only */
.h-bg-color:hover:not(.bg-color):not(.button):not(.btn),
.social-icon.h-bg-color:hover {
	background-color: var(--bw-orange) !important;
}

/* Secondary hover states with orange for contrast */
.button.button-light.button-border.border-color.h-bg-color:hover,
.btn.button-light.button-border.border-color.h-bg-color:hover {
	background-color: var(--bw-orange) !important;
	border-color: var(--bw-orange) !important;
}

.text-dark,
.h-text-dark:hover,
.btn-link,
.button-link {
	color: var(--bw-black) !important;
}

.bg-dark,
.button.button-dark,
.btn.btn-dark {
	background-color: var(--bw-black) !important;
	border-color: var(--bw-black) !important;
}

.text-muted,
.op-06,
.op-07,
.op-08 {
	color: color-mix(in srgb, var(--bw-black) 55%, var(--bw-white)) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
	border-color: var(--bw-grid) !important;
}

/* Replace hardcoded yellow/orange gradients with Core Blue */
[style*="rgba(255, 224, 54"],
[style*="rgba(255,224,54"],
[style*="rgba(255, 170, 57"] {
	background: linear-gradient(to bottom left, rgba(26, 121, 255, .15), rgba(206, 206, 206, .3) 70%) !important;
}

/* Override specific inline gradient styles in HTML */
.container.p-4.p-sm-5.p-md-6.rounded-6[style*="rgba(255, 224, 54"],
.card.border-0.rounded-6[style*="rgba(255, 224, 54"],
.px-lg-6.p-5.rounded[style*="rgba(255, 224, 54"] {
	background: linear-gradient(to bottom left, rgba(26, 121, 255, .12), rgba(206, 206, 206, .25) 70%) !important;
}

/* Links and interactive focus */
.form-control:focus,
.form-select:focus,
.btn:focus,
.button:focus {
	box-shadow: 0 0 0 .25rem rgba(26, 121, 255, .20) !important;
	border-color: rgba(26, 121, 255, .55) !important;
}

/* Improve contrast for dark sections that rely on theme color */
.dark a:not(.button):not(.btn) {
	color: color-mix(in srgb, var(--bw-blue) 75%, var(--bw-white)) !important;
}

/* Logo size constraint */
#logo img {
	max-height: 70px !important;
	width: auto !important;
	height: auto !important;
	padding: 10px 0 !important;
}

/* Mobile logo max height */
@media (max-width: 767px) {
	#logo img {
		max-height: 50px !important;
	}
}

/* ----------------------------------------------------------------
	SVG Color Overrides (Core Blue for all decorative SVGs)
-----------------------------------------------------------------*/

/* Update SVG stroke colors to Core Blue */
.circle-draw svg path[stroke="var(--cnvs-themecolor)"],
.circle-draw svg path[stroke*="themecolor"] {
	stroke: var(--bw-blue) !important;
}

svg path[stroke="var(--cnvs-themecolor)"],
svg[stroke="var(--cnvs-themecolor)"] {
	stroke: var(--bw-blue) !important;
}

/* Override SVG fills in background images where possible */
.hero-bg svg,
.hero-bg svg path,
.hero-bg svg g {
	fill: var(--bw-blue) !important;
}

/* Technology section SVG icons */
#technology svg.color,
#technology svg[class*="color"] {
	color: var(--bw-blue) !important;
	stroke: var(--bw-blue) !important;
}

/* ----------------------------------------------------------------
	CSS Background Patterns (Inspired by Brand SVGs)
-----------------------------------------------------------------*/

/* Hero section pattern */
#home .section-1,
#home .section-2 {
	position: relative;
}

#home .section-1::before,
#home .section-2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.03;
	background-image: 
		repeating-linear-gradient(0deg, transparent, transparent 2px, var(--bw-blue) 2px, var(--bw-blue) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 2px, var(--bw-blue) 2px, var(--bw-blue) 4px);
	background-size: 40px 40px;
	pointer-events: none;
	z-index: 0;
}

#home .section-1 > *,
#home .section-2 > * {
	position: relative;
	z-index: 1;
}

/* Technology section pattern */
#technology .section {
	position: relative;
	overflow: hidden;
}

#technology .section::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	opacity: 0.04;
	background-image: 
		radial-gradient(circle at 2px 2px, var(--bw-blue) 1px, transparent 0),
		radial-gradient(circle at 18px 18px, var(--bw-blue) 1px, transparent 0);
	background-size: 40px 40px, 40px 40px;
	background-position: 0 0, 20px 20px;
	pointer-events: none;
	z-index: 0;
}

#technology .section > * {
	position: relative;
	z-index: 1;
}

/* Pricing section pattern */
#pricing .section {
	position: relative;
}

#pricing .section::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.02;
	background-image: 
		linear-gradient(45deg, var(--bw-blue) 25%, transparent 25%),
		linear-gradient(-45deg, var(--bw-blue) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--bw-blue) 75%),
		linear-gradient(-45deg, transparent 75%, var(--bw-blue) 75%);
	background-size: 30px 30px;
	background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
	pointer-events: none;
	z-index: 0;
}

#pricing .section > * {
	position: relative;
	z-index: 1;
}

/* Contact/CTA section pattern */
#contact .section {
	position: relative;
}

#contact .section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.025;
	background-image: 
		repeating-linear-gradient(45deg, transparent, transparent 10px, var(--bw-blue) 10px, var(--bw-blue) 11px),
		repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--bw-blue) 10px, var(--bw-blue) 11px);
	pointer-events: none;
	z-index: 0;
}

#contact .section > * {
	position: relative;
	z-index: 1;
}

/* Reduce pattern opacity on mobile for performance */
@media (max-width: 767px) {
	#home .section-1::before,
	#home .section-2::before,
	#technology .section::before,
	#pricing .section::after,
	#contact .section::before {
		opacity: 0.015;
	}
}

/* ----------------------------------------------------------------
	Additional Color System Refinements
-----------------------------------------------------------------*/

/* Ensure footer border uses Core Blue */
#footer {
	border-top-color: var(--bw-blue) !important;
}

/* Icon colors in process section */
.section-showcase-sticky .color,
.section-showcase-sticky i.color {
	color: var(--bw-blue) !important;
}

/* Pricing card backgrounds - ensure blue dominance */
#pricing .card.bg-color {
	background-color: var(--bw-blue) !important;
}

/* Social icons - use blue for primary, orange for hover emphasis */
.social-icon.border-color {
	border-color: var(--bw-blue) !important;
}

.social-icon.h-bg-color:hover {
	background-color: var(--bw-orange) !important;
	border-color: var(--bw-orange) !important;
}

/* WhatsApp button - keep brand color but ensure consistency */
.bg-whatsapp {
	background-color: #25D366 !important;
}

.bg-whatsapp:hover {
	background-color: #20BA5A !important;
}

/* Toggle/FAQ section - subtle blue accents */
.toggle-icon i.toggle-open {
	color: var(--bw-blue) !important;
}

/* Process section buttons - blue primary with orange hover for contrast */
.section-showcase-sticky .button.button-light.button-border.border-color {
	border-color: var(--bw-blue) !important;
	color: var(--bw-blue) !important;
}

.section-showcase-sticky .button.button-light.button-border.h-bg-color:hover {
	background-color: var(--bw-orange) !important;
	border-color: var(--bw-orange) !important;
	color: var(--bw-black) !important;
}

/* Additional overrides for edge cases */

/* Checkmark icons in pricing cards */
/* #pricing .bi-check-circle-fill {
	color: var(--bw-blue) !important;
} */

/* Border accent on quote/testimonial sections */
.border-start.border-width-4.border-color {
	border-color: var(--bw-blue) !important;
}

/* Hero background SVG override */
.hero-bg[src*="hero-bg.svg"] {
	filter: hue-rotate(200deg) saturate(1.2);
}

/* Ensure all circle-draw SVG strokes use Core Blue */
.circle-draw svg path {
	stroke: var(--bw-blue) !important;
}

/* Override any remaining orange/yellow in icon fills */
i.color,
.icon-stacked.color {
	color: var(--bw-blue) !important;
}

/* Card hover states - subtle blue glow */
.card:hover {
	box-shadow: 0 0.5rem 1rem rgba(26, 121, 255, 0.1) !important;
}

/* Ensure pricing cards with bg-color use blue */
#pricing .card[class*="bg-color"] {
	background-color: var(--bw-blue) !important;
}

/* Center scroll-to-top button on mobile and ensure visibility */
@media (max-width: 991px) {
	/* Ensure the column is visible and takes full width on mobile */
	#footer .col-md-2:last-child {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-top: 2rem;
	}
	
	/* Center the widget content */
	#footer .col-md-2:last-child .widget {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		justify-content: center !important;
	}
	
	/* Ensure button is visible and centered */
	#footer #gotoTop {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		position: relative !important;
		width: 46px !important;
		height: 46px !important;
		line-height: 44px !important;
		text-align: center !important;
		cursor: pointer !important;
		z-index: 10 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}
}