/*
Theme Name: BoltOS Theme
Theme URI: https://boltos.ai/
Author: M. Aimal (Front-End Developer)
Template: hello-elementor
Version: 1.0
Text Domain: boltos-theme
Description: A custom child theme built on Hello Elementor, crafted for BoltOS with optimized layout, design consistency, and modular styling.
*/

/* =====================================================
🟫 GLOBAL STYLES
===================================================== */
body {
	background-color: #f0eee5 !important;
}


/* =====================================================
🧱 HEADER STYLES
===================================================== */
.header {
	position: fixed !important;
	top: 100 !important;
	left: 0;
	right: 0;
	z-index: 999 !important;
	background-color: rgba(27, 26, 22, 0.9);
	transition: all 0.2s ease;
	height: 80px !important;
	will-change: transform, opacity;
	transition: height 0.3s ease !important;
}

/* Mega Menu - Fixing Navigation Shrink Issue */
.premium-nav-slide-down .elementor-widget-container {
	overflow: hidden !important;
	height: 0 !important;
}

.premium-nav-slide-down .elementor-widget-container.nav-loaded {
	height: 100% !important;
	overflow: visible !important;
}

/* Header hover logic for menu icons/text */
.bolt-2 {
	display: none;
}

.product-menu:hover .bolt-1 {
	display: none;
}

.product-menu:hover .bolt-2 {
	display: block;
}

.product-menu:hover p {
	color: #13120b !important;
}

.premium-mega-content-container {
	pointer-events: all !important;
}

/* Mobile menu adjustments */
.premium-mobile-menu-outer-container.premium-vertical-toggle-open {
	width: 100% !important;
}

.premium-mobile-menu-outer-container {
	height: 100vh !important;
	background-color: #13120b !important;
}

.premium-mobile-menu-container {
	padding: 15px !important;
}

.premium-ver-hamburger-menu .premium-mobile-menu-outer-container {
	background-color: #13120b !important;
}

#menu-header-primary-1 li a {
	margin-bottom: 10px !important;
}


/* =====================================================
🟠 HEADER CASE STUDIES - Hover Effects
===================================================== */
.header-case-box:hover .case-heading h5,
.header-case-box:hover .case-paragraph,
.header-case-box:hover .elementor-icon svg {
	color: #22333B !important;
	fill: #22333B !important;
}


/* =====================================================
📜 TYPOGRAPHY & FONT MAPPINGS
===================================================== */
.ourtech-title,
.partners-title,
.challenge-title,
.ourteam-name,
.bb-name {
	font-family: "Standford font", Sans-serif !important;
}

.ourtech-text,
.partners-desc,
.partners-slide .content,
.bolt-handle,
.bolt-title-line,
.bolt-title,
.challenge-text,
.ourteam-quote1,
.ourteam-position,
.ourteam-quote2,
.bb-quote,
.bb-meta {
	font-family: "Syne", Sans-serif !important;
}


/* =====================================================
🧩 COMPONENT STYLES
===================================================== */

/* Partners section layout */
.partners-swiper {
	width: 75% !important;
}

/* Gradient Button Variants */
.contained-gradient-button {
	background: linear-gradient(to right, #3d3929 10%, #817e71 50%, #5b5b5b 90%);
	background-size: 500%;
	color: #fff;
	border: none;
	padding: 12px 18px;
	border-radius: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	animation: contained-gradient-button-hover-out 500ms ease-out 1 forwards;
}

/* Black, White & Transparent Button Variants */
.black-button {
	background: #13120B;
	color: #E3E0D4;
	border: none;
	padding: 12px 18px;
	border-radius: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.white-button {
	background: #E3E0D4;
	color: #13120B !important;
	border: none;
	padding: 8px 16px;
	border-radius: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.transparent-button {
	background: transparent;
	color: #13120B;
	border: 1px solid #13120B;
	padding: 12px 18px;
	border-radius: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.transparent-button:hover {
	background: #5E503F;
	color: #E3E0D4 !important;
}

.contained-gradient-button:hover {
	animation: contained-gradient-button-hover-in 500ms ease-in 1 forwards;
}

.contained-gradient-button:active {
	animation: contained-gradient-button-hover-out 500ms ease-out 1 forwards;
}

/* Button Animation Keyframes */
@keyframes contained-gradient-button-hover-in {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

@keyframes contained-gradient-button-hover-out {
	from {
		background-position: 100% 50%;
	}

	to {
		background-position: 0% 50%;
	}
}


/* =====================================================
🎨 OUTLINED GRADIENT BUTTON
===================================================== */
.outlined-gradient-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid #d1d5db;
	border-radius: 5px;
	color: #d1d5db;
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1rem;
	padding: 0 0.25rem;
	background: linear-gradient(90deg, transparent 20%, #dad4bd 50%, #e3e0d4 80%);
	background-size: 400%;
	animation: outlined-gradient-button-hover-out 0.5s ease-out 1 forwards;
}

.outlined-gradient-button:hover {
	border-color: #111827;
	animation: outlined-gradient-button-hover-in 0.5s ease-out 1 forwards;
}

@keyframes outlined-gradient-button-hover-in {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

@keyframes outlined-gradient-button-hover-out {
	from {
		background-position: 100% 50%;
	}

	to {
		background-position: 0% 50%;
	}
}


/* =====================================================
🎬 VIDEO COMPONENT
===================================================== */
.video-wrapper {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.video-controls {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 6px;
	z-index: 10;
}

.video-controls button {
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	padding: 6px;
	border-radius: 50%;
	cursor: pointer;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-controls button svg{
fill: #f0f0f0;
}

/* =====================================================
🧍 ABOUT US PAGE
===================================================== */
.our-team-box {
	max-height: 460px;
	overflow: hidden !important;
	transition: 0.7s all ease-in-out !important;
}

.our-team-box:hover {
	max-height: 1000px;
	transition: 0.7s all ease-in-out !important;
}


/* =====================================================
📰 BLOG PAGE
===================================================== */
.elementor-widget-theme-post-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* =====================================================
🧾 SINGLE BLOG PAGE
===================================================== */
.category-target span {
	background-color: #3D3929;
	padding: 5px 10px;
	border-radius: 50px;
	font-size: 12px;
	color: #f0eee5;
	font-weight: 300 !important;
}

.elementor-author-box__name {
	font-family: "Syne", Sans-serif !important;
	font-size: 20px !important;
}

.uwp_widget_author_box {
	display: none !important;
}


/* =====================================================
🎨 BRAND PAGE COLOR SYSTEM
===================================================== */
.color-palette {
	font-family: "Syne", Sans-serif !important;
	padding: 20px;
	text-align: center;
}

.color-box {
	border-radius: 10px;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	color: #fff;
	font-weight: 500;
}


/* =====================================================
💬 CHATBOX COMPONENT
===================================================== */
/* (kept full for clarity – your original code is solid, just organized) */
.main-message-container {
	display: flex;
	flex-direction: column;
	/* height: 100vh; */
	background: #5E503F;
	width: 100%;
	position: relative;
	border-radius: 10px;
}

/* Header Navigation */
.main-chat-header {
	background: #5E503F;
	padding: 12px;
	display: flex;
	gap: 5px;
	border-bottom: 1px solid #818181;
	flex-shrink: 0;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.main-chat-header .nav-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 6px;
	color: #F0F0F1;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	font-family: 'Inter';
}

.main-chat-header .nav-item.active {
	background: #1A1910;
	color: #F0F0F1;
}

.main-chat-header .nav-item:hover {
	background: #1A1910;
}

.main-chat-header .nav-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Chat Section */
.chat-section {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	position: relative;
}

.chat-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(94, 80, 63, 0.5);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(6px);
	padding: 30px 24px;
	z-index: 10;
	width: 100%;
}

/* Messages Container */
.messages-container {
	flex: 1;
	overflow-y: auto;
	padding: 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 80px;
}

.messages-container::-webkit-scrollbar {
	width: 5px;
	display: none;
}

.messages-container::-webkit-scrollbar-track {
	background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
	background: #7c3aed;
	border-radius: 4px;
}

/* Message Styles */
.message {
	display: flex;
	gap: 20px 12px;
	align-items: center;
}

.message-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	font-size: 18px;
}

.message-avatar img {
	width: 100%;
}

.message-content {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	padding-top: 2px;
}

.message-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.message-name {
	color: rgba(240, 240, 241, 0.50);
	font-weight: 600;
	font-size: 14px;
	font-family: "Inter";
}

.message.highlighted .message-name {
	color: #F0F0F1;
}

.message-text {
	color: #F0F0F1;
	font-size: 14px;
	line-height: 1.4;
	font-family: "Inter";
}

.message-time {
	color: #bebebe;
	font-size: 12px;
	margin-left: auto;
	font-family: 'Inter';
}

.message-badge {
	width: 16px;
	height: 16px;
	background: #3b82f6;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 10px;
}

.p-5 {
	padding-left: 10px;
	padding-right: 10px;
}

/* Highlighted Message */
.message.highlighted {
	background: rgba(240, 240, 241, 0.10);
	padding: 25px 12px;
	border-radius: 8px;
}

.message.highlighted .message-text {
	color: #f0f0f0;
}

/* Section Header */
.section-header {
	color: #e0e0e0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 8px;
	margin-bottom: 8px;
	padding: 0 12px;
}

/* Ad Card */
.ad-card {
	border-radius: 8px;
	margin: 8px 0;
}

.ad-image {
	width: 100%;
	height: 120px;
	background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 12px;
	position: relative;
}

.ad-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ad-buttons {
	display: flex;
	gap: 8px;
	padding: 12px;
	justify-content: flex-end;
}

.ad-btn {
	padding: 6px 12px;
	border-radius: 4px;
	border: none;
	font-size: 12px;
	cursor: pointer;
	font-weight: 500;
}

.ad-btn.secondary {
	background: #4a4a4a;
	color: #e0e0e0;
}

.ad-btn.primary {
	background: #1a1a1a;
	color: #e0e0e0;
}

/* Typing Indicator */
.typing-indicator {
	color: #F0F0F1;
	font-size: 13px;
	font-style: italic;
	font-family: 'Inter';
}

/* Input Box - Fixed at Bottom */
.input-container {
	background: transparent;
	padding: 16px 24px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-shrink: 0;
	backdrop-filter: blur(0.5px);
	position: absolute;
	bottom: 0;
	width: 100%;
}

.input-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
}

.input-avatar img {
	width: 100%;
}

.input-wrapper {
	flex: 1;
	display: flex;
	gap: 8px;
	align-items: center;
	background: #F0EEE5;
	border-radius: 10px;
	padding: 4px 16px;
}

.input-field {
	flex: 1;
	border: none !important;
	background: #F0EEE5;
	outline: none !important;
	color: #333;
	font-size: 14px;
	outline: none;
}

.input-field::placeholder {
	color: #999;
}

.input-btn {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	font-size: 18px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.send-btn {
	width: 40px;
	height: 40px;
	background: #1A1910;
	border: none;
	border-radius: 8px;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transition: all 0.2s;
	padding: 0;
}

.send-btn img {
	width: 50%;
}

.send-btn:hover {
	background: #4a4a4a;
}


/* Your chat styles go here unchanged */


/* =====================================================
📱 RESPONSIVE DESIGN
===================================================== */
@media (max-width: 768px) {
	.main-chat-header {
		gap: 12px;
		padding: 12px 16px;
	}

	.messages-container {
		padding: 12px 16px;
	}

	.input-container {
		padding: 12px 16px;
	}
}

@media only screen and (max-width: 767.5px) {
	.header {
		top: -23px !important;
	}

	.premium-mobile-menu-outer-container {
		margin-top: 17px;
	}
}

@media only screen and (max-width: 1200px) {
	.partners-swiper {
		width: 100% !important;
	}
}

/* Responsive adjustments for mega menu widths */
@media only screen and (min-width: 1085.5px) {
	.premium-mega-content-container {
		width: 1085px !important;
	}
}

@media only screen and (max-width: 1085.5px) {
	.premium-mega-content-container {
		width: 950px !important;
	}
}

@media only screen and (max-width: 950.5px) {
	.premium-mega-content-container {
		width: 850px !important;
	}
}

@media only screen and (max-width: 850.5px) {
	.premium-mega-content-container {
		width: 750px !important;
	}
}

@media only screen and (max-width: 768.5px) {
	.premium-mega-content-container {
		width: 90% !important;
		padding: 0 !important;
	}
}